/*
Theme Name: Teigtaschen
Theme URI: https://www.teigtaschen.at
Author: EGGER-IT
Author URI: https://www.egger-it.com
Description: Individuelles, klassisches Theme für BRUNNER – die mit den Nudeln (teigtaschen.at). Designkonzept „Kreidewerkstatt“. Basiert auf WPBakery (Visual Composer) und ACF Pro.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: Proprietary
Text Domain: teigtaschen
*/

/**
 * Layout tokens + base. Colours live in css/colors.css,
 * type scale in css/typography.css.
 */
:root {
    --wrapper-max-width: 82rem;         /* 1312px incl. padding */
    --container-padding: clamp(1rem, 4.4vw, 4rem);
    --section-space: clamp(4rem, 3rem + 4vw, 6rem);
    --section-space-s: clamp(2rem, 1.5rem + 2vw, 3rem);     /* half rhythm */
    --section-space-l: clamp(6rem, 4.5rem + 6vw, 9rem);     /* 1.5 × rhythm */

    --radius-sm: .875rem;               /* 14 — inputs, inner image */
    --radius: 1.25rem;                  /* 20 — cards */
    --radius-lg: 1.5rem;                /* 24 — big cards, forms */
    --radius-pill: 999px;

    --shadow-card-hover: 0 26px 46px -26px rgba(32, 32, 29, .45);
    --shadow-float: 0 40px 80px -40px rgba(32, 32, 29, .4);

    --ease-out: cubic-bezier(.32, .72, 0, 1);
    --ease-reveal: cubic-bezier(.16, 1, .3, 1);
    --transition-fast: .2s ease;
    --transition: .25s var(--ease-out);
    --transition-slow: .35s var(--ease-out);

    /* Reference only — custom properties don't work in @media, write the rem value out */
    --bp-sm: 36rem;    /* 576 */
    --bp-md: 48rem;    /* 768 */
    --bp-lg: 62rem;    /* 992 */
    --bp-xl: 75rem;    /* 1200 */
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    margin: 0;
    background: var(--color-background);
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-link-hover);
}

::selection {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

.bg-dark :focus-visible,
.tafel :focus-visible {
    outline-color: var(--color-focus-on-dark);
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

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

.skip-link:focus {
    position: fixed !important;
    top: 1rem;
    left: 1rem;
    z-index: 1000;
    width: auto;
    height: auto;
    margin: 0;
    padding: .875rem 1.375rem;
    clip: auto;
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-pill);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-float);
}

/* ---------- Layout ---------- */
.wrapper,
.container {
    width: 100%;
    max-width: var(--wrapper-max-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.section {
    padding-block: var(--section-space);
}

.section--alt {
    background: var(--color-background-alt);
}

/* ---------- Chalkboard surface (lead motif) ---------- */
.tafel,
.bg-dark {
    position: relative;
    isolation: isolate;
    background-color: var(--color-dark);
    color: var(--color-text-inverse);
}

.tafel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url('assets/images/tafel.webp');
    /* cover, not a repeating tile: the texture is only ~770px high per tile and
       would show a horizontal seam on taller blocks (hero + overlaid header) */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: .58;
    pointer-events: none;
}

.tafel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(80% 60% at 30% 26%, rgba(255, 252, 240, .09), transparent 62%);
    pointer-events: none;
}

.tafel p,
.bg-dark p {
    color: var(--color-text-inverse-muted);
}

.tafel .hand,
.bg-dark .hand {
    color: var(--color-accent-on-dark);
}

.tafel .kicker,
.bg-dark .kicker {
    color: var(--color-text-inverse-muted);
}

/* ---------- Chalk stroke under headlines ---------- */
.strich {
    display: block;
    width: 8.25rem;
    height: .5625rem;
    margin-top: 1rem;
    color: var(--color-accent);
    opacity: .85;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6875rem;
    min-height: 3.25rem;
    padding: 1rem 1.75rem;
    border: 0;
    border-radius: var(--radius-pill);
    font-size: .96875rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: transform var(--transition), background-color var(--transition),
                color var(--transition), box-shadow var(--transition);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn svg {
    flex: none;
    transition: transform .3s var(--ease-out);
}

.btn:hover svg {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn svg {
        transition: background-color var(--transition), color var(--transition), box-shadow var(--transition);
    }

    .btn:hover,
    .btn:hover svg {
        transform: none;
    }
}

/* red — primary action */
.btn-primary {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    box-shadow: 0 12px 24px -12px rgba(208, 18, 31, .7);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    color: var(--color-primary-contrast);
    box-shadow: 0 18px 30px -14px rgba(208, 18, 31, .75);
}

/* chalk outline — on the chalkboard */
.btn-chalk {
    background: transparent;
    color: var(--color-text-inverse);
    box-shadow: inset 0 0 0 1.5px rgba(245, 242, 233, .45);
}

.btn-chalk:hover {
    background: rgba(245, 242, 233, .1);
    color: var(--color-white);
    box-shadow: inset 0 0 0 1.5px var(--color-text-inverse);
}

/* dark — secondary action on light ground */
.btn-dark {
    background: var(--color-dark);
    color: var(--color-white);
}

.btn-dark:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* outline — tertiary on light ground */
.btn-outline {
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: inset 0 0 0 1.5px var(--color-border);
}

.btn-outline:hover {
    color: var(--color-text);
    box-shadow: inset 0 0 0 1.5px var(--color-text);
}

.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
}

/* ---------- Cards ---------- */
.card {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: 2.125rem 2rem 1.875rem;
    box-shadow: inset 0 0 0 1px var(--color-border);
}

/* ---------- Badge ---------- */
.badge {
    display: inline-block;
    padding: .3125rem .6875rem;
    border-radius: var(--radius-pill);
    background: var(--color-background-alt);
    color: var(--color-text-muted);
    font-size: .65625rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: .14em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* ---------- Forms ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
select,
textarea {
    width: 100%;
    min-height: 3.25rem;
    padding: .9375rem 1.125rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-background);
    color: var(--color-text);
    font-size: 1rem;
    box-shadow: inset 0 0 0 1.5px var(--color-border);
    transition: box-shadow var(--transition-fast), background-color var(--transition-fast);
}

textarea {
    min-height: 9.375rem;
    line-height: 1.6;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: #8a8378;
}

input:hover,
select:hover,
textarea:hover {
    box-shadow: inset 0 0 0 1.5px #c9bfa9;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 0;
    background: var(--color-surface);
    box-shadow: inset 0 0 0 2px var(--color-focus);
}

/* ---------- Utilities ---------- */
.text-primary { color: var(--color-primary); }
.bg-alt { background: var(--color-background-alt); }

@media (max-width: 47.99rem) {
    .hide-on-mobile { display: none !important; }
}

@media (min-width: 48rem) {
    .hide-on-desktop { display: none !important; }
}