/* maison-hubermont.be: one stylesheet for the whole site. Tokens are documented in DESIGN.md. */

/* Montserrat, self-hosted (variable font, weights 100 to 900; SIL Open Font License, see fonts/LICENSE-Montserrat.txt).
   No connection to Google Fonts: faster and no visitor data sent to a third party. */
@font-face{font-family:"Montserrat"; font-style:normal; font-weight:100 900; font-display:swap; src:url("fonts/montserrat-latin-wght-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat"; font-style:italic; font-weight:100 900; font-display:swap; src:url("fonts/montserrat-latin-wght-italic.woff2") format("woff2")}

:root{
  --blue:#0099ff;      /* highlights, photo strip, location (mobile) */
  --orange:#ffad42;    /* where you'll sleep */
  --pink:#f9b8c4;      /* amenities, reviews (mobile) */
  --navy:#142356;      /* footer */
  --text:#000000;
  --bg:#ffffff;
  --on-dark:#ffffff;
  --font:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter:40px;
}

html, body{padding:0; margin:0}
body{font-family:var(--font); font-optical-sizing:auto; font-weight:300; font-style:normal; color:var(--text); background:var(--bg)}
p{margin-top:0}
h1, h2{font-weight:500; margin-top:0}
a:focus-visible, button:focus-visible{outline:3px solid var(--navy); outline-offset:2px}

section{padding:var(--gutter); box-sizing:border-box; overflow:hidden}

/* ---------- Two columns: info on the left, highlights and photos on the right ---------- */
div.left{float:left; width:40%}
div.left h1{font-size:60px; text-decoration:underline; text-underline-offset:8px; margin-top:10px}
.house-icon{font-size:40px}
aside{float:right; width:60%}

/* ---------- Highlights ---------- */
section.highlights{padding-top:255px; background-color:var(--blue)}
.highlight-list{list-style:none; margin:0; padding:20px 0 0}
.highlight-list li{display:grid; grid-template-columns:64px 1fr; align-items:center; gap:10px; padding:10px 0}
.highlight-icon{font-size:40px; text-align:center}

/* ---------- Photo strip ---------- */
section.images{height:400px; padding:0; overflow:hidden; position:relative; background-color:var(--blue)}
section.images div.images-wrapper{display:flex; width:max-content; transition:transform .5s ease-in-out}
section.images img{display:block; height:400px; width:auto}

/* ---------- Sleeping, amenities, reviews ---------- */
section.where-youll-sleep{background-color:var(--orange)}
section.where-youll-sleep li{margin-bottom:20px}
section.amenities{background-color:var(--pink)}
section.amenities ul.categories{columns:2}
section.amenities ul.categories>li{margin-bottom:20px}
.tooltip{text-decoration:underline dotted; text-underline-offset:3px; cursor:help}
figure.review{margin:0 0 1.5em}
figure.review blockquote{margin:0 40px .4em}
figure.review figcaption{margin:0 40px; font-weight:500}

/* ---------- Footer ---------- */
/* On the homepage the footer sits at the bottom of the right column (aside); elsewhere at the bottom of the page. */
footer.footer{clear:both; background-color:var(--navy); color:var(--on-dark); padding:var(--gutter)}
footer.footer ul{list-style:none; margin:0 0 1em; padding:0 0 0 40px}
footer.footer .copyright{margin:0; padding-left:40px; font-size:14px}
footer.footer a{color:var(--on-dark)}

/* ---------- Responsive ---------- */
@media only screen and (max-width:1100px){
  div.left h1{font-size:30px}
  section.highlights{padding-top:110px}
}
@media only screen and (max-width:950px){
  :root{--gutter:24px}
  aside, div.left{float:none; width:100%}
  section.highlights{padding-top:40px}
  section.amenities ul.categories{columns:1}
  section.location{background-color:var(--blue)}
  section.what-others-say{background-color:var(--pink)}
  figure.review blockquote, figure.review figcaption{margin-left:16px; margin-right:16px}
}

/* ---------- Motion ----------
   Fade-ins on scroll and the photo slider. Under "reduce motion" nothing moves by itself:
   content is visible immediately and the photo strip becomes horizontally scrollable. */
.animate-fade-up{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
.animate-slide-right{opacity:0; transform:translateX(40px); transition:opacity .6s ease, transform .6s ease}
.animate-fade-up.visible, .animate-slide-right.visible{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
  .animate-fade-up, .animate-slide-right{opacity:1; transform:none; transition:none}
  section.images{overflow-x:auto}
  section.images div.images-wrapper{transition:none}
}
@media (scripting: none){
  .animate-fade-up, .animate-slide-right{opacity:1; transform:none}
}

/* ---------- Simple content pages (404, concept overview, future landing pages) ---------- */
.page{max-width:760px; margin:0 auto; padding:var(--gutter)}
.page h1{font-size:clamp(28px, 5vw, 48px); text-decoration:underline; text-underline-offset:8px}
.cta{display:inline-block; background:var(--navy); color:var(--on-dark); padding:12px 22px; border-radius:999px; text-decoration:none; font-weight:500}

/* ---------- Preview only ---------- */
.preview-banner{background:var(--navy); color:var(--on-dark); font-size:14px; padding:8px 16px; text-align:center}
.preview-banner a{color:var(--pink)}
.preview-questions{clear:both; padding:var(--gutter)}
.preview-questions-box{border:2px dashed var(--navy); border-radius:16px; padding:clamp(16px,3vw,28px); background:#fffdf5; max-width:900px; margin:0 auto}
.preview-questions-box h2{font-size:22px}
.preview-questions-box li{margin:8px 0}
.show-diff .diff-new{background:#f2ff00; box-shadow:0 0 0 3px #f2ff00; color:#000; border-radius:2px}
.diff-toggle{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:50;
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--navy); border-radius:999px;
  background:#fff; color:var(--navy); font:600 13px/1.2 var(--font); box-shadow:0 8px 28px rgba(16,24,40,.12); cursor:pointer}
.diff-dot{width:12px; height:12px; border-radius:50%; background:#d9d9d9; border:1px solid var(--navy)}
.diff-toggle[aria-pressed="true"] .diff-dot{background:#f2ff00}
@media print{.diff-toggle{display:none}}