/*
Theme Name: Zum Goldenen Hirsch
Theme URI: https://www.endhirsch.de/
Author: Zum Goldenen Hirsch
Description: Theme für das ganzjährige Kurzfilmfestival Zum Goldenen Hirsch und das Finale "Der Große Endhirsch". Portiert aus der statischen HTML-Seite.
Version: 1.2.6
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zgh
*/

/* ---------- Farben ---------- */
:root {
    --zgh-dunkelbraun: #3a1c00;
    --zgh-creme: #ffeac1;
    --zgh-gold: #feed01;
    --zgh-glow: #ec6708;
}

/* ---------- Global ---------- */
html, body { width: 100%; }

body {
    background: #222 url(assets/images/bg_mountains.jpg) no-repeat fixed center top;
    background-image: image-set(url(assets/images/bg_mountains.webp) type("image/webp"), url(assets/images/bg_mountains.jpg) type("image/jpeg"));
    font-family: "Lato", "Helvetica Neue", "Trebuchet MS", "Lucida Grande", "Lucida Sans", Verdana, Arial;
    color: var(--zgh-creme);
    max-width: 58em;
    margin: 0 auto;
    text-align: justify;
}

h2 {
    font-family: "Open Sans Condensed", Verdana, Arial;
    margin: 0;
    font-size: 1.6em;
    text-transform: uppercase;
    letter-spacing: .1em;
}

h3 {
    color: var(--zgh-gold);
    font-family: "Lobster", "Helvetica Neue", "Trebuchet MS", Verdana, Arial;
    font-size: 2em;
    padding-left: .3em;
    font-weight: normal;
    letter-spacing: .06em;
}

h4 {
    font-family: "Open Sans Condensed", Verdana, Arial;
    margin: .2em;
    font-size: 1.4em;
    text-transform: uppercase;
    letter-spacing: .1em;
}

/* Links wie auf der alten Seite: nie unterstrichen, Farbwechsel beim Darüberfahren.
   "body a" ist bewusst stärker als die Unterstreichungs-Regel, die WordPress/Plugins teils einfügen. */
body a, body a:visited { color: var(--zgh-creme); text-decoration: none; }
body #content a:hover { color: var(--zgh-gold); }
a.mail { text-decoration: underline; }

hr { border: 0; height: 1px; background-color: var(--zgh-creme); }
table, input, textarea { padding: .2em; font-family: inherit; }
img { border: 0; max-width: 100%; height: auto; }

/* ---------- Layout ---------- */
#main { text-align: center; }

#header {
    position: relative;
    max-width: 800px;
    margin: 2em auto 0;
    padding: 0;
    height: 27em;
    overflow: hidden;
    border: 1px solid var(--zgh-dunkelbraun);
    background: var(--zgh-dunkelbraun) url(assets/images/header.jpg) no-repeat;
    background-image: image-set(url(assets/images/header.webp) type("image/webp"), url(assets/images/header.jpg) type("image/jpeg"));
    background-size: 100%;
}

#header img.header-img { display: block; margin: 0; width: 100%; height: auto; }

#headcaption {
    text-align: left;
    max-width: 35rem;
    color: var(--zgh-dunkelbraun);
    position: absolute;
    bottom: 1.5em;
    left: 0;
    padding: .5em .5em .5em 3.5em;
    background-color: var(--zgh-creme);
    line-height: 1.3;
}

#nav {
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
    background: var(--zgh-dunkelbraun);
    padding: .5em;
    border: .2em solid var(--zgh-dunkelbraun);
    text-align: center;
}

#nav ul, #endhirsch_nav ul, #endhirsch_nav_top ul { list-style: none; margin: 0; padding: 0; }
#nav li, #endhirsch_nav li, #endhirsch_nav_top li { display: inline-block; }

#nav a { color: var(--zgh-creme); padding: 0 1.1em; line-height: 2; }

#nav a:hover,
#nav .current-menu-item > a,
#nav .current-menu-ancestor > a {
    color: var(--zgh-gold);
    text-shadow: var(--zgh-glow) 0 0 .7em;
}

#fb_canvas {
    text-align: left;
    margin: 0 auto;
    max-width: 800px;
    overflow: hidden;
    color: var(--zgh-creme);
    background: var(--zgh-dunkelbraun) url(assets/images/bg_wood.jpg);
    background-image: image-set(url(assets/images/bg_wood.webp) type("image/webp"), url(assets/images/bg_wood.jpg) type("image/jpeg"));
    border: 1px solid var(--zgh-dunkelbraun);
}

#content {
    margin: 3em;
    line-height: 1.5;
    font-family: "Lucida Grande", "Lucida Sans", Helvetica, Arial, "Trebuchet MS";
    text-shadow: var(--zgh-dunkelbraun) .1em .1em .6em;
}

#content img { box-shadow: 0 0 .6em rgba(0,0,0,.5); }

.sponsors {
    display: block;
    max-width: 800px;
    margin: 0 auto;
    background: var(--zgh-creme);
    border: 3px solid var(--zgh-dunkelbraun);
    box-sizing: border-box;
}
.sponsors img { display: block; width: 100%; }

#copyright { text-align: right; margin: 1em 5em 1em 1em; font-size: .8em; }

/* ---------- Seitenlaschen ---------- */
#fb_tab, #gh_tab {
    font-family: "Open Sans Condensed", Verdana, Arial;
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .1em;
    position: absolute;
    text-align: left;
    background: var(--zgh-dunkelbraun);
    padding: 1em;
}
#fb_tab { margin-left: 67.5em; margin-top: 5em; width: 17em; }
#gh_tab { margin-left: -12em; margin-top: 8em; width: 15em; }
#fb_tab img { margin: .3em .5em .3em .3em; float: left; height: 2.5em; }
.social-tab .social-tab-title { display: block; margin-bottom: .4em; font-size: 1.1em; }
.social-tab a { display: flex; align-items: center; gap: .6em; margin: .35em 0; }
.social-tab a:hover { color: var(--zgh-gold); }
.social-tab svg { width: 2.2em; height: 2.2em; flex: none; }

.social-footer { text-align: center; margin: 1em 0 0; }
.social-footer a { display: inline-block; margin: 0 .4em; transition: transform .15s; }
.social-footer a:hover { transform: scale(1.12); }
.social-footer svg { width: 2em; height: 2em; display: block; }
#gh_tab img { margin: .3em .5em .3em .3em; float: left; height: 5em; }

/* ---------- Klassen ---------- */
.gold, .hbraun, .dbraun {
    font-family: "Lobster", "Helvetica Neue", "Trebuchet MS", Verdana, Arial;
    font-size: 1.5em;
    font-weight: normal;
    letter-spacing: .06em;
}
.gold   { color: var(--zgh-gold); }
.hbraun { color: var(--zgh-creme); }
.dbraun { color: var(--zgh-dunkelbraun); }

.dots {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    font-family: "Lobster", Verdana, Arial;
    letter-spacing: .4em;
    line-height: 1;
    color: var(--zgh-creme);
}
.dots::before { content: "......................................................................"; }

/* Buttons (ersetzt die jQuery-UI-Buttons der alten Seite) */
#content button, .wp-block-button__link {
    font-family: "Lobster", Verdana, Arial;
    font-size: 1em;
    letter-spacing: .06em;
    color: var(--zgh-dunkelbraun);
    background: var(--zgh-creme);
    border: .15em solid var(--zgh-dunkelbraun);
    border-radius: .3em;
    padding: .3em 1em;
    cursor: pointer;
    text-shadow: none;
}
#content button:hover, .wp-block-button__link:hover {
    color: var(--zgh-gold);
    background: var(--zgh-dunkelbraun);
    border-color: var(--zgh-gold);
    text-shadow: var(--zgh-glow) 0 0 .7em;
}

.termin { margin-bottom: 2em; }
.termin-bild { margin-top: 1em; }
.termin-bild img { display: block; max-width: 100%; height: auto; }
.termin-text { margin-top: .5em; }
.termine-liste .termin { padding-bottom: 1.5em; border-bottom: 1px dotted rgba(255, 234, 193, .4); }
.termine-liste .termin:last-child { border-bottom: 0; }
.termin-endhirsch { border-left: .25em solid var(--zgh-gold); padding-left: 1em; }

/* Kalender */
.termin-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1.2em; margin: .6em 0 0; }
.termin-aktionen:empty { display: none; }
a.kalender-link, .kalender-abo a { text-decoration: none; }
a.kalender-link:hover, .kalender-abo a:hover { color: var(--zgh-gold); }
.kalender-abo { margin-top: 1.5em; }
.kalender-abo small { opacity: .75; }

/* Filme */
.film-sektion { color: var(--zgh-gold); margin: 1.5em 0 .6em; }
.filmliste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5em, 1fr));
    gap: 1.2em;
    margin-bottom: 1.5em;
}
a.film { display: flex; flex-direction: column; text-decoration: none; line-height: 1.3; }
a.film:hover .film-titel { color: var(--zgh-gold); }
.film-bild {
    display: block; aspect-ratio: 16 / 9; overflow: hidden;
    background: rgba(58, 28, 0, .6); margin-bottom: .4em;
    border: 1px solid rgba(255, 234, 193, .25);
}
.film-bild img { width: 100%; height: 100%; object-fit: cover; box-shadow: none !important; transition: transform .3s; }
a.film:hover .film-bild img { transform: scale(1.04); }
.film-bild img.film-platzhalter { object-fit: contain; padding: 12%; box-sizing: border-box; opacity: .5; }
.film-titel { font-size: 1.15em; }
.film-regie { font-size: .9em; opacity: .85; }
.film-auszeichnung { color: var(--zgh-gold); font-size: .85em; }
.film-auszeichnung.gross { font-family: "Lobster", Verdana, Arial; font-size: 1.3em; margin: .2em 0; }
.film-preis .film-bild { border-color: var(--zgh-gold); }
.film-fakten { opacity: .9; }
.jahr-sprung a { display: inline-block; margin-right: .8em; font-family: "Lobster", Verdana, Arial; font-size: 1.2em; }
h3.jahr { border-bottom: 1px dotted rgba(255, 234, 193, .4); padding-bottom: .2em; }

/* Preisträger */
.preistraeger-jahr h4 { color: var(--zgh-gold); margin-top: 1.5em; }
.preistraeger-jahr .preis { margin: 0 0 1em; }
.preistraeger-jahr .preis .hbraun { font-size: 1.4em; }
.alle-filme { text-align: right; margin-top: 2em; }

/* Countdown zum Endhirsch auf der normalen Startseite */
a.endhirsch-teaser {
    display: block;
    text-align: center;
    margin: -1em 0 1.5em;
    padding: .8em 1em;
    background: rgba(58, 28, 0, .75);
    border: .15em solid var(--zgh-gold);
    line-height: 1.6;
    transition: box-shadow .2s;
}
a.endhirsch-teaser:hover { box-shadow: 0 0 1.2em var(--zgh-glow); }
a.endhirsch-teaser h2 { color: var(--zgh-gold); }
.alle-termine { text-align: right; margin: 3em 0 1em; }

.error, .confirm {
    max-width: 40em;
    margin: 1.5em auto;
    padding: 1em;
    text-align: center;
    text-shadow: none;
}
.error   { border: 1px solid #cd0a0a; background: #fef1ec; color: #cd0a0a; }
.confirm { border: 1px solid #ffdb1f; background: var(--zgh-creme); color: var(--zgh-dunkelbraun); }

.embed-container, .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.embed-container iframe, .wp-block-embed__wrapper iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

/* WordPress Pflichtklassen */
.alignleft  { float: left;  margin: 0 1em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1em; }
.aligncenter { display: block; margin: 0 auto 1em; }
.wp-caption-text { font-size: .85em; text-align: center; }
.screen-reader-text {
    position: absolute !important; clip: rect(1px,1px,1px,1px);
    width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Endhirsch ---------- */
#endhirsch_nav, #endhirsch_nav_top {
    font-family: "Lobster", "Helvetica Neue", "Trebuchet MS", Verdana, Arial;
    background: var(--zgh-creme);
    padding: .4em 0;
    border: .2em solid var(--zgh-dunkelbraun);
    text-align: center;
    font-size: 1.3em;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
}
#endhirsch_nav_top {
    display: none;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0; right: 0;
}
.admin-bar #endhirsch_nav_top { top: 32px; }

#endhirsch_nav a, #endhirsch_nav_top a,
#endhirsch_nav a:visited, #endhirsch_nav_top a:visited {
    color: var(--zgh-dunkelbraun);
    padding: .4em 1em;
    display: inline-block;
}
#endhirsch_nav a:hover, #endhirsch_nav_top a:hover,
#endhirsch_nav .current-menu-item > a, #endhirsch_nav_top .current-menu-item > a {
    color: var(--zgh-gold);
    background: var(--zgh-dunkelbraun);
    text-shadow: var(--zgh-glow) 0 0 .7em;
}

.endhirsch #header {
    background-image: url(assets/images/endhirsch/endhirsch_header.jpg);
    background-image: image-set(url(assets/images/endhirsch/endhirsch_header.webp) type("image/webp"), url(assets/images/endhirsch/endhirsch_header.jpg) type("image/jpeg"));
}

#endhirsch_headcaption {
    text-align: center;
    width: 25em;
    color: var(--zgh-creme);
    position: absolute;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
    padding: .3em 0 .5em;
    background-color: var(--zgh-dunkelbraun);
}
#endhirsch_headcaption .hbraun { font-size: 1.2em; }

#endhirsch_plate { text-align: center; margin-bottom: 1em; }
#endhirsch_plate .gold { font-size: 3em; line-height: 1.5; }

/* Programm-Tabelle */
.programm { margin: auto; table-layout: fixed; }
.programm td { padding: 8px; vertical-align: top; }

/* Mitlaufendes Endhirsch-Menü & Facebook-Lasche (per theme.js ein-/ausgeblendet) */
#endhirsch_nav_top { display: block; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
#endhirsch_nav_top.visible { opacity: 1; visibility: visible; }
#fb_tab { transition: opacity .6s, visibility .6s; }
#fb_tab.faded { opacity: 0; visibility: hidden; }

/* Ticket-Popup (eigenes, ohne fremde Skripte) */
dialog.ticket-popup {
    width: min(1000px, 94vw);
    height: min(900px, 90vh);
    padding: 0;
    border: .2em solid var(--zgh-gold);
    background: #fff;
    overflow: visible;
    box-shadow: 0 0 2em rgba(0, 0, 0, .7);
}
dialog.ticket-popup::backdrop { background: rgba(20, 10, 0, .8); }
dialog.ticket-popup iframe { display: block; width: 100%; height: calc(100% - 2.4em); border: 0; }
.ticket-popup-close {
    position: absolute; top: -1em; right: -1em;
    width: 2em; height: 2em; border-radius: 50%;
    background: var(--zgh-dunkelbraun); color: var(--zgh-gold);
    border: .15em solid var(--zgh-gold);
    font-size: 1.3em; line-height: 1; cursor: pointer;
}
.ticket-popup-close:hover { text-shadow: var(--zgh-glow) 0 0 .7em; }
.ticket-popup-fallback {
    margin: 0; height: 2.4em; line-height: 2.4em; text-align: center;
    background: var(--zgh-dunkelbraun); font-size: .85em;
}
.ticket-popup-fallback a { color: var(--zgh-creme); }
html.popup-offen { overflow: hidden; }

/* Menü-Knopf fürs Handy (nur schmal sichtbar) */
.nav-toggle { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
    #fb_tab, #gh_tab { display: none; }
}

@media (max-width: 820px) {
    body { background-attachment: scroll; }
    #header { height: auto; margin-top: 0; display: flex; flex-direction: column; background-image: none; }
    #header > a { order: 1; }
    #header img.header-img { opacity: 1 !important; }
    #headcaption, #endhirsch_headcaption { order: 2; }
    #headcaption { position: static; max-width: none; padding: .5em 1em; }
    #endhirsch_headcaption { position: static; transform: none; width: auto; }
    #content { margin: 1.5em 1em; }
    /* Aufklapp-Menü */
    .nav-toggle {
        display: block; width: 100%;
        background: none; border: 0; cursor: pointer;
        color: inherit; font: inherit; font-size: 1.1em; letter-spacing: .08em;
        padding: .35em;
    }
    #nav .nav-toggle { color: var(--zgh-creme); text-transform: uppercase; font-family: "Open Sans Condensed", Verdana, Arial; }
    #endhirsch_nav .nav-toggle { color: var(--zgh-dunkelbraun); }
    #nav ul, #endhirsch_nav ul { display: none; }
    #nav.open ul, #endhirsch_nav.open ul { display: block; padding-bottom: .3em; }
    #nav li, #endhirsch_nav li { display: block; }
    #nav a { display: block; padding: .45em; }
    #endhirsch_nav a { display: block; padding: .35em; }
    #endhirsch_nav_top { display: none; }
    #copyright { margin: 1em; text-align: center; }
    .programm, .programm tbody, .programm tr, .programm td { display: block; width: auto !important; }
    .programm img { height: 6em !important; }
}