/* ============================================================
   site-v2.css — the site's aesthetic system (folded in from the
   former v1/v2 toggle; now always on).

   One lavender + one terracotta instead of ~5 near-purples,
   Cormorant Garamond for every display heading, no heading "glow",
   the couple's name as a Great Vibes flourish, one quiet hairline
   card for the party / accommodation / registry boxes, flat
   terracotta buttons, wedding-party initials, a footer sign-off.

   Scoped to index.html's dark marketing sections. Does not touch
   #rsvp .rd-card / #events cards (already the cream target look)
   or landing.html (its own file).
   ============================================================ */

:root {
    --v2-lav:        #cbb7df;   /* the single lavender (matches the invitation + landing) */
    --v2-lav-dim:    #9f92bd;
    --v2-terra:      #c5744c;
    --v2-terra-deep: #a5522e;
    --v2-rule:       rgba(203, 183, 223, 0.20);
    --v2-serif:      'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --v2-script:     'Great Vibes', 'Segoe Script', cursive;
}

/* ---- display type: Cormorant Garamond everywhere ---------------------- */
h1, h2, h3, h4,
.header,
.party-group-title,
.registry-card-title,
.member-role { font-family: var(--v2-serif); }

/* every section / sub-section heading gets the same treatment */
section h3,
h3.header,
.story-header h2,
.story-header h3,
section .header {
    font-weight: 500;
    font-size: 27px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-shadow: none;                 /* kill the purple glow */
    color: var(--v2-lav);
}
h4 {
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--v2-lav);
    text-shadow: none;
}
h5 {
    color: var(--v2-lav);
    letter-spacing: .1em;
    font-weight: 500;
}
.story-header { background: transparent; }
.story-header::after { width: 54px; height: 1px; background: var(--v2-rule); }

/* ---- hero: the couple's names as a script flourish ------------------- */
.hero h1 {
    font-family: var(--v2-script);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--v2-lav);
    text-shadow: 0 3px 26px rgba(0, 0, 0, .6);
    font-size: 92px;
    line-height: 1.04;
    margin-bottom: 26px;
}
.hero .intro {
    font-family: var(--v2-serif);
    font-style: italic;
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: 15px;
    color: rgba(236, 230, 244, .8);
}
@media (max-width: 640px) {
    .hero h1 { font-size: 62px; }
}
/* give mobile a hero RSVP button too — must cover Bootstrap's whole
   .hidden-xs range (<768px), not just phones, or it vanishes at 641–767px */
@media (max-width: 767px) {
    .hero .row .col-sm-4.hidden-xs.text-center { display: block !important; }
}
/* ≤991px the nav bar turns transparent (hamburger), so the header's 1px
   rgba(255,255,255,.2) bottom border was left as a stray white line across
   the top of the photo. Drop it (and its colour transition) at that width. */
@media (max-width: 991px) {
    header, .navigation.fixed header { border-bottom: 0; transition: none; }
}
/* nav has no logo now — no reserved band; the fixed nav overlays the photo */
.hero { margin-top: 0 !important; min-height: 100vh !important; }

/* Phones: fit names + date + RSVP above the fold. 100vh on mobile is the height
   with the URL bar hidden, so anything placed in vh sat ~100px lower than the
   visible area and the RSVP button was cut off. svh = the visible height with
   the bars showing. The names still start just below the faces in
   hero-portrait.webp (~56% down), and the stack scales with the visible height
   so it also fits short phones. Browsers without svh/min() drop these
   declarations and keep the vh rules.
   Runs up to 768px (not 640): queries.css gives 641–768px a width-based
   padding-top:50%, so the names + RSVP crept up as the window narrowed,
   then jumped back down at 640. Now it's height-based all the way to the
   ≥769px desktop rule (calc(60vh - 10px)), which is also height-based. */
@media (max-width: 768px) {
    .hero { min-height: 100svh !important; }
    .hero .hero-content { padding-top: 56vh; padding-top: 56.5svh; }
    .hero .hero-content h1 {
        font-size: min(62px, 7.2svh);
        margin-bottom: min(26px, 2.2svh);
    }
    .hero .hero-content p.intro { margin-bottom: min(40px, 3.2svh); }
}

/* ---- one accent: links, nav, colour sweep -------------------------- */
a { color: var(--v2-lav); }
a:hover { color: #e2d4f4; }
.navigation ul.primary-nav li a { color: rgba(255, 255, 255, .9); }
.navigation ul.primary-nav li a:hover,
.navigation ul.primary-nav li a.active { color: var(--v2-lav); }
.lang-flag { color: rgba(255, 255, 255, .55); }
/* collapse the near-duplicate inline colours onto the two accents */
[style*="#c9744c"] { color: var(--v2-terra) !important; }
[style*="#D4B5E8"], [style*="#d4b5e8"],
[style*="#B695C0"], [style*="#b695c0"],
[style*="#C9A0DC"], [style*="#c9a0dc"] { color: var(--v2-lav) !important; }
.nav-lock-tip { border-color: rgba(203, 183, 223, .4); }
#timeline-img { --tl-accent: var(--v2-lav); }

/* ---- buttons: flat terracotta, no gradient ------------------------- */
.btn-fill,
.btn-accent,
a.btn-accent,
a.btn-fill,
.rsvp-btn,
button.btn-fill {
    background: var(--v2-terra) !important;
    background-image: none !important;
    border: 1px solid var(--v2-terra) !important;
    color: #fff !important;
    letter-spacing: .16em;
    box-shadow: none !important;
    transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.btn-fill:hover, .btn-fill:focus,
.btn-accent:hover, .btn-accent:focus,
.rsvp-btn:hover,
button.btn-fill:hover {
    background: var(--v2-terra-deep) !important;
    border-color: var(--v2-terra-deep) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -12px rgba(165, 82, 46, .75) !important;
}
.btn-white { border-color: var(--v2-lav); color: var(--v2-lav); }
.btn-white:hover { background: var(--v2-lav); color: #1a1220; }

/* ---- one quiet card treatment ------------------------------------ */
.party-member,
.accommodation-card,
.registry-card,
[style*="border: 2px solid rgba(182, 149, 192"] {
    border: 1px solid var(--v2-rule) !important;
    background: rgba(255, 255, 255, .02) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.party-member:hover,
.accommodation-card:hover,
.registry-card:hover {
    border-color: rgba(203, 183, 223, .42) !important;
    background: rgba(203, 183, 223, .05) !important;
    box-shadow: 0 10px 34px -16px rgba(0, 0, 0, .6) !important;
}

/* Wedding-party cards zoom in on hover; raised above neighbours so the
   enlarged card isn't clipped by their stacking order. Needs a near-opaque
   backing (matching the section's own background) so it fully covers
   whatever it's overlapping — at the shared card rule's low .05 opacity,
   a covered neighbour's border was still showing through underneath.
   Explicit (non-auto) z-index on both the cards and the "Bridesmaids" /
   "Groomsmen" labels, instead of relying on default stacking — bridesmaid
   cards sit in an earlier row (wp10) than the "Groomsmen" label (wp11), and
   without an explicit value that later row was winning the tie-break when
   an enlarged card from the row above reached down into it. */
#wedding-party .party-group-title { position: relative; z-index: 1; }
.party-member {
    position: relative; z-index: 2; transform-origin: center;
    -webkit-user-select: none; user-select: none;
}
/* Hover-zoom only for real pointers (mouse/trackpad). On touch devices
   there's no hover to "leave", so tapping could get a card stuck enlarged
   with its name selected and no obvious way to back out — scoping to
   (hover: hover) means a tap on mobile just does nothing special. */
@media (hover: hover) and (pointer: fine) {
    /* The photo scales up more than the card itself, so it reads as the
       focal point ("meet this person") rather than the name/role text
       just getting bigger in lockstep with everything else. */
    .party-member:hover { transform: scale(1.2); z-index: 10; background: rgba(23, 17, 31, .97) !important; }
    .party-member:hover .member-photo-placeholder { transform: scale(1.3); }
    @media (prefers-reduced-motion: reduce) {
        .party-member:hover { transform: none; }
        .party-member:hover .member-photo-placeholder { transform: none; }
    }
}
/* Touch: zoom only while actually pressed (:active), not a click-toggled
   :hover — it releases the instant the finger lifts, so there's no "stuck
   enlarged" state to escape and no separate tap-to-dismiss gesture needed.
   Smaller scale + a quick transition so it reads as tap feedback rather
   than the bigger, lingering desktop hover effect. */
@media (hover: none) and (pointer: coarse) {
    .party-member:active {
        transform: scale(1.1);
        z-index: 10;
        background: rgba(23, 17, 31, .97) !important;
        transition: transform .15s ease;
    }
    .party-member:active .member-photo-placeholder { transform: scale(1.2); transition: transform .15s ease; }
    @media (prefers-reduced-motion: reduce) {
        .party-member:active { transform: none; }
        .party-member:active .member-photo-placeholder { transform: none; }
    }
}
.accommodation-card .price,
.accommodation-card h5,
.accommodation-card > i,
.accommodation-card > i.fa-hotel { color: var(--v2-lav) !important; }
.accommodation-card .distance i,
.member-role { color: var(--v2-lav-dim) !important; font-style: italic; }
.registry-icon i,
.registry-card-cover .registry-cover-content i { color: var(--v2-lav); }

/* ---- wedding-party placeholders -> initials (JS adds .has-initial) ---
   Scoped with #wedding-party so this actually beats the base theme's
   .wedding-party .member-photo-placeholder (120px, 3px purple border) —
   a bare .member-photo-placeholder selector is lower specificity and was
   silently losing to it. min(96px, 100%) + aspect-ratio keeps it a true
   circle that shrinks to fit narrow columns instead of overflowing the
   card at in-between breakpoints (e.g. the 6-across col-md-2 row). */
#wedding-party .member-photo-placeholder {
    width: min(128px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--v2-rule);
    background: rgba(203, 183, 223, .06);
    box-shadow: none;
    margin: 0 auto 16px;
    border-radius: 50%;
    overflow: hidden;
    transition: transform .3s ease;
}
#wedding-party .member-photo-placeholder i { display: none; }
#wedding-party .member-photo-placeholder.has-initial {
    font-family: var(--v2-serif);
    font-size: 46px;
    font-weight: 500;
    color: var(--v2-lav);
}
#wedding-party .member-photo-placeholder.has-photo { border-color: var(--v2-rule); }
#wedding-party .member-photo-placeholder img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
/* centre both party rows (bridesmaids = 6, groomsmen = 5 offset) */
.wedding-party .row.wp10,
.wedding-party .row.wp11 {
    display: flex; flex-wrap: wrap; justify-content: center;
}
.wedding-party .row.wp11 .col-md-offset-1 { margin-left: 0; }

/* ---- footer sign-off ------------------------------------------- */
footer { background: linear-gradient(180deg, #140f1c 0%, #211634 100%); }
/* The base theme's -25px top margin pulled the circle up to straddle the
   boundary with the section above it — fine when it was a solid filled
   badge (it hid the seam), but now that it's a transparent hairline
   circle, that same seam/line shows straight through the middle of it.
   Give it a normal, non-overlapping position fully inside the footer. */
footer .to-top-wrapper { background: transparent; border: 1px solid var(--v2-rule); box-shadow: none; margin-top: 10px; }
footer .to-top-wrapper:hover { border-color: var(--v2-lav); box-shadow: none; }
.footer-signoff {
    font-family: var(--v2-serif);
    font-size: 16px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--v2-lav);
    margin: 30px 0 8px;
}
.footer-monogram {
    display: block;
    width: 72px;
    height: auto;
    margin: 10px auto 0;
    opacity: .9;
    /* lavender fill inside the painted ring only — same as the landing-page card.
       Ring measured from bg-monogram.png (260x277): centre (135,137), semi-axes 69x98,
       so the box is 53.08% x 70.76% of the image; background-position % values are
       solved for that box's top-left at 25.38% / 14.08%. */
    background: radial-gradient(closest-side, #e3d4f2 0%, #d6c1ec 80%, #cbb4e6 95%, rgba(203, 180, 230, 0) 100%)
                54.09% 48.15% / 53.08% 70.76% no-repeat;
    /* the ring sits 5px right of the PNG's centre — nudge it onto the centre line */
    transform: translateX(-1.92%);
}

/* ---- keep the reply card exactly as designed ------------------- */
#rsvp .rd-card :where(h3, h4, p, span, a) { text-shadow: none; }
#rsvp .rd-card h4#identified-guest-name {
    color: var(--ink); font-family: var(--v2-serif);
}

/* Phones: the visa box sits inside the venue section's .text-center, so with
   the plane icon in its own column on the left the centred text was pushed
   right of the page centre. Stack the icon above the text instead. */
@media (max-width: 767px) {
    .visa-box { flex-direction: column; align-items: center !important; gap: 10px !important; }
}