/*
Theme Name: MRROOT Futurum
Theme URI: https://mrroot.pro/
Author: MRROOT
Author URI: https://mrroot.pro/
Description: Custom futuristic IT-styled theme with dark/light mode, smooth animations, parallax and dynamic cursor.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mrroot-futurum
*/
:root{
  --bg: #0b0f14;
  --bg-soft: #101823;
  --text: #e8f0ff;
  --muted: #94a3b8;
  --primary: #60a5fa;
  --accent: #22d3ee;
  --card: #0f1722;
  --border: #1e293b;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --bg: #f7fafc;
  --bg-soft: #ffffff;
  --text: #0b121a;
  --muted: #475569;
  --primary: #0ea5e9;
  --accent: #06b6d4;
  --card: #ffffff;
  --border: #e2e8f0;
  --shadow: 0 10px 30px rgba(2,8,23,.08);
}
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  backdrop-filter: blur(10px);
  background: rgba(10, 10, 15, 0.6);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  z-index: 1000;
  transition: background 0.3s ease;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo a {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.logo .symbol {
  color: var(--accent-color);
  margin-right: 4px;
  font-weight: bold;
}

.main-nav .nav-menu {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
}

.nav-menu li a {
  color: var(--text-color);
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
}

.nav-menu li a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--accent-color);
  transition: width 0.3s ease;
}

.nav-menu li a:hover::after {
  width: 100%;
}

/* Подменю */
.nav-menu li ul {
  position: absolute;
  background: rgba(20, 20, 30, 0.95);
  padding: 1rem;
  border-radius: 0.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.nav-menu li:hover > ul {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.nav-menu li ul li {
  margin: 0.3rem 0;
}

/* Кнопка темы */
#theme-toggle {
  background: none;
  border: none;
  color: var(--text-color);
  font-size: 1.3rem;
  cursor: pointer;
  transition: transform 0.3s ease;
}

#theme-toggle:hover {
  transform: rotate(20deg);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
a{color:var(--primary);text-decoration:none}
a:hover{opacity:.9}
.container{width:min(1200px,92vw);margin:auto}
.header{position:sticky;top:0;z-index:50;background:linear-gradient(to bottom,rgba(0,0,0,.35),transparent);backdrop-filter: blur(8px)}
.nav{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:16px 0}
.nav a{color:var(--text);opacity:.9}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.5px}
.theme-toggle{appearance:none;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);padding:8px 12px;border-radius:999px;cursor:pointer;box-shadow:var(--shadow)}
.hero{position:relative;overflow:hidden;border-radius:24px;background:radial-gradient(1200px 600px at 10% 10%,rgba(96,165,250,.18),transparent 60%),radial-gradient(1000px 500px at 90% 10%,rgba(34,211,238,.18),transparent 60%),linear-gradient(180deg,var(--bg-soft),var(--card));padding:80px 32px;margin:24px 0;box-shadow:var(--shadow)}
.hero h1{font-size:clamp(32px,4vw,56px);margin:0 0 10px}
.hero p{max-width:820px;color:var(--muted);margin:0 0 24px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;border:1px solid var(--border);background:var(--bg-soft);color:var(--text);cursor:pointer;box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(90deg,var(--primary),var(--accent));color:#001018;border:none}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--border);border-radius:18px;overflow:hidden;position:relative;box-shadow:var(--shadow);transform:translateZ(0)}
.card:hover{transform:translateY(-2px)}
.card .thumb{aspect-ratio:16/9;background:linear-gradient(135deg,rgba(96,165,250,.15),rgba(34,211,238,.1));overflow:hidden}
.card .content{padding:16px}
.meta{font-size:12px;color:var(--muted)}
.footer{padding:32px 0;color:var(--muted);border-top:1px solid var(--border);margin-top:40px}
/* reveal animations */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}
/* parallax layers */
.parallax{position:absolute;inset:0;pointer-events:none;transform:translateZ(0)}
.layer{position:absolute;border-radius:9999px;filter:blur(30px);opacity:.5}
.layer.l1{top:10%;left:5%;width:220px;height:220px;background:radial-gradient(closest-side,var(--primary),transparent)}
.layer.l2{bottom:15%;right:10%;width:300px;height:300px;background:radial-gradient(closest-side,var(--accent),transparent)}
.layer.l3{top:30%;right:35%;width:160px;height:160px;background:radial-gradient(closest-side,#a78bfa,transparent)}
/* dynamic cursor */
.cursor{position:fixed;inset:0;pointer-events:none;z-index:100}
.cursor .dot,.cursor .ring{position:fixed;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:difference}
.cursor .dot{width:6px;height:6px;background:#fff}
.cursor .ring{width:28px;height:28px;border:2px solid #fff;opacity:.7}
/* utilities */
.tag{display:inline-block;padding:4px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted)}
.section{margin:48px 0}
kbd{font:12px/1.2 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;padding:2px 6px;border:1px solid var(--border);border-radius:6px;background:var(--bg-soft);color:var(--text)}

/* === Fix vars mapping === */
:root { --text-color: var(--text); --accent-color: var(--accent); }

/* === Base nav reset (работает с текущей разметкой header.php) === */
.header .nav ul { list-style: none; margin: 0; padding: 0; }
.header .nav .nav-menu,
.header .nav .menu {                /* WP может дать .menu вместо .nav-menu */
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
}

/* Верхний уровень */
.header .nav .nav-menu > li,
.header .nav .menu > li { position: relative; }

.header .nav .nav-menu > li > a,
.header .nav .menu > li > a {
  display: inline-block;
  padding: 10px 6px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  position: relative;
  transition: color .25s ease;
}

.header .nav .nav-menu > li > a::after,
.header .nav .menu > li > a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width .25s ease;
}
.header .nav .nav-menu > li:hover > a::after,
.header .nav .menu > li:hover > a::after { width: 100%; }

/* Подменю */
.header .nav .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  padding: 8px;
  margin: 0;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
}
.header .nav li:hover > .sub-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.header .nav .sub-menu a {
  display: block;
  padding: 10px 10px;
  border-radius: 8px;
  color: var(--text);
}
.header .nav .sub-menu a:hover { background: rgba(255,255,255,.04); }

/* Кнопка темы — поддержим оба id */
#theme-toggle, #themeToggle {
  background: none;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.1rem;
  border-radius: 999px;
  padding: 8px 10px;
  cursor: pointer;
  transition: transform .3s ease, background .2s ease;
}
#theme-toggle:hover, #themeToggle:hover {
  transform: rotate(12deg);
  background: rgba(255,255,255,.04);
}
/* ===== Footer menu fix ===== */
.footer .menu, 
.footer .menu ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
}

.footer .menu > li { 
  margin: 6px 0; 
}

.footer .menu a {
  color: var(--text);
  text-decoration: none;
  opacity: .9;
}

.footer .menu a:hover { opacity: 1; }

/* Подменю в подвале не выпадающее — простая иерархия */
.footer .menu .sub-menu {
  position: static;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0 0 0 14px;   /* небольшой отступ для дочерних */
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* Footer: только верхний уровень, 2 колонки × 3 строки (затем добавляются новые колонки) */
.footer-cats { 
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-rows: repeat(3, auto);   /* до 3 пунктов в колонке */
  grid-auto-flow: column;                /* заполняем по колонкам */
  grid-auto-columns: minmax(200px, 1fr); /* ширина колонок и авто-добавление новых */
  gap: 10px 28px;
}
.footer-cats > li { break-inside: avoid; }
.footer-cats > li > a{
  display:inline-block;
  padding:6px 0;
  color: var(--text);
  text-decoration:none;
  font-weight:600;
  opacity:.9;
  transition: opacity .2s ease, transform .12s ease;
}
.footer-cats > li > a:hover{ opacity:1; transform: translateY(-1px); }

/* На мобиле — одна колонка списком */
@media (max-width: 760px){
  .footer-cats{
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: 1fr;
  }
  }
/* ===============================
   Свежие материалы = как Популярные
   =============================== */

.section.latest { margin-top: 32px; }

.section.latest .grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.section.latest .card{
  height:386px;                 /* как у "Популярных" */
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.section.latest .thumb{
  flex:0 0 218px;               /* высота "шапки" */
  display:block;
  overflow:hidden;
  aspect-ratio:auto !important; /* перебиваем глобальное 16/9 */
}

.section.latest .thumb img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}

.section.latest .content{
  flex:1 1 auto;
  padding:16px;
  display:flex;
  align-items:center;
}

.section.latest h3{
  font-size:16px; line-height:1.3; margin:0;
  display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden;
}

/* Адаптив синхронно с .grid */
@media (max-width:980px){
  .section.latest .grid{ grid-template-columns:repeat(2,1fr); }
  .section.latest .card{ height:360px; }
  .section.latest .thumb{ flex-basis:200px; }
}
@media (max-width:640px){
  .section.latest .grid{ grid-template-columns:1fr; }
  .section.latest .card{ height:320px; }
  .section.latest .thumb{ flex-basis:190px; }
}
/* =========================================
   ЕДИНАЯ ВЕРСТКА КАРТОЧЕК ПОСТОВ (везде)
   Главная (latest), Архивы, Рубрики, Поиск
   ========================================= */

/* 1) Сетка: 3 → 2 → 1 колонки */
.blog main .grid,
.archive main .grid,
.search main .grid,
.section.latest .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px) {
  .blog main .grid,
  .archive main .grid,
  .search main .grid,
  .section.latest .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .blog main .grid,
  .archive main .grid,
  .search main .grid,
  .section.latest .grid { grid-template-columns: 1fr; }
}

/* 2) Карточка поста: одинаковая высота, как на главной */
.blog article.type-post,
.archive article.type-post,
.search article.type-post,
.section.latest .card {
  display: flex;
  flex-direction: column;
  height: 386px;            /* подгони под популярные, если надо — 340–386px */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transform: translateZ(0);
}

/* 3) Верхняя часть — изображение фиксированной высоты */
.blog article.type-post .thumb,
.archive article.type-post .thumb,
.search article.type-post .thumb,
.section.latest .thumb {
  flex: 0 0 218px;          /* высота «шапки» с картинкой */
  display: block;
  overflow: hidden;
  aspect-ratio: auto !important;  /* перебиваем любые глобальные aspect-ratio */
}

/* 4) Картинка заполняет контейнер и не «раздувает» карточку */
.blog article.type-post .thumb img,
.archive article.type-post .thumb img,
.search article.type-post .thumb img,
.section.latest .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 5) Контент — аккуратно, в 2 строки */
.blog article.type-post .content,
.archive article.type-post .content,
.search article.type-post .content,
.section.latest .content {
  flex: 1 1 auto;
  padding: 16px;
  display: flex;
  align-items: center;
}

.blog article.type-post h3,
.archive article.type-post h3,
.search article.type-post h3,
.section.latest h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 6) Небольшой hover-эффект для единого стиля */
.blog article.type-post:hover .thumb img,
.archive article.type-post:hover .thumb img,
.search article.type-post:hover .thumb img,
.section.latest .card:hover .thumb img {
  transform: scale(1.03);
  transition: transform .35s ease;
}
/* =========================================
   Единый стиль карточек статей (везде)
   ========================================= */

/* сетка */
.blog main .grid,
.archive main .grid,
.search main .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* карточка */
.blog article.type-post,
.archive article.type-post,
.search article.type-post {
  display: flex;
  flex-direction: column;
  background: var(--card, #0d1014);
  border: 1px solid var(--border, #1d2025);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog article.type-post:hover,
.archive article.type-post:hover,
.search article.type-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 25px rgba(0,0,0,0.5);
}

/* превью изображение — чуть ниже, чем на главной */
.blog article.type-post .thumb,
.archive article.type-post .thumb,
.search article.type-post .thumb {
  flex: 0 0 180px; /* вместо 218px */
  overflow: hidden;
}
.blog article.type-post .thumb img,
.archive article.type-post .thumb img,
.search article.type-post .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.blog article.type-post:hover .thumb img,
.archive article.type-post:hover .thumb img,
.search article.type-post:hover .thumb img {
  transform: scale(1.05);
}

/* контент внутри */
.blog article.type-post .content,
.archive article.type-post .content,
.search article.type-post .content {
  flex: 1 1 auto;
  padding: 18px;
  color: var(--text, #e8f0ff);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* заголовок */
.blog article.type-post .content h3,
.archive article.type-post .content h3,
.search article.type-post .content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text, #fff);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* описание / отрывок */
.blog article.type-post .content p,
.archive article.type-post .content p,
.search article.type-post .content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ===== Архивы/Рубрики/Поиск — карточки как на главной, но с contain ===== */

/* Сетка */
.blog main .grid,
.archive main .grid,
.search main .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px){
  .blog main .grid,
  .archive main .grid,
  .search main .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .blog main .grid,
  .archive main .grid,
  .search main .grid { grid-template-columns: 1fr; }
}

/* Карточка (единая высота) */
.blog article.card,
.archive article.card,
.search article.card {
  display: flex;
  flex-direction: column;
  height: 360px;                /* при желании 340–386px */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* Превью — ВМЕЩАЕМ изображение (contain), не обрезаем */
.blog article.card .thumb,
.archive article.card .thumb,
.search article.card .thumb {
  flex: 0 0 180px;              /* меньше, чем на главной, чтобы текст был виден */
  display: block;
  overflow: hidden;
  background: var(--bg-soft);
  padding: 8px;
  aspect-ratio: auto !important; /* перебиваем глобальное 16/9 */
}
.blog article.card .thumb img,
.archive article.card .thumb img,
.search article.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;           /* ключевой момент */
  object-position: center;
  display: block;
}

/* Контент */
.blog article.card .content,
.archive article.card .content,
.search article.card .content {
  flex: 1 1 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog article.card h3 {
  margin: 6px 0 8px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog article.card .excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  opacity: .85;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}