/*
Theme Name: WBB Blocks
Theme URI: https://www.wbb-berlin.de
Description: Block-Theme (Full Site Editing) für die WBB Blechbearbeitung GmbH & Co. KG. Header, Body und Footer sind als Template-Parts im Site-Editor bearbeitbar, alle Inhalte sind Gutenberg-Blöcke.
Author: WBB
Version: 2.7
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: wbb-blocks
*/

/* Buenard lokal eingebunden (DSGVO: keine Verbindung zu Google Fonts) */
@font-face {
    font-family: 'Buenard';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/buenard-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Buenard';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('assets/fonts/buenard-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Platz für die Scrollbar immer reservieren — sonst springt die zentrierte
   Seite horizontal, wenn aufklappbare Inhalte eine Scrollbar erzeugen */
html { scrollbar-gutter: stable; }

/* Hintergrundbild: liegt in assets/background.css und wird nur im Frontend
   geladen — style.css dient auch als Editor-Stylesheet (add_editor_style),
   und dort (TinyMCE Visual-Tab, Gutenberg) soll kein Foto erscheinen. */

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ========== HEADER ========== */
.wbb-site-header {
    max-width: 1260px;
    margin: 0 auto;
    padding: 20px 15px 10px;
}
.wbb-site-header .wbb-header-inner {
    background-color: #F8FBEF;
    padding: 15px 25px;
    position: relative;
}
/* Titel exakt mittig zum Header (unabhängig von der Logo-Breite) */
.wbb-title-wrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: max-content;
    max-width: 60%;
}
.wbb-title-wrap .wp-block-site-title,
.wbb-title-wrap .wp-block-site-title a {
    font-family: 'Buenard', serif;
    font-size: xx-large;
    font-weight: 700;
    text-transform: uppercase;
    color: #08088A;
    margin: 0;
    text-decoration: none;
}
.wbb-title-wrap .wp-block-site-tagline {
    font-family: 'Buenard', serif;
    font-size: xx-large;
    font-weight: 700;
    color: #08088A;
    margin: 0;
}

/* ========== 3-SPALTEN-LAYOUT ========== */
.wbb-layout {
    max-width: 1260px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 0 15px;
}
/* Core-Flow-Layout gibt dem 2./3. Kind margin-block-start (Block-Gap) —
   neutralisieren, damit alle drei Spalten oben bündig starten */
.wbb-layout > * {
    margin-block-start: 0 !important;
}
.wbb-col-nav {
    flex: 0 0 230px;
    background-color: #F8FBEF;
    padding-bottom: 40px;
}
.wbb-col-content {
    flex: 1 1 auto;
    min-width: 0;
    background-color: #F8FBEF;
    padding: 25px 40px 40px;
}
.wbb-col-sidebar {
    flex: 0 0 230px;
    min-width: 0;   /* verhindert, dass breiter Inhalt (z.B. aufgeklappte Tabelle) die Spalte aufweitet */
    max-width: 230px;
    background-color: #F8FBEF;
    padding: 25px;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* ========== NAVIGATION (LINKS, VERTIKAL) ========== */
.wbb-mainnav { width: 100%; gap: 0; }
.wbb-mainnav .wp-block-navigation__container {
    width: 100%;
    gap: 0; /* Flex-Gap des Core-Blocks entfernen — Trennung nur über Border */
}
.wbb-mainnav .wp-block-navigation-item {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}
.wbb-mainnav .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-transform: uppercase;
    font-family: 'Buenard', serif;
    font-size: 22px;
    font-weight: 700;
    color: #08088A;
    padding: 0.8em 15px 0.7em;
    border-bottom: 1px solid #dcdcdc;
}
.wbb-mainnav .wp-block-navigation-item:last-child > .wp-block-navigation-item__content,
.wbb-mainnav .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    border-bottom-color: transparent;
}
/* Untermenü (Flyout nach rechts) */
.wbb-mainnav .wp-block-navigation__submenu-container {
    background-color: #F8FBEF !important;
    border: none;
    min-width: 230px !important;
}
.wbb-mainnav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 18px;
    padding: 0.8em 15px;
}
.wbb-mainnav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover {
    background-color: #08088A;
}
.wbb-mainnav .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
    color: #F8FBEF;
}
/* Mobiles Overlay-Menü */
.wbb-mainnav .wp-block-navigation__responsive-container.is-menu-open {
    background-color: #F8FBEF;
}
.wbb-mainnav .wp-block-navigation__responsive-container-open,
.wbb-mainnav .wp-block-navigation__responsive-container-close {
    color: #08088A;
}

/* ========== INHALT ========== */
.wbb-claim {
    font-size: x-large;
    background-color: rgba(248, 251, 239, 0.5);
}
/* Überschriften brauchen deutlich mehr Abstand nach OBEN als nach unten,
   damit sie visuell zu ihrem folgenden Text gruppieren (nicht zum vorherigen) */
.wbb-col-content h1, .wbb-col-content h2 {
    font-family: 'Buenard', serif;
    font-size: x-large;
    font-weight: 400;
    margin: 1.4em 0 0.4em;
}
.wbb-col-content h3 {
    font-family: Verdana, sans-serif;
    font-size: large;
    margin: 1.6em 0 0.4em;
}
.wbb-col-content h1:first-child, .wbb-col-content h2:first-child,
.wbb-col-content h3:first-child { margin-top: 0; }
/* Fließtext: kompakter Abstand nach unten, Block-Gap oben neutralisieren */
.wbb-col-content p, .wbb-col-content ul, .wbb-col-content ol,
.wbb-col-content .wp-block-table, .wbb-col-content .wp-block-image {
    margin-block-start: 0;
    margin-block-end: 1em;
}
.wbb-col-content img { max-width: 100%; height: auto; }

/* Alternative Überschrift (Verdana, fett) — z.B. "Unsere Leistungen im Überblick:" */
.wbb-heading-alt {
    font-family: Verdana, Geneva, sans-serif !important;
    font-weight: bold !important;
}

/* Service-Kopf: GIF-Icon + Überschrift */
.wbb-service-head { margin-bottom: 1em; }
.wbb-service-head img { width: 80px; height: 60px; }

/* Leistungs-Grid (Startseite) */
.wbb-services-grid .wp-block-column { text-align: center; }
.wbb-services-grid img { width: 80px; height: 60px; }
.wbb-services-grid h3 {
    font-family: 'Buenard', serif !important;
    font-size: x-large;
    font-weight: 700;
    background-color: rgba(248, 251, 239, 0.5);
    margin-top: 8px;
}
.wbb-services-grid a { text-decoration: none; color: #08088A; }

/* Hero-Bild */
.wbb-hero img { width: 100%; max-width: 800px; display: block; margin: 0 auto; }

/* Tabellen (Kontakt, Entwicklung, Laserschneiden) */
.wbb-col-content table { width: 100%; border-collapse: collapse; }
.wbb-col-content td, .wbb-col-content th { padding: 4px 10px; vertical-align: top; text-align: left; border: none; }
.wp-block-table.wbb-plain table { border: none; }
.wp-block-table.wbb-plain td { border: none; }

/* ========== SIDEBAR ========== */
/* Abstände so, dass Überschrift + Bild + Text als Gruppe zusammenhängen:
   wenig Abstand innerhalb einer Gruppe, viel Abstand vor jeder neuen Überschrift */
.wbb-col-sidebar h3 {
    font-family: 'Buenard', serif;
    font-size: large;
    font-weight: bold;
    text-align: center;
    margin: 0 0 8px;
}
.wbb-col-sidebar p { margin: 0 0 0.5em; text-align: center; }
.wbb-col-sidebar img { max-width: 100%; height: auto; display: block; margin: 0 auto 5px; }
.wbb-col-sidebar > * + * { margin-top: 8px; }
.wbb-col-sidebar > h3 { margin-top: 40px; }
.wbb-col-sidebar > h3:first-child { margin-top: 0; }

/* ========== FOOTER ========== */
.wbb-site-footer {
    max-width: 1260px;
    margin: 80px auto 0;
    padding: 0 15px 20px;
}
.wbb-site-footer .wbb-footer-inner {
    background-color: #F8FBEF;
    padding: 25px 0;
}
.wbb-footer-links a {
    margin: 0 12px;
    text-transform: uppercase;
    color: #08088A;
}
.wbb-footer-copy { margin-top: 8px; }

/* ========== TABLET (980–1279px) ========== */
@media (min-width: 980px) and (max-width: 1279px) {
    .wbb-layout, .wbb-site-header, .wbb-site-footer { max-width: 960px; }
    .wbb-col-content { padding: 20px; }
}

/* ========== MOBILE (≤ 979px) ========== */
@media (max-width: 979px) {
    .wbb-layout { flex-direction: column; gap: 0; }
    .wbb-col-nav {
        flex: 1 1 auto;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 0;
        text-align: center;
    }
    .wbb-col-content {
        width: 100%;
        box-sizing: border-box;
        padding: 14px 20px 20px;
    }
    .wbb-col-sidebar {
        flex: 1 1 auto;
        width: 100%;
        margin: 20px 0;
    }
    .wbb-site-header .wbb-header-inner { flex-direction: column; text-align: center; }
    .wbb-title-wrap { position: static; transform: none; max-width: none; width: auto; }
    .wbb-title-wrap .wp-block-site-title, .wbb-title-wrap .wp-block-site-title a,
    .wbb-title-wrap .wp-block-site-tagline { font-size: 7vw; }
    .wbb-site-footer { text-align: center; line-height: 2.4em; margin-top: 30px; }
    /* Spalten in Inhalten untereinander */
    .wbb-col-content .wp-block-columns { flex-wrap: wrap !important; }
    .wbb-col-content .wp-block-column { flex-basis: 100% !important; }
    /* Leistungs-Grid: 3 Spalten bleiben nebeneinander, aber schmaler */
    .wbb-services-grid.wp-block-columns { flex-wrap: nowrap !important; }
    .wbb-services-grid .wp-block-column { flex-basis: 33% !important; }
    .wbb-services-grid h3 { font-size: large; }
}