/*
Theme Name:   Дом Фенікса
Theme URI:    https://example.com
Description:  Дочірня тема для сайту таролога «Дом Фенікса». Перший екран із фенікcом, тримовність через Polylang.
Author:       Дом Фенікса
Version:      1.0.0
Template:     twentytwentyfour
Text Domain:  dom-feniksa
License:      GPL-2.0-or-later
*/

/* ─────────────────────────────────────────────────────────────
   УВАГА: рядок «Template:» вище має точно збігатися з назвою
   теки батьківської теми у /wp-content/themes/.
   Зараз стоїть twentytwentyfour — вона є в кожній інсталяції WP.
   Якщо у вас Astra   -> Template: astra
   Якщо GeneratePress -> Template: generatepress
   Якщо Kadence       -> Template: kadence
   Помилка в цьому рядку = тема не активується.
   ───────────────────────────────────────────────────────────── */

/* Загальні стилі сайту. Стилі героя лежать окремо
   в assets/css/hero.css і підключаються лише там, де він потрібен. */

/* ─────────────────────────────────────────────────────────────
   Палітра й типографіка.

   Цей блок жив у hero.css, а hero.css вантажиться лише там, де є
   перший екран. Тому на /karta-dnya, /karty-taro і сторінках карт
   змінних не існувало взагалі: працювали тільки запасні значення
   в кожному окремому правилі, а color і font-family бралися
   з батьківської теми — світлий текст на світлому тлі.

   Тепер оголошення тут, у style.css, який підключається на кожній
   сторінці. Один префікс df- на все: селектори .hero, .nav, .btn
   є майже в кожній батьківській темі.
   ───────────────────────────────────────────────────────────── */

.df-root{
  --df-night-0:#060A24;
  --df-night-1:#0B1136;
  --df-gold:#C9A961;
  --df-gold-lit:#E9D19B;
  --df-cream:#F2ECDC;
  --df-display:'Forum', 'Times New Roman', serif;
  --df-serif:'Playfair Display', Georgia, serif;
  --df-ui:'Manrope', system-ui, -apple-system, sans-serif;
  --df-shell:1320px;
  --df-beat:4s;                 /* темп маху крил */

  position:relative;
  z-index:10;
  color:var(--df-cream);
  font-family:var(--df-ui);
}

.df-root *,
.df-root *::before,
.df-root *::after{box-sizing:border-box}

/* ─────────────────────────────────────────────────────────────
   Вихід за межі контейнера.

   Блокова тема кладе вміст сторінки у вузьку колонку (contentSize).
   Для звичайного тексту це правильно — рядок не має бути надто
   довгим. Але перший екран і сітка карт малювалися на всю ширину
   вікна, і в колонці 760px вони ламаються.

   Прийом: розтягнути блок на всю ширину вікна незалежно від того,
   у якому контейнері він лежить. 50% — центр батька, 50vw —
   половина вікна; різниця дає зсув до лівого краю екрана.
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   Порядок шарів.

   Шари неба лежать усередині героя і позиціонуються відносно нього,
   а не вікна. Доти, доки вони були position:fixed з inset:0, вони
   накривали всю сторінку: решта блоків мала z-index:auto й опинялася
   під ними — присутня в коді, з висотою, але зафарбована фоном.
   ───────────────────────────────────────────────────────────── */

.df-bleed{position:relative;overflow:hidden}

.df-root .df-sky,
.df-root .df-stars{position:absolute;inset:0}

/* На головній роль H1 виконує заголовок героя. Заголовок сторінки
   від теми — це другий H1 на тій самій сторінці, чого бути не має. */
body.home .wp-block-post-title{display:none}

/* ─────────────────────────────────────────────────────────────
   Одна шапка замість двох.

   Перший екран несе власне меню всередині df-header. Шапка
   блокової теми при цьому нікуди не дівається, і зверху виходить
   два меню поспіль плюс порожня смуга над героєм.

   Ховаємо шапку теми тільки на головній. На сторінках карт і
   карти дня вона потрібна — там свого меню немає.
   ───────────────────────────────────────────────────────────── */

body.home > .wp-site-blocks > header.wp-block-template-part,
body.home .wp-site-blocks > header{
  display:none;
}

/* Розтягування на всю ширину.

   Тут ТІЛЬКИ елементи звичайного потоку. Шари .df-sky і .df-stars
   сюди не входять: вони position:fixed з inset:0, тобто вже
   покривають вікно. Додавання їм width:100vw з від'ємним відступом
   зсувало їх праворуч і давало горизонтальну прокрутку. */

.df-bleed,
.df-cards-wrap{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* 100vw враховує ширину смуги прокрутки, а доступна ширина —
   ні. Різниця в 15–17 пікселів і дає горизонтальну прокрутку
   внизу вікна. Обрізаємо її на рівні сторінки. */
html,
body{overflow-x:hidden}

/* Шапку теми на головній сховано, але відступ під неї лишився.
   Прибираємо його, щоб герой починався від краю вікна. */
body.home .wp-site-blocks{padding-top:0}
body.home .wp-site-blocks > *:first-child{margin-top:0}
body.home .df-bleed{margin-top:0}

/* Сітка карт розтягнулася на все вікно — повертаємо їй поля,
   інакше карти липнуть до країв екрана. */
.df-cards-wrap{padding-left:40px;padding-right:40px}

@media (max-width:760px){
  .df-cards-wrap{padding-left:18px;padding-right:18px}
}

/* Меню в шапці не має переноситися на два рядки */
.df-nav a{white-space:nowrap}

/* ─────────────────────────────────────────────────────────────
   Підстраховка на темне тло.

   Кольори всього сайту задає theme.json. Але якщо плагін або
   налаштування батьківської теми перекриють його, компоненти
   лишаться кремовим по білому — тобто невидимими. Тому кожен
   блок df-root несе власне тло.
   ───────────────────────────────────────────────────────────── */

.df-cs,
.df-cod,
.df-faq{
  background:var(--df-night-0,#060A24);
  padding:34px 30px;
}

@media (max-width:760px){
  .df-cs,
  .df-cod,
  .df-faq{padding:24px 18px}
}

/* Шапки теми на головній немає, тож віднімати її висоту не треба. */
body.home .df-hero{min-height:calc(100svh - 120px)}

/* Прибираємо відступи, які блокова тема ставить першому блоку. */
body.home .wp-site-blocks > :first-child{margin-block-start:0}
body.home .wp-block-post-content > :first-child{margin-block-start:0}

/* ─────────────────────────────────────────────────────────────
   Блок заголовка від шаблону сторінки.

   Twenty Twenty-Four кладе в <main> окремий контейнер:
       spacer (spacing--50) → h1.wp-block-post-title → spacer (spacing--30)
   На головній заголовок не потрібен — його роль виконує H1 героя,
   а два H1 на сторінці бути не має. Ховати самі spacer'и мало:
   вони не сусідні, між ними стоїть заголовок. Прибираємо контейнер
   цілком. Вміст сторінки лежить окремо, у .wp-block-post-content,
   тож він не постраждає.
   ───────────────────────────────────────────────────────────── */

body.home main > .is-layout-constrained:first-child{display:none}

/* Бічні поля контейнера вмісту на головній не потрібні:
   усі блоки там і так на всю ширину. */
body.home .wp-block-post-content{padding-left:0;padding-right:0}