/*
Theme Name: HTMO
Author: HTMO
Description: Modernes, freundliches Dark-Theme (max. 1320px).
Version: 0.1.0
Text Domain: htmo
*/

/* =========================
   Tokens & Reset
   ========================= */
:root{
    /* Layout */
    --container-max:1320px;
    --radius:16px;
    --shadow:0 10px 30px rgba(0,0,0,.35);

    /* Spaces */
    --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem;

    /* Colors – Dark, aber freundlich */
    --bg:#111;
    --surface:#1a1a1a;
    --surface-2:#222;
    --text:#e7e7e7;
    --muted:#bdbdbd;
    --border:#2a2a2a;
    --accent:#3B82F6;     /* Blau */
    --accent-2:#06B6D4;   /* Türkis */
    --focus:#93C5FD;      /* Fokusrahmen */
}

*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji;
    line-height:1.6;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover,a:focus-visible{text-decoration:underline}

.container{max-width:var(--container-max);margin-inline:auto;padding-inline:16px}

/* Adminbar-Offset (WP Admin Bar: 32px Desktop / 46px mobil) */
html { --adminbar: 0px; }
body.admin-bar { --adminbar: 32px; }
@media (max-width: 782px) {
    body.admin-bar { --adminbar: 46px; }
}
/* Damit Anker/Skip-Scroll nicht unter der Adminbar landet */
html { scroll-padding-top: var(--adminbar); }

/* Skip-Link für Accessibility */
.skip-link{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:16px;top:16px;width:auto;height:auto;padding:.5rem .75rem;z-index:9999;background:var(--accent);color:#0b1220;border-radius:8px}
body.admin-bar .skip-link:focus{ top: calc(16px + var(--adminbar)); }

/* =========================
   Header (mit sanfter Bewegung)
   ========================= */
.site-header{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,#161616,#121212);
    border-bottom:1px solid var(--border);
    --fx-opacity:.65;
}
.site-header::before{
    content:"";
    position:absolute; inset:-30% -10% -30% -10%;
    background:
            repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 1px,transparent 1px 28px),
            repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 1px,transparent 1px 22px),
            radial-gradient(800px 120px at 20% 30%, rgba(59,130,246,.10), transparent 60%),
            radial-gradient(600px 100px at 80% 70%, rgba(6,182,212,.10), transparent 60%);
    opacity:var(--fx-opacity);
    filter:saturate(1.05);
    animation:header-pan 60s linear infinite;
    pointer-events:none;
}
.site-header::after{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(500px 160px at var(--glow-x,-30%) 10%, rgba(59,130,246,.18), transparent 65%);
    mix-blend-mode:screen;
    animation:header-sweep 24s ease-in-out infinite alternate;
    pointer-events:none;
}
@keyframes header-pan{
    from{background-position:0 0,0 0,0 0,0 0}
    to  {background-position:1000px 0,0 1000px,600px 0,-600px 0}
}
@keyframes header-sweep{from{--glow-x:-30%}to{--glow-x:140%}}
@media (prefers-reduced-motion:reduce){.site-header::before,.site-header::after{animation:none}}
.fx-off .site-header::before,.fx-off .site-header::after{display:none}

.site-header .inner{
    position:relative; z-index:1;
    display:flex; align-items:center; gap:28px;
    padding-block:24px;
}

/* Brand & Logo */
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-logo{
    width:56px;height:56px;border-radius:14px;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    box-shadow:var(--shadow);flex:0 0 auto;
}
.brand-title{font-weight:700;font-size:clamp(1.2rem,2.2vw,1.6rem);letter-spacing:.2px;white-space:nowrap}
.brand-subtitle{color:var(--muted);font-size:1rem;line-height:1.25}

/* ➜ Custom Logo Größe: Breite per --logo-w, Höhe automatisch */
.site-logo-wrap .custom-logo{
    width:var(--logo-w, 180px);
    height:auto;
    display:block;
}
/* Platzhalter-Kachel ausblenden, wenn echtes Logo vorhanden */
.brand.has-logo .brand-logo{ display:none; }
/* Fallback-Link-Wrapper ohne Logo */
.brand-home{ display:flex; align-items:center; gap:12px; }

/* =========================
   Suche – HEADER (nur im Header stylen)
   ========================= */
.site-header .search{
    margin-left:auto; position:relative; flex:1; max-width:420px;
}
.site-header .search input{
    width:100%; background:#0f0f10; border:1px solid var(--border);
    border-radius:999px; padding:.65rem 2.5rem .65rem 1rem; color:var(--text);
}
.site-header .search input::placeholder{ color:#8a8a8a; }
.site-header .search button{
    position:absolute; right:4px; top:4px; bottom:4px; /* im Feld andocken */
    border:0; border-radius:999px; padding:0 .9rem;
    background:var(--accent); color:#081423; font-weight:600; cursor:pointer;
}

/* =========================
   Suche – GLOBAL (Widgets, Seiten, Footer, etc.)
   ========================= */

/* Klassische Suche (z. B. Widget "Suchen") */
.search-form{
    display:flex; gap:8px; width:100%;
}
.search-form .search-field{
    flex:1; background:#0f0f10; border:1px solid var(--border);
    border-radius:12px; padding:.65rem .75rem; color:var(--text);
}
.search-form .search-submit{
    display:inline-flex; align-items:center; justify-content:center;
    position:static; /* wichtig: kein absolutes Positionieren! */
    border:1px solid var(--border); border-radius:12px; padding:.65rem .9rem;
    background:var(--accent); color:#081423; font-weight:600; cursor:pointer;
}

/* Gutenberg-Block: Suche */
.wp-block-search{
    width:100%;
}
.wp-block-search .wp-block-search__input{
    flex:1; background:#0f0f10; border:1px solid var(--border);
    border-radius:12px; padding:.65rem .75rem; color:var(--text);
}
.wp-block-search .wp-block-search__button{
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--border); border-radius:12px; padding:.65rem .9rem;
    background:var(--accent); color:#081423; font-weight:600; cursor:pointer;
}

/* Gutenberg-Variante "Button inside" hübsch machen */
.wp-block-search__button-inside .wp-block-search__inside-wrapper{
    display:flex; align-items:center; gap:8px;
    background:#0f0f10; border:1px solid var(--border); border-radius:999px; padding:4px;
}
.wp-block-search__button-inside .wp-block-search__input{
    border:0; background:transparent; padding:.5rem .75rem;
}
.wp-block-search__button-inside .wp-block-search__button{
    border:0; border-radius:999px; padding:.45rem .9rem;
    background:var(--accent); color:#081423; font-weight:600;
}


/* =========================
   Navigation
   ========================= */
.primary-nav{
    background:#151515;
    border-bottom:1px solid var(--border);
    position:sticky;
    top: var(--adminbar); /* <— unter der Adminbar andocken */
    z-index:50
}
.primary-nav .inner{display:flex;align-items:center;gap:16px}

/* Hamburger Button (nur mobil sichtbar) */
.nav-toggle{
    display:none;margin-left:auto;align-items:center;justify-content:center;
    width:44px;height:44px;border:1px solid var(--border);border-radius:12px;background:#0f0f10;cursor:pointer
}
.nav-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.nav-toggle svg{width:22px;height:22px}
.nav-toggle .icon-close{display:none}
.primary-nav.open .nav-toggle .icon-burger{display:none}
.primary-nav.open .nav-toggle .icon-close{display:block}

.nav-list{display:flex;gap:.5rem;flex-wrap:wrap;padding:0;margin:0;list-style:none}
.nav-list>li>a{display:block;padding:.75rem 1rem;border-radius:10px}
.nav-list>li>a:hover,.nav-list>li>a:focus-visible{background:#0f0f10}

.nav-list li{position:relative}
.nav-list li ul{
    position:absolute;inset:auto auto auto 0;min-width:220px;background:var(--surface);
    border:1px solid var(--border);border-radius:12px;padding:.5rem;list-style:none;display:none;box-shadow:var(--shadow)
}
.nav-list li:focus-within>ul,.nav-list li:hover>ul{display:block}
.nav-list li ul a{display:block;padding:.6rem .75rem;border-radius:8px}
.nav-list li ul a:hover,.nav-list li ul a:focus-visible{background:#0f0f10}

/* Mobile Navigation */
@media (max-width:900px){
    .nav-toggle{display:inline-flex}
    .nav-list{display:none;flex-direction:column;width:100%;padding-bottom:.75rem}
    .primary-nav.open .nav-list{display:flex}
    .nav-list li ul{position:static;display:none;background:#0f0f10;border:0;padding-left:.5rem}
    .nav-list li:focus-within>ul,.nav-list li:hover>ul{display:block}
}

/* =========================
   Layout / Content + Seitenmenü
   ========================= */
.layout{display:grid;grid-template-columns:1fr;gap:24px;padding-block:24px}
.sidebar{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);padding:16px;position:sticky;
    top: calc(88px + var(--adminbar)); /* <— Abstand inkl. Adminbar */
    height:fit-content
}
.content{
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);padding:24px
}

/* 2-Spalten – NUR wenn wirklich eine Sidebar gerendert wird */
@media (min-width:980px){
    body.sidebar-right .layout.with-sidebar { grid-template-columns: 1fr 320px; grid-template-areas: "content sidebar"; }
    body.sidebar-left  .layout.with-sidebar { grid-template-columns: 320px 1fr; grid-template-areas: "sidebar content"; }
    .layout.with-sidebar .content { grid-area: content; }
    .layout.with-sidebar .sidebar  { grid-area: sidebar; }
}

/* Einspaltig erzwingen, wenn keine Sidebar */
.no-sidebar .layout { grid-template-columns: 1fr !important; }

/* Karten & Typo */
.card{background:#121212;border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:none}
.card+.card{margin-top:12px}
.kicker{color:var(--accent-2);text-transform:uppercase;letter-spacing:.15em;font-weight:700;font-size:.8rem}
h1{font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1.2;margin:0 0 .5rem}
h2{font-size:clamp(1.25rem,1.8vw,1.6rem);margin:1.5rem 0 .75rem}
p{color:#d6d6d6}
small,.muted{color:var(--muted)}

/* Buttons */
.button{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1rem;border-radius:12px;border:1px solid transparent;background:var(--accent);color:#061121;font-weight:600;cursor:pointer}
.button:hover{filter:brightness(1.05)}
.button.secondary{background:transparent;border-color:var(--border);color:var(--text)}

/* Footer */
.site-footer{margin-top:24px;background:#0f0f10;border-top:1px solid var(--border)}
.site-footer .grid{display:grid;gap:16px;grid-template-columns:repeat(1,1fr);padding-block:24px}
.site-footer .sub{border-top:1px solid var(--border);padding-block:12px;color:var(--muted);font-size:.9rem}
@media (min-width:900px){.site-footer .grid{grid-template-columns:repeat(4,1fr)}}

/* Fokus-Stile */
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:8px}

/* Utilities */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}

/* Content: Abstand um ausgerichtete Bilder, damit Listen nicht anstoßen */
.entry-content::after { content: ""; display: block; clear: both; }

.entry-content .alignleft,
.entry-content figure.alignleft,
.entry-content .wp-block-image.alignleft {
    float: left;
    margin: 0 28px 18px 0;   /* → Abstand rechts größer machen */
}

.entry-content .alignright,
.entry-content figure.alignright,
.entry-content .wp-block-image.alignright {
    float: right;
    margin: 0 0 18px 28px;   /* → Abstand links größer machen */
}

/* Listen-Einzüge konsistent halten (für ul/ol neben Bildern) */
.entry-content ul,
.entry-content ol {
    padding-left: 1.25rem;
    list-style-position: outside;
}

/* Bildstil (optional, aber hübsch & stabil) */
.entry-content .wp-block-image img {
    display: block;
    height: auto;
    border-radius: 12px;
    max-width: 100%;
}

/* Mobile: Floats aufheben, alles einspaltig untereinander */
@media (max-width: 700px) {
    .entry-content .alignleft,
    .entry-content .alignright,
    .entry-content figure.alignleft,
    .entry-content figure.alignright,
    .entry-content .wp-block-image.alignleft,
    .entry-content .wp-block-image.alignright {
        float: none;
        margin: 0 0 16px 0;
    }
}