/*
Theme Name:   Willes Gasthof 2026
Theme URI:    https://wille.designburgapps.com
Description:  Child Theme für GeneratePress – Wille's Gasthof, Welle. Neubau 2026 auf Basis der AP/IOC-Themes (Header, Footer, Bänder) mit portierter Fachlogik (Speisekarte, Veranstaltungen, Kalender, Badge, PWA). Gebaut von Designburg.
Author:       Designburg
Author URI:   https://webdesignhamburg.net
Template:     generatepress
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  willes-gp
Tags:         lightweight, custom-colors, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   Wille's Gasthof – Basis-Tokens
   Marke: Nachtblau (alter Seitenhintergrund #1E2740) + Gold (#d4a437 / #ca9c2e).
   2026: helle, warme Inhaltsflächen (Papier/Creme), Nachtblau nur noch für
   Header, Footer, Overlay und Akzent-Bänder. Gold bleibt der Akzent.
   ========================================================================== */

:root {
    --wg-navy:        #1B2438;
    --wg-navy-2:      #26304A;
    --wg-navy-ink:    #1B2438;
    --wg-gold:        #C9A24A;
    --wg-gold-deep:   #A9842F;
    --wg-gold-light:  #E8CF86;

    --wg-bg:          #FFFDF9;
    --wg-bg-alt:      #F5EFE2;
    --wg-text:        #1C2233;
    --wg-text-muted:  #5B6273;
    --wg-line:        #E4DBC8;
    --wg-accent:      var(--wg-gold-deep);
    --wg-accent-hover:var(--wg-navy);

    /* Schrift: Playfair Display selbst gehostet (Display), System-Sans im Lauftext */
    --wg-font:         "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --wg-font-display: "Playfair Display", Georgia, "Times New Roman", serif;

    --wg-container: 1200px;
    --wg-pad:       clamp(1.25rem, 5vw, 5rem);
    --wg-space:     clamp(3rem, 7vw, 6.5rem);
    --wg-measure:   66ch;
    --wg-radius:    14px;
    --wg-shadow:    0 10px 30px rgb(27 36 56 / 10%);
}

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

html {
    overflow-x: clip;
    scroll-behavior: smooth;
}

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

[id] { scroll-margin-top: calc(var(--wg-header-h-s, 4.25rem) + 1.5rem); }

body {
    background-color: var(--wg-bg);
    color: var(--wg-text);
    font-family: var(--wg-font);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .wg-display {
    font-family: var(--wg-font-display);
    font-weight: 700;
    line-height: 1.15;
    color: var(--wg-navy-ink);
    letter-spacing: 0;
}

h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

a { color: var(--wg-accent); }
a:hover, a:focus-visible { color: var(--wg-accent-hover); }

/* GeneratePress-Container auf die Header-Flucht legen */
.separate-containers .site-main { margin-block: 0; }
.separate-containers .inside-article,
.separate-containers .page-header { padding-block: 0; background: transparent; }
.site-content .content-area { padding: 0; }

/* GeneratePress-Container neutralisieren: die Geometrie kommt ausschließlich
   aus diesem Theme, sonst liegen Kopfzeile und Inhalt auf verschiedenen Fluchten.
   Achtung: GP setzt die Rahmenbreite inline als `body .grid-container` — eine
   Regel auf `.grid-container` allein verliert und der Inhalt klebt links. */
body .grid-container,
body .site-content,
.one-container .site-content,
.separate-containers .site-content,
body .content-area,
body .site-main,
body .inside-article,
body .entry-content {
    max-width: none;
    width: auto;
    margin-inline: auto;
    padding: 0;
    background: none;
    border: 0;
}

/* Bänder bringen ihr Kantenmaß selbst mit (.wg-band + .wg-band__in). */
.wg-band__in { max-width: var(--wg-container); margin-inline: auto; }

/* Lese-Spalte: alles im Inhalt, was kein Band ist, liegt auf der Header-Flucht. */
.wg-content { padding-block: var(--wg-space); }
.wg-content > *:not(.wg-band) {
    max-width: calc(var(--wg-container) + 2 * var(--wg-pad));
    margin-inline: auto;
    padding-inline: var(--wg-pad);
}
/* Bänder im Inhalt brechen auf die volle Fensterbreite aus. --wg-sbw ist die
   Scrollbalkenbreite (setzt header.js), sonst ragt das Band darunter heraus. */
.wg-content > .wg-band {
    width: calc(100vw - var(--wg-sbw, 0px));
    margin-inline: calc((100% - (100vw - var(--wg-sbw, 0px))) / 2);
}
.wg-content > .wg-band:first-child { margin-top: calc(-1 * var(--wg-space)); }
.wg-content > .wg-band:last-child { margin-bottom: calc(-1 * var(--wg-space)); }
.entry-content > *:last-child { margin-bottom: 0; }
.wg-measure { max-width: var(--wg-measure); }
.wg-section { padding-block: var(--wg-space); }

/* Buttons */
.wg-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    font-family: var(--wg-font);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, translate 0.2s ease;
}
.wg-btn:hover, .wg-btn:focus-visible { translate: 0 -2px; }
.wg-btn--gold { background: var(--wg-gold); color: var(--wg-navy); }
.wg-btn--gold:hover, .wg-btn--gold:focus-visible { background: var(--wg-gold-light); color: var(--wg-navy); }
.wg-btn--navy { background: var(--wg-navy); color: #fff; }
.wg-btn--navy:hover, .wg-btn--navy:focus-visible { background: var(--wg-navy-2); color: #fff; }
.wg-btn--ghost { background: transparent; color: var(--wg-navy); border-color: var(--wg-navy); }
.wg-btn--ghost:hover, .wg-btn--ghost:focus-visible { background: var(--wg-navy); color: #fff; }
.wg-btn--ghost-light { background: transparent; color: #fff; border-color: rgb(255 255 255 / 70%); }
.wg-btn--ghost-light:hover, .wg-btn--ghost-light:focus-visible { background: rgb(255 255 255 / 12%); color: #fff; }

.wg-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wg-gold-deep);
}

.wg-lead { font-size: 1.125rem; line-height: 1.7; color: var(--wg-text-muted); }

/* Nachtblaue Flächen */
.wg-dark { background: var(--wg-navy); color: rgb(255 255 255 / 86%); }
.wg-dark h1, .wg-dark h2, .wg-dark h3, .wg-dark h4 { color: #fff; }
.wg-dark .wg-eyebrow { color: var(--wg-gold-light); }
.wg-dark a { color: var(--wg-gold-light); }
.wg-dark .wg-btn--gold { color: var(--wg-navy); }
.wg-dark .wg-btn--ghost-light { color: #fff; }
.wg-dark .wg-btn--ghost-light:hover { color: #fff; }

/* Feine Goldlinie (Ornament) */
.wg-rule {
    display: block;
    width: 3.5rem;
    height: 3px;
    margin: 1rem 0 1.25rem;
    background: linear-gradient(90deg, var(--wg-gold), var(--wg-gold-light));
    border-radius: 3px;
}

/* Bilder in Inhalten */
.wg-content img { border-radius: var(--wg-radius); }

/* Screenreader */
.wg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }