/*
Theme Name: Самоковска библиотека
Theme URI: https://www.samokovlib.com/
Author: Общинска библиотека „Паисий Хилендарски“ — гр. Самоков
Description: Блокова тема за Общинска библиотека „Паисий Хилендарски“, гр. Самоков. Дизайн-токените живеят в theme.json; тук са само похватите, които блоковете не покриват.
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: samokovlib
Tags: block-theme, library, full-site-editing, accessibility-ready
*/

/* Плавно превъртане, освен ако потребителят не е поискал по-малко движение. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Фокус ─────────────────────────────────────────────────────────────
   Видим фокус върху всичко интерактивно. Задължително за клавиатурна
   навигация и за съответствие с EN 301 549. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--wp--preset--color--primary);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Върху тъмни ленти зеленият фокус изчезва — там ползваме бял. */
.has-deep-background-color :where(a, button):focus-visible,
.samokovlib-band :where(a, button):focus-visible {
  outline-color: #FFFFFF;
}

/* Връзка за прескачане към съдържанието — видима само при фокус. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 0.75rem 1.25rem;
  background: var(--wp--preset--color--deep);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Горният ред на менюто — версален, като в старата глава. */
header ul.wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.045em;
  white-space: nowrap;
}

/* ── Арка ──────────────────────────────────────────────────────────────
   Похватът от банерите: снимка, изрязана като арка. Radius-ът е в
   проценти, за да остане пропорционален при всяка ширина. */
.samokovlib-arch img {
  border-radius: 50% 50% 12px 12px / 34% 34% 4px 4px;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ── Карти ─────────────────────────────────────────────────────────────
   Истинска карта: бяла подложка, рамка, мека сянка. Снимката е на цяла
   ширина отгоре, текстът е с вътрешен отстъп. При посочване картата се
   повдига, сянката се засилва, рамката става акцентна, а снимката леко
   се приближава — движенията са само transform/opacity (композитор). */
.samokovlib-card {
  position: relative;
  height: 100%;
  background: #FFFFFF;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 18px;
  padding: 0 0 1.5rem;
  overflow: hidden;
  box-shadow: var(--wp--preset--shadow--card);
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 280ms ease;
}
@media (prefers-reduced-motion: no-preference) {
  .samokovlib-card:hover,
  .samokovlib-card:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--wp--preset--shadow--lift);
    border-color: var(--wp--preset--color--accent);
  }
}

/* Снимката: на цяла ширина, ъглите идват от картата (overflow). Зум при hover. */
.samokovlib-card :where(figure, .wp-block-image, .wp-block-post-featured-image) {
  margin: 0;
  overflow: hidden;
}
.samokovlib-card :where(figure, .wp-block-post-featured-image) img {
  display: block;
  width: 100%;
  border-radius: 0 !important;
  border: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  .samokovlib-card :where(figure, .wp-block-post-featured-image) img {
    transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .samokovlib-card:hover :where(figure, .wp-block-post-featured-image) img { transform: scale(1.05); }
}

/* Текстовете с вътрешен отстъп; заглавието без подчертаване.
   Вертикалният ритъм се дава от blockGap на групата — не го пипаме. */
.samokovlib-card > :where(h2, h3, p) { padding-inline: 1.35rem; }
.samokovlib-card :where(h2, h3) a { text-decoration: none; }
.samokovlib-card :where(h2, h3) a:hover { color: var(--wp--preset--color--primary); }

/* Цялата карта е кликаема през връзката в заглавието ѝ. */
.samokovlib-card a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ── Ленти ─────────────────────────────────────────────────────────────
   Тъмнозелената лента отдолу, както е в четирите банера. Белият текст
   върху #16412F дава 11.47:1 — минава AAA. */
.samokovlib-band {
  background: var(--wp--preset--color--deep);
  color: #FFFFFF;
}
.samokovlib-band :where(h1, h2, h3, h4, p, li) { color: #FFFFFF; }
.samokovlib-band a { color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, 0.45); }
.samokovlib-band a:hover { text-decoration-color: #FFFFFF; }

/* ── Надредни етикети ──────────────────────────────────────────────────
   Дребен разреден надпис над заглавие. Разредката е нужна, защото при
   версални букви естествените междубуквия са твърде тесни. */
.samokovlib-eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}
.samokovlib-band .samokovlib-eyebrow { color: var(--wp--preset--color--accent); }

/* ── Редакционен курсив ────────────────────────────────────────────────
   Серифният курсивен акцент от банерите („в библиотеката“). */
.samokovlib-script {
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ── Наследство ────────────────────────────────────────────────────────
   Краезнанието и дигиталният архив стоят на кремав фон — студеното
   зелено се бие с пожълтялата хартия на старите издания. */
.samokovlib-heritage {
  background: var(--wp--preset--color--cream);
}
.samokovlib-heritage :where(.wp-block-post-title, h2, h3) {
  font-family: var(--wp--preset--font-family--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Изображенията в статиите не бива да излизат от контейнера си. */
.wp-block-post-content :where(img, iframe, video, table) { max-width: 100%; }
.wp-block-post-content table { display: block; overflow-x: auto; }

/* ── Слайдер ───────────────────────────────────────────────────────────
   Банерите на библиотеката като въртележка. Слайд със снимка = <img>,
   който запълва целия кадър; слайд без снимка се изрисува с CSS в същия
   стил, докато файлът пристигне. Съотношението 2:1 е това на банера за
   онлайн резервация (първи слайд); останалите визии се центрират в кадъра. */
.samokovlib-slider { position: relative; }

/* Пистата е на пълната ширина на съдържанието (както картите отдолу);
   стрелките се позиционират навън, в кремавото поле встрани. */
.samokovlib-slider__stage { position: relative; }

.samokovlib-slider__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 22px;
  box-shadow: var(--wp--preset--shadow--lift);
}
.samokovlib-slider__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .samokovlib-slider__track { scroll-behavior: smooth; }
}

.samokovlib-slider__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: block;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  text-decoration: none;
  background:
    radial-gradient(46% 60% at 88% 10%, rgba(42, 183, 114, 0.14), transparent 60%),
    var(--wp--preset--color--cream);
}
.samokovlib-slider__slide picture { display: block; width: 100%; height: 100%; }
.samokovlib-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Четковият кръг от банерите — за CSS-слайдовете. */
.samokovlib-slider__slide:not(.has-image)::after {
  content: "";
  position: absolute;
  right: -10%;
  top: -22%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 22px solid rgba(0, 104, 56, 0.14);
  pointer-events: none;
}

.samokovlib-slide-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.6rem, 1.6vw, 1.1rem);
  padding: clamp(1.5rem, 5vw, 4.5rem);
  max-width: 70%;
}
@media (max-width: 781px) {
  .samokovlib-slide-body { max-width: 100%; }
}

.samokovlib-slide-kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}
.samokovlib-slide-title {
  font-size: clamp(2.1rem, 5.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--wp--preset--color--deep);
  text-transform: uppercase;
}
.samokovlib-slide-title em {
  font-family: var(--wp--preset--font-family--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--wp--preset--color--primary);
}
.samokovlib-slide-sub {
  font-size: clamp(0.95rem, 1.6vw, 1.125rem);
  color: var(--wp--preset--color--muted);
  max-width: 34ch;
}
.samokovlib-slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.4rem;
  padding: 0.8em 1.7em;
  border-radius: 999px;
  background: var(--wp--preset--color--deep);
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.samokovlib-slider__slide:hover .samokovlib-slide-cta { background: var(--wp--preset--color--primary); }

/* Стрелки — извън пистата, вертикално центрирани спрямо кадъра. */
.samokovlib-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  line-height: 1;
  background: var(--wp--preset--color--deep);
  color: #FFFFFF;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.samokovlib-slider__arrow[data-dir="prev"] { left: -58px; }
.samokovlib-slider__arrow[data-dir="next"] { right: -58px; }
.samokovlib-slider__arrow:hover { background: var(--wp--preset--color--primary); transform: translateY(-50%) scale(1.06); }
.samokovlib-slider__arrow:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
/* Стрелките изискват свободно място встрани от банера. Под ~1360px това
   място липсва, затова се скриват — навигацията остава с точки и плъзгане. */
@media (max-width: 1360px) {
  .samokovlib-slider__arrow { display: none; }
}

.samokovlib-slider__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.samokovlib-slider__dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: var(--wp--preset--color--line);
  transition: width 200ms ease, background-color 200ms ease;
}
.samokovlib-slider__dots button[aria-current="true"] {
  width: 26px;
  background: var(--wp--preset--color--primary);
}

/* ── Заглавия на секции ────────────────────────────────────────────────
   Центрирани, както в банерите: надреден етикет, заглавие, серифен
   подзаглавен ред и четков щрих за точка. */
.samokovlib-sec-head {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}
.samokovlib-stroke {
  display: inline-block;
  width: 64px;
  height: 7px;
  border-radius: 46% 54% 52% 48% / 62% 58% 42% 38%;
  background: var(--wp--preset--color--accent);
}

/* Връзка „виж повече“ със стрелка. */
.samokovlib-more {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.samokovlib-more a { text-decoration: none; }
.samokovlib-more a::after {
  content: " →";
  display: inline-block;
  transition: transform 180ms ease;
}
.samokovlib-more a:hover::after { transform: translateX(4px); }

/* ── Кръгли иконки ─────────────────────────────────────────────────────
   Иконата в светъл кръг — мотивът от лентите на банерите. */
.samokovlib-chip {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 104, 56, 0.09);
  color: var(--wp--preset--color--primary);
}
.samokovlib-chip svg { width: 26px; height: 26px; }
.samokovlib-band .samokovlib-chip {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}

/* Бързата лента: три карти с иконка и текст. */
.samokovlib-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 781px) {
  .samokovlib-strip { grid-template-columns: 1fr; }
}
.samokovlib-strip-card {
  position: relative;
  display: flex;
  gap: 1.1rem;
  align-items: center;
  padding: 1.6rem 1.5rem;
  border-radius: 18px;
  border: 1px solid var(--wp--preset--color--line);
  background: #FFFFFF;
  box-shadow: var(--wp--preset--shadow--card);
}
.samokovlib-strip-card h3 { margin: 0 0 0.3rem; font-size: 1.1rem; }
.samokovlib-strip-card p { margin: 0; font-size: 0.875rem; color: var(--wp--preset--color--muted); }

/* Двете бързи връзки като двойка (контакт + моята библиотека). */
.samokovlib-strip--pair { grid-template-columns: 1fr 1fr; margin-bottom: 1.5rem; }
@media (max-width: 781px) { .samokovlib-strip--pair { grid-template-columns: 1fr; } }

/* Панел „Работно време“ — четирите локации в чиста мрежа. */
.samokovlib-hours-panel {
  background: #FFFFFF;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 20px;
  box-shadow: var(--wp--preset--shadow--card);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.25rem);
}
.samokovlib-hours-panel__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.35rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.samokovlib-hours-panel__head .samokovlib-chip {
  background: var(--wp--preset--color--primary);
  color: #FFFFFF;
}
.samokovlib-hours-panel__title { margin-right: auto; }
.samokovlib-hours-panel__title h3 { margin: 0; font-size: 1.3rem; }
.samokovlib-hours-panel__title p { margin: 0.15rem 0 0; font-size: 0.875rem; color: var(--wp--preset--color--muted); }
/* Дните са само етикет (информация), не бутон. */
.samokovlib-hours-panel__days {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--wp--preset--color--muted);
  background: var(--wp--preset--color--cream);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  white-space: nowrap;
}
.samokovlib-hours-panel__days::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wp--preset--color--accent);
}

/* Ясен бутон към пълните контакти (в хедъра, до дните). */
.samokovlib-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--wp--preset--color--primary);
  color: #FFFFFF !important;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none !important;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  box-shadow: var(--wp--preset--shadow--lift);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.samokovlib-btn:hover, .samokovlib-btn:focus-visible {
  background: var(--wp--preset--color--deep);
  transform: translateY(-2px);
  outline: none;
}
.samokovlib-btn svg { width: 1.05em; height: 1.05em; }
.samokovlib-hours-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
.samokovlib-hloc {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.75rem;
  border-left: 1px solid var(--wp--preset--color--line);
}
.samokovlib-hloc:first-child { padding-left: 0; border-left: none; }
.samokovlib-hloc__name {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary);
}
.samokovlib-hloc__time { font-size: 1rem; color: var(--wp--preset--color--contrast); line-height: 1.55; }
@media (max-width: 900px) {
  .samokovlib-hours-grid { grid-template-columns: 1fr 1fr; gap: 1.4rem 1.75rem; }
  .samokovlib-hloc { padding-left: 0; border-left: none; }
}
@media (max-width: 460px) {
  .samokovlib-hours-grid { grid-template-columns: 1fr; gap: 1.1rem; }
}
.samokovlib-strip-card a { text-decoration: none; color: inherit; }
.samokovlib-strip-card a:hover { color: var(--wp--preset--color--primary); }

/* Цялата карта е кликаема; иконата е плътна, като в лентите на банерите. */
.samokovlib-strip-card a::after { content: ""; position: absolute; inset: 0; }
.samokovlib-strip .samokovlib-chip {
  background: var(--wp--preset--color--primary);
  color: #FFFFFF;
}
@media (prefers-reduced-motion: no-preference) {
  .samokovlib-strip-card {
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 220ms ease;
  }
  .samokovlib-strip-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--wp--preset--shadow--lift);
    border-color: var(--wp--preset--color--accent);
  }
}

/* ── Нови книги: компактна лавица с корици + заглавия ─────────────────── */
.samokovlib-books {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  max-width: 1080px;
  margin-inline: auto;
}
.samokovlib-book {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  color: inherit;
  text-align: center;
}
.samokovlib-book__cover {
  display: block;
  width: 100%;
  border-radius: 4px 12px 12px 4px;
  overflow: hidden;
  box-shadow: -3px 0 0 rgba(0, 0, 0, 0.18), 0 14px 30px rgba(0, 0, 0, 0.38);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease;
}
.samokovlib-book__cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}
.samokovlib-book__title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  color: #FFFFFF;
}
@media (prefers-reduced-motion: no-preference) {
  .samokovlib-book:hover .samokovlib-book__cover,
  .samokovlib-book:focus-visible .samokovlib-book__cover {
    transform: translateY(-8px);
    box-shadow: -3px 0 0 rgba(0, 0, 0, 0.18), 0 22px 40px rgba(0, 0, 0, 0.5);
  }
}
.samokovlib-books-cta {
  text-align: center;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
@media (max-width: 1024px) {
  .samokovlib-books { grid-template-columns: repeat(3, 1fr); max-width: 560px; gap: 1.75rem; }
}
@media (max-width: 560px) {
  .samokovlib-books { grid-template-columns: 1fr 1fr; max-width: 360px; gap: 1.5rem; }
}

/* Светъл бутон за тъмните ленти (deep фон). */
.samokovlib-btn--light { background: #FFFFFF; color: var(--wp--preset--color--deep) !important; }
.samokovlib-btn--light:hover, .samokovlib-btn--light:focus-visible { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--deep) !important; }

/* ── Качества ──────────────────────────────────────────────────────────
   Кремав панел с вертикални разделители — езикът на долните ленти от
   банерите. Числото стои отляво като серифен акцент, не върху текста. */
.samokovlib-traits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--wp--preset--color--cream);
  border-radius: 22px;
  padding: clamp(1.8rem, 4vw, 2.8rem);
}
.samokovlib-trait {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.samokovlib-trait + .samokovlib-trait {
  border-left: 1px solid var(--wp--preset--color--line);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 781px) {
  .samokovlib-traits { grid-template-columns: 1fr; }
  .samokovlib-trait + .samokovlib-trait {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--wp--preset--color--line);
    padding-top: 1.5rem;
  }
}
.samokovlib-trait__num {
  font-family: var(--wp--preset--font-family--serif);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: 0.9;
  color: var(--wp--preset--color--primary);
  flex: none;
}
.samokovlib-trait h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.samokovlib-trait p { margin: 0; font-size: 0.875rem; color: var(--wp--preset--color--muted); }

/* ── Детски свят ───────────────────────────────────────────────────────
   Подмарката чупи палитрата нарочно, по езика на банера: цветни букви,
   иконки в цветни кръгове, четкови петна, звезди. Тоновете са по-тъмни
   от банерните, за да носят контраст върху кремавото. */
.samokovlib-kids {
  --kids-violet: #6B4BC4;
  --kids-teal:   #15807C;
  --kids-amber:  #B8741A;
  --kids-rose:   #C23E66;
  --kids-green:  #1E8E5A;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(46% 56% at 92% 6%, rgba(107, 75, 196, 0.10), transparent 60%),
    radial-gradient(42% 52% at 4% 94%, rgba(21, 128, 124, 0.10), transparent 58%),
    var(--wp--preset--color--cream);
}

/* Четкови петна в ъглите — като зеленото и жълтото петно на банера. */
.samokovlib-kids::before,
.samokovlib-kids::after {
  content: "";
  position: absolute;
  width: 220px;
  aspect-ratio: 1.15;
  border-radius: 46% 54% 52% 48% / 62% 58% 42% 38%;
  opacity: 0.16;
  pointer-events: none;
}
.samokovlib-kids::before { left: -90px; top: 14%; background: var(--kids-green); }
.samokovlib-kids::after { right: -80px; bottom: 10%; background: var(--kids-amber); transform: rotate(24deg); }

.samokovlib-kids .samokovlib-eyebrow { color: var(--kids-violet); }

/* Цветните букви на заглавието, с леко залитане като рисувани. */
.samokovlib-kids .kl { display: inline-block; font-weight: 800; }
.samokovlib-kids .kl-rose   { color: var(--kids-rose);   transform: rotate(-4deg); }
.samokovlib-kids .kl-amber  { color: var(--kids-amber);  transform: rotate(3deg); }
.samokovlib-kids .kl-teal   { color: var(--kids-teal);   transform: rotate(-2deg); }
.samokovlib-kids .kl-violet { color: var(--kids-violet); transform: rotate(4deg); }
.samokovlib-kids .kl-green  { color: var(--kids-green);  transform: rotate(-3deg); }

/* Разпилени звезди. */
.samokovlib-kids .k-star {
  position: absolute;
  font-size: 1.6rem;
  opacity: 0.55;
  pointer-events: none;
}

/* Картите: бели, издути, с цветна иконка и цветен горен ръб. */
.samokovlib-kids-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
@media (max-width: 1023px) { .samokovlib-kids-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .samokovlib-kids-grid { grid-template-columns: 1fr; } }

.samokovlib-kids-card {
  --k-accent: var(--kids-violet);
  position: relative;
  background: #FFFFFF;
  border-radius: 22px;
  border-top: 6px solid var(--k-accent);
  padding: 1.7rem 1.5rem;
  box-shadow: var(--wp--preset--shadow--card);
}
.samokovlib-kids-card:nth-child(2) { --k-accent: var(--kids-teal); }
.samokovlib-kids-card:nth-child(3) { --k-accent: var(--kids-amber); }
.samokovlib-kids-card:nth-child(4) { --k-accent: var(--kids-rose); }

@media (prefers-reduced-motion: no-preference) {
  .samokovlib-kids-card {
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .samokovlib-kids-card:hover,
  .samokovlib-kids-card:focus-within {
    transform: translateY(-6px) rotate(-1deg);
    box-shadow: var(--wp--preset--shadow--lift);
  }
}

.samokovlib-kids-chip {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--k-accent);
  color: #FFFFFF;
  margin-bottom: 1rem;
}
.samokovlib-kids-chip svg { width: 26px; height: 26px; }

.samokovlib-kids-card h3 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.samokovlib-kids-card h3 a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.samokovlib-kids-card h3 a:hover { color: var(--k-accent); }
.samokovlib-kids-card p { margin: 0; font-size: 0.875rem; color: var(--wp--preset--color--muted); }

/* Цялата карта е кликаема през заглавието. */
.samokovlib-kids-card h3 a::after { content: ""; position: absolute; inset: 0; }

.samokovlib-kids-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.8em;
  border-radius: 999px;
  background: var(--kids-violet);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.samokovlib-kids-cta:hover { background: var(--kids-teal); color: #FFFFFF; }

/* ── Страницата „Детски свят“ ──────────────────────────────────────────
   Букчо, „Изненадай ме“, настроенията и TikTok лентата. */

/* Балончето на Хилендарчо. */
.kids-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 2rem; align-items: center; }
@media (max-width: 781px) { .kids-hero { grid-template-columns: 1fr; } }
.kids-hero img { width: min(100%, 420px); height: auto; justify-self: center; }

.kids-bubble {
  position: relative;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 1.4rem 1.6rem;
  box-shadow: var(--wp--preset--shadow--card);
  font-size: 1.15rem;
  line-height: 1.5;
}
.kids-bubble::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 42%;
  border: 14px solid transparent;
  border-left-color: #FFFFFF;
}
@media (max-width: 781px) {
  .kids-bubble::after {
    right: auto; top: auto; left: 46%; bottom: -26px;
    border-left-color: transparent; border-top-color: #FFFFFF;
  }
}
.kids-bubble strong { color: var(--kids-violet); }

/* Големият подарък-бутон. */
.kids-surprise-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 1.1em 2.4em;
  border: none;
  border-radius: 999px;
  background: var(--kids-rose);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--wp--preset--shadow--lift);
}
.kids-surprise-btn:hover { background: var(--kids-violet); }
@media (prefers-reduced-motion: no-preference) {
  .kids-surprise-btn { transition: transform 180ms ease, background-color 180ms ease; }
  .kids-surprise-btn:hover { transform: scale(1.05) rotate(-1deg); }
}

/* Резултатът от изненадата. */
[data-kids-surprise-result] { min-height: 40px; }
[data-kids-surprise-result].is-fresh .kbook {
  animation: kbook-pop 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes kbook-pop {
  from { transform: scale(0.7) rotate(-4deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  [data-kids-surprise-result].is-fresh .kbook { animation: none; }
}
.kbook__hint { margin: 0.8rem 0 0; font-size: 0.875rem; color: var(--wp--preset--color--muted); }

/* CSS корици — когато нямаме истинската корица, книгата пак е ярка. */
.kbook {
  --kb: var(--kids-violet);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 200px;
  padding: 1.1rem 1rem;
  border-radius: 6px 14px 14px 6px;
  background: linear-gradient(160deg, var(--kb), color-mix(in srgb, var(--kb) 72%, #000 8%));
  color: #FFFFFF;
  box-shadow: -4px 0 0 rgba(31, 36, 33, 0.18), 0 10px 24px rgba(31, 36, 33, 0.18);
}
.kbook--violet { --kb: var(--kids-violet); }
.kbook--teal   { --kb: var(--kids-teal); }
.kbook--amber  { --kb: var(--kids-amber); }
.kbook--rose   { --kb: var(--kids-rose); }
.kbook--green  { --kb: var(--kids-green); }
.kbook__emoji  { font-size: 1.9rem; }
.kbook__title  { font-weight: 800; font-size: 1.02rem; line-height: 1.25; }
.kbook__author { font-size: 0.78rem; opacity: 0.85; }

/* Мрежата с настроения. */
[data-kids-moods] { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.kmood {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.65em 1.2em;
  border: 2px solid var(--wp--preset--color--line);
  border-radius: 999px;
  background: #FFFFFF;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
  cursor: pointer;
}
.kmood:hover { border-color: var(--kids-violet); }
.kmood[aria-pressed="true"] {
  background: var(--kids-violet);
  border-color: var(--kids-violet);
  color: #FFFFFF;
}
[data-kids-mood-grid] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 1.1rem;
  margin-top: 1.6rem;
}

/* TikTok лентата: карти-телефони, без чужди скриптове — водят навън. */
.kids-tiktok-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}
@media (max-width: 1023px) { .kids-tiktok-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px)  { .kids-tiktok-grid { grid-template-columns: repeat(2, 1fr); } }
.kids-tiktok-card {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--wp--preset--shadow--card);
}
.kids-tiktok-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kids-tiktok-card::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: #FFFFFF;
  background: rgba(22, 65, 47, 0);
  transition: background-color 200ms ease;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}
.kids-tiktok-card:hover::after { background: rgba(22, 65, 47, 0.35); }

/* ── Архивни изображения ───────────────────────────────────────────────
   Сканите са с различни размери и жълтеят различно; общата рамка и
   съотношение ги събират в едно. */
.samokovlib-archive img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Портретните вестникарски страници се отрязват отгоре надолу —
     горният ръб носи главата на вестника, него показваме. */
  object-position: top;
  border-radius: 12px;
  border: 1px solid var(--wp--preset--color--line);
  background: #FFFFFF;
}

/* ═══════════════════════════════════════════════════════════════════
   ОНЛАЙН РЕЗЕРВАЦИЯ — банер (above the fold) + страница на услугата
   Ползва токените от theme.json; никакви нови цветове.
   ═══════════════════════════════════════════════════════════════════ */
.rez{
	position:relative;
	display:grid;
	grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
	gap:clamp(1.5rem,4vw,3rem);
	align-items:center;
	overflow:hidden;
}
.rez__brush{
	position:absolute;top:-14%;right:-8%;width:48%;height:78%;
	background:var(--wp--preset--color--primary);opacity:.07;
	border-radius:58% 42% 55% 45% / 55% 48% 52% 45%;pointer-events:none;
}
.rez__copy{position:relative;z-index:2;max-width:36rem}

.rez__tag{
	display:inline-flex;align-items:center;gap:.5em;
	font-size:.8rem;font-weight:600;letter-spacing:.02em;
	color:var(--wp--preset--color--primary);
	background:var(--wp--preset--color--base);
	border:1.5px solid var(--wp--preset--color--line);
	border-radius:999px;padding:.5em 1em;margin-bottom:1.25rem;
	box-shadow:var(--wp--preset--shadow--card);
}
.rez__tag svg{width:1.05em;height:1.05em}

.rez__title{
	font-family:var(--wp--preset--font-family--sans);
	font-weight:800;line-height:1.02;letter-spacing:-.025em;
	font-size:clamp(2.4rem,5.2vw,4rem);margin:0 0 .5rem;overflow-wrap:break-word;
}
.rez__t1{color:var(--wp--preset--color--contrast);display:block}
.rez__t2{color:var(--wp--preset--color--primary);display:block}

.rez__lead{
	font-size:clamp(1.05rem,1.6vw,1.375rem);
	color:var(--wp--preset--color--muted);
	margin:0 0 1.75rem;line-height:1.5;
}

.rez__feats{
	list-style:none;margin:0 0 2rem;padding:0;
	display:flex;flex-wrap:wrap;gap:1rem 1.75rem;
}
.rez__feats li{
	display:flex;align-items:center;gap:.65rem;
	font-size:.9rem;font-weight:600;line-height:1.25;
	color:var(--wp--preset--color--contrast);
}
.rez__fic{
	flex:none;width:42px;height:42px;border-radius:50%;
	display:grid;place-items:center;
	background:var(--wp--preset--color--base);
	border:1.6px solid var(--wp--preset--color--line);
	color:var(--wp--preset--color--primary);
}
.rez__fic svg{width:20px;height:20px}

.rez__cta{
	display:inline-flex;align-items:center;gap:.7rem;
	background:var(--wp--preset--color--primary);color:var(--wp--preset--color--base)!important;
	font-weight:600;font-size:.95rem;letter-spacing:.01em;
	padding:1rem 1.9rem;border-radius:999px;text-decoration:none!important;
	box-shadow:var(--wp--preset--shadow--lift);
	transition:background .2s,transform .2s,box-shadow .2s;
}
.rez__cta:hover,.rez__cta:focus{background:var(--wp--preset--color--deep);transform:translateY(-2px)}
.rez__cta svg{width:1.25em;height:1.25em}
.rez__arw{transition:transform .2s}
.rez__cta:hover .rez__arw{transform:translateX(4px)}

/* ── кодирана визия (заместител до реалната снимка) ── */
.rez__art{position:relative;z-index:1;min-height:300px;display:grid;place-items:center}
.rez__img{width:100%;max-width:100%;height:auto;display:block;margin-left:auto;filter:drop-shadow(0 18px 30px rgba(31,36,33,.14))}
.rez__books{position:relative;width:min(100%,380px);height:300px}
.rez__ring{
	position:absolute;top:2%;right:2%;width:150px;height:150px;border-radius:50%;
	border:2.5px dashed var(--wp--preset--color--accent);opacity:.35;
}
.rez__bk{position:absolute;left:50%;transform:translateX(-50%);border-radius:4px;box-shadow:var(--wp--preset--shadow--lift)}
.rez__bk--1{bottom:78px;width:190px;height:26px;background:linear-gradient(90deg,#16412F,#245240)}
.rez__bk--2{bottom:104px;width:210px;height:28px;background:linear-gradient(90deg,#E7E0CD,#d3c8ab);left:46%}
.rez__bk--3{bottom:132px;width:176px;height:24px;background:linear-gradient(90deg,#006838,#2AB772);left:54%}
.rez__bk--4{bottom:156px;width:198px;height:26px;background:linear-gradient(90deg,#245240,#16412F);left:48%}
.rez__open{position:absolute;bottom:26px;left:50%;transform:translateX(-52%);width:230px;height:60px;display:flex;filter:drop-shadow(0 12px 18px rgba(31,36,33,.22))}
.rez__open-l,.rez__open-r{width:50%;height:100%;background:linear-gradient(180deg,#fff,#f0ead9)}
.rez__open-l{transform:skewY(9deg);border-radius:4px 0 0 4px;border-right:2px solid var(--wp--preset--color--line)}
.rez__open-r{transform:skewY(-9deg);border-radius:0 4px 4px 0}
.rez__cup{position:absolute;bottom:30px;right:6px;width:58px;height:58px;color:var(--wp--preset--color--primary);
	background:var(--wp--preset--color--base);border:1.6px solid var(--wp--preset--color--line);border-radius:14px;display:grid;place-items:center;box-shadow:var(--wp--preset--shadow--card)}
.rez__cup svg{width:30px;height:30px}

@media (max-width:860px){
	.rez{grid-template-columns:minmax(0,1fr);gap:2rem}
	.rez__copy,.rez__art{min-width:0}
	.rez__art{order:2;min-height:240px}
	.rez__brush{width:70%;height:40%;top:-8%}
}
@media (max-width:520px){
	.rez__feats{gap:.85rem 1rem}
	.rez__feats li{font-size:.82rem}
}

/* ═══ СТРАНИЦА „Как работи?“ + „Важно“ (за /rezervacia-na-kniga/) ═══ */
.rez-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,2rem);position:relative}
.rez-step{text-align:center;position:relative}
.rez-step__n{width:44px;height:44px;border-radius:50%;background:var(--wp--preset--color--primary);color:var(--wp--preset--color--base);font-weight:700;display:grid;place-items:center;margin:0 auto .9rem}
.rez-step__ic{width:76px;height:76px;border-radius:22px;margin:0 auto 1rem;display:grid;place-items:center;background:var(--wp--preset--color--base);border:1px solid var(--wp--preset--color--line);color:var(--wp--preset--color--primary)}
.rez-step__ic svg{width:34px;height:34px}
.rez-step h3{font-size:1.125rem;margin:0 0 .4rem}
.rez-step p{font-size:.9rem;color:var(--wp--preset--color--muted);line-height:1.5;margin:0}
.rez-step:not(:last-child)::after{content:"";position:absolute;top:22px;right:-1rem;width:2rem;height:12px;transform:translateY(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 12' fill='none' stroke='%23006838' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h27M23 1.5l6 4.5-6 4.5'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.55}
@media (max-width:800px){.rez-steps{grid-template-columns:1fr 1fr}.rez-step:not(:last-child)::after{display:none}}
@media (max-width:460px){.rez-steps{grid-template-columns:1fr}}

.rez-note{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;align-items:center;background:var(--wp--preset--color--base);border:1px solid var(--wp--preset--color--line);border-radius:20px;padding:1.5rem 1.75rem}
.rez-note__item{display:flex;gap:.9rem;align-items:flex-start;flex:1 1 260px}
.rez-note__ic{flex:none;width:40px;height:40px;border-radius:50%;background:var(--wp--preset--color--primary);color:var(--wp--preset--color--base);display:grid;place-items:center}
.rez-note__ic svg{width:20px;height:20px}
.rez-note__item strong{display:block;margin-bottom:.15rem}
.rez-note__item p{font-size:.875rem;color:var(--wp--preset--color--muted);line-height:1.45;margin:0}

/* ── Форма за резервация ──────────────────────────────────────────── */
/* Формата е на кремав фон, не на тъмна лента → заглавието с бранд зелено, не бяло */
.rez-formband :where(h1,h2,h3){color:var(--wp--preset--color--primary)}
.rez-formband .rezf{background:var(--wp--preset--color--base);border:1px solid var(--wp--preset--color--line);border-radius:22px;padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--wp--preset--shadow--card)}
.rezf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.rezf-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem 2.75rem}
.rezf-f{margin:0;display:flex;flex-direction:column;gap:.45rem}
.rezf-full{grid-column:1 / -1}
.rezf-f label{font-size:.85rem;font-weight:600;color:var(--wp--preset--color--contrast)}
.rezf-f label span{color:var(--wp--preset--color--primary)}
.rezf input,.rezf select,.rezf textarea{width:100%;font:inherit;font-size:.95rem;color:var(--wp--preset--color--contrast);background:var(--wp--preset--color--cream);border:1.5px solid var(--wp--preset--color--line);border-radius:12px;padding:.7rem .9rem;transition:border-color .15s,box-shadow .15s}
.rezf input:focus,.rezf select:focus,.rezf textarea:focus{outline:none;border-color:var(--wp--preset--color--primary);box-shadow:0 0 0 3px rgba(0,104,56,.12);background:var(--wp--preset--color--base)}
.rezf select:required:invalid{color:var(--wp--preset--color--muted)}
.rezf textarea{resize:vertical;min-height:88px}
.rezf-consent{margin:1.25rem 0 0;font-size:.85rem;color:var(--wp--preset--color--muted)}
.rezf-consent label{display:flex;gap:.6rem;align-items:flex-start;cursor:pointer}
.rezf-consent input{width:auto;margin-top:.15rem;accent-color:var(--wp--preset--color--primary)}
.rezf-submit{margin:1.5rem 0 0}
.rezf-submit button{display:inline-flex;align-items:center;gap:.6rem;background:var(--wp--preset--color--primary);color:var(--wp--preset--color--base);font:inherit;font-weight:600;font-size:.95rem;border:none;border-radius:999px;padding:1rem 2.1rem;cursor:pointer;box-shadow:var(--wp--preset--shadow--lift);transition:background .2s,transform .2s}
.rezf-submit button:hover{background:var(--wp--preset--color--deep);transform:translateY(-2px)}
.rezf-notice{border-radius:14px;padding:1rem 1.25rem;margin-bottom:1.5rem;font-weight:500;line-height:1.5}
.rezf-notice--ok{background:rgba(42,183,114,.12);border:1px solid var(--wp--preset--color--accent);color:var(--wp--preset--color--deep)}
.rezf-notice--err{background:rgba(200,60,40,.08);border:1px solid #d99;color:#8a2a1a}
@media(max-width:600px){.rezf-grid{grid-template-columns:1fr}}

/* ── Мобилни поправки: резервация (без хоризонтален скрол) ── */
@media (max-width:640px){
	.rez__title{font-size:clamp(1.9rem,7.6vw,2.6rem);overflow-wrap:anywhere;word-break:break-word}
	.rez__lead{font-size:1.05rem;overflow-wrap:anywhere}
	.rez__copy{max-width:100%}
	.rez__feats{gap:.75rem 1rem}
	.rez-steps{grid-template-columns:1fr;gap:1.75rem}
	.rez-step:not(:last-child)::after{display:none}
	.rez-note{flex-direction:column;gap:1.25rem}
	.samokovlib-sec-head .has-xx-large-font-size,.samokovlib-sec-head .samokovlib-eyebrow{overflow-wrap:anywhere}
}
/* Банерът: лентата е full-bleed, съдържанието се центрира спрямо wideSize (1240px) */
.samokovlib-reserve .rez{max-width:1240px;margin-inline:auto}

/* ── Готов графичен банер за резервация (начална + страница на услугата) ── */
.rez-hero{display:block;max-width:1240px;margin-inline:auto;border-radius:24px;overflow:hidden;box-shadow:var(--wp--preset--shadow--card);transition:transform .25s ease,box-shadow .25s ease}
.rez-hero:hover,.rez-hero:focus-visible{transform:translateY(-3px);box-shadow:var(--wp--preset--shadow--lift);outline:none}
.rez-hero picture,.rez-hero img{display:block;width:100%;height:auto}
@media (max-width:640px){.rez-hero{border-radius:16px}}

/* Глобална защита срещу хоризонтален скрол (root wrapper на блок темата) */
.wp-site-blocks{overflow-x:clip}

/* Подложка „Как работи?“ на мобилен: по-малък падинг и радиус */
@media (max-width:640px){
	.rez-how{padding-left:1.25rem!important;padding-right:1.25rem!important;border-radius:20px}
}