/* ==========================================================
   ANNUAL FUNDRAISING DINNER

   Everything is scoped under #fd-page. The page is styled quite unlike the
   rest of the site — its own palette, its own type — and the scope is what
   keeps that from leaking into the theme.

   Loaded only by resources/views/annual-fundraising.blade.php.
   ========================================================== */

#fd-page {
    --orange: #F26522;
    --orange-dark: #D9540F;
    --orange-soft: #FDE7DB;
    --indigo: #2F2A60;
    --indigo-deep: #252052;
    --ink: #3A3A3A;
    --muted: #6E6E7A;
    --line: #E8E8EE;
    --bg-soft: #F7F7FA;

    font-family: 'Poppins', 'Montserrat', sans-serif;
    color: var(--ink);
    line-height: 1.65;
}

/* brand buttons */
#fd-page .btn-brand { background: var(--orange); color: #fff; font-weight: 600; }
#fd-page .btn-brand:hover,
#fd-page .btn-brand:focus { background: var(--orange-dark); color: #fff; }
#fd-page .btn-outline-brand { color: var(--indigo); border: 1.5px solid var(--indigo); font-weight: 600; }
#fd-page .btn-outline-brand:hover,
#fd-page .btn-outline-brand:focus { background: var(--indigo); color: #fff; }
#fd-page .text-indigo { color: var(--indigo) !important; }
#fd-page .text-orange { color: var(--orange) !important; }
#fd-page .fd-bg-indigo { background: var(--indigo) !important; }
#fd-page .fd-bg-soft { background: var(--bg-soft) !important; }


/* ----------------------------------------------------------
   HERO

   The navy is sampled from the banner photograph so the two cut-out hosts
   pinned to the sides blend into it rather than sitting on a seam.
   ---------------------------------------------------------- */
#fd-page .fd-hero {
    background: linear-gradient(180deg, #0A3061 0%, #062347 55%, #021C41 100%);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 80px 24px 70px;
}

#fd-page .fd-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 55% 45% at 50% 25%, rgba(40, 90, 170, .40), transparent 70%);
    pointer-events: none;
}

#fd-page .fd-hero > * { position: relative; z-index: 1; }

#fd-page .fd-hero h1,
#fd-page .fd-hero .with,
#fd-page .fd-hero .eyebrow { text-shadow: 0 2px 14px rgba(0, 10, 30, .55); }

/* The hosts, pinned to the sides so the middle stays clear for the text. */
#fd-page .fd-hero .fd-hero-figure {
    position: absolute;
    bottom: 0;
    height: 100%;
    max-height: 330px;
    width: auto;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

#fd-page .fd-hero .fd-hero-figure.fig-left { left: 0; }
#fd-page .fd-hero .fd-hero-figure.fig-right { right: 0; }

@media (max-width: 1199.98px) {
    #fd-page .fd-hero .fd-hero-figure { max-height: 260px; }
}

@media (max-width: 991.98px) {
    #fd-page .fd-hero .fd-hero-figure { max-height: 190px; opacity: .85; }
}

@media (max-width: 767.98px) {
    /* Too narrow for cut-outs at the sides: the portrait version of the
       banner becomes the background instead, with the heads pushed below
       the text. */
    #fd-page .fd-hero .fd-hero-figure { display: none; }

    #fd-page .fd-hero {
        background-color: #041735;
        background-image: url('../../uploads/site/fundraising/hero-mobile.webp');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom -55px;
        padding: 64px 20px clamp(280px, 88vw, 400px);
    }

    /* the picture carries its own glow */
    #fd-page .fd-hero::after { display: none; }
}

#fd-page .fd-hero .eyebrow {
    font-size: .78rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(255, 255, 255, .75);
}

#fd-page .fd-hero .eyebrow strong { color: #fff; font-weight: 700; }

#fd-page .fd-hero h1 {
    font-size: clamp(2.2rem, 6vw, 3.8rem);
    font-weight: 700;
    line-height: 1.12;
    margin: 18px 0 10px;
    color: #fff;
}

#fd-page .fd-hero .with {
    font-size: 1rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 500;
    color: #FFD9A8;
}

#fd-page .tour-strip {
    display: inline-flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 28px;
    padding: 11px 26px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-size: .9rem;
    background: rgba(255, 255, 255, .08);
}

#fd-page .tour-strip .dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--orange);
}


/* ----------------------------------------------------------
   CITY QUICK NAV
   Pulled up so the pills straddle the foot of the hero.
   ---------------------------------------------------------- */
#fd-page .city-nav { margin-top: -24px; position: relative; z-index: 2; }

#fd-page .city-nav .nav-link {
    color: var(--indigo);
    font-size: .85rem;
    font-weight: 500;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 18px;
    box-shadow: 0 3px 10px rgba(47, 42, 96, .08);
    transition: all .2s;
}

#fd-page .city-nav .nav-link:hover,
#fd-page .city-nav .nav-link:focus {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}


/* ----------------------------------------------------------
   SECTION HEAD
   ---------------------------------------------------------- */
#fd-page .section-head h2 {
    color: var(--indigo);
    font-weight: 600;
    font-size: clamp(1.6rem, 3.5vw, 2.1rem);
}

#fd-page .section-head p { color: var(--muted); font-size: .95rem; }


/* ----------------------------------------------------------
   THE CITY ROWS
   ---------------------------------------------------------- */
#fd-page .date-block {
    flex-shrink: 0;
    text-align: center;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 7px 13px;
    min-width: 64px;
}

#fd-page .date-block .mon {
    font-size: .66rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--orange);
    font-weight: 600;
}

#fd-page .date-block .day {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--indigo);
    line-height: 1.1;
}

#fd-page .city-name {
    color: var(--indigo);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
}

#fd-page .venue-line { font-size: .84rem; color: var(--muted); }

#fd-page .accordion-button:not(.collapsed) { background: #fff; color: inherit; box-shadow: none; }

#fd-page .accordion-button:focus {
    box-shadow: 0 0 0 .2rem rgba(242, 101, 34, .25);
    border-color: var(--orange);
}

#fd-page .accordion-item {
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    box-shadow: 0 2px 8px rgba(47, 42, 96, .05);
    /* the quick-nav scrolls to these, and the site header is sticky */
    scroll-margin-top: 110px;
}

/* The heading inside an accordion button is a layout wrapper here, not a
   heading the theme should style. */
#fd-page .accordion-header { margin: 0; }


/* ----------------------------------------------------------
   TICKETS AND CONTACTS
   ---------------------------------------------------------- */
#fd-page .qr-img {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 4px;
}

#fd-page .qr-title { font-weight: 600; color: var(--indigo); font-size: .92rem; }
#fd-page .qr-sub { font-size: .74rem; color: var(--muted); line-height: 1.4; }


/* ----------------------------------------------------------
   PRICING
   ---------------------------------------------------------- */
#fd-page .price-col h4 {
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--indigo);
    font-weight: 600;
    border-bottom: 2px solid var(--orange);
    display: inline-block;
    padding-bottom: 2px;
}

#fd-page .price-row .amt { font-weight: 700; color: var(--indigo); }

#fd-page .chapter-tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--orange);
    background: var(--orange-soft);
    border-radius: 999px;
    padding: 3px 12px;
}

#fd-page .sub-label {
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--indigo);
    font-weight: 600;
}

#fd-page .fine-print { font-size: .74rem; color: var(--muted); line-height: 1.5; }

#fd-page .detail-label {
    min-width: 70px;
    font-weight: 600;
    color: var(--indigo);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

#fd-page .nobreak { white-space: nowrap; }