/*
Theme Name:  IPK Theme — NK
Description: Child theme pro web Národní knihovny ČR (nkp.cz). Vizuální identita NK — tyrkysová/teal.
Author:      NK ČR / Knihovnický institut
Template:    ipk-theme-v2
Version:     2.1.0
*/

/* ============================================================
   NK DESIGN TOKENS — CSS Custom Properties
   Přepisují tokeny z parent theme (_tokens.scss).
   Všechny IPK custom komponenty (nav, hero, patička, …)
   použijí automaticky teal místo modré.
   ============================================================ */

:root {
  /* ── Primární barva (tyrkys NK) ─────────────────────────── */
  --ipk-primary:          #16799b;
  --ipk-primary-rgb:      22, 121, 155;
  --ipk-primary-dark:     #0d5470;
  --ipk-primary-light:    #dff0f5;
  --ipk-primary-mid:      #b8dce8;

  /* ── Textové barvy ──────────────────────────────────────── */
  --ipk-dark:             #1a1a1a;
  --ipk-text:             #333233;
  --ipk-text-body:        #4a4a4a;
  --ipk-muted:            #757575;
  --ipk-muted-light:      #b0b0b0;

  /* ── Akcent (zlatá NK) ──────────────────────────────────── */
  --ipk-accent:           #ecae1a;
  --ipk-accent-rgb:       236, 174, 26;

  /* ── Pozadí ─────────────────────────────────────────────── */
  --ipk-bg:               #f0f5f9;
  --ipk-surface:          #ffffff;
  --ipk-surface-alt:      #e8eff4;

  /* ── Navigace ───────────────────────────────────────────── */
  --ipk-nav-bg:           #ffffff;
  --ipk-nav-color:        #333233;
  --ipk-nav-active:       #16799b;
  --ipk-nav-border:       #d0dde5;

  /* ── Footer ─────────────────────────────────────────────── */
  --ipk-footer-bg:        #1a2a35;

  /* ── Bordery ────────────────────────────────────────────── */
  --ipk-border:           #ccd8e0;

  /* ── Tvary — hranaté (NK styl) ──────────────────────────── */
  --ipk-radius:           0px;
  --ipk-radius-sm:        0px;
  --ipk-radius-lg:        2px;
  --ipk-radius-pill:      2px;

  /* ── Typografie ─────────────────────────────────────────── */
  --ipk-font:             'Roboto', system-ui, -apple-system, sans-serif;

  /* ── Newsletter gradient ────────────────────────────────── */
  --ipk-newsletter-bg:    linear-gradient(135deg, #0d5470 0%, #16799b 50%, #1a8db5 100%);
}

/* ============================================================
   BOOTSTRAP :ROOT CSS VARS OVERRIDE
   Bootstrap 5 generuje tyto vars v :root — lze přepsat,
   protože :root override vždy vyhraje.
   ============================================================ */

:root {
  /* Primární barva pro utility: .text-primary, .bg-primary, .link-primary */
  --bs-primary:                 #16799b;
  --bs-primary-rgb:             22, 121, 155;
  --bs-primary-text-emphasis:   #063a4d;
  --bs-primary-bg-subtle:       #dff0f5;
  --bs-primary-border-subtle:   #b8dce8;

  /* Linky */
  --bs-link-color:              #16799b;
  --bs-link-color-rgb:          22, 121, 155;
  --bs-link-hover-color:        #0d5470;
  --bs-link-hover-color-rgb:    13, 84, 112;

  /* Focus ring — globálně teal místo blue */
  --bs-focus-ring-color:        rgba(22, 121, 155, .25);
  --bs-focus-ring-width:        .25rem;

  /* Border-radius — hranaté NK */
  --bs-border-radius:           0;
  --bs-border-radius-sm:        0;
  --bs-border-radius-lg:        2px;
  --bs-border-radius-xl:        2px;
  --bs-border-radius-pill:      2px;
  --bs-border-radius-xxl:       4px;

  /* Pozadí stránky */
  --bs-body-bg:                 #f0f5f9;
  --bs-body-font-family:        'Roboto', system-ui, -apple-system, sans-serif;

  /* Border */
  --bs-border-color:            #ccd8e0;
}

/* ============================================================
   BOOTSTRAP COMPONENT-LEVEL OVERRIDES
   Bootstrap 5 generuje tyto vlastnosti jako ELEMENT-LEVEL
   CSS proměnné — nelze je změnit přes :root.
   Musíme je přepsat přímo na selektoru.
   ============================================================ */

/* ── Primární tlačítka ──────────────────────────────────────── */
.btn-primary {
  --bs-btn-color:              #fff;
  --bs-btn-bg:                 #16799b;
  --bs-btn-border-color:       #16799b;
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           #0d5470;
  --bs-btn-hover-border-color: #0d5470;
  --bs-btn-focus-shadow-rgb:   22, 121, 155;
  --bs-btn-active-color:       #fff;
  --bs-btn-active-bg:          #0b4a62;
  --bs-btn-active-border-color:#0b4a62;
  --bs-btn-disabled-color:     #fff;
  --bs-btn-disabled-bg:        #16799b;
  --bs-btn-disabled-border-color: #16799b;
}

/* ── Outline primární tlačítka ──────────────────────────────── */
.btn-outline-primary {
  --bs-btn-color:              #16799b;
  --bs-btn-border-color:       #16799b;
  --bs-btn-hover-color:        #fff;
  --bs-btn-hover-bg:           #16799b;
  --bs-btn-hover-border-color: #16799b;
  --bs-btn-focus-shadow-rgb:   22, 121, 155;
  --bs-btn-active-color:       #fff;
  --bs-btn-active-bg:          #16799b;
  --bs-btn-active-border-color:#16799b;
  --bs-btn-disabled-color:     #16799b;
  --bs-btn-disabled-bg:        transparent;
  --bs-btn-disabled-border-color: #16799b;
}

/* ── Stránkování ────────────────────────────────────────────── */
.pagination {
  --bs-pagination-color:           #16799b;
  --bs-pagination-hover-color:     #0d5470;
  --bs-pagination-focus-color:     #0d5470;
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(22, 121, 155, .25);
  --bs-pagination-active-bg:       #16799b;
  --bs-pagination-active-border-color: #16799b;
}

/* ── Formuláře — focus stav ─────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: rgba(22, 121, 155, .5);
  box-shadow:   0 0 0 .25rem rgba(22, 121, 155, .25);
}

.form-check-input:focus {
  border-color: rgba(22, 121, 155, .5);
  box-shadow:   0 0 0 .25rem rgba(22, 121, 155, .25);
}

.form-check-input:checked {
  background-color: #16799b;
  border-color:     #16799b;
}

/* ── Nav pills / tabs ───────────────────────────────────────── */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #16799b;
}

/* ── Progress bar ───────────────────────────────────────────── */
.progress-bar {
  background-color: #16799b;
}

/* ── Accordion ──────────────────────────────────────────────── */
.accordion-button:not(.collapsed) {
  color:            #16799b;
  background-color: #dff0f5;
  box-shadow:       inset 0 -1px 0 rgba(22, 121, 155, .25);
}

.accordion-button:focus {
  box-shadow: 0 0 0 .25rem rgba(22, 121, 155, .25);
}

/* ── Dropdown active ────────────────────────────────────────── */
.dropdown-item.active,
.dropdown-item:active {
  background-color: #16799b;
}

/* ============================================================
   PŘEPSÁNÍ HARDCODED BAREV Z INLINE CSS (enqueue.php)
   Tyto selektory jsou definovány ve wp_add_inline_style()
   a nelze je snadno tokizovat — přepisujeme je zde.
   ============================================================ */

/* Slider — prázdný snímek bez obrázku: tmavá navy → tmavý teal */
.ipk-slider__img--empty {
  background: linear-gradient(135deg, #063a4d 0%, #16799b 100%) !important;
}

/* Boční navigace — hover border-left: světlá modrá → světlá teal */
.ipk-subnav__link:hover {
  border-left-color: #8fd4e4;
}

/* Boční navigace — mobilní toggle border: světlá modrá → světlá teal */
.ipk-subnav__mobile-toggle {
  border-color: #b8dce8;
}

.ipk-subnav__tree {
  border-color: #b8dce8;
}

.ipk-subnav__list--root > .ipk-subnav__item + .ipk-subnav__item {
  border-top-color: #b8dce8;
}

/* ── Info boxy — text barva (hardcoded dark blue → dark teal) ── */
.ipk-upozorneni--info {
  color: #063a4d;
}

/* ============================================================
   NK UTILITY BAR — tmavý pruh s logem a názvem instituce
   ============================================================ */

.nk-utility-bar {
  background: #16799b !important;
  color: #fff;
  padding: .6rem 0;
  font-size: .85rem;
}

.nk-utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nk-utility-bar__logos {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.nk-utility-bar__logos-sep {
  color: rgba(255, 255, 255, .35);
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1;
  user-select: none;
}

.nk-utility-bar__partner-logo {
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
}

.nk-utility-bar__brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
}

.nk-utility-bar__brand:hover {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}

.nk-utility-bar__logo {
  height: 42px;
  width: auto;
  display: block;
}

.nk-utility-bar__name {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  line-height: 1.2;
}

/* ── Vyhledávání v utility baru ─────────────────────────── */
.nk-utility-bar__search {
  flex-shrink: 0;
}

.nk-utility-bar__search-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, .12);
  transition: border-color .15s, background .15s;
}

.nk-utility-bar__search-wrap:focus-within {
  border-color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .2);
}

.nk-utility-bar__search-input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: .82rem;
  padding: .3rem .65rem;
  width: 200px;
  min-width: 0;
}

.nk-utility-bar__search-input::placeholder {
  color: rgba(255, 255, 255, .65);
}

.nk-utility-bar__search-input::-webkit-search-cancel-button {
  filter: invert(1);
}

.nk-utility-bar__search-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .85);
  padding: .3rem .6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color .15s;
}

.nk-utility-bar__search-btn:hover {
  color: #fff;
}

/* Na úzkých mobilech schovat vyhledávání (dostupné přes hlavní nav) */
@media (max-width: 575.98px) {
  .nk-utility-bar__search {
    display: none;
  }
}

/* ============================================================
   NK HLAVNÍ NAVIGACE — teal pozadí, bílé caps položky
   Bootstrap 5: .navbar-dark generuje bílý toggler icon
   ============================================================ */

.nk-main-nav.ipk-nav {
  background: #16799b;
  border-top: none;
  border-bottom: none;

  /* Bootstrap .navbar-dark compiled CSS vars */
  --bs-navbar-color:                rgba(255, 255, 255, .85);
  --bs-navbar-hover-color:          #fff;
  --bs-navbar-active-color:         #fff;
  --bs-navbar-disabled-color:       rgba(255, 255, 255, .4);
  --bs-navbar-brand-color:          #fff;
  --bs-navbar-brand-hover-color:    #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, .3);
  --bs-navbar-toggler-icon-bg:      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Nav links — bílé, uppercase */
.nk-main-nav.ipk-nav .nav-link {
  color: rgba(255, 255, 255, .85);
  text-transform: uppercase;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .07em;
  padding-top: .9rem;
  padding-bottom: .9rem;
}

.nk-main-nav.ipk-nav .nav-link:hover,
.nk-main-nav.ipk-nav .nav-link:focus {
  color: #fff;
  background-color: rgba(0, 0, 0, .15);
}

.nk-main-nav.ipk-nav .nav-link.active,
.nk-main-nav.ipk-nav .nav-link[aria-current="page"] {
  color: #fff;
  background-color: rgba(0, 0, 0, .2);
  font-weight: 700;
}

/* Dropdown caret — bílý */
.nk-main-nav.ipk-nav .nav-link::after {
  border-top-color: rgba(255, 255, 255, .85);
}

/* Dropdown menu — tmavý teal */
.nk-main-nav.ipk-nav .dropdown-menu {
  background: #0d5470;
  border: none;
  border-radius: 0;
  margin-top: 0;
  padding: .35rem 0;
}

.nk-main-nav.ipk-nav .dropdown-item {
  color: rgba(255, 255, 255, .85);
  font-size: .875rem;
  padding: .45rem 1.1rem;
}

.nk-main-nav.ipk-nav .dropdown-item:hover,
.nk-main-nav.ipk-nav .dropdown-item:focus {
  background-color: rgba(255, 255, 255, .12);
  color: #fff;
}

.nk-main-nav.ipk-nav .dropdown-item.active,
.nk-main-nav.ipk-nav .dropdown-item:active {
  background-color: rgba(255, 255, 255, .2);
  color: #fff;
}

/* Mobile: rozbalené menu má stejné teal pozadí */
@media (max-width: 991.98px) {
  .nk-main-nav.ipk-nav .navbar-collapse {
    background: #16799b;
    padding: .5rem 0 .75rem;
  }

  .nk-main-nav.ipk-nav .dropdown-menu {
    background: rgba(0, 0, 0, .18);
    border-left: 2px solid rgba(255, 255, 255, .3) !important;
    padding-left: .5rem;
  }

  .nk-main-nav.ipk-nav .dropdown-item {
    color: rgba(255, 255, 255, .9);
  }
}

/* ============================================================
   NK VIZUÁLNÍ IDENTITY — ostatní úpravy
   ============================================================ */

/* Tělo stránky — Roboto */
body {
  font-family: var(--ipk-font);
}

/* Nadpisy */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ipk-font);
}

/* Hero eyebrow čára */
.ipk-hero-v2__eyebrow::before {
  background: #16799b;
}

/* Bloky — čtvercové rohy NK */
.ipk-news-card,
.ipk-tema-tile,
.ipk-akce-panel,
.ipk-subnav__tree,
.card {
  border-radius: 0;
}

/* Odkaz default */
a {
  color: #16799b;
}

a:hover {
  color: #0d5470;
}

/* Slider button hover */
.ipk-slider__btn:hover {
  background: #16799b !important;
  color: #fff !important;
}

/* ============================================================
   ALERT BAR — jantarová (nkp.cz styl), nikoliv teal
   ============================================================ */

.ipk-alert-bar {
  background: #ecae1a;
  color: #1a1a1a;
}

.ipk-alert-bar a {
  color: #1a1a1a;
  text-decoration: underline;
}

.ipk-alert-bar a:hover {
  color: #333;
}

.ipk-alert-bar .ipk-alert-bar__label {
  background: rgba(0, 0, 0, .15);
  color: #1a1a1a;
}

/* ============================================================
   OSOBY — badge barvy přes CSS tokeny (ne hardcoded IPK modrá)
   ============================================================ */

.ipk-person-badge.rounded-pill {
  background: var(--ipk-primary-light);
  color: var(--ipk-primary-dark);
}