/* GeschrevenGedichten 4.0.18 | Eén centraal bestand voor gedeelde content-buitenafstanden en contentbreedtes.
 * Volgorde: verticale maatvoering (v4.0.16), dan horizontale maatvoering (v4.0.17).
 * Header/navigatie en component-interieurs buiten scope.
 */

/* GG Helder 4.0.16 | één werkelijke buitenafstand (geen stapeling van padding + margin).
   Oorzaak 4.0.15: gg321 / gg313 zetten 35px margin op <main>, vv412 zette
   daarnaast 20px padding, gg305 heroless zette soms 0px, en gg31 hero
   voegde nog 14–26px toe. 4.0.15 raakte niet alle werkelijk gebruikte
   markup- en bodyclasscombinaties. DIT bestand vervangt het oude 4.0.15
   edge-bestand. Het verandert GEEN header, navigatie of component-interieurs. */

html body #ggw-site {
  --gg-edge-gap: 24px;
  --gg-section-gap: 64px;
  --gg-card-gap: 24px;
}

/* 1. De 35px main-marge vervalt; alleen de 24px main-padding blijft over.
      De twee ID's winnen van oude !important-regels uit gg321/gg305
      en het na wp_head geprinte header-styleblok van vv412. */
html body:not(.wp-admin) #ggw-site > main#main-content,
html body:not(.wp-admin) #ggw-site > main#ggwh-main,
html body:not(.wp-admin) #ggw-site > main.site-main {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
  padding-block-start: var(--gg-edge-gap) !important;
  padding-top: var(--gg-edge-gap) !important;
}
/* Een pagina met de oude .site-content wrapper krijgt niet én op de
   wrapper én op diens main padding. Dit raakt geen navigatie. */
html body:not(.wp-admin) #ggw-site > .site-content {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
  padding-block-start: var(--gg-edge-gap) !important;
  padding-top: var(--gg-edge-gap) !important;
}
html body:not(.wp-admin) #ggw-site > .site-content > main {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
  padding-block-start: 0 !important;
  padding-top: 0 !important;
}

/* 2. Voorpagina: drie echte buren: header → stage → quick/USP → gedichten.
      Voor de eerste sectie 24px, andere hoofdstukken 64px. */
html body #ggw-site > main#main-content.gg370-home > .gg370-stage {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}
html body #ggw-site > main#main-content.gg370-home > .gg370-stage + .gg370-quick {
  margin-block-start: var(--gg-edge-gap) !important;
  margin-top: var(--gg-edge-gap) !important;
}
html body #ggw-site > main#main-content.gg370-home > .gg370-quick + .gg370-section {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
  padding-block-start: var(--gg-edge-gap) !important;
  padding-top: var(--gg-edge-gap) !important;
}
/* Alle andere uitgewerkte voorpaginahoofdstukken volgen dezelfde 64px
   ritmiek; geen dubbele marge tussen de full-width quote en inhoud. */
html body #ggw-site > main#main-content.gg370-home > :is(.gg370-section,.gg370-choice):not(.gg370-quick + .gg370-section) {
  padding-block-start: var(--gg-section-gap) !important;
  padding-top: var(--gg-section-gap) !important;
}
html body #ggw-site > main#main-content.gg370-home > :is(.gg370-words,.gg370-invite) {
  margin-block-start: var(--gg-section-gap) !important;
  margin-top: var(--gg-section-gap) !important;
}

/* 3. Herbruikbare paginahero: gebruik de ÉCHTE renderer gg31_sitewide_hero()
      (direct main-child, in display:contents wrapper, of eerste child in .ggw-container).
      De main-padding draagt de eerste 24px. De hero heeft alléén onder 24px. */
html body #ggw-site main#main-content > .gg31-sitewide-hero,
html body #ggw-site main#main-content > .gg331-global-hero > .gg31-sitewide-hero,
html body #ggw-site main#main-content > .ggw-container > .gg31-sitewide-hero:first-child {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
  margin-block-end: var(--gg-edge-gap) !important;
  margin-bottom: var(--gg-edge-gap) !important;
}
/* Verwijder oude 14px/20px extra bovenmarges op de inhoud direct na de hero.
   De 24px ondermarge van de hero blijft dé scheiding. */
html body.gg304-compact #ggw-site main#main-content > .gg31-sitewide-hero + :is(.ggw-container,.ggw-section,.ggw-content-shell,.ggw-six-body),
html body.gg304-compact #ggw-site main#main-content > .gg331-global-hero + :is(.ggw-container,.ggw-section,.ggw-content-shell,.ggw-six-body),
html body #ggw-site main#main-content > .gg31-sitewide-hero + :is(.ggw-container,.ggw-section,.ggw-content-shell,.ggw-six-body) {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}

/* 4. Oude compacte titelvakken, uitsluitend indien eerste child van het main.
      Hun inhoud wordt ongemoeid gelaten, zodat Studio/rijmzoeken werkt. */
html body.gg305-heroless #ggw-site main#main-content > :is(
 .gg305-page-intro,.gg304-page-intro,.ggw-universal-hero,.ggw-hw-hero,
 .ggw-page-hero,.ggw-hero,.gg38-standard-hero,.ggw-studio-hero,
 .ggw-hub-hero,.gg-rhyme-hero,.gg-poet-hero,.ggwh-rhyme-hero,
 .ggpr-hero,.gg307-rhyme-intro,.gg318-page-hero
):first-child,
html body.gg305-heroless #ggw-site main#main-content > .ggw-container > :is(
 .gg305-page-intro,.gg304-page-intro,.ggw-universal-hero,.ggw-hw-hero,
 .ggw-page-hero,.ggw-hub-hero,.gg-rhyme-hero,.gg318-page-hero
):first-child {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
  margin-block-end: var(--gg-edge-gap) !important;
  margin-bottom: var(--gg-edge-gap) !important;
}

/* 5. Legacy hero + USP: één kloof, geen boven + onder optellen. */
html body #ggw-site main#main-content > :is(.ggw-universal-hero,.ggw-hw-hero,.ggw-page-hero) + :is(.ggw-hw-highlights,.gg50-benefits,.ggw-usps) {
  margin-block-start: 0 !important;
  margin-top: 0 !important;
}
html body #ggw-site main#main-content > :is(.ggw-hw-highlights,.gg50-benefits,.ggw-usps) + :is(.ggw-section,.ggw-container) {
  margin-block-start: var(--gg-edge-gap) !important;
  margin-top: var(--gg-edge-gap) !important;
}

@media (max-width:767px) {
  html body #ggw-site {
    --gg-edge-gap: 16px;
    --gg-section-gap: 40px;
    --gg-card-gap: 16px;
  }
}


/* GEDEELDE CONTENTBREEDTE | 1280 px (oude v4.0.17) */
/* GeschrevenGedichten 4.0.17 — gezamenlijke 1280px contentbreedte.
   Buiten de navigatie/header, popups, canvas/printvoorbeelden en editor controls.
   1280 is de MAXIMALE breedte van de sectie, NIET van iedere kaart of tekstregel.
   20px zijruimte desktop/tablet; 10px mobiel. */
html body:not(.wp-admin) #ggw-site {
 --gg417-content-max: 1280px;
 --gg417-side-gutter: 20px;
 --gg417-content-width: min(var(--gg417-content-max), calc(100% - (2 * var(--gg417-side-gutter))));
}
/* Centrale hoofdcontent: alle publieke templates, inclusief zonder #main-content. */
html body:not(.wp-admin) #ggw-site > main,
html body:not(.wp-admin) #ggw-site > .site-content,
html body:not(.wp-admin) #ggw-site > .container-studio,
html body:not(.wp-admin) #ggw-site > .builder-wrapper {
 width: var(--gg417-content-width) !important;
 max-width: var(--gg417-content-max) !important;
 min-width: 0 !important;
 box-sizing: border-box !important;
 margin-inline: auto !important;
}
/* Als een sectie al in de 1280px hoofdcontainer zit, moet die niet
   nogmaals links/rechts 20px verliezen. */
html body:not(.wp-admin) #ggw-site > main > :is(
 .ggw-container,.container-studio,.gg370-wrap,.ggw-page-container,
 .ggw-six-body,.ggw-overview-summary,.ggw-archive-body,
 .gg31-sitewide-hero,.gg331-global-hero,.gg328-masthead,.gg370-stage,
 .gg370-quick,.gg370-section,.gg370-choice,.gg370-invite,
 .gg370-words,.ggw-editorial-container,.ggw-layout-container,
 .gg-rhyme-shell,.gg-syn-shell,.gg-books-page,.gg-poets-page,
 .builder-wrapper,.builder-container,.vv-home-main,
 .ggh-atelier-start,.ggw-content-shell,.blog-studio-layout
 ) {
 box-sizing: border-box !important;
 max-width: 100% !important;
 width: 100% !important;
 min-width: 0 !important;
 margin-inline: auto !important;
}
/* Directe hero/wrapper/inhoud hebben identieke linker- en rechterranden. */
html body:not(.wp-admin) #ggw-site > main :is(
 .gg31-sitewide-hero,.gg328-masthead,.ggw-page-hero,
 .ggw-overview-summary,.ggw-six-body,.blog-studio-layout
 ) { box-sizing: border-box; min-width: 0; }
/* Geen horizontale overflow door grid children of lange woorden. */
html body:not(.wp-admin) #ggw-site main :is(
 .blog-content-area,.sidebar-area,.ggw-six-grid,.ggw-poem-grid,
 .gg370-poems,.gg370-themes,.gg370-reads__grid,
 .gg370-choice__grid,.gg390-trio,.ggw-layout-main,
 .gg-rhyme-shell,.ggw-studio-content
 ) { min-width: 0; max-width: 100%; }
/* Formulieren, teksten, afbeeldingen blijven binnen hun bestaande kaart. */
html body:not(.wp-admin) #ggw-site main img:not(.emoji) { max-width: 100%; }
/* De drie vaste randafstanden uit 4.0.16 gelden ook voor main templates zonder id. */
html body:not(.wp-admin) #ggw-site > main:not(#main-content):not(#ggwh-main) {
 margin-block-start:0 !important;
 padding-block-start:var(--gg-edge-gap,24px) !important;
}
/* De ruimte tussen eerste hero en eerste inhoud geldt ook buiten #main-content.
   Alleen bij directe buren; voorkomt stapelen van twee marges. */
html body:not(.wp-admin) #ggw-site > main > .gg31-sitewide-hero:first-child,
html body:not(.wp-admin) #ggw-site > main > .gg331-global-hero:first-child,
html body:not(.wp-admin) #ggw-site > main > .gg328-masthead:first-child {
 margin-top:0 !important;
 margin-bottom:var(--gg-edge-gap,24px) !important;
}
html body:not(.wp-admin) #ggw-site > main > :is(.gg31-sitewide-hero,.gg331-global-hero,.gg328-masthead) + :is(
 .ggw-container,.ggw-overview-summary,.blog-studio-layout,.ggw-six-body,.ggw-section,.ggw-content-shell
 ) { margin-top:0 !important; }
@media(max-width:767px) {
 html body:not(.wp-admin) #ggw-site { --gg417-side-gutter:10px; }
}