/* Thermochema Blocks — Shared Base Styles */

/* Blocks-only tokens (design tokens live in thch-project/thch-tokens.css) */
:root {
    --thch-split-gap: 5rem;

    /* Section rhythm — single source of truth for the vertical space a section
       puts above and below itself. 6rem/4rem is the value the majority of
       blocks already used; the outliers (48/56/80/40px) were drift, not intent.
       Change these two numbers to re-tune the whole site.
       --thch-section-padding is the shorthand icon-cards/logos/history already
       referenced — it was never defined, so those three silently sat at 5rem
       on every breakpoint, mobile included. */
    --thch-section-py: 6rem;
    --thch-section-padding: var(--thch-section-py) 0;

    /* Kartenrhythmus. Der Abstand ZWISCHEN Karten muss deutlich groesser sein
       als der Abstand INNERHALB einer Karte, sonst gruppiert das Auge falsch.
       Gestapelt braucht es mehr Trennung als nebeneinander, weil dort keine
       Spaltenkante die Arbeit mit uebernimmt. Faustregel: aussen >= 1.5x innen. */
    --thch-gap-card: 2rem;   /* 32px, nebeneinander */
    --thch-pad-card: 2rem;   /* 32px Innenabstand */
}

/* Karten stapeln je nach Block ab 62rem, die Section-Hoehe schaltet erst ab
   48rem. Deshalb zwei getrennte Bloecke statt eines gemeinsamen. */
@media (max-width: 62rem) {
    :root {
        --thch-gap-card: 2.5rem;  /* 40px, gestapelt */
        --thch-pad-card: 1.5rem;  /* 24px, damit 40:24 = 1.67 */
    }
}

@media (max-width: 48rem) {
    :root {
        --thch-section-py: 4rem;
    }
}

/* Zwei Sections auf demselben Grund stapeln ihre Polsterung: 64 unten plus
   64 oben ergeben mobil 128px, auf Desktop 192px - ohne Farbwechsel, ohne
   Linie, ohne irgendetwas dazwischen. Das liest sich nicht als zwei
   Abschnitte, sondern als einer mit einem Loch. Wechselt der Grund, traegt
   die Kante den Schnitt und der volle Abstand ist richtig.

   Grundsatz dahinter: den vertikalen Abstand besitzt die Section, nie ihre
   Randkinder. Wer als Kind am Sectionrand sitzt, bekommt padding-inline,
   nicht padding.

   ⚠ Der +-Kombinator ueberspringt keine Elemente, auch keine unsichtbaren.
   Ein <script> zwischen zwei Sections legt die Regel still lahm. Die
   eigentliche Loesung steht im Markup - die Bloecke geben ihre Scripts
   INNERHALB der Section aus. Die script-Varianten hier sind nur das Netz
   fuer Fremdcode (Etch, Theme, Plugins), den wir nicht in der Hand haben.

   Der Selektor beginnt bewusst mit `section`: der Breadcrumb ist ein <nav>
   mit derselben Grund-Klasse. Ohne die Einschraenkung nahm die Regel dem
   Hero dahinter sein padding-top, und Eyebrow plus H1 klebten direkt unter
   der Brotkrume. Ein Breadcrumb ist Navigation, kein Abschnitt. */
section[class*="--bg-warm-beige"] + [class*="--bg-warm-beige"],
section[class*="--bg-warm-beige"] + script + [class*="--bg-warm-beige"],
section[class*="--bg-warm-beige"] + script + script + [class*="--bg-warm-beige"],
section[class*="--bg-beige"] + [class*="--bg-beige"],
section[class*="--bg-beige"] + script + [class*="--bg-beige"],
section[class*="--bg-beige"] + script + script + [class*="--bg-beige"],
section[class*="--bg-neutral"] + [class*="--bg-neutral"],
section[class*="--bg-neutral"] + script + [class*="--bg-neutral"],
section[class*="--bg-neutral"] + script + script + [class*="--bg-neutral"],
section[class*="--bg-white"] + [class*="--bg-white"],
section[class*="--bg-white"] + script + [class*="--bg-white"],
section[class*="--bg-white"] + script + script + [class*="--bg-white"],
section[class*="--bg-dark"] + [class*="--bg-dark"],
section[class*="--bg-dark"] + script + [class*="--bg-dark"],
section[class*="--bg-dark"] + script + script + [class*="--bg-dark"],
section[class*="--bg-primary"] + [class*="--bg-primary"],
section[class*="--bg-primary"] + script + [class*="--bg-primary"],
section[class*="--bg-primary"] + script + script + [class*="--bg-primary"] {
    padding-top: 0;
}

/* Letzte Section und Footer auf demselben Grund. Anderer Fall als Section zu
   Section, aus zwei Gruenden:

   Technisch greift `+` nicht - der Footer ist kein Geschwister der Section
   (er liegt in .wp-site-blocks, die Section in <main>). Daher :has().

   Und inhaltlich soll hier NICHT auf null gekuerzt werden: der Footer ist ein
   eigener Landmark, kein weitergehender Inhalt. Ein spuerbarer Abstand davor
   ist richtig - nur eben einer statt zwei. Die Section gibt ihren ab, der
   Footer behaelt seinen. Aus 124px werden 60px. */
.wp-site-blocks:has(> main > section:last-child[class*="--bg-white"]) > main > section:last-child {
    padding-bottom: 0;
}

/* Editor-set hard breaks in headings are tuned for the desktop measure. Below
   the mobile breakpoint the column is too narrow for them to help — they only
   push a single word onto its own line. Let the text wrap on its own there. */
@media (max-width: 48rem) {
    .thch-hero__title br,
    .thch-hero__heading br,
    .thch-hero-content__title br,
    .thch-content__title br,
    .thch-content-light__title br,
    .thch-showcase__title br,
    .thch-faq__title br,
    .thch-product-cards__title br,
    .thch-gfinder__heading br {
        display: none;
    }
}

/* Fliesstext darf trennen, das haelt schmale Spalten ruhig. Aber auch hier
   erst ab 10 Zeichen und mit mindestens 4 Zeichen je Seite. Vererbt sich,
   die Ueberschriften-Regel oben ueberschreibt es fuer Headlines. */
:root {
    hyphenate-limit-chars: 10 4 4;
    -webkit-hyphenate-limit-chars: 10 4 4;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
}

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

/* Global font override — prevent Oxygen Open Sans leaking through */
body {
    font-family: var(--ob-font-body, 'Aptos', 'Lato', system-ui, sans-serif);
    color: rgba(29, 36, 93, 0.7);
}

/* Container */
.thch-container {
    max-width: var(--thch-container-width);
    margin-inline: auto;
    padding-inline: var(--thch-gutter);
    width: 100%;
}

/* Section base */
.thch-section {
    padding: 6rem 0;
}

/* Heading group — subtitle + title with no gap */
[class$="__heading-group"] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Global Headings */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

h2 {
    font-family: var(--thch-font-heading, 'Aptos', system-ui, sans-serif);
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--thch-color-primary, #1D245D);
}

/* Button system — aligned with Figma "Button / Light" component set */
.thch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--thch-font-heading, 'Aptos', system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    border-radius: 1.875rem;
    padding: 0.5rem 1.25rem;
    transition: background 0.2s, color 0.2s;
}

.thch-btn:focus-visible {
    outline: 2px solid var(--thch-color-accent, #0066FF);
    outline-offset: 2px;
}

/* Primary: dark bg, light text */
.thch-btn--primary {
    background: var(--thch-color-primary, #1D245D);
    color: var(--thch-color-neutral, #EAECF0);
}
.thch-btn--primary:hover {
    background: #161B37;
    color: var(--thch-color-neutral, #EAECF0);
}

/* Secondary: light bg, dark text (inverted) */
.thch-btn--secondary,
.thch-btn--secondary:hover {
    background: var(--thch-color-neutral, #EAECF0);
    color: var(--thch-color-primary, #1D245D);
}

/* Inverted: white filled, dark text — for dark backgrounds */
.thch-btn--inverted {
    background: #fff;
    color: #0C0F27;
    border: 2px solid #fff;
}
.thch-btn--inverted:hover {
    background: var(--thch-color-neutral, #EAECF0);
    border-color: var(--thch-color-neutral, #EAECF0);
}
.thch-btn--inverted::after {
    background: #0C0F27;
}

/* Outline: transparent bg, primary border.
   Double-class selector (0,2,0) so the resting border always beats the
   competing `.thch-btn { border: none }` rules — otherwise the border only
   appears on :hover and the button jumps 2px. */
.thch-btn.thch-btn--outline,
.thch-btn--outline:hover {
    background: transparent;
    color: var(--thch-color-primary, #1D245D);
    border: 2px solid var(--thch-color-primary, #1D245D);
}

/* Outline light: for use on dark backgrounds */
.thch-btn--outline.thch-btn--light {
    color: var(--thch-color-neutral, #EAECF0);
    border-color: var(--thch-color-neutral, #EAECF0);
}
.thch-btn--outline.thch-btn--light:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: #fff;
}
.thch-btn--outline.thch-btn--light::after {
    background: var(--thch-color-neutral, #EAECF0);
}

/* Large size variant */
.thch-btn--lg {
    padding: 0.625rem 1.5rem;
    font-size: var(--thch-text-base);
    font-weight: 700;
}

/* Arrow icon (Iconoir arrow-right via mask) */
.thch-btn--arrow::after {
    content: '';
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* External link arrow (redirect / open-in-new-tab) */
.thch-btn--external::after {
    content: '';
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    background: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4747 5.39107C12.7188 5.14699 13.1145 5.14699 13.3586 5.39107L16.2753 8.30773C16.5194 8.55181 16.5194 8.94754 16.2753 9.19162C16.0312 9.43569 15.6355 9.43569 15.3914 9.19162L12.9167 6.71689L10.4419 9.19162C10.1979 9.43569 9.80214 9.43569 9.55806 9.19162C9.31398 8.94754 9.31398 8.55181 9.55806 8.30773L12.4747 5.39107Z' fill='currentColor'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.9167 5.20801C13.2618 5.20801 13.5417 5.48783 13.5417 5.83301V10.833C13.5417 13.0191 11.7695 14.7913 9.58333 14.7913H3.75C3.40482 14.7913 3.125 14.5115 3.125 14.1663C3.125 13.8212 3.40482 13.5413 3.75 13.5413H9.58333C11.0791 13.5413 12.2917 12.3288 12.2917 10.833V5.83301C12.2917 5.48783 12.5715 5.20801 12.9167 5.20801Z' fill='currentColor'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.4747 5.39107C12.7188 5.14699 13.1145 5.14699 13.3586 5.39107L16.2753 8.30773C16.5194 8.55181 16.5194 8.94754 16.2753 9.19162C16.0312 9.43569 15.6355 9.43569 15.3914 9.19162L12.9167 6.71689L10.4419 9.19162C10.1979 9.43569 9.80214 9.43569 9.55806 9.19162C9.31398 8.94754 9.31398 8.55181 9.55806 8.30773L12.4747 5.39107Z' fill='currentColor'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.9167 5.20801C13.2618 5.20801 13.5417 5.48783 13.5417 5.83301V10.833C13.5417 13.0191 11.7695 14.7913 9.58333 14.7913H3.75C3.40482 14.7913 3.125 14.5115 3.125 14.1663C3.125 13.8212 3.40482 13.5413 3.75 13.5413H9.58333C11.0791 13.5413 12.2917 12.3288 12.2917 10.833V5.83301C12.2917 5.48783 12.5715 5.20801 12.9167 5.20801Z' fill='currentColor'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

/* Section borders — toggled per block via ACF */
.thch-border-top    { border-top: 1px solid var(--thch-color-tertiary, #ADA791); }
.thch-border-bottom { border-bottom: 1px solid var(--thch-color-tertiary, #ADA791); }

/* Responsive base */
@media (max-width: 48rem) {
    :root {
        --thch-split-gap: 2rem;
    }
    .thch-section {
        padding: 4rem 0;
    }
    h1, h2, h3, h4 {
        hyphens: auto;
        -webkit-hyphens: auto;
        overflow-wrap: break-word;
    }

    /* Ueberschriften duerfen nur lange Komposita trennen. 14/6/6 heisst:
       erst ab 14 Zeichen ueberhaupt trennen, und nie weniger als 6 Zeichen
       vor oder nach dem Trennstrich. Damit bleiben "Akademie" (8),
       "bedeutet" (8) und "Zukunft" (7) ganz, waehrend
       "Installateurfinder" weiterhin sinnvoll bei "Installateur-finder"
       bricht. In grossem Schriftgrad faellt jeder Trennstrich auf. */
    h1, h2, h3, h4,
    [class*="__title"], [class*="__heading"] {
        hyphenate-limit-chars: 14 6 6;
        -webkit-hyphenate-limit-chars: 14 6 6;
        -webkit-hyphenate-limit-before: 6;
        -webkit-hyphenate-limit-after: 6;
        text-wrap: balance;
    }
    .thch-btn {
        white-space: normal;
    }
}

/* ==========================================================================
   Listenpreis aus dem Shop  —  [thch_preis]
   Erbt Farbe und Schriftgroesse vom Umfeld, damit die Ausgabe auf hellem wie
   dunklem Grund kontraststark bleibt (kein eigenes Grau, keine opacity).
   ========================================================================== */
.thch-preis {
    /* inline, damit der Preis mitten im Fliesstext stehen kann */
    display: inline;
    color: inherit;
}

.thch-preis__betrag {
    font-weight: 700;
    /* Zahl und Waehrungszeichen nie trennen */
    white-space: nowrap;
    /* Tabellenziffern: gleiche Breite, ruhigeres Schriftbild bei Preiswechsel */
    font-variant-numeric: tabular-nums;
}

.thch-preis__prefix {
    font-weight: inherit;
}

.thch-preis__hinweis {
    /* Pflichtangabe — sichtbar, in Textfarbe, nur eine Spur kleiner.
       Bewusst ohne opacity/Grau: der Kontrast bleibt der des Fliesstextes. */
    font-size: 0.8125em;
    font-weight: 400;
    white-space: nowrap;
}

.thch-preis--fallback {
    font-weight: 700;
}

/* Im Formular steht der Preis als eigener Hinweisblock ueber den Feldern. */
.thch-preis-box {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* Zeilenabstand fuer den Umbruch auf schmalen Viewports, Spaltenabstand
       zwischen Label und Betrag */
    gap: 0.25rem 0.75rem;
    /* bewusst knapper als --thch-pad-card: der Kasten traegt nur eine Zeile */
    padding: 1.25rem 1.5rem;
    /* Abstand nach unten gehoert dem Kasten, nicht dem folgenden Feld */
    margin-block-end: 1.5rem;
    border: 1px solid var(--thch-color-primary, #1D245D);
    border-radius: 8px;
    background: transparent;
}

.thch-preis-box__label {
    font-weight: 400;
}

.thch-preis-box .thch-preis__betrag {
    font-size: 1.25em;
}