/* ============================================================
   Merimbula Sapphire Motel — shared design system
   Deep Sapphire Coastal. One stylesheet, every page.

   Layered for clarity:
   0  Tokens                 1  Reset & global polish
   2  Accessibility          3  Header / nav (responsive)
   4  Motion (reveal, hover) 5  Forms & inputs
   6  Components (lightbox, accordion, helpers)
   7  Responsive ladder (the real mobile experience)
   ============================================================ */

/* ── 0. Tokens ────────────────────────────────────────────── */
:root{
  /* Palette */
  --deep:#0B2A45; --deep-2:#0a2440; --sapphire:#BD5A30; --aqua:#F08A4B;
  --gold:#E0913B; --gold-hi:#EBA24A; --sand:#E7DCC8; --line:#efe7d8;
  --cream:#FAF6EF; --ink:#16212B; --slate:#3a4750; --mist:#6B7C89; --mist-2:#9FB0BD;

  /* Spacing scale (8pt-ish) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:80px; --s-10:96px;

  /* Fluid rhythm — drives section pacing + automatic mobile tightening */
  --sec-y:clamp(58px,8vw,96px);
  --gut:clamp(20px,5vw,36px);

  /* Radii */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:22px; --r-pill:999px;

  /* Shadows — soft, low-opacity, sapphire-tinted */
  --sh-sm:0 4px 14px rgba(11,42,69,.06);
  --sh-md:0 12px 30px rgba(11,42,69,.10);
  --sh-lg:0 24px 54px rgba(11,42,69,.14);
  --sh-gold:0 14px 32px rgba(224,145,59,.28);

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur:.45s;

  /* Containers */
  --maxw:1320px; --maxw-r:1080px;
}

/* ── 1. Reset & global polish ─────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:Inter,system-ui,sans-serif;background:var(--cream);color:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font-family:inherit}
::selection{background:var(--gold);color:var(--deep)}

/* Typographic finishing — applied everywhere without touching markup */
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* Smooth, consistent transitions on every interactive surface */
a,button{transition:color .25s var(--ease-soft),background-color .25s var(--ease-soft),
  border-color .25s var(--ease-soft),box-shadow .3s var(--ease-soft),transform .3s var(--ease)}

/* ── 2. Accessibility ─────────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--aqua);outline-offset:2px;border-radius:6px;
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);color:var(--deep);
  font-weight:600;padding:12px 18px;border-radius:0 0 10px 0;text-decoration:none}
.skip-link:focus{left:0}

/* ── 3. Header / nav (responsive) ─────────────────────────── */
.msm-burger{display:none}
.msm-bottombar{display:none}
.msm-drawer[hidden]{display:none}
.msm-drawer{animation:msmDrawerIn .28s var(--ease) both}
@keyframes msmDrawerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media (max-width:1040px){
  .msm-desktop-nav{display:none !important}
  .msm-desktop-cta{display:none !important}
  .msm-burger{display:flex !important}
  .msm-bottombar{display:flex !important}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .msm-bar-inner{padding-left:20px !important;padding-right:20px !important}
}
/* Bottom booking bar clears the iPhone home indicator */
.msm-bottombar{padding-bottom:calc(9px + env(safe-area-inset-bottom)) !important}

/* Rooms dropdown (desktop nav) */
.msm-nav-dd .msm-dd-panel{position:absolute;top:100%;left:-14px;min-width:268px;padding-top:14px;
  opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none;
  transition:opacity .2s var(--ease-soft),transform .22s var(--ease-soft);z-index:60}
.msm-nav-dd:hover .msm-dd-panel,.msm-nav-dd:focus-within .msm-dd-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.msm-dd-card{background:#fff;border:1px solid var(--sand);border-radius:14px;box-shadow:0 22px 50px rgba(11,42,69,.20);padding:8px}
.msm-dd-caret{transition:transform .22s var(--ease)}
.msm-nav-dd:hover .msm-dd-caret,.msm-nav-dd:focus-within .msm-dd-caret{transform:rotate(180deg)}

/* Burger → X */
#msmBurger.is-open .msm-burger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
#msmBurger.is-open .msm-burger-line:nth-child(2){opacity:0}
#msmBurger.is-open .msm-burger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── 4. Motion — cinematic but quiet ──────────────────────── */
/* Scroll-reveal: opt-in via .js-anim (added by main.js) so the site is
   fully visible without JS and respects reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .js-anim .reveal{opacity:0;transform:translateY(24px);
    transition:opacity .8s var(--ease),transform .8s var(--ease);will-change:opacity,transform}
  .js-anim .reveal.is-in{opacity:1;transform:none}
}

/* Premium image zoom on every clickable image card — pure CSS, hover devices only */
@media (hover:hover){
  a .msm-img-fill{transition:transform 1.1s var(--ease)}
  a:hover .msm-img-fill{transform:scale(1.055)}
}

/* Hero radial drift — softened amplitude; paused under reduced-motion (§ below) */
@keyframes msmDrift{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.08) translate(-1%,.8%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important}
}

/* ── 5. Forms & inputs ────────────────────────────────────── */
input[type=date],input[type=text],input[type=email],input[type=tel],select,textarea{
  transition:border-color .2s var(--ease-soft),box-shadow .2s var(--ease-soft);
}
input[type=date]:hover,select:hover{border-color:#cdbf9f !important}
input[type=date]:focus,input[type=text]:focus,input[type=email]:focus,
input[type=tel]:focus,select:focus,textarea:focus{
  border-color:var(--aqua) !important;box-shadow:0 0 0 3px rgba(240,138,75,.16);
}
/* Custom select chevron (replaces the heavy native one) */
select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236B7C89' stroke-width='1.6' stroke-linecap='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:34px !important;
}

/* Consistent button corner radius — links carrying a button radius (8/9px)
   are unified to the system's --r-sm. Image cards use larger radii (≥12px)
   and are unaffected. */
a[style*="border-radius:8px"],a[style*="border-radius:9px"]{border-radius:10px !important}

/* ── 6. Components ────────────────────────────────────────── */
.msm-img-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Soften the one heavy black shadow (map embed) to the sapphire-tinted system */
[style*="rgba(0,0,0,0.3)"]{box-shadow:0 24px 50px rgba(11,42,69,.20) !important}

/* Lightbox */
.msm-lightbox{position:fixed;inset:0;z-index:100;background:rgba(7,24,40,0.94);display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:40px;animation:msmFade .3s var(--ease) both}
@keyframes msmFade{from{opacity:0}to{opacity:1}}
.msm-lightbox[hidden]{display:none}
.msm-lb-btn{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.25);color:#FAF6EF;
  border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;
  transition:background .25s var(--ease-soft),transform .25s var(--ease)}
.msm-lb-btn:hover{background:rgba(255,255,255,0.2);transform:scale(1.06)}
.msm-lb-stage{width:min(1000px,86vw);height:min(620px,72vh);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);background:#0e2238}
.msm-lb-stage img{width:100%;height:100%;object-fit:cover}

/* Accordion */
.msm-acc-panel[hidden]{display:none}
.msm-faq-icon{transition:transform .3s var(--ease)}

/* Honeypot */
.msm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── 7. Responsive ladder — the real mobile experience ────────
   Inline styles in the generated HTML are stable and consistent, so the
   mobile pass is driven from here via the shared container signature
   (`margin:0 auto` + a `36px` side gutter) plus a few targeted values. */

/* Tablet/landscape phone */
@media (max-width:768px){
  /* Reduce the heaviest vertical section paddings.
     `*=` is a substring match, so each leading value also covers its
     trailing variants (e.g. "90px 36px" matches "90px 36px 40px"). */
  [style*="padding:90px 36px"],[style*="padding:84px 36px"],[style*="padding:80px 36px"],
  [style*="padding:74px 36px"],[style*="padding:72px 36px"],[style*="padding:70px 36px"],
  [style*="padding:64px 36px"],[style*="padding:60px 36px"],[style*="padding:56px 36px"],
  [style*="padding:44px 36px 80px"]{
    padding-top:clamp(52px,9vw,72px) !important;padding-bottom:clamp(52px,9vw,72px) !important;
  }
  /* Vertical gaps between stacked feature rows */
  [style*="gap:68px"],[style*="gap:72px"]{gap:clamp(40px,7vw,56px) !important}
}

/* Thumb-friendly tap targets — secondary controls reach 44px+ on touch sizes */
@media (max-width:768px){
  [data-filter],[data-faqcat],.msm-book-room{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  select,input[type=date],input[type=text],input[type=email],input[type=tel]{min-height:46px}
}

/* Phones */
@media (max-width:600px){
  /* Universal side gutter: every centred container drops to a comfortable 20px */
  [style*="margin:0 auto"][style*="36px"]{padding-left:20px !important;padding-right:20px !important}

  /* Hero: tighter, never letterboxed, bottom CTA clears the availability bar */
  [style*="min-height:84vh"]{min-height:78vh !important;max-height:none !important}
  [style*="padding:0 36px 92px"]{padding-bottom:64px !important}

  /* Welcome mosaic + tall media reflow gracefully */
  [style*="grid-template-rows:160px 160px"]{grid-template-rows:130px 130px !important}
  [style*="height:420px"]{height:clamp(240px,60vw,360px) !important}
  [style*="height:460px"]{height:clamp(260px,64vw,360px) !important}
  [style*="height:360px"]{height:clamp(220px,58vw,340px) !important}
  [style*="height:340px"]{height:clamp(220px,56vw,330px) !important}
  [style*="height:300px"][style*="border-radius:16px"]{height:clamp(200px,52vw,280px) !important}

  /* Room-detail sticky aside flows inline once stacked */
  [style*="top:108px"]{position:static !important;max-width:none !important}

  /* Padded dark panels (rooms accessible / facilities good-to-know) breathe less */
  [style*="padding:46px 50px"]{padding:30px 24px !important}
  [style*="padding:clamp(34px,5vw,48px) clamp(28px,5vw,52px)"]{padding:30px 24px !important}

  /* Headings: rein in the largest clamps a touch on small screens */
  h1{letter-spacing:-.02em}

  /* Make the in-bar booking CTA full-width when the form wraps */
  .msm-av-go{width:100% !important;text-align:center !important}
}

/* Small phones */
@media (max-width:380px){
  [style*="margin:0 auto"][style*="36px"]{padding-left:16px !important;padding-right:16px !important}
}