/**
 * BezServitek Brand — redakční šablona
 *
 * Kompletní CSS pro identitu BezServitek:
 *   - Brand proměnné (modrá #1a3d6d, červená #9c1c20)
 *   - Navigace s underline hover efektem
 *   - Footer tmavý gradient
 *   - Utility třídy (text-bs-*, bg-bs-*, hover efekty)
 */

/* ================================================================
   BRAND PROMĚNNÉ
   ================================================================ */
:root {
  --color-primary:       #1a3d6d !important;
  --color-primary-dark:  #0f2437 !important;
  --color-primary-light: #3b5998 !important;

  --bs-blue:             #1a3d6d;
  --bs-blue-dark:        #0f2437;
  --bs-red:              #9c1c20;
  --bs-grad:             linear-gradient(135deg, #1a3d6d, #9c1c20);
}

/* ================================================================
   BRAND TEXT — gradientní efekt
   ================================================================ */
.text-bs-brand {
  background: var(--bs-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================================================
   LOGO EVROPEAK — inline SVG v hlavičce
   ---------------------------------------------------------------
   Barvy jsou řízené CSS proměnnými, které SVG používá ve fillech
   (--ep-ink = písmena, --ep-peak = hora v P). Tmavý režim je jen
   přepíše, takže není potřeba druhý soubor ani build Tailwindu.
   Zdroj: /brand/evropeak-logo.svg (brand/README-evropeak.md).
   ================================================================ */
.ep-logo {
  --ep-ink: #1a3d6d;
  --ep-peak: #9c1c20;
  --ep-logo-h: 2.5rem;              /* 40 px — jedna proměnná řídí výšku i šířku */
  display: block;
  flex: none;
  height: var(--ep-logo-h);
  /* šířka z poměru stran zdroje (viewBox 9042 × 1558 = 5,804) — inline SVG totiž
     jinak počítá šířku z atributu width="1400" a rozbila by hlavičku */
  width: calc(var(--ep-logo-h) * 5.804);
  transition: transform 0.2s ease, opacity 0.2s ease;
  transform-origin: left center;
}

/* zachování původního hover efektu (group-hover:scale-105 z hlavičky) */
.group:hover .ep-logo {
  transform: scale(1.05);
}

/* menší logo na mobilu — navigace je tam skrytá, ale hlavička je nízká */
@media (max-width: 767px) {
  .ep-logo { --ep-logo-h: 2.125rem; }   /* 34 px */
}

/* tmavý režim — písmena světlá, hora v P světlejší červená */
html.dark .ep-logo {
  --ep-ink: #edf2f9;
  --ep-peak: #e2565b;
}

/* ================================================================
   NAVIGACE — underline hover
   ================================================================ */
.nav-hover-underline {
  position: relative;
}
.nav-hover-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--bs-grad);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.nav-hover-underline:hover::after {
  transform: scaleX(1);
}

/* ================================================================
   FOOTER
   ================================================================ */
.bg-bs-footer {
  background: linear-gradient(135deg, var(--bs-blue), var(--bs-blue-dark));
}

/* ================================================================
   KARTY ČLÁNKŮ — hover efekt
   ================================================================ */
.bs-card {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.bs-card:hover {
  transform: translateY(-2px);
}

/* ================================================================
   FORMULÁŘOVÉ PRVKY
   ================================================================ */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--bs-blue) !important;
  box-shadow: 0 0 0 3px rgba(26, 61, 109, 0.12) !important;
}

/* ================================================================
   BRAND UTILITY TŘÍDY
   ================================================================ */
.text-bs-blue { color: var(--bs-blue); }
.text-bs-red  { color: var(--bs-red); }
.bg-bs-blue   { background-color: var(--bs-blue); }
.bg-bs-red    { background-color: var(--bs-red); }
.bg-bs-grad   { background: var(--bs-grad); }
.border-bs-red { border-color: var(--bs-red); } /* P3b: breaking news rámeček */

.hover\:text-bs-red:hover   { color: var(--bs-red); }
.hover\:text-bs-blue:hover  { color: var(--bs-blue); }
.hover\:bg-bs-red:hover     { background-color: var(--bs-red); }
.hover\:border-bs-blue:hover { border-color: var(--bs-blue); }

/* ================================================================
   RESPONZIVNÍ
   ================================================================ */
@media (max-width: 768px) {
  .nav-hover-underline {
    display: block;
    width: 100%;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.9rem;
  }
  .nav-hover-underline::after { display: none; }
}

/* ================================================================
   F7 (v1.5.1): Celá karta článku je klikatelná (stretched-link vzor).
   Nadpis zůstává odkazem (a11y/klávesnice), ::after rozprostře klik
   přes celou kartu. Breaking karta NEMÁ stretched-link (fotka + nadpis
   + tlačítko zůstávají samostatné odkazy — dle schválení uživatele).
   ================================================================ */
.article-card {
  position: relative;
}

.articles-list .article-card h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Interaktivní prvky uvnitř karty zůstávají nad stretched-linkem.
 * POZOR: jen autor odkaz (.mt-auto a, in-flow) potřebuje position/z-index —
 * badge kategorie už je absolute z-10 (Tailwind) → nad overlay z-1 přirozeně;
 * position:relative na badge by přepsal .absolute a vysunul ho z kontejneru. */
.articles-list .article-card .mt-auto a {
  position: relative;
  z-index: 2;
}

/* F7: viditelný focus ring pro klávesovou navigaci (a11y) */
.articles-list .article-card h3 a:focus-visible {
  outline: 3px solid var(--bs-blue);
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* ================================================================
   F6 (v1.5.2): Skip-link (a11y) — viditelný až po focusu (klávesa Tab).
   ================================================================ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.75rem 0.75rem;
  background: var(--bs-blue, #1d4ed8);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}