/*
Theme Name:  Dana's Stekkie Child
Template:    kadence
Version:     1.0.23
Description: Child theme for Dana's Stekkie website.
Text Domain: danas-stekkie-child
*/

/* Custom styles go below this line */

/* ==========================================================================
   Dana's Stekkie brand palette (bij-linda-look redesign, 2026-08-01)
   ========================================================================== */
:root {
    --dana-koraal: #F0867A;
    --dana-salie: #71946F;
    --dana-dennengroen: #2F5632;
    --dana-room: #FDFDDC;
}

/* ==========================================================================
   Prevent horizontal scrollbar from 100vw full-bleed sections
   ========================================================================== */
body {
    overflow-x: hidden;
}

/* Home page: content area between the two divider-waves reads as white
   (Kadence's unboxed .site background), should be Room to match the
   rest of the palette. */
html body.page-id-23 .site {
    background: var(--dana-room);
}

/* ==========================================================================
   Full-bleed section helper (works on a plain div, not just core blocks)
   ========================================================================== */
.dana-hero,
.dana-closing-social {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.dana-hero {
    background: linear-gradient(180deg, rgba(47, 86, 50, 0.2) 0%, rgba(47, 86, 50, 0.45) 100%),
        var(--dana-dennengroen)
        url("https://danas-stekkie.nl/wp-content/uploads/2026/07/1000108804-1536x1157.jpg")
        center/cover no-repeat;
    color: var(--dana-room);
    text-align: center;
    padding: 5rem 1.5rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.dana-hero h1 {
    color: var(--dana-room);
}
.dana-hero-ctas {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.dana-hero-ctas a {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
}

/* ==========================================================================
   Quote overlay card
   ========================================================================== */
.dana-quote-overlay {
    background: none;
    color: var(--dana-room);
    font-style: italic;
    font-size: 1.25rem;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
    padding: 0 1.5rem;
    max-width: 32rem;
    margin: 0 auto 1.5rem;
    text-align: center;
}

/* ==========================================================================
   Shape divider (CSS-only wave, no plugin dependency)
   ========================================================================== */
.dana-divider-wave {
    width: 100vw;
    height: 60px;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    background-color: var(--dana-salie);
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><path d='M0,40 C300,100 900,0 1200,60 L1200,120 L0,120 Z' fill='%23FDFDDC'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: block;
}

/* Variant: divider sits directly below the hero (.dana-hero, Dennengroen).
   Flat background matches the hero so there's no seam at the top edge. */
.dana-divider-wave-after-hero {
    background-color: var(--dana-dennengroen);
}

/* Variant: divider sits directly above the closing-social section
   (.dana-closing-social, Dennengroen). Rotated 180deg so the cream wave
   reads at the top (matching the content above) and the flat green reads
   at the bottom (matching the section below). */
.dana-divider-wave-before-social {
    background-color: var(--dana-dennengroen);
    transform: rotate(180deg);
}

/* ==========================================================================
   Photo placeholder (structure now, real photo dropped in later)
   ========================================================================== */
.dana-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dana-room);
    border: 2px dashed var(--dana-salie);
    color: var(--dana-salie);
    font-style: italic;
    text-align: center;
    padding: 1rem;
    box-sizing: border-box;
}
.dana-photo-placeholder:not(.dana-oval-crop) {
    min-height: 240px;
}

/* Real photo dropped into a plain (non-oval) placeholder box: same fill
   logic as .dana-oval-crop below, border switches from dashed to solid. */
.dana-photo-placeholder.wp-block-image {
    border-style: solid;
    overflow: hidden;
}
.dana-photo-placeholder.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   Oval photo crop
   ========================================================================== */
.dana-oval-crop {
    aspect-ratio: 3 / 4;
    clip-path: ellipse(50% 50% at 50% 50%);
    max-width: 280px;
    width: 100%;
    margin: 0 auto 1rem;
    display: block;
    object-fit: cover;
}

.dana-oval-crop.dana-photo-placeholder {
    border-style: solid;
}

/* When this class sits on a Gutenberg Image block, it lands on the
   <figure class="wp-block-image dana-oval-crop"> wrapper rather than the
   <img> itself, object-fit only affects the actual replaced element, so
   the img inside needs to be told to fill and cover that figure box. */
.dana-oval-crop.wp-block-image {
    overflow: hidden;
}
.dana-oval-crop.wp-block-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* When the image block links somewhere, core wraps the <img> in an <a>.
   Make that anchor fill the figure box so object-fit/height:100% on the
   img still resolve against a definite height. */
.dana-oval-crop.wp-block-image a,
.dana-photo-placeholder.wp-block-image a {
    display: block;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Three-column highlight grid (Home)

   Note: when this class sits on a Gutenberg Group block, core wraps the
   actual children in an extra `.wp-block-group__inner-container` div at
   render time (not present in the saved block markup). That inner div is
   the real direct parent of the items, so the grid/flex treatment goes
   there, the outer element is left with default `display:block` (its one
   full-width child is a no-op wrapper, no extra CSS needed). Plain
   non-Group-block usage (bare div, no inner wrapper) still needs the
   layout directly on the class itself, so both forms are covered below.

   (Deliberately not `display:contents` on the outer, Chromium mis-paints
   sibling `clip-path` elements, e.g. .dana-oval-crop photos, when a
   `display:contents` ancestor is in the chain, only the first one painted
   in testing.)
   ========================================================================== */
.dana-highlight-grid > .wp-block-group__inner-container,
.dana-highlight-grid:not(:has(> .wp-block-group__inner-container)) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
    padding: 2rem 1.5rem;
}
@media (max-width: 781px) {
    .dana-highlight-grid > .wp-block-group__inner-container,
    .dana-highlight-grid:not(:has(> .wp-block-group__inner-container)) {
        grid-template-columns: 1fr;
    }
}

/* Aanbod overview (Wat past bij jou?): real photos reuse .dana-photo-placeholder
   for its box sizing, but its dashed-border/cream-fill "placeholder" treatment
   (still correct for genuinely empty placeholders elsewhere, e.g. Wat doe ik?/
   Theorie) reads as an uninvited boxed card here. Scoped to inside
   .dana-highlight-grid only: photo bleeds to the column edge, no border/fill,
   per §17's "don't repeat the same card shape/frame everywhere". */
.dana-highlight-grid .wp-block-image.dana-photo-placeholder {
    border: none;
    background: none;
    padding: 0;
}

/* ==========================================================================
   Home: asymmetric highlight tiles (§17 editorial direction, 2026-09-03)

   Three clickable nav tiles (De plek / Wie ben ik? / Wat past bij jou?),
   deliberately NOT identical: one plain photo tile, one flat-color tile
   with body copy, one flat-color tile with a handwritten accent line and
   a small circular photo badge overlapping its top edge. Same grid
   mechanics/gotcha handling as .dana-highlight-grid above.
   ========================================================================== */
.dana-highlight-tiles > .wp-block-group__inner-container,
.dana-highlight-tiles:not(:has(> .wp-block-group__inner-container)) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 1rem 1.5rem 3rem;
}
@media (max-width: 781px) {
    .dana-highlight-tiles > .wp-block-group__inner-container,
    .dana-highlight-tiles:not(:has(> .wp-block-group__inner-container)) {
        grid-template-columns: 1fr;
    }
}

.dana-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 320px;
    border-radius: 16px;
    overflow: hidden;
    padding: 1.75rem;
    text-decoration: none;
    box-sizing: border-box;
}
.dana-tile h3 {
    margin: 0 0 0.5rem;
}
.dana-tile h3 a {
    text-decoration: none;
    color: inherit;
}
.dana-tile p {
    margin: 0;
}

.dana-tile-photo {
    background-size: cover;
    background-position: center;
    color: var(--dana-room);
}
.dana-tile-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.6) 100%);
}
.dana-tile-photo > * {
    position: relative;
    z-index: 1;
}
.dana-tile-photo h3,
.dana-tile-photo h3 a {
    color: var(--dana-room);
}

.dana-tile-dark {
    background: var(--dana-dennengroen);
    color: var(--dana-room);
    justify-content: center;
}
.dana-tile-dark h3,
.dana-tile-dark h3 a {
    color: var(--dana-room);
}

.dana-tile-olive {
    background: var(--dana-salie);
    color: var(--dana-room);
    justify-content: center;
}
.dana-tile-olive h3,
.dana-tile-olive h3 a {
    color: var(--dana-room);
}

.dana-tile-accent-photo {
    position: absolute;
    top: -32px;
    right: -20px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--dana-room);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    z-index: 2;
}
.dana-tile-accent-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dana-handwritten {
    font-family: 'Caveat', cursive;
    font-size: 1.6rem;
    line-height: 1.3;
}

/* ==========================================================================
   Side-by-side photo + text (Wie ben ik?)
   ========================================================================== */
.dana-side-by-side > .wp-block-group__inner-container,
.dana-side-by-side:not(:has(> .wp-block-group__inner-container)) {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
    padding: 2rem 1.5rem;
}
.dana-side-by-side > .wp-block-group__inner-container > div,
.dana-side-by-side:not(:has(> .wp-block-group__inner-container)) > div {
    flex: 1 1 320px;
}

/* Quote panel: the colored half of a .dana-side-by-side pairing (Wie ben ik
   top block: portrait photo + this panel), §17 editorial direction. */
.dana-quote-panel {
    background: var(--dana-dennengroen);
    color: var(--dana-room);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.5;
    text-align: center;
    box-sizing: border-box;
}
.dana-quote-panel h1 {
    color: var(--dana-room);
    font-style: normal;
}

/* Pull-quote: a highlighted sentence pulled out of body prose as a visual
   rest point, per §17 ("Licht een paar letterlijke zinnen uit"). */
.dana-pull-quote {
    color: var(--dana-dennengroen);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    border-left: 4px solid var(--dana-koraal);
    padding: 0.25rem 0 0.25rem 1.25rem;
    margin: 2.5rem 0;
    max-width: 34rem;
}
.dana-pull-quote.dana-align-right {
    margin-left: auto;
    border-left: none;
    border-right: 4px solid var(--dana-koraal);
    padding: 0.25rem 1.25rem 0.25rem 0;
    text-align: right;
}

/* Small asymmetric secondary photo, placed off-center rather than
   centered like the main .dana-oval-crop portrait. */
.dana-oval-crop.dana-oval-crop-float {
    max-width: 220px;
}
.dana-oval-crop.dana-oval-crop-float.dana-align-right {
    margin-left: auto;
    margin-right: 0;
}
.dana-oval-crop.dana-oval-crop-float.dana-align-left {
    margin-right: auto;
    margin-left: 0;
}

/* Closing signature line under the handwritten accent style. */
.dana-signoff {
    text-align: center;
    margin-top: 1rem;
}

/* ==========================================================================
   Photo + text-overlay card (Wat doe ik?, Theorie)
   ========================================================================== */
.dana-service-block > .wp-block-group__inner-container,
.dana-service-block:not(:has(> .wp-block-group__inner-container)) {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 3rem;
}
.dana-service-block .dana-photo-placeholder {
    flex: 1 1 320px;
}
.dana-service-block .dana-overlay-card {
    flex: 1 1 280px;
    background: #FFFFFF;
    padding: 1.5rem 2rem;
    border-radius: 16px;
    margin: -2rem 0 0 -2rem;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    box-shadow: 0 4px 16px rgba(47, 86, 50, 0.15);
}
@media (max-width: 600px) {
    .dana-service-block .dana-overlay-card {
        margin: 1rem 0 0 0;
    }
}

/* ==========================================================================
   Review quote grid (Reviews)
   ========================================================================== */
.dana-review-grid > .wp-block-group__inner-container,
.dana-review-grid:not(:has(> .wp-block-group__inner-container)) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 1.5rem;
}
@media (max-width: 600px) {
    .dana-review-grid > .wp-block-group__inner-container,
    .dana-review-grid:not(:has(> .wp-block-group__inner-container)) {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Wheel of Consent diagram (Theorie)
   ========================================================================== */
.dana-woc-diagram.wp-block-image {
    margin: 2rem auto;
}
.dana-woc-diagram.wp-block-image img {
    display: block;
    height: auto;
}

/* ==========================================================================
   2x2 quadrant grid (Theorie: Dienen/Aannemen/Nemen/Toestaan)

   See the highlight-grid comment above for why both the
   `.wp-block-group__inner-container` and plain-div selectors are needed.
   ========================================================================== */
.dana-quadrant-grid > .wp-block-group__inner-container,
.dana-quadrant-grid:not(:has(> .wp-block-group__inner-container)) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 1.5rem 0;
}
@media (max-width: 600px) {
    .dana-quadrant-grid > .wp-block-group__inner-container,
    .dana-quadrant-grid:not(:has(> .wp-block-group__inner-container)) {
        grid-template-columns: 1fr;
    }
}
/* Extra-specific selector (not just `.dana-quadrant-box`) needed to beat
   WordPress's own flow-layout block-spacing rule, which gives every child
   except the last one a `margin-bottom` (here: 32px) at equal-or-higher
   specificity. Left in place, that margin counts toward this item's outer
   size for CSS Grid row-track sizing, so a non-last box (margin kept)
   silently claims a shorter *content* height than a last box (no margin)
   even though both stretch to the same track height, i.e. mismatched box
   heights within the same grid row. See the page-id-23 background-color
   fix above for the same kind of specificity issue. */
.dana-quadrant-grid .wp-block-group.dana-quadrant-box {
    margin: 0;
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
}
.dana-quadrant-box h3 {
    margin-top: 0;
}
.dana-quadrant-koraal {
    background: rgba(240, 134, 122, 0.18);
}
.dana-quadrant-salie {
    background: rgba(113, 148, 111, 0.18);
}

/* ==========================================================================
   Example callout box (Theorie), soft tint per Dana's own layout notes
   ========================================================================== */
.dana-example-box {
    background: rgba(113, 148, 111, 0.12);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}

/* ==========================================================================
   Subtle disclaimer callout (Theorie: "Goed om te weten")
   ========================================================================== */
.dana-callout {
    background: var(--dana-room);
    border-left: 4px solid var(--dana-dennengroen);
    border-radius: 0 12px 12px 0;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
}

/* ==========================================================================
   Closing social section (Home, Contact)
   ========================================================================== */
.dana-closing-social {
    background: var(--dana-dennengroen);
    color: var(--dana-room);
    text-align: center;
    padding: 3rem 1.5rem;
}
.dana-closing-social h3 {
    color: var(--dana-room);
    margin-bottom: 1.5rem;
}
.dana-social-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.dana-social-row a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--dana-room);
    color: var(--dana-dennengroen);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.dana-social-row a:hover,
.dana-social-row a:focus-visible {
    background: var(--dana-koraal);
    color: var(--dana-room);
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}
.dana-social-row svg {
    width: 24px;
    height: 24px;
}
@media (prefers-reduced-motion: reduce) {
    .dana-social-row a {
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    .dana-social-row a:hover,
    .dana-social-row a:focus-visible {
        transform: none;
    }
}