/* ══════════════════════════════════════════════════════════════════════════
   COMPONENTS
   Global reusable UI components and section patterns.
   Page-specific styles live in inline <style> blocks in each template.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.tgk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 11px 32px;
    min-width: 200px;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: background var(--dur) var(--ease),
                color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                transform var(--dur) var(--ease);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.tgk-btn:hover { transform: translateY(-1px); }

/* Gold gradient — primary call to action */
.tgk-btn-primary,
.tgk-btn-gold {
    background: linear-gradient(155deg, #F0D878 0%, #D4B85E 35%, #B89A3E 65%, #D0B45A 100%);
    color: var(--charcoal);
    border-color: transparent;
}
.tgk-btn-primary:hover,
.tgk-btn-gold:hover {
    background: linear-gradient(155deg, #F6E28A 0%, #DCBE68 35%, #C0A248 65%, #D8BA62 100%);
    color: var(--charcoal);
}

/* Outlined — secondary action */
.tgk-btn-secondary {
    background: transparent;
    color: var(--charcoal);
    border-color: var(--gold);
}
.tgk-btn-secondary:hover {
    background: var(--charcoal);
    border-color: var(--charcoal);
    color: #fff;
}

/* Ghost — secondary action on dark backgrounds */
.tgk-btn-ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.6);
}
.tgk-btn-ghost:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.9);
    color: #fff;
}

/* Small — header CTAs, footer, compact contexts */
.tgk-btn-sm {
    padding: 9px 20px;
    font-size: 12px;
    min-width: 0;
}

/* Header buttons never grow to min-width */
.tgk-header-ctas .tgk-btn { min-width: 0; }

/* Button group */
.tgk-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Mobile: full-width buttons, vertical stack */
@media (max-width: 600px) {
    .tgk-btn { width: 100%; min-width: 0; }
    .tgk-btn-group { flex-direction: column; align-items: stretch; }
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.tgk-card {
    background: var(--bg-page);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-md);
    overflow: hidden;
    height: 100%;
}
.tgk-card-body { padding: 32px 28px; }
.tgk-card-image { width: 100%; aspect-ratio: 3/2; overflow: hidden; }
.tgk-card-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 400ms var(--ease);
}
.tgk-card:hover .tgk-card-image img { transform: scale(1.03); }

/* ── Feature card — portrait image with text overlay ─────────────────────── */
.tgk-feature-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--bg-offset);
    display: block;
}
.tgk-feature-card-image { position: absolute; inset: 0; }
.tgk-feature-card-image img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 500ms var(--ease);
}
.tgk-feature-card:hover .tgk-feature-card-image img { transform: scale(1.03); }
.tgk-feature-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(38,39,41,.92) 0%,
        rgba(38,39,41,.55) 35%,
        rgba(38,39,41,.15) 65%,
        rgba(38,39,41,0) 100%
    );
}
.tgk-feature-card-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 28px 28px 32px;
    z-index: 2;
}
.tgk-feature-card-eyebrow {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 10px;
    display: block;
}
.tgk-feature-card-title {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.4vw, 34px);
    font-weight: 300;
    font-style: italic;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 12px;
}
.tgk-feature-card-desc {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255,255,255,.92);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.5em);
}

/* ── Info card — bordered detail block (hours, address) ──────────────────── */
.tgk-info-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.tgk-info-row {
    padding: 24px 32px;
    border-bottom: 1px solid var(--border);
}
.tgk-info-row:last-child { border-bottom: none; }
.tgk-info-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
    display: block;
}
.tgk-info-row a { text-decoration: none; color: var(--text-light); }
.tgk-info-row a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tgk-info-row br { display: none; }

/* ── Badge ────────────────────────────────────────────────────────────────── */
.tgk-badge {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    background: var(--charcoal);
    color: #fff;
}
.tgk-badge-gold {
    background: var(--gold);
    color: var(--charcoal);
}

/* ── Accordion ────────────────────────────────────────────────────────────── */
.tgk-accordion { border-top: 1px solid rgba(38,39,41,.22); }
.tgk-accordion-item { border-bottom: 1px solid rgba(38,39,41,.22); }

/* Question — uses tgk-h4 scale; must be noticeably larger than 17px answer */
.tgk-accordion-trigger {
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 26px 0;
    font-family: var(--font-display);
    font-size: clamp(22px, 2.5vw, 26px);
    font-weight: 400;
    font-style: italic;
    color: var(--charcoal);
    line-height: 1.3;
    cursor: pointer;
    background: none;
    border: none;
}
.tgk-accordion-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    font-style: normal;
    user-select: none;
}
.tgk-accordion-icon::before {
    content: '+';
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    color: var(--charcoal);
    transition: color var(--dur) var(--ease);
}
.tgk-accordion-trigger[aria-expanded="true"] .tgk-accordion-icon::before {
    content: '−';
    color: var(--gold-dark);
}
.tgk-accordion-panel { overflow: hidden; }
.tgk-accordion-panel[hidden] { display: none; }

/* Answer — 17px Poppins. Higher specificity so body's 20px base doesn't win */
.tgk-accordion .tgk-accordion-body {
    padding: 0 48px 26px 0;
    color: var(--text-light);
    font-size: 17px;
    line-height: 1.7;
}
.tgk-accordion .tgk-accordion-body p { font-size: 17px; }
.tgk-accordion .tgk-accordion-body p + p { margin-top: 12px; }

/* ── Divider ──────────────────────────────────────────────────────────────── */
.tgk-divider {
    width: 48px;
    height: 2px;
    background: var(--gold);
    border: none;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION BACKGROUNDS
   Apply to any <section> to get the right background + child text colors.
   ══════════════════════════════════════════════════════════════════════════ */

/* Dark charcoal — coffee sections, pull quotes, dark CTAs */
.tgk-section-dark {
    background: var(--charcoal);
}
.tgk-section-dark .tgk-eyebrow { color: var(--gold); }
.tgk-section-dark .tgk-h1,
.tgk-section-dark .tgk-h2,
.tgk-section-dark .tgk-h3,
.tgk-section-dark .tgk-h4,
.tgk-section-dark .tgk-display { color: #fff; }
.tgk-section-dark p { color: rgba(255,255,255,.72); }

/* Secondary (outlined) button auto-swaps to ghost styling on dark sections
   so the label stays readable against charcoal. */
.tgk-section-dark .tgk-btn-secondary {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.6);
}
.tgk-section-dark .tgk-btn-secondary:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.9);
    color: #fff;
}

/* Offset — slightly deeper cream, alternating sections */
.tgk-section-offset { background: var(--bg-offset); }

/* Blush — pink-light, reservation / celebration sections */
.tgk-section-blush {
    background: var(--pink-light);
    border-top: 1px solid var(--pink-border);
    border-bottom: 1px solid var(--pink-border);
}

/* ══════════════════════════════════════════════════════════════════════════
   HERO — SPLIT PANEL
   Left: heading + CTA copy. Right: portrait photo.
   Used by: Park Avenue, Orlando Avenue, and any location page.
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 168px);
    max-height: 900px;
}
.tgk-hero-split-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end; /* anchor block close to the image, not to the far-left edge */
    padding: 80px clamp(40px, 4vw, 64px) 80px clamp(32px, 6vw, 88px);
}
.tgk-hero-split-text > * { max-width: 560px; width: 100%; }
.tgk-hero-split-photo {
    position: relative;
    overflow: hidden;
}
.tgk-hero-split-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.tgk-hero-split-photo-fallback {
    width: 100%; height: 100%;
    background: var(--bg-offset);
}
@media (max-width: 900px) {
    .tgk-hero-split {
        grid-template-columns: 1fr;
        min-height: unset;
        max-height: unset;
    }
    .tgk-hero-split-text {
        padding: 40px var(--container-mob) 48px;
        order: 2;
        align-items: stretch;
    }
    .tgk-hero-split-text > * { max-width: none; width: auto; }
    .tgk-hero-split-photo {
        order: 1;
        height: 60vw;
        min-height: 280px;
        max-height: 480px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   PULL QUOTE STRIP
   Full-width charcoal bar with a single large italic quote.
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-pullquote {
    background: var(--charcoal);
    padding: 64px var(--container-px);
    text-align: center;
}
.tgk-pullquote-text {
    font-family: var(--font-display);
    font-size: clamp(56px, 7vw, 96px);
    font-weight: 300;
    font-style: italic;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -0.02em;
}
@media (max-width: 768px) {
    .tgk-pullquote { padding: 48px var(--container-mob); }
}

/* ══════════════════════════════════════════════════════════════════════════
   FROM OUR BAKERY (placeholder shell)
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-bakery-hero {
    padding: 120px var(--container-px);
    text-align: center;
    background: var(--bg-offset);
}
.tgk-bakery-hero-inner {
    max-width: 720px;
    margin: 0 auto;
}
.tgk-bakery-hero-heading {
    font-family: var(--font-display);
    font-size: clamp(48px, 6vw, 80px);
    font-weight: 300;
    line-height: 1.05;
    color: var(--charcoal);
    margin: 14px 0 22px;
}
.tgk-bakery-hero-sub {
    font-size: 19px;
    line-height: 1.6;
    color: var(--charcoal);
    opacity: 0.82;
    margin: 0 0 28px;
}
.tgk-bakery-hero-note {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-dark);
}
@media (max-width: 768px) {
    .tgk-bakery-hero { padding: 80px var(--container-mob); }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE — HERO (full-bleed split: text left, video/photo right)
   ══════════════════════════════════════════════════════════════════════════ */
/* Home Block 1 — split content block sized by image HEIGHT, not column width.
   Why: a portrait photo at half-viewport-width becomes 1000px+ tall on desktop
   ("wall art"). Locking the section to a sensible HEIGHT keeps the image at a
   tasteful display size (~540×720 at 3:4) regardless of viewport, with cream
   breathing room beside it. NEVER cropped. Image bleeds to the page edge. */
.tgk-home-hero {
    padding-top: 168px;
    padding-bottom: 0;
    background: var(--bg-page);
}
.tgk-home-hero-split {
    /* Contained 1200px split. Text gets all remaining width (1fr); image cell
       auto-sizes to the portrait's natural width at the locked height. Image
       sits at the right edge of the container; text column expands left of it. */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(32px, 5vw, 64px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--container-px);
}
.tgk-home-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Anchor copy to the right side of its cell so it sits close to the image. */
    align-items: flex-end;
}
.tgk-home-hero-text > * { max-width: 600px; width: 100%; }
.tgk-home-hero-text > * { max-width: 560px; }
.tgk-home-hero-eyebrow {
    color: var(--gold-dark);
    margin-bottom: 18px;
    /* Optical alignment: the uppercase "W" in WINTER PARK has glyph ink that
       extends LEFT of its bounding box, making the eyebrow read further left
       than the body copy. Em-based so it scales with font size across
       viewports — eyebrow stays at 19px so this is effectively ~8px. */
    padding-left: 0.42em;
}
.tgk-home-hero-heading {
    font-family: var(--font-display);
    /* Capped at 72px so "The Glass Knife" (15 chars italic serif) fits on
       one line inside the text cell across all viewports. */
    font-size: clamp(44px, 5vw, 72px);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--charcoal);
    margin: 0 0 22px;
    white-space: nowrap;
    /* Optical alignment: the italic display "T" has a curl/tail that extends
       FAR left of its bounding box. Em-based so it scales with the heading's
       clamp(44px, 5vw, 72px) font size — at 72px desktop this is ~18px, at
       44px mobile this is ~11px. Stays in proportion across viewports. */
    padding-left: 0.25em;
}
.tgk-home-hero-heading em { font-style: italic; }
.tgk-home-hero-sub {
    font-size: clamp(17px, 1.5vw, 19px);
    line-height: 1.6;
    color: var(--text-light);
    margin: 0;
    max-width: 520px;
}
/* Image cell: locked at 540–700px tall. Image shows at natural portrait
   aspect (no cropping), anchored to the LEFT side of its cell so it sits
   close to the text. Cream space appears to the right of the image within
   the cell. */
.tgk-home-hero-photo {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: clamp(540px, 60vh, 700px);
}
.tgk-home-hero-photo img,
.tgk-home-hero-photo video {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: cover;
    display: block;
}
.tgk-home-hero-photo-fallback {
    width: 100%; height: 100%;
    background: var(--bg-offset);
}
@media (max-width: 900px) {
    .tgk-home-hero { padding-top: 110px; padding-bottom: 32px; }
    .tgk-home-hero-split {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }
    .tgk-home-hero-text {
        padding: 40px var(--container-mob) 48px;
        order: 2;
        align-items: stretch;
    }
    /* Allow headline to wrap on narrow screens if needed. */
    .tgk-home-hero-heading { white-space: normal; }
    .tgk-home-hero-text > * { max-width: none; width: auto; }
    /* Mobile: image stacks above text at natural aspect, full viewport width.
       No height cap, no crop — portrait stays portrait. */
    .tgk-home-hero-photo { order: 1; display: block; height: auto; }
    .tgk-home-hero-photo img,
    .tgk-home-hero-photo video {
        width: 100%;
        height: auto;
        max-width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE — SHARED SECTION HEADER
   Centered eyebrow + heading + optional subhead.
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-home-section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 48px;
}
.tgk-home-section-header .tgk-eyebrow { margin-bottom: 14px; }
.tgk-home-section-sub {
    margin: 16px auto 0;
    max-width: 720px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--charcoal);
    opacity: 0.78;
}
@media (max-width: 768px) {
    .tgk-home-section-header { margin-bottom: 32px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE — WHAT WE DO
   4-card portrait grid using tgk-feature-card. Grid goes full-bleed so cards
   are wide enough for two-word titles ("Breakfast & Lunch") to fit on one line.
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-home-wwd {
    padding: 48px 0 96px;
}
.tgk-home-wwd-inner {
    /* full width — header is constrained on its own */
}
.tgk-home-wwd .tgk-home-section-header {
    max-width: 760px;
    margin: 0 auto 48px;
    padding: 0 var(--container-px);
}
.tgk-home-wwd-grid {
    list-style: none;
    margin: 0;
    padding: 0 14px; /* matches the gap between cards so rounded corners breathe at the viewport edge */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.tgk-home-wwd-grid > li { display: flex; }
.tgk-home-wwd-grid .tgk-feature-card {
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
    aspect-ratio: 1 / 1; /* square tiles for edge-to-edge — shorter than the global 3/4 portrait */
}
.tgk-feature-card-fallback {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #3b3d40 0%, #1f2022 100%);
}
/* Ensure all card titles fit on one line at every breakpoint, so the top
   text aligns across cards. Slightly lower max than the default to give
   "Breakfast & Lunch" headroom. */
.tgk-home-wwd-grid .tgk-feature-card-title {
    font-size: clamp(22px, 2.1vw, 30px);
}
/* Text link below the cards (e.g. "See the full menu →") */
.tgk-home-wwd-link {
    text-align: center;
    margin: 40px 0 0;
    padding: 0 var(--container-px);
}
.tgk-home-wwd-link a {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--charcoal);
    text-decoration: none;
    border-bottom: 1px solid var(--gold-dark);
    padding-bottom: 4px;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tgk-home-wwd-link a:hover {
    color: var(--gold-dark);
    border-color: var(--charcoal);
}
.tgk-home-wwd-link a span {
    display: inline-block;
    margin-left: 6px;
    transition: transform var(--dur) var(--ease);
}
.tgk-home-wwd-link a:hover span {
    transform: translateX(4px);
}

@media (max-width: 1024px) {
    .tgk-home-wwd-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .tgk-home-wwd { padding: 64px 0; }
    .tgk-home-wwd-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0 var(--container-mob);
    }
}
@media (max-width: 768px) {
    .tgk-home-wwd .tgk-home-section-header { padding: 0 var(--container-mob); }
    .tgk-home-wwd-link { padding: 0 var(--container-mob); }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE — FEATURED HAPPENING (full-bleed split, blush background)
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-home-happ {
    padding: 0;
}
/* Breather between the two adjacent full-bleed bands (happ → cakes) so
   they don't butt up with conflicting bg colors. */
.tgk-home-happ + .tgk-home-cakes { margin-top: 48px; }
.tgk-home-happ-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 520px;
    width: 100%;
}
.tgk-home-happ-image {
    position: relative;
    overflow: hidden;
    min-height: 320px;
}
.tgk-home-happ-image img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.tgk-home-happ-text {
    padding: 80px clamp(32px, 6vw, 88px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tgk-home-happ-text > * { max-width: 540px; }
.tgk-home-happ-text .tgk-eyebrow { margin-bottom: 14px; }
.tgk-home-happ-text .tgk-h2 { margin: 0 0 12px; }
.tgk-home-happ-meta {
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin: 0 0 20px;
}
.tgk-home-happ-body {
    font-size: 18px;
    line-height: 1.65;
    color: var(--charcoal);
    margin: 0 0 28px;
}
@media (max-width: 900px) {
    .tgk-home-happ-inner { grid-template-columns: 1fr; }
    /* Preserve portrait aspect on mobile: drop fixed height, image dictates. */
    .tgk-home-happ-image { min-height: 0; max-height: none; }
    .tgk-home-happ-image img {
        position: static;
        width: 100%; height: auto;
        object-fit: contain;
    }
    .tgk-home-happ-text { padding: 48px var(--container-mob); max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE — WEDDINGS (full-bleed split, text left, image right)
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-home-cakes {
    padding: 0;
}
.tgk-home-cakes-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 600px;
    width: 100%;
}
.tgk-home-cakes-text {
    padding: 96px clamp(32px, 6vw, 88px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tgk-home-cakes-text > * { max-width: 520px; }
.tgk-home-cakes-text .tgk-eyebrow { margin-bottom: 14px; }
.tgk-home-cakes-text .tgk-h2 { margin: 0 0 18px; }
.tgk-home-cakes-body {
    font-size: 18px;
    line-height: 1.65;
    color: var(--charcoal);
    margin: 0 0 28px;
}
.tgk-home-cakes-image {
    position: relative;
    overflow: hidden;
    min-height: 420px;
}
.tgk-home-cakes-image img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.tgk-home-cakes-fallback {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--pink-light) 0%, var(--pink-full) 100%);
}
@media (max-width: 900px) {
    .tgk-home-cakes-inner { grid-template-columns: 1fr; min-height: 0; }
    .tgk-home-cakes-text { padding: 56px var(--container-mob); }
    /* Preserve portrait aspect on mobile: drop fixed height, image dictates. */
    .tgk-home-cakes-image { min-height: 0; max-height: none; order: -1; }
    .tgk-home-cakes-image img {
        position: static;
        width: 100%; height: auto;
        object-fit: contain;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE — BRIDGE LINE (chapter-break divider with optional tagline)
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-home-bridge {
    padding: 64px var(--container-px);
    background: var(--bg-page);
}
.tgk-home-bridge-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    max-width: 880px;
    margin: 0 auto;
}
.tgk-home-bridge-rule {
    flex: 1 1 60px;
    height: 1px;
    max-width: 140px;
    background: var(--gold-dark);
    opacity: 0.45;
}
.tgk-home-bridge-text {
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(20px, 2vw, 28px);
    color: var(--charcoal);
    line-height: 1.3;
    margin: 0;
    text-align: center;
}
@media (max-width: 600px) {
    .tgk-home-bridge { padding: 48px var(--container-mob); }
    .tgk-home-bridge-inner { gap: 18px; }
    .tgk-home-bridge-rule { max-width: 60px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE — BRAND STORY (full-bleed split, charcoal, image left)
   Why we are called The Glass Knife.
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-home-brand {
    padding: 0;
}
.tgk-home-brand-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    min-height: 600px;
    width: 100%;
}
.tgk-home-brand-image {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    background: #1f2022;
}
.tgk-home-brand-image img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.tgk-home-brand-text {
    padding: 96px clamp(32px, 6vw, 88px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tgk-home-brand-text > * { max-width: 540px; }
.tgk-home-brand-text .tgk-eyebrow {
    color: var(--gold);
    margin-bottom: 14px;
}
.tgk-home-brand-text .tgk-h2 {
    color: #fff;
    margin: 0 0 24px;
}
.tgk-home-brand-body {
    color: rgba(255,255,255,0.82);
    font-size: 18px;
    line-height: 1.65;
    margin: 0 0 28px;
}
.tgk-home-brand-body p { margin: 0 0 16px; }
.tgk-home-brand-body p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
    .tgk-home-brand-inner { grid-template-columns: 1fr; min-height: 0; }
    /* Preserve portrait aspect on mobile: drop fixed height, image dictates. */
    .tgk-home-brand-image { min-height: 0; max-height: none; order: -1; }
    .tgk-home-brand-image img {
        position: static;
        width: 100%; height: auto;
        object-fit: contain;
    }
    .tgk-home-brand-text { padding: 56px var(--container-mob); }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE — LOCATIONS (two-card NAP block, local SEO)
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-home-loc {
    padding: 96px var(--container-px);
}
.tgk-home-loc-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.tgk-home-loc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.tgk-home-loc-card {
    background: #fff;
    border: 1px solid rgba(38, 39, 41, 0.08);
    border-radius: 14px;
    padding: 36px 32px;
    box-shadow: 0 2px 10px rgba(38, 39, 41, 0.04);
}
.tgk-home-loc-name {
    margin: 0 0 16px;
}
.tgk-home-loc-addr {
    font-size: 17px;
    line-height: 1.55;
    color: var(--charcoal);
    margin: 0 0 12px;
}
.tgk-home-loc-hours {
    font-size: 15px;
    line-height: 1.6;
    color: var(--charcoal);
    opacity: 0.78;
    margin: 0 0 8px;
}
.tgk-home-loc-phone {
    font-size: 15px;
    margin: 0 0 24px;
}
.tgk-home-loc-phone a {
    color: var(--gold-dark);
    text-decoration: none;
    font-weight: 600;
}
.tgk-home-loc-phone a:hover { text-decoration: underline; }
.tgk-home-loc-ctas { gap: 10px; }
@media (max-width: 768px) {
    .tgk-home-loc { padding: 64px var(--container-mob); }
    .tgk-home-loc-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AWARDS ARCHIVE — edge-to-edge marquee of first-place wins.
   All cards server-rendered (SEO-friendly). CSS-only auto-scroll, pauses on
   hover. Duplicated track for seamless loop; the duplicate is aria-hidden
   and stripped of schema.org markup so Google still only indexes the originals.
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-awards-archive {
    /* break out of the section's max-width to span the full viewport */
    margin: 40px calc(50% - 50vw) 0;
    width: 100vw;
    position: relative;
}
.tgk-awards-archive-label {
    text-align: center;
    margin: 0 0 18px;
}
.tgk-awards-archive-scroll {
    display: flex;
    overflow: hidden;
    /* fade the leading/trailing edges so the marquee feels continuous */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
}
.tgk-awards-archive-track {
    list-style: none;
    margin: 0;
    padding: 8px 7px 24px; /* half of gap left/right so first/last card breathe equally */
    display: flex;
    gap: 14px;
    flex-shrink: 0;
    animation: tgk-awards-marquee 90s linear infinite;
}
.tgk-awards-archive:hover .tgk-awards-archive-track {
    animation-play-state: paused;
}
@keyframes tgk-awards-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(-100% - 14px)); }
}
@media (prefers-reduced-motion: reduce) {
    .tgk-awards-archive-track { animation: none; }
}
.tgk-awards-archive-item {
    flex: 0 0 auto;
    display: flex;
}
.tgk-awards-archive-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 320px;
    min-height: 180px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid rgba(38, 39, 41, 0.08);
    border-radius: 12px;
    text-decoration: none;
    color: var(--charcoal);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.tgk-awards-archive-card:hover {
    border-color: var(--gold);
    box-shadow: 0 6px 16px rgba(38, 39, 41, 0.08);
}
/* Card content stack: Year → Title → Placement → Publisher (bottom) */
.tgk-awards-archive-year {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 28px;
    line-height: 1;
    color: var(--gold-dark);
}
.tgk-awards-archive-title {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
    color: var(--charcoal);
}
.tgk-awards-archive-placement {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--charcoal);
    opacity: 0.65;
    margin-top: auto; /* pin the placement + publisher pair to the bottom of every card */
    padding-top: 8px;
}
.tgk-awards-archive-publisher {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--charcoal);
    opacity: 0.65;
}
.tgk-awards-archive-program {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--charcoal);
    opacity: 0.45;
    margin-top: -2px; /* tighter pairing with the publisher line above */
}
/* Dark-tone variant */
.tgk-section-dark .tgk-awards-archive-card {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
    color: #fff;
}
.tgk-section-dark a.tgk-awards-archive-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: var(--gold);
}
.tgk-section-dark .tgk-awards-archive-title,
.tgk-section-dark .tgk-awards-archive-publisher { color: #fff; }
.tgk-section-dark .tgk-awards-archive-placement { color: rgba(255,255,255,0.6); }

@media (max-width: 768px) {
    .tgk-awards-archive-card { width: 280px; padding: 18px 18px; }
    .tgk-awards-archive-year { font-size: 24px; }
    .tgk-awards-archive-title { font-size: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AWARDS & RECOGNITION
   Headline + supporting line + a row of horizontal award cards.
   Each card: badge on the left, publisher/title/placement on the right.
   Layout adapts to 1–4 awards. Stacks on mobile.
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-awards {
    padding: 64px var(--container-px);
    margin-bottom: 80px; /* cream exhale before the next full-bleed section */
    text-align: center;
    background: var(--pink-light);
    position: relative;
    isolation: isolate; /* contain the ::before z-index */
}
/* Optional background image overlay — sits over the pink base at editor-set opacity */
.tgk-awards.has-bg-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--awards-bg-image);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--awards-bg-opacity, 0.25);
    pointer-events: none;
    z-index: 0;
}
.tgk-awards > * { position: relative; z-index: 1; }
.tgk-awards-inner {
    max-width: 960px;
    margin: 0 auto;
}
.tgk-awards-header {
    margin-bottom: 36px;
}
.tgk-awards-header .tgk-eyebrow {
    margin-bottom: 12px;
}
.tgk-awards-headline {
    margin: 0 auto;
    max-width: 760px;
}
.tgk-awards-subline {
    margin: 14px auto 0;
    max-width: 580px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--charcoal);
    opacity: 0.78;
}

.tgk-awards-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 18px;
}
.tgk-award-card-wrap {
    flex: 0 1 380px;
    display: flex;
}

.tgk-award-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid rgba(38, 39, 41, 0.10);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(38, 39, 41, 0.04);
    text-decoration: none;
    color: var(--charcoal);
    text-align: left;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}
a.tgk-award-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(38, 39, 41, 0.10);
    border-color: rgba(212, 184, 94, 0.6);
}

/* Asset (uploaded badge image) */
.tgk-award-asset {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tgk-award-asset img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Text-only badge fallback when no asset uploaded */
.tgk-award-badge {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(155deg, #F0D878 0%, #D4B85E 35%, #B89A3E 65%, #D0B45A 100%);
    color: var(--charcoal);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.55),
                inset 0 0 0 4px rgba(38, 39, 41, 0.18);
}
.tgk-award-badge-placement {
    font-family: var(--font-body);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.tgk-award-badge-year {
    font-family: var(--font-display);
    font-size: 22px;
    font-style: italic;
    font-weight: 300;
    line-height: 1;
    margin-top: 2px;
}

/* Card meta (publisher, title, placement) */
.tgk-award-meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.tgk-award-publisher {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin: 0;
}
.tgk-award-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.2;
    margin: 2px 0 0;
    color: var(--charcoal);
}
.tgk-award-title .tgk-award-year {
    opacity: 0.55;
    margin-left: 4px;
}
.tgk-award-placement {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--charcoal);
    opacity: 0.55;
    margin: 4px 0 0;
}

/* Dark-tone variant */
.tgk-section-dark.tgk-awards .tgk-award-card {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.10);
    color: #fff;
    box-shadow: none;
}
.tgk-section-dark.tgk-awards a.tgk-award-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: var(--gold);
}
.tgk-section-dark.tgk-awards .tgk-award-title { color: #fff; }
.tgk-section-dark.tgk-awards .tgk-award-placement { color: rgba(255,255,255,0.6); }
.tgk-section-dark.tgk-awards .tgk-awards-subline { color: rgba(255,255,255,0.78); }

/* Tighten the inner container when there are just one or two cards */
.tgk-awards-count-1 .tgk-awards-grid,
.tgk-awards-count-2 .tgk-awards-grid {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

/* Mobile */
@media (max-width: 768px) {
    .tgk-awards { padding: 48px var(--container-mob); }
    .tgk-awards-header { margin-bottom: 28px; }
    .tgk-award-card-wrap { flex: 1 1 100%; max-width: 420px; }
    .tgk-award-card { padding: 16px 18px; gap: 14px; }
    .tgk-award-asset, .tgk-award-badge { width: 72px; height: 72px; }
    .tgk-award-title { font-size: 20px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-announce {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 101;
    background: var(--charcoal);
    color: rgba(255,255,255,.8);
    text-align: center;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 12px var(--container-px);
    line-height: 1.4;
}
/* When there is no announcement text, the body gets .tgk-no-announce.
   Collapse the bar entirely AND pull the header up to top:0. Hero padding
   shifts up by 42px to match. No reserved cream strip above the logo. */
.tgk-announce.is-empty {
    background: var(--bg-page);
    color: transparent;
    border-bottom: 1px solid transparent;
    height: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
}
body.tgk-no-announce .tgk-header { top: 0; }
body.tgk-no-announce.admin-bar .tgk-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.tgk-no-announce.admin-bar .tgk-header { top: 46px; }
}
body.tgk-no-announce .tgk-home-hero { padding-top: 126px; }
body.tgk-no-announce .pa-hero,
body.tgk-no-announce .oa-hero { padding-top: 126px; }
@media (max-width: 900px) {
    body.tgk-no-announce .pa-hero,
    body.tgk-no-announce .oa-hero { padding-top: 72px; }
}
body.tgk-no-announce .tgk-nav-drawer { padding-top: 112px; }
body.tgk-no-announce.admin-bar .tgk-nav-drawer { padding-top: 144px; }
@media screen and (max-width: 782px) {
    body.tgk-no-announce.admin-bar .tgk-nav-drawer { padding-top: 158px; }
}
.tgk-announce a { color: var(--gold); transition: color var(--dur) var(--ease); }
.tgk-announce a:hover { color: #fff; }
@media (max-width: 900px) {
    .tgk-announce { padding-left: var(--container-mob); padding-right: var(--container-mob); font-size: 11px; }
}

/* WP admin bar — shift fixed UI down when logged in */
body.admin-bar .tgk-announce { top: 32px; }
body.admin-bar .tgk-header   { top: calc(32px + 42px); }
@media screen and (max-width: 782px) {
    body.admin-bar .tgk-announce { top: 46px; }
    body.admin-bar .tgk-header   { top: calc(46px + 42px); }
}
#wpadminbar { z-index: 99999 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-header {
    position: fixed;
    top: 42px; left: 0; right: 0;
    z-index: 100;
    background: var(--bg-page);
    border-bottom: 1px solid var(--border);
    transition: box-shadow var(--dur) var(--ease);
}
.tgk-header.is-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.08); }

.tgk-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-height: 96px;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 18px var(--container-px);
    transition: padding var(--dur) var(--ease), min-height var(--dur) var(--ease);
}
.tgk-header.is-scrolled .tgk-header-inner { min-height: 72px; padding-top: 12px; padding-bottom: 12px; }
@media (max-width: 768px) {
    .tgk-header-inner { padding-left: var(--container-mob); padding-right: var(--container-mob); }
}

.tgk-logo {
    grid-column: 2;
    justify-self: center;
    align-self: center;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 36px;
}
.tgk-logo img {
    height: 52px;
    width: auto;
    display: block;
    transition: height var(--dur) var(--ease);
}
.tgk-header.is-scrolled .tgk-logo img { height: 38px; }

/* Desktop nav */
.tgk-nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}
.tgk-nav-left  { grid-column: 1; justify-self: end; }
.tgk-header-right {
    grid-column: 3;
    display: flex;
    align-items: center;
    gap: 28px;
    justify-self: stretch;
    justify-content: space-between;
}
.tgk-nav-item { position: relative; display: inline-flex; align-items: center; }
.tgk-nav-item > a,
.tgk-nav > a {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text);
    padding: 8px 10px;
    transition: color var(--dur) var(--ease);
    white-space: nowrap;
    display: block;
}
.tgk-nav-item > a:hover,
.tgk-nav > a:hover,
.tgk-has-dropdown:hover > a { color: var(--gold-dark); }

/* Dropdown panels */
.tgk-dropdown {
    position: absolute;
    top: 100%; left: 0;
    min-width: 180px;
    background: var(--bg-page);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 32px rgba(0,0,0,.10);
    padding: 8px 0;
    margin-top: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
    z-index: 200;
}
.tgk-dropdown::before {
    content: '';
    position: absolute;
    top: -12px; left: 0; right: 0;
    height: 12px;
}
.tgk-has-dropdown:hover .tgk-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.tgk-dropdown a {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    padding: 10px 20px;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
    white-space: nowrap;
}
.tgk-dropdown a:hover {
    color: var(--gold-dark);
    background: var(--bg-offset);
}

/* Header right: CTAs + hamburger */
.tgk-header-ctas {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.tgk-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
}
.tgk-hamburger span { display: block; width: 24px; height: 2px; background: var(--text); }

/* Order Online shimmer — desktop nav button */
.tgk-btn-order-online { position: relative; overflow: hidden; }
.tgk-btn-order-online::after {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 200%; height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255,255,255,0.04) 30%,
        rgba(255,255,255,0.16) 50%,
        rgba(255,255,255,0.04) 70%,
        transparent 100%
    );
    animation: tgk-shimmer 8s ease-in-out infinite;
}

/* Mobile: collapse nav, show hamburger. Logo stays centered via grid-column: 2. */
@media (max-width: 1100px) {
    .tgk-nav { display: none; }
    .tgk-header-ctas .tgk-btn { display: none; }
    .tgk-hamburger { display: flex; }
    .tgk-header-inner {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .tgk-logo { padding: 0; }
    /* With nav-right hidden, header-right has only the hamburger.
       Override space-between (which leaves the lone child at flex-start = next to logo).
       Force flex-end so the hamburger pins to the right edge of column 3. */
    .tgk-header-right { gap: 0; justify-content: flex-end; }
    .tgk-logo img { height: 38px; }
}

/* Mobile nav drawer */
.tgk-nav-drawer {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--bg-page);
    /* Top padding must clear the announce bar (~42px) + site header (96px unscrolled).
       Earlier 120px allowed the first nav item to hide behind the header. */
    padding: 154px var(--container-mob) 48px;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
}
body.admin-bar .tgk-nav-drawer { padding-top: 186px; }
@media screen and (max-width: 782px) {
    body.admin-bar .tgk-nav-drawer { padding-top: 200px; }
}
.tgk-nav-drawer.is-open { display: flex; }
/* Don't apply the generic drawer-link styling to the Order Online CTA — it's a button. */
.tgk-nav-drawer a:not(.tgk-btn) {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text);
    padding: 18px 0;
    border-bottom: 1px solid var(--border);
    display: block;
    transition: color var(--dur) var(--ease);
}
.tgk-nav-drawer a:not(.tgk-btn):hover { color: var(--gold-dark); }
.tgk-nav-drawer-item { display: flex; flex-direction: column; }
.tgk-nav-drawer-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
}
.tgk-nav-drawer-row > a {
    flex: 1;
    border-bottom: none; /* row handles the border */
}
.tgk-nav-drawer-toggle {
    flex-shrink: 0;
    padding: 18px 4px 18px 16px;
    color: var(--text-light);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: color var(--dur) var(--ease);
}
.tgk-nav-drawer-toggle:hover { color: var(--gold-dark); }
.tgk-nav-drawer-toggle svg {
    transition: transform var(--dur) var(--ease);
}
.tgk-nav-drawer-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.tgk-nav-drawer-sub {
    display: flex;
    flex-direction: column;
}
.tgk-nav-drawer-sub[hidden] { display: none; }
.tgk-nav-drawer-sub a {
    padding: 14px 0 14px 20px;
    font-size: 13px;
    letter-spacing: 0.14em;
    color: var(--text-light);
    border-bottom: 1px solid var(--border);
    border-bottom-color: rgba(38,39,41,.06);
}
.tgk-nav-drawer-sub a:last-child { border-bottom: 1px solid var(--border); }
.tgk-nav-drawer-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 32px;
}
.tgk-nav-close {
    position: absolute;
    top: 58px; right: var(--container-mob);
    font-size: 28px;
    color: var(--text);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

/* ══════════════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-footer {
    background: var(--charcoal);
    color: rgba(255,255,255,.75);
    padding: 80px 0 48px;
}
.tgk-footer-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    margin-bottom: 40px;
}
@media (max-width: 900px) {
    .tgk-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 600px) {
    .tgk-footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .tgk-footer-grid > div:nth-child(3) {
        padding-top: 32px;
        border-top: 1px solid rgba(255,255,255,.12);
    }
}

.tgk-footer-logo img { height: 52px; width: auto; opacity: .9; }
.tgk-footer-col-title {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
    display: block;
}
.tgk-footer address {
    font-style: normal;
    font-size: 17px;
    line-height: 1.8;
}
.tgk-footer address a { color: rgba(255,255,255,.75); transition: color var(--dur) var(--ease); }
.tgk-footer address a:hover { color: #fff; }
.tgk-footer-nav { display: flex; flex-direction: column; gap: 10px; }
.tgk-footer-nav a { font-size: 17px; color: rgba(255,255,255,.7); transition: color var(--dur) var(--ease); }
.tgk-footer-nav a:hover { color: #fff; }
.tgk-footer-social {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    width: 100%;
    max-width: 200px;
}
.tgk-footer-social a {
    color: rgba(255,255,255,.5);
    transition: color var(--dur) var(--ease);
    display: flex;
    align-items: center;
}
.tgk-footer-social a:hover { color: var(--gold); }
.tgk-footer-social svg { display: block; }

.tgk-footer-reserve-link {
    display: inline-block;
    margin-top: 16px;
    font-size: 17px;
    color: rgba(255,255,255,.75);
    transition: color var(--dur) var(--ease);
}
.tgk-footer-reserve-link:hover { color: #fff; }
.tgk-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: rgba(255,255,255,.4);
}
.tgk-footer-badges { display: flex; gap: 16px; font-size: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   STICKY ORDER BUTTON — mobile only
   ══════════════════════════════════════════════════════════════════════════ */
.tgk-sticky-order { display: none; }

@media (max-width: 900px) {
    .tgk-sticky-order {
        display: block;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 98;
        padding: 12px 24px 20px;
        background: var(--pink-light);
        border-top: 1px solid var(--pink-border);
    }
    .tgk-sticky-order-btn {
        display: block;
        width: 100%;
        text-align: center;
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        padding: 14px 24px;
        border-radius: 10px;
        background: linear-gradient(155deg, #F0D878 0%, #D4B85E 35%, #B89A3E 65%, #D0B45A 100%);
        color: var(--charcoal);
        text-decoration: none;
        position: relative;
        overflow: hidden;
    }
    .tgk-sticky-order-btn::after {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 120%; height: 100%;
        background: linear-gradient(
            105deg,
            transparent 0%,
            rgba(255,255,255,0.07) 25%,
            rgba(255,255,255,0.26) 50%,
            rgba(255,255,255,0.07) 75%,
            transparent 100%
        );
        animation: tgk-shimmer 12s ease-in-out infinite;
    }
    body { padding-bottom: 80px; }
    .tgk-btn-order-online { display: none !important; }
    .tgk-sticky-order.is-hidden { opacity: 0; pointer-events: none; }
}

/* ── Legacy page hero fix ─────────────────────────────────────────────────
   The old home page stacks video + img. Without the DASH JS player the
   video is an empty block that pushes the img below the clipped container.
   Force both to absolute so they overlap; the img shows as fallback.
   ───────────────────────────────────────────────────────────────────────── */
.home-hero-image { position: relative; }
.home-hero-image video,
.home-hero-image img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* ── Shimmer keyframe (shared by sticky bar and desktop Order Online) ──── */
@keyframes tgk-shimmer {
    0%   { left: -60%; opacity: 0; }
    5%   { opacity: 1; }
    30%  { left: 110%; opacity: 0; }
    100% { left: 110%; opacity: 0; }
}

/* ── Shared pill toggle/anchor (used by menu location toggle, bakery skip nav, etc.) ──
   The canonical style for inline horizontal toggle/anchor pills across pages. */
.tgk-pill-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: center; }
.tgk-pill-row.is-scrollable { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
/* When the row is overflowing horizontally, start from the left so the first pill is reachable.
   When it fits, the centered default kicks back in. */
@supports (justify-content: safe center) { .tgk-pill-row { justify-content: safe center; } }
.tgk-pill-row.is-scrollable::-webkit-scrollbar { display: none; }
.tgk-pill {
    display: inline-block;
    flex: 0 0 auto;
    padding: 9px 20px;
    border-radius: 999px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #262729;
    background: transparent;
    border: 1px solid rgba(38,39,41,0.2);
    text-decoration: none;
    transition: all 0.15s ease;
    cursor: pointer;
    white-space: nowrap;
}
.tgk-pill:hover { border-color: #D4B85E; color: #B0913A; }
.tgk-pill.is-active { background: #262729; color: #fff; border-color: #262729; }
.tgk-pill.is-active:hover { color: #fff; border-color: #262729; }
@media (max-width: 720px) { .tgk-pill { padding: 7px 14px; font-size: 12px; letter-spacing: 0.08em; } }

/* ── Order Online picker modal ────────────────────────────────────────────
   Triggered by any element with [data-tgk-order-modal] or .tgk-order-trigger.
   Markup lives in footer.php. URLs read from Site Links ACF options. */
.tgk-order-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    overflow-y: auto;
}
.tgk-order-modal.is-open { display: flex !important; }
.tgk-order-modal-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    inset: 0;
    background: rgba(38, 39, 41, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.tgk-order-modal-card {
    position: relative;
    background: var(--bg-page, #F6F1E7);
    color: var(--charcoal);
    border-radius: 14px;
    padding: 40px 32px 32px;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(0,0,0,0.32);
    animation: tgk-order-modal-in 0.18s ease-out;
}
@keyframes tgk-order-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.tgk-order-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: var(--charcoal);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 999px;
    transition: background 0.15s ease;
}
.tgk-order-modal-close:hover { background: rgba(38,39,41,0.08); }
.tgk-order-modal-eyebrow {
    text-align: center;
    margin-bottom: 8px;
}
.tgk-order-modal-title {
    text-align: center;
    margin: 0 0 8px;
}
.tgk-order-modal-sub {
    text-align: center;
    margin: 0 0 24px;
    color: rgba(38, 39, 41, 0.7);
}
.tgk-order-modal-actions {
    display: flex;
    flex-direction: column;   /* always stacked, today on top, future below */
    align-items: stretch;
    gap: 12px;
    width: 100%;
}
.tgk-order-modal-actions .tgk-btn {
    display: flex;
    width: 100%;
    min-width: 0;
    padding: 14px 20px;
    box-sizing: border-box;
}
html.tgk-order-modal-open,
body.tgk-order-modal-open { overflow: hidden; }
@media (max-width: 600px) {
    .tgk-order-modal-card { padding: 36px 20px 24px; }
}

/* ──────────────────────────────────────────────
   Gravity Forms — post-submission confirmation
   Framed cream card with a gold accent stripe and
   tighter body type. Applies wherever a GF form is
   wrapped in .res-gform (reservations + weddings).
   ────────────────────────────────────────────── */
.res-gform .gform_confirmation_wrapper,
.res-gform .gform_confirmation_message {
    background: var(--cream-mid);
    border-left: 3px solid var(--gold-dark);
    padding: 24px 28px;
    color: var(--charcoal);
    font-size: 18px;
    line-height: 1.65;
    border-radius: 2px;
}
.res-gform .gform_confirmation_wrapper h1,
.res-gform .gform_confirmation_wrapper h2,
.res-gform .gform_confirmation_wrapper h3,
.res-gform .gform_confirmation_message h1,
.res-gform .gform_confirmation_message h2,
.res-gform .gform_confirmation_message h3 {
    font-size: 22px;
    line-height: 1.3;
    margin: 0 0 12px;
    color: var(--charcoal);
}
.res-gform .gform_confirmation_wrapper p,
.res-gform .gform_confirmation_message p {
    margin: 0 0 10px;
}
.res-gform .gform_confirmation_wrapper p:last-child,
.res-gform .gform_confirmation_message p:last-child {
    margin-bottom: 0;
}
@media (max-width: 600px) {
    .res-gform .gform_confirmation_wrapper,
    .res-gform .gform_confirmation_message {
        padding: 20px 22px;
        font-size: 17px;
    }
}