/*
Theme Name: Polizeichor Hamburg
Theme URI: https://polizeichor-hamburg.de
Author: Polizeichor Hamburg von 1901 e.V.
Description: Schlankes, ruhiges Theme für den Polizeichor Hamburg von 1901 e.V.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: polizeichor-hamburg
*/

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--wp--preset--color--navy); }
a:hover { color: var(--wp--preset--color--navy-soft); }

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

.site-container { max-width: 44rem; margin: 0 auto; padding: 0 1.5rem; }
.site-container.-wide { max-width: 58rem; }
.site-container > .alignfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--wp--preset--color--navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 1000;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Badge / brand mark ---------- */
.badge {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1.4px solid var(--wp--preset--color--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: #fff;
}
.badge img { width: 100%; height: 100%; object-fit: contain; }
.badge-mark {
  font-family: var(--wp--preset--font-family--headline);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--wp--preset--color--navy);
  letter-spacing: 0.01em;
}

/* ---------- Site header / nav ---------- */
.site-header {
  position: relative;
  z-index: 50;
  border-bottom: 1px solid var(--wp--preset--color--rule);
  background: var(--wp--preset--color--paper);
}
/* Homepage only: pinned to the top the instant the Schlusswort's own sticky
   header releases, so the handoff between the two has no gap (see
   abschiedsbrief.js, which computes the same release point CSS sticky uses). */
.site-header.is-pinned {
  position: sticky;
  top: 0;
}
.site-header-row {
  max-width: 58rem;
  margin: 0 auto;
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.site-brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.site-brand-name {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--wp--preset--color--navy);
  line-height: 1.25;
}
.site-brand-sub { font-size: 0.72rem; color: var(--wp--preset--color--ink-faint); }

.primary-nav ul { list-style: none; display: flex; gap: 1.75rem; margin: 0; padding: 0; }
.primary-nav a {
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--wp--preset--color--navy-soft);
  letter-spacing: 0.02em;
}
.primary-nav a:hover { color: var(--wp--preset--color--navy); }

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.4rem;
  height: 2.4rem;
  background: none;
  border: 1px solid var(--wp--preset--color--rule);
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle-bar {
  display: block;
  width: 1.2rem;
  height: 2px;
  margin: 0 auto;
  background: var(--wp--preset--color--navy);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 640px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--wp--preset--color--paper);
    border-bottom: 1px solid var(--wp--preset--color--rule);
    box-shadow: 0 8px 16px rgba(0,0,0,0.06);
  }
  .primary-nav.is-open { display: block; }
  .primary-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1.5rem 1.25rem;
  }
  .primary-nav li { border-top: 1px solid var(--wp--preset--color--rule); }
  .primary-nav li:first-child { border-top: none; }
  .primary-nav a { display: block; padding: 0.85rem 0; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 62vh;
  background-color: var(--wp--preset--color--navy);
  background-size: cover;
  background-position: center 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--wp--preset--color--navy);
  opacity: 0.5;
  z-index: 1;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 40rem;
  padding: 2rem 1.5rem;
  text-align: center;
}
.hero-inner h1 {
  color: #fff;
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  margin: 0 0 1rem;
}
.hero-subhead {
  color: var(--wp--preset--color--panel);
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
}
.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0 0 1.1rem;
  display: block;
}

/* ---------- Section labels / titles (utility classes for block editor) ---------- */
.section-label {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--navy-soft);
  font-weight: 600;
  margin: 0 0 1rem;
  display: block;
}
.section-panel {
  background: var(--wp--preset--color--panel);
  border-top: 1px solid var(--wp--preset--color--rule);
  border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* ---------- Buttons: solid boxed, navy fill ---------- */
.wp-block-button__link {
  display: inline-block;
  background: var(--wp--preset--color--navy) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 0.85rem 1.9rem !important;
  font-weight: 600 !important;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}
.wp-block-button__link:hover {
  background: var(--wp--preset--color--navy-soft) !important;
}
.wp-block-buttons { gap: 1.25rem !important; }

/* ---------- Standalone section heading (label doubling as the only title) ---------- */
.section-heading-standalone {
  font-size: 0.86rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--navy) !important;
  font-family: var(--wp--preset--font-family--body) !important;
  font-weight: 700 !important;
  margin: 0 0 2rem !important;
}

/* ---------- Concert list: editorial rows, not boxed cards ---------- */
.concert-list {
  border-top: 1px solid var(--wp--preset--color--rule);
}
.concert-row {
  display: grid;
  grid-template-columns: 5.5rem 11rem 1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem 0;
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.concert-row-date {
  display: flex;
  flex-direction: column;
}
.concert-row-day {
  font-family: var(--wp--preset--font-family--headline);
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--wp--preset--color--navy);
}
.concert-row-month {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ink-faint);
  margin-top: 0.35rem;
}
.concert-row-media img {
  width: 100%;
  height: 7rem;
  object-fit: cover;
  transition: opacity 0.25s ease;
}
.concert-row:hover .concert-row-media img { opacity: 0.85; }
.concert-row-body h3 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
}
.concert-row-body p { margin: 0; color: var(--wp--preset--color--ink-soft); }

@media (max-width: 720px) {
  .concert-row {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .concert-row-date { flex-direction: row; align-items: baseline; gap: 0.6rem; }
  .concert-row-media img { height: 12rem; }
}

/* ---------- Homepage sections sit directly in <main> (no .site-container),
   so alignfull bands can go edge-to-edge; give their non-full content
   horizontal breathing room on narrow screens. ---------- */
@media (max-width: 720px) {
  .home #main > .wp-block-group:not(.alignfull),
  .section-panel > .wp-block-group {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ---------- DEMO ONLY: Chronik scroll-animation prototype ---------- */
.chronik-demo-wrap {
  display: grid;
  grid-template-columns: 1fr minmax(0, 44rem) 1fr;
  gap: 3rem;
  align-items: stretch;
  max-width: 130rem;
  margin: 0 auto;
  padding: 0 2.5rem 5rem;
}
.chronik-demo-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  padding-top: 2rem;
  padding-bottom: 8rem;
}
.chronik-demo-side.-left { align-items: flex-end; }
.chronik-demo-side.-right { align-items: flex-start; }
.chronik-demo-fade-img {
  margin: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
.chronik-demo-fade-img.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.chronik-demo-fade-img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--wp--preset--color--panel);
  border: 1px solid var(--wp--preset--color--rule);
  box-shadow: 0 18px 34px rgba(22, 41, 74, 0.14);
}
@media (max-width: 1100px) {
  .chronik-demo-wrap { grid-template-columns: 1fr; padding: 0; }
  .chronik-demo-side { display: none; }
}

.leaders-hall-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
}
.leaders-hall-name {
  font-family: var(--wp--preset--font-family--headline);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--wp--preset--color--navy);
  line-height: 1.3;
}
.leaders-hall-years {
  flex-shrink: 0;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--wp--preset--color--ink-faint);
}
@media (max-width: 480px) {
  .leaders-hall-item { flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 1.1rem 0; }
}

/* ---------- Chorleitung portraits: consistent framing for mixed-source photos ---------- */
.chorleitung-portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.chorleitung-portrait figcaption {
  font-size: 0.78rem;
  color: var(--wp--preset--color--ink-soft);
  margin-top: 0.5rem;
}

/* ---------- Chronik: clear divider between major sub-sections ---------- */
.chronik-section-divider {
  border: none;
  border-top: 1px solid var(--wp--preset--color--rule);
  margin: 3rem 0 2.5rem;
}

/* ---------- Patrons list (Schirmherren) — dignified but visually quieter/secondary ---------- */
.patrons-list {
  columns: 2;
  column-gap: 2.5rem;
  border-top: 1px solid var(--wp--preset--color--rule);
  padding-top: 1.25rem;
}
.patrons-list-item {
  break-inside: avoid;
  padding: 0.55rem 0;
  font-size: 0.92rem;
  color: var(--wp--preset--color--ink-soft);
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.patrons-list-item strong {
  color: var(--wp--preset--color--ink);
  font-weight: 600;
}
.patrons-list-years {
  display: block;
  font-size: 0.76rem;
  color: var(--wp--preset--color--ink-faint);
}
@media (max-width: 640px) {
  .patrons-list { columns: 1; }
}

/* ---------- Chronicle era blocks ---------- */
.wp-block-group.chronicle-era {
  border-top: 1px solid var(--wp--preset--color--rule);
  padding-top: 2rem;
  margin-top: 2rem;
}

/* ---------- Abschiedsbrief (farewell letter — permanent homepage section) ---------- */
/* Sticky on purpose, but only the compact label+tabs header — not the whole
   letter. An earlier attempt made the entire block sticky per the site
   owner's request, but the letter text is taller than the viewport, so
   pinning the whole thing trapped readers mid-letter with no way to scroll
   to the rest. Pinning just the header keeps the "floating, added on top"
   feel while the letter itself scrolls normally underneath it. */
.abschiedsbrief {
  padding: 3.5rem 0;
}
.abschiedsbrief-inline {
  max-width: 44rem;
  margin: 0 auto;
}
.abschiedsbrief-sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--wp--preset--color--panel);
  padding: 1rem 0;
  margin-bottom: 0.75rem;
}
.abschiedsbrief-title {
  font-size: 1.4rem;
  text-align: center;
  margin: 0 0 0.85rem;
}
.abschiedsbrief-tabs {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--wp--preset--color--rule);
}
.abschiedsbrief-tab {
  background: none;
  border: none;
  font-family: var(--wp--preset--font-family--headline);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--wp--preset--color--ink-faint);
  cursor: pointer;
  padding: 0;
}
.abschiedsbrief-tab.is-active {
  color: var(--wp--preset--color--navy);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.abschiedsbrief-body p {
  font-family: var(--wp--preset--font-family--headline);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--wp--preset--color--ink);
  margin: 0 0 1.15rem;
}
.abschiedsbrief-salutation { font-weight: 600; }
.abschiedsbrief-signature-img { width: 8rem; height: auto; margin-top: 1.75rem; opacity: 0.85; }
.abschiedsbrief-signature { margin-top: 0.25rem; }
.abschiedsbrief-signature span { display: block; font-size: 0.85rem; font-style: normal; color: var(--wp--preset--color--ink-soft); }

/* ---------- Contact form ---------- */
.wpcf7-form label { display: block; margin-bottom: 1.1rem; font-size: 0.92rem; color: var(--wp--preset--color--ink-soft); }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--wp--preset--color--rule);
  background: #fff;
  font-family: inherit;
  font-size: 0.98rem;
  border-radius: 2px;
}
.wpcf7-form textarea { min-height: 8rem; }
.wpcf7-form input[type="submit"] {
  background: var(--wp--preset--color--navy);
  color: #fff;
  border: none;
  padding: 0.85rem 1.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 2px;
  cursor: pointer;
}
.wpcf7-form input[type="submit"]:hover { background: var(--wp--preset--color--navy-soft); }
.wpcf7-not-valid-tip { color: #a4302a; font-size: 0.82rem; margin-top: 0.3rem; }
.wpcf7-response-output { border-radius: 2px; font-size: 0.9rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--wp--preset--color--panel);
  border-top: 1px solid var(--wp--preset--color--rule);
  padding: 3rem 0 2.5rem;
}
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; }
.footer-title {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wp--preset--color--navy-soft); font-weight: 600; margin: 0 0 0.85rem;
}
.footer-badge {
  display: block;
  width: 3.4rem;
  margin-bottom: 1rem;
}
.footer-badge img { width: 100%; height: auto; display: block; }
.footer-legal-list { list-style: none; margin: 0; padding: 0; }
.footer-legal-list li { margin: 0 0 0.4rem; }
.footer-legal-list a { font-size: 0.92rem; }
.site-footer p { margin: 0 0 0.4rem; font-size: 0.92rem; color: var(--wp--preset--color--ink-soft); line-height: 1.55; }
.site-footer a { color: var(--wp--preset--color--ink-soft); }
.site-footer a:hover { color: var(--wp--preset--color--navy); }
.footer-note {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--wp--preset--color--rule);
  font-size: 0.78rem; color: var(--wp--preset--color--ink-faint); text-align: center;
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ---------- Front-page content width handling ----------
   The front page is rendered unwrapped so Cover blocks can go full-bleed;
   everything else is constrained by hand here. */
.home main > * {
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.home main > .alignwide {
  max-width: 58rem;
}
.home main > .alignfull {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.home main > .hero {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ---------- Page (non-front) header ---------- */
.page-header { padding: 3.5rem 0 1rem; }
.page-header h1 {
  font-family: var(--wp--preset--font-family--headline);
}

/* ---------- Page cover (e.g. Über uns) ---------- */
.page-cover {
  position: relative;
  min-height: 40vh;
  background-color: var(--wp--preset--color--navy);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.page-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(22,41,74,0.75), rgba(22,41,74,0.15));
}
.page-cover-inner {
  position: relative;
  z-index: 2;
  max-width: 58rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem 2.5rem;
}
.page-cover-inner h1 {
  color: #fff;
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.4rem);
}