/* ==========================================================================
   Swastik Stays — brand layer

   Loaded LAST, after every template stylesheet. Everything under
   public/assets/** is regenerated by `npm run assets`, so any override that
   must survive belongs in this file.
   ========================================================================== */

/* ==========================================================================
   Colour system

   The brand crimson is measured, not guessed: of the 68,986 fully saturated
   pixels in logo.jpeg, rgb(198,1,28) is the modal value and rgb(194,5,30) the
   mean — hsl(352, 99%, 39%). Every ratio quoted below is a computed WCAG 2.1
   contrast ratio, not an estimate.

   The template funnels every accent through a single --theme variable, so the
   crimson ramp rebrands the whole site from here. `npm run assets` additionally
   rewrites the nine places the template hardcoded its gold inside rgba().
   ========================================================================== */

:root {
  /* --- crimson ramp ----------------------------------------------------- */
  --theme: #c6011c; /* the logo crimson.  6.14:1 on white, both directions */
  --theme-dark: #a20116; /* hover.           8.23:1 on white               */
  --theme-darker: #840112; /* pressed                                       */
  --theme-tint: #fbeff0; /* faint wash for panels and hover rows           */

  /*
   * --- second accent ----------------------------------------------------
   * The template's gold is kept as a deliberate second accent — crimson alone
   * reads as urgency/discount in web convention, whereas crimson with a muted
   * gold is the traditional Indian hospitality pairing and holds the luxury
   * feel the template was designed around. Their hues sit ~40deg apart, far
   * enough to read as two intentional accents rather than a clash.
   *
   * The stock #AA8453 could not stay: on the cream background it measured
   * 3.30:1, failing AA for the 16px eyebrow labels it was used on. Darkening
   * it to 40% lightness gives 4.61:1 and passes.
   */
  --gold: #8f6b3c; /* on light backgrounds.  4.61:1 on cream, 4.84:1 on white */
  --gold-light: #c9a063; /* on dark sections.      7.05:1 on #1C1C1C          */

  /*
   * --- neutrals ---------------------------------------------------------
   * The template's cream was hsl(33 100% 98%) — tuned to sit under a hue-34
   * gold. Against a hue-352 crimson that orange cast reads muddy across the
   * large section blocks, so the hue is pulled round to 13 while the lightness
   * is held at 98%. Still unmistakably a warm cream, now on-brand.
   */
  --bg: #fff8f6;
  --bg-2: #fff8f6;
  /* --bg-3 (#F8F8F8), --text (#434343) and --header (#1C1C1C) are untouched:
     all are true neutrals and all clear AA comfortably (9.4:1 and up). */
}

/* Two-tone treatment: crimson carries the calls to action, gold stays on the
   small eyebrow labels above section headings. */
.section-title .sub-title {
  color: var(--gold);
}

/* Over a dark photo or a dark section the deep gold would drop to ~2.2:1, so
   those eyebrows take the lighter tone instead. */
.section-title .sub-title.text-white,
.room-section .section-title .sub-title,
.hotel-dining-section .section-title .sub-title,
.testimonial-section .section-title .sub-title {
  color: var(--gold-light);
}

/* The preloader ring ships with a hardcoded gold. */
.spinner {
  border-top-color: var(--theme);
}

/* ============================================================== hero legibility

   The template's hero photograph was a dark night shot, so its white headline
   measured 11.8:1 against it and main.css needed no overlay at all. Our hero is
   the daylight photo of the building — mean rgb(190,190,186), and white on it
   measures 1.87:1 (2.10:1 over the lower-left band where the copy actually
   sits). Unusable as-is, and no amount of colour tuning fixes a bright photo.

   A scrim is the template's own answer to this: `.room-section .bg-image::before`
   (main.css:6531) and `.footer-section::before` both lay one over their photo.
   Here it is angled instead of flat, weighted into the lower-left where the text
   is, so the building and the signboard still read on the right-hand side.

   `.hero-1` already sets position:relative; the z-index below promotes it to a
   stacking context so the negative-z pseudo-element paints over the section's
   background image but under its content.
   ========================================================================== */

.hero-section-1 {
  z-index: 1;
}

.hero-section-1::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Tuned by measurement, not by eye: these stops put the copy band at ~7.7:1
     for white text (comfortably past AA's 4.5:1) while leaving the right-hand
     side — the building and its signboard — almost untouched. A heavier scrim
     reached 12.9:1 but turned the left half of the photograph black. */
  background-image:
    linear-gradient(
      100deg,
      rgba(18, 18, 18, 0.7) 0%,
      rgba(18, 18, 18, 0.46) 34%,
      rgba(18, 18, 18, 0.12) 64%,
      rgba(18, 18, 18, 0) 100%
    ),
    linear-gradient(to top, rgba(18, 18, 18, 0.4) 0%, rgba(18, 18, 18, 0) 48%);
}

/* Narrow viewports stack the copy over the middle of the photo, so the angled
   wash no longer covers it — go flat instead. */
@media (max-width: 991px) {
  .hero-section-1::before {
    background-image: linear-gradient(
      to top,
      rgba(18, 18, 18, 0.8) 0%,
      rgba(18, 18, 18, 0.62) 55%,
      rgba(18, 18, 18, 0.45) 100%
    );
  }
}

/* ==========================================================================
   Photo geometry

   The template was built against photos cut to a different aspect ratio per
   slot (210x135, 450x528, 1410x550, 116x116, 200x100), and in several places it
   sizes them with `height: 100%` inside a parent of indefinite height — which
   resolves to `auto`, so the slot's height comes from the file's own ratio.

   Our photographs are all one landscape ratio. Rather than cutting five more
   sets of crops, each slot declares the ratio the template assumed and crops by
   `object-fit`. Same geometry as the live demo, no extra bytes.
   ========================================================================== */

/* Wide offer card, revealed on hover: 450x528 portrait. Without this the photo
   ends at 300px and leaves a 228px band of bare dark card below it. */
.service-wrapper .service-main-item .service-card-item .services-image img {
  height: auto;
  aspect-ratio: 450 / 528;
  object-fit: cover;
}

/* Narrow resting offer card: 210x135. */
.service-wrapper .service-main-item .service-item .service-image img {
  height: auto;
  aspect-ratio: 210 / 135;
  object-fit: cover;
}

/* Amenity stack panels are full-bleed banners: 1410x550. These get pinned, so
   an over-tall panel would not fit the viewport. */
.aminities-wrapper .aminities-items .aminities-image a img {
  height: auto;
  aspect-ratio: 1410 / 550;
  object-fit: cover;
}

/* Banquet thumbnail strip: square. */
.hotel-dining-wrapper .hotel-dining-content .dining-item .dining-image img {
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Hero facility chips: 200x100. */
.hero-1 .hero-content .hero-wrapper .hero-box .hero-item .hero-image img {
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* Main banquet image beside the strip: 945x713. */
.hotel-dining-wrapper .hotel-image img {
  height: auto;
  aspect-ratio: 945 / 713;
  object-fit: cover;
}

/* --------------------------------------------------------------- header --- */

/* Our logo is a wide wordmark lockup, not the compact mark the template
   assumed, so cap it by height and let the width follow. */
.header-main .header-left .logo a img {
  width: auto;
  height: 44px;
}

@media (max-width: 575px) {
  .header-main .header-left .logo a img {
    height: 34px;
  }
}

/* ============================================================== nav plate ===

   The desktop menu sits on an opaque plate (header-bg.png, recoloured to a warm
   charcoal by `npm run assets`) which stays put in BOTH header states. So the
   links are always on that dark plate, never on the header's own background —
   which is why the template kept them white even once the header goes white, and
   why an earlier "fix" here that forced them to --header was wrong: it put
   #1C1C1C on a plate of the same darkness, measuring 1.85:1.

   Measured on the recoloured plate (L=0.064):
     white              9.19:1   <- links
     white at 75%       5.96:1   <- resting links
     crimson #C6011C    1.50:1   <- unusable, for text OR for an underline
     gold-light         3.80:1   <- under AA for text

   Crimson therefore cannot appear on the plate at all. The active state is
   monochrome instead, which has the useful side effect of leaving crimson to mean
   exactly one thing in this header: the BOOK NOW button.
   ========================================================================== */

/*
 * main.css pins .bg-image to the menu's edges but never sizes the <img> inside
 * it, so the plate rendered at its own 634x65 and stopped there. It happened to
 * land near the last link with the template's menu; with different labels it
 * would under- or overshoot. Stretching it means the plate always matches the
 * menu it is framing.
 */
.header-1 .header-main .main-menu .bg-image {
  border-radius: 12px;
  overflow: hidden;
}

.header-1 .header-main .main-menu .bg-image img {
  width: 100%;
  height: 100%;
}

.header-1 .header-main .main-menu ul li a {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.25s ease;
}

/* Both states, because the plate does not change with them. */
.sticky.header-1 .header-main .main-menu ul li a {
  color: rgba(255, 255, 255, 0.75) !important;
}

.header-1 .header-main .main-menu ul li a:hover,
.header-1 .header-main .main-menu ul li.active > a,
.sticky.header-1 .header-main .main-menu ul li a:hover,
.sticky.header-1 .header-main .main-menu ul li.active > a {
  color: var(--white) !important;
}

/* The active page gets a rule under it as well as full-strength text, so the
   state does not rely on a brightness difference alone. */
.header-1 .header-main .main-menu ul li.active > a {
  position: relative;
}

.header-1 .header-main .main-menu ul li.active > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--white);
}

/* ------------------------------------------------------- phone widget ----- */

/*
 * The template's .call-item is a filled plate (call-bg.png) with a filled icon
 * chip on top. Once both are crimson the chip disappears into the plate, and the
 * widget ends up competing with the BOOK NOW button beside it — two identical
 * crimson blocks, neither reading as the primary action.
 *
 * Dropping the plate for a hairline border gives the header one clear hierarchy:
 * a quiet phone number, then a single solid crimson call to action. The plate's
 * <img> is omitted in Header.tsx rather than hidden here, so it is never
 * requested.
 */
.header-main .header-right .call-item {
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 10px 16px;
  border-radius: 10px;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

/*
 * main.css hides this widget below 1400px, which leaves every 1200-1399px laptop
 * with no phone number in the header at all. Measured out, the row needs about
 * 1080px (logo 200 + nav plate 560 + widget 170 + button 150), so it fits from
 * 1200px — just not at 992px, where the nav plate alone would push it off.
 */
@media (min-width: 1200px) and (max-width: 1399px) {
  .header-main .header-right .call-item {
    display: flex;
    padding: 8px 12px;
    gap: 9px;
  }

  .header-main .header-right .call-item h6 {
    font-size: 15px;
  }
}

.header-main .header-right .call-item:hover {
  border-color: rgba(255, 255, 255, 0.55);
}

.header-main .header-right .call-item h6 a {
  color: var(--white);
}

/* Once the header goes solid white the widget sits on white, not on a photo. */
.sticky .header-main .header-right .call-item {
  border-color: var(--border-2);
}

.sticky .header-main .header-right .call-item:hover {
  border-color: var(--theme);
}

.sticky .header-main .header-right .call-item h6 a {
  color: var(--header);
}

.header-main .header-right .call-item h6 a:hover {
  color: var(--theme);
}

/* The crimson chip is the one accent here, and it now has a background to read
   against: 6.14:1 for its white glyph, both over the hero and over white. */
.header-main .header-right .call-item .icon {
  flex: 0 0 auto;
}

/* ======================================================= keyboard access ===

   The template was built mouse-first: it removes focus outlines in places and
   has no way past the header for keyboard users.
   ========================================================================== */

/* Skip link — visually hidden until focused, then pinned over the header. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100001;
  padding: 12px 20px;
  border-radius: 8px;
  background-color: var(--theme);
  color: var(--white);
  font-family: Barlow, sans-serif;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
  color: var(--white);
}

/*
 * A visible focus ring on everything interactive. :focus-visible is used rather
 * than :focus so it appears for keyboard and assistive tech but not on mouse
 * clicks, which is what the template was trying (badly) to avoid.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--theme);
  outline-offset: 3px;
  border-radius: 4px;
}

/* On dark sections and photo overlays a crimson ring disappears. */
.hero-section-1 a:focus-visible,
.room-section a:focus-visible,
.room-section button:focus-visible,
.hotel-dining-section a:focus-visible,
.hotel-dining-section button:focus-visible,
.footer-section a:focus-visible,
.gallery-lightbox button:focus-visible,
.aminities-wrapper a:focus-visible,
.header-1:not(.sticky) .main-menu a:focus-visible {
  outline-color: var(--white);
}

/* --------------------------------------------------- off-canvas drawer --- */

/* The template built its mobile nav with the meanmenu jQuery plugin, which
   cloned the desktop <nav> at runtime. This port renders a plain list instead. */
.drawer-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.drawer-menu li {
  border-bottom: 1px solid var(--border);
}

.drawer-menu li a {
  display: block;
  padding: 14px 2px;
  font-family: Barlow, sans-serif;
  font-size: 17px;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--header);
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.drawer-menu li a:hover,
.drawer-menu li.active > a {
  color: var(--theme);
  padding-left: 8px;
}

/* ------------------------------------------------------------ preloader --- */

/* Safety net: if this component never hydrates, the splash still clears itself
   instead of covering the page for good. */
#preloader {
  animation: preloader-safety-fade 2.5s step-end forwards;
}

@keyframes preloader-safety-fade {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* --------------------------------------------------------- scroll reveal --- */

/* Stands in for WOW.js. Elements only start hidden once the reveal observer is
   actually running, so content stays visible if JS fails or is disabled. */
html.reveal-ready .wow:not(.animated) {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .wow:not(.animated) {
    visibility: visible;
  }

  .animated,
  .scrolling-wrap .comm,
  .preloader-logo {
    animation: none !important;
  }
}

/* ====================================================== mobile CTA bar ======

   The header strips its own actions as the viewport narrows — main.css hides
   .call-item below 1400px, and .header-button only appears from 576px — so below
   576px there is no way to book from the header at all. This bar covers that, and
   puts all three actions in thumb reach up to 991px.

   Fixed-UI budget at the bottom of the screen, so nothing stacks on anything:
     bar            z-index 9998, bottom 0,  height ~64px
     back-to-top    z-index 9999, lifted to bottom 80px while the bar shows
     whatsapp FAB   hidden while the bar shows (the bar already offers WhatsApp)
     lightbox       z-index 100000, covers everything
     skip link      z-index 100001, must stay reachable above all of it
   ========================================================================== */

.mobile-cta-bar {
  display: none;
}

@media (max-width: 991px) {
  .mobile-cta-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background-color: var(--white);
    border-top: 1px solid var(--border-2);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.1);
    /* Keeps the bar clear of the iOS home indicator. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-cta {
    /* 44px is the minimum comfortable touch target; this gives 56. */
    min-height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    font-family: Barlow, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--header);
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .mobile-cta i {
    font-size: 19px;
    line-height: 1;
  }

  .mobile-cta:not(:last-of-type) {
    border-right: 1px solid var(--border-2);
  }

  .mobile-cta--call i {
    color: var(--theme);
  }

  .mobile-cta--whatsapp i {
    color: #25d366;
  }

  /* The one filled action, matching the header's single-crimson-CTA hierarchy. */
  .mobile-cta--book {
    background-color: var(--theme);
    color: var(--white);
    border-right: 0;
  }

  .mobile-cta--book i {
    color: var(--white);
  }

  .mobile-cta:active {
    background-color: var(--theme-tint);
  }

  .mobile-cta--book:active {
    background-color: var(--theme-dark);
    color: var(--white);
  }

  /* Stop the bar covering the footer's last row. */
  body {
    padding-bottom: 64px;
  }

  /* Lift the back-to-top button clear of the bar. */
  .back-to-top {
    bottom: 80px;
  }

  /* WhatsApp is in the bar now — one entry point, not two. */
  .whatsapp-fab {
    display: none;
  }
}

/* ============================================================ print styles ==

   A real case for a hotel: a guest prints the address to hand to a driver, or the
   rates to compare. Untreated, this page prints as pages of photographs with the
   navigation and the sticky bars baked in, and the crimson panels burn through a
   cartridge of ink.
   ========================================================================== */

@media print {
  /* Chrome. Without this the scrim, the crimson bands and the dark footer print
     as grey blocks with white text on them — unreadable on paper. */
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Interface, not content. */
  #header-sticky,
  .offcanvas__info,
  .offcanvas__overlay,
  .back-to-top,
  .whatsapp-fab,
  .mobile-cta-bar,
  .skip-link,
  #preloader,
  .instagram-section,
  .instagram-section-2,
  .marque-section,
  .array-buttons,
  .gallery-filter,
  .gallery-lightbox,
  .signature-image,
  .hero-section-1::before,
  .theme-btn img,
  .bg-image {
    display: none !important;
  }

  /* ScrollSmoother's transform would otherwise clip everything past page one. */
  #smooth-wrapper,
  #smooth-content {
    transform: none !important;
    position: static !important;
    height: auto !important;
    overflow: visible !important;
  }

  body {
    padding-bottom: 0;
  }

  /* `.fix` is overflow:hidden all over the template, which truncates content
     across a page break. */
  .fix,
  section,
  .container {
    overflow: visible !important;
  }

  /* Photographs are the bulk of the ink; keep one per section for context. */
  .room-thumb-row,
  .aminities-section,
  .service-offer-section,
  .hotel-facilities-items .facilities-image img:first-child,
  .room-image img:first-child {
    display: none !important;
  }

  img {
    max-width: 40% !important;
    height: auto !important;
    page-break-inside: avoid;
  }

  section,
  .section-padding {
    padding: 12pt 0 !important;
    page-break-inside: avoid;
  }

  h1,
  h2,
  h3 {
    page-break-after: avoid;
  }

  /* Print the destination of links, since a printed page cannot be clicked. */
  a[href^="tel:"]::after,
  a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
  }

  /* Every printed page should carry the hotel's own details. */
  .footer-section {
    page-break-before: avoid;
    border-top: 1pt solid #000;
  }
}

/* Screen-reader-only text. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------ whatsapp button --- */

.whatsapp-fab {
  position: fixed;
  left: 25px;
  bottom: 30px;
  z-index: 99;
  width: 54px;
  height: 54px;
  border-radius: 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #25d366;
  color: var(--white);
  font-size: 26px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.whatsapp-fab:hover {
  color: var(--white);
  background-color: #1da851;
  transform: translateY(-3px);
}

@media (max-width: 575px) {
  .whatsapp-fab {
    left: 16px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    font-size: 23px;
  }
}

/* ------------------------------------------------------------- marquee --- */

/* The scrolling band sits on --header (near-black), where crimson stars fall to
   2.8:1 and all but disappear. */
.scrolling-wrap .comm .cmn-textslide i {
  color: var(--gold-light);
}

/* ---------------------------------------------------------- amenity cards --- */

/* .service-box-items shipped with only an icon and an h6. Ours carry a one-line
   note as well, so the card needs to grow rather than clip. */
.service-box-items {
  height: 100%;
}

.service-box-items .icon i {
  font-size: 32px;
  line-height: 1;
  color: var(--theme);
}

.service-box-items h6 {
  margin-bottom: 8px;
}

.service-box-items p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 0;
}

/* ------------------------------------------------------- facility icons --- */

/*
 * The template shipped six fixed SVG icons and its boxes take their height from
 * that 44px artwork. Our amenity list is different (no swimming pool, no smart
 * keys, but a banquet hall and a 24-hour desk), so these carry Font Awesome
 * glyphs — sized to the same 44px box so the row keeps the template's geometry.
 */
.feature-wrapper .feature-left-item .feature-box .icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-wrapper .feature-left-item .feature-box .icon i {
  font-size: 34px;
  color: var(--theme);
  line-height: 1;
}

.feature-wrapper .feature-left-item .feature-box.style-2 .icon i {
  color: var(--white);
}

/* Labels here run longer than the template's ("Banquet & Conference Hall" vs
   "Room Service"), so the fixed-width box has to wrap rather than overflow. */
.feature-wrapper .feature-left-item .feature-box p {
  overflow-wrap: break-word;
  hyphens: auto;
}

.feature-wrapper .feature-left-item .feature-box-item {
  align-items: stretch;
}

/* ------------------------------------------------------------- banquet --- */

/* Reuses the template's dining section, which hardcodes food imagery ratios. */
.hotel-dining-section .hotel-image img,
.hotel-dining-section .dining-image img {
  width: 100%;
  object-fit: cover;
}

.hotel-dining-section .dining-slider .swiper-slide {
  cursor: pointer;
}

/* ============================================================== crimson panels

   Two blocks paint themselves crimson from --theme: the footer CTA band
   (main.css:2930) and the left 945px of the banquet section
   (main.css:7070). A .theme-btn is also crimson, so any button placed on them
   loses its plate entirely and reads as bare white text. The template never hit
   this because it put a white input there instead of buttons.

   Inverting to a white plate with crimson text keeps the same 6.14:1 contrast,
   just the other way round.
   ============================================================================ */

.footer-newsletter .theme-btn:not(.theme-btn-whatsapp),
.hotel-dining-content .theme-btn:not(.theme-btn-whatsapp) {
  background-color: var(--white);
  color: var(--theme);
}

/* .theme-btn's hover wipe is a ::before that slides across; point it at the dark
   neutral so the label stays legible through the transition. */
.footer-newsletter .theme-btn:not(.theme-btn-whatsapp)::before,
.hotel-dining-content .theme-btn:not(.theme-btn-whatsapp)::before {
  background-color: var(--header);
}

.footer-newsletter .theme-btn:not(.theme-btn-whatsapp):hover,
.hotel-dining-content .theme-btn:not(.theme-btn-whatsapp):hover {
  color: var(--white);
}

/* ------------------------------------------------------------- spaces row --- */

/*
 * "view details" on the resting card is crimson on the card's near-black
 * background (main.css sets .service-item's background to --header): 2.78:1,
 * below AA. Same problem, same answer as the marquee stars.
 */
.service-wrapper .service-main-item .service-item .service-content .btn {
  color: var(--gold-light);
}

/*
 * The row does not fit, and because `.fix` is `overflow: hidden` it clips rather
 * than scrolls — so the fifth card sits permanently cut off on desktop.
 *
 * Arithmetic: one card is always `.active`, and an active card is 450px while the
 * other four stay 210px with 30px gaps:
 *     450 + (4 x 210) + (4 x 30) = 1410px
 * The container tops out at max-width 1410px INCLUDING its 24px of padding, so
 * the content box is 1376px at a 1400px viewport and 1386px above that. The row
 * therefore overhangs by 24-34px at every desktop width.
 *
 * Capping the active card at 410px brings the total to 1370px, inside even the
 * tightest of those.
 */
@media (min-width: 1400px) {
  .service-wrapper .service-main-item.active,
  .service-wrapper .service-main-item.active .service-card-item {
    width: 410px;
  }
}

/*
 * 1200-1399px: main.css lets the row wrap here, and five 210px cards plus 30px
 * gaps (1170px) do not fit the 1116px content box — so the fifth card drops to a
 * second row on its own. Tightening the cards and gaps keeps all five in one row.
 */
@media (min-width: 1200px) and (max-width: 1399px) {
  .service-wrapper {
    gap: 20px;
    flex-wrap: nowrap;
  }

  .service-wrapper .service-main-item,
  .service-wrapper .service-main-item .service-item,
  .service-wrapper .service-main-item .service-card-item,
  .service-wrapper .service-main-item.active,
  .service-wrapper .service-main-item.active .service-card-item {
    width: 200px;
  }
}

/*
 * Template bug: below 1400px main.css:7798 sets `.service-main-item.active
 * { display: none }` — presumably to hide the expanded card on narrow screens,
 * but since one card is always active it simply deletes a card from the row. On
 * touch it is worse: tapping fires the hover handler, so the card you tapped is
 * the one that vanishes.
 *
 * Between 992px and 1399px the expansion is switched off instead: every card
 * keeps its resting size and its narrow face.
 */
@media (min-width: 992px) and (max-width: 1399px) {
  .service-wrapper .service-main-item.active {
    display: block;
    width: 210px;
  }

  .service-wrapper .service-main-item.active .service-item {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }

  .service-wrapper .service-main-item.active .service-card-item {
    opacity: 0;
    visibility: hidden;
  }
}

/*
 * Below 992px the whole pattern has to change, not just shrink.
 *
 * The narrow face is a 210x528 column with its title set in `writing-mode:
 * vertical-rl` — a desktop conceit that, on a phone, gives five sideways-reading
 * columns and about 2600px of scrolling. And the expansion it is waiting for is a
 * hover, which a touch screen never sends: a tap goes straight to the link, so a
 * touch visitor would never see a card open at all.
 *
 * So on touch widths the WIDE face is shown instead — the same photo with a
 * normal horizontal title card over it — stacked full width. Same content, same
 * classes, a layout that suits the device.
 */
@media (max-width: 991px) {
  .service-wrapper {
    flex-wrap: wrap;
    gap: 20px;
  }

  .service-wrapper .service-main-item,
  .service-wrapper .service-main-item.active {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin-inline: auto;
  }

  /* The narrow vertical-text face is the one that does not work here. */
  .service-wrapper .service-main-item .service-item {
    display: none;
  }

  .service-wrapper .service-main-item .service-card-item,
  .service-wrapper .service-main-item.active .service-card-item {
    position: relative;
    width: 100%;
    height: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* Full selector deliberately: the portrait 450/528 ratio set in the photo
     geometry block above uses the same path, and a shorter selector here would
     lose to it regardless of being inside a media query. */
  .service-wrapper .service-main-item .service-card-item .services-image img {
    aspect-ratio: 4 / 3;
  }
}


/* --------------------------------------------------------- anchor targets --- */

/*
 * /rooms#deluxe and friends would otherwise land with the heading tucked under
 * the fixed header. This is the no-JS backstop; ScrollSmoother-aware scrolling
 * is handled by HashScroll.
 */
[id] {
  scroll-margin-top: 120px;
}

@media (max-width: 991px) {
  [id] {
    scroll-margin-top: 90px;
  }
}

/* --------------------------------------------------------------- banquet --- */

/*
 * main.css only pads .hotel-dining-wrapper at 1399px and below, so on a real
 * desktop the crimson panel has no vertical padding at all and the text sits hard
 * against its edges. Restoring the same rhythm the narrower breakpoints use.
 */
@media (min-width: 1400px) {
  .hotel-dining-wrapper {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/*
 * Off-by-one in the template: the white "selected" outline is put on
 * `.swiper-slide-next` — the thumbnail AFTER the active one — so it never marks
 * the photo actually on show. Swiper's own `.swiper-slide-thumb-active` is the
 * correct hook.
 */
.hotel-dining-wrapper .hotel-dining-content .dining-item .swiper-slide-next .dining-image img {
  border: 0;
}

.hotel-dining-wrapper .hotel-dining-content .dining-item .swiper-slide-thumb-active .dining-image img {
  border: 3px solid var(--white);
}

/* --------------------------------------------------------- banquet bullets --- */

/* The bullet list is an addition — main.css only styles `.list-item` under
   `.about-wrapper .about-content`, so without this it collapses into one column
   and the chevrons lose their colour. It sits on the crimson panel, hence white. */
.hotel-dining-content .list-item {
  display: flex;
  align-items: flex-start;
  gap: 50px;
}

.hotel-dining-content .list-item .list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hotel-dining-content .list-item .list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-family: Barlow, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--white);
}

.hotel-dining-content .list-item .list li i {
  margin-top: 4px;
  color: var(--white);
  opacity: 0.85;
}

@media (max-width: 991px) {
  .hotel-dining-content .list-item {
    flex-direction: column;
    gap: 0;
  }
}

/* --------------------------------------------------------- gallery strip --- */

/*
 * main.css pulls .instagram-section up by 180px (and pushes it DOWN by 100px
 * below 1400px, 80px below 992px) so it overlaps whatever is above it — in the
 * template, the testimonial section's bottom padding.
 *
 * When Testimonials renders nothing — which it does until real reviews exist —
 * the strip would instead climb into the banquet panel. The offset is therefore
 * cancelled by a modifier the page applies only in that case, rather than
 * unconditionally: the day a review is added, the template's arithmetic has to
 * come back or a ~510px hole opens up.
 */
.instagram-section.gallery-strip--tight {
  margin-top: 0;
}

/*
 * The tile's link icon is `opacity: 0` until the tile is hovered, so a keyboard
 * user gets an invisible link AND an invisible focus ring — ten of them per strip.
 * Revealing it on focus-within too makes the link findable without a mouse.
 */
.instagram-banner-items:focus-within .banner-image .icon {
  opacity: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 1399px) {
  .instagram-section.gallery-strip--tight {
    margin-top: 0;
  }
}

.gallery-strip .banner-image img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 10px;
}

@media (max-width: 767px) {
  .gallery-strip .banner-image img {
    height: 200px;
  }
}

/* ------------------------------------------------------------ rooms page --- */

/* Supporting thumbnails under each room's main photo. */
.room-thumb-row img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 10px;
}

/* ----------------------------------------------------------- room slider --- */

/* The section's backdrop is a full-bleed photo behind the carousel. */
.room-section .bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------- enquiry form ----- */

/* The template used <h4> above each field. Those are now real <label for>
   elements — same look, but they actually label the input and no longer inject
   stray headings into the page outline. */
.contact-form-box .form-label-h4 {
  display: block;
  margin-bottom: 10px;
  font-family: "Gilda Display", serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--header);
}

/* ------------------------------------------------------------- gallery ---- */

.gallery-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 10px;
}

.gallery-filter-btn {
  padding: 10px 22px;
  border: 1px solid var(--border-2);
  border-radius: 100px;
  background: transparent;
  font-family: Barlow, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--header);
  transition: all 0.3s ease;
}

.gallery-filter-btn:hover {
  border-color: var(--theme);
  color: var(--theme);
}

.gallery-filter-btn.active {
  background: var(--theme);
  border-color: var(--theme);
  color: var(--white);
}

.gallery-tile {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: var(--bg-3);
  cursor: pointer;
}

.gallery-tile img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-tile:hover img {
  transform: scale(1.06);
}

.gallery-tile-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--white);
  background: rgba(200, 16, 46, 0.55);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.gallery-tile:hover .gallery-tile-icon,
.gallery-tile:focus-visible .gallery-tile-icon {
  opacity: 1;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
}

.gallery-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(12, 12, 12, 0.92);
  cursor: zoom-out;
}

.gallery-lightbox-figure {
  position: relative;
  margin: 0;
  max-width: min(1100px, 100%);
  text-align: center;
}

.gallery-lightbox-figure img {
  max-width: 100%;
  max-height: 82vh;
  border-radius: 10px;
  object-fit: contain;
}

.gallery-lightbox-figure figcaption {
  margin-top: 14px;
  font-family: Barlow, sans-serif;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.75);
}

.gallery-lightbox-nav,
.gallery-lightbox-close {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  background: transparent;
  color: var(--white);
  font-size: 16px;
  transition: all 0.3s ease;
}

.gallery-lightbox-nav:hover,
.gallery-lightbox-close:hover {
  background: var(--theme);
  border-color: var(--theme);
}

.gallery-lightbox-close {
  position: absolute;
  top: 22px;
  right: 22px;
}

@media (max-width: 767px) {
  .gallery-lightbox {
    flex-wrap: wrap;
  }

  .gallery-lightbox-figure {
    order: -1;
    flex: 1 0 100%;
  }
}

/* ------------------------------------------------------------- footer ----- */

.footer-section .footer-logo img {
  width: auto;
  height: 46px;
}

/*
 * Replaces the template's newsletter form with the two ways guests can book.
 * The band is a space-between flex row, and the form it used to hold was capped
 * at 765px — without that the button pair collapses to its content width and the
 * band loses its two-thirds/one-third balance.
 */
.footer-cta-buttons {
  display: flex;
  flex: 1 1 0;
  max-width: 765px;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
}

@media (max-width: 1399px) {
  .footer-cta-buttons {
    justify-content: flex-start;
  }
}

.footer-cta-buttons .theme-btn {
  gap: 10px;
  white-space: nowrap;
}

.theme-btn.theme-btn-whatsapp {
  background-color: #25d366;
}

.theme-btn.theme-btn-whatsapp::before {
  background-color: #1da851;
}

/* Secondary action beside a primary .theme-btn — the template has no outline
   variant, but two solid crimson buttons side by side give neither one priority. */
.theme-btn.theme-btn-outline {
  background-color: transparent;
  border: 1px solid var(--theme);
  color: var(--theme);
  gap: 10px;
}

.theme-btn.theme-btn-outline::before {
  background-color: var(--theme);
}

.theme-btn.theme-btn-outline:hover {
  color: var(--white);
}

/* Keep the address block readable when it wraps. */
.footer-section .contact-item li {
  line-height: 1.6;
}