/* ---------------------------------------------------------------------------
   private-events.css — /contact/private-events.php only.

   Loaded AFTER style.css and blog.css, so it inherits the site shell (fixed
   navbar, Montserrat, Bootstrap grid, footer) and the .tt-btn / .tt-panel
   components. This file adds only what the private-events page needs: the
   hero, the content bands, the format/occasion cards, the FAQ, and the form.

   Why a new stylesheet instead of extending style.css: the old page leaned on
   #private-events { height: 200vh } and reused .solid (the NAVBAR's navy) as a
   form panel. Both are global and load on every page that shares those hooks,
   so fixing them in place risks the rest of the site. This page now owns its
   layout and touches nothing global.

   Brand palette (from style.css):
     #022850  deep navy   — headings, dark bands
     #0069B5  blue        — links, focus
     #8FBD28  green       — accents, primary CTA on dark
   --------------------------------------------------------------------------- */

/* The global body { color: #fff } is built for dark hero imagery. This page is
   mostly long-form on a light surface, so the band flips it back. */
.tt-pe-band {
    background-color: #fff;
    color: #022850;
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.tt-pe-band--light { background-color: #f4f6f9; }

.tt-pe-band--dark {
    background-color: #022850;
    color: #fff;
}

/* --- Hero ---------------------------------------------------------------- */

.tt-pe-hero {
    /* The gradient is layered OVER the photo rather than beside it: the stock
       crowd shot is busy and the old page put white 55px text straight on top
       of it, which failed contrast everywhere the stage lights were bright. */
    background:
        linear-gradient(rgba(2, 40, 80, .82), rgba(2, 40, 80, .93)),
        url('/assets/private_events.webp') center / cover no-repeat,
        #022850;
    color: #fff;
    padding: clamp(3rem, 7vw, 6rem) 0;
    text-align: center;
}

.tt-pe-eyebrow {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: .72rem;
    font-weight: 700;
    color: #8FBD28;
    margin: 0;
}

.tt-pe-hero h1 {
    font-weight: 800;
    /* clamp() replaces the old inline font-size:55px, which overflowed on any
       viewport under ~420px. */
    font-size: clamp(2rem, 5.2vw, 3.4rem);
    margin: .35rem 0 .7rem;
    color: #fff;
}

.tt-pe-tagline {
    font-size: clamp(1rem, 2vw, 1.18rem);
    color: #cddcec;
    max-width: 60ch;
    margin: 0 auto 1.7rem;
    line-height: 1.65;
}

.tt-pe-hero-cta {
    display: flex;
    gap: .75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Outline variant for the secondary hero CTA. area.css defines an identical
   .tt-btn--ghost, but this page does not load area.css (it is not an area
   page), so the rule is restated here rather than pulling in that whole file. */
.tt-btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .55);
    color: #fff !important;
}

.tt-btn--ghost:hover,
.tt-btn--ghost:focus {
    background: #fff;
    color: #022850 !important;
    border-color: #fff;
}

/* --- Fact strip ---------------------------------------------------------- */

.tt-pe-facts {
    background: #01203f;
    color: #fff;
    padding: 1.1rem 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.tt-pe-facts .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1.25rem, 5vw, 3.5rem);
    text-align: center;
}

/* On a phone the four facts wrap to four full-width rows, pushing the first
   real content most of a screen further down. Two by two instead. */
@media (max-width: 575.98px) {
    .tt-pe-facts .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem 1rem;
    }
}

.tt-pe-fact strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    color: #8FBD28;
    line-height: 1.2;
}

.tt-pe-fact span {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #a9c2da;
}

/* --- Headings and prose -------------------------------------------------- */

.tt-pe-h2 {
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2.05rem);
    margin-bottom: .6rem;
}

.tt-pe-band--dark .tt-pe-h2 { color: #fff; }

.tt-pe-sub {
    color: #55687f;
    max-width: 66ch;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.tt-pe-band--dark .tt-pe-sub { color: #cddcec; }

.tt-pe-prose { max-width: 68ch; }
.tt-pe-prose p { font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.1rem; }

/* --- Format cards -------------------------------------------------------- */

/* Exactly four format cards, so the column count is pinned to 1 / 2 / 4 rather
   than left to auto-fit. auto-fit lands on three columns in a band of widths
   around 1000-1100px, which orphans the fourth card on a row of its own. */
.tt-pe-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}

@media (min-width: 576px) {
    .tt-pe-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 992px) {
    .tt-pe-grid { grid-template-columns: repeat(4, 1fr); }
}

.tt-pe-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 1.35rem 1.3rem 1.45rem;
    height: 100%;
}

.tt-pe-band--dark .tt-pe-card {
    background: #0a3f77;
    border-color: rgba(255, 255, 255, .14);
}

.tt-pe-card h3 {
    font-size: 1.08rem;
    font-weight: 700;
    color: #022850;
    margin-bottom: .5rem;
}

.tt-pe-band--dark .tt-pe-card h3 { color: #fff; }

.tt-pe-card p {
    font-size: .95rem;
    line-height: 1.65;
    color: #55687f;
    margin: 0;
}

.tt-pe-band--dark .tt-pe-card p { color: #cddcec; }

.tt-pe-card-tag {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #12240a;
    background: #8FBD28;
    border-radius: 3px;
    padding: .15rem .45rem;
    margin-bottom: .6rem;
}

/* --- Occasion chips ------------------------------------------------------ */

.tt-pe-occasions {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.tt-pe-occasions li {
    background: #fff;
    border: 1px solid #d7e0ea;
    border-radius: 999px;
    padding: .45rem 1rem;
    font-size: .9rem;
    font-weight: 600;
    color: #022850;
}

/* --- Numbered steps ------------------------------------------------------ */

/* Three steps, same reasoning as .tt-pe-grid: pinned columns, no orphan row. */
.tt-pe-steps {
    list-style: none;
    counter-reset: tt-step;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .tt-pe-steps { grid-template-columns: repeat(3, 1fr); }
}

.tt-pe-steps li { counter-increment: tt-step; }

.tt-pe-steps li::before {
    content: counter(tt-step);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #8FBD28;
    color: #12240a;
    font-weight: 800;
    margin-bottom: .6rem;
}

.tt-pe-steps h3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .35rem;
}

.tt-pe-steps p {
    font-size: .93rem;
    line-height: 1.6;
    margin: 0;
    color: #cddcec;
}

/* --- FAQ ----------------------------------------------------------------- */

.tt-pe-faq { max-width: 74ch; }

.tt-pe-faq details {
    border-bottom: 1px solid #dde4ec;
    padding: .95rem 0;
}

.tt-pe-faq summary {
    font-weight: 700;
    font-size: 1.02rem;
    color: #022850;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.tt-pe-faq summary::-webkit-details-marker { display: none; }

.tt-pe-faq summary::after {
    content: '+';
    font-weight: 800;
    font-size: 1.3rem;
    color: #0069B5;
    line-height: 1;
    flex: 0 0 auto;
}

.tt-pe-faq details[open] summary::after { content: '\2013'; }

.tt-pe-faq details p {
    margin: .7rem 0 0;
    color: #55687f;
    line-height: 1.7;
    font-size: .97rem;
}

/* --- Form ---------------------------------------------------------------- */

.tt-pe-form-wrap {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    box-shadow: 0 10px 30px rgba(2, 40, 80, .10);
    max-width: 780px;
    margin: 0 auto;
}

.tt-pe-form .form-label {
    font-weight: 600;
    font-size: .88rem;
    color: #022850;
    margin-bottom: .3rem;
}

.tt-pe-req { color: #c0392b; font-weight: 700; }

.tt-pe-form .form-control,
.tt-pe-form .form-select {
    border: 1px solid #c7d2de;
    border-radius: 6px;
    padding: .62rem .85rem;
    font-size: 1rem;
    color: #022850;
    background-color: #fff;
}

.tt-pe-form .form-control:focus,
.tt-pe-form .form-select:focus {
    border-color: #0069B5;
    box-shadow: 0 0 0 3px rgba(0, 105, 181, .18);
    outline: none;
}

.tt-pe-form .form-control::placeholder { color: #9aabbd; }

/* Server-side validation echo. */
.tt-pe-form .is-invalid { border-color: #c0392b; }

.tt-pe-field-error {
    display: block;
    font-size: .82rem;
    color: #c0392b;
    margin-top: .3rem;
}

.tt-pe-hint {
    display: block;
    font-size: .82rem;
    color: #7387a0;
    margin-top: .3rem;
}

/* Honeypot: off-screen rather than display:none, because some bots skip
   display:none inputs but happily fill positioned ones. Hidden from AT via
   aria-hidden + tabindex="-1" on the input itself. */
.tt-pe-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.tt-pe-alert {
    border-radius: 8px;
    padding: .9rem 1.1rem;
    margin-bottom: 1.4rem;
    font-size: .95rem;
    line-height: 1.6;
}

.tt-pe-alert--error {
    background: #fdecea;
    border: 1px solid #f3b7b1;
    color: #8a2019;
}

.tt-pe-thanks {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: 0 10px 30px rgba(2, 40, 80, .10);
}

.tt-pe-thanks h2 {
    color: #022850;
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    margin-bottom: .6rem;
}

.tt-pe-thanks p {
    color: #55687f;
    line-height: 1.7;
    margin-bottom: 1.4rem;
}

.tt-pe-thanks-tick {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #8FBD28;
    color: #12240a;
    font-size: 1.9rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

/* --- Breadcrumbs --------------------------------------------------------- */

.tt-pe-crumbs {
    font-size: .85rem;
    color: #a9c2da;
    margin-bottom: .25rem;
}

.tt-pe-crumbs a { color: #a9c2da; }
.tt-pe-crumbs a:hover { color: #fff; text-decoration: underline; }
.tt-pe-crumbs span { margin: 0 .4rem; opacity: .6; }

/* --- Nav offset ---------------------------------------------------------- */

/* The fixed navbar measures 176px tall at every viewport width — the logo's
   max-height drives it, so it does not shrink on mobile. The old page's
   #private-events-body { padding-top: 176px } was therefore correct; the
   sitewide .body-below-nav { padding-top: 20vh } is the shakier rule, since
   20vh is only ~176px on an 880px-tall window and underlaps the navbar on
   anything shorter. max() keeps the vh feel on tall screens and pins a safe
   floor on short ones. Re-measure this if the navbar logo size ever changes. */
.body-below-nav {
    padding-top: max(20vh, 184px);
    /* Navy, not the default white: the padding strip sits directly under a
       navy fixed navbar and above a navy hero, so white here reads as a seam. */
    background-color: #022850;
}