/*
Theme Name: Celler Presse Video
Theme URI: https://celler-presse.de/
Author: Celler Presse
Author URI: https://celler-presse.de/
Description: Schnelles, barrierearmes, videozentriertes Theme für eine moderne Videoseite mit Header-Logo, 728x90-Banner, Feature-Video und Video-Grid.
Version: 1.1.0
Text Domain: cp-video
Requires at least: 6.1
Tested up to: 6.6
Requires PHP: 7.4
*/

/* ---------------- Reset & Basics ---------------- */
:root{
  --bg:#0b0d10;
  --surface:#111418;
  --text:#e6e7ea;
  --muted:#9aa3ad;
  --brand:#ff5722;
  --focus:#ffd166;
  --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;line-height:1.6;background:var(--bg);color:var(--text)}
img,video{max-width:100%;height:auto}
a{color:var(--text);text-decoration:none}
a:hover{text-decoration:underline}
.screen-reader-text{position:absolute;left:-9999px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------------- Global Layout ---------------- */
.container{max-width:var(--container);margin-inline:auto;padding:0 16px}
.header{background:#0f1317;border-bottom:1px solid #1b2128}

/* ===== HEADER (Variante A: Flexbox mit Wrap) ===== */
/* Header-Layout als Flexbox: Desktop nebeneinander, Mobile wrap */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  flex-wrap:wrap; /* erlaubt Umbruch auf Mobile */
}

/* Logo bleibt immer gleich groß (keine Skalierung) */
.brand{display:flex;align-items:center;gap:12px}
.brand img,
.custom-logo{
  height:56px;
  width:auto;
  max-width:none;
  display:block;
}

/* Außen-Container für den Banner (für das Wrap, keine Zwangsbreite) */
.header-ad-area{}

/* Eigentliche Banner-Box – wird von cpv_render_header_ad() ausgegeben */
.ad-728x90{
  width:728px;               /* Desktopbreite */
  max-width:100%;
  aspect-ratio: 728 / 90;    /* hält 728x90-Proportion */
  display:block;
  background:#1a1f25;
  border:1px dashed #2c3642;
  border-radius:8px;
  overflow:hidden;
}

/* Inhalte im Banner füllen die Box */
.ad-728x90 img,
.ad-728x90 iframe,
.ad-728x90 video,
.ad-728x90 .ad-content > *{
  width:100%;
  height:100%;
  display:block;
  border:0;
}

/* Platzhalter-Style (falls kein Ad hinterlegt) */
.ad-slot{
  color:var(--muted);
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

/* Mobile/Tablet: Banner unter Logo + volle Breite */
@media (max-width: 991px){
  /* Reihenfolge ergibt sich durch DOM + flex-wrap (Logo kommt zuerst) */
  .ad-728x90{ width:100%; max-width:100%; } /* skaliert proportional durch aspect-ratio */
}

/* ---------------- Navigation ---------------- */
.navbar{background:#0f1317;position:sticky;top:0;z-index:99;border-bottom:1px solid #1b2128}
.navbar ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.navbar a{display:block;padding:12px 14px;border-radius:8px}
.navbar a:hover,.navbar a:focus{background:#171c22}

/* ---------------- Feature (Top-Video) ---------------- */
.feature-article{
  background:var(--surface);
  border:1px solid #1b2128;
  border-radius:14px;
  overflow:hidden;
  margin:20px 0;
  padding:16px;
}
.feature-media .embed, .card-media .embed{ position:relative }
.feature-media iframe,
.card-media iframe,
.feature-media video,
.card-media video{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  display:block;
}
.feature-title{ margin:12px 0 6px; font-size:clamp(22px,3vw,30px) }

/* ---------------- Grid 3 (weitere Videos) ---------------- */
.grid-3{
  display:grid;
  gap:20px;
  grid-template-columns: 1fr;
}
@media (min-width:768px){
  .grid-3{ grid-template-columns: repeat(3, 1fr); }
}

/* ---------------- Karten (Listen/Archiv) ---------------- */
.card{background:var(--surface);border:1px solid #1b2128;border-radius:14px;overflow:hidden}
.card-media{position:relative;background:#0c0f13}
.card-media a::after{content:"▶";position:absolute;inset:auto 12px 12px auto;font-size:28px;opacity:.8}
.card-body{padding:16px}
.card h2{margin:0 0 8px;font-size:clamp(18px,2vw,22px)}
.meta{color:var(--muted);font-size:14px}
.btn-link{
  display:inline-block;
  padding:8px 12px;
  border:1px solid #2b323c; border-radius:8px;
  text-decoration:none;
}
.btn-link:hover{ background:#171c22; text-decoration:none }

/* ---------------- Single & Pages ---------------- */
.single-hero{background:var(--surface);border:1px solid #1b2128;border-radius:14px;padding:16px}
.single-title{margin:8px 0 12px;font-size:clamp(22px,3.2vw,34px)}
.prose p{margin:0 0 1em}
.page-article { background:var(--surface); border:1px solid #1b2128; border-radius:14px; padding:16px; margin:20px 0; }
.page-article .single-hero { margin-bottom:8px; }
.page-article .single-media { margin:12px 0 20px; }

/* ---------------- Home Grid (falls benötigt) ---------------- */
.grid{display:grid;gap:20px}
@media(min-width:768px){.grid{grid-template-columns:2fr 1fr}}

/* ---------------- Footer ---------------- */
.footer{margin-top:40px;border-top:1px solid #1b2128;background:#0f1317;color:var(--muted)}
.footer-widgets{
  display:grid; gap:20px;
  grid-template-columns:1fr;
}
.footer-title{ margin:0 0 10px; font-size:16px; color:#e6e7ea }
.footer-widget p, .footer-widget li{ color:var(--muted) }
@media(min-width:768px){
  .footer-widgets{ grid-template-columns: repeat(3,1fr); }
}