/*
Theme Name:   RSVK Theme v1
Theme URI:    https://rsvk.cz
Description:  Кастомная тема Русского Дома в Праге v1.0 — замена Kadence. Steel Blue design-system + Manrope/Lora. Основная визуалка поставляется rsvk-figma-theme.css (mu-plugin). Этот файл — базовые CSS-переменные и скелет.
Author:       Сергей Тафинцев
Version:      1.0.0
Text Domain:  rsvk
Requires WP:  6.0
Requires PHP: 8.1
Tags:         bilingual, cultural, news, custom-logo, custom-menu
*/

/* ═══════════════════════════════════════════════════════════════
   RSVK THEME v1.0 — Steel Blue
   Основная визуалка подключается через rsvk-figma-theme.css
   (mu-plugin, ~225 KB). Здесь — только то, что должно жить в теме:
   базовый reset, сброс шрифта, CSS-переменные, safety net.
   Все rsvk-dh-*, rsvk-hubcards, rsvk-news-item и прочие компоненты
   приходят из mu-plugins, а не отсюда.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Steel Blue palette */
  --rsvk-bg:              #f0f4f8;
  --rsvk-bg-card:         #ffffff;
  --rsvk-bg-header:       #ffffff;
  --rsvk-bg-footer:       #1a2332;
  --rsvk-bg-deep:         #0f1d2f;  /* hero sections, фон под картой и т.п. */

  --rsvk-primary:         #11457E;  /* Steel Blue — единственный акцент */
  --rsvk-primary-hover:   #1a5a9e;
  --rsvk-primary-dark:    #0a2f5e;

  --rsvk-text:            #1a2332;
  --rsvk-text-secondary:  #4a5a6f;
  --rsvk-text-muted:      #7a8a9f;
  --rsvk-text-inv:        #ffffff;

  --rsvk-border:          rgba(15,29,47,0.10);
  --rsvk-border-soft:     rgba(15,29,47,0.06);

  --rsvk-shadow-sm:       0 1px 3px rgba(15,29,47,0.08);
  --rsvk-shadow-md:       0 3px 10px rgba(15,29,47,0.15);
  --rsvk-shadow-lg:       0 8px 24px rgba(15,29,47,0.18);

  --rsvk-radius-sm:       6px;
  --rsvk-radius-md:       10px;
  --rsvk-radius-lg:       16px;

  --rsvk-transition:      0.22s cubic-bezier(0.4,0,0.2,1);

  --rsvk-font-sans:       'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rsvk-font-serif:      'Lora', Georgia, 'Times New Roman', serif;

  --rsvk-max-w:           1400px;

  /* Триколор для стрипов / акцентов */
  --rsvk-tri-white:       #ffffff;
  --rsvk-tri-blue:        #0039A6;
  --rsvk-tri-red:         #D52B1E;

  /* Mourning (некрологи) */
  --rsvk-mourning:        #1a2332;

  /* figma-theme.css совместимость (те же переменные под другими префиксами) */
  --figma-bg:             #f0f4f8;
  --figma-bg-card:        #ffffff;
  --figma-primary:        #11457E;
  --figma-text:           #1a2332;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--rsvk-font-sans);
  background: var(--rsvk-bg);
  color: var(--rsvk-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }

/* ── Базовая типографика (переопределяется figma-theme.css) ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rsvk-font-sans);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rsvk-text);
  margin: 0 0 0.5em;
}
p { margin: 0 0 1.2em; }
a { color: var(--rsvk-primary); text-decoration: none; transition: color var(--rsvk-transition); }
a:hover { color: var(--rsvk-primary-hover); }

/* ── Skip-link ── */
.rsvk-skip-link {
  position: absolute;
  top: -48px; left: 16px;
  z-index: 99999;
  background: var(--rsvk-primary);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--rsvk-radius-sm);
  font-weight: 600;
  transition: top .2s;
}
.rsvk-skip-link:focus { top: 8px; }

/* ── Layout scaffolding ── */
.rsvk-container {
  max-width: var(--rsvk-max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* Main fallback — если mu-plugin не inject'ит свой layout */
#rsvk-main { min-height: 40vh; }

/* ── Безопасный footer fallback (когда mu-plugin rsvk-footer.php не отработал) ── */
.rsvk-footer-fallback {
  background: var(--rsvk-bg-footer);
  color: #dce6f5;
  padding: 32px 0;
  font-size: 14px;
  text-align: center;
}

/* ── Классы из функций темы (rsvk_card, rsvk_date_badge) ──
   Главная стилизация тоже в figma-theme.css, здесь — аварийный минимум.
*/
.rsvk-card {
  background: var(--rsvk-bg-card);
  border: 1px solid var(--rsvk-border);
  border-radius: var(--rsvk-radius-lg);
  overflow: hidden;
  box-shadow: var(--rsvk-shadow-sm);
  transition: transform var(--rsvk-transition), box-shadow var(--rsvk-transition);
  display: flex;
  flex-direction: column;
}
.rsvk-card:hover { transform: translateY(-4px); box-shadow: var(--rsvk-shadow-lg); }
.rsvk-card-img img { width: 100%; height: 100%; object-fit: cover; }
.rsvk-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.rsvk-card-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.rsvk-card-title a { color: var(--rsvk-text); }
.rsvk-card-title a:hover { color: var(--rsvk-primary); }
.rsvk-card-excerpt { font-size: 14px; color: var(--rsvk-text-secondary); flex: 1; }
.rsvk-card-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--rsvk-border-soft);
  font-size: 13px; color: var(--rsvk-text-muted);
}

.rsvk-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* ── Date badge (rsvk_date_badge) ── */
.rsvk-date-badge {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 52px; padding: 8px 12px;
  border-radius: var(--rsvk-radius-md);
  background: linear-gradient(145deg, #f0f4f8 0%, #dce6f5 60%, #c8d6ea 100%);
  box-shadow: var(--rsvk-shadow-sm), inset 0 1px 0 rgba(255,255,255,0.6);
  color: var(--rsvk-text);
}
.rsvk-date-badge-day { font-size: 22px; font-weight: 800; line-height: 1; }
.rsvk-date-badge-month {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--rsvk-primary);
  margin-top: 2px; font-weight: 700;
}
.rsvk-date-badge.today {
  background: linear-gradient(145deg, #1a5a9e 0%, #11457E 60%, #0a2f5e 100%);
  color: #fff;
}
.rsvk-date-badge.today .rsvk-date-badge-month { color: rgba(255,255,255,0.8); }

/* ── Buttons ── */
.rsvk-btn, .btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 24px;
  border-radius: var(--rsvk-radius-md);
  font-family: var(--rsvk-font-sans);
  font-size: 15px; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
  transition: transform var(--rsvk-transition), box-shadow var(--rsvk-transition), background var(--rsvk-transition);
}
.rsvk-btn-primary, .btn-primary {
  background: var(--rsvk-primary); color: #fff;
  box-shadow: 0 2px 8px rgba(58,110,168,0.3);
}
.rsvk-btn-primary:hover, .btn-primary:hover {
  transform: translateY(-2px); background: var(--rsvk-primary-hover);
  box-shadow: 0 6px 20px rgba(58,110,168,0.35); color: #fff;
}
.rsvk-btn-ghost {
  background: transparent; color: var(--rsvk-primary);
  border: 1px solid var(--rsvk-primary);
}
.rsvk-btn-ghost:hover { background: var(--rsvk-primary); color: #fff; }

/* ── Utilities ── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.text-primary  { color: var(--rsvk-primary) !important; }
.text-muted    { color: var(--rsvk-text-muted) !important; }
.text-center   { text-align: center !important; }

/* ── Screen reader text (WP стандарт) ── */
.screen-reader-text {
  clip: rect(1px,1px,1px,1px);
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
}