/* ============================================================
   Chicago First Dates — SITE-WIDE design system ("clean & fiery"): white/ivory canvas, Chicago-flag red accent, charcoal dark sections, brass hairlines.
   Loaded on every PUBLIC page (via _Layout, after site.css). Admin uses a
   separate layout and is unaffected. Bricolage Grotesque (display) + Figtree (body).
   Reusable components (cfd-*) for interior pages; homepage-only bits live in
   cfd-home.css. 2026-07-28.
   ============================================================ */
:root {
    --cfd-ink: #1a1a1f;
    --cfd-ink2: #232329;
    --cfd-red: #e4002b;
    --cfd-red-deep: #b3001f;
    --cfd-coral: #ff6b7a;
    --cfd-mist: #fff0f2;
    --cfd-cream: #fbf6f3;
    --cfd-paper: #ffffff;
    --cfd-brass: #d4a537;
    --cfd-muted: #6b6570;
    --cfd-line: rgba(26,26,31,.12);
    --cfd-display: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif;
    --cfd-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---- global public-page base ---- */
body { font-family: var(--cfd-body); background-color: var(--cfd-paper); }  /* public site rides a warm light canvas (overrides site.css's dark #0f0f0f body). cfd.css is loaded ONLY by the public _Layout, so host/admin/matching layouts keep their own themes. */
h1, h2, h3, h4 { font-family: var(--cfd-display); letter-spacing: -.015em; }

/* designed text wordmark (nav + footer) — Option D: unified Fraunces in white with a rose heart.
   font-family is set explicitly on the spans so no nav rule can override it (fixes nav/footer mismatch). */
.cfd-wordmark { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; line-height: 1; padding: 0; white-space: nowrap; }
.cfd-wordmark .cfd-wm-city,
.cfd-wordmark .cfd-wm-name { font-family: var(--cfd-display); font-weight: 600; color: #fff; letter-spacing: -.005em; font-style: normal; }
.cfd-wordmark .cfd-wm-star { color: var(--cfd-red); }
nav .logo.cfd-wordmark { height: auto; }
nav .logo.cfd-wordmark .cfd-wm-city,
nav .logo.cfd-wordmark .cfd-wm-name { font-size: 1.75rem; }
nav .logo.cfd-wordmark .cfd-wm-star { font-size: 1.15rem; }
.cfd-footer-brand { margin-bottom: 14px; }
.cfd-footer-brand .cfd-wm-city,
.cfd-footer-brand .cfd-wm-name { font-size: 1.7rem; }
.cfd-footer-brand .cfd-wm-star { font-size: 1.15rem; }
@media (max-width: 620px) {
    nav .logo.cfd-wordmark .cfd-wm-city,
    nav .logo.cfd-wordmark .cfd-wm-name { font-size: 1.4rem; }
}

/* refined nav (keeps site.css structure; upgrades type + accent) */
nav .nav-links a { font-family: var(--cfd-body); letter-spacing: .12em; font-weight: 600; }

/* refined footer type */
footer h3 { font-family: var(--cfd-body); letter-spacing: .04em; }
footer .company-info h3 { letter-spacing: .08em; }

/* ---- layout primitives ---- */
.cfd-sec { padding: clamp(60px, 8.5vw, 124px) 24px; background: var(--cfd-paper); color: #2a2530; }  /* light paper canvas + dark text. site.css sets body #0f0f0f (dark), so a plain section MUST paint its own light bg or dark text is invisible. --cream/--mist/--dark and .cfd-cta (all later) override this bg for their dark variants. */
.cfd-sec--cream { background: var(--cfd-cream); }
.cfd-sec--mist { background: linear-gradient(180deg, var(--cfd-mist), var(--cfd-cream)); }
.cfd-sec--dark { background: var(--cfd-ink); color: #fff; }
.cfd-wrap { max-width: 1120px; margin: 0 auto; }
.cfd-narrow { max-width: 760px; margin: 0 auto; }

.cfd-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--cfd-body);
    font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--cfd-red-deep); }
.cfd-eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--cfd-brass); display: inline-block; }
.cfd-sec--dark .cfd-eyebrow { color: var(--cfd-brass); }

.cfd-head { max-width: 660px; margin-bottom: clamp(38px, 5vw, 62px); }
.cfd-head h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); margin-top: 16px; line-height: 1.06; color: var(--cfd-ink); }
.cfd-sec--dark .cfd-head h2 { color: #fff; }
.cfd-head p { color: var(--cfd-muted); margin-top: 14px; font-size: 1.08rem; }
.cfd-sec--dark .cfd-head p { color: rgba(255,255,255,.62); }

/* buttons */
.cfd-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--cfd-body); font-weight: 600;
    font-size: 15.5px; padding: 15px 30px; border-radius: 999px; cursor: pointer; text-decoration: none;
    border: 1.5px solid transparent; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s, color .25s; }
.cfd-btn i, .cfd-btn svg { width: 18px; height: 18px; }
.cfd-btn--primary { background: var(--cfd-red); color: #fff; box-shadow: 0 12px 30px -10px rgba(228,0,43,.6); }
.cfd-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -12px rgba(228,0,43,.7); color: #fff; }
.cfd-btn--dark { background: var(--cfd-ink); color: #fff; }
.cfd-btn--dark:hover { background: var(--cfd-red); transform: translateY(-3px); color: #fff; }
.cfd-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.cfd-btn--ghost:hover { border-color: #fff; transform: translateY(-3px); color: #fff; }
.cfd-btn--outline { background: transparent; color: var(--cfd-ink); border-color: var(--cfd-line); }
.cfd-btn--outline:hover { border-color: var(--cfd-ink); transform: translateY(-3px); color: var(--cfd-ink); }

/* ---- interior PAGE HERO (About, niche pages, etc.) ---- */
.cfd-phero { position: relative; background: var(--cfd-ink); color: #fff; overflow: hidden;
    padding: clamp(88px, 12vw, 150px) 24px clamp(60px, 8vw, 96px); text-align: center; }
.cfd-phero::before { content: ""; position: absolute; inset: -30% -10% auto -10%; height: 150%;
    background: radial-gradient(60% 60% at 50% 8%, rgba(228,0,43,.4), transparent 60%),
                radial-gradient(50% 55% at 85% 100%, rgba(212,165,55,.18), transparent 60%);
    pointer-events: none; }
.cfd-phero__in { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; }
.cfd-phero .cfd-eyebrow { color: var(--cfd-brass); justify-content: center; }
.cfd-phero h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); font-weight: 600; margin: 22px 0 18px; line-height: 1.05; }
.cfd-phero h1 em { font-style: italic; color: var(--cfd-coral); }
.cfd-phero p { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: rgba(255,255,255,.76); max-width: 60ch; margin: 0 auto; line-height: 1.55; }
.cfd-phero__cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---- prose (article content) ---- */
.cfd-prose { color: #2a2530; font-size: 1.08rem; line-height: 1.72; }
.cfd-prose > * + * { margin-top: 1.1em; }
.cfd-prose h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: var(--cfd-ink); margin-top: 1.5em; line-height: 1.1; }
.cfd-prose h3 { font-size: 1.4rem; color: var(--cfd-ink); margin-top: 1.3em; }
.cfd-prose a { color: var(--cfd-red-deep); text-decoration: underline; text-underline-offset: 3px; }
.cfd-prose strong { color: var(--cfd-ink); }
.cfd-prose ul, .cfd-prose ol { padding-left: 1.3em; }
.cfd-prose li { margin-top: .5em; }
/* DB-driven legal text (Terms) can carry legacy inline light-gray colors meant for the old dark
   theme; force it to inherit the readable prose color so it never renders near-invisible on light. */
.cfd-prose [style*="color"] { color: inherit !important; }

/* two-column article + sidebar */
.cfd-two { display: grid; grid-template-columns: 1fr 320px; gap: clamp(36px, 5vw, 72px); align-items: start; }
.cfd-aside { position: sticky; top: 24px; display: grid; gap: 18px; }
.cfd-card { background: var(--cfd-paper); border: 1px solid var(--cfd-line); border-radius: 18px; padding: 26px 26px; color: #4a444f; }
.cfd-card--red { background: linear-gradient(160deg, var(--cfd-mist), var(--cfd-paper)); }
.cfd-card h3 { font-size: 1.3rem; margin-bottom: 12px; color: var(--cfd-ink); }
.cfd-card p { color: #4a444f; font-size: .98rem; }
.cfd-card ul { list-style: none; padding: 0; margin: 0; }
.cfd-card li { padding: 7px 0; border-bottom: 1px solid var(--cfd-line); font-size: .96rem; }
.cfd-card li:last-child { border-bottom: 0; }
.cfd-card a { color: var(--cfd-red-deep); text-decoration: none; }
.cfd-card a:hover { text-decoration: underline; }

/* icon feature cards (generic) */
.cfd-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cfd-fc { background: var(--cfd-paper); border: 1px solid var(--cfd-line); border-radius: 18px; padding: 32px 28px;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.cfd-fc:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(179,0,31,.3); }
.cfd-fc__i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px;
    background: rgba(228,0,43,.12); color: var(--cfd-red-deep); margin-bottom: 18px; }
.cfd-fc__i i, .cfd-fc__i svg { width: 22px; height: 22px; }
.cfd-fc h3 { font-size: 1.35rem; margin-bottom: 10px; color: var(--cfd-ink); }
.cfd-fc p { color: #4a444f; font-size: .98rem; line-height: 1.55; }
/* links inside the feature cards (2026-09-14): the h3 anchors had NO rule and rendered browser-default blue on the live
   locations hub. Headline links inherit the ink colour and turn red on hover; body-copy links match .cfd-prose. */
.cfd-fc h3 a { color: inherit; text-decoration: none; transition: color .2s; }
.cfd-fc h3 a:hover { color: var(--cfd-red); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.cfd-fc p a { color: var(--cfd-red-deep); text-decoration: underline; text-underline-offset: 3px; }

/* steps */
.cfd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cfd-step { padding: 32px 28px; background: var(--cfd-paper); border: 1px solid var(--cfd-line); border-radius: 18px;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.cfd-step:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(179,0,31,.3); }
.cfd-step__n { font-family: var(--cfd-display); font-style: italic; font-size: 3.2rem; line-height: 1; color: var(--cfd-red); }
.cfd-step h3 { font-size: 1.35rem; margin: 12px 0 8px; color: var(--cfd-ink); }
.cfd-step p { color: #4a444f; font-size: .96rem; }

/* faq list */
.cfd-faq { display: grid; gap: 14px; max-width: 820px; margin: 0 auto; }
.cfd-faq details { background: var(--cfd-paper); border: 1px solid var(--cfd-line); border-radius: 14px; padding: 4px 22px; }
.cfd-faq summary { font-family: var(--cfd-display); font-size: 1.22rem; color: var(--cfd-ink); padding: 18px 0; cursor: pointer;
    list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cfd-faq summary::-webkit-details-marker { display: none; }
.cfd-faq summary::after { content: "+"; font-family: var(--cfd-body); color: var(--cfd-red); font-size: 1.5rem; transition: transform .25s; }
.cfd-faq details[open] summary::after { transform: rotate(45deg); }
.cfd-faq details > p { padding: 0 0 20px; color: #4a444f; line-height: 1.65; margin: 0; }

/* location chips */
.cfd-locs { display: flex; flex-wrap: wrap; gap: 12px; }
.cfd-chip { font-family: var(--cfd-body); font-size: 14.5px; font-weight: 500; padding: 11px 20px; border-radius: 999px;
    background: var(--cfd-paper); border: 1px solid var(--cfd-line); color: var(--cfd-ink); text-decoration: none;
    transition: all .25s cubic-bezier(.2,.8,.2,1); }
.cfd-chip:hover { background: var(--cfd-ink); color: #fff; border-color: var(--cfd-ink); transform: translateY(-2px); }
.cfd-chip--all { background: var(--cfd-red); color: #fff; border-color: var(--cfd-red); }
.cfd-chip--all:hover { background: var(--cfd-red-deep); border-color: var(--cfd-red-deep); }

/* testimonials */
.cfd-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cfd-quote { background: var(--cfd-paper); border-radius: 18px; padding: 34px 30px; border: 1px solid var(--cfd-line); position: relative; }
.cfd-quote::before { content: "\201C"; font-family: var(--cfd-display); font-size: 5rem; line-height: 1; color: var(--cfd-red);
    opacity: .28; position: absolute; top: 6px; right: 22px; }
.cfd-quote p { font-size: 1.05rem; color: #2a2530; line-height: 1.55; }
.cfd-quote__by { margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.cfd-quote__av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--cfd-red), var(--cfd-brass));
    display: grid; place-items: center; color: #fff; font-family: var(--cfd-display); font-weight: 600; flex: none; }
.cfd-quote__by strong { display: block; font-size: .98rem; color: var(--cfd-ink); }
.cfd-quote__by span span { font-size: .82rem; color: var(--cfd-muted); }

/* final CTA band */
.cfd-sec.cfd-cta { color: #fff; }
.cfd-cta { background: var(--cfd-ink); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cfd-cta::before { content: ""; position: absolute; inset: -40% -10% auto -10%; height: 160%;
    background: radial-gradient(50% 60% at 50% 0%, rgba(228,0,43,.4), transparent 62%); pointer-events: none; }
.cfd-cta__in { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.cfd-cta .cfd-eyebrow { justify-content: center; color: var(--cfd-brass); }
.cfd-cta h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); color: #fff; margin-top: 16px; }
.cfd-cta h2 em { font-style: italic; color: var(--cfd-coral); }
.cfd-cta p { color: rgba(255,255,255,.72); font-size: 1.1rem; margin: 16px 0 32px; }

@media (max-width: 900px) {
    .cfd-two { grid-template-columns: 1fr; }
    .cfd-aside { position: static; }
    .cfd-cards, .cfd-steps, .cfd-quotes { grid-template-columns: 1fr; }
}

/* Native <select> dropdowns on the dark public forms (Contact, Register, Gift, etc.): render the
   popup in DARK mode (dark bg + light text) instead of the OS's light-gray popup, which left the
   white option text unreadable. Global (not scoped) so it matches tag-helper <select>s too. */
.form-select { color-scheme: dark; }
.form-select option { background-color: #232329; color: #ffffff; }

/* ===== Chicago First Dates additions (2026-09-14) ===== */
:root { --cfd-star: #e4002b; }   /* Chicago-flag red — the wordmark star and small accents only */
.cfd-wordmark .cfd-wm-city,
.cfd-wordmark .cfd-wm-name { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.cfd-wordmark .cfd-wm-star { color: var(--cfd-star); font-size: .85em; margin: 0 2px; transform: translateY(-1px); }
/* the two light-blue stripes of the Chicago flag, used as a hairline divider under the hero */
.cfd-flagstripe { display: flex; flex-direction: column; gap: 5px; padding: 6px 0; background: var(--cfd-ink2); }
.cfd-flagstripe span { display: block; height: 4px; background: #ff6b7a; opacity: .9; }
/* outline button on light sections */
.cfd-btn--outline { background: transparent; color: var(--cfd-ink); border-color: var(--cfd-line); }
.cfd-btn--outline:hover { border-color: var(--cfd-ink); transform: translateY(-3px); color: var(--cfd-ink); }
/* nav fit (2026-09-14): the uppercase wordmark + six links overflowed at ~1024px; tighten both */
nav .logo.cfd-wordmark .cfd-wm-city,
nav .logo.cfd-wordmark .cfd-wm-name { font-size: 1.35rem; letter-spacing: .05em; }
nav .logo.cfd-wordmark .cfd-wm-star { font-size: .95rem; }
nav .nav-links a { letter-spacing: .08em; font-size: .86rem; }
nav .nav-links { gap: clamp(14px, 2vw, 28px); }
@media (max-width: 1180px) { nav .nav-links a { letter-spacing: .05em; font-size: .8rem; } }


/* ===== Palette v2 (2026-09-14): light heroes, red accent ===== */
:root { --cfd-star: #e4002b; --cfd-ivory: #fbf6f3; }
/* interior page hero: ivory canvas, dark type, red accent (was dark navy) */
.cfd-phero { background: var(--cfd-ivory); color: var(--cfd-ink); }
.cfd-phero::before { background: radial-gradient(55% 60% at 50% 0%, rgba(228,0,43,.14), transparent 62%),
                                 radial-gradient(45% 50% at 90% 100%, rgba(212,165,55,.16), transparent 60%); }
.cfd-phero h1 { color: var(--cfd-ink); }
.cfd-phero h1 em { color: var(--cfd-red); }
.cfd-phero p { color: #5a5460; }
.cfd-phero .cfd-eyebrow { color: var(--cfd-red-deep); }
.cfd-phero .cfd-eyebrow::before { background: var(--cfd-red); }
.cfd-phero .cfd-btn--ghost { color: var(--cfd-ink); border-color: rgba(26,26,31,.28); }
.cfd-phero .cfd-btn--ghost:hover { border-color: var(--cfd-ink); color: var(--cfd-ink); }
/* eyebrow hairline in red on light sections */
.cfd-eyebrow::before { background: var(--cfd-red); }
.cfd-sec--dark .cfd-eyebrow::before, .cfd-cta .cfd-eyebrow::before { background: var(--cfd-brass); }
/* old-template hero (town/region/custom pages): ivory + dark type */
.hero-about, .hero-sitemap { background: radial-gradient(55% 60% at 50% 0%, rgba(228,0,43,.14), transparent 62%), var(--cfd-ivory); }
.hero-about h1, .hero-sitemap h1 { color: var(--cfd-ink) !important; }
.hero-about p, .hero-sitemap p { color: #5a5460 !important; }
/* nav: light bar with dark wordmark on public pages */
body:not(.admin-body) nav { background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(26,26,31,.08); }
body:not(.admin-body) nav .logo.cfd-wordmark .cfd-wm-city,
body:not(.admin-body) nav .logo.cfd-wordmark .cfd-wm-name { color: var(--cfd-ink); }
body:not(.admin-body) nav .nav-links a { color: #3b3540; }
body:not(.admin-body) nav .nav-links a:hover, body:not(.admin-body) nav .nav-links a.nav-active { color: var(--cfd-red); }
body:not(.admin-body) nav .hamburger span { background: var(--cfd-ink); }
/* mobile dropdown matches the light nav.
   Selector specificity matters here: site.css colours the links with `.mobile-menu ul li a` (0,1,3), so a plain
   `.mobile-menu a` (0,1,1) override LOSES and the links stay white-on-white - only the current page's link showed,
   because `.mobile-menu a.nav-active` (0,2,1) did win. Found live on 2026-09-14; keep these at (0,1,3)+. */
.mobile-menu { background: rgba(255,255,255,.98); border-bottom: 1px solid rgba(26,26,31,.08); box-shadow: 0 10px 30px rgba(26,26,31,.12); }
.mobile-menu ul li a { color: #3b3540; }
.mobile-menu ul li a:hover, .mobile-menu ul li a.nav-active { color: var(--cfd-red); }
/* old-template heroes: no more fixed 60vh band — size to content */
.hero-about, .hero-sitemap { height: auto; min-height: 0; padding: clamp(110px, 13vw, 168px) 24px clamp(48px, 6vw, 72px); }
/* Chicago: the hub / city / community pages (body.niche-dating-page) keep the FULL footer (njfd trimmed it) */
.niche-dating-page footer .footer-content { display: block; }
.niche-dating-page footer { padding-top: 0; }