/* site.css — premium look for Bootstrap 4 (no sidebar) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');

:root{
  --bg0:#070A12;
  --bg1:#0A1020;

  --card:rgba(255,255,255,.07);
  --card2:rgba(255,255,255,.05);
  --border:rgba(255,255,255,.12);

  /* СДЕЛАЛ СВЕТЛЕЕ */
  --text:#F4F6FF;                    /* было темнее */
  --muted:rgba(244,246,255,.86);     /* было .72 (слишком серо) */
  --muted2:rgba(244,246,255,.72);    /* для второстепенных мелочей */

  --accent:#7C5CFF;
  --accent2:#22D3EE;
  --good:#22C55E;
  --warn:#F59E0B;

  --radius:18px;
  --radius2:22px;
  --shadow: 0 18px 50px rgba(0,0,0,.35);
  --shadow2: 0 22px 70px rgba(0,0,0,.45);
  --ring: 0 0 0 4px rgba(124,92,255,.22);
}

html,body{ height:100%; }

/* ВАЖНО: фон переносим на html, body делаем прозрачным */
html{
  background:
    radial-gradient(1200px 700px at 15% 0%, rgba(124,92,255,.22), transparent 55%),
    radial-gradient(1100px 650px at 85% 10%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(900px 500px at 50% 110%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 50%, #060815);

  background-repeat: no-repeat;
  background-color: #060815;
  /* чтобы не было ощущения “плитки” */
  background-size: auto;
}

body{
  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  line-height: 1.62;
  background: transparent; /* ключевое */
}

a{ color: rgba(225,230,255,.96); }
a:hover{ color:#ffffff; text-decoration:none; }

.container{ max-width: 980px; }

/* ---------- Topbar ---------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  background: rgba(10,16,32,.62);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand-mark{
  width:38px;height:38px;border-radius:14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 12px 28px rgba(124,92,255,.22);
}
.brand-title{
  font-weight: 900;
  letter-spacing: -0.35px;
  color:#fff;
  line-height: 1.05;
}
.brand-sub{
  display:block;
  color: var(--muted2);
  font-weight: 800;
  font-size: 12px;
  margin-top: 2px;
}

/* ---------- Custom typography (override Bootstrap defaults) ---------- */
h1,h2,h3,h4,h5,h6{ margin:0 0 .65rem 0; }
h1{
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 900;
  letter-spacing: -1.1px;
  line-height: 1.06;
}
h2{
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 900;
  letter-spacing: -0.6px;
  line-height: 1.15;
}
h3{
  font-size: clamp(18px, 2.0vw, 22px);
  font-weight: 850;
  letter-spacing: -0.35px;
  line-height: 1.22;
}
h4{ font-size: 18px; font-weight: 850; letter-spacing: -0.2px; }
h5{ font-size: 16px; font-weight: 800; letter-spacing: -0.1px; }
h6{
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted2);
}

.lead{
  font-size: 1.1rem;
  color: var(--muted);
  margin: 0;
}
.p-muted{ color: var(--muted); }
.small-muted{ color: var(--muted2); }

/* ---------- Surfaces ---------- */
.surface{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius2);
  box-shadow: var(--shadow);
}
.surface:hover{ box-shadow: var(--shadow2); }
.surface-header{ padding: 18px 18px 0 18px; }
.surface-body{ padding: 18px; }

.hr-soft{
  height:1px;
  background: rgba(255,255,255,.10);
  border:0;
  margin: 14px 0;
}

/* ---------- Chips ---------- */
.chip{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding: .42rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 13px;
}
.chip .dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--good);
  box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}
.chip-accent{
  border-color: rgba(124,92,255,.22);
  background: rgba(124,92,255,.14);
}
.chip-sky{
  border-color: rgba(34,211,238,.22);
  background: rgba(34,211,238,.12);
}

/* ---------- Buttons ---------- */
.btn{
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: -0.2px;
  padding: .72rem 1.05rem;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease;
}
.btn:focus{ box-shadow: var(--ring) !important; }
.btn-lg{ padding: .92rem 1.2rem; font-size: 1.05rem; }

.btn-primary{
  border: 0 !important;
  color: #081026 !important;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 18px 44px rgba(124,92,255,.18);
}
.btn-primary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 22px 56px rgba(124,92,255,.22);
}
.btn-outline-secondary{
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.06) !important;
}
.btn-outline-secondary:hover{
  background: rgba(255,255,255,.10) !important;
  transform: translateY(-1px);
}
.tap{
  min-height: 48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* ---------- Holiday list ---------- */
.holiday-row{
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.holiday-row:first-child{ border-top: 0; }

.holiday-name{
  font-weight: 900;
  letter-spacing: -0.25px;
  font-size: 18px;
  margin-bottom: 2px;
}
.holiday-name a{ color: #ffffff; }
.holiday-name a:hover{ color: rgba(225,230,255,.96); }

.holiday-desc{
  color: var(--muted);
  margin: 0;
  font-size: .98rem;
}

.tags{
  margin-top: 8px;
  display:flex;
  flex-wrap: wrap;
  gap:8px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  font-size: 12px;
}
.tag::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background: rgba(255,255,255,.42);
}
.tag-rus{ border-color: rgba(124,92,255,.22); background: rgba(124,92,255,.12); }
.tag-rus::before{ background: var(--accent); }
.tag-int{ border-color: rgba(34,211,238,.22); background: rgba(34,211,238,.10); }
.tag-int::before{ background: var(--accent2); }
.tag-ch{ border-color: rgba(245,158,11,.24); background: rgba(245,158,11,.12); }
.tag-ch::before{ background: var(--warn); }
.tag-fun{ border-color: rgba(34,197,94,.22); background: rgba(34,197,94,.10); }
.tag-fun::before{ background: var(--good); }

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
}
.breadcrumb-item a{ font-weight: 900; color: rgba(255,255,255,.92); }
.breadcrumb-item.active{ color: rgba(255,255,255,.72); }

/* ---------- Footer ---------- */
.site-footer{
  margin-top: 28px;
  padding: 22px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(10,16,32,.55);
  backdrop-filter: blur(14px);
  color: rgba(255,255,255,.78);
}
.site-footer a{ color: rgba(255,255,255,.86); }
.site-footer a:hover{ color:#fff; }

/* ---------- Background attachment fix (desktop only) ---------- */
/* На десктопе можно закрепить фон, чтобы вообще не было “скачков”. */
@media (min-width: 992px){
  html{
    background-attachment: fixed, fixed, fixed, fixed;
  }
}

/* На мобилках fixed часто глючит — отключаем */
@media (max-width: 991.98px){
  html{
    background-attachment: scroll, scroll, scroll, scroll;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 576px){
  .container{ padding-left: 14px; padding-right: 14px; }
  .btn{ width:100%; }
  .btn.btn-inline{ width:auto; }
  .holiday-row{ padding: 14px 14px; }
}

/* ===== Date navigation (prev / next) ===== */
.date-nav{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.date-nav a{
  text-decoration:none;
  flex: 1 1 260px;
  min-width: 240px;
}

.navcard{
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
  padding: 14px 16px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  height: 100%;
}
.navcard:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
  border-color: rgba(124,92,255,.22);
}
.navcard-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
}
.navcard-label{
  font-weight: 900;
  letter-spacing: -0.2px;
  color: rgba(255,255,255,.90);
  font-size: 14px;
}
.navcard-arrow{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  font-weight: 900;
}
.navcard-date{
  font-weight: 900;
  letter-spacing: -0.35px;
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
}
.navcard-sub{
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  margin-top: 4px;
}

/* small quick button (optional, for "Сегодня") */
.navpill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: .65rem 1rem;
  border-radius: 999px;
  font-weight: 900;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.92);
}
.navpill:hover{ background: rgba(255,255,255,.10); }

/* ===== Name days (именины) — not links ===== */
.namedays{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top: 10px;
}
.namebadge{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding: .42rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 13px;
}
.namebadge::before{
  content:"";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(34,211,238,.95);
  box-shadow: 0 0 0 5px rgba(34,211,238,.12);
}
.namebadge--alt::before{
  background: rgba(124,92,255,.95);
  box-shadow: 0 0 0 5px rgba(124,92,255,.12);
}
.namebadge--warm::before{
  background: rgba(245,158,11,.95);
  box-shadow: 0 0 0 5px rgba(245,158,11,.12);
}