/* ============================================================
   THE SHAKESPEARE PUB BANGKOK — Main Stylesheet
   ============================================================ */

/* ── 1. Font: Constantine ─────────────────────────────────── */
@font-face {
    font-family: 'Constantine';
    src: url('../fonts/Constantine.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ── 2. Design Tokens ─────────────────────────────────────── */
:root {
    --color-gradient-start : #70162c;
    --color-gradient-end   : #2c1204;
    --color-footer         : #490f1d;
    --color-gold           : #f1bf1f;
    --color-btn-bg         : #2c1204;
    --color-btn-border     : #f1bf1f;
    --color-text           : #ffffff;
    --color-text-muted     : rgba(255,255,255,0.80);
    --color-nav-bg         : #140308;

    --font-heading         : 'Constantine', 'Times New Roman', serif;
    --font-body            : 'PT Sans', sans-serif;

    --content-width        : 1350px;
    --section-pad-v        : 90px;
    --section-pad-v-sm     : 60px;
    --radius-arch-h        : 50%;    /* horizontal radius for arch */
    --radius-arch-v        : 50%;    /* vertical radius for arch   */
}

/* ── 3. Reset / Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family    : var(--font-body);
    font-size      : 16px;
    line-height    : 1.7;
    color          : var(--color-text);
    background     : var(--color-gradient-end);
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

/* ── 4. Utility / Shared ──────────────────────────────────── */
.container {
    max-width : var(--content-width);
    margin    : 0 auto;
    padding   : 0 50px;  /* matches header-inner and footer-inner */
}

/* Ornamental gold separator (animates via animations.css scaleX) */
.separator {
    display          : block;
    width            : 260px;
    height           : 18px;
    background       : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 18' fill='none'%3E%3Cline x1='0' y1='9' x2='86' y2='9' stroke='%23f1bf1f' stroke-width='1'/%3E%3Cpath d='M86,9 L90,5 L94,9 L90,13 Z' fill='%23f1bf1f'/%3E%3Cpath d='M94,9 C98,9 99,4 105,4 C111,4 112,9 116,9' stroke='%23f1bf1f' stroke-linecap='round' stroke-width='1' fill='none'/%3E%3Ccircle cx='130' cy='9' r='5.5' stroke='%23f1bf1f' stroke-width='1'/%3E%3Ccircle cx='130' cy='9' r='2.5' fill='%23f1bf1f'/%3E%3Cpath d='M144,9 C148,9 149,4 155,4 C161,4 162,9 166,9' stroke='%23f1bf1f' stroke-linecap='round' stroke-width='1' fill='none'/%3E%3Cpath d='M166,9 L170,5 L174,9 L170,13 Z' fill='%23f1bf1f'/%3E%3Cline x1='174' y1='9' x2='260' y2='9' stroke='%23f1bf1f' stroke-width='1'/%3E%3C/svg%3E") left center / auto 100% no-repeat;
    margin-bottom    : 22px;
    transform-origin : left center;
}

/* Centred separator variant */
.separator--center {
    margin-left  : auto;
    margin-right : auto;
    transform-origin: center center;
}

/* Section headings */
.section-heading {
    font-family    : var(--font-heading);
    font-size      : clamp(28px, 3.2vw, 46px);
    font-weight    : normal;
    line-height    : 1.18;
    color          : var(--color-text);
    margin-bottom  : 20px;
    letter-spacing : 0.02em;
}

/* Body copy */
.section-body {
    font-family : var(--font-body);
    font-size   : clamp(16px, 1.6vw, 23px);
    line-height : 1.65;
    color       : var(--color-text-muted);
    max-width   : 520px;
}

/* ── 5. Buttons ───────────────────────────────────────────── */
.btn {
    display        : inline-block;
    font-family    : var(--font-body);
    font-size      : 12px;
    font-weight    : 700;
    letter-spacing : 0.14em;
    text-transform : uppercase;
    color          : var(--color-text);
    background     : var(--color-btn-bg);
    border         : 1px solid var(--color-btn-border);
    padding        : 13px 34px;
    cursor         : pointer;
    position       : relative;
    overflow       : hidden;
    transition     : color 0.3s ease, background 0.3s ease;
    margin-top     : 30px;
}

/* Shimmer fill on hover */
.btn::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : var(--color-gold);
    transform  : scaleX(0);
    transform-origin: left;
    transition : transform 0.35s ease;
    z-index    : 0;
}
.btn span { position: relative; z-index: 1; }
.btn:hover::before          { transform: scaleX(1); }
.btn:hover                  { color: #1a0505; }


/* ── 6. Header / Navigation ───────────────────────────────── */
.site-header {
    position : absolute;
    top      : 0;
    left     : 0;
    right    : 0;
    z-index  : 999;
    background: linear-gradient(
        to bottom,
        #0b0500          0%,
        rgba(11,5,0,0.95) 20%,
        rgba(11,5,0,0.80) 45%,
        rgba(11,5,0,0.40) 70%,
        rgba(11,5,0,0.10) 88%,
        transparent      100%
    );
    padding-bottom: 90px;
}

.header-inner {
    max-width             : var(--content-width);
    margin                : 0 auto;
    padding               : 0 50px;
    display               : grid;
    grid-template-columns : 1fr auto 1fr;
    align-items           : start;
}

/* Left nav group */
.nav-left {
    display     : flex;
    align-items : center;
    gap         : 32px;
    padding-top : 26px;
}

/* Right nav group */
.nav-right {
    display         : flex;
    align-items     : center;
    justify-content : flex-end;
    gap             : 32px;
    padding-top     : 26px;
}

/* Centre logo */
.nav-logo {
    display         : flex;
    justify-content : center;
    padding         : 10px 20px;
}
.nav-logo img {
    width     : 280px;
    height    : auto;
    max-width : 100%;
    display   : block;
}

/* Nav links */
.nav-link {
    font-family    : var(--font-heading);
    font-size      : 19px;
    letter-spacing : 0.12em;
    text-transform : uppercase;
    color          : var(--color-text);
    position       : relative;
    padding-bottom : 3px;
    white-space    : nowrap;
}
.nav-link::after {
    content    : '';
    position   : absolute;
    bottom     : 0;
    left       : 0;
    width      : 0;
    height     : 1px;
    background : var(--color-gold);
    transition : width 0.35s ease;
}
.nav-link:hover::after,
.nav-link.current::after { width: 100%; }

/* Social icons */
.nav-social {
    display     : flex;
    align-items : center;
    gap         : 16px;
}
.nav-social a {
    display     : flex;
    align-items : center;
    opacity     : 0.85;
    transition  : opacity 0.25s ease, transform 0.25s ease;
}
.nav-social a:hover { opacity: 1; transform: scale(1.1); }
.nav-social img {
    height    : 28px;
    width     : auto;
    display   : block;
}

/* Hamburger button — hidden on desktop, shown on mobile */
.nav-hamburger {
    display     : none;
    background  : none;
    border      : none;
    cursor      : pointer;
    padding     : 4px;
    color       : #fff;
    line-height : 0;
    flex-shrink : 0;
}

/* ── Mobile Menu Overlay ──────────────────────────────────── */
.mobile-menu {
    position       : fixed;
    inset          : 0;
    z-index        : 9998;
    background     : linear-gradient(
        150deg,
        #140308 0%,
        #2c1204 55%,
        #70162c 100%
    );
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    padding        : 80px 40px 60px;

    /* Hidden by default — fade + slight slide */
    opacity        : 0;
    pointer-events : none;
    transform      : translateY(-6px);
    transition     : opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu.is-open {
    opacity        : 1;
    pointer-events : auto;
    transform      : translateY(0);
}

.mobile-menu__close {
    position   : absolute;
    top        : 22px;
    right      : 26px;
    background : none;
    border     : none;
    cursor     : pointer;
    color      : #fff;
    padding    : 8px;
    opacity    : 0.8;
    line-height: 0;
    transition : opacity 0.2s ease, transform 0.2s ease;
}
.mobile-menu__close:hover { opacity: 1; transform: rotate(90deg); }

.mobile-menu__links {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 4px;
    margin-bottom  : 48px;
}
.mobile-menu__link {
    font-family    : var(--font-heading);
    font-size      : clamp(28px, 7vw, 44px);
    text-transform : uppercase;
    letter-spacing : 0.10em;
    color          : #fff;
    text-decoration: none;
    padding        : 10px 0;
    position       : relative;
    transition     : color 0.25s ease;
}
.mobile-menu__link::after {
    content    : '';
    position   : absolute;
    bottom     : 6px;
    left       : 50%;
    transform  : translateX(-50%);
    width      : 0;
    height     : 1px;
    background : var(--color-gold);
    transition : width 0.3s ease;
}
.mobile-menu__link:hover          { color: var(--color-gold); }
.mobile-menu__link:hover::after   { width: 100%; }

.mobile-menu__footer {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 24px;
}
.mobile-menu__rule {
    display    : block;
    width      : 50px;
    height     : 1px;
    background : rgba(241, 191, 31, 0.5);
}
.mobile-menu__social {
    display     : flex;
    align-items : center;
    gap         : 28px;
}
.mobile-menu__social a {
    display    : flex;
    opacity    : 0.8;
    transition : opacity 0.2s ease, transform 0.2s ease;
}
.mobile-menu__social a:hover { opacity: 1; transform: scale(1.12); }
.mobile-menu__social img {
    height  : 34px;
    width   : auto;
    display : block;
}


/* ── 7. Hero Section ──────────────────────────────────────── */
.hero {
    position   : relative;
    width      : 100%;
    height     : 100vh;
    min-height : 680px;
    overflow   : hidden;
}

.hero__image {
    position        : absolute;
    inset           : 0;
    width           : 100%;
    height          : 100%;
    object-fit      : cover;
    object-position : center;
    will-change     : transform; /* parallax target */
}

/* Dark gradient overlay — bottom fade for readability */
.hero::after {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : linear-gradient(
        to bottom,
        rgba(0,0,0,0)    0%,
        rgba(0,0,0,0.35) 60%,
        rgba(0,0,0,0.72) 100%
    );
    pointer-events: none;
}

/* Outer overlay spans full width — no transform, so animations can't break it */
.hero__overlay {
    position : absolute;
    bottom   : 70px;
    left     : 0;
    right    : 0;
    z-index  : 2;
}

/* Inner wrapper: 3-column grid
   col 1 = location + view-map (auto width)
   col 2 = flexible spacer
   col 3 = reservation button (auto width)                */
.hero__overlay-inner {
    max-width             : var(--content-width);
    margin                : 0 auto;
    padding               : 0 50px;
    display               : grid;
    grid-template-columns : auto 1fr auto;
    grid-template-rows    : auto auto;
    row-gap               : 16px;
    align-items           : end;
}

/* Location block */
.hero__location {
    grid-column  : 1;
    grid-row     : 1;
    display      : flex;
    align-items  : flex-start;
    gap          : 10px;
}
.hero__pin {
    width      : 20px;
    height     : 26px;
    margin-top : 2px;
    flex-shrink: 0;
}
.hero__location-text {
    font-family   : var(--font-body);
    font-size     : 15px;
    letter-spacing: 0.04em;
    color         : #fff;
    line-height   : 1.45;
    text-shadow   : 0 1px 6px rgba(0,0,0,0.5);
}
.hero__location-text strong {
    display       : block;
    font-size     : 11px;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color         : var(--color-gold);
    margin-bottom : 3px;
}

/* View Map — left column, second row */
.hero__view-map {
    grid-column  : 1;
    grid-row     : 2;
    margin-top   : 0;
    justify-self : start;   /* don't stretch to column width */
    text-align   : center;
}

/* Reservation — right column, second row */
.hero__reservation {
    grid-column: 3;
    grid-row   : 2;
    margin-top : 0;
}

/* Centred H1 — sits above the gradient overlay */
.hero__title {
    position      : absolute;
    top           : 50%;
    left          : 50%;
    transform     : translate(-50%, -50%);
    z-index       : 2;
    font-family   : var(--font-heading);
    font-size     : clamp(32px, 5.5vw, 88px);
    color         : #fff;
    text-align    : center;
    max-width     : 90vw;
    text-shadow   : 0 2px 24px rgba(0,0,0,0.55);
    pointer-events: none;
    margin        : 0;
    line-height   : 1.1;
}

/* ── 8. Dark Gradient Sections Wrapper ────────────────────── */
/*
   BACKGROUND COLOUR GUIDE:

   GLOW COLOUR  → #70172c          (bright burgundy-red at glow centre)
   GLOW FADE    → rgba(112,23,44,0) (same hue, fully transparent at glow edge —
                                     MUST stay the same hue as glow colour or
                                     the browser interpolates through grey)
   BASE COLOUR  → #311208          (dark brown base, shows between glows)

   Tile positions — glows are symmetric so top/bottom edges match seamlessly:
     Glow 1 — top-left      at 18% across, 12% down
     Glow 2 — middle-right  at 82% across, 50% down
     Glow 3 — bottom-left   at 18% across, 88% down
     (12% from top = 12% from bottom → tile edges are identical → no seam)

   TILE HEIGHT  → 1100px
   GLOW SIZE    → 65% wide × 38% tall per glow
*/
.dark-sections {
    background-color : #311208;
    background-image :
        /* Glow 1 — top left */
        radial-gradient(
            ellipse 65% 38% at 18% 12%,
            #70172c          0%,
            rgba(112,23,44,0) 100%
        ),
        /* Glow 2 — middle right */
        radial-gradient(
            ellipse 65% 38% at 82% 50%,
            #70172c          0%,
            rgba(112,23,44,0) 100%
        ),
        /* Glow 3 — bottom left */
        radial-gradient(
            ellipse 65% 38% at 18% 88%,
            #70172c          0%,
            rgba(112,23,44,0) 100%
        );
    background-size   : 100% 1100px;
    background-repeat : repeat-y;
}


/* ── 9. About Section ─────────────────────────────────────── */
.about-section {
    padding  : var(--section-pad-v) 0;
    position : relative;
    z-index  : 1; /* sit above hero when images bleed upward */
}
.about-section .container {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 60px;
    align-items           : center;
}
.about-content { }

/* Images: aspect-ratio locks the container so height always scales with width.
   Both arches use % dimensions so their shape (width:height ratio) is preserved
   at every screen size. margin-top bleeds the group up into the hero. */
.about-images {
    position     : relative;
    aspect-ratio : 595 / 760; /* width:height at desktop — maintains proportions */
    align-self   : start;
    margin-top   : -127px;
}

/* Arch image frame */
.arch-frame {
    overflow      : hidden;
    border-radius : var(--radius-arch-h) var(--radius-arch-h) 0 0;
    border        : 0px solid var(--color-gold);
    position      : absolute;
}
.arch-frame img {
    width           : 100%;
    height          : 100%;
    object-fit      : cover;
    object-position : center top;
    transition      : transform 0.55s ease;
    display         : block;
}
.arch-frame:hover img { transform: scale(1.06); }

/* RIGHT arch — large. All % of container so shape scales perfectly.
   77% wide, 87% tall (100%-13% bottom) → ratio 0.886 = same at any size */
.arch-frame--primary {
    right  : 0;
    top    : 0;
    bottom : 13%;  /* 100/760 — keeps 13% gap at bottom at all sizes */
    width  : 77%;  /* 460/595 */
    z-index: 1;
}

/* LEFT arch — smaller, overlaps primary from the front.
   59% wide, 63% tall → ratio 0.937 — same at any size */
.arch-frame--secondary {
    right  : 35%;  /* 210/595 */
    top    : 37%;  /* 280/760 */
    bottom : 0;
    width  : 59%;  /* 349/595 */
    z-index: 2;
}


/* ── 10. Food Section ─────────────────────────────────────── */
.food-section {
    padding : var(--section-pad-v) 0;
}
.food-section .container {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 70px;
    align-items           : center;
}

.food-images {
    position : relative;
    height   : 480px;
}
.food-img {
    position   : absolute;
    overflow   : hidden;
    border     : 1px solid var(--color-gold);
}
.food-img img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform 0.55s ease;
    display    : block;
}
.food-img:hover img { transform: scale(1.06); }

/* Primary anchored top-left, secondary anchored bottom-right.
   Both 60% wide → they overlap diagonally in the middle of the container. */
.food-img--primary {
    width        : 62%;
    height       : 305px;
    top          : 0;
    left         : 0;
    border-radius: 0;
}
.food-img--secondary {
    width        : 62%;
    height       : 285px;
    bottom       : 0;
    right        : 0;
    border-radius: 0;
    box-shadow   : -6px -6px 0 var(--color-gold);
}

.food-content { }


/* ── 11. Drinks Section ───────────────────────────────────── */
.drinks-section {
    padding : var(--section-pad-v) 0;
}
.drinks-section .container {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 70px;
    align-items           : center;
}

.drinks-content { order: 1; }

.drinks-image {
    order    : 2;
    overflow : hidden;
    position : relative;
    border   : 1px solid var(--color-gold);
    height   : 440px;
}
.drinks-image img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform 0.55s ease;
    display    : block;
}
.drinks-image:hover img { transform: scale(1.04); }

/* Gold corner accent */
.drinks-image::before {
    content  : '';
    position : absolute;
    top      : -8px;
    right    : -8px;
    width    : 60px;
    height   : 60px;
    border-top  : 1px solid var(--color-gold);
    border-right: 1px solid var(--color-gold);
    z-index  : 1;
    pointer-events: none;
}
.drinks-image::after {
    content  : '';
    position : absolute;
    bottom   : -8px;
    left     : -8px;
    width    : 60px;
    height   : 60px;
    border-bottom: 1px solid var(--color-gold);
    border-left  : 1px solid var(--color-gold);
    z-index  : 1;
    pointer-events: none;
}


/* ── 12. Gallery Section ──────────────────────────────────── */
.gallery-section {
    padding : var(--section-pad-v) 0;
    text-align: center;
}
.gallery-section .section-heading {
    font-size  : clamp(24px, 2.8vw, 40px);
    margin-bottom: 8px;
}

.gallery-grid {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    gap                   : 16px;
    margin                : 40px 0;
}

.gallery-item {
    overflow   : hidden;
    position   : relative;
    height     : 260px;
    cursor     : pointer;
}
.gallery-item img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform 0.55s ease;
    display    : block;
}
.gallery-item:hover img { transform: scale(1.08); }

/* Gold overlay on gallery hover */
.gallery-item::after {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : rgba(241, 191, 31, 0.15);
    opacity    : 0;
    transition : opacity 0.35s ease;
}
.gallery-item:hover::after { opacity: 1; }

.gallery-section .btn { margin-top: 10px; }


/* ── 13. Contact Section ──────────────────────────────────── */
.contact-section {
    background : #f5f0eb;
    padding    : var(--section-pad-v) 0;
}
.contact-section .container {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 80px;
    align-items           : start;
}

/* Override text colours for light background */
.contact-section .section-heading { color: #1a0505; }

/* LEFT: Portrait map */
.contact-map-wrap img {
    width   : 100%;
    height  : auto;
    display : block;
    border  : 1px solid var(--color-gold);
}

/* RIGHT: location + form stacked */
.contact-info-wrap {
    display        : flex;
    flex-direction : column;
    gap            : 48px;
}

.location-address {
    font-family   : var(--font-body);
    font-size     : 15px;
    line-height   : 1.8;
    color         : #3a1a1a;
    margin-top    : 8px;
}

/* Contact section heading size */
.contact-section .section-heading {
    font-size : clamp(20px, 2.2vw, 30px);
    color     : #1a0505;
}

/* CF7 form field styling */
.contact-section .wpcf7-form p {
    margin-bottom: 16px;
}

/* 2-column row (name/email, date/time) */
.contact-section .cf7-two-col {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 0 16px;
}

/* Labels */
.contact-section .wpcf7-form label,
.contact-section .cf7-seating__label {
    display       : block;
    font-family   : var(--font-body);
    font-size     : 11px;
    font-weight   : 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color         : #6b3030;
    margin-bottom : 6px;
}

/* All text-like inputs + select */
.contact-section .wpcf7-form input[type="text"],
.contact-section .wpcf7-form input[type="email"],
.contact-section .wpcf7-form input[type="tel"],
.contact-section .wpcf7-form input[type="number"],
.contact-section .wpcf7-form input[type="date"],
.contact-section .wpcf7-form select,
.contact-section .wpcf7-form textarea {
    width         : 100%;
    background    : #fff;
    border        : 1px solid #d4c4bc;
    border-radius : 0;
    padding       : 12px 14px;
    font-family   : var(--font-body);
    font-size     : 14px;
    color         : #1a0505;
    outline       : none;
    transition    : border-color 0.25s ease;
    appearance    : none;
    -webkit-appearance: none;
}
.contact-section .wpcf7-form input:focus,
.contact-section .wpcf7-form select:focus,
.contact-section .wpcf7-form textarea:focus {
    border-color: var(--color-gold);
}
.contact-section .wpcf7-form input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}

/* Select arrow */
.contact-section .wpcf7-form select {
    background-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b3030' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat  : no-repeat;
    background-position: right 14px center;
    padding-right      : 36px;
    cursor             : pointer;
}

/* Textarea */
.contact-section .wpcf7-form textarea {
    min-height: 110px;
    resize    : vertical;
}

/* Placeholder colour */
.contact-section .wpcf7-form input::placeholder,
.contact-section .wpcf7-form textarea::placeholder {
    color: #bbb0aa;
}

/* Seating preference radio buttons */
.contact-section .cf7-seating {
    margin-bottom: 16px;
}
.contact-section .wpcf7-radio {
    display  : flex;
    flex-wrap: wrap;
    gap      : 10px;
    margin-top: 8px;
}
.contact-section .wpcf7-radio .wpcf7-list-item {
    margin: 0;
}
.contact-section .wpcf7-radio .wpcf7-list-item label {
    display        : flex;
    align-items    : center;
    gap            : 8px;
    padding        : 9px 16px;
    border         : 1px solid #d4c4bc;
    background     : #fff;
    cursor         : pointer;
    font-size      : 12px;
    letter-spacing : 0.08em;
    color          : #6b3030;
    transition     : border-color 0.2s, color 0.2s, background 0.2s;
    text-transform : uppercase;
    margin-bottom  : 0;
}
.contact-section .wpcf7-radio .wpcf7-list-item input[type="radio"] {
    accent-color: var(--color-gold);
    width : 15px;
    height: 15px;
    flex-shrink: 0;
}
.contact-section .wpcf7-radio .wpcf7-list-item:has(input:checked) label {
    border-color: #c8901a;
    color       : #c8901a;
    background  : rgba(241,191,31,0.08);
}

/* Submit button */
.contact-section .wpcf7-form input[type="submit"] {
    width          : auto;
    background     : var(--color-btn-bg);
    border         : 1px solid var(--color-btn-border);
    color          : #fff;
    font-family    : var(--font-body);
    font-size      : 11px;
    font-weight    : 700;
    letter-spacing : 0.14em;
    text-transform : uppercase;
    padding        : 14px 48px;
    cursor         : pointer;
    transition     : background 0.3s ease, color 0.3s ease;
    margin-top     : 8px;
}
.contact-section .wpcf7-form input[type="submit"]:hover {
    background  : var(--color-gold);
    border-color: var(--color-gold);
    color       : #1a0505;
}

/* ── Response messages ───────────────────────────────── */
.contact-section .wpcf7-response-output {
    margin     : 24px 0 0 !important;
    padding    : 18px 22px !important;
    font-family: var(--font-body);
    font-size  : 14px !important;
    line-height: 1.6;
    text-align : center;
    color      : #1a0505 !important;   /* dark fallback, overrides CF7 white */
    border     : 1px solid #d4c4bc !important;
    background : #fff !important;
}
/* Success */
.contact-section .wpcf7.sent .wpcf7-response-output {
    background : #fdf8ec !important;
    border     : 1px solid #c8901a !important;
    color      : #7a5500 !important;
}
/* Error / failed */
.contact-section .wpcf7.failed .wpcf7-response-output,
.contact-section .wpcf7.aborted .wpcf7-response-output {
    background : #fdf0f0 !important;
    border     : 1px solid #c0392b !important;
    color      : #8b1a1a !important;
}
/* Validation error */
.contact-section .wpcf7.invalid .wpcf7-response-output,
.contact-section .wpcf7.unaccepted .wpcf7-response-output {
    background : #fdf8ec !important;
    border     : 1px solid #c8901a !important;
    color      : #7a5500 !important;
}
/* Inline field error tips */
.contact-section .wpcf7-not-valid-tip {
    font-size  : 11px !important;
    color      : #c0392b !important;
    margin-top : 4px;
    display    : block;
}

/* Collapse two-col on small screens */
@media (max-width: 600px) {
    .contact-section .cf7-two-col { grid-template-columns: 1fr; }
    .contact-section .wpcf7-radio { gap: 8px; }
}

/* ── Flatpickr calendar theme ────────────────────────────── */
.flatpickr-calendar {
    background  : #fff;
    border      : 1px solid #d4c4bc;
    border-radius: 0;
    box-shadow  : 0 8px 32px rgba(26,5,5,0.12);
    font-family : var(--font-body);
}
.flatpickr-calendar.arrowTop::before  { border-bottom-color: #d4c4bc; }
.flatpickr-calendar.arrowTop::after   { border-bottom-color: #fff; }
.flatpickr-calendar.arrowBottom::before { border-top-color: #d4c4bc; }
.flatpickr-calendar.arrowBottom::after  { border-top-color: #fff; }

.flatpickr-months { background: #2c1204 !important; border-radius: 0; }
.flatpickr-months .flatpickr-month { background: #2c1204 !important; }
.flatpickr-current-month { color: #fff !important; }
.flatpickr-current-month .cur-month { color: #fff !important; font-weight: 600; }
.flatpickr-current-month input.cur-year { color: #fff !important; }
.flatpickr-current-month .numInputWrapper span.arrowUp::after  { border-bottom-color: #f1bf1f !important; }
.flatpickr-current-month .numInputWrapper span.arrowDown::after { border-top-color: #f1bf1f !important; }

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month { color: #fff !important; fill: #fff !important; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: #fff !important; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: #f1bf1f !important; }

.flatpickr-weekdays          { background: #f5f0eb; }
span.flatpickr-weekday       { background: #f5f0eb; color: #6b3030; font-weight: 700; font-size: 11px; }

.flatpickr-day               { color: #1a0505; border-radius: 0; }
.flatpickr-day:hover         { background: #f5f0eb; border-color: #d4c4bc; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background  : #2c1204;
    border-color: #2c1204;
    color       : #f1bf1f;
    font-weight : 700;
}
.flatpickr-day.today         { border-color: #c8901a; }
.flatpickr-day.today:hover   { background: #fdf8ec; }
.flatpickr-day.disabled,
.flatpickr-day.flatpickr-disabled { color: #ccc; }

/* Style the Flatpickr altInput to match other fields */
.contact-section input.flatpickr-input[readonly] {
    width         : 100%;
    background    : #fff;
    border        : 1px solid #d4c4bc;
    border-radius : 0;
    padding       : 12px 14px;
    font-family   : var(--font-body);
    font-size     : 14px;
    color         : #1a0505;
    cursor        : pointer;
    appearance    : none;
}
.contact-section input.flatpickr-input[readonly]:focus {
    border-color: var(--color-gold);
    outline     : none;
}


/* ── 14. Footer ───────────────────────────────────────────── */
.site-footer {
    background : var(--color-footer);
    padding    : 50px 0 40px;
    border-top : 1px solid var(--color-gold);
}
.footer-inner {
    max-width       : var(--content-width);
    margin          : 0 auto;
    padding         : 0 40px;
    display         : grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items     : center;
    gap             : 40px;
}

.footer-logo img {
    height    : 90px;
    width     : auto;
    opacity   : 0.95;
}

.footer-hours {
    text-align  : center;
    font-family : var(--font-body);
}
.footer-hours-title {
    font-family    : var(--font-heading);
    font-size      : 13px;
    letter-spacing : 0.16em;
    text-transform : uppercase;
    color          : var(--color-gold);
    margin-bottom  : 6px;
}
.footer-hours p {
    font-size : 14px;
    color     : rgba(255,255,255,0.80);
}

.footer-contact {
    text-align  : right;
    font-family : var(--font-body);
    font-size   : 13.5px;
    line-height : 1.9;
    color       : rgba(255,255,255,0.80);
}
.footer-contact a:hover { color: var(--color-gold); }
.footer-contact-label {
    font-family    : var(--font-heading);
    font-size      : 10px;
    letter-spacing : 0.16em;
    text-transform : uppercase;
    color          : var(--color-gold);
    display        : block;
}
.footer-bottom {
    text-align  : center;
    margin-top  : 30px;
    padding-top : 20px;
    border-top  : 1px solid rgba(241,191,31,0.2);
    font-size   : 11px;
    color       : rgba(255,255,255,0.40);
    letter-spacing: 0.08em;
    max-width   : var(--content-width);
    margin-left : auto;
    margin-right: auto;
    padding-left: 40px;
    padding-right: 40px;
}


/* ── 15. Map Modal ────────────────────────────────────────── */
.modal-overlay {
    position         : fixed;
    inset            : 0;
    background       : rgba(0,0,0,0.80);
    z-index          : 2000;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    opacity          : 0;
    visibility       : hidden;
    transition       : opacity 0.35s ease, visibility 0.35s ease;
}
.modal-overlay.is-open {
    opacity    : 1;
    visibility : visible;
}
.modal-box {
    position       : relative;
    width          : 90vw;
    max-width      : 860px;
    height         : 540px;
    border         : 1px solid var(--color-gold);
    background     : #1a0505;
    transform      : scale(0.92);
    transition     : transform 0.35s ease;
    display        : flex;
    flex-direction : column;
}
.modal-overlay.is-open .modal-box { transform: scale(1); }

.modal-box iframe {
    flex   : 1;
    width  : 100%;
    border : none;
    display: block;
    min-height: 0;
}

/* "Open in Google Maps" link bar at the bottom of the modal */
.modal-maps-link {
    display        : block;
    padding        : 11px 20px;
    background     : #1a0505;
    color          : var(--color-gold);
    font-family    : var(--font-body);
    font-size      : 12px;
    font-weight    : 700;
    letter-spacing : 0.12em;
    text-transform : uppercase;
    text-align     : center;
    text-decoration: none;
    border-top     : 1px solid rgba(241,191,31,0.35);
    flex-shrink    : 0;
    transition     : background 0.25s ease, color 0.25s ease;
}
.modal-maps-link:hover {
    background: var(--color-gold);
    color      : #1a0505;
}
.modal-close {
    position   : absolute;
    top        : 10px;
    right      : 10px;
    width      : 36px;
    height     : 36px;
    background : var(--color-gold);
    border     : none;
    color      : #1a0505;
    font-size  : 20px;
    line-height: 36px;
    text-align : center;
    cursor     : pointer;
    font-weight: 700;
    z-index    : 1;
    transition : background 0.25s ease;
    display    : flex;
    align-items: center;
    justify-content: center;
}
.modal-close:hover { background: #fff; }


/* ── 15b. Gallery Lightbox ───────────────────────────────── */
.lightbox {
    position  : fixed;
    inset     : 0;
    z-index   : 3000;
    background: rgba(0,0,0,0.96);
    display   : flex;
    align-items    : center;
    justify-content: center;
    opacity   : 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__img-wrap {
    display   : flex;
    align-items    : center;
    justify-content: center;
    width : 100%;
    height: 100%;
    padding: 70px 100px;
}
.lightbox__img {
    max-width : 100%;
    max-height: 100%;
    object-fit: contain;
    display   : block;
    box-shadow: 0 8px 60px rgba(0,0,0,0.6);
}
.lightbox__close {
    position: absolute;
    top     : 20px;
    right   : 20px;
    width   : 44px;
    height  : 44px;
    background : var(--color-gold);
    border  : none;
    color   : #1a0505;
    font-size  : 24px;
    font-weight: 700;
    cursor  : pointer;
    display : flex;
    align-items    : center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index : 1;
}
.lightbox__close:hover { background: #fff; }

.lightbox__prev,
.lightbox__next {
    position  : absolute;
    top       : 50%;
    transform : translateY(-50%);
    width     : 52px;
    height    : 70px;
    background: rgba(255,255,255,0.08);
    border    : 1px solid rgba(255,255,255,0.2);
    color     : #fff;
    font-size : 36px;
    cursor    : pointer;
    display   : flex;
    align-items    : center;
    justify-content: center;
    transition: background 0.2s ease;
    z-index   : 1;
}
.lightbox__prev:hover,
.lightbox__next:hover { background: rgba(255,255,255,0.18); }
.lightbox__prev { left : 16px; }
.lightbox__next { right: 16px; }

/* Make gallery items show pointer */
.gallery-item { cursor: pointer; }

@media (max-width: 600px) {
    .lightbox__img-wrap { padding: 60px 16px; }
    .lightbox__prev { left:  4px; }
    .lightbox__next { right: 4px; }
}


/* ── 16. Inner Pages ──────────────────────────────────────── */
.inner-hero {
    height             : 72vh;
    min-height         : 400px;
    background-size    : cover;
    background-position: center;
    background-repeat  : no-repeat;
    position           : relative;
}
.inner-hero::after {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : rgba(0,0,0,0.45);
}
/* Title sits in the lower third of the hero */
.inner-hero__title {
    position      : absolute;
    top           : 68%;
    left          : 50%;
    transform     : translate(-50%, -50%);
    z-index       : 1;
    font-family   : var(--font-heading);
    font-size     : clamp(32px, 5vw, 62px);
    color         : var(--color-text);
    letter-spacing: 0.06em;
    text-align    : center;
    text-shadow   : 0 2px 20px rgba(0,0,0,0.6);
    width         : 90%;
    max-width     : 900px;
    margin        : 0;
    line-height   : 1.1;
}

.inner-content {
    background : linear-gradient(180deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
    padding    : var(--section-pad-v) 0;
}


/* ── 17. Sports Page ──────────────────────────────────────── */
.sports-intro {
    max-width    : 760px;
    margin-bottom: 60px;
}

/* ── Weekly schedule ──────────────────────────────────────── */
/*
   HOW TO UPDATE THE SCHEDULE IN WORDPRESS:
   1. Edit the Sports page in the Classic Editor
   2. Paste the full schedule text
   3. Select each sport category name (Boxing, Football etc)
      and click the Bold (B) button
   4. Save — the styling is automatic
*/

.sports-schedule-wrap {
    margin    : 50px 0;
    max-width : 860px;
}

/* Bold text = sport category heading */
.sports-schedule-wrap p strong,
.sports-schedule-wrap strong {
    display       : block;
    font-family   : var(--font-heading);
    font-size     : clamp(18px, 2vw, 22px);
    color         : var(--color-gold);
    margin-top    : 36px;
    margin-bottom : 10px;
    padding-bottom: 8px;
    border-bottom : 1px solid rgba(241,191,31,0.3);
    font-weight   : normal; /* Constantine is already display weight */
}

/* Paragraph = event/detail row */
.sports-schedule-wrap p {
    font-family  : var(--font-body);
    font-size    : 14px;
    color        : rgba(255,255,255,0.82);
    line-height  : 1.5;
    margin       : 0;
    padding      : 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* First bold element needs no top margin */
.sports-schedule-wrap p:first-child strong { margin-top: 0; }

.sports-photos-section { margin-top: 50px; }

.sports-photos {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 20px;
    margin-top            : 36px;
}
.sports-photo {
    overflow : hidden;
    height   : 240px;
}
.sports-photo img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform 0.55s ease;
}
.sports-photo:hover img { transform: scale(1.06); }


/* ── 18. Menu Page ────────────────────────────────────────── */
.menu-links {
    display : flex;
    gap     : 24px;
    margin-top: 36px;
    flex-wrap: wrap;
}
.menu-link-card {
    flex           : 1;
    min-width      : 220px;
    border         : 1px solid var(--color-gold);
    padding        : 40px 30px;
    text-align     : center;
    transition     : background 0.3s ease;
    cursor         : pointer;
}
.menu-link-card:hover { background: rgba(241,191,31,0.08); }
.menu-link-card__icon {
    font-size     : 36px;
    margin-bottom : 16px;
}
.menu-link-card__label {
    font-family    : var(--font-heading);
    font-size      : 20px;
    letter-spacing : 0.06em;
    margin-bottom  : 8px;
}
.menu-link-card__sub {
    font-size : 13px;
    color     : var(--color-text-muted);
}


/* ── 19. Responsive ───────────────────────────────────────── */

/* All containers locked to the same 1350px max-width and padding */
/* No override at 1400px — was causing header/content width mismatch */

/* Tablet landscape — compact nav, all links still visible */
@media (max-width: 1100px) {
    .container { padding: 0 36px; }
    .header-inner, .footer-inner { padding: 0 36px; }

    /* Compact nav for tablet */
    .nav-logo img    { width: 200px; }
    .nav-left,
    .nav-right       { gap: 18px; padding-top: 18px; }
    .nav-link        { font-size: 15px; letter-spacing: 0.08em; }
    .nav-social img  { height: 24px; }

    /* About: aspect-ratio auto-sizes the container — no overrides needed here. */

    .food-images           { height: 390px; }
    .food-img--primary     { height: 245px; }
    .food-img--secondary   { height: 228px; }

    .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .gallery-item { height: 200px; }
}

/* Tablet portrait — hamburger menu */
@media (max-width: 880px) {
    :root {
        --section-pad-v: 60px;
    }

    /* Show hamburger, hide desktop nav */
    .nav-left .nav-link { display: none; }
    .nav-hamburger      { display: flex; }
    .nav-right          { display: none; }

    /* Compact header row: hamburger | logo | (empty) */
    .header-inner {
        grid-template-columns : 1fr auto 1fr;
        align-items           : center;
        padding               : 18px 24px;
    }
    .nav-left    { padding-top: 0; gap: 0; }
    .nav-logo    { padding: 0 12px; }
    .nav-logo img { width: 140px; }
    .site-header  { padding-bottom: 50px; }

    /* All content sections go single column */
    .about-section .container,
    .food-section .container,
    .drinks-section .container,
    .contact-section .container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* About: single-column. Fix height and centre the arch group. */
    .about-images          { aspect-ratio: auto; height: 600px; margin-top: 0;
                             width: 460px; max-width: 100%; margin-left: auto; margin-right: auto; }
    .arch-frame--primary   { width: 380px; }
    .arch-frame--secondary { width: 280px; right: 140px; }

    /* Body text fills full column width when stacked */
    .section-body { max-width: none; }

    /* Ensure text/title always stacks ABOVE images in each row */
    .food-content        { order: -1; }  /* food: images are first in DOM → push text up */
    .contact-info-wrap   { order: -1; }  /* contact: map is first in DOM → push form up */

    /* Food images */

    .food-images           { height: 310px; }
    .food-img--primary     { height: 195px; }
    .food-img--secondary   { height: 180px; }

    /* Drinks */
    .drinks-image { height: 280px; }

    /* Gallery: 2 cols */
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .gallery-item { height: 200px; }

    /* Sports */
    .sports-photos { grid-template-columns: repeat(2, 1fr); }
    .events-grid   { grid-template-columns: 1fr; }

    /* Footer */
    .footer-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 28px;
    }
    .footer-contact { text-align: center; }
    .footer-logo { display: flex; justify-content: center; }
}

/* Mobile */
@media (max-width: 600px) {
    :root { --section-pad-v: 50px; }
    .container    { padding: 0 20px; }
    .footer-inner { padding: 0 20px; }
    .header-inner { padding: 18px 20px; }  /* keep vertical breathing room */

    .hero { height: 70vh; }
    .hero__overlay { bottom: 24px; }

    /* 2-column grid: address spans both cols, buttons one each */
    .hero__overlay-inner {
        grid-template-columns : 1fr 1fr;
        grid-template-rows    : auto auto;
        padding               : 0 20px;
        column-gap            : 10px;
        row-gap               : 14px;
    }
    .hero__location   { grid-column: 1 / -1; grid-row: 1; } /* full width */
    .hero__view-map   { grid-column: 1;      grid-row: 2; text-align: center; }
    .hero__reservation{ grid-column: 2;      grid-row: 2; text-align: center; }

    /* Mobile: fixed height, smaller arches, keep centred */
    .about-images          { aspect-ratio: auto; height: 440px; width: 370px; }
    .arch-frame--primary   { width: 260px; bottom: 70px; }
    .arch-frame--secondary { width: 200px; right: 170px; top: 150px; }

    .food-section .container { gap: 24px; }
    .food-images           { height: 240px; }
    .food-img--primary     { height: 152px; }
    .food-img--secondary   { height: 140px; }

    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .gallery-item { height: 160px; }

    .sports-photos { grid-template-columns: 1fr; }
    .menu-links    { flex-direction: column; }

    .modal-box { width: 95vw; height: 70vh; max-height: 420px; }
}