/* Bunker Studio Core v3.1 — Bunker house style layer.
 * CSS-only brand shapes for Astra/Spectra sections.
 * Usage in Spectra:
 * - Outer full-width section: bsc-brand-stage
 * - Inner 1200px container: bsc-brand-content
 */

body.bsc-brand-layer .bsc-brand-stage,
body.bsc-brand-layer .bsc-house-style {
  position: relative !important;
  overflow: clip !important;
  isolation: isolate !important;
  max-width: 100%;
}

/* Keep the visible Astra header logo black when house style is active. */
body.bsc-brand-layer .site-header .custom-logo,
body.bsc-brand-layer .site-header .custom-logo-link img,
body.bsc-brand-layer .ast-site-identity .custom-logo {
  filter: brightness(0);
}

body.bsc-brand-layer .bsc-brand-stage > *,
body.bsc-brand-layer .bsc-house-style > * {
  position: relative;
  z-index: 2;
}

/* Two half-visible hexagons, 50% transparent by default. */
body.bsc-brand-layer .bsc-brand-stage::before,
body.bsc-brand-layer .bsc-house-style::before,
body.bsc-brand-layer .bsc-brand-stage::after,
body.bsc-brand-layer .bsc-house-style::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: clamp(340px, 52vw, 860px);
  aspect-ratio: 1 / 1;
  opacity: var(--bsc-brand-hex-opacity, .5);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  transform: rotate(0.001deg);
  will-change: transform;
}

body.bsc-brand-layer .bsc-brand-stage::before,
body.bsc-brand-layer .bsc-house-style::before {
  left: max(-34vw, -460px);
  top: clamp(40px, 12vw, 220px);
  background: var(--bsc-brand-hex-a, var(--ast-global-color-1, #e95a97));
}

body.bsc-brand-layer .bsc-brand-stage::after,
body.bsc-brand-layer .bsc-house-style::after {
  right: max(-36vw, -500px);
  bottom: max(-24vw, -340px);
  background: var(--bsc-brand-hex-b, var(--ast-global-color-8, #8ed1f0));
}

/* Inner content wrapper: no extra generated logo or badge. */
body.bsc-brand-layer .bsc-brand-content,
body.bsc-brand-layer .bsc-house-style-content {
  position: relative !important;
  z-index: 2;
  isolation: isolate;
}

body.bsc-brand-layer .bsc-brand-content::before,
body.bsc-brand-layer .bsc-house-style-content::before,
body.bsc-brand-layer .bsc-brand-content::after,
body.bsc-brand-layer .bsc-house-style-content::after {
  content: none !important;
  display: none !important;
}

/* Existing template/Site Logo used as a background mark. */
body.bsc-brand-layer .bsc-brand-stage .wp-block-site-logo img,
body.bsc-brand-layer .bsc-house-style .wp-block-site-logo img,
body.bsc-brand-layer .bsc-brand-stage img.custom-logo,
body.bsc-brand-layer .bsc-house-style img.custom-logo,
body.bsc-brand-layer .bsc-brand-stage .bsc-brand-background-logo img,
body.bsc-brand-layer .bsc-house-style .bsc-brand-background-logo img,
body.bsc-brand-layer img.bsc-brand-background-logo {
  filter: brightness(0);
  opacity: .3;
}

/* Allow hero text card and plugin components to stay above decorative layers. */
body.bsc-brand-layer .bsc-brand-stage .bsc-modern-hero-card,
body.bsc-brand-layer .bsc-brand-stage .bsc-card,
body.bsc-brand-layer .bsc-brand-stage .bsc-home-gallery,
body.bsc-brand-layer .bsc-brand-stage .bsc-home-products,
body.bsc-brand-layer .bsc-brand-stage .bsc-inspiration-gallery,
body.bsc-brand-layer .bsc-brand-stage .bsc-request-form {
  position: relative;
  z-index: 3;
}

@media (max-width: 1024px) {
  body.bsc-brand-layer .bsc-brand-stage::before,
  body.bsc-brand-layer .bsc-house-style::before,
  body.bsc-brand-layer .bsc-brand-stage::after,
  body.bsc-brand-layer .bsc-house-style::after {
    width: clamp(280px, 66vw, 620px);
  }
  body.bsc-brand-layer .bsc-brand-stage::before,
  body.bsc-brand-layer .bsc-house-style::before {
    left: -42vw;
    top: 12%;
  }
  body.bsc-brand-layer .bsc-brand-stage::after,
  body.bsc-brand-layer .bsc-house-style::after {
    right: -44vw;
    bottom: -18vw;
  }
}

@media (max-width: 767px) {
  html:has(body.bsc-brand-layer),
  body.bsc-brand-layer {
    max-width: 100%;
    overflow-x: hidden;
  }
  body.bsc-brand-layer .bsc-brand-stage,
  body.bsc-brand-layer .bsc-house-style {
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
  }
  body.bsc-brand-layer .bsc-brand-stage::before,
  body.bsc-brand-layer .bsc-house-style::before {
    width: 92vw;
    left: -58vw;
    top: 9%;
  }
  body.bsc-brand-layer .bsc-brand-stage::after,
  body.bsc-brand-layer .bsc-house-style::after {
    width: 96vw;
    right: -58vw;
    bottom: -24vw;
  }
}

/* Narrow iPhones: keep the house-style section inside the viewport. */
@media (max-width: 430px) {
  body.bsc-brand-layer .bsc-brand-content,
  body.bsc-brand-layer .bsc-house-style-content {
    max-width: 100%;
  }
  body.bsc-brand-layer .bsc-brand-stage::before,
  body.bsc-brand-layer .bsc-house-style::before {
    left: -62vw;
  }
  body.bsc-brand-layer .bsc-brand-stage::after,
  body.bsc-brand-layer .bsc-house-style::after {
    right: -62vw;
  }
}

@supports not (overflow: clip) {
  body.bsc-brand-layer .bsc-brand-stage,
  body.bsc-brand-layer .bsc-house-style { overflow: hidden !important; }
}

/* Spectra stores a solid container background on ::before. On the restored
 * homepage the original brand hexagons own those pseudo-elements, so paint
 * the same editable Spectra colour directly on the section instead. */
body.bsc-brand-layer .wp-block-spectra-container.bsc-brand-stage.bsc-home-brand {
  background-color: var(--spectra-background-color, var(--ast-global-color-5));
  --bsc-brand-hex-opacity: .25;
}
body.bsc-brand-layer .wp-block-spectra-container.bsc-brand-stage.bsc-home-brand.spectra-background-color::before {
  background: var(--bsc-brand-hex-a, var(--ast-global-color-1));
  opacity: var(--bsc-brand-hex-opacity);
  right: auto;
  bottom: auto;
  left: max(-34vw, -460px);
  top: clamp(40px, 12vw, 220px);
}
@media (max-width: 1024px) {
  body.bsc-brand-layer .wp-block-spectra-container.bsc-brand-stage.bsc-home-brand.spectra-background-color::before {
    left: -42vw;
    top: 12%;
  }
}
@media (max-width: 767px) {
  body.bsc-brand-layer .wp-block-spectra-container.bsc-brand-stage.bsc-home-brand.spectra-background-color::before {
    left: -58vw;
    top: 9%;
  }
}
@media (max-width: 430px) {
  body.bsc-brand-layer .wp-block-spectra-container.bsc-brand-stage.bsc-home-brand.spectra-background-color::before {
    left: -62vw;
  }
}

/* Homepage hero: existing editable Spectra blocks, lightweight brand geometry. */
body.bsc-brand-layer :is([data-spectra-id="spectra-bh-jouw-verhaal-inner"],[data-spectra-id="spectra-bhen-jouw-verhaal-inner"]){max-width:1440px!important}
body.bsc-brand-layer :is([data-spectra-id="spectra-bh-hero-grid"],[data-spectra-id="spectra-bhen-hero-grid"]){align-items:start;gap:clamp(24px,4vw,64px)!important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important}
body.bsc-brand-layer :is([data-spectra-id="spectra-bh-hero-image"],[data-spectra-id="spectra-bhen-hero-image"]){position:relative;isolation:isolate;min-width:0;padding:14px 0!important}
body.bsc-brand-layer :is([data-spectra-id="spectra-bh-hero-image"],[data-spectra-id="spectra-bhen-hero-image"])::before,
body.bsc-brand-layer :is([data-spectra-id="spectra-bh-hero-image"],[data-spectra-id="spectra-bhen-hero-image"])::after{content:"";position:absolute;pointer-events:none;z-index:-1;inset:0 -5% 6%;background:var(--bsc-brand-hex-a,var(--ast-global-color-1));opacity:.24;clip-path:polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%)}
body.bsc-brand-layer :is([data-spectra-id="spectra-bh-hero-image"],[data-spectra-id="spectra-bhen-hero-image"])::after{inset:10% -8% 0 12%;background:var(--bsc-brand-hex-b,var(--ast-global-color-8));opacity:.32;transform:rotate(8deg)}
body.bsc-brand-layer :is([data-spectra-id="spectra-bh-studio"],[data-spectra-id="spectra-bhen-studio"]){margin:0!important;width:100%;clip-path:polygon(7% 0,93% 0,100% 50%,93% 100%,7% 100%,0 50%)}
body.bsc-brand-layer :is([data-spectra-id="spectra-bh-studio"],[data-spectra-id="spectra-bhen-studio"]) img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:57% center}
body.bsc-brand-layer :is([data-spectra-id="spectra-bh-studio-caption"],[data-spectra-id="spectra-bhen-studio-caption"]){max-width:90%;margin:12px auto 0!important;text-align:center}
@media(max-width:921px){
 body.bsc-brand-layer :is([data-spectra-id="spectra-bh-hero-grid"],[data-spectra-id="spectra-bhen-hero-grid"]){grid-template-columns:minmax(0,1fr)!important;gap:24px!important}
 body.bsc-brand-layer :is([data-spectra-id="spectra-bh-hero-title"],[data-spectra-id="spectra-bhen-hero-title"]){font-size:clamp(36px,7.8vw,54px)!important}
 body.bsc-brand-layer :is([data-spectra-id="spectra-bh-hero-image"],[data-spectra-id="spectra-bhen-hero-image"]){width:calc(100% + 32px)!important;max-width:none!important;margin-inline:-16px!important}
 body.bsc-brand-layer :is([data-spectra-id="spectra-bh-studio"],[data-spectra-id="spectra-bhen-studio"]) img{aspect-ratio:4/3;object-position:center}
}