/* sv-header.css - the chrome on every page: header (4.1), Pagina's sheet (4.2), phone action bar (4.3),
   concept pill (4.4), footer (4.5), closing band (4.8), cadeaubon band (4.9). Prefixes: sv-header, sv-nav, sv-sheet,
   sv-actionbar, sv-pill, sv-footer, sv-band, sv-gift, sv-close. */

/* ---------- header ---------- */
.sv-header{position:fixed;inset:0 0 auto;z-index:50;height:var(--sv-header-h);background-color:var(--sv-night);color:var(--sv-on-dark);box-shadow:var(--sv-shadow-float);transition:background-color .2s var(--sv-ease),box-shadow .2s var(--sv-ease),transform .2s var(--sv-ease);view-transition-name:sv-header}
.sv-header :focus-visible{outline-color:var(--sv-lime)}
/* over a photo hero: transparent with a night strip, solid after 48 px (JS .is-solid or scroll timeline).
   Integrator: the spec's 0 -> 40 % strip inside the 64 px bar left the nav at ~2.8 : 1 over the bright home sky, so the
   strip is a ::before that runs 72 px below the bar (75 % -> 55 % -> 0) and fades out as the bar turns solid. */
.sv-js .sv-header--photo{background-color:rgb(15 26 33 / 0);box-shadow:none}
.sv-js .sv-header--photo::before{content:"";position:absolute;inset:0 0 auto;z-index:-1;height:calc(var(--sv-header-h) + 72px);background:linear-gradient(rgb(15 26 33 / .75),rgb(15 26 33 / .55) 50%,rgb(15 26 33 / 0));pointer-events:none;transition:opacity .2s var(--sv-ease)}
.sv-js .sv-header--photo.is-solid{background-color:var(--sv-night);box-shadow:var(--sv-shadow-float)}
.sv-js .sv-header--photo.is-solid::before{opacity:0}
@supports (animation-timeline:scroll()){
  .sv-js .sv-header--photo{animation:sv-hdr-solid linear both;animation-timeline:scroll(root);animation-range:0 48px}
  .sv-js .sv-header--photo::before{animation:sv-hdr-strip linear both;animation-timeline:scroll(root);animation-range:0 48px}
}
@keyframes sv-hdr-solid{from{background-color:rgb(15 26 33 / 0);box-shadow:none}to{background-color:var(--sv-night);box-shadow:var(--sv-shadow-float)}}
@keyframes sv-hdr-strip{to{opacity:0}}
.sv-hdr-sentinel{position:absolute;top:0;left:0;width:1px;height:48px;pointer-events:none;visibility:hidden}
/* phones: the events film hides the header while its stage is pinned (SV.header.hide(true)) */
.sv-motion .sv-header.is-hidden{transform:translateY(-100%)}

.sv-header__inner{display:flex;align-items:center;gap:12px;height:100%;max-width:calc(var(--sv-max) + 2 * var(--sv-gutter));margin-inline:auto;padding-inline:var(--sv-gutter)}
.sv-header__brand{display:flex;align-items:center;gap:10px;min-height:48px;margin-right:auto;color:inherit;text-decoration:none;flex:none}
.sv-header__logo{width:44px;height:44px}
.sv-header__name{font:600 1.0625rem/1 var(--sv-font-head);font-variation-settings:"opsz" 24;white-space:nowrap}
.sv-nav{display:none}
.sv-nav__list{display:flex;align-items:center;gap:0;margin:0;padding:0;list-style:none}
.sv-nav a{position:relative;display:flex;align-items:center;min-height:48px;padding:0 7px;color:var(--sv-on-dark);font:500 .875rem/1 var(--sv-font-text);text-decoration:none;white-space:nowrap}
.sv-nav a:hover{text-decoration:underline;text-underline-offset:6px}
.sv-nav a[aria-current="page"]::after{content:"";position:absolute;left:7px;right:7px;bottom:9px;height:2px;background:var(--sv-lime)}
.sv-header__actions{display:flex;align-items:center;gap:8px;flex:none}
.sv-header__actions .sv-btn{--sv-btn-h:44px;padding:0 16px;font-size:.9375rem}
.sv-header__offerte,.sv-header__reserve{display:none!important}
.sv-header__pages{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 14px;border-radius:var(--sv-r-pill);color:var(--sv-on-dark);box-shadow:inset 0 0 0 1.5px rgb(246 240 229 / .55);font:600 .9375rem/1 var(--sv-font-text);text-decoration:none}
.sv-header__pages .sv-icon{width:20px;height:20px}
/* very narrow phones (320-399 px): the wordmark wraps onto two lines so "Pagina's" never leaves the screen */
@media (max-width:399px){
  .sv-header__inner,.sv-header__brand{gap:8px}
  .sv-header__name{white-space:normal;width:min-content;line-height:1.05}
  .sv-header__pages{padding:0 12px}
}
/* fix round 1 (reflow, spec 15.1): with enlarged text the wordmark shrinks and clips instead of pushing "Pagina's"
   (the only navigation on phones) past the right edge of the fixed header */
@media (max-width:599px){
  .sv-header__brand{flex:1 1 auto;min-width:0}
  .sv-header__name{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
}
@media (min-width:600px){.sv-header__logo{width:56px;height:56px}}
/* fix round 2 (spec 3.1 over 4.1): below 1024 px the phone bar always carries Reserveren in its fixed right slot, so
   the header's lime Reserveren (spec 4.1: from 600 px) would make a second lime button for the same action next to
   the hero's own lime button. Both header actions now start at 1024 px, where the phone bar goes. */
@media (min-width:1024px){.sv-header__offerte,.sv-header__reserve{display:inline-flex!important}}
/* full nav: brand + 7 links + 2 buttons must fit the 1200 px container (measured: 1186 px) */
@media (min-width:1280px){
  .sv-header__inner{gap:8px}
  .sv-nav{display:block;margin-inline:auto}
  .sv-nav a{padding:0 5px}
  .sv-nav a[aria-current="page"]::after{left:5px;right:5px}
  .sv-header__brand{margin-right:0}
  .sv-header__name{font-size:1.25rem}
  .sv-header__actions .sv-btn{padding:0 14px}
  .sv-header__pages{display:none}
}

/* ---------- close button (sheet + dialogs) ---------- */
.sv-close{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 14px;border-radius:var(--sv-r-pill);color:inherit;font:600 .9375rem/1 var(--sv-font-text)}
.sv-close .sv-icon{width:20px;height:20px}
.sv-close:hover{background:rgb(127 127 127 / .12)}

/* ---------- Pagina's sheet (4.2) ---------- */
.sv-sheet{width:min(100%,640px);max-width:100%;max-height:88svh;margin:auto auto 0;padding:0;border:0;border-radius:var(--sv-r-dialog) var(--sv-r-dialog) 0 0;background:var(--sv-night);color:var(--sv-on-dark);box-shadow:var(--sv-shadow-float);overflow:auto;overscroll-behavior:contain}
.sv-sheet::backdrop{background:rgb(15 26 33 / .6)}
.sv-sheet[open]{animation:sv-sheet-in .18s var(--sv-ease)}
@keyframes sv-sheet-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sv-sheet[open]{animation-name:sv-fade}}
.sv-sheet__inner{padding:12px var(--sv-gutter) calc(24px + env(safe-area-inset-bottom))}
.sv-sheet__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.sv-sheet__title{font:600 1.25rem/1.2 var(--sv-font-head);font-variation-settings:"opsz" 24}
.sv-sheet__title:focus{outline:none}
.sv-sheet__list{margin:0 0 20px;padding:0;list-style:none}
.sv-sheet__list a{display:block;padding:12px 2px;border-bottom:1px solid var(--sv-line-dark);color:var(--sv-on-dark);text-decoration:none}
.sv-sheet__link{display:block;font:560 1.375rem/1.2 var(--sv-font-head);font-variation-settings:"opsz" 24}
.sv-sheet__sub{display:block;margin-top:4px;color:var(--sv-mist);font-size:.9375rem;line-height:1.4}
.sv-sheet__list a[aria-current="page"] .sv-sheet__link{text-decoration:underline 2px var(--sv-lime);text-underline-offset:6px}
.sv-sheet__foot{display:grid;justify-items:start;gap:10px}
.sv-sheet__address{color:var(--sv-mist)}

/* ---------- phone action bar (4.3) ---------- */
.sv-actionbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:56px 1fr 1fr;gap:8px;min-height:calc(64px + env(safe-area-inset-bottom));padding:4px var(--sv-gutter) calc(4px + env(safe-area-inset-bottom));background:var(--sv-shell);border-top:1px solid var(--sv-line);box-shadow:var(--sv-shadow-float);view-transition-name:sv-bar}
.sv-actionbar__btn{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:56px;padding:0 8px;border-radius:var(--sv-r-pill);color:var(--sv-text);box-shadow:inset 0 0 0 1.5px var(--sv-text);font:600 .9375rem/1.1 var(--sv-font-text);letter-spacing:.01em;text-align:center;text-decoration:none;-webkit-tap-highlight-color:transparent}
.sv-actionbar__bel{flex-direction:column;gap:2px;padding:0;border-radius:16px;font-size:.8125rem}
.sv-actionbar__bel .sv-icon{width:22px;height:22px}
.sv-actionbar__btn.is-primary{background:var(--sv-lime);color:var(--sv-night);box-shadow:inset 0 -2px 0 var(--sv-lime-deep)}
.sv-actionbar.is-night{background:var(--sv-night-2);border-top-color:var(--sv-line-dark)}
.sv-actionbar.is-night .sv-actionbar__btn:not(.is-primary){color:var(--sv-on-dark);box-shadow:inset 0 0 0 1.5px var(--sv-on-dark)}
.sv-actionbar.is-night :focus-visible{outline-color:var(--sv-lime)}
@media (max-width:1023px){body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}}
@media (min-width:1024px){.sv-actionbar{display:none}}

/* ---------- concept pill (4.4): never animates, never hides ---------- */
.sv-pill{position:fixed;z-index:45;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--sv-r-pill);background:rgb(15 26 33 / .92);color:var(--sv-sand);box-shadow:var(--sv-shadow-float);font:600 .75rem/1 var(--sv-font-text);text-decoration:none;white-space:nowrap}
.sv-pill::after{content:"";position:absolute;inset:-10px 0 0}
.sv-pill:focus-visible{outline-color:var(--sv-lime)}
.sv-pill__dot{width:6px;height:6px;border-radius:50%;background:var(--sv-lime)}
.sv-pill__more{display:none}
@media (min-width:600px){.sv-pill__more{display:inline}}
@media (max-width:1023px){.sv-pill{left:50%;bottom:calc(64px + env(safe-area-inset-bottom) - 14px);transform:translateX(-50%)}}
/* fix round 1: on phones only the pill's upper half (plus 10 px above it) is tappable, so a thumb on the top edge of
   "Offerte" / "Reserveren" opens that button, not lumberwell.com. Look and position unchanged (spec 4.4). */
@media (max-width:1023px){.sv-pill{pointer-events:none}.sv-pill::after{pointer-events:auto;inset:-10px 0 14px}}
@media (min-width:1024px){.sv-pill{left:16px;bottom:16px}}

/* fix round 2 (WCAG 1.4.10 / 1.4.4): on short screens (phone landscape, 400 % zoom) the fixed header + bar + pill
   took half the height. The header scrolls away with the page there (a spec 4.1 deviation; it stays fixed on every
   normal phone), and the bar (spec 4.3: never hides) gets 8 px slimmer. */
@media (max-height:500px){.sv-header{position:absolute}html{scroll-padding-top:16px}}
@media (max-height:500px) and (max-width:1023px){
  .sv-actionbar{min-height:calc(52px + env(safe-area-inset-bottom))}
  .sv-actionbar__btn{min-height:44px}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .sv-pill{bottom:calc(52px + env(safe-area-inset-bottom) - 14px)}
}

/* ---------- footer (4.5) ---------- */
.sv-footer{position:relative;overflow:hidden;padding:72px 0 32px}
.sv-footer__birds{position:absolute;top:10px;left:0;width:100%;height:56px;color:var(--sv-on-dark);opacity:.06;pointer-events:none}
.sv-footer__grid{display:grid;grid-template-columns:1fr;gap:32px}
.sv-footer__col{min-width:0}
.sv-footer__logo{width:56px;height:56px;margin-bottom:12px}
.sv-footer__h{margin:0 0 10px;font:600 1.125rem/1.3 var(--sv-font-head);font-variation-settings:"opsz" 24}
.sv-footer p{color:var(--sv-on-dark)}
.sv-footer__list{display:grid;gap:0;margin:0;padding:0;list-style:none}
.sv-footer__list li{min-height:32px;display:flex;align-items:center}
.sv-footer a{display:inline-flex;align-items:center;min-height:48px;color:var(--sv-on-dark);text-decoration:underline;text-decoration-color:rgb(246 240 229 / .4);text-underline-offset:3px}
.sv-footer a:hover{text-decoration-color:var(--sv-lime)}
.sv-footer__bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--sv-line-dark)}
.sv-footer__social{display:flex;flex-wrap:wrap;gap:0 24px;margin:0 0 16px;padding:0;list-style:none}
.sv-footer__small{display:grid;gap:10px;max-width:80ch;font-size:.875rem;line-height:1.55}
.sv-footer__small p{color:var(--sv-mist)}
.sv-footer__small strong{color:var(--sv-on-dark)}
.sv-footer__small a{display:inline;min-height:0}
@media (min-width:600px){.sv-footer__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.sv-footer{padding-bottom:72px}.sv-footer__grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}

/* ---------- closing action band (4.8) ---------- */
.sv-band{padding-block:var(--sv-section-pad);background:var(--sv-sand-2);text-align:center}
.sv-band__title{max-width:22ch;margin:0 auto 28px}
.sv-band__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.sv-band__call{margin-top:20px}
.sv-band__call a{color:var(--sv-text)}

/* ---------- cadeaubon band (4.9): the one magenta place ---------- */
.sv-gift{padding-block:clamp(56px,8vw,96px);background:var(--sv-magenta);color:#fff}
.sv-gift .sv-accent{color:var(--sv-sand)}
.sv-gift :focus-visible{outline-color:#fff}
.sv-gift__inner{display:grid;gap:28px;align-items:center}
.sv-gift__text{display:grid;justify-items:start;gap:16px}
.sv-gift__title{color:#fff}
.sv-gift__tag{position:relative;justify-self:center;width:min(220px,56vw);overflow:hidden;border-radius:12px}
.sv-gift__tag svg{width:100%;height:auto}
.sv-gift__card{fill:var(--sv-sand)}
.sv-gift__hole{fill:var(--sv-magenta)}
.sv-gift__string,.sv-gift__knot{fill:none;stroke:var(--sv-lime);stroke-width:4;stroke-linecap:round}
.sv-gift__line{fill:none;stroke:rgb(15 26 33 / .22);stroke-width:5;stroke-linecap:round}
.sv-gift__tag::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgb(255 255 255 / 0) 35%,rgb(255 255 255 / .55) 50%,rgb(255 255 255 / 0) 65%);transform:translateX(-120%);pointer-events:none}
.sv-motion .sv-gift__tag.is-seen::after{animation:sv-sheen .9s var(--sv-ease) 1 both}
@keyframes sv-sheen{to{transform:translateX(120%)}}
@media (min-width:768px){.sv-gift__inner{grid-template-columns:1fr auto}}