/*
Theme Name: GreenShift Child
Theme URI: https://example.com/
Description: Дочерняя тема для GreenShift
Author: Ilia Volkov
Author URI: https://example.com/
Template: greenshift
Version: 1.0
Text Domain: greenshift-child
*/
/*
 Theme Name:  Greenshift Child
 Theme URI:   https://alfee.su
 Description: Child theme for Greenshift. Put your custom CSS below.
 Author:      Your Name
 Version:     1.0.0
 Text Domain: greenshift-child
 Template:    greenshift
*/

/* Ваши кастомные стили ниже */
/* Дополнительные стили пиши ниже */

/* HERO: монетка. Класс hero-coin назначен внешнему блоку «Столбцы» */
.hero-coin {
  position: relative;
  overflow: visible;
  /* Управление размером монетки и нижним отступом героя в одном месте */
  --coin-w: clamp(182px, 25vw, 448px);
  --coin-gap: clamp(40px, 5vw, 96px);   /* отступ снизу, чтобы секция «Собственная платформа» не прилипала */
  --coin-top: 0;                        /* при необходимости подвиньте монетку: напр. 8px, 2vh */
  min-height: calc(var(--coin-top) + var(--coin-w) + var(--coin-gap));
  padding-bottom: var(--coin-gap);
  margin-bottom: var(--coin-gap);       /* внешний отступ перед следующей секцией */
}

/* Монетка: абсолютное позиционирование внутри hero-coin, прижата к правому краю окна */
.hero-coin img.wp-image-33 {
  position: absolute !important;
  top: var(--coin-top) !important;                 /* старт на уровне «Ламповый блог» */
  right: calc((100% - 100vw) / 2) !important;      /* смещаем от края контейнера к правому краю окна */
  width: var(--coin-w) !important;
  height: auto !important;
  transform: none !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Дополнительно гарантируем отступ у следующего блока */
.hero-coin + * {
  margin-top: var(--coin-gap) !important;
}

/* Header и Footer должны быть видны */
.wp-site-blocks > .wp-block-template-part[area="header"],
.wp-site-blocks > .wp-block-template-part[area="footer"],
header.wp-block-template-part,
footer.wp-block-template-part,
.wp-site-blocks > header,
.wp-site-blocks > footer,
header,
footer {
  position: relative;
  z-index: 10;
}

/* Базовые цвета сайта */
:root{
  --site-text: #dae0e3;
  --site-accent: #2253ba;
  --site-bg: #0e0e14;
}

/* Применяем глобально текст и фон (фолбэк к theme.json) */
body,
.editor-styles-wrapper {
  color: var(--wp--preset--color--base-text, var(--site-text));
  background-color: var(--wp--preset--color--base-bg, var(--site-bg));
}

/* Синий для выделений */
mark, b, strong {
  color: #2253ba !important;
}

/* Убираем желтый фон у mark */
mark { background: transparent !important; }

/* В редакторе сайта показываем обычную разметку для монетки */
.editor-styles-wrapper .hero-coin img.wp-image-33,
.block-editor-page .hero-coin img.wp-image-33 {
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  width: auto !important;
  z-index: auto !important;
  pointer-events: auto !important;
}

/* Subtitle: серый подзаголовок под заголовком */
.is-style-subtitle {
  color: rgba(218, 224, 227, 0.72); /* основываемся на #dae0e3 */
  margin-top: 0.5rem;
  margin-bottom: 0;
  line-height: 1.5;
  font-weight: 400;
}

/* Graphik LCG глобально: используем пресет из theme.json, иначе — системный стек */
:root { --_graphik-stack: "Graphik LCG", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

body,
.editor-styles-wrapper {
  font-family: var(--wp--preset--font-family--graphik-lcg, var(--_graphik-stack));
}

h1, h2, h3, h4, h5, h6, .wp-block-heading {
  font-family: var(--wp--preset--font-family--graphik-lcg, var(--_graphik-stack));
}

/* Переопределяем утилиты темы (например, has-inter-font-family) на Graphik */
.has-inter-font-family,
.has-system-font-family,
.has-sans-serif-font-family {
  font-family: var(--wp--preset--font-family--graphik-lcg, var(--_graphik-stack)) !important;
}

/* Глобальный стек шрифтов: используем пресет из theme.json, иначе — системные */
:root {
  --_graphik-stack: "Graphik LCG", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
  font-family: var(--wp--preset--font-family--graphik-lcg, var(--_graphik-stack));
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--wp--preset--font-family--graphik-lcg, var(--_graphik-stack));
}