/* frame.css — de gedeelde koptekst en voettekst van beeldsensatie.nl.
   ============================================================================
   BELANGRIJK: dit bestand wordt óók geladen op /bestellen/ (het HostFact-
   bestelformulier), en daar wordt base.css NIET geladen. Reden: base.css
   bevat generieke element-selectors (img, p, label, h1-h3, *) die de opmaak
   van het bestelformulier stukmaken.

   Regel voor dit bestand: geen enkele generieke element-selector, behalve de
   ene bewuste uitzondering op `body` hieronder. Alles wat de koptekst en de
   voettekst nodig hebben staat hier scoped binnen .site-header / .site-footer,
   ook de dingen die base.css normaal globaal regelt.
   ============================================================================ */


/* --------------------------------------------------------------------------
   1. Webfonts. Verhuisd uit base.css, omdat het bestelformulier ze nodig heeft
   en base.css daar niet geladen wordt. Paden zijn root-relatief, in lijn met
   de rest van het project.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "DM Serif Text";
  src: url("/fonts/dmseriftext-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-semibold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}


/* --------------------------------------------------------------------------
   2. De enige bewuste globale regel.
   Zonder `margin:0` staat de koptekst 8 px van de rand op /bestellen/, waar
   base.css niet geladen wordt. Achtergrond en tekstkleur horen erbij: anders
   is het vlak rond het bestelformulier wit in plaats van papier.
   Dit overschrijft `body{margin:0.2rem}` uit orderform.css binnen diens
   mobiele mediaquery. Dat is geen verlies: .o_form_container heeft daar zelf
   al `padding:0 5px`.
   -------------------------------------------------------------------------- */
body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
}


/* --------------------------------------------------------------------------
   3. Zelfstandigheid. base.css is op /bestellen/ niet geladen, dus de resets
   die de koptekst en voettekst nodig hebben staan hier scoped herhaald.
   -------------------------------------------------------------------------- */
.site-header,
.site-footer,
.site-header *,
.site-footer * {
  box-sizing: border-box;
}

.site-header img,
.site-footer img {
  display: block;
  max-width: 100%;
  height: auto;
}

.site-header p,
.site-footer p,
.site-header h2,
.site-footer h2 {
  margin: 0;
}

.site-header :focus-visible,
.site-footer :focus-visible {
  outline: 3px solid var(--goud);
  outline-offset: 3px;
}

.site-header {
  font-family: var(--sans);
  font-size: var(--maat-m);
  line-height: 1.65;
  color: var(--inkt);
  background: var(--papier);
}

.site-footer {
  font-family: var(--sans);
  font-size: var(--maat-m);
  line-height: 1.65;
}

.site-header a {
  color: var(--inkt);
}


/* --------------------------------------------------------------------------
   4. De omlijsting zelf. Ongewijzigd verhuisd uit layout.css regel 1-92.
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--breedte);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.site-header {
  border-bottom: 1px solid var(--lijn);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.25rem;
  flex-wrap: wrap;
}
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.9rem, 3vw, 2rem);
  font-size: var(--maat-s);
  font-weight: 600;
}
.site-header nav a {
  text-decoration: none;
  padding: 0.5rem 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.site-header nav a[aria-current="page"] {
  border-bottom: 2px solid var(--goud);
}

.header-logo {
  width: 200px;
  height: 42px;
}

.site-footer {
  background: var(--petrol);
  color: var(--papier);
  padding-block: clamp(3rem, 7vw, 5rem);
  margin-top: clamp(4rem, 10vw, 8rem);
}
.site-footer a { color: var(--goud); }

.footer-logo {
  width: 180px;
  height: 38px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
}

.footer-blok { }

.footer-kop {
  font-size: var(--maat-s);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-family: var(--sans);
  font-weight: 600;
}

.footer-intro {
  margin-top: 1.25rem;
  color: rgba(251, 249, 245, 0.75);
}

.footer-tekst {
  margin-top: 1rem;
  color: rgba(251, 249, 245, 0.75);
}

.footer-legal {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(251, 249, 245, 0.18);
  font-size: var(--maat-s);
  color: rgba(251, 249, 245, 0.7);
}

.footer-voorwaarden {
  color: var(--goud);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}