/*
 * site.css: the only stylesheet for viceroyrestaurant.co.uk.
 *
 * Sections, in order:
 *   1. Tokens        colours, fonts, spacing (custom properties)
 *   2. Fonts         @font-face for self-hosted fonts
 *   3. Base          reset and element defaults (from the original "viceroytheme")
 *   4. Layout        content sections
 *   5. Components    one block per component: "=== Component: <name> ==="
 *   6. Pages         page-specific rules: "=== Page: <path> ==="
 *   7. Utilities     a handful of helpers
 *
 * Breakpoints (from the original theme and Elementor; media queries can't use custom properties):
 *   theme:     ≤ 768px (mobile menu, smaller type), ≤ 1080px (image tiles 2x2), ≤ 1120px (story band, smaller titles)
 *   Elementor: ≤ 767px mobile, ≤ 1024px tablet (Elementor content on the Christmas/Lounge/News pages)
 *
 * Editing: change tokens to restyle the site; add new components as new blocks;
 * add modifier classes instead of changing a component for one page.
 */

/* ============ 1. Tokens ============ */
:root {
  /* Colours (original theme style.css + computed styles) */
  --color-bg: #000000;            /* body, footer */
  --color-section: #262526;       /* content sections, video intro */
  --color-text: #ffffff;
  --color-accent: #add43b;        /* links, script headings, active tab */
  --color-link-hover: #cc4714;
  --color-button: #0b9444;        /* theme .button */
  --color-button-hover: #bf1d2d;
  --color-rule: #dddddd;          /* hr */
  --color-header: rgba(0, 0, 0, 0.5);
  --color-mobile-row-open: #6d6d6d;
  --color-elementor-text: #7a7a7a; /* Elementor kit "text" colour */

  /* Typography */
  --font-body: "Open Sans", sans-serif;
  --font-script: "Herr Von Muellerhoff", "Open Sans", serif;
  --font-display: "Source Sans Pro", "Open Sans", serif;
  --font-elementor: "Roboto", sans-serif;
  --font-tabs: Tahoma, Verdana, sans-serif;
  --text-base: 16px;
  --leading: 1.8;

  /* Layout */
  --header-height: 56px;
  --header-top: 60px;             /* desktop start position; site.js moves it to 0 over the first 240px of scroll */
  --page-text: 1000px;
  --nav-max: 1040px;

  /* Motion (original timings) */
  --duration: 0.2s;
  --ease: linear;
}

/* ============ 2. Fonts ============ */
/* Google Fonts, self-hosted (latin subset). Open Sans and Roboto are variable fonts (one file, several weights). */
@font-face { font-family: "Open Sans"; src: url("/assets/fonts/open-sans-300-700-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Herr Von Muellerhoff"; src: url("/assets/fonts/herr-von-muellerhoff-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans Pro"; src: url("/assets/fonts/source-sans-pro-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans Pro"; src: url("/assets/fonts/source-sans-pro-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans Pro"; src: url("/assets/fonts/source-sans-pro-900-latin.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/fonts/roboto-400-700-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

/* ============ 3. Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading); color: var(--color-text); -webkit-font-smoothing: antialiased; }
img, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--color-accent); text-decoration: none; }
a:hover, a:focus { color: var(--color-link-hover); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: #fff; font-weight: 400; text-transform: uppercase; line-height: 1.25; }
h1 { font-size: 46px; margin-bottom: 22px; }
h2 { font-size: 35px; margin-bottom: 19px; }
h3 { font-size: 28px; margin-bottom: 19px; }
h4 { font-size: 21px; margin-bottom: 13px; }
h5 { font-size: 18px; margin-bottom: 13px; }
h6 { font-size: 15px; }
p { font-size: 16px; line-height: 1.8; margin: 0 0 18px; }
p:last-child, p:last-of-type { margin-bottom: 0; }
ul, ol { margin: 0 0 18px; padding: 0; }
ul { list-style: none; }
li { margin-bottom: 12px; }
strong, b { font-weight: 700; }
hr { border: solid var(--color-rule); border-width: 1px 0 0; clear: both; margin: 12px 0 18px; height: 0; }

@media (max-width: 768px) {
  h1 { font-size: 32px; line-height: 1.3; }
  h2 { font-size: 28px; line-height: 1.3; }
  h3 { font-size: 21px; line-height: 1.3; }
  h4 { font-size: 18px; line-height: 1.2; }
  h5 { font-size: 16px; line-height: 1.2; }
  h6 { font-size: 15px; line-height: 1.2; }
  body, p { font-size: 14px; line-height: 1.5; }
}

/* ============ 4. Layout ============ */
/* Grey content band with centred 1000px text column (theme .content-section / .page-text) */
.content-section { padding: 0 20px; background: var(--color-section); }
.page-text { display: block; width: 100%; max-width: var(--page-text); margin: auto; padding: 60px 0; }
.page-text--full { max-width: none; }
@media (max-width: 768px) {
  .page-text { padding: 30px 0; text-align: center; }
}

/* ============ 5. Components ============ */

/* === Component: skip-link === */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; padding: 8px 16px; background: #fff; color: #000; }
.skip-link:focus { left: 16px; }

/* === Component: titles (script line + bold capitals, theme h2.secondary / h1.primary) ===
 * <h2 class="title-script">Viceroy</h2><h1 class="title-display">About</h1>
 */
.title-script { position: relative; margin: 0 0 -38px; color: var(--color-accent); font-family: var(--font-script); font-size: 100px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.25; }
.title-display { position: relative; margin: 0; color: #fff; font-family: var(--font-display); font-size: 46px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.25; }
@media (max-width: 1120px) {
  .title-script { font-size: 80px; margin-bottom: -23px; }
  .title-display { font-size: 35px; }
}
@media (max-width: 768px) {
  .title-script { font-size: 60px; margin-bottom: -23px; line-height: 1.3; }
  .title-display { font-size: 24px; line-height: 1.3; }
}

/* === Component: site-header (fixed, semi-transparent; desktop starts 60px down) === */
.site-header { position: fixed; top: var(--header-top); left: 0; z-index: 1000; width: 100%; padding: 0 20px; background: var(--color-header); }
.site-nav { position: relative; width: 100%; max-width: var(--nav-max); margin: auto; font-size: 0; text-align: right; }
.site-header__logo { position: absolute; top: -30px; left: 0; width: 200px; }
.site-header__logo img { display: block; width: 100%; height: auto; }
.site-nav__list { display: inline-block; margin: 0; font-size: 0; text-align: right; vertical-align: top; }
.site-nav__list > li, .site-nav__sub li { position: relative; margin: 0; font-size: 14px; line-height: 16px; }
.site-nav__list > li { display: inline-block; }
.site-nav__list a, .site-nav__label { display: block; padding: 20px 10px; color: #fff; }
.site-nav__label { background: none; border: 0; font: inherit; line-height: inherit; cursor: default; }
.site-nav__list a:hover, .site-nav__list a:focus, .site-nav__label:hover { color: var(--color-accent); }
.site-nav__sub { position: absolute; left: 0; display: block; max-height: 0; margin: 0; padding: 0; overflow: hidden; text-align: left; white-space: nowrap; background: var(--color-header); transition: all var(--duration) var(--ease); }
.site-nav__sub li { display: block; }
.site-nav__sub a { padding: 12px 24px; }
.site-nav__list > li:hover > .site-nav__sub,
.site-nav__list > li:focus-within > .site-nav__sub { padding: 12px 0; max-height: 470px; }
.site-header__social { display: inline-block; vertical-align: top; }
.site-header__social a { position: relative; display: block; float: right; width: 36px; height: 56px; }
.site-header__social img { position: absolute; top: 50%; right: 50%; display: block; width: 24px; height: 24px; margin: -12px -12px 0 0; }
.site-header__bar, .site-header__phone, .nav-toggle, .mobile-nav { display: none; }

@media (max-width: 768px) {
  .site-header { top: 0; padding: 0; }
  .site-nav { display: none; }
  .site-header__bar { display: flex; justify-content: flex-end; align-items: center; height: 38px; padding: 5px 10px; }
  .site-header__phone { display: block; position: absolute; top: 9px; right: 55px; z-index: 1010; width: 20px; height: 20px; }
  .site-header__phone img { display: block; width: 20px; height: 20px; }
  .nav-toggle { display: block; margin: 2px; padding: 7px 10px; min-width: 44px; min-height: 28px; background: none; border: 0; cursor: pointer; }
  .nav-toggle__bar { display: block; width: 16px; height: 2px; margin-left: auto; border-radius: 1px; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
  .nav-toggle__bar + .nav-toggle__bar { margin-top: 3px; }
  /* Slide-down menu: grid row 0fr -> 1fr; align-items: stretch keeps the list clipped while it animates */
  .mobile-nav { display: grid; grid-template-rows: 0fr; align-items: stretch; transition: grid-template-rows 0.4s ease; }
  .mobile-nav.is-open { grid-template-rows: 1fr; }
  .mobile-nav.is-instant { transition: none; }
  .mobile-nav__inner { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s 0.4s; }
  .mobile-nav.is-open .mobile-nav__inner { visibility: visible; transition: visibility 0s; }
  .mobile-nav__list { margin: 0; padding: 0 10px 5px; color: #fff; font-size: 0.875em; text-align: center; }
  .mobile-nav li { display: block; margin: 0; border-bottom: 1px solid #fff; }
  .mobile-nav li:last-child { border-bottom: 0; }
  .mobile-nav a, .mobile-nav__row { display: block; width: 100%; padding: 10px; color: #fff; font: inherit; line-height: 1.8; text-align: center; }
  .mobile-nav a:hover { background: var(--color-accent); color: #fff; }
  .mobile-nav__row { margin: 0 5px; width: calc(100% - 10px); background: none; border: 0; cursor: pointer; }
  .mobile-nav__row:hover, .mobile-nav__row[aria-expanded="true"] { background: var(--color-mobile-row-open); }
  .mobile-nav__arrow { margin-left: 0.4em; font-size: 0.8em; }
  .mobile-nav__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
  .mobile-nav__sub.is-open { grid-template-rows: 1fr; }
  .mobile-nav__sub > ul { overflow: hidden; min-height: 0; margin: 0 20px; padding: 0; }
}

/* === Component: page-hero (theme #image-top: photo band with title; background parallax 0.4) === */
.page-hero { padding: 200px 30px 116px; background-color: #000; background-size: cover; background-position: center; text-align: center; }

/* === Component: image-band (theme .content-image-section: photo band with a title between text sections) === */
.image-band { position: relative; display: block; padding: 160px 20px; background-size: cover; background-position: center; text-align: center; }

/* === Component: more-button (outlined "Read More..." button) === */
.more-button { display: inline-block; margin-top: 5px; padding: 12px 20px; border: 1px solid #fff; background: rgba(0, 0, 0, 0.2); color: #fff; font-size: 0.8em; text-transform: uppercase; transition: all var(--duration) var(--ease); }
.more-button:hover, .more-button:focus { background: #fff; color: #000; }

/* === Component: button (theme .button: full-width green, red on hover; not used on the current pages; Elementor buttons are .el-button) === */
.button { display: block; width: 100%; margin-top: 10px; padding: 8px 20px; border: 0; border-radius: 0; background: var(--color-button); color: #fff; font-family: var(--font-body); font-size: 1.1em; font-weight: 300; text-align: center; text-transform: uppercase; cursor: pointer; transition: all var(--duration) var(--ease); }
.button:hover, .button:focus { background: var(--color-button-hover); color: #fff; }

/* === Component: menu-list (food menu pages: section title, rule, dishes) === */
.menu-list { text-align: left; }
.menu-list hr { margin: 36px 0; }
.menu-list__title { margin-top: 42px; text-align: left; }
.menu-list__title:first-child { margin-top: 0; }
.menu-list__items { margin-bottom: 18px; }
.menu-list__item { position: relative; margin-bottom: 30px; }
.menu-list__item:last-child { margin-bottom: 0; }
.menu-list__item-title { position: relative; margin: 0; padding-right: 96px; font-size: 1.1em; text-align: left; }
.menu-list__item-desc { position: relative; margin-bottom: 0; text-align: left; }
.menu-list__item-desc span { font-size: 0.9em; }

/* === Component: tabs (A La Carte menu; Essential Addons tabs rebuilt: tab buttons + panels, site.js "tabs") === */
.tabs__nav { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.tabs__tab { display: flex; flex: 1 1 auto; justify-content: center; align-items: center; margin: 0 0 12px; padding: 5px 10px; border: 0; border-bottom: 1px solid transparent; background: rgba(0, 0, 0, 0.01); color: #fff; font-family: var(--font-tabs); font-size: 16px; font-weight: 700; line-height: 1.8; cursor: pointer; }
.tabs__tab:hover { color: var(--color-accent); }
.tabs__tab[aria-selected="true"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.tabs__panel { padding: 16px; color: #939393; text-align: left; }
.tabs__panel[hidden] { display: none; }
.tabs__panel p { margin: 0 0 18px; }
.tabs__panel p:last-child { margin-bottom: 0; }

/* === Component: lightbox-image (Elementor image with lightbox → GLightbox; each link has its own data-gallery) === */
.lightbox-image { display: block; }
.lightbox-image img { display: block; width: 100%; height: auto; }

/* === Component: contact-email (no form on this site; kept for consistency: mailto button + visible address) === */
.contact-email { display: grid; gap: 12px; justify-items: center; }
.contact-email__address { font-weight: 700; word-break: break-word; }

/* === Component: popup (AYS "Christmas" image popup → native <dialog>) === */
.popup { padding: 10px; border: 0; border-radius: 4px; background: transparent; color: #fff; max-width: min(800px, 100vw - 20px); max-height: calc(100vh - 20px); overflow: visible; }
.popup::backdrop { background: rgba(0, 0, 0, 0.5); }
.popup:focus { outline: none; }
.popup img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 40px); }
.popup__close { position: absolute; top: 10px; right: 4%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
.popup__close svg { width: 30px; height: 30px; filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6)); }
.popup[open] { animation: popup-fade 0.3s ease; }
@keyframes popup-fade { from { opacity: 0; } to { opacity: 1; } }

/* === Component: site-footer === */
.site-footer { padding: 60px 20px; background: var(--color-bg); color: #fff; font-size: 0.8em; text-align: center; }
.site-footer p { margin: 0; font-size: inherit; line-height: 1.8; }
.site-footer__credit a { color: var(--color-accent); }

/* === Component: page-hero--plain (Elementor pages whose custom CSS removed the hero photo and the title overlap) === */
.page-hero--plain { background-image: none !important; }
.page-hero__logo { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
.page-hero--plain .page-hero__title-spaced { margin-bottom: 16px; }

/* === Component: el (Elementor content rebuilt as plain sections / columns / widgets) ===
 * <section class="el-section"><div class="el-row"><div class="el-col">widgets…</div></div></section>
 * Columns get 10px padding, widgets 20px apart, rows max 1140px; columns stack at ≤767px.
 */
.el-section { position: relative; }
.el-row { display: flex; max-width: 1140px; margin: 0 auto; }
.el-row--700 { max-width: 700px; }
.el-col { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; padding: 10px; }
.el-section--middle .el-col { justify-content: center; }
.el-col > * + * { margin-top: 20px; }
.el-text { font-family: var(--font-elementor); font-size: 16px; font-weight: 400; color: var(--color-elementor-text); }
.el-text p { margin: 0 0 18px; }
.el-text p:last-child { margin-bottom: 0; }
.el-image { text-align: center; }
.el-col.el-image { align-items: center; }
.el-col.el-image--cover-400, .el-col.el-image--cover-500 { align-items: stretch; }
.el-image img, .el-image a { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
.el-image a img { display: block; }
.el-image--cover-400 img { display: block; width: 100%; height: 400px; object-fit: cover; }
.el-image--cover-500 img, .el-image--cover-500 a { display: block; width: 100%; height: 500px; object-fit: cover; }
.el-image--h500 img { width: auto; height: 500px; }
.el-spacer { height: 20px; }
.el-spacer--10 { height: 10px; }
.el-spacer--30 { height: 30px; }
.el-spacer--50 { height: 50px; }
.el-spacer--400 { height: 400px; }
.el-card { margin: 30px 0; border-radius: 20px; background: #fff; }
.el-button { display: inline-block; padding: 15px; border-radius: 6px; background: #61ce70; color: #fff; font-family: var(--font-elementor); font-size: 20px; font-weight: 500; line-height: 1; }
.el-button:hover, .el-button:focus { color: #fff; }
.el-center { text-align: center; }
@media (max-width: 768px) {
  .el-text { font-size: 14px; line-height: 1.5; }
}
@media (max-width: 767px) {
  .el-row { flex-direction: column; }
  .el-col { flex: none; }
}

/* === Component: lounge (Elementor layout shared by the Lounge, Tasting/Gold/Platinum and Christmas pages) === */
.lounge-heading { margin: 0 0 50px; font-family: var(--font-display); font-size: 35px; font-weight: 600; line-height: 1; color: #fff; text-align: center; text-transform: capitalize; }
.lounge-champagne { background: url("/wp-content/uploads/Champagne.jpg") 0 -400px / cover no-repeat; }
.lounge-intro { margin: 20px 0; }
.lounge-text { font-family: var(--font-display); color: #fff; }
.lounge-text p { margin: 0; font-size: 18px; line-height: 1.8; }
.lounge-menus .el-col { padding: 10px 0 10px 2px; }
.lounge-menus .el-col:last-child { margin-top: 6px; padding: 4px; }
.lounge-menus--single .el-col:last-child { margin-top: 0; padding: 10px; }
.lounge-menus--single.lounge-menus--platinum .el-col:last-child { margin-top: 6px; padding: 4px; }
.lounge-card .el-image { margin-bottom: 20px; }
.lounge-card .el-text { margin: 0; }
.lounge-card .el-text div { margin: 0; }
@media (max-width: 1024px) {
  .lounge-champagne { background-position: 0 0; }
}
@media (max-width: 768px) {
  .lounge-heading { font-size: 28px; }
  .lounge-text p { font-size: 18px; line-height: 1.5; }
}

/* ============ 6. Pages ============ */

/* === Page: / (home) === */
/* Hero video: full-width 16:9 video; invisible 30x30 close control top right (decision d2) */
.home-video__player { position: relative; }
.home-video__video { position: relative; z-index: 100; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.home-video__close { position: absolute; top: 140px; right: 25px; z-index: 110; display: block; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; }
/* Switch (d2): show a white X on the close control by uncommenting:
.home-video__close { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4l16 16M20 4L4 20' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 100% no-repeat; } */
.home-video__intro { padding: 50px 20px; background: var(--color-section); text-align: center; }
@media (max-width: 768px) {
  .home-video__close { top: auto; right: 20px; bottom: 20px; width: 20px; height: 20px; }
}

/* Welcome slider (behind the video until it is closed) */
.home-slider { position: relative; z-index: 10; overflow: hidden; background: #000; }
.home-slider[hidden] { display: none; }
.home-slide { position: relative; height: 100vh; background-size: cover; background-position: center; }
.home-slide__content { position: absolute; top: 50%; left: 50%; padding: 0 20px; text-align: center; transform: translate(-50%, -50%); }
@media (max-width: 768px) {
  .home-slide { height: 60vw; }
}

/* Our story: photo band, text on the right; fixed background on desktop (mouse) devices */
.story { display: flow-root; min-height: 100vh; padding: 100px; background-size: cover; background-position: center; }
.story__text { width: 100%; max-width: 500px; margin-left: auto; color: #fff; }
.story__text .title-display + p { margin-top: 1.8em; }
.story__text p { margin-bottom: 1.8em; }
.story__text p:last-of-type { margin-bottom: 1.8em; }
@media (hover: hover) and (pointer: fine) {
  .story, .home-videos { background-attachment: fixed; }
}
@media (max-width: 1120px) {
  .story { min-height: 0; padding: 50px 50px 70px; background-position: 25% center; }
  .story__text { max-width: none; text-align: center; }
}
@media (max-width: 768px) {
  .story { padding: 30px 30px 50px; }
  .story__text .title-display + p { margin-top: 1.5em; }
  .story__text p, .story__text p:last-of-type { margin-bottom: 1.5em; }
}

/* Image tiles: 1 tall + 1 wide + 2 small (desktop), 2x2 (≤1080px), stacked (≤768px); caption slides in on hover */
.image-tiles { position: relative; height: 100vh; }
.image-tile { position: absolute; display: block; overflow: hidden; background-size: cover; background-position: center; color: #fff; }
.image-tile::before { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%); transition: all 0.5s ease-out; }
.image-tile:hover::before { opacity: 0.5; }
.image-tile__caption { position: absolute; bottom: 0; left: 40px; right: 40px; color: #fff; font-size: 28px; line-height: 1.8; opacity: 0; transition: bottom 0.6s ease-out 0.6s, opacity 0.6s ease-out; }
.image-tile__caption::before { content: ""; position: absolute; top: -20px; display: block; width: 50px; height: 2px; background: #fff; }
.image-tile:hover .image-tile__caption, .image-tile:focus-visible .image-tile__caption { bottom: 30px; opacity: 1; transition: bottom 0.6s ease-out, opacity 0.6s ease-out 0.2s; }
.image-tile:hover, .image-tile:focus { color: #fff; }
.image-tile--a { top: 0; left: 0; width: 50%; height: 100%; }
.image-tile--b { top: 0; left: 50%; width: 50%; height: 50%; }
.image-tile--c { top: 50%; left: 50%; width: 25%; height: 50%; }
.image-tile--d { top: 50%; left: 75%; width: 25%; height: 50%; }
@media (max-width: 1080px) {
  .image-tile { position: relative; float: left; }
  .image-tile--a, .image-tile--b, .image-tile--c, .image-tile--d { top: auto; left: auto; width: 50%; height: 50%; }
  .image-tile__caption { left: 20px; right: 20px; font-size: 18px; }
  .image-tile__caption::before { top: -15px; width: 40px; height: 1px; }
  .image-tile:hover .image-tile__caption { bottom: 20px; }
}
@media (max-width: 768px) {
  .image-tiles { height: auto; }
  .image-tile--a, .image-tile--b, .image-tile--c, .image-tile--d { float: none; width: 100%; height: 180px; }
}
/* Touch devices (the original's "mobile" user agents): captions always shown */
@media (hover: none) {
  .image-tile__caption, .image-tile:hover .image-tile__caption { bottom: 20px; opacity: 1; }
}

/* Videos: patterned band, 2 thumbnails (1 at ≤768px) with play icon; open in GLightbox */
.home-videos { padding: 50px 5% 0; background-image: url("/assets/images/bg-pattern.png"); background-size: 219px 127px; text-align: center; }
.video-slider { --swiper-navigation-color: #fff; --swiper-navigation-size: 24px; }
.video-slider .swiper-button-prev, .video-slider .swiper-button-next { padding: 0; border: 0; background: none; }
.video-slider .swiper-button-lock { display: none; }
.video-thumb { position: relative; display: block; width: 80%; max-width: 800px; margin: 60px auto; }
.video-thumb img { display: block; width: 100%; height: auto; }
.video-thumb::after { content: ""; position: absolute; inset: 0; background: url("/assets/images/video-play-light.png") center / 26% no-repeat; transition: all 0.1s linear; }
.video-thumb:hover::after { background-color: rgba(0, 0, 0, 0.5); }
.lightbox-video { display: none; }
.ginlined-content.lightbox-video { display: block; padding: 0; border: 8px solid #fff; background: #000; }
.glightbox-container .gnext.disabled, .glightbox-container .gprev.disabled { display: none; }
.ginlined-content.lightbox-video video { display: block; width: 100%; height: auto; }
.glightbox-container .gslide-inline { background: #000; }
.glightbox-container .gslide-inline .ginner-container { padding: 0; }

/* Bookings / Takeaway panels */
.half-links { display: flow-root; }
.half-link { position: relative; display: block; float: left; width: 50%; padding: 100px 0; background-size: cover; background-position: center; text-align: center; }
.half-link::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); transition: all 0.2s linear; }
.half-link:hover::before { background: rgba(0, 0, 0, 0.7); }
@media (max-width: 768px) {
  .half-link { float: none; width: 100%; }
}

/* === Page: /xmas/ (Elementor: plum and black offer bands, Times New Roman) === */
.xmas { font-family: "Times New Roman", Times, serif; text-align: center; }
.xmas h1, .xmas h3, .xmas h4 { margin: 0; font-family: inherit; text-align: center; }
.xmas__band--plum { background: #34091f; }
.xmas__band--black { margin-top: 20px; background: #000; }
.xmas__band .el-col > * + * { margin-top: 0; }
.xmas__box, .xmas__text { margin-bottom: 20px; }
.xmas__box { padding: 20px; }
.xmas__band--plum .xmas__box { background: #34091f; }
.xmas__box--spaced { letter-spacing: 3.9px; }
.xmas__box--spaced h1, .xmas__box--spaced h3 { letter-spacing: 3.9px; }
.xmas__box--book, .xmas__band .el-col > :last-child { margin-bottom: 0; }
.xmas__cream { color: #fffbce; }
.xmas__prices { width: 100%; }

/* === Page: /newsoffers/ (Elementor: offers text, "Recent News Articles" grid of article thumbnails) === */
.news__offers { text-align: center; }
.news__offers h2 { margin-bottom: 19px; font-family: var(--font-elementor); color: #fff; }
.news__offers hr { margin: 36px 0; }
.news__heading { margin: 0; font-family: var(--font-elementor); font-size: 28px; line-height: 1; color: #fff; text-align: center; }
.news__grid .el-image img { width: auto; max-width: 100%; }
.news__grid .news__empty { padding: 0; }
@media (max-width: 768px) {
  .news__heading { font-size: 21px; }
}

/* === Page: /a-la-carte-menu/ (tabs hidden on phones; the "View Full Menu" button shows at every width) === */
@media (max-width: 767px) {
  .alc-tabs { display: none; }
}

/* ============ 7. Utilities ============ */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.text-center { text-align: center; }
.text-underline { text-decoration: underline; }
.text-16 { font-size: 16px; }

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}