/* ============================================================
   Roselands Pool House Sydney — site stylesheet
   One file, no framework. Change the tokens below and the whole
   site follows.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  --navy:#003B95;         /* header bar, score badges */
  --navy-deep:#002A6B;
  --cta:#0071C2;          /* primary buttons and links */
  --cta-hover:#00558F;
  --gold:#FEBB02;         /* stars and highlights */
  --green:#008009;        /* positives: free parking, included */
  --green-soft:#E7F6E7;

  --paper:#FFFFFF;        /* page background */
  --surface:#FFFFFF;      /* cards and boxed elements */
  --surface-2:#F2F6FA;    /* tinted fills, image placeholders, form */
  --ink:#1A1A1A;
  --ink-2:#595959;
  --line:#E7E7E7;
  --line-soft:#EFEFEF;

  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-lg:0 2px 8px rgba(0,0,0,.12);
  --radius:.25rem;        /* 4px — Booking-tight corners */
  --radius-lg:.5rem;
  --radius-btn:.25rem;
  --wrap:1120px;

  color-scheme: light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --navy:#001E4D; --navy-deep:#00163A;
    --cta:#4FA3E3; --cta-hover:#79BDEF;
    --gold:#FFC93D; --green:#4CC552; --green-soft:#12301A;
    --paper:#101419; --surface:#171B22; --surface-2:#1B2029;
    --ink:#E9EDF2; --ink-2:#A3ADB8; --line:#2A313B; --line-soft:#232A33;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow-lg:0 2px 10px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --navy:#001E4D; --navy-deep:#00163A;
  --cta:#4FA3E3; --cta-hover:#79BDEF;
  --gold:#FFC93D; --green:#4CC552; --green-soft:#12301A;
  --paper:#0E1116; --surface:#171B22; --surface-2:#1E242D;
  --ink:#E9EDF2; --ink-2:#A3ADB8; --line:#2A313B; --line-soft:#232A33;
  color-scheme: dark;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:inherit;font-weight:700;line-height:1.22;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(1.6rem,3vw,2.1rem)}
h2{font-size:clamp(1.25rem,2vw,1.5rem)}
h3{font-size:1.1rem}
h4{font-size:.95rem}
p{margin:0 0 1em}
a{color:inherit}
.lede a,.prose a,.faq a,p a{color:var(--cta);text-decoration:none}
.lede a:hover,p a:hover{text-decoration:underline}
img{display:block;max-width:100%}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--cta);outline-offset:2px;border-radius:2px}

.wrap{width:min(var(--wrap),100% - 1.5rem);margin-inline:auto}
/* A white page, with sections separated by a hairline — the way a property
   page reads — rather than panels floating on grey. */
.section{padding:clamp(1.75rem,3.5vw,2.5rem) 0;background:transparent;border-top:1px solid var(--line)}
.section > .wrap{background:transparent;border:0;padding:0}
.section--tint{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.hero + .section{border-top:0}
.lede{font-size:1rem;line-height:1.6;color:var(--ink-2);max-width:66ch}
.muted{color:var(--ink-2)}
.small{font-size:.82rem}
.center{text-align:center}
.measure{max-width:66ch}

/* ---------- 3. Buttons and badges ---------- */
.btn{
  display:inline-block;border:0;cursor:pointer;text-decoration:none;
  padding:.7rem 1.25rem;border-radius:var(--radius-btn);
  font-weight:700;font-size:.95rem;line-height:1.3;
  transition:background-color .15s ease, border-color .15s ease;
}
.btn--primary{background:var(--cta);color:#fff}
.btn--primary:hover{background:var(--cta-hover)}
.btn--ghost{background:var(--surface);border:1px solid var(--cta);color:var(--cta)}
.btn--ghost:hover{background:#F0F6FB}
.btn--block{display:block;width:100%;text-align:center}
.btn--sm{padding:.5rem 1rem;font-size:.88rem}

.pill{
  display:inline-flex;align-items:center;gap:.35rem;border-radius:var(--radius);
  padding:.25rem .6rem;font-size:.78rem;font-weight:700;
  background:var(--green-soft);color:var(--green);border:0;
}
.pill--aqua{background:#EBF3FF;color:var(--navy)}

/* score badge, the Booking-style navy square */
.score{
  display:inline-grid;place-items:center;min-width:2.25rem;height:2.25rem;padding:0 .4rem;
  background:var(--navy);color:#fff;font-weight:700;font-size:1rem;
  border-radius:var(--radius) var(--radius) var(--radius) 0;
}

/* ---------- 4. Header and nav ---------- */
.site-header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  background:var(--navy);border-bottom:0;box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem 0;background:transparent;border:0}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;flex:none;color:#fff}
.brand__mark{display:grid;place-items:center;height:2rem;width:2rem;color:#fff;flex:none}
.brand__name{font-weight:800;font-size:1.02rem;line-height:1.2;display:block;color:#fff;letter-spacing:-.02em}
.brand__place{font-size:.74rem;color:#C7D8F2;display:block;font-weight:500}
.nav{display:flex;gap:1.25rem;font-size:.92rem;font-weight:600;color:#fff}
.nav a{text-decoration:none;padding:.35rem .6rem;border-radius:var(--radius)}
.nav a:hover{background:rgba(255,255,255,.14)}
.nav a[aria-current="page"]{background:rgba(255,255,255,.2)}

/* the hamburger, shown only on narrow screens */
.nav-toggle{
  display:none;align-items:center;justify-content:center;gap:.45rem;
  background:transparent;border:1px solid rgba(255,255,255,.45);color:#fff;
  border-radius:var(--radius);padding:.5rem .7rem;cursor:pointer;font:inherit;
}
.nav-toggle:hover{background:rgba(255,255,255,.14)}
.nav-toggle svg{width:1.1rem;height:1.1rem}

@media (max-width:859px){
  .nav-toggle{display:inline-flex}
  /* the links drop below the bar instead of disappearing */
  .nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;gap:0;background:var(--navy);
    border-top:1px solid rgba(255,255,255,.18);
    padding:.4rem .75rem .75rem;z-index:41;
    box-shadow:0 8px 16px rgba(0,0,0,.25);
  }
  .site-header[data-nav-open] .nav{display:flex}
  .nav a{padding:.75rem .6rem;border-radius:0;border-bottom:1px solid rgba(255,255,255,.12)}
  .nav a:last-child{border-bottom:0}
  .site-header .wrap{position:relative}
}
.site-header .btn--primary{background:var(--cta)}
.site-header .btn--primary:hover{background:#1A86D6}

/* ---------- 5. Image frames ---------- */
.frame{
  position:relative;overflow:hidden;background:var(--surface-2);
  border-radius:var(--radius);aspect-ratio:4/3;
}
.frame::after{
  content:attr(data-label);position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;padding:1rem;text-align:center;
  font-size:.74rem;color:var(--ink-2);
}
.frame img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.frame img[data-failed]{display:none}
.frame--tall{aspect-ratio:3/4}
.frame--wide{aspect-ratio:16/10}
.frame--round{border-radius:var(--radius-lg)}
.frame--zoom{cursor:pointer}
.frame--zoom img{transition:transform .25s ease}
.frame--zoom:hover img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){ .frame--zoom img{transition:none} .frame--zoom:hover img{transform:none} }

figure{margin:0}
figcaption{font-size:.8rem;color:var(--ink-2);padding-top:.35rem;line-height:1.35}

/* ---------- 6. Grids ---------- */
.grid{display:grid;gap:1rem}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
.grid--photos{gap:.4rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}

.mosaic{display:grid;gap:.25rem;grid-template-columns:repeat(2,1fr);
        border-radius:var(--radius);overflow:hidden}
.mosaic .frame{border-radius:0}
@media (min-width:760px){
  .mosaic{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);height:clamp(19rem,36vw,26rem)}
  .mosaic .frame{aspect-ratio:auto;height:100%}
  .mosaic .frame:first-child{grid-column:span 2;grid-row:span 2}
}

/* ---------- 7. Hero ---------- */
/* A deep blue band, the way a booking site opens. */
.hero{
  position:relative;overflow:hidden;border:0;padding:0;
  background:linear-gradient(170deg, var(--navy) 0%, #0059B8 55%, #0F86D0 100%);
  color:#fff;
}
.hero::after{
  content:"";position:absolute;inset:auto 0 0 0;height:4rem;
  background:linear-gradient(90deg, var(--gold), #FFD866);
  clip-path:polygon(0 100%,100% 100%,100% 38%,0 72%);
  opacity:.18;pointer-events:none;
}
.hero > .wrap{background:transparent;border:0;padding:0}
.hero__inner{display:grid;gap:1.75rem;align-items:center;padding:clamp(1.75rem,4vw,2.75rem) 0;position:relative;z-index:1}
@media (min-width:980px){ .hero__inner{grid-template-columns:1.05fr 1fr;gap:2.5rem} }
.hero h1{margin:.85rem 0 .6rem;max-width:19ch;color:#fff}
.hero .lede{color:#D9E7F8}
.hero .pill{background:var(--gold);color:#1A1A1A}
.hero .btn--ghost{background:transparent;border-color:#fff;color:#fff}
.hero .btn--ghost:hover{background:rgba(255,255,255,.14)}
.hero__media{position:relative}
.hero__card{
  position:absolute;left:.75rem;right:.75rem;bottom:.75rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:.8rem .9rem;box-shadow:var(--shadow-lg);color:var(--ink);
}
@media (min-width:640px){ .hero__card{left:auto;right:.75rem;width:16rem} }
.hero__card p{margin:0}
.wave{display:none}

.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;max-width:30rem;
       margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.25)}
.facts dt{font-size:.76rem;color:#C7D8F2}
.facts dd{margin:.1rem 0 0;font-size:1.1rem;font-weight:700;color:#fff}

/* ---------- 8. Cards and features ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem}
.card--flat{background:var(--surface-2);border-color:transparent}
.card--photo{padding:0;overflow:hidden;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius)}
.card--photo .frame{border-radius:0}
.card--photo .card__body{padding:.85rem .9rem 1rem}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}

.feature__icon,
.feature__icon--aqua,.feature__icon--coral,.feature__icon--sun,.feature__icon--leaf{
  display:grid;place-items:center;height:2.25rem;width:2.25rem;border-radius:var(--radius);
  background:#EBF3FF;color:var(--navy);
}
.feature__icon--coral{background:var(--green-soft);color:var(--green)}
.feature__icon--sun{background:#FFF6DB;color:#8A6200}
.feature h3{margin:.7rem 0 .3rem;font-size:1rem}
.feature p{margin:0;font-size:.9rem;color:var(--ink-2)}

.room{display:grid;gap:1.25rem;align-items:center}
@media (min-width:980px){
  .room{grid-template-columns:1fr 1fr;gap:2.5rem}
  .room--flip .room__media{order:2}
}
.room + .room{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--line)}

/* ---------- 9. Checklists ---------- */
.checks li{display:flex;gap:.6rem;align-items:flex-start;padding:.35rem 0;font-size:.92rem}
.tick{
  display:grid;place-items:center;height:1.1rem;width:1.1rem;flex:none;margin-top:.2rem;
  border-radius:999px;background:transparent;color:var(--green);
}
.tick svg{width:1.05rem;height:1.05rem}
.amenity-group h4{padding-bottom:.5rem;margin-bottom:.3rem;border-bottom:2px solid var(--navy)}

/* ---------- 10. Distance list ---------- */
.distances li{display:flex;gap:1rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--line-soft);font-size:.92rem}
.distances li span:last-child{margin-left:auto;white-space:nowrap;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---------- 11. Reviews ---------- */
.review{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem}
.stars{display:flex;gap:.05rem;color:var(--gold)}
.stars svg{width:.9rem;height:.9rem}
.review blockquote{margin:.55rem 0 0;font-style:normal;font-size:.93rem;line-height:1.55;color:var(--ink)}
.review figcaption{padding-top:.7rem;font-weight:700;font-size:.85rem;color:var(--ink)}

/* ---------- 12. Forms ---------- */
.form{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem}
.form__grid{display:grid;gap:.85rem}
@media (min-width:560px){ .form__grid{grid-template-columns:1fr 1fr} .form__grid .span-2{grid-column:span 2} }
.field{display:block}
.field > span{display:block;font-size:.8rem;font-weight:700;margin-bottom:.25rem;color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%;padding:.65rem .75rem;border:1px solid #BDBDBD;border-radius:var(--radius);
  background:var(--surface);color:inherit;font:inherit;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cta);outline:2px solid #CFE6F7;outline-offset:0}
.field textarea{resize:vertical}
.form__note{margin:.8rem 0 0;text-align:center;font-size:.78rem;color:var(--ink-2)}
.form__note--error{color:#C1331A}

/* ---------- 13. FAQ ---------- */
.faq details{border-bottom:1px solid var(--line);padding:.9rem 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;font-weight:700;color:var(--cta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:.6rem 0 0;color:var(--ink-2);font-size:.92rem;max-width:66ch}

/* ---------- 14. Booking sidebar ---------- */
.booking-layout{display:grid;gap:1.5rem;align-items:start}
@media (min-width:980px){ .booking-layout{grid-template-columns:minmax(0,1.5fr) 21rem;gap:2rem} }
.rate-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem;box-shadow:var(--shadow-sm)}
@media (min-width:980px){ .rate-card{position:sticky;top:5rem} }
.rate{font-size:1.2rem;font-weight:700;line-height:1.25}
.rate span{font-size:.9rem;font-weight:400;color:var(--ink-2)}
.rate-card hr{border:0;border-top:1px solid var(--line);margin:1rem 0}

/* ---------- 15. CTA band ---------- */
.cta-band{border-radius:var(--radius);padding:clamp(1.25rem,3vw,2rem);text-align:center;
          background:#EBF3FF;border:1px solid #CFE0F7}
.cta-band h2{max-width:22ch;margin-inline:auto}
.cta-band .btn{margin-top:1rem}

/* ---------- 16. Footer ---------- */
.site-footer{border-top:0;background:var(--navy);margin-top:0}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;
  padding:2rem 0 2.5rem;font-size:.88rem;color:#C7D8F2;background:transparent;border:0}
.site-footer a{color:#fff}
.footer-links{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}

/* ---------- 17. Mobile booking bar ---------- */
.mobile-bar{
  position:fixed;inset-inline:0;bottom:0;z-index:50;display:flex;
  align-items:center;justify-content:space-between;gap:1rem;
  background:var(--surface);border-top:1px solid var(--line);
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom,0px));
}
@media (min-width:980px){ .mobile-bar{display:none} }
.mobile-bar-spacer{height:4.5rem}
@media (min-width:980px){ .mobile-bar-spacer{display:none} }

/* ---------- 18. Lightbox ---------- */
dialog.lightbox{border:0;padding:0;background:transparent;width:100%;height:100%;max-width:100vw;max-height:100dvh;overscroll-behavior:contain}
dialog.lightbox::backdrop{background:rgba(0,10,25,.95)}
.lightbox__inner{position:relative;display:grid;grid-template-rows:1fr auto;height:100%;
  padding:calc(1rem + env(safe-area-inset-top,0px)) 1rem calc(1rem + env(safe-area-inset-bottom,0px))}
.lightbox__inner img{margin:auto;max-width:100%;max-height:100%;object-fit:contain;
  border-radius:var(--radius);cursor:zoom-out}

/* the X, top right */
.lightbox__x{
  position:absolute;z-index:2;
  top:calc(.5rem + env(safe-area-inset-top,0px));right:.5rem;
  display:grid;place-items:center;height:2.5rem;width:2.5rem;
  background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:999px;
  font-size:1.6rem;line-height:1;cursor:pointer;
}
.lightbox__x:hover{background:rgba(255,255,255,.3)}

.lightbox__bar{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  color:#fff;font-size:.88rem;padding-top:.7rem}
.lightbox__cap{flex:1 1 12rem;min-width:0}
.lightbox__hint{color:#B9C7D9;font-size:.78rem}
@media (max-width:520px){ .lightbox__hint{display:none} }
.lightbox__close{background:var(--cta);color:#fff;border:0;border-radius:var(--radius);
  padding:.5rem .9rem;font:inherit;font-weight:700;cursor:pointer;margin-left:auto}
.lightbox__close:hover{background:var(--cta-hover)}

/* ---------- 19. Map ---------- */
.map{
  position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);background:var(--surface-2);aspect-ratio:16/9;
}
@media (max-width:640px){ .map{aspect-ratio:4/3} }
.map iframe{position:relative;z-index:1;width:100%;height:100%;border:0;display:block}
.map__fallback{
  position:absolute;inset:0;display:grid;place-content:center;gap:.4rem;
  text-align:center;padding:1.5rem;color:var(--ink-2);font-size:.88rem;
}
.map__fallback strong{font-size:1rem;color:var(--ink);font-weight:700}
.map-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem}

/* ---------- 20. Beaches strip ---------- */
.beaches{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.beach{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);
       display:block;text-decoration:none;background:var(--surface)}
.beach .frame{border-radius:0;aspect-ratio:3/2}
.beach__label{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:1.75rem .75rem .6rem;
  background:linear-gradient(transparent, rgba(0,20,50,.82));color:#fff;
}
.beach__label b{display:block;font-size:.95rem}
.beach__label span{font-size:.78rem;color:#DCE8F7}
.beach:hover .frame img{transform:scale(1.05)}
.beach .frame img{transition:transform .3s ease}
@media (prefers-reduced-motion:reduce){ .beach .frame img{transition:none} .beach:hover .frame img{transform:none} }


/* ---------- 21. White-page adjustments ---------- */
/* Boxed elements keep their border; everything else sits on the page. */
.card, .review, .rate-card, .form, .map, .card--photo, .beach{border-color:var(--line)}
.cta-band{border:1px solid #CFE0F7}
.section--tint .review,
.section--tint .card{background:var(--surface)}


/* ---------- 22. Meet the host ---------- */
.host{display:grid;gap:1.5rem;align-items:start}
@media (min-width:860px){ .host{grid-template-columns:auto minmax(0,1fr) 15rem;gap:2rem} }
.host__avatar{
  display:grid;place-items:center;height:5.5rem;width:5.5rem;border-radius:999px;flex:none;
  background:var(--navy);color:#fff;font-size:2rem;font-weight:700;letter-spacing:-.02em;
}
.host__name{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.host__name h3{font-size:1.25rem}
.host__facts{display:flex;flex-wrap:wrap;gap:.4rem;margin:.75rem 0 1rem}
.host__panel{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:1rem}
.host__panel p:last-child{margin-bottom:0}
.host blockquote{margin:0;font-size:.93rem;line-height:1.55}


/* ---------- 23. Narrow screens ---------- */
@media (max-width:640px){
  body{font-size:15px}
  /* tap targets: nothing important under 44px tall */
  .btn{padding:.8rem 1.3rem}
  .faq summary{padding:.3rem 0}
  .nav a{min-height:44px;display:flex;align-items:center}
  .wrap{width:min(var(--wrap),100% - 2rem)}

  /* four facts are too tight on a phone; two rows of two */
  .facts{grid-template-columns:repeat(2,1fr);gap:.9rem 1.25rem;max-width:none}

  /* the brand can use the room the nav links gave back */
  .brand__name{font-size:.95rem}
  .brand__place{font-size:.7rem}

  /* stacked hero: let the card sit under the photo rather than over it */
  .hero__card{position:static;width:auto;margin-top:.75rem;box-shadow:var(--shadow-sm)}

  .host__avatar{height:4rem;width:4rem;font-size:1.5rem}
  .map-actions .btn{flex:1 1 100%;text-align:center}
  .cta-band .btn{display:block}
}

@media (max-width:420px){
  /* a long property name shouldn't shove the button off the bar */
  .brand__name{font-size:.88rem}
  .site-header .btn--sm{padding:.5rem .8rem;font-size:.82rem}
  .mosaic{grid-template-columns:1fr}
  .mosaic .frame:first-child{aspect-ratio:4/3}
}

/* nothing should ever push the page sideways */
html{overflow-x:hidden}
body{overflow-wrap:break-word}
.site-footer a{overflow-wrap:anywhere}