/* Спільні стилі статичних сторінок поза SPA (/booklets/, /space/): токени, скидання,
   шапка з меню. Самодостатні — ці сторінки не збираються Vite'ом і не бачать
   web/src/app/styles/tokens.css; значення звірені з ним і з LandingHeader вручну.
   Стилі самих розділів — у booklets.css / space.css, які підключаються після цього файлу.
   Тут же — спільний вигляд рекламних блоків (.site-ad). */

:root {
  --krk-cream: #FFFAF3;
  --krk-surface: #FFFDF9;
  --krk-sand: #FFF2DB;
  --krk-ink: #2B2B2B;
  --krk-muted: #9B9B9B;
  --krk-text-secondary: #6E6E6E;
  --krk-border: #F0E7D6;
  --krk-track: #E4DBC8;

  --krk-green-500: #10B981;
  --krk-green-700: #047857;
  --krk-green-tint: rgba(16, 185, 129, 0.12);
  --krk-blue-600: #1E40AF;
  --krk-blue-tint: rgba(30, 64, 175, 0.12);
  --krk-red-500: #F62440;
  --krk-red-tint: rgba(246, 36, 64, 0.12);
  --krk-orange-500: #F97316;
  --krk-orange-700: #C2570F;

  --krk-radius-sm: 14px;
  --krk-radius-md: 15px;
  --krk-radius-lg: 24px;
  --krk-radius-pill: 999px;

  --krk-shadow-sm: 0 2px 8px rgba(60, 40, 20, 0.05);
  --krk-shadow-modal: 0 24px 60px rgba(43, 43, 43, 0.3);

  --krk-fw-semibold: 600;
  --krk-fw-bold: 700;
  --krk-fw-extrabold: 800;
  --krk-fw-black: 900;
  --krk-font: 'Nunito', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--krk-cream);
  color: var(--krk-ink);
  font-family: var(--krk-font);
  font-weight: var(--krk-fw-bold);
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Шапка ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 242, 219, 0.88);
  backdrop-filter: blur(8px);
  box-shadow: var(--krk-shadow-sm);
}

.site-header-bar {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px clamp(16px, 4vw, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
}

.site-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--krk-ink);
}

.site-brand-icon {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--krk-radius-sm);
  background: var(--krk-green-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-brand-name {
  font-weight: var(--krk-fw-black);
  font-size: 22px;
  letter-spacing: -0.5px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin-left: auto;
}

.site-nav-link {
  color: var(--krk-ink);
  font-weight: var(--krk-fw-extrabold);
  font-size: 15px;
}
.site-nav-link:hover,
.site-nav-link.is-active {
  color: var(--krk-green-500);
}

.site-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.site-burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--krk-green-tint);
  border-radius: var(--krk-radius-sm);
  color: var(--krk-ink);
  cursor: pointer;
}

.site-mobile-menu {
  display: none;
  flex-direction: column;
  gap: 16px;
  background: var(--krk-sand);
  box-shadow: var(--krk-shadow-sm);
  padding: 18px 18px 24px;
}
.site-mobile-menu.is-open {
  display: flex;
}
.site-mobile-link {
  color: var(--krk-ink);
  font-weight: var(--krk-fw-extrabold);
  font-size: 18px;
}
.site-mobile-link.is-active {
  color: var(--krk-green-500);
}
.site-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
}
.site-mobile-actions .site-btn {
  width: 100%;
}

/* Той самий поріг, що в LandingHeader.module.css: меню з п'яти пунктів і кнопки
   вміщуються в один рядок лише з ~1040px (на лендингу). */
@media (max-width: 1050px) {
  .site-nav,
  .site-actions {
    display: none;
  }
  .site-burger {
    display: flex;
  }
}

/* Кнопки шапки — "порожні", заливаються акцентом лише на hover, як реальна шапка
   лендингу (web/src/shared/ui/Button), а не суцільні з мокапу. */
.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  border-radius: 16px;
  font-family: var(--krk-font);
  font-weight: var(--krk-fw-black);
  background: var(--krk-surface);
  box-shadow: var(--krk-shadow-sm);
  transition: background 0.12s ease, color 0.12s ease;
}
.site-btn-sm {
  padding: 10px 16px;
  font-size: 14px;
  height: 40px;
}
.site-btn-md {
  padding: 12px 18px;
  font-size: 15px;
  height: 46px;
}
.site-btn-login {
  color: var(--krk-blue-600);
}
.site-btn-login:hover {
  background: var(--krk-blue-600);
  color: var(--krk-surface);
}
.site-btn-register {
  color: var(--krk-green-500);
}
.site-btn-register:hover {
  background: var(--krk-green-500);
  color: var(--krk-surface);
}

/* [hidden] проти класу з display: … — рівна специфічність, пізніше правило класу
   перемогло б, і прихована кнопка лишилася б видимою. */
[data-guest-only][hidden],
[data-auth-only][hidden] {
  display: none;
}

/* ---------- Рекламні блоки (Adsterra — static-shared/ads.mjs, AdSense — build-booklets.mjs) ---------- */

.site-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.site-ad-label {
  font-size: 12px;
  font-weight: var(--krk-fw-bold);
  color: var(--krk-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* Фіксований розмір банера зарезервований одразу (верстка не стрибає, коли підвантажиться
   iframe); line-height:0 прибирає зазор під inline-iframe. */
.site-ad-banner {
  overflow: hidden;
  line-height: 0;
}
/* Native сам задає свою розкладку і міряє ширину контейнера — на всю ширину колонки. */
.site-ad-native {
  width: 100%;
}
/* Native ще не прийшов — без підпису "Реклама" над порожнечею (контейнер не ховаємо:
   native міряє його ширину, коли ініціалізується). */
.site-ad--native:has(> .site-ad-native:empty) .site-ad-label {
  display: none;
}
/* Замість реклами в dev (npm run dev — без web/.env.production). */
.site-ad-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--krk-track);
  border-radius: var(--krk-radius-sm);
  background: var(--krk-surface);
  color: var(--krk-muted);
  font-size: 13px;
}