/*
Theme Name: Conscious Campaign
Theme URI: https://consciouscampaign.nl/
Author: Conscious Campaign
Author URI: https://consciouscampaign.nl/
Description: Custom block theme voor Conscious Campaign, een online marketing bureau gericht op strategie, adverteren en optimaliseren. Volledig FSE, met een eigen motion engine (scroll reveals, parallax, tilt, magnetic buttons, view transitions), JSON-LD schema, Open Graph, een werkend contactformulier, team- en blogblokken en conversie-elementen.
Version: 1.11.29
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: conscious-campaign
Tags: full-site-editing, block-patterns, block-styles, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, rtl-language-support, translation-ready, wide-blocks, block-themes
*/

/* =====================================================================
 * Base
 * ================================================================== */

html {
    scroll-behavior: smooth;
    /* Anchor-links stoppen netjes onder de sticky header. */
    scroll-padding-top: calc(var(--cc-header-height, 84px) + 1.5rem);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /*
     * Lichte merktint als paginabodem. Het menu zweeft en is doorschijnend,
     * dus wat er achter en boven het menu zit, is deze kleur. Door de hero
     * bovenaan met exact dezelfde tint te laten beginnen (zie .cc-mesh in
     * motion.css), is er nooit een zichtbare witte strook of naad onder het
     * menu, ongeacht de precieze hoogte van de balk.
     *
     * Let op: hier stond eerder overflow-x: clip. Dat breekt position: sticky
     * op de zwevende navigatiebalk. Horizontaal scrollen voorkom je op de
     * secties zelf; de mesh-achtergronden hebben al overflow: hidden.
     */
    background-color: #eef3fb;
}

img {
    max-width: 100%;
    height: auto;
}

/* Focus states (accessibility) */
:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--wp--preset--color--primary-500);
    outline-offset: 3px;
    border-radius: 4px;
}

/* =====================================================================
 * Koplettertype: Alata
 *
 * Alata is het merklettertype van Conscious Campaign. Het wordt geladen
 * via Google Fonts (zie inc/enqueue.php). Alata is een geometrische sans
 * met één gewicht; de koppen krijgen een strakke letterafstand zodat het
 * niet te breed oogt.
 * ================================================================== */

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.cc-display,
.cc-display-lg,
.cc-headline,
.cc-hero-rotator-line,
.cc-hero-sub {
    font-family: 'Alata', var(--wp--preset--font-family--mulish, system-ui), sans-serif;
    letter-spacing: -0.02em;
}

/* =====================================================================
 * Typografie: display koppen met vloeiende clamp-schaal
 * ================================================================== */

.cc-display,
h1.cc-display {
    font-size: clamp(2.75rem, 7vw, 5.25rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 800;
    text-wrap: balance;
}

.cc-display-lg {
    font-size: clamp(3.5rem, 10vw, 7.5rem);
    line-height: 0.95;
    letter-spacing: -0.045em;
    font-weight: 800;
    text-wrap: balance;
}

.cc-headline {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.025em;
    font-weight: 700;
    text-wrap: balance;
}

.cc-lead {
    font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
    line-height: 1.6;
    text-wrap: pretty;
    max-width: 62ch;
}

/*
 * Kleine boventitel die als H1 dient. Bevat het zoekwoord, maar is
 * visueel bescheiden. Zo staat het belangrijkste zoekwoord semantisch
 * in de H1, zonder de grote roulerende kop te verdringen.
 */
.cc-hero-eyebrow {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--wp--preset--color--primary-600);
}

/*
 * De grote roulerende kop. Geen echte kop meer maar een alinea, zodat de
 * koppenstructuur klopt. cc-display geeft hem het display-formaat.
 */
.cc-hero-rotator-line {
    color: var(--wp--preset--color--neutral-900);
}

/*
 * Subtitel direct onder de hero-kop. Bewust een alinea en geen H2: een
 * kop hier zou de koppenstructuur van de pagina rommelig maken, terwijl
 * dit visueel gewoon een ondertitel is.
 */
.cc-hero-sub {
    margin-top: clamp(1rem, 2vw, 1.5rem);
    margin-bottom: 0;
    font-size: clamp(1.25rem, 2.4vw, 1.875rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--neutral-700);
    text-wrap: balance;
}

/* Tekst met gradient-vulling. */
.cc-gradient-text {
    background: var(--wp--preset--gradient--sunset-gradient, linear-gradient(90deg, #fe5b24, #3182ce));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Descenders niet afkappen. */
    padding-bottom: 0.08em;
}

/* Onderstreepte accent-swoosh onder een woord. */
.cc-underline-accent {
    position: relative;
    display: inline-block;
}

.cc-underline-accent::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.08em;
    height: 0.32em;
    border-radius: 999px;
    background: var(--wp--preset--color--secondary-300, #fe9c75);
    opacity: 0.42;
    z-index: -1;
    transform-origin: 0 50%;
    transform: scaleX(1);
    transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 200ms;
}

/*
 * De streep tekent zichzelf pas als het blok in beeld komt, niet al bij
 * het laden van de pagina. Zonder JavaScript staat hij gewoon meteen
 * goed, want dan wordt cc-reveal-init nooit gezet.
 */
.cc-reveal-init:not(.cc-revealed) .cc-underline-accent::after,
.cc-reveal-init:not(.cc-revealed).cc-underline-accent::after {
    transform: scaleX(0);
    transition: none;
}

/* =====================================================================
 * Header: sticky, shrink, blur, hide-on-scroll
 * ================================================================== */

.site-header:not(.site-header--floating) {
    position: sticky;
    top: 0;
    z-index: 100;
    transition:
        transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
        padding 320ms cubic-bezier(0.16, 1, 0.3, 1),
        background-color 320ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

/* Doorschijnende, geblurde balk zodra er gescrold wordt. */
.site-header:not(.site-header--floating).is-scrolled {
    background-color: rgba(255, 255, 255, 0.78) !important;
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    box-shadow:
        0 1px 0 rgba(15, 20, 25, 0.06),
        0 8px 28px rgba(15, 20, 25, 0.07);
    /* Krimpt tot ongeveer 60 procent van de oorspronkelijke padding. */
    padding-top: calc(var(--wp--preset--spacing--20, 1rem) * 0.6) !important;
    padding-bottom: calc(var(--wp--preset--spacing--20, 1rem) * 0.6) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header:not(.site-header--floating).is-scrolled {
        background-color: rgba(255, 255, 255, 0.97) !important;
    }
}

/* Schuift uit beeld bij scrollen omlaag. */
.site-header:not(.site-header--floating).is-hidden {
    transform: translate3d(0, -102%, 0);
}

.site-header:not(.site-header--floating).is-open {
    transform: none !important;
}

/* Logo krimpt mee. */
.site-header:not(.site-header--floating) .wp-block-site-logo img {
    transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1),
                height 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header:not(.site-header--floating).is-scrolled .wp-block-site-logo img {
    width: 132px;
}

.site-header__nav {
    gap: var(--wp--preset--spacing--30);
    align-items: center;
}

/* Menu-items: onderstreping die vanuit het midden groeit. */
.site-header:not(.site-header--floating) .wp-block-navigation-item__content {
    position: relative;
    padding-block: 0.35rem;
    text-decoration: none !important;
    transition: color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header:not(.site-header--floating) .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--wp--preset--color--secondary-500, #fe5b24);
    transform: scaleX(0);
    transform-origin: 50% 50%;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header:not(.site-header--floating) .wp-block-navigation-item__content:hover::after,
.site-header:not(.site-header--floating) .current-menu-item .wp-block-navigation-item__content::after,
.site-header:not(.site-header--floating) .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
    transform: scaleX(1);
}

.site-header:not(.site-header--floating) .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary-600, #2871b4);
}

/* =====================================================================
 * Mobiel menu: fullscreen met gestagger de items
 * ================================================================== */

.wp-block-navigation__responsive-container.is-menu-open {
    animation: cc-overlay-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

@keyframes cc-overlay-in {
    from { opacity: 0; clip-path: circle(0% at 92% 5%); }
    to   { opacity: 1; clip-path: circle(150% at 92% 5%); }
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-buttons {
    animation: cc-nav-item-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(140ms + var(--cc-nav-index, 0) * 62ms);
}

@keyframes cc-nav-item-in {
    from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: clamp(1.75rem, 7vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Hamburger en sluitknop wat groter en tikbaarder. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
    transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 200ms ease;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover {
    transform: scale(1.12) rotate(90deg);
}

/* =====================================================================
 * Kaarten en shadows (verdiepte schaal)
 * ================================================================== */

.wp-block-group.is-style-card,
.cc-card-shadow {
    background: var(--wp--preset--color--neutral-0);
    border-radius: 16px;
    padding: var(--wp--preset--spacing--40);
    box-shadow:
        0 1px 2px rgba(15, 20, 25, 0.04),
        0 4px 12px rgba(15, 20, 25, 0.05),
        0 12px 32px rgba(15, 20, 25, 0.05);
    transition:
        transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.wp-block-group.is-style-card:hover,
.cc-card-shadow:hover {
    transform: translateY(-6px);
    box-shadow:
        0 2px 4px rgba(15, 20, 25, 0.05),
        0 12px 24px rgba(15, 20, 25, 0.08),
        0 28px 56px rgba(15, 20, 25, 0.1);
}

.cc-image-shadow img,
.cc-image-shadow {
    box-shadow:
        0 4px 8px rgba(15, 20, 25, 0.05),
        0 16px 32px rgba(15, 20, 25, 0.1),
        0 40px 80px rgba(15, 20, 25, 0.12);
    border-radius: 18px;
}

/* Service category accent bars */
.cc-accent-strategie     { border-top: 4px solid var(--wp--preset--color--primary-500); }
.cc-accent-adverteren    { border-top: 4px solid var(--wp--preset--color--secondary-500); }
.cc-accent-optimaliseren { border-top: 4px solid var(--wp--preset--color--primary-700); }

/* =====================================================================
 * Knoppen
 * ================================================================== */

.wp-block-button__link.has-primary-500-background-color:hover,
.wp-block-button__link.has-background.has-primary-500-background-color:hover {
    background-color: var(--wp--preset--color--primary-600) !important;
}

.wp-block-button__link.has-secondary-500-background-color:hover,
.wp-block-button__link.has-background.has-secondary-500-background-color:hover {
    background-color: var(--wp--preset--color--secondary-600) !important;
}

.is-style-outline .wp-block-button__link:hover {
    background: var(--wp--preset--color--primary-500);
    color: var(--wp--preset--color--neutral-0);
    border-color: var(--wp--preset--color--primary-500);
}

/* Knop met pijl die uitschuift bij hover. */
.cc-btn-arrow .wp-block-button__link::after,
a.cc-btn-arrow::after {
    content: "\2192";
    display: inline-block;
    margin-left: 0.5em;
    transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cc-btn-arrow .wp-block-button__link:hover::after,
a.cc-btn-arrow:hover::after {
    transform: translateX(6px);
}

/* =====================================================================
 * Logo wall
 * ================================================================== */

.cc-logo-wall img {
    filter: grayscale(100%);
    opacity: 0.55;
    transition: filter 420ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cc-logo-wall img:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.06);
}

/* =====================================================================
 * Labels en stap-indicatoren
 * ================================================================== */

.cc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--wp--preset--color--primary-600);
    margin-bottom: 0.75rem;
}

/* Pulserend bolletje voor de eyebrow. */
.cc-eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    animation: cc-pulse 2.4s ease-in-out infinite;
}

@keyframes cc-pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 currentColor; }
    50%      { opacity: 0.6; transform: scale(0.85); box-shadow: 0 0 0 5px rgba(49, 130, 206, 0); }
}

.cc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0.95em;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--wp--preset--color--primary-50, #ebf4fb);
    color: var(--wp--preset--color--primary-700, #1f5a91);
    border: 1px solid var(--wp--preset--color--primary-100, #c7dff5);
}

.cc-badge--dark {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.16);
}

.cc-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--wp--preset--gradient--primary-gradient, linear-gradient(135deg, #3182ce, #1f5a91));
    color: var(--wp--preset--color--neutral-0);
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 1rem;
    transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cc-card:hover .cc-step-number,
.is-style-card:hover .cc-step-number {
    transform: scale(1.1) rotate(-6deg);
    box-shadow: 0 8px 20px rgba(49, 130, 206, 0.35);
}

/* =====================================================================
 * Secties: extra ademruimte en optionele diagonale scheiding
 * ================================================================== */

.cc-section-tight  { padding-block: clamp(3rem, 7vw, 5rem); }
.cc-section        { padding-block: clamp(4.5rem, 10vw, 8rem); }
.cc-section-tall   { padding-block: clamp(6rem, 14vw, 11rem); }

/* Zachte scheidingslijn met gradient. */
.cc-divider {
    height: 1px;
    border: 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--wp--preset--color--neutral-200, #e2e8f0),
        transparent
    );
}

/* =====================================================================
 * Reduced motion
 * ================================================================== */

@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;
    }

    .site-header:not(.site-header--floating).is-hidden { transform: none; }
}