/* ============================================================================
   Sydney Stay — in-stay guides
   ============================================================================

   The guides now share the booking page's aesthetic. Previously they carried a
   purple/blue gradient from the older site, so a guest crossed a visible seam
   between sydneystay.com.au and sydneystay.com.au/frederick.

   THE HTML WAS NOT TOUCHED. Every class below is one the guides already use,
   restyled in place, so all the data-i18n attributes and the EN/KO/ZH
   switching are exactly as they were. Restyling is a stylesheet job; rewriting
   eight pages of markup to change their colours would have risked the content
   for nothing.

   NO WEBFONTS, and that is not an aesthetic choice. A meaningful share of
   these guests browse from mainland China, where fonts.googleapis.com is
   blocked, and a blocked font request is a page that renders late or wrong.
   The stack resolves to SF Pro on iOS, Roboto on Android, Segoe UI on Windows,
   with the CJK families appended so Chinese and Korean render properly on the
   devices they are aimed at. Same reason the photo lightbox is self-hosted
   rather than pulled from a CDN.
   ========================================================================== */

:root{
  --ink:#131C18;
  --wash:#D9E0D2;
  --paper:#FAF9F5;
  --sage:#7C8B76;
  --red:#A8382C;
  --tag:#E8E4D8;
  --rail:#2A3630;

  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,
         "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",
         "Malgun Gothic",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,
         "Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* Nothing wider than the viewport — the same three causes fixed on the booking
   page. overflow-x:hidden is deliberately not used: it hides an overflow
   rather than removing it, so the next one is invisible too. */
img,svg,video,canvas{max-width:100%;height:auto}
nav ul > *,.image-grid > *,.quick-links > *{min-width:0}
p,li,h1,h2,h3,h4,dd,dt{overflow-wrap:break-word}

body{
  margin:0;background:var(--wash);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--sans);letter-spacing:-.02em}

/* ---------- masthead ----------
   Was a purple gradient band. Now the booking page's rule: a wordmark over a
   2px ink underline. The type scales with clamp() from 320px up — the booking
   page's H1 had a fixed floor that overflowed on a real phone, and this
   avoids repeating it. */
header{max-width:720px;margin:0 auto;padding:24px 22px 0}
header h1{margin:0;font-weight:800;font-size:clamp(24px,6.5vw,34px);
  letter-spacing:-.03em;line-height:1.1}
header p{margin:6px 0 0;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--rail)}

/* ---------- nav ----------
   Was blue pills on white. Now a quiet rail of links with the current page
   marked by weight and an underline rather than a filled block. */
nav{max-width:720px;margin:0 auto;padding:14px 22px 0;
  border-bottom:2px solid var(--ink)}
nav.nav-hidden{display:none}
nav ul{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;
  list-style:none;margin:12px 0 0;padding:0 0 10px}
nav li{margin:0}
nav a{display:inline-block;padding:9px 0;min-height:44px;line-height:26px;
  font-size:15.5px;font-weight:600;color:var(--rail);text-decoration:none;
  border-bottom:2px solid transparent}
nav a:hover{color:var(--ink);border-bottom-color:var(--sage)}
nav a:focus-visible{outline:3px solid var(--red);outline-offset:2px}
nav a.active{color:var(--ink);border-bottom-color:var(--red)}

.language-switcher{margin:0}
.language-switcher select{font:inherit;font-size:16px;padding:8px 10px;
  min-height:44px;border:1.5px solid var(--rail);border-radius:3px;
  background:var(--paper);color:var(--ink)}
.language-switcher select:hover{border-color:var(--ink)}
.language-switcher select:focus-visible{outline:3px solid var(--red);outline-offset:1px}

/* A guide should not be a dead end. The one filled button on the page, so it
   reads as the way back to booking rather than another nav item. */
.book-link{margin-left:auto}
.book-link a{padding:10px 18px;border-radius:3px;font-weight:700;
  background:var(--rail);color:var(--paper);border:1.5px solid var(--rail)}
.book-link a:hover{background:var(--red);border-color:var(--red);color:var(--paper)}

/* ---------- layout ---------- */
main{max-width:720px;margin:0 auto;padding:0 22px 60px}
section{padding:34px 0 0}
section h2{margin:0 0 4px;font-weight:800;font-size:clamp(22px,5.5vw,28px);
  letter-spacing:-.03em;padding-bottom:10px;border-bottom:1.5px solid var(--sage)}

/* ---------- cards ----------
   Was white boxes with drop shadows and hover lift. Now the booking page's
   card: the tag colour, a 1.5px rail border, no shadow. Flat because the
   booking page is flat. */
.info-card,.location-card,.activity-card,.extras-card,.welcome-card{
  background:var(--tag);border:1.5px solid var(--rail);border-radius:4px;
  padding:18px 18px 16px;margin:18px 0 0}
.info-card:hover,.location-card:hover,.activity-card:hover,.extras-card:hover{
  /* No lift. The old sheet animated a translate on hover, which on a touch
     device fires on tap and reads as the page flinching. */
  border-color:var(--ink)}
.info-card h3,.location-card h3,.activity-card h3,.extras-card h3,.welcome-card h3{
  margin:0 0 10px;font-size:19px;font-weight:800;letter-spacing:-.02em;
  padding-left:11px;border-left:3px solid var(--red)}
.info-card h4,.location-card h4,.activity-card h4,.extras-card h4{
  margin:20px 0 8px;font-size:16.5px;font-weight:700;letter-spacing:-.01em;
  padding-bottom:7px;border-bottom:1px solid rgba(19,28,24,.16)}
.info-card p,.location-card p,.activity-card p,.extras-card p,.welcome-card p{
  margin:0 0 10px;font-size:16px;line-height:1.55;color:var(--rail)}
.info-card ul,.location-card ul,.activity-card ul,.extras-card ul{
  margin:0 0 10px;padding:0;list-style:none}
.info-card li,.location-card li,.activity-card li,.extras-card li{
  position:relative;margin:0 0 7px;padding-left:17px;font-size:15.5px;
  line-height:1.5;color:var(--rail)}
.info-card li:before,.location-card li:before,.activity-card li:before,
.extras-card li:before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--sage)}
.info-card li:last-child,.location-card li:last-child,
.activity-card li:last-child,.extras-card li:last-child{margin-bottom:0}

/* ---------- home page ---------- */
.welcome-section{padding-top:30px}
.quick-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:14px;margin:18px 0 0}
.link-card{background:var(--paper);border:1.5px solid var(--sage);
  border-radius:4px;padding:16px}
.link-card:hover{border-color:var(--rail)}
.link-card h4{margin:0 0 6px;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.link-card h4 a{text-decoration:none;color:var(--ink)}
.link-card h4 a:hover{color:var(--red);text-decoration:underline}
.link-card p{margin:0;font-size:15px;color:var(--rail)}

.intro-text{font-size:17px;color:var(--rail);margin:0 0 14px}

/* Emergency information is the one place on these pages where the colour is
   doing a job rather than decorating, so it keeps the red. */
.emergency-info{background:var(--paper);border:1.5px solid var(--red);
  border-left-width:4px;border-radius:4px;padding:16px 18px;margin:18px 0 0}
.emergency-info h3{margin:0 0 8px;font-size:17px;font-weight:800;color:var(--red)}
.emergency-info p{margin:0 0 6px;font-size:16px;color:var(--ink)}

.booking-info{margin:18px 0 0}
.booking-info h3{margin:0 0 10px;font-size:19px;font-weight:800;letter-spacing:-.02em}
.booking-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:14px}
.method{background:var(--tag);border:1.5px solid var(--rail);border-radius:4px;padding:15px}
.method h4{margin:0 0 6px;font-size:16px;font-weight:700}

/* ---------- photographs ----------
   The grid alternates a caption and a photo, so it stays a simple responsive
   grid and the captions flow with the images they describe. */
.image-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:14px 16px;align-items:start;margin:14px 0 0}
.image-grid p{margin:0;font-size:15.5px;line-height:1.5;color:var(--rail)}
.image-grid a{display:block;line-height:0}
/* Capped, and CONTAIN rather than cover. These are instruction photographs --
   a red circle round a lockbox dial, a specific shelf in a fridge -- and
   cropping to fill a tidy box is exactly how you lose the thing the picture
   was taken to show. Letterboxing against the page colour is the lesser
   evil. Without a cap, portrait phone photos made every row enormous and left
   the captions stranded in whitespace. */
.clickable-image{width:100%;height:auto;max-height:340px;object-fit:contain;
  display:block;border-radius:3px;border:1.5px solid var(--rail);
  background:var(--wash);cursor:zoom-in}
.clickable-image:hover{border-color:var(--red)}
.image-grid a:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ---------- footer ---------- */
footer{max-width:720px;margin:0 auto;padding:22px;border-top:1.5px solid var(--sage);
  text-align:center}
footer p{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--rail)}

.contact-info{margin:14px 0 0}
.contact-info h3{margin:0 0 6px;font-size:17px;font-weight:800}
.contact-info p{margin:0 0 4px;font-size:15.5px;color:var(--rail)}

/* The old sheet's hand-rolled .modal is dead: the lightbox below is a
   <dialog>. Kept out of the stylesheet entirely rather than left as rules
   nothing matches. */

/* ---------------------------------------------------------------------------
   Guide photo lightbox. Self-hosted; replaces glightbox, which was pulled from
   cdn.jsdelivr.net and is blocked in mainland China -- the photo viewer simply
   did not open for a large share of the guests who need these pages.
   See assets/js/guide-lightbox.js.
   --------------------------------------------------------------------------- */
.glb{border:0;padding:0;background:transparent;width:100%;height:100%;
  max-width:100vw;max-height:100vh}
.glb::backdrop{background:rgba(9,14,11,.92)}
/* The panel carries its own opaque ground rather than trusting ::backdrop,
   which some mobile browsers do not paint. */
.glbwrap{display:flex;flex-direction:column;height:100%;padding:14px;gap:10px;
  background:rgba(9,14,11,.96)}
.glbtop{display:flex;align-items:center;gap:12px;color:var(--paper);flex:0 0 auto}
.glbcount{font-family:var(--mono);font-size:12px;opacity:.75}
.glbx{margin-left:auto;background:transparent;border:1.5px solid rgba(250,249,245,.5);
  color:var(--paper);border-radius:3px;font:inherit;font-size:15px;min-height:44px;
  min-width:44px;padding:8px 14px;cursor:pointer}
.glbx:hover{background:rgba(250,249,245,.14)}
.glbstage{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  min-height:0;position:relative}
.glbstage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:3px}
.glbnav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;
  border-radius:50%;border:1.5px solid rgba(250,249,245,.5);
  background:rgba(9,14,11,.55);color:var(--paper);font-size:24px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.glbnav:hover{background:rgba(9,14,11,.85)}
.glbnav[disabled]{opacity:.28;cursor:default}
.glbprev{left:2px}
.glbnext{right:2px}

/* ---------- narrow ----------
   One breakpoint, not three. The layout above is fluid — clamp() type, grids
   that collapse on their own — so the old sheet's 768/480 pair had almost
   nothing left to do. This handles the one thing that does not fall out
   automatically: the nav wrapping onto its own lines. */
@media (max-width:560px){
  nav ul{gap:2px 16px}
  nav a{font-size:15px}
  .book-link{margin-left:0;width:100%}
  .book-link a{display:block;text-align:center;margin-top:6px}
  .info-card,.location-card,.activity-card,.extras-card,.welcome-card{
    padding:15px 15px 13px}
  .glbnav{width:44px;height:44px;font-size:20px}
}