/*
 * NETZLICHT WP base styles.
 * Consumes the tokens from style.css (--color-*, --space-*, --radius-*,
 * --container-*). Contains: reset, typography, a11y foundation, containers,
 * sections, buttons, header + drawer, footer. Section-specific styles live
 * with their Blockstudio block, never here (CSS hygiene rule: no !important,
 * patches into the original section).
 */

/* ---- Reset & base ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-sans);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.55;
    overflow-wrap: break-word;
}

img, video, iframe, svg, picture { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.15;
    text-wrap: balance;
    margin: 0 0 var(--space-sm);
}
h1 { font-size: clamp(2.2rem, 1.5rem + 3.5vw, 3.6rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); font-weight: 600; }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.8vw, 1.5rem); font-weight: 600; }
p  { margin: 0 0 var(--space-sm); text-wrap: pretty; }

a { color: var(--color-primary); }

/* ---- A11y foundation -------------------------------------------------- */
/* Skip link: visually hidden until focused (BITV/WCAG 2.4.1). */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--color-primary);
    color: var(--color-primary-fg);
    border-radius: 0 0 var(--radius-sm) 0;
    text-decoration: none;
}
.skip-link:focus-visible { left: 0; }

/* Global keyboard focus ring (WCAG 2.4.7). */
:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* WP convention class (menus, widgets, plugins rely on it). */
.screen-reader-text {
    position: absolute !important; /* framework constraint override: WP core convention class, must win everywhere */
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* System preference: kill animation/transition globally (WCAG 2.3.3).
   Blocks with a motion toggle additionally pause via body.motion-paused. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important; /* framework constraint override: reduced-motion must beat every block animation */
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---- Containers & sections -------------------------------------------- */
.container {
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}
.container--mid  { max-width: var(--container-mid); }
.container--text { max-width: var(--container-text); }
.container--full { max-width: 100%; }

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--alt { background: var(--color-bg-soft); }

/* ---- Buttons ----------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 0.9rem 2rem;
    border: 0;
    border-radius: var(--radius-button);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary { background: var(--color-primary); color: var(--color-primary-fg); }
.btn-accent  { background: var(--color-accent); color: var(--color-accent-fg); }
@media (hover: hover) and (pointer: fine) {
    .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
}

/* ---- Header ------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding-block: 0.75rem;
}
.custom-logo { display: block; width: auto; max-height: 56px; }
.site-title {
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text);
    /* Brand text scales down on mobile, never display:none (framework rule). */
    font-size: clamp(1rem, 3.4vw, 1.35rem);
    white-space: nowrap;
}

.site-nav__list {
    display: flex;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav__list a {
    display: block;
    padding: 0.5rem 0.9rem;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a { color: var(--color-primary); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
    .site-nav__list a:hover { background: var(--color-bg-soft); }
}

/* Burger (hidden on desktop, 3 bars -> X via aria-expanded). */
.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 0.6rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.nav-toggle__box {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
}
.nav-toggle__box span {
    height: 2px;
    background: var(--color-text);
    border-radius: 1px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile drawer (sibling of the header, see header.php) ------------- */
.site-drawer {
    position: fixed;
    inset-block: 0;
    right: 0;
    z-index: 120;
    width: min(320px, 85vw);
    background: var(--color-bg);
    padding: var(--space-xl) var(--space-md) var(--space-md);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12);
}
.site-drawer[data-open="true"] { transform: translateX(0); }
.site-drawer__close {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    background: transparent;
    border: 0;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--color-text);
    border-radius: var(--radius-sm);
}
.site-drawer__items {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-drawer__items a {
    display: block;
    padding: 0.75rem 0.9rem;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
}
.site-drawer__items .current-menu-item > a { color: var(--color-primary); font-weight: 600; }

/* Backdrop behind the open drawer. */
body.nav-open { overflow: hidden; }
body.nav-open::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Mobile breakpoint - site-specific per fork (framework note: complex navs
   need it earlier), template default 960px like website-template. */
@media (max-width: 960px) {
    .site-nav { display: none; }
    .nav-toggle { display: inline-flex; }
}

/* ---- Footer ------------------------------------------------------------ */
.site-footer {
    background: var(--color-primary);
    color: var(--color-primary-fg);
    margin-top: var(--space-2xl);
    padding-block: var(--space-xl);
    font-size: 0.95rem;
}
.site-footer a { color: var(--color-primary-fg); }
.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}
.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    list-style: none;
    margin: 0;
    padding: 0;
}