/* ==========================================================================
   SENSES HAVELOCK RESORT — DESIGN SYSTEM (FOUNDATION)

   Every token below is derived from measured values on the reference site
   https://preview.simplotel.com/971E52F2C1DF6A78/ (Hotel Comfort Park),
   inspected at 1407px and 991px viewports. Measured source values are noted
   in comments as "REF:". Nothing here is invented for visual taste.

   The reference's defining structural decision: the container is FLUID with
   no max-width, and one single unit — 6.33vw — drives both the page side
   padding and the section rhythm. That relationship is preserved here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {

  /* ---- 1.1 Type families -------------------------------------------------
     Exactly two, matching the reference's two-family system.
       REF headings : DM Serif Display
       REF body/UI  : Plus Jakarta Sans
     Senses keeps Plus Jakarta Sans (neutral, modern, excellent at the
     reference's airy 1.87 line-height) and swaps the display face to
     Cormorant Garamond — same high-contrast serif role, but with the lighter,
     coastal feel the property needs rather than DM Serif's heavier stone.   */

  --ff-display: "Cormorant Garamond", "DM Serif Display", Georgia, serif;
  --ff-text: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- 1.2 Type scale ----------------------------------------------------
     REF measured a fluid vw-based scale, all steps multiples of one base:
       base 14.8172px @1407 viewport = 1.0532vw
       H1 = base x3    (44.44px @1407 / 35px @991)   ls 1.44px  lh 1.208
       H2 = base x2    (29.62px @1407 / 26px @991)   ls 0.96px  lh 1.312
       H4 = base x1.5  (22.23px @1407 / 20px @991)   ls 0.72px  lh 1.374
       body = base x1  (14.82px @1407)               lh 27.77px = 1.874
     Letter-spacing is a constant 0.032em on every heading step.
     Reproduced with clamp() so the fluid behaviour survives but the ends
     stay legible on phones and sane on very wide screens.                   */

  --fs-h1: clamp(1.5rem, 3.16vw, 3rem);      /* 30 -> 45.5@1440 -> 48 cap */
  --fs-h2: clamp(1.375rem, 2.105vw, 2rem);       /* 24 -> 30.3@1440 -> 32 cap */
  --fs-h3: clamp(1.25rem, 1.58vw, 1.5rem);   /* 19 -> 22.8@1440 -> 24 cap */
  --fs-h4: clamp(1.0625rem, 1.32vw, 1.25rem);  /* 17 -> 19@1440   -> 20 cap */
  --fs-h5: clamp(0.9375rem, 1.11vw, 1.0625rem);
  --fs-h6: clamp(0.8125rem, 0.94vw, 0.875rem);

  /* PARAGRAPHS. One size for every prose paragraph on the site. Floored at
     15px so no paragraph is ever set below the minimum, whatever the width;
     16px from 1520 up, so 16px at the 1536 reference. */
  --fs-body: clamp(0.9375rem, 1.053vw, 1rem);   /* 15 -> 15.2@1440 -> 16 cap */

  /* Secondary paragraphs — notes, hints, address blocks, fine print. Reaches
     the same 15px minimum from 1440 up; only its small-screen floor sits
     below --fs-body. Nothing set in a <p> uses anything smaller than this. */
  --fs-small: clamp(0.875rem, 1.042vw, 0.9375rem);  /* 14 -> 15@1440 -> 15 cap */

  /* NOT for paragraphs. Micro-labels only: overlines, meta rows, counters,
     table headers — text that is a label, not a sentence. */
  --fs-caption: clamp(0.75rem, 0.84vw, 0.8125rem);
  --fs-btn: clamp(0.75rem, 1.053vw, 0.9375rem);
  --fs-nav: clamp(0.8125rem, 0.94vw, 0.9375rem);
  --fs-overline: clamp(0.6875rem, 0.84vw, 0.75rem);

  /* Line heights — REF measured */
  --lh-h1: 1.21;
  --lh-h2: 1.31;
  --lh-h3: 1.37;
  --lh-h4: 1.40;
  --lh-body: 1.87;      /* REF 27.77/14.82 — the airy body rhythm */
  --lh-tight: 1.45;

  /* Letter spacing — REF constant across headings */
  --ls-heading: 0.032em;
  --ls-btn: 0.08em;
  --ls-overline: 0.18em;
  --ls-nav: 0.04em;

  /* Weights. Cormorant needs 500-600 to hold presence at display sizes,
     where DM Serif Display carries at 400. */
  --fw-display: 500;
  --fw-body: 400;
  --fw-medium: 500;
  --fw-semi: 600;

  /* ---- 1.3 Colour --------------------------------------------------------
     REF pattern (not REF hues): brand-coloured serif headings, neutral warm
     grey body text, near-white ground, a light brand tint for card bodies.
     Senses hues come from the logo and the property: the blue "S", the
     orange sun, the palms, terracotta roof tiles, the pool.                 */

  --c-ocean-900: #072B33;   /* footer ground                     */
  --c-ocean-800: #0C3A45;
  --c-brand:     #14535F;   /* HEADINGS — the reference's role   */
  --c-lagoon:    #1F7A8C;   /* links, overlines, small accents   */
  --c-lagoon-tint: #EAF3F5; /* CARD BODY TINT — REF role         */

  --c-accent:      #CE6240; /* terracotta — primary CTA          */
  --c-accent-dark: #B4512F;

  --c-text:  #585A59;       /* REF body grey rgb(88,90,89)       */
  --c-ink:   #23312F;
  --c-muted: #8A8F8E;

  --c-bg:      #FFFFFF;
  --c-bg-alt:  #FBF8F3;     /* warm off-white section ground     */
  --c-line:    #E4DFD6;
  --c-white:   #FFFFFF;

  /* ---- 1.4 Spacing -------------------------------------------------------
     THE core unit. REF: container padding 89px @1407 = 6.33vw, and 63px
     @991 = 6.36vw. The same 6.33vw also equals the section gap (44px top +
     44px bottom = 88px ~ 89px). One unit, two jobs.                        */

  --unit: clamp(1.875rem, 6.33vw, 7.5rem);   /* 30 on phones (REF mobile) */   /* 20 -> 91@1440 -> 120 cap */

  --page-padding: var(--unit);              /* left/right page padding  */

  /* THE section rhythm. 100px top and bottom on every section, everywhere on
     the site — colour seam or not, tinted band or plain ground. Scales down
     on smaller screens so phones do not inherit 100px voids. */
  --section-y: clamp(3.5rem, 6.94vw, 6.25rem);        /* 56 -> 100@1440 -> 100 */
  --section-y-lg: var(--section-y);                   /* bands run on it too */
  /* The same value again, under a name no component shadows. A section that
     locally overrides --section-y (the Rooms one-fold squeeze does) loses any
     way to ask for the site's normal rhythm back; this is that way. Keep the
     two in step — if one changes, change both. */
  --section-y-root: clamp(3.5rem, 6.94vw, 6.25rem);

  /* The short rhythm. Two constructs only: the breadcrumb strip, and the
     booking bar that overlaps the hero (a full step under a floating card
     reads as a hole, not a break). Everything else uses --section-y. */
  --section-y-base: clamp(1.5rem, 3.13vw, 3.5rem);   /* 28 -> 45@1440 -> 56 */

  /* Content relationships — fixed, never re-decided per section.
     These are the values the whole site obeys.                            */
  --gap-overline-heading: 0.75rem;   /* 12 — overline  -> heading   */
  --gap-heading-rule:     1rem;      /* 16 — heading   -> rule      */
  --gap-rule-para:        1.5rem;    /* 24 — rule      -> paragraph */
  --gap-heading-para:     1.5rem;    /* 24 — heading   -> paragraph */
  --gap-para-para:        1.25rem;   /* 20 — paragraph -> paragraph */
  --gap-para-btn:         2rem;      /* 32 — paragraph -> button    */
  --gap-heading-btn:      2rem;      /* 32 — heading   -> button    */
  --gap-heading-cards:    3.5rem;    /* 56 — heading   -> cards     */
  --gap-btn-cards:        2.5rem;    /* 40 — button    -> cards     */
  --gap-card:             3rem;      /* 48 — card -> card (REF)     */
  --gap-image-content:    3rem;      /* 48 — image -> content       */
  --gap-content:          2.5rem;    /* 40 — block -> block         */
  --gap-icon-text:        0.75rem;   /* 12 — icon  -> text          */
  --gap-image-caption:    0.625rem;  /* 10 — image -> caption       */
  --gap-field:            1.25rem;   /* 20 — form field -> field    */

  /* Card interior padding — REF card body block */
  --card-pad: clamp(1.25rem, 1.95vw, 1.75rem);

  /* ---- 1.5 Shape, motion -------------------------------------------------
     REF: border-radius 0 on buttons and cards. Square is the house shape.  */
  --radius: 0;
  --radius-pill: 999px;

  --border: 1px solid var(--c-line);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 300ms;
  --dur-fast: 160ms;

  --header-h: 98px;
  --header-h-sm: 72px;      /* the condensed bar, once scrolled */
  --z-header: 100;
  /* The docks were written as var(--z-dock, 60) but the token was never
     defined, so the 60 fallback always won and the chat panel painted BEHIND
     the header — and let the header steal its clicks — on any viewport short
     enough for the two to overlap (below roughly 660px tall). 150 clears the
     header and still sits under the drawer scrim, so the mobile menu keeps
     covering the dock. */
  --z-dock: 150;
  --z-drawer: 200;
  --z-modal: 300;
}

@media (min-width: 1024px) { :root { --header-h: 132px; --header-h-sm: 92px; } }

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  /* The page must never scroll sideways. `body { overflow-x: hidden }` alone
     relies on the body's overflow propagating to the viewport, which only
     happens while the root's own overflow is visible — the moment anything
     changes that, an off-canvas element (the closed drawer sits a full panel
     width to the right) widens the document and every in-flow block, the
     footer included, stops reaching the right edge while the fixed header
     still does. `clip` holds it at the root and, unlike `hidden`, creates no
     scroll container, so nothing inside starts scrolling on its own. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---- Page wash ----------------------------------------------------------
   The resort illustration, laid once behind the whole site.

   It is a pseudo-element rather than a background on <body> for two reasons:
   opacity cannot be applied to a background-image on its own, and a filter on
   <body> would drag every child through it. Fixed and cover, so it is laid
   ONCE — no tiling, no seam, and no second copy on a long page.

   The illustration's own palette is a bright sky blue that would fight the
   brand. grayscale strips it, sepia gives the filter something warm to turn,
   and hue-rotate carries that round to the lagoon — the standard recipe for
   re-tinting an image to a single hue. Held at 0.07 so it reads as a texture
   in the white sections and never costs a heading its contrast; the cream,
   ocean and footer bands paint over it entirely, which is intended.

   z-index -1 puts it above the canvas and below every block on the page.
   <body> sets no transform, filter or opacity, so it creates no stacking
   context and the negative index resolves against the root as intended. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../img/bg-illustration.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  filter: grayscale(1) sepia(0.5) hue-rotate(140deg) saturate(1.5);
  opacity: 0.07;
}

/* Printing a full-bleed wash wastes ink and greys the type. */
@media print {
  body::before { display: none; }
}

img, picture, video, svg { max-width: 100%; display: block; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: var(--c-lagoon); text-decoration: none; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
figure, blockquote { margin: 0; }
address { font-style: normal; }

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   Heading LEVEL is chosen by document hierarchy, never by desired size.
   Where a section needs a different visual weight than its semantic level,
   apply a .t-* class to the correct tag.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-display);
  color: var(--c-brand);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

h1, .t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2, .t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3, .t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
h4, .t-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); }

/* H5 / H6 are structural labels — they switch to the text family, because a
   high-contrast serif stops being legible at these sizes. */
h5, .t-h5 {
  font-family: var(--ff-text);
  font-size: var(--fs-h5);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
h6, .t-h6 {
  font-family: var(--ff-text);
  font-size: var(--fs-h6);
  font-weight: var(--fw-semi);
  line-height: var(--lh-tight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}

p { margin: 0; }
p + p { margin-top: var(--gap-para-para); }

.lead { font-size: var(--fs-body); }
.small { font-size: var(--fs-small); }

/* .caption is applied to <p> — fine print under a table, a rates note, a
   legend. It is a paragraph, so it takes --fs-small and holds the 15px
   minimum. --fs-caption is reserved for labels that are not sentences. */
.caption {
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
  letter-spacing: 0.04em;
  color: var(--c-muted);
}
.muted { color: var(--c-muted); }

/* Overline / eyebrow — decorative label above a heading. Never a heading tag. */
.overline {
  display: block;
  font-family: var(--ff-text);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-overline);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--c-lagoon);
  margin: 0 0 var(--gap-overline-heading);
}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */

/* REF: fluid, no max-width, side padding = the core unit. */
.container {
  width: 100%;
  padding-inline: var(--page-padding);
}

/* Reading measure for long-form copy inside a fluid container. */
.measure { max-width: 68ch; }
.measure-sm { max-width: 54ch; }

.section { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--alt { background: var(--c-bg-alt); }
.section--brand { background: var(--c-ocean-800); }

/* The colour-seam rules that used to live here are gone: every section now
   carries the same 100px, so a seam and a plain step are the same measurement
   and no sibling selectors are needed to tell them apart. */

/* The flush modifiers exist to delete a step, so they come last. */
.section.section--flush-top { padding-top: 0; }
.section.section--flush-bottom { padding-bottom: 0; }

/* A --flush-top section is a CONTINUATION of the one above it, not a new
   step: an intro heading and the cards, map or panel it introduces. The
   section above it therefore closes on the heading-to-cards gap rather than
   the full 100px section rhythm, which over that seam reads as a hole.
   One rule, so every continuation on the site measures the same. */
.section:has(+ .section--flush-top) { padding-bottom: var(--gap-heading-cards); }

/* ---- 4.1 Section header ------------------------------------------------
   THE single heading component. Every section heading on the site uses it,
   so the overline, the rule and every gap below a heading are identical
   everywhere by construction — not by remembering to add them.            */

.section-head { }
.section-head--center { text-align: center; margin-inline: auto; }

/* The rule is emitted by the system, so it can never be applied to some
   headings and forgotten on others. */
.section-head > :is(h1, h2, h3) + .rule,
.section-head .rule {
  display: block;
  width: 64px;
  height: 3px;
  border: 0;
  margin: var(--gap-heading-rule) 0 0;
  background: linear-gradient(90deg, var(--c-lagoon) 0%, var(--c-accent) 100%);
}
/* Must mirror the base selector's shape. `:is(h1,h2,h3)` contributes an
   element to the specificity, so the base rule scores (0,2,1); a plain
   `.section-head--center .rule` at (0,2,0) loses to it and the rule stays
   stuck to the left on every centred heading on the site. */
.section-head--center > :is(h1, h2, h3) + .rule,
.section-head--center .rule { margin-inline: auto; }

.section-head .rule + p { margin-top: var(--gap-rule-para); }
.section-head > :is(h1, h2, h3) + p { margin-top: var(--gap-heading-para); }
.section-head > p + .btn-row { margin-top: var(--gap-para-btn); }
.section-head > :is(h1, h2, h3) + .btn-row,
.section-head > .rule + .btn-row { margin-top: var(--gap-heading-btn); }

/* Heading cluster on the left, a section-level CTA on the right. Stacks on
   small screens. The heading keeps using .section-head unchanged, so its
   internal rhythm is identical to every other section. */
.section-headRow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-para-btn);
}
@media (min-width: 900px) {
  .section-headRow {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--gap-card);
  }
  .section-headRow > .btn { flex-shrink: 0; }
}

/* Standard gaps from a section header to what follows it. */
.section-head + .grid,
.section-head + .cards,
.section-head + .table-wrap,
.section-headRow + .grid,
.section-headRow + .rooms-compare { margin-top: var(--gap-heading-cards); }
.section-head + .btn-row { margin-top: var(--gap-heading-btn); }

/* ---- 4.2 Grid ---------------------------------------------------------- */
.grid { display: grid; gap: var(--gap-card); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

/* ---- 4.3 Media + copy split (REF: image one side, text the other) ------ */
.split { display: grid; gap: var(--gap-image-content); align-items: center; }

/* Stacked on a phone the gap is doing a different job: side by side it
   separates two columns, but stacked it sits between a photograph and the
   copy about that photograph, where 48px reads as a break rather than a
   pairing — a wider step than the space between the paragraphs below it.
   Halved while stacked; the full step returns with the second column. */
@media (max-width: 599px) {
  .split { gap: calc(var(--gap-image-content) / 2); }
}

/* A grid track is min-width:auto by default, so a child whose content will
   not shrink — a nowrap price, a long word — widens the track past the
   container and the whole page scrolls sideways. min-width:0 lets the column
   shrink to the container instead. */
.split > * { min-width: 0; }

/* NOTE: .split--reverse is declared in the 1024px block, not here. Reversing
   is only meaningful once the split is two columns; applied while stacked it
   pushes the photograph BELOW its copy, which is never what a stacked block
   should do — image first, then the text about it. */

/* ---- 4.4 Rhythm utilities --------------------------------------------- */
.mt-para       { margin-top: var(--gap-heading-para); }
.mt-btn        { margin-top: var(--gap-para-btn); }
.mt-cards      { margin-top: var(--gap-heading-cards); }
.mt-content    { margin-top: var(--gap-content); }
.stack > * + * { margin-top: var(--gap-para-para); }
.text-center   { text-align: center; }

/* --------------------------------------------------------------------------
   5. ACCESSIBILITY
   -------------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: calc(var(--z-modal) + 1);
  background: var(--c-ocean-800);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-size: var(--fs-small);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 0; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

@media (pointer: coarse) {
  a, button, input, select, [role="button"] { min-height: 44px; }
  .nav__list a, .btn { display: inline-flex; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   6. RESPONSIVE
   Type, page padding and section rhythm are all fluid via clamp(), so they
   need no breakpoints. Only genuine LAYOUT changes are declared here —
   grids gaining columns, splits going side by side.
   Breakpoints: 600 (tablet) / 1024 (laptop) / 1440 (desktop).
   -------------------------------------------------------------------------- */

@media (min-width: 600px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .split { grid-template-columns: 1fr 1fr; }
  .split--wideMedia { grid-template-columns: 1.15fr 1fr; }
  .split--wideCopy  { grid-template-columns: 1fr 1.15fr; }
  /* Alternation belongs to the two-column layout only — see 4.3. */
  .split--reverse > :first-child { order: 2; }
}

@media print {
  .site-header, .drawer, .drawer-scrim, .hero { display: none !important; }
  body { color: #000; background: #fff; }
}

/* --------------------------------------------------------------------------
   REF MOBILE OVERRIDE
   Measured on the reference mobile site
   https://preview.simplotel.com/6A5219DC55676A03/m/ — which uses FIXED pixel
   spacing on small screens, not fluid. Verified identical at 485px and 867px
   viewports, so these are literal values rather than vw:

     page side padding .... 30px
     section padding ...... 24px top and bottom
     H1 / H2 / H3 ......... 24 / 22 / 20   (set on the clamp floors above)
     body ................. 14px / 26px line-height

   Bounded to below our tablet breakpoint so the fluid desktop rhythm — which
   the client set at ~100px section padding — is untouched.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
  :root {
    --unit: 1.875rem;        /* 30 — page side padding   */
    --section-y: 3.125rem;   /* 50 - section top/bottom (client) */
    --section-y-root: 3.125rem; /* kept in step with --section-y */
    --section-y-lg: 3.75rem;   /* 60 - full-bleed bands */
  }
}