/* ========== Príbehy Slovenska – COMMON (ps-*) ========== */

/* Fonty (lokálne TTF z Google Fonts) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("../fonts/Merriweather-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Merriweather";
  src: url("../fonts/Merriweather-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Тема (оттенки Словакии: tatranská modrá, brusnicová, ihličie, jantár, smotanová) */
:root {
  --ps-bg: #0e2030;
  --ps-ink: #e8ecf7;
  --ps-ink-dim: #b9c3d4;
  --ps-accent: #b31b34;    /* brusnicová */
  --ps-fern: #1e5a4e;      /* ihličie */
  --ps-amber: #ffb24c;     /* jantár */
  --ps-cream: #f7f3e9;     /* smotanová */
  --ps-sky: #1b4e7a;       /* tatranská modrá */
  --ps-shadow: rgba(3,12,20,.4);
  --ps-card: rgba(255,255,255,.04);
  --ps-glass: rgba(10,24,38,.65);
  --ps-maxw: 1200px;
}

/* Reset (мягкий) */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ps-ink);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(255,178,76,.08), transparent 60%),
    radial-gradient(900px 500px at 100% 20%, rgba(179,27,52,.12), transparent 60%),
    linear-gradient(180deg, #0a1726, var(--ps-bg) 40%, #0a1726 100%);
  overflow-x: hidden;
}

/* Utility */
.ps-container { width: min(100% - 2rem, var(--ps-maxw)); margin-inline: auto; }
.ps-skip {
  position: absolute; left: -9999px; top: auto;
}
.ps-skip:focus {
  left: 1rem; top: 1rem; background: var(--ps-amber); color: #1b1f22;
  padding: .5rem .75rem; border-radius: .5rem; z-index: 10000;
}

/* Header */
.ps-header {
  position: sticky; top: 0; z-index: 9000;
  background: var(--ps-glass);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ps-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 0;
}
.ps-brand {
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ps-ink);
  font-weight: 700; letter-spacing: .2px;
}
.ps-brand__logo {
  width: 28px; height: 28px; border-radius: 6px;
  background:
    conic-gradient(from 180deg at 70% 40%, var(--ps-amber), var(--ps-accent), var(--ps-sky), var(--ps-fern), var(--ps-amber));
  box-shadow: 0 0 0 2px rgba(255,255,255,.08) inset, 0 4px 14px var(--ps-shadow);
  transform: rotate(6deg);
}
.ps-brand__text { font-family: "Merriweather", serif; }

.ps-nav { display: flex; align-items: center; gap: 1rem; position: relative; }
.ps-menu { display: none; list-style: none; margin: 0; padding: 0; gap: .5rem; }
.ps-menu a {
  color: var(--ps-ink); text-decoration: none; padding: .5rem .75rem; border-radius: .6rem;
  transition: transform .12s ease, background .2s ease, color .2s ease;
}
.ps-menu a:hover { transform: translateY(-1px); background: rgba(255,255,255,.06); }
.ps-menu a.is-active { background: rgba(255,255,255,.10); color: var(--ps-cream); }

/* Burger */
.ps-burger {
  display: inline-flex; flex-direction: column; gap: 4px; padding: .4rem .5rem;
  border: 1px solid rgba(255,255,255,.14); background: transparent; color: var(--ps-ink);
  border-radius: .6rem; cursor: pointer;
}
.ps-burger__bar { width: 24px; height: 2px; background: currentColor; display: block; }
.ps-burger__label { position: absolute; left: -9999px; }

/* Drawer (mobil) */
.ps-drawer[hidden] { display: none; }
.ps-drawer {
  position: fixed; inset: 0; z-index: 9500; display: grid; grid-template-columns: 1fr;
}
.ps-drawer__backdrop {
  position: absolute; inset: 0; background: rgba(2,10,18,.55);
}
.ps-drawer__panel {
  position: relative; margin-left: auto; width: min(86vw, 420px); height: 100%;
  background: #0f2236; border-left: 1px solid rgba(255,255,255,.08);
  padding: 1rem 1rem 2rem; display: flex; flex-direction: column; gap: 1rem;
  animation: ps-slide-in .22s ease both;
}
.ps-drawer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.ps-drawer__list a {
  display: block; padding: .9rem 1rem; border-radius: .7rem; text-decoration: none; color: var(--ps-ink);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.ps-drawer__list a:hover { transform: translateX(4px); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); }
.ps-drawer__close {
  align-self: flex-end; padding: .5rem .7rem; border-radius: .6rem; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03); color: var(--ps-ink); cursor: pointer;
}
@keyframes ps-slide-in { from { transform: translateX(12px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.no-scroll { overflow: hidden; }

/* Dekor — hrebeň Tatier + folklórna stuha */
.ps-ridge {
  height: 6px;
  background:
    linear-gradient(135deg, transparent 40%, rgba(255,255,255,.14) 40% 60%, transparent 60%),
    linear-gradient(45deg, transparent 42%, rgba(255,255,255,.1) 42% 58%, transparent 58%);
  mask-image: linear-gradient(#000, #000);
}
.ps-ribbon {
  height: 8px;
  background:
    repeating-linear-gradient(90deg, var(--ps-accent) 0 16px, transparent 16px 20px),
    linear-gradient(90deg, var(--ps-fern), var(--ps-amber));
  mix-blend-mode: screen; opacity: .4;
}

/* Main */
.ps-main { padding-top: 1rem; }

/* Karty / figure */
.ps-card {
  background: var(--ps-card);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: clip;
  box-shadow: 0 10px 20px var(--ps-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .2s ease;
}
.ps-card img {
  display: block;
  width: 100%;
  max-width: 350px; /* важно: не больше 350px */
  height: auto;
}
.ps-card figcaption {
  padding: .75rem .9rem; color: var(--ps-ink-dim); font-size: .95rem;
  border-top: 1px dashed rgba(255,255,255,.15);
}

/* Hover эффект */
.hover-lift:hover { transform: translateY(-6px) rotate(-.25deg); box-shadow: 0 16px 26px var(--ps-shadow); border-color: rgba(255,255,255,.18); }

/* Reveal on scroll */
.reveal-on-scroll { opacity: 0; transform: translateY(14px); }
.reveal-on-scroll.is-visible { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }

/* Footer */
.ps-footer { margin-top: 4rem; border-top: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); }
.ps-footer__grid {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0;
  flex-wrap: wrap;
}
.ps-footnote { margin: 0; color: var(--ps-ink-dim); }
.ps-footlinks { list-style: none; display: flex; gap: .75rem; margin: 0; padding: 0; }
.ps-footlinks a {
  text-decoration: none; color: var(--ps-ink); padding: .4rem .6rem; border-radius: .5rem;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
}
.ps-footlinks a:hover { background: rgba(255,255,255,.07); }

/* Layout: desktop menu visible */
@media (min-width: 992px) {
  .ps-menu { display: inline-flex; }
  .ps-burger { display: none; }
}

/* Адаптив: сетки и отступы */
@media (max-width: 991px) {
  .ps-header__inner { padding: .6rem 0; }
}

/* Сверхмалые устройства */
@media (max-width: 480px) {
  .ps-brand__text { font-size: 1rem; }
}

/* Предпочтение: уменьшить анимации */
@media (prefers-reduced-motion: reduce) {
  .hover-lift, .reveal-on-scroll { transition: none !important; }
}
.ps-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10000;
  background: var(--ps-glass);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
:root { --ps-header: 76px; } /* фолбэк, JS уточнит число */

.ps-main { 
  /* вместо прежнего padding-top: 1rem; (его можно удалить/перекрыть) */
  padding-top: calc(var(--ps-header, 76px) + 12px);
}

/* чтобы якоря/скролл к секциям не прятались под fixed-хедером */
.ps-section, .ps-hero, h1, h2, h3, [id] {
  scroll-margin-top: calc(var(--ps-header, 76px) + 14px);
}
.ps-tips { 
  position: sticky; 
  top: calc(var(--ps-header, 76px) + 12px);
}
.no-scroll { overflow: hidden; padding-right: var(--sb, 0px); }
.ps-container{ width:min(100% - 2rem, var(--ps-maxw)); margin-inline:auto; overflow-x: clip; }
/* ===== Footer (mobile fix) ===== */
.ps-footer{
  background: var(--ps-deep);
  border-top: 1px solid rgba(255,255,255,.08);
}
.ps-footer__grid{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: start;
}
.ps-footnote{
  margin: 0;
  color: var(--ps-ink-dim);
}

.ps-footlinks{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;             /* можно переносить */
  justify-content: flex-end;
}
.ps-footlinks li{ display: contents; } /* якорь сам задаёт размер */

.ps-footlinks a{
  display: inline-flex;        /* одно целое даже на 2 строки */
  align-items: center;
  justify-content: center;
  padding: .45rem .7rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: .7rem;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color: var(--ps-ink);
  text-decoration: none;
  line-height: 1.25;
  max-width: 100%;
  white-space: normal;         /* точно разрешаем перенос */
  word-break: break-word;      /* длинные слова не выпирают */
  box-shadow: 0 6px 12px var(--ps-shadow);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.ps-footlinks a:hover{
  border-color: rgba(255,255,255,.26);
  box-shadow: 0 8px 14px var(--ps-shadow);
  transform: translateY(-1px);
}
.ps-footlinks a:focus-visible{
  outline: 2px solid var(--ps-amber);
  outline-offset: 2px;
}

/* Раскладки для узких экранов */
@media (max-width: 720px){
  .ps-footer__grid{
    grid-template-columns: 1fr;
    gap: .8rem;
  }
  .ps-footlinks{
    display: grid;
    grid-template-columns: 1fr 1fr; /* две «кнопки» в ряд */
    justify-content: stretch;
    gap: .6rem;
  }
  .ps-footlinks a{
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 420px){
  .ps-footlinks{ grid-template-columns: 1fr; } /* по одной на строку */
}