/* ==========================================================================
   K2H THEME · INNER PAGES  — royal
   Reservations · Menus · Events · FAQs · Contact
   Restyles the existing page markup only: the OpenTable widget, lightbox
   galleries, map and PDF links work exactly as before.
   NOTE: the original k2h-style.css uses CSS nesting for some of these blocks,
   which older browsers ignore — so everything needed is declared here flat.
   ========================================================================== */

/* ---- Page banner (includes/partials/page-banner.php) -------------------- */
.k2h-page-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: clamp(70px, 9vw, 120px) 0 clamp(56px, 7vw, 90px);
    border-bottom: 1px solid var(--k2h-gold-line);
    color: var(--k2h-text);
}
.k2h-page-banner--photo { background-color: var(--k2h-black); background-position: center; background-size: cover; background-repeat: no-repeat; }
.k2h-page-banner--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(11, 11, 13, .95) 0%, rgba(11, 11, 13, .75) 50%, rgba(11, 11, 13, .35) 100%);
}
.k2h-page-banner__paisley { left: 14px; top: 14px; width: 120px; opacity: .5; }
.k2h-page-banner__mandala { right: -120px; top: 50%; width: 360px; margin-top: -180px; opacity: .22; }
.k2h-page-banner__title {
    margin: 0;
    font-family: var(--k2h-font-display);
    font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.8rem);
    line-height: 1.04;
    background: var(--k2h-gold-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.k2h-page-banner .k2h-divider { margin-top: 16px; }

/* ---- Existing photo heroes (events.php, faqs.php) ----------------------- */
#section-hero { position: relative; width: 100%; background: var(--k2h-black); border-bottom: 1px solid var(--k2h-gold-line); }
#section-hero .bg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: clamp(300px, 34vw, 460px);
    outline: 0;
    background-color: var(--k2h-black);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
}
#section-hero .bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(11, 11, 13, .95) 0%, rgba(11, 11, 13, .7) 50%, rgba(11, 11, 13, .25) 100%);
}
#section-hero .bg .inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 2em var(--k2h-gutter);
    text-align: left;
}
#section-hero .bg h2 {
    max-width: min(760px, 90vw);
    margin: 0;
    font-family: var(--k2h-font-display);
    font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem);
    line-height: 1.04;
    text-align: left;
    text-transform: none;
    text-shadow: none;
    background: var(--k2h-gold-text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
#section-hero .bg h2::before {
    content: "K2H Sandbach";
    display: block;
    margin-bottom: 14px;
    font-family: var(--k2h-font-body);
    font-size: .78rem;
    letter-spacing: var(--k2h-tracking);
    text-transform: uppercase;
    -webkit-text-fill-color: var(--k2h-gold);
    color: var(--k2h-gold);
}

/* ---- Alternating feature rows (events.php) ------------------------------ */
#section-cream,
#section-blue { position: relative; padding: clamp(64px, 8vw, 110px) 0; }
#section-cream { background-color: var(--k2h-black); background-image: var(--k2h-tile-black); color: var(--k2h-text); }
#section-blue  { background-color: var(--k2h-emerald); background-image: var(--k2h-tile-jaali); color: var(--k2h-text); border-block: 1px solid var(--k2h-gold-line); }
#section-cream div[class^='container'],
#section-blue  div[class^='container'] { padding: 0 var(--k2h-gutter); background: none; }
#section-cream .row,
#section-blue  .row { align-items: center; row-gap: 36px; }
#section-cream .glightbox,
#section-blue  .glightbox { position: relative; display: block; padding: 14px; }
#section-cream .glightbox::before,
#section-blue  .glightbox::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--k2h-gold-line-strong); pointer-events: none; }
#section-cream img.shadow,
#section-blue  img.shadow {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    box-shadow: var(--k2h-shadow) !important;
    transition: transform .9s var(--k2h-ease);
}
#section-cream .glightbox:hover img,
#section-blue  .glightbox:hover img { transform: scale(1.02); }
#section-cream h2,
#section-blue  h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem); text-transform: none !important; color: var(--k2h-gold-light); }
#section-cream .fs-5,
#section-blue  .fs-5 { font-weight: 300; line-height: 1.85; color: var(--k2h-text-soft); }
@media (min-width: 992px) {
    #section-cream .col-lg-7,
    #section-blue  .col-lg-7 { padding-left: clamp(24px, 4vw, 64px); }
}

/* ---- Generic content pages (Menus, Contact, Reservations) ---------------- */
#main.py-3 {
    padding-block: clamp(56px, 7vw, 96px) !important;
    background-color: var(--k2h-black);
    background-image: var(--k2h-tile-black);
    color: var(--k2h-text);
}
#main h1,
#main #about h2,
#main #reservations h2 { color: var(--k2h-gold-light); }
#main h1 small {
    display: block;
    margin-top: 10px;
    font-family: var(--k2h-font-body);
    font-size: .82rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--k2h-gold);
}
#main #about p,
#main #reservations p,
#main #reservations li { font-weight: 300; line-height: 1.85; color: var(--k2h-text-soft); }
#main #reservations .lead { font-weight: 400; color: var(--k2h-text); }

/* Reservations: ivory card so the OpenTable widget stays readable (widget untouched) */
#reservations .row { row-gap: 40px; }
#reservations .col-lg-6.text-center {
    padding: 24px 12px;
    border: 1px solid var(--k2h-gold);
    border-radius: 6px;
    background: var(--k2h-ivory);
    box-shadow: 0 0 0 6px var(--k2h-black), 0 0 0 7px rgba(227, 184, 102, .4), var(--k2h-shadow);
}
#reservations ol { padding-left: 0; list-style: none; counter-reset: k2h-step; }
#reservations ol li { position: relative; padding: 8px 0 8px 52px; counter-increment: k2h-step; }
#reservations ol li::before {
    content: counter(k2h-step);
    position: absolute;
    left: 0;
    top: 5px;
    width: 36px;
    height: 36px;
    border: 1px solid var(--k2h-gold);
    border-radius: 50%;
    font-family: var(--k2h-font-display);
    font-size: 1.05rem;
    line-height: 34px;
    text-align: center;
    color: var(--k2h-gold);
}

/* Menus list */
.list-menus {
    position: relative;
    margin: 28px auto 0;
    border: 1px solid var(--k2h-gold);
    outline: 1px solid rgba(227, 184, 102, .45);
    outline-offset: 6px;
    background: rgba(11, 11, 13, .7);
    font-family: var(--k2h-font-display);
    font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem);
    text-align: center;
}
.list-menus ul { margin: 0; padding: 14px 0; list-style: none; }
.list-menus li { padding: 0; }
.list-menus a,
.list-menus .christmas-menu-title {
    display: block;
    padding: 11px 20px;
    color: var(--k2h-gold-light);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s, color .3s;
}
.list-menus a:hover,
.list-menus .christmas-menu-title:hover { background: var(--k2h-gold-gradient); color: var(--k2h-ink); box-shadow: none; }
.list-menus .christmas-menu-title::-webkit-details-marker { display: none; }
.list-menus .christmas-submenu { padding: 0 0 8px; font-size: .8em; }
.list-menus .christmas-submenu a { color: var(--k2h-gold); }
.k2h-festive .list-menus > ul > li:first-child > a,
.k2h-festive .list-menus .christmas-menu-title { color: var(--k2h-gold); }
.k2h-festive .list-menus > ul > li:first-child > a::before,
.k2h-festive .list-menus .christmas-menu-title::before { content: "\2726"; margin-right: 10px; font-size: .7em; vertical-align: middle; }
.list-menus .christmas-menu-title::after { content: " \25BE"; font-size: .7em; }
.list-menus details[open] .christmas-menu-title::after { content: " \25B4"; }
#about .glightbox { position: relative; display: block; padding: 12px; }
#about .glightbox::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--k2h-gold-line-strong); pointer-events: none; }
#about .glightbox img { position: relative; box-shadow: var(--k2h-shadow); }

/* Contact */
#about .contact-info span { color: var(--k2h-text); }
#about .contact-info span::before { color: var(--k2h-gold); margin-right: 6px; }
#about .border { padding: 10px; border: 1px solid var(--k2h-gold) !important; background: var(--k2h-black); box-shadow: var(--k2h-shadow); }
#about hr { border-color: var(--k2h-gold); opacity: .5; }

/* ---- FAQs ----------------------------------------------------------------- */
#info-faqs { background-color: var(--k2h-black); background-image: var(--k2h-tile-black); color: var(--k2h-text); }
#info-faqs .mb-5 > div {
    height: 100%;
    padding: 28px 28px 22px;
    border: 1px solid var(--k2h-gold-line);
    border-top: 3px solid var(--k2h-gold);
    background: rgba(13, 41, 36, .55);
    transition: transform .4s var(--k2h-ease), border-color .3s;
}
#info-faqs .mb-5 > div:hover { transform: translateY(-4px); border-color: var(--k2h-gold-line-strong); }
#info-faqs h4 { margin-bottom: 14px; font-size: 1.45rem; line-height: 1.25; color: var(--k2h-gold-light); text-wrap: balance; }
#info-faqs p { font-weight: 300; line-height: 1.85; color: var(--k2h-text-soft); }
#info-faqs dl { margin: 0 0 0 1em; padding-left: 1em; border-left: 3px solid var(--k2h-gold); }
#info-faqs dt { font-weight: 500; color: var(--k2h-text); text-wrap: balance; }
#info-faqs a { color: var(--k2h-gold); text-decoration: underline; }
#info-faqs a:hover { color: #FFF3D6; text-decoration: none; }
#info-faqs a[rel*="external"]::after { filter: invert(1); }