/*
 Theme Name:   Hamburgkonzerte
 Theme URI:    https://maikharing.com
 Description:  Standalone Theme für Hamburgkonzerte.de
 Author:       Maik Haring
 Author URI:   https://maikharing.com
 Version:      1.0.0
 Requires at least: 6.4
 Requires PHP: 7.4
 License:      GNU General Public License v2 or later
 Text Domain:  hk
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root {
    --hk-black:   #000000;
    --hk-white:   #ffffff;
    --hk-bg:      #e6e6e6;
    --hk-yellow:  #ffd930;
    --hk-text:    #000000;
    --hk-grey:    #333333;
    --hk-font:    Arial, Helvetica, sans-serif;
    --hk-nav-h:   75px;
    --hk-max:     1280px;
    --hk-gap:     20px;

    /* Ticker – via Customizer überschreibbar */
    --hk-ticker-bg:    #000000;
    --hk-ticker-color: #ffd930;
    --hk-ticker-speed: 40s;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }

body {
    background: var(--hk-bg);
    color: var(--hk-text);
    font-family: var(--hk-font);
    font-size: 14px;
    line-height: 1.5;
}

a             { color: var(--hk-black); text-decoration: none; }
a:hover       { text-decoration: none; }
img           { max-width: 100%; height: auto; display: block; }
p             { margin: 0 0 1em; }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--hk-font);
    font-weight: 700;
    color: var(--hk-black);
    margin: 0 0 .5em;
}
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }

hr { border: none; border-bottom: 1px solid var(--hk-grey); margin: 17px 0; }

/* ============================================================
   TICKER  –  Design aus Redesign-Konzept
   ============================================================ */

#hk-ticker {
    background: var(--hk-ticker-bg, #111111);
    color: #ffffff;
    overflow: hidden;
    height: 32px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.08);
    /* Volle Viewport-Breite – zuverlässigste Methode */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 3100;
}

/* Placeholder damit der Content nicht unter dem Ticker verschwindet */
body::before {
    content: '';
    display: block;
    height: 32px;
}

.admin-bar body::before { height: 64px; }
@media (max-width: 782px) { .admin-bar body::before { height: 78px; } }

.hk-ticker__track {
    display: flex;
    white-space: nowrap;
    min-width: max-content;
    animation: hk-ticker var(--hk-ticker-speed, 38s) linear infinite;
}
.hk-ticker__track:hover { animation-play-state: paused; }

@keyframes hk-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.hk-ticker__item {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .05em;
    color: #ffffff;  /* immer weiß */
    padding: 0 48px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
}
.hk-ticker__item::before {
    content: "▸";
    margin-right: 12px;
    opacity: .5;
}
.hk-ticker__item a         { color: #ffffff; text-decoration: none; }
.hk-ticker__item a:hover   { opacity: .75; }

/* Admin Bar */
.admin-bar #hk-ticker { top: 32px; }
@media (max-width: 782px) { .admin-bar #hk-ticker { top: 46px; } }

/* ============================================================
   NAVIGATION
   ============================================================ */
#hk-nav {
    width: 100%;
    background: var(--hk-white);
    border-bottom: 1px solid #c8c8c8;
    min-height: var(--hk-nav-h);
    position: sticky;
    top: 32px; /* direkt unter dem fixed Ticker */
    z-index: 3000;
}
.admin-bar #hk-nav { top: calc(32px + 32px); }
@media (max-width: 782px) { .admin-bar #hk-nav { top: calc(32px + 46px); } }

.hk-nav__inner {
    /* Volle Breite mit seitlichem Padding */
    width: 100%;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--hk-nav-h);
}

/* Logo */
.hk-nav__logo a  { display: block; }
.hk-nav__logo img { max-height: 55px; width: auto; }

/* Menu */
#hk-primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
#hk-primary-menu li a {
    display: block;
    padding: 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--hk-black);
    line-height: var(--hk-nav-h);
}
#hk-primary-menu li a:hover { opacity: .65; }

/* Aktive Seite: dezenter Punkt unten statt Unterstrich */
#hk-primary-menu li.current-menu-item > a,
#hk-primary-menu li.current-page-ancestor > a {
    opacity: 1;
    position: relative;
}
#hk-primary-menu li.current-menu-item > a::after,
#hk-primary-menu li.current-page-ancestor > a::after {
    content: '';
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--hk-black);
}

/* Hamburger */
.hk-nav__toggle {
    display: none;
    background: none;
    border: 2px solid var(--hk-black);
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 20px;
    cursor: pointer;
    color: var(--hk-black);
    line-height: 1;
}

@media (max-width: 1023px) {
    .hk-nav__toggle { display: block; }

    #hk-primary-menu {
        display: none;
        flex-direction: column;
        position: absolute;
        top: var(--hk-nav-h);
        left: 0;
        right: 0;
        background: var(--hk-white);
        border-top: 1px solid #999;
        padding: 0 15px;
        z-index: 2999;
        box-shadow: 0 4px 8px rgba(0,0,0,.12);
    }
    #hk-primary-menu.is-open { display: flex; }
    #hk-primary-menu li { border-top: 1px solid #ddd; }
    #hk-primary-menu li a { line-height: 1; padding: 12px 5px; }
}

/* ============================================================
   MASONRY GRID – Startseite
   ============================================================ */
#hk-main {
    /* Standard: max-width für Unterseiten */
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Startseite: volle Breite */
body.home #hk-main {
    max-width: none;
    margin: 0;
    padding: 0 0 0 15px;
}

/* Masonry container */
.grid {
    /* Masonry via JS */
}

.grid-sizer,
.grid-item {
    /* 25% der vollen Breite, Masonry rechnet Gutter selbst */
    width: calc(25% - 15px);
    margin-bottom: var(--hk-gap);
    background: var(--hk-white);
    position: relative;
}

.grid-item--width2 {
    width: calc(50% - 10px);
}

@media (max-width: 1279px) {
    .grid-sizer, .grid-item       { width: calc(33.333% - 14px); }
    .grid-item--width2            { width: calc(66.666% - 7px); }
}
@media (max-width: 959px) {
    .grid-sizer, .grid-item       { width: calc(50% - 10px); }
    .grid-item--width2            { width: 100%; }
}
@media (max-width: 599px) {
    .grid-sizer, .grid-item,
    .grid-item--width2            { width: 100%; margin-bottom: 10px; }
}

.grid-item a     { display: block; color: var(--hk-black); }
.grid-item img   { width: 100%; height: auto; }

.grid-item .text {
    background: var(--hk-white);
    padding: 7px 12px 10px;
}

.grid-item .band {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-item .date,
.grid-item .ort {
    font-size: 13px;
    display: inline;
}

.grid-item .date::after { content: ','; }

.grid-item .status {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--hk-yellow);
    color: var(--hk-black);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 8px;
    z-index: 5;
}

/* Mehr laden */
.hk-load-more {
    display: block;
    width: 100%;
    padding: 18px;
    background: var(--hk-black);
    color: var(--hk-white);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: .08em;
    border: none;
    cursor: pointer;
    margin-top: 4px;
}
.hk-load-more:hover { background: #222; }

/* Lade-Indikator */
.hk-loading { text-align: center; padding: 20px; font-size: 13px; color: #666; display: none; }
.hk-loading.is-visible { display: block; }

/* ============================================================
   SWIPER SLIDER
   ============================================================ */
.hk-swiper {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: var(--hk-black);
}
.hk-swiper .swiper-slide { position: relative; }
.hk-swiper .swiper-slide img { width: 100%; height: auto; display: block; }

.hk-swiper .text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,.78) 0%, transparent 100%);
    padding: 40px 14px 12px;
    pointer-events: none;
}
.hk-swiper .band {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
    color: var(--hk-white);
}
.hk-swiper .date,
.hk-swiper .ort { font-size: 13px; color: rgba(255,255,255,.9); display: inline; }
.hk-swiper .date::after { content: ','; }

.hk-swiper .swiper-pagination-bullet-active { background: var(--hk-yellow) !important; }

/* ============================================================
   KALENDER (page_calendar.php)
   ============================================================ */

.hk-cal-wrap {
    max-width: 1450px;
    margin: 0 auto;
    padding: 20px 15px 60px;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    align-items: start;
}

@media (max-width: 767px) {
    .hk-cal-wrap { grid-template-columns: 1fr; }
}

/* Sidebar */
.hk-cal-sidebar {
    background: var(--hk-white);
    padding: 20px;
    position: sticky;
    top: calc(var(--hk-nav-h) + 36px + 20px);
}
.hk-cal-sidebar h3 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 12px;
    margin-top: 0;
}
.hk-cal-sidebar p { font-size: 13px; line-height: 1.6; color: #555; }

/* Monatsgruppe */
.hk-cal-month { margin-bottom: 28px; }

.hk-cal-month__head {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 8px;
    letter-spacing: .04em;
}

/* Show-Zeile – exakt wie alte Site */
.hk-cal-row {
    display: grid;
    grid-template-columns: 52px 40px 56px 1fr auto;
    align-items: center;
    padding: 12px 14px;
    background: var(--hk-white);
    margin-bottom: 2px;
    text-decoration: none;
    color: var(--hk-black);
    transition: background .12s;
    gap: 0 4px;
}
.hk-cal-row:hover { background: #f0f0f0; }

/* Zebra */
.hk-cal-row:nth-child(even) { background: #f7f7f7; }
.hk-cal-row:nth-child(even):hover { background: #eeeeee; }

.hk-cal-row__dow {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
}
.hk-cal-row__day {
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    color: #000;
}
.hk-cal-row__mon {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
}
.hk-cal-row__info { min-width: 0; padding-left: 8px; }
.hk-cal-row__band {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .03em;
}
.hk-cal-row__venue {
    font-size: 13px;
    color: #555;
    margin-top: 1px;
}
.hk-cal-row__status {
    background: var(--hk-yellow);
    color: var(--hk-black);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 8px;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 12px;
}

@media (max-width: 599px) {
    .hk-cal-row { grid-template-columns: 40px 32px 44px 1fr; }
    .hk-cal-row__status { display: none; }
    .hk-cal-row__dow { font-size: 13px; }
    .hk-cal-row__day { font-size: 20px; }
    .hk-cal-row__mon { font-size: 13px; }
}

/* ============================================================
   SINGLE SHOW
   ============================================================ */
.hk-show-wrap {
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 0 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: flex-start;
}

/* 70% Hauptinhalt */
.hk-show-main {
    width: 70%;
    background: var(--hk-white);
}
.hk-show-main .image img { width: 100%; }
.hk-show-main .text      { padding: 20px; }
.hk-show-main .band h1   { font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.hk-show-main .date      { font-weight: 700; font-size: 14px; }
.hk-show-main .ort       { font-size: 14px; text-transform: uppercase; font-weight: 700; }
.hk-show-main .ticket-status {
    display: inline-block;
    background: var(--hk-yellow);
    font-weight: 700;
    font-size: 12px;
    padding: 3px 8px;
    text-transform: uppercase;
    margin: 6px 0;
}
.hk-show-main .content   { margin-top: 16px; line-height: 1.7; }
.hk-show-main .support h2 { font-size: 14px; font-weight: 700; }

/* 29% Sidebar */
.hk-show-sidebar {
    width: 29%;
    margin-left: 1%;
    background: var(--hk-white);
    padding: 20px;
}
.hk-show-sidebar .venue-name {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.hk-show-sidebar .venue-name a { color: var(--hk-black); }
.hk-show-sidebar .showtime     { font-size: 14px; margin-bottom: 4px; }

.hk-show-sidebar .ticket-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    margin: 12px 0;
}
.hk-show-sidebar .ticketab    { font-weight: 700; font-size: 16px; }
.hk-show-sidebar .ticketpreis { font-weight: 700; font-size: 16px; }
.hk-show-sidebar .tickettax   { font-size: 12px; color: #555; }

.hk-link-btn {
    display: block;
    background: var(--hk-black);
    color: var(--hk-white);
    padding: 8px 12px;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: background .2s;
}
.hk-link-btn:hover { background: #333; color: var(--hk-white); }

/* "Weitere Konzerte" */
.hk-more-shows {
    width: 29%;
    margin-left: 1%;
    margin-top: var(--hk-gap);
    background: var(--hk-white);
}
.hk-more-shows__headline {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 14px 14px 8px;
    border-bottom: 1px solid #eee;
}
.hk-more-shows__item a { display: block; color: var(--hk-black); }
.hk-more-shows__item img { width: 100%; }
.hk-more-shows__item .text { padding: 8px 14px 12px; }
.hk-more-shows__item .band { font-weight: 700; text-transform: uppercase; font-size: 13px; }
.hk-more-shows__item .date,
.hk-more-shows__item .ort  { font-size: 12px; display: inline; }
.hk-more-shows__item .date::after { content: ','; }

/* Präsentatoren */
.hk-praes { margin-top: 20px; }
.hk-praes__headline { font-weight: 700; margin-bottom: 10px; font-size: 13px; }
.hk-praes__list { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hk-praes__list img { max-height: 50px; width: auto; }

/* Mobile Show */
@media (max-width: 767px) {
    .hk-show-main    { width: 100%; }
    .hk-show-sidebar { width: 100%; margin: 0; }
    .hk-more-shows   { width: 100%; margin: var(--hk-gap) 0 0; }
}

/* ============================================================
   SINGLE VENUE
   ============================================================ */
.hk-venue-wrap {
    max-width: 1450px;
    margin: 0 auto;
    padding: 0 0 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: flex-start;
}
.hk-venue-main    { width: 70%; background: var(--hk-white); padding: 20px; }
.hk-venue-sidebar { width: 29%; margin-left: 1%; background: var(--hk-white); padding: 20px; }
.hk-venue-logo    { width: 29%; margin-left: 1%; }
.hk-venue-logo img { background: var(--hk-black); padding: 15px; }
.hk-venue-adresse { font-weight: 700; line-height: 1.6; margin-bottom: 12px; }

.hk-venue-shows   { margin-top: 20px; }
.hk-venue-show-item {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    align-items: center;
    text-decoration: none;
    color: var(--hk-black);
}
.hk-venue-show-item img   { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.hk-venue-show-item .band { font-weight: 700; text-transform: uppercase; font-size: 13px; }
.hk-venue-show-item .date { font-size: 12px; }
.hk-venue-show-item .status {
    background: var(--hk-yellow);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .hk-venue-main, .hk-venue-sidebar, .hk-venue-logo {
        width: 100%; margin: 0 0 var(--hk-gap);
    }
}

/* ============================================================
   FOOTER  –  4-spaltig, Design aus Redesign-Konzept
   ============================================================ */

#hk-footer {
    border-top: 1px solid rgba(0,0,0,.10);
    background: #000;
}

.hk-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 0;
}

@media (max-width: 767px) {
    .hk-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 479px) {
    .hk-footer__grid { grid-template-columns: 1fr; }
}

.hk-footer__col {
    padding: 48px 40px;
    border-right: 1px solid rgba(255,255,255,.08);
}
.hk-footer__col:last-child { border-right: none; }

.hk-footer__col h4 {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
    margin-bottom: 20px;
    margin-top: 0;
}

/* Spalte 1: Logo + Beschreibung */
.hk-footer__brand {
    display: block;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 16px;
    text-decoration: none;
    line-height: 1.2;
}
.hk-footer__brand img {
    max-height: 44px;
    width: auto;
    filter: brightness(0) invert(1);
    display: block;
    margin-bottom: 16px;
}
.hk-footer__desc {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,.4);
    line-height: 1.7;
    margin: 0;
}

/* Spalten 2–4: Listen */
.hk-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hk-footer__col ul a {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    transition: color .2s;
}
.hk-footer__col ul a:hover { color: #fff; }

/* Kontakt-Spalte */
.hk-footer__col address {
    font-style: normal;
    font-size: 13px;
    font-weight: 300;
    color: rgba(255,255,255,.45);
    line-height: 1.7;
}
.hk-footer__col address a { color: rgba(255,255,255,.45); text-decoration: none; }
.hk-footer__col address a:hover { color: #fff; }

/* Footer-Bottom */
.hk-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,.2);
}
.hk-footer__bottom p {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: 10px;
    letter-spacing: .08em;
    color: rgba(255,255,255,.25);
    margin: 0;
}
.hk-footer__bottom a {
    color: rgba(255,255,255,.25);
    text-decoration: none;
}
.hk-footer__bottom a:hover { color: rgba(255,255,255,.5); }

@media (max-width: 767px) {
    .hk-footer__col { padding: 32px 20px; }
    .hk-footer__bottom { flex-direction: column; gap: 8px; text-align: center; padding: 16px 20px; }
}

/* Back to top */
#hk-btt {
    position: fixed;
    bottom: 20px;
    right: 16px;
    width: 40px;
    height: 40px;
    background: var(--hk-black);
    color: var(--hk-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
    border: none;
    cursor: pointer;
    text-decoration: none;
}
#hk-btt.is-visible { opacity: .8; pointer-events: auto; }
#hk-btt:hover      { opacity: 1; }

/* ============================================================
   UTILS
   ============================================================ */
.clearfix::after { content: ""; display: table; clear: both; }

/* ============================================================
   VENUES ÜBERSICHT (page_venues.php)
   ============================================================ */

.hk-venues-wrap {
    max-width: 1450px;
    margin: 0 auto;
    padding: 20px 15px 60px;
}

.hk-venues-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

@media (max-width: 1279px) { .hk-venues-grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 959px)  { .hk-venues-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 599px)  { .hk-venues-grid { grid-template-columns: repeat(2, 1fr); } }

.hk-venue-card {
    background: var(--hk-black);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    text-decoration: none;
    transition: background .2s;
    overflow: hidden;
    position: relative;
}
.hk-venue-card:hover { background: #222; }

/* Logo-Bild: weiß invertiert auf schwarzem Hintergrund */
.hk-venue-card img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    display: block;
}

/* Fallback: Venue-Name als Text wenn kein Logo */
.hk-venue-card__name {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
}