/*
  Palette pulled directly from Lance's GoDaddy Website Builder draft theme
  (confirmed live in the editor 08/31/26: white / #2111D1 / black, "Modern"
  theme). He confirmed "colors, fonts are all favorable" on this exact
  palette. Font pairing is the documented brand pairing from the vault
  (Playfair Display + Jost) -- the browser session dropped right as we were
  confirming the exact font names in the GoDaddy panel, so double check
  those two names against the editor's Fonts tab next time you're in there.
*/
:root {
  --cream: #ffffff;
  --navy: #2111d1;
  --steel-blue: #4a3ee0;
  --white: #ffffff;
  --black: #111111;
  --ink: #16161a;
  --gold-accent: #2111d1;
  --border: #e4e4ec;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Jost', 'Segoe UI', sans-serif;

  /* Public-site dark theme (2026-09-01: Lance wants the marketing site
     black/sleek/modern; CRM intentionally stays on the light theme above,
     so these are only ever applied under body.public-site). */
  --dark-bg: #0b0b0d;
  --dark-surface: #18181c;
  --dark-surface-2: #212127;
  --dark-text: #f3f3f1;
  --dark-text-muted: #a3a3ad;
  --dark-border: #2b2b32;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

a { color: var(--navy); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  margin-top: 0;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Header / Nav ---- */
header.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-lockup img.primary-logo {
  height: 48px;
  width: auto;
}

.brand-lockup .brand-text {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--navy);
  font-weight: 700;
}

nav.main-nav a {
  margin-left: 22px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
}

nav.main-nav a:hover { color: var(--navy); }

/* Small screens: the logo + 5 nav links no longer fit on one line, so stack
   the logo above a centered, evenly-wrapping nav row instead of letting the
   links break mid-row wherever they happen to run out of space. */
@media (max-width: 680px) {
  .header-inner {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
  }
  nav.main-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 18px;
  }
  nav.main-nav a { margin-left: 0; }
}

/* Brokerage disclosure: visible, secondary -- never the lead mark */
.brokerage-strip {
  background: var(--black);
  color: var(--white);
  font-size: 0.78rem;
  text-align: center;
  padding: 5px 10px;
  letter-spacing: .03em;
}

.brokerage-strip img {
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  filter: brightness(0) invert(1);
}

/* ---- Hero ---- */
.hero {
  position: relative;
}

.hero img {
  width: 100%;
  max-height: 620px;
  object-fit: cover;
}

.hero-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(27,42,74,0.85), rgba(27,42,74,0));
  color: var(--white);
  padding: 60px 24px 28px;
  text-align: center;
}

.hero-caption h1 {
  color: var(--white);
  font-size: 2.4rem;
  margin-bottom: 8px;
}

.hero-caption p { margin: 0 0 16px; font-size: 1.05rem; }

/* Small screens: width:100% on the hero photo makes it much shorter (the
   photo keeps its aspect ratio), but the caption text below kept its full
   desktop size -- so the caption block ended up taller than the now-short
   photo and covered the top of it. Give the photo a set height on phones
   and shrink the caption to match, instead of letting text size decide
   how much of the photo stays visible. */
@media (max-width: 700px) {
  .hero img { height: 260px; object-fit: cover; }
  .hero-caption { padding: 22px 16px 16px; }
  .hero-caption h1 { font-size: 1.5rem; margin-bottom: 6px; }
  .hero-caption p { font-size: 0.92rem; margin-bottom: 12px; }
  .hero-caption .btn { padding: 10px 20px; font-size: 0.92rem; }
}

.btn {
  display: inline-block;
  background: var(--gold-accent);
  color: var(--white);
  padding: 12px 26px;
  border-radius: 3px;
  text-decoration: none;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 1rem;
}

.btn:hover { background: var(--navy); }

.btn-outline {
  background: transparent;
  border: 1px solid var(--navy);
  color: var(--navy);
}

/* ---- Sections ---- */
section { padding: 56px 0; }
section.alt { background: var(--white); }

.section-title {
  text-align: center;
  margin-bottom: 36px;
}

.section-title p {
  color: var(--steel-blue);
  max-width: 620px;
  margin: 10px auto 0;
}

/* ---- Reviews ---- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}

.review-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px;
}

.review-card .stars { color: var(--gold-accent); letter-spacing: 2px; margin-bottom: 8px; }
.review-card .review-name { font-weight: 600; color: var(--navy); }
.review-card .review-date { font-size: 0.82rem; color: #8a8f99; margin-bottom: 10px; }
.review-card .review-text { font-size: 0.95rem; }

/* ---- Forms ---- */
form.stacked label {
  display: block;
  font-weight: 600;
  margin: 14px 0 6px;
  font-size: 0.9rem;
}

form.stacked input, form.stacked textarea, form.stacked select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 1rem;
}

form.stacked textarea { min-height: 120px; }

.alert-success {
  background: #e8f3e8;
  border: 1px solid #b6d9b6;
  color: #2e5c2e;
  padding: 14px 18px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.alert-error {
  background: #fbeaea;
  border: 1px solid #e6b6b6;
  color: #7a2e2e;
  padding: 10px 16px;
  border-radius: 4px;
  margin-bottom: 16px;
}

/* ---- Footer ---- */
footer.site-footer {
  background: var(--black);
  color: var(--white);
  padding: 34px 0;
  font-size: 0.9rem;
  text-align: center;
}

footer.site-footer a { color: var(--white); }

/* ---- CRM (kept visually distinct from the public site, function over form) ---- */
.crm-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  font-family: var(--font-body);
}

.crm-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

table.crm-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
}

table.crm-table th, table.crm-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}

table.crm-table th { background: #f0ede2; }

/* Small screens: a 6-column table can't shrink to fit a phone without
   becoming unreadable, so let it scroll sideways inside its own row
   instead of squeezing the columns or overflowing the whole page. */
@media (max-width: 700px) {
  table.crm-table { display: block; overflow-x: auto; }
}

.tag-chip {
  display: inline-block;
  background: var(--steel-blue);
  color: var(--white);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 0.76rem;
  margin: 1px 3px 1px 0;
}

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 0.78rem;
  font-weight: 600;
  background: #e2e8ef;
  color: var(--navy);
  text-transform: capitalize;
}

.crm-filters { margin-bottom: 16px; }
.crm-filters select { padding: 6px 10px; margin-right: 10px; }

.tasks-panel {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.task-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.task-row:last-child { border-bottom: none; }

.task-title { font-weight: 600; }
.task-contact { color: #666; font-size: 0.88rem; margin-left: 8px; }
.task-contact a { color: var(--navy); }
.task-due-date { display: block; font-size: 0.8rem; color: #888; margin-top: 2px; }

.task-overdue { border-left: 3px solid #a33; padding-left: 10px; margin-left: -10px; }
.task-overdue .task-due-date { color: #a33; font-weight: 600; }

.crm-login-box {
  max-width: 360px;
  margin: 80px auto;
  background: var(--white);
  padding: 30px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* ---- Public site dark theme ----
   Everything below is scoped to body.public-site so none of it can ever
   leak into the CRM templates, which keep the light theme above on purpose. */

body.public-site {
  background: var(--dark-bg);
  color: var(--dark-text);
}

.public-site header.site-header {
  background: var(--dark-surface);
  border-bottom: 1px solid var(--dark-border);
}

.public-site nav.main-nav a { color: var(--dark-text); }
.public-site nav.main-nav a:hover { color: var(--navy); }

.public-site .brokerage-strip {
  border-top: 1px solid var(--dark-border);
}

.public-site section.alt { background: var(--dark-surface); }

.public-site .review-card {
  background: var(--dark-surface);
  border: 1px solid var(--dark-border);
}

.public-site .review-card .review-date { color: var(--dark-text-muted); }
.public-site .review-card .review-text { color: var(--dark-text); }

.public-site form.stacked input,
.public-site form.stacked textarea,
.public-site form.stacked select {
  background: var(--dark-surface-2);
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
}

.public-site form.stacked input::placeholder,
.public-site form.stacked textarea::placeholder {
  color: var(--dark-text-muted);
}

.public-site .alert-success {
  background: rgba(46, 92, 46, 0.25);
  border: 1px solid #3a6b3a;
  color: #a8e6a8;
}

.public-site .alert-error {
  background: rgba(122, 46, 46, 0.25);
  border: 1px solid #7a3a3a;
  color: #f0a8a8;
}

.public-site footer.site-footer {
  border-top: 1px solid var(--dark-border);
}

.public-site .muted-text { color: var(--dark-text-muted); }

/* ---- Follow Along social section (Home page) ---- */
.social-follow-grid {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
}

.social-icon-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  width: 110px;
}

.public-site .social-icon-badge { color: var(--dark-text); }

.social-icon-badge .icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

.social-icon-badge .icon-circle svg { width: 30px; height: 30px; }

.social-icon-badge:hover .icon-circle { transform: translateY(-4px); }

.social-icon-badge .social-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.icon-circle.icon-instagram { background: radial-gradient(circle at 30% 110%, #ffdb8b 0%, #ee2a7b 40%, #6228d7 100%); }
.icon-circle.icon-facebook { background: #1877f2; }
.icon-circle.icon-youtube { background: #ff0000; }

/* ---- Interactive quizzes (Buyer Readiness / Seller Motivation) ----
   Deliberately its OWN look, not the site's black dark theme -- built to
   match the existing Instagram Story/Carousel quiz graphics exactly (same
   navy sampled from the "Southern" wordmark in the logo, same white
   reversed logo, same white answer cards), so it reads as the same quiz
   Lance already posts, just playable on the website. */
:root {
  --quiz-navy: #143a7c;
  --quiz-navy-deep: #0e2a5c;
  --quiz-gold: #c9a66d;
}

.quiz-shell {
  background: var(--quiz-navy);
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
}

.quiz-card {
  width: 100%;
  max-width: 440px;
  text-align: center;
  color: var(--white);
}

.quiz-brand img {
  max-width: 190px;
  margin: 0 auto 22px;
}

.quiz-progress {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.65);
  margin-bottom: 18px;
}

.quiz-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  color: var(--quiz-gold);
  margin: 0 0 10px;
  font-weight: 600;
}

.quiz-title, .quiz-question, .quiz-result-label {
  font-family: var(--font-display);
  color: var(--white);
  font-size: 1.7rem;
  line-height: 1.3;
  margin: 0 0 14px;
}

.quiz-qnum {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 10px;
}

.quiz-subtitle {
  color: rgba(255,255,255,0.82);
  font-size: 0.98rem;
  margin: 0 0 26px;
}

.quiz-cta-text {
  color: rgba(255,255,255,0.75);
  font-size: 0.92rem;
  margin-bottom: 22px;
}

.quiz-btn {
  display: inline-block;
  background: var(--quiz-gold);
  color: var(--quiz-navy-deep);
  padding: 13px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
}

.quiz-btn:hover { opacity: 0.9; }
.quiz-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.quiz-arrow { display: inline-block; margin-left: 6px; }

.quiz-choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 10px;
}

.quiz-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 14px 18px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.1s ease;
}

.quiz-choice:hover { border-color: var(--quiz-gold); }
.quiz-choice.selected { border-color: var(--quiz-gold); transform: scale(0.99); }

.quiz-choice-badge {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--quiz-navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}

.quiz-choice-text { flex: 1; }

.quiz-form {
  text-align: left;
}

.quiz-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 14px 0 6px;
  color: rgba(255,255,255,0.85);
}

.quiz-form input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
}

.quiz-form input::placeholder { color: rgba(255,255,255,0.5); }

.quiz-form .quiz-btn {
  width: 100%;
  margin-top: 22px;
}

.quiz-error {
  color: #ffb3b3;
  font-size: 0.88rem;
  margin-top: 12px;
  text-align: center;
}

.quiz-footer {
  margin-top: 36px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
}

@media (max-width: 480px) {
  .quiz-title, .quiz-question, .quiz-result-label { font-size: 1.4rem; }
}