/* House of Bubbles — header, footer, shared section/button helpers */

.hob-skip{position:absolute;left:-9999px;top:0;background:var(--hob-olive);color:#fff;padding:.6rem 1rem;z-index:1000}
.hob-skip:focus{left:0}

/* ---- Header (solid light bar, dark logo + nav) ---- */
.hob-header{position:fixed;inset:0 0 auto;z-index:200;background:var(--hob-bg-soft);transition:background-color var(--hob-ease),box-shadow var(--hob-ease)}
/* transform/will-change: dwingt een eigen GPU-compositing-laag af voor deze
   fixed header - bekende, risicoloze tegenmaatregel voor WebKit/Safari-
   (desktop) glitches waarbij fixed elementen tijdens scroll tijdelijk achter
   andere content terechtkomen (gemeld door Rutger + Bo op Safari/Mac,
   niet reproduceerbaar in geautomatiseerde tests - zie ook de design-doc).
   ALLEEN op desktop: een transform/will-change op .hob-header maakt 'm het
   "containing block" voor position:fixed-nakomelingen (CSS-spec-gedrag) -
   daardoor bleef het mobiele uitklapmenu (.hob-nav, position:fixed) binnen
   de hoogte van de header hangen i.p.v. het hele scherm te vullen (bug
   gevonden ronde 3, 31-7). Mobiel had de Safari-bug nooit, dus hier bewust
   uitgesloten. */
@media (min-width:901px){
  .hob-header{transform:translateZ(0);will-change:transform}
}
.hob-header.is-scrolled{box-shadow:0 1px 0 rgba(51,43,34,.06),0 10px 30px rgba(51,43,34,.06)}
.hob-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.45rem}
.hob-header__logo{display:inline-flex;align-items:center;line-height:0}
.hob-header__logo .hob-logo{height:112px;width:auto;max-width:none} /* (0,2,0) verslaat WooCommerce .woocommerce-page img{height:auto}; groter op klantvraag 2026-07-06, blijft ruim onder .hob-page-hero's 8.5rem (136px) padding-top */
.hob-logo--light{display:none}
.hob-logo--dark{display:inline-block}

/* Vaste winkelmand-knop rechtsonderin ("coin", klantvraag 2026-07-06:
   niet in de header, altijd in beeld). */
.hob-cart-fab{position:fixed;right:1.25rem;bottom:1.25rem;z-index:250;
  width:56px;height:56px;border-radius:50%;background:var(--hob-olive);color:var(--hob-ivory);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 8px 24px rgba(51,43,34,.28);transition:transform var(--hob-ease),box-shadow var(--hob-ease)}
.hob-cart-fab:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(51,43,34,.34);color:var(--hob-ivory)}
.hob-cart-fab__count{position:absolute;top:-4px;right:-4px;min-width:1.3rem;height:1.3rem;border-radius:var(--hob-radius-cart,32px);
  background:var(--hob-gold);color:var(--hob-espresso);font-size:.72rem;font-weight:var(--hob-fw-bold);line-height:1.3rem;text-align:center;padding-inline:.2rem;
  box-shadow:0 0 0 2px var(--hob-ivory)}
@media (max-width:680px){.hob-cart-fab{right:1rem;bottom:1rem;width:50px;height:50px}}

.hob-nav{margin-left:auto}
.hob-menu{display:flex;gap:clamp(1rem,2.4vw,2.4rem);list-style:none;margin:0;padding:0}
.hob-menu a{color:var(--hob-espresso);font-weight:500;font-size:.98rem;text-decoration:none;transition:color var(--hob-ease)}
.hob-menu a:hover{color:var(--hob-olive)}
.hob-menu .current-menu-item>a{border-bottom:2px solid var(--hob-gold);padding-bottom:2px}

.hob-nav__close{display:none}
.hob-nav__cta{display:none}
.hob-header__actions{display:flex;align-items:center;gap:.75rem}
.hob-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hob-burger span{width:24px;height:2px;background:var(--hob-espresso);transition:var(--hob-ease)}

/* ---- Sections / headings ---- */
.hob-main{display:block}
.hob-section{padding-block:clamp(3rem,7vw,6rem)}
.hob-section--champagne{background:var(--hob-champagne)}
.hob-h2{font-size:var(--hob-h2);font-weight:var(--hob-fw-black);line-height:1.12;margin:0 0 1rem}
.hob-h2 em{font-style:italic;font-weight:var(--hob-fw-medium)}
.hob-center{text-align:center;margin-inline:auto}
.hob-section__lead{max-width:46ch;color:var(--hob-text-muted);margin:0 0 2rem}
.hob-center.hob-section__lead{margin-inline:auto}
.hob-btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

/* ---- Button variants (base in base.css) ---- */
.hob-btn--sm{padding:.6rem 1.1rem;font-size:.92rem}
.hob-btn--block{display:flex;width:100%}
.hob-btn--ghost{background:transparent;color:var(--hob-ivory);border-color:rgba(242,242,242,.5)}
.hob-btn--ghost:hover{background:var(--hob-ivory);color:var(--hob-espresso);border-color:var(--hob-ivory)}

/* ---- Generic page ---- */
.hob-page-hero{background:var(--hob-bg-soft);padding-top:clamp(8.5rem,15vh,10rem);padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.hob-page-hero__title{font-size:var(--hob-h1);margin:.25rem 0 0;line-height:1.08}
.hob-page-hero .hob-eyebrow{color:var(--hob-olive)}
.hob-prose{max-width:var(--hob-container)} /* zelfde max-width als de homepage */
.hob-prose h2{font-size:var(--hob-h2);margin:0 0 1rem;line-height:1.14}
.hob-prose h3{margin:1.85rem 0 .5rem;font-size:1.2rem}
.hob-prose p{margin:0 0 1.1rem}
.hob-prose ul:not(.hob-points){margin:0 0 1.2rem;padding-left:1.2rem}
.hob-prose li{margin:.3rem 0}
.hob-points{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem;margin:1.5rem 0 2rem;list-style:none;padding:0}
.hob-points li{background:var(--hob-surface);border:1px solid var(--hob-border);border-radius:var(--hob-radius);padding:1.25rem}
.hob-points strong{display:block;color:var(--hob-olive);margin-bottom:.25rem}

/* ---- Footer ---- */
.hob-footer{padding-top:clamp(3rem,6vw,5rem)}
.hob-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:clamp(1.5rem,4vw,3.5rem);padding-bottom:2.5rem}
.hob-footer .hob-footer__logo{height:136px;width:auto;max-width:none;margin-bottom:1rem} /* idem: verslaat .woocommerce-page img */
.hob-footer__tagline{font-size:1.05rem;line-height:1.4;color:var(--hob-ivory);opacity:.92}
.hob-footer__socials{display:flex;gap:1rem;margin-top:1rem}
.hob-footer__socials a{color:var(--hob-champagne)}
.hob-footer__h{font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;color:var(--hob-gold);margin:0 0 1rem}
.hob-footer__h--sub{margin-top:1.5rem}
.hob-footer__menu,.hob-footer__contact,.hob-footer__legal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.hob-footer__menu a,.hob-footer__contact a,.hob-footer__legal a,.hob-footer__contact li{color:var(--hob-ivory);opacity:.88}
.hob-footer__menu a:hover,.hob-footer__legal a:hover,.hob-footer__contact a:hover{opacity:1;color:var(--hob-gold)}
.hob-footer__bar{border-top:1px solid rgba(242,242,242,.14)}
.hob-footer__bar-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;padding-block:1.25rem;font-size:.85rem;color:var(--hob-champagne)}
.hob-footer__bar a{color:var(--hob-gold)}

/* ---- Mobile ---- */
@media (max-width:900px){
  .hob-burger{display:flex}
  .hob-nav{position:fixed;inset:0 0 0 auto;width:min(82vw,330px);background:var(--hob-espresso);
    transform:translateX(100%);transition:transform var(--hob-ease);padding:5.5rem 1.75rem 2rem;z-index:260}
  .hob-nav.is-open{transform:translateX(0);box-shadow:-20px 0 60px rgba(0,0,0,.3)}
  .hob-nav__close{display:block;position:absolute;top:1rem;right:1.25rem;background:none;border:0;
    color:var(--hob-ivory);font-size:2.6rem;line-height:1;cursor:pointer;padding:.2rem .4rem}
  .hob-menu{flex-direction:column;gap:1.25rem}
  .hob-menu a{color:var(--hob-ivory)!important;font-size:1.1rem}
  .hob-header__actions .hob-btn{display:none}
  .hob-nav{display:flex;flex-direction:column}
  .hob-nav__cta{display:inline-flex;margin-top:2rem;align-self:flex-start}
  .hob-footer__grid{grid-template-columns:1fr;gap:2rem}
}