/*
Theme Name: Sendenbach
Theme URI: https://villadusendenbach.fr
Author: La Villa du Sendenbach
Description: Theme sur mesure pour La Villa du Sendenbach, gite alsacien traditionnel a Muhlbach-sur-Munster.
Version: 1.0
Text Domain: sendenbach
*/

:root{
  --bg:#FBF9F2;
  --surface:#FFFFFF;
  --surface-2:#F1EEDD;
  --text:#241F16;
  --text-muted:#6B6656;
  --brand:#24382C;
  --brand-strong:#16241B;
  --accent:#B23A2E;
  --accent-gold:#93712F;
  --border: rgba(36,31,22,0.13);
  --shadow: 0 20px 44px -28px rgba(60,50,30,0.32);
  --shadow-sm: 0 2px 14px rgba(36,31,22,0.06);
  --radius: 3px;
  --pill: 999px;
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Libre Franklin", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:16.5px; line-height:1.7; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.08; margin:0; text-wrap:balance; color:var(--brand); }
p{ margin:0; }
.container{ max-width:1180px; margin-inline:auto; padding-inline:clamp(20px,5vw,64px); }
.eyebrow{ font-family:var(--font-body); font-size:0.72rem; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent-gold); }
.measure{ max-width:62ch; }
.heading-caps{ text-transform:uppercase; letter-spacing:0.02em; }
.center{ text-align:center; }

.btn{
  display:inline-flex; align-items:center; gap:0.55em;
  font-family:var(--font-body); font-weight:600; font-size:0.86rem; letter-spacing:0.03em;
  padding:0.85em 1.7em; border-radius:var(--pill); border:1px solid currentColor;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease;
}
.btn-solid{ background:var(--accent); border-color:var(--accent); color:#FBF3EA; box-shadow:0 10px 22px -12px rgba(178,58,46,0.55); }
.btn-solid:hover{ transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(178,58,46,0.6); color:#FBF3EA; }
.btn-outline{ color:#FBF7EC; border-color:rgba(251,247,236,0.7); }
.btn-outline:hover{ background:rgba(251,247,236,0.12); transform:translateY(-2px); color:#FBF7EC; }
.text-link{ display:inline-flex; align-items:center; gap:0.4em; font-size:0.86rem; font-weight:600; text-decoration:none; color:var(--brand); border-bottom:1px solid var(--accent-gold); padding-bottom:2px; }
.text-link:hover{ color:var(--accent); }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

.flourish{ color:var(--accent-gold); width:110px; height:15px; display:block; margin:0.15rem 0; }
.flourish svg{ width:100%; height:100%; display:block; }
.flourish.center{ margin-inline:auto; }

/* ---------- Utility bar ---------- */
.utility-bar{ background:var(--brand-strong); color:#E9E2CC; font-size:0.78rem; }
.utility-row{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:8px; flex-wrap:wrap; }
.utility-left{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
.utility-row a{ display:inline-flex; align-items:center; gap:0.45em; color:inherit; text-decoration:none; }
.utility-row a:hover{ color:#F3EAC8; }
.utility-row svg{ width:13px; height:13px; flex:none; }
@media (max-width:700px){ .utility-right{ display:none; } }

/* ---------- Nav ---------- */
header.site-nav{ position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow-sm); }
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding-block:14px; gap:1.5rem; }
.wordmark{ font-family:var(--font-display); font-weight:700; font-size:1.28rem; color:var(--brand); text-decoration:none; letter-spacing:0.01em; white-space:nowrap; }
.wordmark em{ color:var(--accent); font-style:normal; }
.links{ display:flex; gap:1.9rem; align-items:center; list-style:none; margin:0; padding:0; }
.links li{ list-style:none; }
.links a{ font-family:var(--font-display); color:var(--text); text-decoration:none; font-size:1.02rem; font-weight:600; letter-spacing:0.02em; position:relative; padding-block:0.3rem; }
.links a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--accent-gold); transition:right .25s ease; }
.links a:hover::after{ right:0; }
.links a:hover{ color:var(--brand); }
.nav-toggle{ display:none; background:none; border:0; color:var(--brand); font-size:1.4rem; cursor:pointer; }
@media (max-width: 900px){
  .links{ position:absolute; left:0; right:0; top:100%; background:var(--surface); flex-direction:column; align-items:flex-start; padding:1.25rem clamp(20px,5vw,64px) 1.75rem; gap:1.1rem; border-bottom:1px solid var(--border); box-shadow:var(--shadow-sm); display:none; }
  .links.open{ display:flex; }
  .nav-toggle{ display:block; }
}

/* ---------- Full-bleed photo band (teasers) ---------- */
.photo-band{ position:relative; overflow:hidden; padding:0; }
.photo-band img{ width:100%; height:100%; object-fit:cover; object-position:center 75%; }
.photo-band .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,22,15,.32) 0%, rgba(18,22,15,.18) 38%, rgba(18,22,15,.5) 100%); }
.photo-band .band-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#FBF7EC; gap:1rem; padding:20px clamp(20px,6vw,40px); }
.photo-band .band-center .eyebrow{ color:#E7D9A8; }
.photo-band .band-center h1, .photo-band .band-center h2{ color:#FBF7EC; }

/* ---------- Hero: text left, photo right ---------- */
.hero-split{ background:var(--surface); border-bottom:1px solid var(--border); padding:0; }
.hero-grid{ display:grid; grid-template-columns:45fr 55fr; }
.hero-copy{
  display:flex; flex-direction:column; justify-content:center; gap:1.3rem;
  padding-block:clamp(40px,6vw,76px);
  padding-right:clamp(20px,5vw,64px);
  padding-left:calc(max(0px, (100vw - 1180px) / 2) + clamp(20px,5vw,64px));
}
.hero-copy h1{ font-size:clamp(2rem, 3.4vw, 2.9rem); }
.hero-copy h1 i{ color:var(--accent); font-style:italic; font-weight:500; }
.hero-copy .hero-lede{ max-width:46ch; color:var(--text-muted); font-size:1.02rem; }
.hero-actions{ display:flex; gap:0.9rem; flex-wrap:wrap; padding-top:0.2rem; }
.hero-photo-col{
  position:relative; min-height:340px; padding:0;
}
.hero-photo-col::before{
  content:"";
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 Q 14 100 100 100 L0 100 Z' fill='white'/%3E%3C/svg%3E");
}
.hero-slideshow{ position:relative; width:100%; height:100%; overflow:hidden; }
.hero-slideshow img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  opacity:0; transition:opacity 1.2s ease;
}
.hero-slideshow img.is-active{ opacity:1; }
@media (max-width:860px){ .hero-photo-col::before{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .hero-slideshow img{ transition:none; }
}
@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-photo-col{ height:46vh; min-height:280px; order:-1; padding:0; }
}

.teaser-photo{ height:min(46vh, 380px); min-height:280px; }
.teaser-title{ font-size:clamp(1.7rem, 3.4vw, 2.6rem); }
@media (max-width:760px){ .teaser-photo{ height:40vh; min-height:300px; } }

/* ---------- Sections ---------- */
section{ padding-block:clamp(32px, 4.5vw, 60px); }
.section-head{ display:flex; flex-direction:column; gap:0.8rem; margin-bottom:clamp(28px,4vw,48px); }
.section-head h2{ font-size:clamp(1.85rem, 2.8vw, 2.5rem); }

/* Intro two-col */
.intro-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(28px,5vw,64px); align-items:start; }
.intro-grid h2{ font-size:clamp(1.7rem,2.6vw,2.2rem); margin-top:0.5rem; }
.intro-grid p + p{ margin-top:1em; }
@media (max-width:760px){ .intro-grid{ grid-template-columns:1fr; } }

.strip-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:clamp(28px,4vw,44px); }
.strip-grid figure{ margin:0; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3.1; box-shadow:var(--shadow-sm); }
.strip-grid img{ width:100%; height:100%; object-fit:cover; }
.strip-dots{ display:flex; gap:8px; justify-content:center; margin-top:1.2rem; }
.strip-dots span{ width:6px; height:6px; border-radius:50%; background:var(--border); }
.strip-dots span.active{ background:var(--accent-gold); }
@media (max-width:760px){ .strip-grid{ grid-template-columns:1fr 1fr; } .strip-grid figure:first-child{ grid-column:span 2; } }

/* Apartments - 3 cards */
.apt-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,30px); }
.apt-card{ display:flex; flex-direction:column; gap:0.9rem; }
.apt-card figure{ margin:0; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow); }
.apt-card img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.apt-card:hover img{ transform:scale(1.05); }
.apt-card h3{ font-size:1.3rem; font-weight:600; }
.apt-card .apt-facts-line{ font-size:0.86rem; color:var(--text-muted); }
@media (max-width:860px){ .apt-row{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .apt-row{ grid-template-columns:1fr; } }
.apt-more{ text-align:center; margin-top:clamp(28px,4vw,44px); }

/* Amenities detail - 3 columns */
.amenities-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,40px); }
.amenities-cols > div{ text-align:center; }
.amenities-cols .mark{ font-family:var(--font-display); font-style:italic; font-weight:600; color:var(--accent); font-size:1.5rem; display:block; margin-bottom:0.5rem; }
.amenities-cols h3{ font-size:1.12rem; margin-bottom:0.5rem; }
.amenities-cols p{ color:var(--text-muted); font-size:0.92rem; }
@media (max-width:760px){ .amenities-cols{ grid-template-columns:1fr; gap:2rem; } }

/* Gallery — masonry columns, photos keep their native format (no cropping) */
.gallery-grid{ column-count:3; column-gap:12px; }
.gallery-grid a{ display:block; break-inside:avoid; margin-bottom:12px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.gallery-grid img{ width:100%; height:auto; display:block; transition:transform .5s ease; }
.gallery-grid a:hover img{ transform:scale(1.04); }
@media (max-width:760px){ .gallery-grid{ column-count:2; } }

.full-gallery-grid{ column-count:3; column-gap:14px; }
.full-gallery-grid a{ display:block; break-inside:avoid; margin-bottom:14px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.full-gallery-grid img{ width:100%; height:auto; display:block; transition:transform .5s ease; }
.full-gallery-grid a:hover img{ transform:scale(1.04); }
@media (max-width:760px){ .full-gallery-grid{ column-count:2; } }
@media (max-width:480px){ .full-gallery-grid{ column-count:1; } }

/* Region detail */
.region-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); }
.region-col h3{ font-size:1.1rem; margin-bottom:0.5rem; }
.region-col p{ color:var(--text-muted); font-size:0.94rem; }
.region-col + .region-col{ border-left:1px solid var(--border); padding-left:clamp(24px,4vw,44px); }
@media (max-width:760px){ .region-grid{ grid-template-columns:1fr; } .region-col + .region-col{ border-left:0; padding-left:0; border-top:1px solid var(--border); padding-top:1.8rem; } }
blockquote.pull{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:1.35rem; color:var(--brand); margin:2rem 0 0; line-height:1.4; border-top:1px solid var(--border); padding-top:1.4rem; text-align:center; }

/* Contact */
.contact{ background:var(--surface-2); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); }
.contact-block{ display:flex; flex-direction:column; gap:1.3rem; }
.contact-line{ display:flex; flex-direction:column; gap:0.2rem; }
.contact-line .k{ font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--accent-gold); font-weight:700; }
.contact-line a{ text-decoration:none; color:var(--text); font-size:1.03rem; }
.contact-line a:hover{ color:var(--accent); }
.contact-map{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); margin-top:0.4rem; }
.contact-map iframe{ width:100%; height:220px; border:0; display:block; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea{
  width:100%; background:#FFFFFF; border:1px solid var(--border); color:var(--text);
  padding:0.75em 0.85em; font-family:var(--font-body); font-size:0.94rem; border-radius:var(--radius);
  margin-bottom:0.85rem;
}
.wpcf7 textarea{ resize:vertical; min-height:104px; }
.wpcf7 input[type="submit"]{
  display:inline-flex; align-items:center; gap:0.55em;
  font-family:var(--font-body); font-weight:600; font-size:0.86rem; letter-spacing:0.03em;
  padding:0.85em 1.7em; border-radius:var(--pill); border:1px solid var(--accent);
  background:var(--accent); color:#FBF3EA; cursor:pointer;
}
.wpcf7-spinner{ margin-left:0.6em; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }

/* Generic inner page */
.page-hero{ background:var(--surface-2); padding-block:clamp(40px,6vw,64px); text-align:center; }
.page-hero h1{ font-size:clamp(2rem,3.4vw,2.8rem); text-transform:uppercase; letter-spacing:0.02em; }
.page-content{ max-width:1100px; margin-inline:auto; }
.page-content p{ margin-bottom:1.1em; }
.page-content h2{ margin-top:1.6em; margin-bottom:0.6em; font-size:1.6rem; }
.page-content .wp-block-gallery{ margin-top:1.5em; }
/* Keep gallery photos in their native format instead of the default WordPress crop */
.page-content .wp-block-gallery.is-cropped .wp-block-image a,
.page-content .wp-block-gallery.is-cropped .wp-block-image img,
.page-content .wp-block-gallery.is-cropped .blocks-gallery-image img,
.page-content .wp-block-gallery.is-cropped .blocks-gallery-item img{
  height:auto !important;
  width:100% !important;
  object-fit:initial !important;
  flex:none !important;
}
.page-content figure.wp-block-image{ margin:0 0 1.2em; }
.page-content .wp-block-columns{ display:flex; gap:2rem; flex-wrap:wrap; }
.page-content .wp-block-column{ flex:1 1 260px; }

/* Footer */
footer.site-footer{ background:var(--surface); color:var(--text-muted); border-top:1px solid var(--border); }
.foot-row{ display:flex; justify-content:space-between; align-items:center; padding-block:1.5rem; flex-wrap:wrap; gap:1rem; font-size:0.84rem; }
.foot-row nav ul{ display:flex; gap:1.3rem; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
.foot-row nav a{ text-decoration:none; }
.foot-row nav a:hover{ color:var(--brand); }
.lang-float{
  position:fixed; left:20px; bottom:20px; z-index:60;
  display:inline-flex; align-items:center; gap:0.55em;
  background:var(--surface); color:var(--text); text-decoration:none;
  padding:0.7em 1.15em; border-radius:var(--pill);
  border:1px solid var(--border); box-shadow:var(--shadow);
  font-size:0.85rem; font-weight:600; letter-spacing:0.01em;
  transition:transform .2s ease, color .2s ease;
}
.lang-float:hover{ transform:translateY(-2px); color:var(--accent); }
.lang-float .lang-flag{ font-size:1.15em; line-height:1; }
@media (max-width:600px){
  .lang-float{ left:14px; bottom:14px; padding:0.6em 0.95em; font-size:0.8rem; }
}

::selection{ background:var(--accent); color:#fff; }