/**
 * Yakup Stucadoors — gedeelde basis voor alle secties: typografie, knoppen,
 * eyebrow, reveal en de regels voor verminderde beweging.
 */

body.yk-site {
    margin: 0;
    font-family: var(--dc-font-primary);
    font-size: var(--dc-text-base);
    line-height: var(--dc-leading-relaxed);
    color: var(--dc-text);
    background: var(--dc-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    padding-bottom: var(--yk-sticky-h, 0px);
}

/* Basisregels staan in :where(), zodat elke componentklasse ze zonder
   specificiteitsstrijd overschrijft. */
:where(.yk-site) *,
:where(.yk-site) *::before,
:where(.yk-site) *::after {
    box-sizing: border-box;
}

:where(.yk-site) :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--dc-font-heading);
    color: var(--dc-title);
    font-weight: 600;
    line-height: var(--dc-leading-tight);
    letter-spacing: -0.02em;
    margin: 0;
}

:where(.yk-site) p {
    font-family: var(--dc-font-primary);
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}

:where(.yk-site) a {
    color: inherit;
}

:where(.yk-site) img {
    max-width: 100%;
    height: auto;
    display: block;
}

:where(.yk-site) :focus-visible {
    outline: 3px solid var(--dc-secondary);
    outline-offset: 3px;
    border-radius: 4px;
}

.yk-wrap {
    width: 100%;
    max-width: calc(var(--dc-max) + 2 * var(--dc-gutter));
    margin-inline: auto;
    padding-inline: var(--dc-gutter);
}

.yk-section {
    position: relative;
    overflow-x: clip;
    padding-block: var(--dc-section-y);
}

.yk-section--alt {
    background: var(--dc-bg-alt);
}

.yk-head {
    display: grid;
    gap: 14px;
    max-width: 760px;
    margin-bottom: clamp(32px, 5vw, 64px);
}

.yk-head--center {
    margin-inline: auto;
    text-align: center;
    justify-items: center;
}

.yk-h2 {
    font-size: var(--dc-text-3xl);
}

.yk-lead {
    font-size: var(--dc-text-lg);
    color: var(--dc-text);
    max-width: 62ch;
}

.yk-icon {
    width: 22px;
    height: 22px;
    flex: none;
}

.yk-icon--sm {
    width: 16px;
    height: 16px;
}

/* ------------------------------------------------------------ eyebrow */

.yk-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--dc-font-primary);
    font-size: var(--dc-text-sm);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dc-title);
}

/* De mark: een stucspaan (tekstkleur) trekt een pleisterstreek (accent)
   van links naar rechts, kantelt aan het eind omhoog en laat een
   verfdruppel vallen. Zonder JS of bij verminderde beweging staat
   direct de eindtoestand. */
.yk-eyebrow__mark {
    width: min(2.5em, 40px);
    height: auto;
    flex: none;
    overflow: visible;
}

.yk-eyebrow__plaster,
.yk-eyebrow__drip {
    fill: none;
    stroke: #ffc402;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.yk-eyebrow__plaster {
    stroke-width: 3.2;
}

.yk-eyebrow__drip {
    stroke-width: 1.8;
}

.yk-eyebrow__trowel {
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: translate(35px, 8.3px) rotate(-14deg);
}

.yk-eyebrow__trowel rect {
    stroke: none;
}

.yk-eyebrow__trowel path {
    fill: none;
}

html.yk-js .yk-eyebrow[data-dc-draw]:not(.is-animated) :is(.yk-eyebrow__plaster, .yk-eyebrow__drip) {
    opacity: 0;
    stroke-dashoffset: 1;
}

html.yk-js .yk-eyebrow[data-dc-draw]:not(.is-animated) .yk-eyebrow__trowel {
    opacity: 0;
    transform: translate(2px, 11.2px) rotate(-8deg);
}

.yk-eyebrow.is-animated .yk-eyebrow__plaster {
    animation: yk-draw 1s ease-in-out both;
}

/* Lineair, met keyframes die de ease-in-out van de streek volgen, zodat
   de spaan steeds op de punt van de pleister ligt. */
.yk-eyebrow.is-animated .yk-eyebrow__trowel {
    animation: yk-trowel 1.25s linear both;
}

.yk-eyebrow.is-animated .yk-eyebrow__drip {
    animation: yk-draw 0.45s cubic-bezier(0.5, 0, 0.75, 0) 1.05s both;
}

/* Een ronde lijnkap toont bij dashoffset 1 nog een stip; daarom blijft de
   streek onzichtbaar tot hij echt begint. */
@keyframes yk-draw {
    0%   { opacity: 0; stroke-dashoffset: 1; }
    1%   { opacity: 1; }
    100% { opacity: 1; stroke-dashoffset: 0; }
}

/* De spaan volgt de golf van de streek en eindigt met een polsbeweging. */
@keyframes yk-trowel {
    0%   { opacity: 0; transform: translate(2px, 11.2px) rotate(-8deg); }
    8%   { opacity: 1; transform: translate(3px, 11.1px) rotate(-6deg); }
    20%  { transform: translate(6.4px, 10.2px) rotate(-6deg); }
    40%  { transform: translate(19px, 11.9px) rotate(3deg); }
    60%  { transform: translate(31.6px, 9.4px) rotate(-4deg); }
    80%  { transform: translate(35px, 9.3px) rotate(0deg); }
    100% { opacity: 1; transform: translate(35px, 8.3px) rotate(-14deg); }
}

/* ------------------------------------------------------------- knoppen */

.yk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 14px 26px;
    border-radius: var(--dc-radius-full);
    border: 1.5px solid transparent;
    font-family: var(--dc-font-primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--dc-duration-normal) ease-out, box-shadow var(--dc-duration-normal) ease-out, background-color var(--dc-duration-normal) ease-out, color var(--dc-duration-normal) ease-out;
    white-space: nowrap;
}

.yk-btn--dark {
    background: var(--dc-title);
    color: #ffffff;
}

.yk-btn--primary {
    background: var(--dc-primary);
    color: var(--dc-title);
}

.yk-btn--light {
    background: #ffffff;
    color: var(--dc-title);
}

.yk-btn--ghost {
    background: transparent;
    color: var(--dc-title);
    border-color: rgba(var(--dc-title-rgb), 0.22);
}

.yk-btn--block {
    width: 100%;
}

.yk-btn__arrow {
    width: 18px;
    height: 18px;
    transition: transform var(--dc-duration-normal) ease-out;
}

@media (hover: hover) {
    .yk-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--dc-shadow-glow-lg);
    }

    .yk-btn:hover .yk-btn__arrow {
        transform: translateX(4px);
    }

    .yk-btn--ghost:hover {
        border-color: var(--dc-title);
    }
}

/* ------------------------------------------------------------- reveal */

html.yk-js [data-dc-reveal]:not(.is-animated) {
    opacity: 0;
    transform: translateY(26px);
}

[data-dc-reveal] {
    transition: opacity 0.7s var(--dc-ease-default), transform 0.7s var(--dc-ease-default);
    transition-delay: calc(var(--i, 0) * var(--yk-stagger, 60ms));
}

.screen-reader-text,
.yk-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Elementor-containers van deze site zijn edge-to-edge; de widget bepaalt
   de binnenmarges. */
.yk-site .elementor-widget-container > section,
.yk-site .elementor-widget-container > header,
.yk-site .elementor-widget-container > footer {
    margin: 0;
}
@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;
    }

    html.yk-js [data-dc-reveal]:not(.is-animated) {
        opacity: 1;
        transform: none;
    }
}