/*
Theme Name:   Interieurstudio Noor
Theme URI:    https://interieurstudionoor.nl
Description:  Child theme van Hello Elementor voor Interieurstudio Noor. Bevat de
              merkinstellingen, typografie en CSS-overrides die niet via Elementor
              worden gezet. Werk hier - nooit in het parent theme.
Author:       Interieurstudio Noor
Template:     hello-elementor
Version:      0.3.0
Text Domain:  interieurstudio-noor
*/

/* ==========================================================================
   1. Tokens

   Kleuren komen uit de stijlreferentie (studioidea-interior.com), uit hun
   eigen CSS gehaald en niet geschat. Zie docs/huisstijl.md.
   ========================================================================== */
:root {
  --noor-papier: #faf9f5;   /* achtergrond, warm gebroken wit */
  --noor-linnen: #f2f0e3;   /* de afwisselende band */
  --noor-inkt:   #1d1c1c;   /* tekst, warm bijna-zwart */
  --noor-steen:  #6b665c;   /* bijschriften en meta */
  --noor-lijn:   #ddd8ca;   /* haarlijnen, muren */
  --noor-olijf:  #463f2e;   /* knoppen */
  --noor-amber:  #b87a2a;   /* accent, spaarzaam - nooit voor leestekst */

  --noor-kop:   "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --noor-tekst: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --noor-h1: clamp(2.5rem, 1.75rem + 3.4vw, 4.5rem);
  --noor-h2: clamp(1.875rem, 1.5rem + 1.7vw, 2.875rem);
  --noor-h3: clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem);

  /* 17px in plaats van de 13px van de referentie. Zij hebben een webshop waar
     mensen naar foto's kijken; hier moet doorgelezen worden. */
  --noor-basis: 1.0625rem;

  --noor-ruimte-s: 0.75rem;
  --noor-ruimte-m: 1.75rem;
  --noor-ruimte-l: 4rem;
  --noor-ruimte-xl: clamp(3.5rem, 8vw, 7rem);

  --noor-breedte: 72rem;
  --noor-leesbreedte: 38rem;
  --noor-rand: clamp(1.25rem, 5vw, 3rem);
}

/* ==========================================================================
   2. Basis
   ========================================================================== */
body {
  font-family: var(--noor-tekst);
  font-weight: 300;
  font-size: var(--noor-basis);
  line-height: 1.65;
  color: var(--noor-inkt);
  background-color: var(--noor-papier);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* De banden lopen tot de schermrand met een vw-truc; dit voorkomt dat de
     scrollbalk daarbij een horizontale schuifbalk veroorzaakt. */
  overflow-x: clip;
}

.site-header > *,
.site-footer > * {
  max-width: var(--noor-breedte);
  margin-inline: auto;
  padding-inline: var(--noor-rand);
}

/* De pagina zelf krijgt geen padding: dat regelen de banden, zodat de
   achtergrondkleur tot de schermrand kan doorlopen. */
.site-main {
  max-width: none;
  padding: 0;
}

/* ==========================================================================
   3. Secties

   Elke --- in de tekst wordt een band. Banden wisselen van achtergrond; dat
   geeft het ritme dat een pagina met alleen alinea's mist.
   ========================================================================== */
.noor-band {
  padding-block: var(--noor-ruimte-xl);
}

.noor-band--linnen {
  background: var(--noor-linnen);
  /* Tot de schermrand, ook al zit de sectie in een smallere container. */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
}

.noor-band__binnen {
  max-width: var(--noor-breedte);
  margin-inline: auto;
  padding-inline: var(--noor-rand);
}

/* De eerste band is de introductie: iets meer lucht erboven. */
.noor-band:first-child {
  padding-top: var(--noor-ruimte-l);
}

/* ==========================================================================
   4. Typografie
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--noor-kop);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--noor-inkt);
  text-wrap: balance;
}

/* De paginatitel staat buiten de banden en heeft daarom zijn eigen container. */
.page-header,
.entry-header {
  max-width: var(--noor-breedte);
  margin-inline: auto;
  padding: var(--noor-ruimte-l) var(--noor-rand) 0;
}

.entry-title {
  font-size: var(--noor-h1);
  max-width: 18ch;
  margin: 0;
}

h2 {
  font-size: var(--noor-h2);
  max-width: 22ch;
  margin-block: 0 var(--noor-ruimte-m);
}

h3 {
  font-size: var(--noor-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-block: var(--noor-ruimte-m) var(--noor-ruimte-s);
}

/* Tussenkopjes: de **1 - Kennismaken** regels uit de tekst. */
h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-block: var(--noor-ruimte-m) 0.35rem;
}

p, li {
  text-wrap: pretty;
}

.noor-band__binnen > p,
.noor-band__binnen > ul,
.noor-band__binnen > ol {
  max-width: var(--noor-leesbreedte);
  margin-block: 0 var(--noor-ruimte-m);
}

/* De openingsalinea van de pagina, groter gezet. */
.noor-band:first-child .noor-band__binnen > p:first-child {
  font-size: 1.3125rem;
  line-height: 1.5;
  max-width: 32rem;
}

em {
  font-style: normal;
  color: var(--noor-steen);
  font-size: 0.9375rem;
}

/* ==========================================================================
   5. Signatuur: de plattegrond

   De dienstensectie wordt een plattegrond. Drie kamers die een muur van 1px
   delen, met vier ambergele hoekmarkeringen zoals op een technische tekening.

   Dit is het enige sierelement op de site. Voeg er niets naast toe: twee
   opvallende elementen op een pagina heffen elkaar op.
   ========================================================================== */
.noor-plattegrond {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--noor-lijn);
  border: 1px solid var(--noor-lijn);
  margin-top: var(--noor-ruimte-l);
  position: relative;
}

/* De vier hoekmarkeringen. */
.noor-plattegrond::before,
.noor-plattegrond::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--noor-amber);
  pointer-events: none;
}

.noor-plattegrond::before {
  top: -5px;
  left: -5px;
  border-right: 0;
  border-bottom: 0;
}

.noor-plattegrond::after {
  bottom: -5px;
  right: -5px;
  border-left: 0;
  border-top: 0;
}

.noor-kamer {
  background: var(--noor-papier);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
}

.noor-band--linnen .noor-kamer {
  background: var(--noor-linnen);
}

.noor-kamer h3 {
  margin-top: 0;
}

.noor-kamer p {
  max-width: none;
  margin-bottom: var(--noor-ruimte-m);
}

/* De prijsregel en de link zakken naar de onderkant, zodat de drie kamers
   onderling uitlijnen ook als de teksten verschillend lang zijn. */
.noor-kamer p:last-child {
  margin-top: auto;
  margin-bottom: 0;
  font-size: 0.9375rem;
}

/* ==========================================================================
   6. Lijsten
   ========================================================================== */
.noor-band__binnen ul {
  list-style: none;
  padding-left: 0;
}

.noor-band__binnen ul > li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Streepje in plaats van een bolletje: rustiger, en past bij de muren. */
.noor-band__binnen ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.6rem;
  height: 1px;
  background: var(--noor-amber);
}

/* Genummerd alleen waar de volgorde echt iets betekent - de werkwijze. */
.noor-band__binnen ol {
  counter-reset: stap;
  list-style: none;
  padding-left: 0;
}

.noor-band__binnen ol > li {
  counter-increment: stap;
  position: relative;
  padding-left: 2.75rem;
  margin-bottom: 0.75rem;
  min-height: 1.75rem;
}

.noor-band__binnen ol > li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--noor-kop);
  font-size: 0.8125rem;
  color: var(--noor-steen);
  border: 1px solid var(--noor-lijn);
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
}

/* ==========================================================================
   7. Citaten
   ========================================================================== */
blockquote {
  margin: var(--noor-ruimte-l) 0;
  padding-left: var(--noor-ruimte-m);
  border-left: 1px solid var(--noor-amber);
  max-width: 34rem;
}

blockquote p {
  font-family: var(--noor-kop);
  font-size: 1.375rem;
  line-height: 1.35;
  margin: 0;
}

/* ==========================================================================
   8. Links en knoppen

   Twee niveaus. Het onderscheid komt uit de tekst: hoofdletters betekent
   primaire actie, zinsnotatie secundair.
   ========================================================================== */
.noor-band__binnen a:not(.noor-knop) {
  color: var(--noor-inkt);
  text-decoration-color: var(--noor-lijn);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s ease;
}

.noor-band__binnen a:not(.noor-knop):hover {
  text-decoration-color: var(--noor-amber);
}

.noor-knop {
  display: inline-block;
  font-weight: 500;
  color: var(--noor-inkt);
  text-decoration: none;
  border-bottom: 1px solid var(--noor-lijn);
  padding-bottom: 2px;
  transition: border-color 0.2s ease;
}

.noor-knop::after {
  content: " \2192";
  color: var(--noor-amber);
  display: inline-block;
  transition: transform 0.2s ease;
}

.noor-knop:hover {
  border-color: var(--noor-amber);
}

.noor-knop:hover::after {
  transform: translateX(3px);
}

.noor-knop--primair {
  background: var(--noor-olijf);
  color: var(--noor-papier);
  border: 0;
  padding: 0.9rem 1.75rem;
  margin-block: var(--noor-ruimte-s);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.noor-knop--primair::after {
  content: none;
}

.noor-knop--primair:hover {
  background: var(--noor-inkt);
  color: var(--noor-papier);
}

/* ==========================================================================
   9. Header en navigatie
   ========================================================================== */
.site-header {
  background: var(--noor-papier);
  border-bottom: 1px solid var(--noor-lijn);
  padding-block: var(--noor-ruimte-m);
}

.site-header > * {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--noor-ruimte-m);
  flex-wrap: wrap;
}

.site-title,
.site-title a {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--noor-inkt);
  text-decoration: none;
  margin: 0;
}

.site-description {
  display: none; /* staat al in de titel-tag; op het scherm is het ruis */
}

.site-navigation ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-navigation a {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--noor-inkt);
  text-decoration: none;
  padding-block: 0.5rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.site-navigation a:hover,
.site-navigation .current-menu-item > a,
.site-navigation .current-menu-parent > a {
  border-color: var(--noor-amber);
}

.site-navigation li {
  position: relative;
}

.site-navigation .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  min-width: 15rem;
  padding: 0.75rem 0;
  background: var(--noor-linnen);
  border: 1px solid var(--noor-lijn);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 40;
}

.site-navigation li:hover > .sub-menu,
.site-navigation li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.site-navigation .sub-menu li {
  width: 100%;
}

.site-navigation .sub-menu a {
  display: block;
  padding: 0.5rem 1.25rem;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: 0.875rem;
  font-weight: 400;
  border: 0;
}

.site-navigation .sub-menu a:hover {
  color: var(--noor-amber);
}

/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--noor-lijn);
  padding-block: var(--noor-ruimte-l);
  font-size: 0.875rem;
  color: var(--noor-steen);
}

.site-footer a {
  color: var(--noor-steen);
  text-decoration-color: var(--noor-lijn);
}

/* ==========================================================================
   11. Afbeeldingen
   ========================================================================== */
img {
  max-width: 100%;
  height: auto;
}

figcaption,
.wp-caption-text {
  font-size: 0.8125rem;
  color: var(--noor-steen);
  margin-top: 0.5rem;
}

/* ==========================================================================
   12. Toegankelijkheid
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--noor-amber);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   13. Mobiel

   De plattegrond wordt onder de 780px een kolom: drie kamers naast elkaar
   op een telefoon zijn drie onleesbare kolommen. De muren blijven, zodat de
   verwijzing overeind blijft.

   Hello Elementor klapt het menu niet zelf in; onder de 900px zetten we het
   onder de titel en klappen de submenus permanent uit, want hover bestaat
   niet op een touchscreen.
   ========================================================================== */
@media (max-width: 780px) {
  .noor-plattegrond {
    grid-template-columns: 1fr;
  }

  .noor-kamer p:last-child {
    margin-top: var(--noor-ruimte-s);
  }
}

@media (max-width: 900px) {
  .site-header > * {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-navigation ul {
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
  }

  .site-navigation .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: 0;
    padding: 0;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }

  .site-navigation .sub-menu a {
    padding: 0;
    font-size: 0.8125rem;
    color: var(--noor-steen);
  }
}

/* ==========================================================================
   14. Print
   ========================================================================== */
@media print {
  .site-header,
  .site-footer,
  .noor-knop {
    display: none;
  }

  .noor-band--linnen {
    background: none;
    margin-inline: 0;
    padding-inline: 0;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
}