/*
Theme Name:  DEG Pictures – Astra Child
Theme URI:   https://github.com/deg-de/deg_pictures_child
Description: Child Theme für deggendorf.pictures. Ersetzt Astra-Header und -Footer durch die .pictures-Komposition: dunkler Sticky-Header mit Stadtwappen und Wortmarke, dunkler Footer mit Archiv-, Nutzungs- und Stadtspalten sowie Sprachumschaltung. Setzt die gemeinsamen Design-Tokens, auf die DEG Pictures Core aufsetzt. Texte unter Design → Pictures Design.
Author:      Stadt Deggendorf
Author URI:  https://www.deggendorf.de
Template:    astra
Version:     0.2.0
License:     GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: deg-pictures-child
*/

/* ==========================================================================
   Herkunft der Werte

   Typografie, Radien, Schatten und Komponentenformen stammen aus dem
   Hausstil (deg_deggendorf/assets/site-v3.css) – kein Neuentwurf.

   Zwei Abweichungen mit Absicht:
   1. Nachtgrund statt Papiergrund. Der bestehende Auftritt ist dunkel
      (gemessen #1A1A1A), und das bleibt so: ein Bildarchiv soll die Fotos
      zeigen, nicht das Raster.
   2. Der Grund ist neutralgrau-schwarz (#111114) statt Hausstil-Navy
      (#0C1A28). Ein blaustichiger Grund verschiebt die Farbwahrnehmung der
      Fotos – bei einer Bilddatenbank ist Farbneutralität die höhere Pflicht.
   ========================================================================== */

/* --- Inter, lokal (SIL Open Font License, siehe assets/fonts/LICENSE.txt) -- */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("assets/fonts/inter-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: "Inter";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("assets/fonts/inter-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;
}

/* --- Tokens --------------------------------------------------------------
   DEG Pictures Core liest genau diese Namen aus. Wer hier etwas ändert,
   ändert das Plugin gleich mit.
   ------------------------------------------------------------------------- */

:root {
    --deg-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Eigenfarbe .pictures – Violett/Indigo, Farbwinkel 251°.
       Mindestabstand zu jeder bereits vergebenen Bereichsfarbe: 36°.
       --deg-violet  Identität, Favicon-Grund. Weiß darauf 6,72:1.
       --deg-accent  Schrift und Linien auf Nachtgrund: 5,99:1.
       --deg-brand   Signalfarbe für Flächen, Punkte, Verläufe (kein Text). */
    --deg-violet: #5b3fd6;
    --deg-brand: #7c5cff;
    --deg-accent: #9b7bff;
    --deg-accent-14: rgba(124, 92, 255, 0.14);
    --deg-accent-24: rgba(124, 92, 255, 0.24);

    /* Nachtgrund – neutral, damit Fotos farbrichtig bleiben */
    --deg-night: #111114;
    --deg-night-2: #17171c;
    --deg-night-3: #1f1f26;
    --deg-night-4: #282833;
    --deg-night-deep: #0c0c0f;

    --deg-ink: #f4f4f6;
    --deg-ink-70: rgba(244, 244, 246, 0.72);
    --deg-ink-55: rgba(244, 244, 246, 0.56);
    --deg-ink-40: rgba(244, 244, 246, 0.4);
    --deg-line: rgba(255, 255, 255, 0.1);
    --deg-line-2: rgba(255, 255, 255, 0.06);

    /* Form – identisch zum Hausstil */
    --deg-shell: 1400px;
    --deg-r-card: 28px;
    --deg-r-tile: 22px;
    --deg-r-sm: 14px;
    --deg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --deg-header-height: 76px;
}

/* --- Grundlagen ----------------------------------------------------------- */

/* Astra setzt beides selbst; hier noch einmal, damit Kopf und Fuß auch dann
   maßhalten, wenn das Eltern-Stylesheet einmal nicht geladen ist –
   width:100% plus padding-inline läuft sonst über die Seitenbreite hinaus. */
.deg-shell,
.deg-hd,
.deg-hd *,
.deg-ft,
.deg-ft * {
    box-sizing: border-box;
}

body {
    margin: 0;
}

body,
body.ast-separate-container {
    background: var(--deg-night);
    color: var(--deg-ink-70);
    font-family: var(--deg-sans);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

body h1,
body h2,
body h3,
body h4 {
    color: var(--deg-ink);
    font-family: var(--deg-sans);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

body a { color: var(--deg-accent); }
body a:hover { color: var(--deg-ink); }

/* Astra-Container auf den Nachtgrund holen. */
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.ast-separate-container #primary,
.ast-plain-container .site-content,
.site-content,
#content {
    background: transparent;
}

.ast-separate-container .site-content > .ast-container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

:focus-visible {
    outline: 2px solid var(--deg-accent);
    outline-offset: 3px;
}

/* --- Gemeinsames Maß ------------------------------------------------------ */

.deg-shell {
    width: 100%;
    max-width: var(--deg-shell);
    margin-inline: auto;
    padding-inline: clamp(20px, 3.4vw, 56px);
}

.deg-skiplink {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 200;
    padding: 12px 20px;
    border-radius: 999px;
    background: var(--deg-brand);
    color: #fff;
    font-weight: 600;
    transition: top 0.2s var(--deg-ease);
}

.deg-skiplink:focus { top: 14px; color: #fff; }

/* --- Kopf ----------------------------------------------------------------- */

.deg-hd {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--deg-night) 82%, transparent);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--deg-line-2);
}

.deg-hd__wrap {
    display: flex;
    align-items: center;
    gap: 28px;
    height: var(--deg-header-height);
}

.deg-hd__brand {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
    color: var(--deg-ink);
    text-decoration: none;
}

.deg-hd__brand:hover { color: var(--deg-ink); }

.deg-hd__crest {
    width: 30px;
    height: 37px;
    flex: none;
    color: currentColor;
}

.deg-hd__wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.deg-hd__wordmark .main {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.deg-hd__wordmark .sub {
    align-self: flex-end;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--deg-accent);
}

.deg-hd__logo img { max-height: 44px; width: auto; }

.deg-hd nav { margin-left: auto; }

.deg-hd nav ul {
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.deg-hd nav li { margin: 0; }

.deg-hd nav a {
    position: relative;
    display: block;
    padding: 6px 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--deg-ink-55);
    text-decoration: none;
    transition: color 0.25s var(--deg-ease);
}

.deg-hd nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--deg-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--deg-ease);
}

.deg-hd nav a:hover { color: var(--deg-ink); }

.deg-hd nav a:hover::after,
.deg-hd nav .current-menu-item > a::after,
.deg-hd nav .current_page_item > a::after {
    transform: scaleX(1);
}

.deg-hd nav .current-menu-item > a,
.deg-hd nav .current_page_item > a { color: var(--deg-ink); }

.deg-hd__cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: none;
    height: 42px;
    padding: 0 22px;
    border-radius: 999px;
    background: transparent;
    color: var(--deg-ink-70);
    box-shadow: inset 0 0 0 1px var(--deg-line);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s var(--deg-ease), color 0.25s var(--deg-ease),
        box-shadow 0.25s var(--deg-ease);
}

.deg-hd__cta:hover {
    background: var(--deg-night-3);
    color: var(--deg-ink);
    box-shadow: inset 0 0 0 1px var(--deg-accent-24);
}

.deg-hd__cta svg { width: 17px; height: 17px; }

.deg-menu-toggle {
    display: none;
    margin-left: auto;
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--deg-night-3);
    color: var(--deg-ink);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}

/* --- Fuß ------------------------------------------------------------------ */

.deg-ft {
    margin-top: clamp(52px, 6vw, 96px);
    padding: clamp(44px, 5vw, 72px) 0 30px;
    border-top: 1px solid var(--deg-line-2);
    background: var(--deg-night-deep);
}

.deg-ft__top {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: clamp(28px, 3.4vw, 56px);
}

.deg-ft__claim {
    margin-top: 20px;
    max-width: 34ch;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--deg-ink-55);
}

.deg-ft__col h4 {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--deg-ink-40);
}

.deg-ft__col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.deg-ft__col li { margin: 0; }

.deg-ft__col a {
    display: block;
    padding: 6px 0;
    font-size: 15px;
    color: var(--deg-ink-70);
    text-decoration: none;
    transition: color 0.25s var(--deg-ease);
}

.deg-ft__col a:hover { color: var(--deg-accent); }

.deg-ft__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: clamp(34px, 4vw, 56px);
    padding-top: 24px;
    border-top: 1px solid var(--deg-line-2);
    font-size: 14px;
    color: var(--deg-ink-40);
}

.deg-ft__bottom ul {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.deg-ft__bottom a {
    color: var(--deg-ink-40);
    text-decoration: none;
    transition: color 0.2s var(--deg-ease);
}

.deg-ft__bottom a:hover { color: var(--deg-ink); }

.deg-ft__langs { display: flex; gap: 6px; }

.deg-ft__langs a {
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--deg-line);
    font-size: 13px;
    font-weight: 500;
}

.deg-ft__langs a[aria-current="true"] {
    background: var(--deg-night-3);
    color: var(--deg-ink);
    box-shadow: none;
}

/* --- Albumseite: Titelblock ins gemeinsame Maß ---------------------------- */

/* Astra rahmt den Titelblock in seine eigene Inhaltsbreite (1240px, mittig)
   und setzt den Beitrag zusätzlich mit Innenabstand. Kopfzeile, Titel und
   Inhalt standen dadurch in drei verschiedenen Maßen. Hier kommen alle drei
   auf dasselbe: 1400px mit dem gleichen Innenabstand wie .deg-shell. */

.deg-pictures-album .site-main > article {
    padding-inline: 0;
}

/* Astras Titelblock weicht: das Plugin setzt Titel und Rückweg selbst, im
   selben Rahmen wie Faktenzeile und Raster. Die Klasse deg-pictures-album
   kommt vom Plugin – ist es abgeschaltet, fehlt sie, und Astras Titel ist
   wieder da. */
.deg-pictures-album .entry-header {
    display: none;
}

/* Autor und Veröffentlichungsdatum gehören hier nicht hin: das Datum der
   Veranstaltung steht in der Faktenzeile, und wer das Album angelegt hat,
   ist für Besucher ohne Belang. */
.deg-pictures-album .entry-meta,
.deg-pictures-album .ast-blog-meta-container,
.deg-pictures-album .post-meta {
    display: none;
}

/* --- Raster-Anpassungen --------------------------------------------------- */

@media (max-width: 921px) {
    :root { --deg-header-height: 66px; }

    .deg-hd__wrap { gap: 16px; }
    .deg-hd nav { display: none; }
    .deg-hd__cta { display: none; }
    .deg-menu-toggle { display: inline-flex; align-items: center; }

    .deg-hd.is-open nav {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        margin: 0;
        padding: 14px clamp(20px, 3.4vw, 56px) 22px;
        background: var(--deg-night-2);
        border-bottom: 1px solid var(--deg-line-2);
    }

    .deg-hd.is-open nav ul { flex-direction: column; gap: 4px; }
    .deg-hd.is-open nav a { padding: 10px 0; font-size: 17px; }

    .deg-ft__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
    .deg-ft__top { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}