/* Dhahabu (gold) — classic, formal, luxe. Editorial black-tie: Cartier/
   Vogue Weddings reference, not a resort or garden theme.

   Editorial pass 2: broke the "heading, gold line, content" rhythm that
   repeated identically down the page — Story/Location became mirrored
   asymmetric splits, Details an editorial numbered list, Schedule a real
   timeline, paper-grain behind the whole theme.

   Editorial pass 3 (this file, part of the cross-theme "give each theme
   its own DNA" pass): pass 2 fixed the rhythm but still leaned on cards —
   shadowed images, a hover-lift-and-shadow Registry card, a glow-ringed
   portrait. This pass strips the remaining decoration in favour of
   typography actually doing the work: a genuine drop-cap on the Story
   copy (::first-letter, no markup change), flat unshadowed photography
   throughout, a thinner single-line portrait frame, and Gallery
   reassigned to classic column masonry (Dhahabu's now-distinct pattern —
   Bahari/Kijani/Waridi each get their own gallery technique in this same
   pass, no theme repeats another's). Markup mechanics (editMode contract,
   shared rsvpForm.ejs) are unchanged — presentation only. */

body.theme-dhahabu {
  --dc-brown: #2E2018;
  --dc-brown-muted: #7A6A5B;
  --dc-gold: #C9A227;
  --dc-gold-soft: rgba(201, 162, 39, .35);
  --dc-cream: #F5EDE3;
  --dc-white: #FFFFFF;

  --dh-space-xs: 12px;
  --dh-space-sm: 20px;
  --dh-space-md: 36px;
  --dh-space-lg: 64px;
  --dh-space-xl: 104px;
  --dh-space-2xl: 156px;

  /* h1 pushed dramatically larger this pass — "wedding names should
     dominate the page" is a literal instruction, not a suggestion.
     Pushed further still (7rem -> 7.8rem ceiling) as part of stripping
     decoration in favour of type doing the work typography-first
     themes lean on. */
  --dh-h1: clamp(3.2rem, 1.4rem + 7.6vw, 7.8rem);
  --dh-h2: clamp(1.9rem, 1.4rem + 2vw, 3.1rem);
  --dh-h3: clamp(1.15rem, 1rem + .5vw, 1.35rem);
  --dh-eyebrow: .74rem;

  --dh-radius: 2px;
  --dh-shadow: 0 24px 60px -24px rgba(46, 32, 24, .28);

  position: relative;
  font-family: var(--dhahabu-body-font);
  background: var(--dc-cream);
  color: var(--dc-brown);
  line-height: 1.7;
}
/* Curated font-pairing alternates (lib/themes.js's THEMES.dhahabu.
   fontPairings) — redeclaring the custom property on body[data-font-
   pairing] wins over :root's default without touching fonts.css, and
   every h1/h2/h3/body rule below already reads var(--dhahabu-*-font). */
body.theme-dhahabu[data-font-pairing="cormorant-work-sans"] {
  --dhahabu-header-font: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --dhahabu-body-font: "Work Sans", "Helvetica Neue", Arial, sans-serif;
}
body.theme-dhahabu[data-font-pairing="dm-serif-karla"] {
  --dhahabu-header-font: "DM Serif Display", Georgia, serif;
  --dhahabu-body-font: "Karla", "Helvetica Neue", Arial, sans-serif;
}
body.theme-dhahabu h1, body.theme-dhahabu h2, body.theme-dhahabu h3 { font-family: var(--dhahabu-header-font); font-weight: 400; letter-spacing: .01em; }
body.theme-dhahabu h1 { font-size: var(--dh-h1); line-height: .98; margin: 0; }
body.theme-dhahabu h2 { font-size: var(--dh-h2); line-height: 1.1; margin: 0; }
body.theme-dhahabu p { line-height: 1.75; }

/* Paper grain — a fixed, near-invisible noise layer behind every section
   so the large cream/white fields read as tactile paper rather than flat
   colour rectangles. Pure CSS (inline SVG feTurbulence data URI), no
   image request, no JS. */
body.theme-dhahabu::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .035; mix-blend-mode: multiply;
}
body.theme-dhahabu > * { position: relative; z-index: 1; }

.dhahabu-centered { text-align: center; max-width: 640px; }
.dhahabu-eyebrow { display: block; margin-bottom: var(--dh-space-xs); color: var(--dc-gold); font-size: var(--dh-eyebrow); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.dhahabu-rule { width: 48px; height: 1px; background: var(--dc-gold); margin: var(--dh-space-sm) auto var(--dh-space-md); border: none; position: relative; }
.dhahabu-rule::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; background: var(--dc-gold);
  transform: translate(-50%, -50%) rotate(45deg);
}
.dhahabu-rule-left { margin-left: 0; }

/* Buttons */
.dhahabu-hero-cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 40px; border: 1px solid var(--dc-gold); border-radius: var(--dh-radius);
  color: var(--dc-brown); text-decoration: none; text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; font-weight: 600;
  font-family: var(--dhahabu-body-font); position: relative; overflow: hidden; isolation: isolate; transition: color .35s ease, box-shadow .35s ease;
}
.dhahabu-hero-cta::before {
  content: ""; position: absolute; inset: 0; background: var(--dc-gold); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; z-index: -1;
}
.dhahabu-hero-cta:hover::before, .dhahabu-hero-cta:focus-visible::before { transform: scaleX(1); }
.dhahabu-hero-cta:hover, .dhahabu-hero-cta:focus-visible { color: var(--dc-white); box-shadow: var(--dh-shadow); }
.dhahabu-hero-cta:focus-visible { outline: 2px solid var(--dc-gold); outline-offset: 3px; }
.dhahabu-hero-cta svg { width: 15px; height: 15px; }

/* ============ SECTION NAV — sticky wayfinding bar so a guest can jump
   straight to Story/Schedule/Location/Registry/RSVP instead of scrolling
   past everything. Only rendered when there's more than the hero to link
   to (index.ejs). Sits in normal flow above the hero, not overlaid, so it
   never covers the portrait/glow. ============ */
/* Specificity note: body.theme-dhahabu > * (above) sets position:relative
   and z-index:1 on every direct child, including this nav — a bare
   .dhahabu-nav selector loses that fight (lower specificity), so this is
   qualified with body.theme-dhahabu to actually win and keep it sticky. */
body.theme-dhahabu .dhahabu-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(245, 237, 227, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--dc-gold-soft);
}
.dhahabu-nav-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.dhahabu-nav-brand {
  flex-shrink: 0; font-family: var(--dhahabu-header-font); font-style: italic; font-size: 1.05rem;
  color: var(--dc-brown); text-decoration: none; letter-spacing: .04em;
}
.dhahabu-nav-toggle { color: var(--dc-brown); }
.dhahabu-nav-links { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; }
.dhahabu-nav-links::-webkit-scrollbar { display: none; }
.dhahabu-nav-links a {
  position: relative; padding: 22px 0; color: var(--dc-brown-muted); text-decoration: none; white-space: nowrap;
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: color .25s ease;
}
.dhahabu-nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 1px; background: var(--dc-gold);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.dhahabu-nav-links a:hover, .dhahabu-nav-links a:focus-visible { color: var(--dc-brown); }
.dhahabu-nav-links a:hover::after, .dhahabu-nav-links a:focus-visible::after { transform: scaleX(1); }
@media (max-width: 640px) {
  .dhahabu-nav-brand { display: none; }
  .dhahabu-nav-inner { padding: 0 16px; }
  .dhahabu-nav-toggle { display: flex; }
  .dhahabu-nav-links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; max-height: 0; overflow: hidden;
    background: var(--dc-cream); border-bottom: 1px solid var(--dc-gold-soft); transition: max-height .3s ease;
  }
  .dhahabu-nav-links.is-open { max-height: 70vh; overflow-y: auto; }
  .dhahabu-nav-links a { padding: 16px 20px; border-top: 1px solid var(--dc-gold-soft); }
  .dhahabu-nav-links a::after { display: none; }
}

/* Anchor-jump cushion so the sticky nav never covers a section's heading
   the moment a guest lands on it. */
body.theme-dhahabu .wedding-section, body.theme-dhahabu .rsvp-section { scroll-margin-top: 88px; }

/* ============ HERO — the one memorable moment: oversized names, a soft
   radial glow behind the portrait, generous air above and below. Portrait
   frame deliberately thin/single-line (no glow ring) — a badge-like
   multi-ring frame reads as decorative, which fights the "images
   secondary to typography" mandate this pass pushes further. ============ */
.dhahabu-hero { padding: var(--dh-space-md) 24px; text-align: center; position: relative; overflow: hidden; }
.dhahabu-hero::before {
  content: ""; position: absolute; top: 8%; left: 50%; width: 640px; height: 640px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(201, 162, 39, .12), transparent 70%); pointer-events: none;
}
.dhahabu-hero-card { max-width: 680px; margin: 0 auto; position: relative; }
.dhahabu-hero-portrait { width: 400px; height: 400px; margin: 0 auto var(--dh-space-xs); padding: 3px; border: 1px solid var(--dc-gold); border-radius: 50%; }
.dhahabu-hero-portrait img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.dhahabu-hero-card h1 { margin: 0 0 var(--dh-space-sm); }
.dhahabu-hero-rule { width: 56px; height: 1px; background: var(--dc-gold); margin: var(--dh-space-md) auto; border: none; }
.dhahabu-tagline { font-family: var(--dhahabu-header-font); font-style: italic; font-size: 1.3rem; margin: 0 0 var(--dh-space-xs); }
.dhahabu-hero-card > p:not(.dhahabu-tagline) { margin: 0 0 var(--dh-space-lg); letter-spacing: .08em; font-size: .92rem; color: var(--dc-brown-muted); }

/* ============ OUR STORY — asymmetric split, image left. Image carries no
   shadow/frame of its own now — a flat, cropped photograph reads as more
   editorial than a "product shot with a drop shadow," and keeps the
   typography (the drop cap below) the thing that actually draws the eye. ============ */
.dhahabu-story { background: var(--dc-white); }
.dhahabu-story-inner { display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--dh-space-xl); align-items: center; max-width: 1120px; }
.dhahabu-story-image { margin: 0; }
.dhahabu-story-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.dhahabu-story-text { text-align: left; }
.dhahabu-story-text .dhahabu-rule { margin-left: 0; }
.dhahabu-story p { color: var(--dc-brown-muted); font-size: 1.08rem; text-align: left; }
/* Drop cap — pure CSS (::first-letter), no markup change: the couple's
   own story copy gets one genuine editorial-magazine typographic moment
   instead of starting like a plain paragraph. */
.dhahabu-story p::first-letter {
  float: left; font-family: var(--dhahabu-header-font); font-size: 3.6em; line-height: .78; margin: .03em .1em 0 0; color: var(--dc-gold);
}
/* No photo uploaded yet (real guest view — editMode always renders the
   placeholder div, so this only triggers pre-photo, not mid-edit): fall
   back to a single centred column instead of a half-empty grid. */
.dhahabu-story-text:only-child { grid-column: 1 / -1; max-width: 640px; margin: 0 auto; text-align: center; }
.dhahabu-story-text:only-child .dhahabu-rule { margin: var(--dh-space-sm) auto var(--dh-space-md); }
.dhahabu-story-text:only-child p { text-align: center; }
/* A floated drop cap fights centered text (the paragraph would sit
   lopsided around the float) — no photo yet means no split layout, so no
   drop cap either, just a clean centered paragraph. */
.dhahabu-story-text:only-child p::first-letter { all: unset; }

/* ============ EVENT DETAILS — an editorial numbered list, not a card
   grid: large gold ordinal, hairline row dividers, generous air. ============ */
.dhahabu-details { background: var(--dc-cream); }
.dhahabu-details .wedding-container { max-width: 760px; }
.dhahabu-details-head { margin-bottom: var(--dh-space-lg); text-align: left; }
.dhahabu-details-list { border-top: 1px solid var(--dc-gold-soft); }
.dhahabu-details-row { display: grid; grid-template-columns: auto 1fr; gap: var(--dh-space-lg); align-items: baseline; padding: var(--dh-space-lg) 0; border-bottom: 1px solid var(--dc-gold-soft); text-align: left; }
.dhahabu-details-num { font-family: var(--dhahabu-header-font); font-size: 2.6rem; line-height: 1; color: var(--dc-gold); }
.dhahabu-details-row h3 { margin: 0 0 10px; font-size: 1.5rem; }
.dhahabu-details-row p { margin: 3px 0; color: var(--dc-brown-muted); font-size: .95rem; }
.dhahabu-details-row p:first-of-type { color: var(--dc-brown); font-weight: 500; }

/* ============ SCHEDULE — a real vertical timeline: time column, gold
   spine + dots, content column. Time is the visual anchor, per brief. ============ */
.dhahabu-schedule { background: var(--dc-white); }
.dhahabu-schedule .wedding-container { max-width: 720px; }
.dhahabu-schedule-head { text-align: left; margin-bottom: var(--dh-space-xl); }
.dhahabu-timeline { list-style: none; margin: 0; padding: 0; }
.dhahabu-timeline li {
  position: relative; display: grid; grid-template-columns: 92px 28px 1fr; column-gap: var(--dh-space-sm);
  padding: var(--dh-space-md) 0; text-align: left;
}
.dhahabu-timeline li::before {
  content: ""; position: absolute; left: 105px; top: 0; bottom: 0; width: 1px; background: var(--dc-gold-soft);
}
.dhahabu-timeline li:first-child::before { top: 50%; }
.dhahabu-timeline li:last-child::before { bottom: 50%; }
.dhahabu-timeline-dot { grid-column: 2; justify-self: center; width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; background: var(--dc-gold); position: relative; z-index: 1; }
.dhahabu-timeline-time { grid-column: 1; padding-top: 4px; color: var(--dc-gold); letter-spacing: .1em; text-transform: uppercase; font-size: var(--dh-eyebrow); font-weight: 600; text-align: right; }
.dhahabu-timeline-content { grid-column: 3; }
.dhahabu-timeline-content b { font-family: var(--dhahabu-header-font); font-weight: 400; font-size: 1.3rem; }
.dhahabu-timeline-content p { margin: 6px 0 0; color: var(--dc-brown-muted); }

/* ============ LOCATION — mirrors Story: image right this time, venue
   info left, so the two split sections alternate rather than repeat. ============ */
.dhahabu-location { background: var(--dc-cream); }
.dhahabu-location-inner { display: grid; grid-template-columns: 1fr .95fr; gap: var(--dh-space-xl); align-items: center; max-width: 1120px; }
.dhahabu-location-text { order: 1; text-align: left; }
.dhahabu-location-image { order: 2; margin: 0; }
.dhahabu-location-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.dhahabu-location-venue { font-family: var(--dhahabu-header-font); font-size: 1.8rem; margin: 0 0 var(--dh-space-xs); }
.dhahabu-location-text p { text-align: left; }
.dhahabu-location-text .dhahabu-rule { margin-left: 0; }
.dhahabu-location-text .dhahabu-hero-cta { margin-top: var(--dh-space-sm); }
/* No venue photo yet — same single-column fallback as Our Story. */
.dhahabu-location-text:only-child { grid-column: 1 / -1; max-width: 560px; margin: 0 auto; text-align: center; }
.dhahabu-location-text:only-child .dhahabu-eyebrow, .dhahabu-location-text:only-child .dhahabu-rule { text-align: center; margin-left: auto; margin-right: auto; }
.dhahabu-location-text:only-child p { text-align: center; }

/* ============ REGISTRY — wish list, not ecommerce: no card border,
   shadow-on-hover only, more air between items. ============ */
.dhahabu-registry { background: var(--dc-white); }
.dhahabu-registry .dhahabu-centered { max-width: 1040px; }
.dhahabu-registry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--dh-space-lg); margin-top: var(--dh-space-xl); text-align: left; }
.dhahabu-registry-card { background: var(--dc-white); }
.dhahabu-registry-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; margin-bottom: var(--dh-space-sm); transition: transform .5s ease; }
.dhahabu-registry-card:hover img { transform: scale(1.03); }
.dhahabu-registry-card-body { padding: 0; }
.dhahabu-registry-category { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--dc-gold); }
.dhahabu-registry-card h3 { margin: 8px 0; font-size: 1.15rem; }
.dhahabu-registry-price { margin: 0 0 var(--dh-space-xs); color: var(--dc-brown-muted); }
.dhahabu-registry-card .dhahabu-hero-cta { padding: 9px 20px; font-size: .66rem; }

/* ============ RSVP — a warm invitation card, not a search box. ============ */
.dhahabu-rsvp {
  background: radial-gradient(ellipse at 50% 0%, rgba(201, 162, 39, .09), transparent 60%), var(--dc-cream);
}
.dhahabu-rsvp .wedding-container > h2 { text-align: center; }
.dhahabu-rsvp .rsvp-card {
  background: var(--dc-white); border: 1px solid var(--dc-gold); border-radius: var(--dh-radius); box-shadow: var(--dh-shadow);
  padding: var(--dh-space-lg) var(--dh-space-md);
}
.dhahabu-rsvp .rsvp-intro { color: var(--dc-brown-muted); max-width: 480px; margin: 0 auto var(--dh-space-lg); text-align: center; }
.dhahabu-rsvp .field label { font-family: var(--dhahabu-body-font); letter-spacing: .04em; text-transform: uppercase; font-size: .7rem; color: var(--dc-brown-muted); }
.dhahabu-rsvp .field input, .dhahabu-rsvp .field select, .dhahabu-rsvp .field textarea, .dhahabu-rsvp input#rsvpNameSearch {
  border: 1px solid var(--dc-gold-soft); border-radius: var(--dh-radius); background: var(--dc-cream); transition: border-color .2s ease, box-shadow .2s ease;
}
.dhahabu-rsvp .field input:focus, .dhahabu-rsvp .field select:focus, .dhahabu-rsvp .field textarea:focus, .dhahabu-rsvp input#rsvpNameSearch:focus {
  outline: none; border-color: var(--dc-gold); box-shadow: 0 0 0 3px rgba(201, 162, 39, .18); background: var(--dc-white);
}
.dhahabu-rsvp .btn-rsvp-submit {
  display: block; width: 100%; margin-top: var(--dh-space-sm); padding: 17px; border: none; border-radius: var(--dh-radius);
  background: var(--dc-gold); color: var(--dc-brown); font-family: var(--dhahabu-body-font); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; font-size: .78rem; cursor: pointer; transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.dhahabu-rsvp .btn-rsvp-submit:hover { background: var(--dc-brown); color: var(--dc-white); box-shadow: var(--dh-shadow); }
.dhahabu-rsvp .btn-rsvp-submit:focus-visible { outline: 2px solid var(--dc-gold); outline-offset: 3px; }
.dhahabu-rsvp .rsvp-message {
  text-align: center; padding: var(--dh-space-md) 0; font-family: var(--dhahabu-header-font); font-size: 1.15rem;
  animation: dhahabuRsvpIn .6s ease both;
}
@keyframes dhahabuRsvpIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* FAQ */
.dhahabu-faq { background: var(--dc-white); }
.dhahabu-faq-list { text-align: left; border-top: 1px solid var(--dc-gold-soft); }
.dhahabu-faq-list details { border-bottom: 1px solid var(--dc-gold-soft); padding: var(--dh-space-md) 0; }
.dhahabu-faq-list summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--dhahabu-header-font); font-size: 1.2rem; font-weight: 400; letter-spacing: .01em;
}
.dhahabu-faq-list summary::-webkit-details-marker { display: none; }
.dhahabu-faq-list summary::after {
  content: "+"; flex-shrink: 0; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--dc-gold); border-radius: 50%; font-size: 1rem; color: var(--dc-gold); transition: transform .25s ease;
}
.dhahabu-faq-list details[open] summary::after { content: "\2013"; }
.dhahabu-faq-list p { margin: var(--dh-space-sm) 0 0; color: var(--dc-brown-muted); }

/* ============ GALLERY — classic masonry: Dhahabu's signature gallery
   pattern (deliberately reassigned here — the other three themes each get
   their own distinct gallery technique: Bahari horizontal-scroll, Kijani
   polaroid-scatter, Waridi magazine-collage). Restrained on purpose: real
   photographs at their own natural aspect ratio, a thin caption below
   rather than an overlay, no rotation/scatter — "classic," not novelty. ============ */
.dhahabu-gallery { background: var(--dc-cream); }
.dhahabu-gallery-grid { column-count: 4; column-gap: var(--dh-space-sm); }
.dhahabu-gallery-grid figure { margin: 0 0 var(--dh-space-sm); break-inside: avoid; overflow: hidden; }
.dhahabu-gallery-grid img { width: 100%; display: block; object-fit: cover; cursor: zoom-in; transition: transform .6s ease; }
.dhahabu-gallery-grid figure:hover img { transform: scale(1.03); }
.dhahabu-gallery-grid figcaption { padding: 10px 2px 0; font-size: .78rem; color: var(--dc-brown-muted); }

@media (max-width: 900px) {
  .dhahabu-gallery-grid { column-count: 2; }
}
@media (max-width: 560px) {
  .dhahabu-gallery-grid { column-count: 1; }
}

@media (max-width: 900px) {
  .dhahabu-story-inner, .dhahabu-location-inner { grid-template-columns: 1fr; }
  .dhahabu-location-text { order: 2; }
  .dhahabu-location-image { order: 1; }
}

@media (max-width: 768px) {
  .dhahabu-hero { padding: 80px 20px; }
  .dhahabu-hero-portrait { width: 200px; height: 200px; }
  .dhahabu-details-row { grid-template-columns: 1fr; gap: var(--dh-space-xs); }
  .dhahabu-timeline li { grid-template-columns: 68px 22px 1fr; }
  .dhahabu-timeline li::before { left: 79px; }
  .dhahabu-registry-grid { grid-template-columns: 1fr; }
  .dhahabu-registry .dhahabu-centered { max-width: 100%; }
}