/*
Theme Name: Symphis 2026
Theme URI: https://symphis.de/
Description: Modernes Child-Theme der Schlösslisymphoniker Inzlingen. Responsive, sticky Header, Mobile-Navigation, Visual-Composer-kompatibel und vorbereitet für Symphis, GuggeGass und Portal.
Author: Schlösslisymphoniker Inzlingen
Template: twentytwentyone
Version: 0.1.1
Text Domain: symphis-2026
*/

/* ==========================================================
   SYMPHIS 2026 – GLOBAL DESIGN SYSTEM
   ========================================================== */

:root {
    --symphis-red: #ef2f2f;
    --symphis-red-dark: #c91f1f;
    --symphis-black: #090909;
    --symphis-dark: #202020;
    --symphis-gray: #f3f3f3;
    --symphis-white: #ffffff;
    --symphis-text: #171717;

    --symphis-content: 1280px;
    --symphis-reading: 900px;
    --symphis-radius: 18px;
    --symphis-shadow: 0 12px 40px rgba(0,0,0,.10);

    --symphis-header-height: 104px;
    --symphis-header-height-scrolled: 78px;

    --symphis-space-xs: clamp(.5rem, 1vw, .75rem);
    --symphis-space-sm: clamp(.8rem, 1.5vw, 1.25rem);
    --symphis-space-md: clamp(1.25rem, 2.5vw, 2rem);
    --symphis-space-lg: clamp(2rem, 4vw, 4rem);
    --symphis-space-xl: clamp(4rem, 8vw, 8rem);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--symphis-black);
    color: var(--symphis-white);
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.admin-bar .symphis-site-header {
    top: 32px;
}

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

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

a {
    color: inherit;
}

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

::selection {
    background: var(--symphis-red);
    color: var(--symphis-white);
}

/* ---------- Utility ---------- */

.symphis-container {
    width: min(calc(100% - 40px), var(--symphis-content));
    margin-inline: auto;
}

.symphis-reading-width {
    width: min(calc(100% - 40px), var(--symphis-reading));
    margin-inline: auto;
}

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

.section-black {
    background: var(--symphis-black);
    color: var(--symphis-white);
}

.section-red {
    background: var(--symphis-red);
    color: var(--symphis-white);
}

.section-gray {
    background: var(--symphis-dark);
    color: var(--symphis-white);
}

.section-white {
    background: var(--symphis-white);
    color: var(--symphis-text);
}

.symphis-card {
    background: var(--symphis-white);
    color: var(--symphis-text);
    border-radius: var(--symphis-radius);
    overflow: hidden;
    box-shadow: var(--symphis-shadow);
}

/* ---------- Typography ---------- */

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.02em;
}

h1 { font-size: clamp(2.5rem, 6vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4.4vw, 4rem); }
h3 { font-size: clamp(1.4rem, 2.6vw, 2.25rem); }

p {
    margin-top: 0;
    margin-bottom: 1.35em;
}

/* ---------- Header ---------- */

.symphis-site-header {
    position: sticky;
    top: 0;
    z-index: 99990;
    width: 100%;
    background: rgba(255,255,255,.97);
    color: var(--symphis-text);
    box-shadow: 0 1px 0 rgba(0,0,0,.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
        box-shadow .25s ease,
        background-color .25s ease;
}

.symphis-site-header.is-scrolled {
    box-shadow: 0 8px 30px rgba(0,0,0,.11);
}

.symphis-header-inner {
    min-height: var(--symphis-header-height);
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(24px, 4vw, 64px);
    transition: min-height .25s ease;
}

.symphis-site-header.is-scrolled .symphis-header-inner {
    min-height: var(--symphis-header-height-scrolled);
}

.symphis-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--symphis-text);
    text-decoration: none;
    min-width: 0;
}

.symphis-brand-logo {
    width: 84px;
    height: 84px;
    object-fit: contain;
    flex: 0 0 auto;
    transition: width .25s ease, height .25s ease;
}

.symphis-site-header.is-scrolled .symphis-brand-logo {
    width: 62px;
    height: 62px;
}

.symphis-brand-text {
    font-size: clamp(.9rem, 1.25vw, 1.08rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.symphis-nav-wrap {
    justify-self: end;
}

.symphis-menu {
    display: flex;
    align-items: center;
    gap: clamp(18px, 2.5vw, 42px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.symphis-menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--symphis-text);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .96rem;
    letter-spacing: .035em;
}

.symphis-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 5px;
    height: 3px;
    background: var(--symphis-red);
    transition: right .2s ease;
}

.symphis-menu a:hover::after,
.symphis-menu .current-menu-item > a::after,
.symphis-menu .current_page_item > a::after {
    right: 0;
}

.symphis-menu-toggle {
    display: none;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--symphis-black);
    color: var(--symphis-white);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.symphis-menu-toggle-lines,
.symphis-menu-toggle-lines::before,
.symphis-menu-toggle-lines::after {
    width: 21px;
    height: 2px;
    background: currentColor;
    display: block;
    transition: transform .2s ease, opacity .2s ease;
}

.symphis-menu-toggle-lines {
    position: relative;
}

.symphis-menu-toggle-lines::before,
.symphis-menu-toggle-lines::after {
    content: "";
    position: absolute;
    left: 0;
}

.symphis-menu-toggle-lines::before { top: -7px; }
.symphis-menu-toggle-lines::after { top: 7px; }

.symphis-menu-toggle[aria-expanded="true"] .symphis-menu-toggle-lines {
    background: transparent;
}

.symphis-menu-toggle[aria-expanded="true"] .symphis-menu-toggle-lines::before {
    transform: translateY(7px) rotate(45deg);
}

.symphis-menu-toggle[aria-expanded="true"] .symphis-menu-toggle-lines::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Content ---------- */

.symphis-site-main {
    min-height: 60vh;
    background: var(--symphis-black);
}

.symphis-entry {
    width: 100%;
}

.symphis-page-hero {
    background: var(--symphis-white);
    color: var(--symphis-text);
    padding: clamp(64px, 8vw, 120px) 0;
}

.symphis-page-hero h1 {
    margin-bottom: 0;
}

.symphis-page-content {
    width: 100%;
}

.symphis-page-content > *:first-child {
    margin-top: 0;
}

/* Visual Composer / generic full width */
.vce-row-container,
.vce-row,
.entry-content,
.symphis-page-content {
    max-width: none;
}

.symphis-page-content > .alignfull,
.symphis-page-content > .vce-row-container {
    width: 100%;
}

/* ---------- Buttons ---------- */

.symphis-button,
.vce-button,
.wp-block-button__link,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 12px 26px;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--symphis-red);
    color: var(--symphis-white);
    text-decoration: none;
    font-weight: 800;
    line-height: 1.1;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease;
}

.symphis-button:hover,
.vce-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
    background: var(--symphis-red-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.15);
}

/* ---------- Scroll reveal ---------- */

.symphis-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.8,.2,1);
    will-change: opacity, transform;
}

.symphis-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Footer ---------- */

.symphis-site-footer {
    background: #050505;
    color: rgba(255,255,255,.88);
    border-top: 1px solid rgba(255,255,255,.10);
}

.symphis-footer-inner {
    padding-block: clamp(42px, 6vw, 78px);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
}

.symphis-footer-title {
    margin: 0 0 5px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--symphis-white);
}

.symphis-footer-meta {
    margin: 0;
    opacity: .7;
    font-size: .92rem;
}

.symphis-footer-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.symphis-footer-menu a {
    color: inherit;
    text-decoration: none;
}

.symphis-footer-menu a:hover {
    color: var(--symphis-red);
}

/* ---------- Template-specific modes ---------- */

body.symphis-template-guggegass {
    --symphis-red: #ef2f2f;
}

body.symphis-template-portal .symphis-site-main {
    background: #f5f5f5;
    color: #171717;
}

/* ---------- Mobile ---------- */

@media (max-width: 782px) {
    body.admin-bar .symphis-site-header {
        top: 46px;
    }
}

@media (max-width: 900px) {
    :root {
        --symphis-header-height: 82px;
        --symphis-header-height-scrolled: 72px;
    }

    .symphis-container {
        width: min(calc(100% - 32px), var(--symphis-content));
    }

    .symphis-header-inner {
        grid-template-columns: 1fr auto;
        gap: 16px;
    }

    .symphis-brand-logo {
        width: 66px;
        height: 66px;
    }

    .symphis-site-header.is-scrolled .symphis-brand-logo {
        width: 56px;
        height: 56px;
    }

    .symphis-brand-text {
        font-size: .82rem;
        white-space: normal;
        line-height: 1.2;
    }

    .symphis-menu-toggle {
        display: inline-flex;
    }

    .symphis-nav-wrap {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        display: none;
        background: var(--symphis-white);
        border-top: 1px solid rgba(0,0,0,.08);
        box-shadow: 0 18px 35px rgba(0,0,0,.13);
    }

    .symphis-nav-wrap.is-open {
        display: block;
    }

    .symphis-menu {
        display: block;
        width: min(calc(100% - 32px), var(--symphis-content));
        margin: 0 auto;
        padding: 12px 0 20px;
    }

    .symphis-menu li {
        border-bottom: 1px solid rgba(0,0,0,.08);
    }

    .symphis-menu a {
        width: 100%;
        min-height: 54px;
        font-size: 1rem;
    }

    .symphis-menu a::after {
        display: none;
    }

    .symphis-footer-inner {
        grid-template-columns: 1fr;
    }

    .symphis-footer-menu {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    body {
        font-size: 16px;
    }

    .symphis-brand-text {
        display: none;
    }

    .symphis-section {
        padding-block: 60px;
    }

    .symphis-page-hero {
        padding: 54px 0;
    }
}

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .symphis-reveal {
        opacity: 1;
        transform: none;
    }
}