/* ============================================================
   Merimbula Coastline Motel — shared design system
   Relaxed Beach House. Extracted from the Claude Design export
   and hardened for production (one stylesheet, every page links it).
   ============================================================ */

:root{
  --sand:#F7F1E6;        /* page base            */
  --warm-white:#FFFDF8;  /* cards                */
  --driftwood:#E3D8C5;   /* borders / hairlines  */
  --timber:#B98A5E;      /* warm accent          */
  --timber-deep:#6B4F36; /* warm text            */
  --ocean:#2E6E73;       /* primary accent / CTA */
  --ocean-deep:#214F53;  /* hover                */
  --sapphire:#1E5A78;    /* small pops           */
  --clay:#C9714E;        /* micro-accent         */
  --ink:#2C2722;         /* body text            */
  --muted:#6E665B;       /* muted text           */
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1200px;
  --header-h:74px;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--sand);
  font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);
  -webkit-font-smoothing:antialiased;font-optical-sizing:auto;text-rendering:optimizeLegibility;
}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--ocean);outline-offset:3px;border-radius:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;background:var(--ocean);color:#fff;
  padding:10px 18px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0}

/* ---------- reveal + grain (from export) ---------- */
.reveal-armed{opacity:0;transform:translateY(28px)}
.reveal-armed.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.grain{position:relative}
.grain:before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){
  .reveal-armed{opacity:1 !important;transform:none !important}
}
/* image hover zoom inside links (replaces a:hover image-slot) */
@media (prefers-reduced-motion: no-preference){
  a .dc-img{transition:transform .7s var(--ease)}
  a:hover .dc-img{transform:scale(1.06)}
}

/* ============================================================
   HEADER  (transparent over hero → solid on scroll)
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;gap:30px;
  height:var(--header-h);padding:0 clamp(20px,4vw,52px);
  font-family:'Hanken Grotesk',sans-serif;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
}
.site-header.is-solid{
  background:rgba(255,253,248,.92);
  -webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(227,216,197,.8);
  box-shadow:0 8px 30px -22px rgba(107,79,54,.5);
}
/* logo */
.hdr-logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.hdr-mark{flex:none;margin-top:2px}
.hdr-mark .w1{stroke:#FFFDF8}
.hdr-mark .w2{stroke:rgba(255,253,248,.55)}
.is-solid .hdr-mark .w1{stroke:var(--ocean)}
.is-solid .hdr-mark .w2{stroke:var(--timber)}
.hdr-word{display:flex;flex-direction:column;line-height:1}
.hdr-name{font-family:'Fraunces',serif;font-weight:600;font-size:21px;letter-spacing:-.01em;color:#FFFDF8;transition:color .4s var(--ease)}
.hdr-sub{font-weight:600;font-size:10px;letter-spacing:.42em;margin-top:4px;color:rgba(255,253,248,.78);transition:color .4s var(--ease)}
.is-solid .hdr-name{color:var(--ink)}
.is-solid .hdr-sub{color:var(--timber)}
/* nav */
.hdr-nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.hdr-nav a{
  font-weight:500;font-size:14.5px;letter-spacing:.01em;text-decoration:none;white-space:nowrap;
  color:rgba(255,253,248,.82);padding-bottom:4px;border-bottom:1.5px solid transparent;transition:color .3s var(--ease)
}
.is-solid .hdr-nav a{color:#5A5249}
.hdr-nav a:hover{color:#FFFDF8}
.is-solid .hdr-nav a:hover{color:var(--ocean)}
.hdr-nav a.active{color:#FFFDF8;border-bottom-color:#FFFDF8;font-weight:600}
.is-solid .hdr-nav a.active{color:var(--ocean);border-bottom-color:var(--ocean)}
/* cta */
.hdr-cta{display:flex;align-items:center;gap:14px}
.hdr-phone{font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap;color:#FFFDF8;transition:color .4s var(--ease)}
.is-solid .hdr-phone{color:var(--ink)}
.btn-book{
  font-weight:600;font-size:14.5px;letter-spacing:.01em;color:#FFFDF8;background:var(--ocean);
  padding:11px 24px;border-radius:100px;text-decoration:none;white-space:nowrap;
  box-shadow:0 6px 18px -8px rgba(33,79,83,.4);transition:background .35s var(--ease),transform .35s var(--ease)
}
.btn-book:hover{background:var(--ocean-deep);transform:translateY(-1px)}
/* burger */
.hdr-burger{display:none;margin-left:auto;width:44px;height:44px;border:none;background:transparent;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.hdr-burger span{display:block;width:23px;height:2px;border-radius:2px;background:#FFFDF8;transition:background .4s var(--ease)}
.hdr-burger span:last-child{width:16px}
.is-solid .hdr-burger span{background:var(--ink)}

/* drawer */
.nav-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(86vw,360px);z-index:1101;background:var(--sand);
  box-shadow:-20px 0 60px -30px rgba(44,39,34,.5);transform:translateX(105%);
  transition:transform .45s var(--ease);overflow-y:auto
}
.nav-drawer.open{transform:translateX(0)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:22px 24px;border-bottom:1px solid var(--driftwood)}
.drawer-top span{font-family:'Fraunces',serif;font-weight:600;font-size:20px;color:var(--ink)}
.drawer-close{width:42px;height:42px;border:1px solid var(--driftwood);border-radius:100px;background:var(--warm-white);cursor:pointer;font-size:20px;color:var(--timber-deep);line-height:1}
.drawer-nav{display:flex;flex-direction:column;padding:14px 24px 28px}
.drawer-nav a{font-family:'Fraunces',serif;font-weight:500;font-size:24px;text-decoration:none;color:var(--ink);padding:13px 0;border-bottom:1px solid #EFE7D8}
.drawer-nav a.active{font-weight:600;color:var(--ocean)}
.drawer-cta{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.drawer-cta .call{font-weight:600;font-size:16px;text-align:center;color:var(--ocean);background:var(--warm-white);border:1.5px solid var(--ocean);padding:15px;border-radius:100px;text-decoration:none}
.drawer-cta .book{font-weight:600;font-size:16px;text-align:center;color:#FFFDF8;background:var(--ocean);padding:16px;border-radius:100px;text-decoration:none}
.scrim{position:fixed;inset:0;z-index:1100;background:rgba(28,24,20,.42);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.scrim.open{opacity:1;visibility:visible}

/* mobile bottom bar */
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:999;grid-template-columns:1fr 1fr;gap:1px;background:var(--driftwood);border-top:1px solid var(--driftwood);font-family:'Hanken Grotesk',sans-serif}
.mobile-bar a{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px;font-weight:600;font-size:15.5px;text-decoration:none}
.mobile-bar .call{background:var(--warm-white);color:var(--ocean)}
.mobile-bar .book{background:var(--ocean);color:#FFFDF8}

@media (max-width:920px){
  .hdr-nav,.hdr-cta{display:none !important}
  .hdr-burger{display:flex !important}
  .mobile-bar{display:grid !important}
  body{padding-bottom:54px}
}

/* ============================================================
   FOOTER
   ============================================================ */
.mcm-foot-grid{display:grid;grid-template-columns:1.5fr 1.2fr 1fr 1.1fr;gap:48px;padding-bottom:48px}
@media (max-width:880px){.mcm-foot-grid{grid-template-columns:1fr 1fr !important}}
@media (max-width:540px){.mcm-foot-grid{grid-template-columns:1fr !important;gap:36px !important}}

/* ============================================================
   GALLERY LIGHTBOX
   ============================================================ */
.lightbox{display:none;position:fixed;inset:0;z-index:1200;background:rgba(26,22,18,.92);align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:84vh;border-radius:14px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.lb-btn{position:absolute;background:rgba(255,253,248,.12);border:1px solid rgba(255,253,248,.3);color:#FFFDF8;width:52px;height:52px;border-radius:100px;font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s var(--ease)}
.lb-btn:hover{background:rgba(255,253,248,.24)}
.lb-close{top:20px;right:20px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
.lb-meta{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#F2EADB;font-family:'Hanken Grotesk',sans-serif}
.lb-cap{font-size:15px;margin:0 0 4px}
.lb-count{font-size:13px;color:rgba(242,234,219,.6)}
@media (max-width:560px){.lb-btn{width:44px;height:44px}}

/* swappable placeholder imagery (clearly intentional, not broken) */
.dc-img{display:block;object-fit:cover}
img.placeholder{background:linear-gradient(150deg,#cfe0dd,#e7dcc8);}

/* form success / error states */
.form-msg{display:none;border-radius:12px;padding:14px 16px;font-size:14.5px;margin-top:14px}
.form-msg.show{display:block}
.form-msg.ok{background:#E7F1EC;color:#1f5b46;border:1px solid #bcdac9}
.form-msg.err{background:#FBEBE4;color:#9a3c1e;border:1px solid #f0cbbb}
.field-invalid{border-color:var(--clay) !important;box-shadow:0 0 0 3px rgba(201,113,78,.14) !important}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   LUXURY REFINEMENT LAYER
   Global, system-level polish that cascades to every page.
   Designed to lift perceived quality without altering the
   approved layout (no aggressive overrides of inline styles).
   ============================================================ */

/* --- foundational --- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-kerning:normal}
img,svg,video,iframe{vertical-align:middle}
iframe{max-width:100%}
*{min-width:0}                       /* prevents fl/grid children overflowing on mobile */
::selection{background:rgba(46,110,115,.16);color:var(--ink)}
button,a,summary{-webkit-tap-highlight-color:transparent}

/* --- typography: elegant line-breaking + Fraunces ligatures everywhere --- */
h1,h2,h3,h4{text-wrap:balance}
p,li,blockquote{text-wrap:pretty}
[style*="Fraunces"]{font-optical-sizing:auto;font-feature-settings:"liga" 1,"calt" 1}

/* --- calmer, more expensive grain --- */
.grain:before{opacity:.2}

/* --- refined focus --- */
:focus-visible{outline:2px solid var(--ocean);outline-offset:3px}

/* --- premium custom scrollbar (fine pointers only) --- */
@media (pointer:fine){
  html{scrollbar-width:thin;scrollbar-color:#D9CDB8 transparent}
  ::-webkit-scrollbar{width:11px;height:11px}
  ::-webkit-scrollbar-thumb{background:#DcceB8;border-radius:100px;border:3px solid var(--sand)}
  ::-webkit-scrollbar-thumb:hover{background:var(--timber)}
}

/* --- header: softer, slower, more refined --- */
.site-header{transition:background .5s var(--ease),backdrop-filter .5s var(--ease),-webkit-backdrop-filter .5s var(--ease),border-color .5s var(--ease),box-shadow .5s var(--ease)}
.site-header.is-solid{box-shadow:0 10px 40px -28px rgba(107,79,54,.5)}
.btn-book{letter-spacing:.02em}
.btn-book:active{transform:translateY(0)}

/* --- footer links: gentle premium hover (were static) --- */
.mcm-foot-grid a[style]{transition:color .3s var(--ease),opacity .3s var(--ease)}
.mcm-foot-grid a[style]:hover{color:#FFFDF8 !important}

/* --- drawer + lightbox refinement --- */
.nav-drawer{box-shadow:-30px 0 80px -40px rgba(44,39,34,.6)}
.lightbox{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.reveal-armed{transform:translateY(22px)}

/* --- images: warm tone while loading (no flash of empty) --- */
.dc-img{background:#ece3d2}

/* ============================================================
   MOBILE EXPERIENCE — premium, native-like
   ============================================================ */
.mobile-bar{box-shadow:0 -10px 28px -18px rgba(44,39,34,.5);padding-bottom:env(safe-area-inset-bottom,0)}
.mobile-bar a{letter-spacing:.01em;min-height:54px}
.nav-drawer{padding-bottom:env(safe-area-inset-bottom,0)}
@media (max-width:920px){
  body{padding-bottom:calc(54px + env(safe-area-inset-bottom,0))}
}
@media (max-width:600px){
  :root{--header-h:64px}
  .site-header{height:64px;padding:0 18px}
  .hdr-burger{width:46px;height:46px}
}

/* --- respect reduced-motion globally (accessibility + restraint) --- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}