/*
Theme Name: Astra Child
Template: astra
*/
.ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
    width: 20px;
    height: 20px;
    fill: #d59f49 !important;
}

/* === Mobile: всегда показываем моб. меню (только в #ast-mobile-header), вертикально на узких экранах === */
@media (max-width: 767px) {
  /* Показываем мобильный контейнер (тема часто скрывает его) */
  #ast-mobile-header .ast-mobile-header-content {
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Список меню — вертикально */
  #ast-mobile-header .main-navigation > .main-navigation, /* safety */
  #ast-mobile-header .main-navigation > ul#ast-hf-mobile-menu,
  #ast-mobile-header .main-navigation .main-header-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 12px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background: #FCF9ED !important;
  }

  /* Пункты меню — карточки с обводкой */
  #ast-mobile-header .main-navigation ul#ast-hf-mobile-menu > li.menu-item {
    display: block !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    margin: 0 !important;
  }

  /* Ссылки — занимают всю карточку */
  #ast-mobile-header .main-navigation ul#ast-hf-mobile-menu > li.menu-item > a {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
    color: inherit !important;
    line-height: 1.2 !important;
	padding-left: 22%;
  }

  /* Подменю — показываем как вложенный поток */
  #ast-mobile-header .main-navigation ul#ast-hf-mobile-menu .sub-menu {
    position: static !important;
    display: block !important;
    margin-top: 8px !important;
    padding-left: 12px !important;
    box-shadow: none !important;
  }
}

/* === Landscape / larger mobile/tablet: делаем строки горизонтальными (не трогаем desktop) === */
@media (max-width: 1024px) and (orientation: landscape) {
  #ast-mobile-header .main-navigation > ul#ast-hf-mobile-menu,
  #ast-mobile-header .main-navigation .main-header-menu {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px !important;
  }

  #ast-mobile-header .main-navigation ul#ast-hf-mobile-menu > li.menu-item {
    display: inline-flex !important;
    margin: 6px 8px 6px 0 !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
  }

}
/* Скрыть кнопку гамбургера на мобильных */
@media (max-width: 1024px) {
  #ast-mobile-header .ast-mobile-menu-trigger,
  #ast-mobile-header .menu-toggle {
    display: none !important;
    visibility: hidden !important;
  }
}
 
 /* === Показываем соцсети на всех экранах === */
@media (max-width: 1024px) {
  [data-section="section-hb-social-icons-1"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  [data-section="section-hb-social-icons-1"] .ast-header-social-1-wrap {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px; /* расстояние между иконками */
  }
}

/* === НИКАКИХ изменений для десктопа: селекторы ограничены #ast-mobile-header и max-width медиа === */


/* H1 */
h1, .entry-content :where(h1) {
    font-size: 64px; /* desktop */
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.4em;
}

/* H2 */
h2, .entry-content :where(h2) {
    font-size: 48px; /* desktop */
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.3em;
}

/* H3 */
h3, .entry-content :where(h3) {
    font-size: 32px; /* desktop */
    font-weight: 600;
    font-family: 'Plus Jakarta Sans', sans-serif;
    line-height: 1.3em;
}

/* Tablet */
@media (max-width: 1024px) {
    h1, .entry-content :where(h1) { font-size: 48px; }
    h2, .entry-content :where(h2) { font-size: 36px; }
    h3, .entry-content :where(h3) { font-size: 28px; }
}

/* Mobile */
@media (max-width: 768px) {
    h1, .entry-content :where(h1) { font-size: 36px; }
    h2, .entry-content :where(h2) { font-size: 28px; }
    h3, .entry-content :where(h3) { font-size: 22px; }
}

/* Small mobile */
@media (max-width: 480px) {
    h1, .entry-content :where(h1) { font-size: 28px; }
    h2, .entry-content :where(h2) { font-size: 22px; }
    h3, .entry-content :where(h3) { font-size: 18px; }
}



.heading-underline {
    position: relative;
    display: inline-block; /* сохраняет ширину текста, а не 100% */
    text-align: center; /* на всякий случай */
}

.heading-underline::after {
    content: '';
    position: absolute;
    left: 50%;           /* центрируем линию */
    bottom: -5px;
    width: 0;
    height: 3px;
    background-color: #b5651d;
    border-radius: 2px;
    transition: width 1s ease;
    transform: translateX(-50%); /* сдвигаем линию в центр */
}

.heading-underline.visible::after {
    width: 100%;
}

.heading-underline.h1::after { height: 10px; }
.heading-underline.h2::after { height: 6px; }
.heading-underline.h3::after { height: 4px; }

/* =========================
   Targeted fix: only for the single block heading
   Place this at the BOTTOM of your custom CSS
   ========================= */
.center-heading-block h3,p,ul { text-align: left !important; }

/* 1) If you added the recommended class to the group block — use it.
   This centers the inner content and ensures the heading behaves like inline text. */
.wp-block-group.center-heading-block {
  text-align: center !important;    /* центрирует inline-block дочерние элементы */
}

/* 2) Target the heading inside that block very specifically */
.wp-block-group.center-heading-block > .wp-block-heading.heading-underline,
.wp-block-group.center-heading-block .wp-block-heading.heading-underline {
  display: inline-block !important;   /* ширина по тексту */
  margin: 0 auto !important;          /* центруем элемент как inline-block */
  position: relative !important;      /* требуется для ::after */
  text-align: center !important;
  float: none !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
}

/* 3) Псевдоэлемент — линия по ширине заголовка (inline-block) */
.wp-block-group.center-heading-block .wp-block-heading.heading-underline::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: -8px !important;
  height: 3px !important;
  width: 0 !important;                         /* базовое состояние */
  background-color: #b5651d !important;
  border-radius: 2px !important;
  transition: width 1s ease !important;
}

/* 4) Видимое состояние — растягиваем линию ровно под текст */
.wp-block-group.center-heading-block .wp-block-heading.heading-underline.visible::after,
.wp-block-group.center-heading-block .wp-block-heading.heading-underline.active::after {
  width: 100% !important; /* 100% от inline-block = ширина текста */
}

/* 5) Safety: если по каким-то причинам у тебя остался таргет по background-color,
   этот селектор будет работать только как резерв (но лучше использовать класс center-heading-block) */
.pravilo-page.has-background.is-layout-flow[style*="background-color:#fcf9ed"] > .wp-block-heading.heading-underline,
.pravilo-page.has-background.is-layout-flow[style*="background-color:#fcf9ed"] .wp-block-heading.heading-underline {
  /* не трогаем display — поведение определено выше через .center-heading-block */
}

/* 6) Убираем старые агрессивные правила (если они где-то остались),
   делаем их нейтральными — прописываем минимально-инвазивный override */
.center-heading-block > .wp-block-heading.heading-underline,
.center-heading-block .wp-block-heading.heading-underline {
  /* ничего лишнего здесь — всё управляется вверх по этим селекторам */
}

/* Сброс центрирования только для списков внутри конкретного блока */
.wp-block-group.center-heading-block ul,
.wp-block-group.center-heading-block ol {
  display: block !important;
  /* margin-left: 0 !important;        /* список прижмётся к левому краю контейнера */
  padding-left: 1.25em !important;  /* стандартный отступ для маркеров */
  text-align: left !important;
  list-style-position: outside !important;
}

.wp-block-group.center-heading-block li {
  text-align: left !important;
  margin: 0 0 .6em 0 !important;    /* вертикальный отступ между пунктами */
  padding: 0 0 0 2em!important;
}

.center-heading-block ul,
.center-heading-block ol {
    /*max-width: 600px;*/      /* комфортная ширина текста */
    margin-left: auto;     /* выравнивание по центру */
    margin-right: auto;    /* выравнивание по центру */
    text-align: left;      /* но сам текст — по левому */
    padding-left: 20px;    /* чтобы маркеры не упирались */
}



/* Сделать шапку фиксированной */
.site-header.header-main-layout-1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}

/* Чтобы контент страницы не прятался под шапкой, добавим отступ */
.ast-main-header-wrap + .site-content {
  margin-top: calc(var(--ast-global-header-height, 60px));
}

/* Тень / эффект при скролле (опционально) */
.site-header.header-main-layout-1 {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: box-shadow 0.3s ease;
}

/* Убираем “absolute” из .main-header-bar или задаём фон */
.ast-theme-transparent-header .main-header-bar {
    /*background: rgba(255,255,255,0.95) !important;*/
	background:#F2ECD3 !important;
    transition: background 0.3s ease;
}

/* Область стилей теперь ограничена классом .pravilo-page */
.pravilo-page {}

/* --- Переменные темы (без изменения глобального body) --- */
.pravilo-page :root,
.pravilo-page {
  --bg-1: #f2ecd3;
  --bg-2: #fcf9ed;
  --accent: #b38b34;
  --text: #111827;
  --muted: #6b7280;
  --glass: rgba(255,255,255,0.5);
  --shadow: 0 8px 24px rgba(17,24,39,0.06);
  --card-radius: 14px;
  --container-max: 1200px;
  --transition: 240ms cubic-bezier(.2,.9,.3,1);
}

/* Подключать шрифт глобально нежелательно — если нужно, делай это в теме.
   Но если уже подключаешь в этом файле, оставь. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Merriweather:wght@400;700&display=swap');

/* --- Типографика для области pravilo (не трогая body темы) --- */
.pravilo-page {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* Контейнеры только внутри pravilo */
.pravilo-page .alignwide,
.pravilo-page .wp-block-group.alignwide { max-width: var(--container-max); margin:0 auto; padding:0 24px; box-sizing:border-box; }

/* Hero / Cover внутри правило — не применять к глобальным cover'ам темы */
.pravilo-page .wp-block-cover.alignfull { position: relative; overflow: visible; }
.pravilo-page .wp-block-cover__inner-container { display:flex; align-items:center; min-height:720px; padding: 80px 24px; }

/* Заголовки только внутри */
.pravilo-page .wp-block-heading.has-x-large-font-size {
  font-family: "Merriweather", Georgia, serif;
  font-weight:700;
  font-size:44px;
  letter-spacing: -0.02em;
  margin:0 0 18px;
}

/* CTA кнопка — scoped */
.pravilo-page .wp-block-button__link {
  background: linear-gradient(90deg, var(--accent), #d59f49) !important;
  color: #fff !important;
  padding: 12px 22px;
  border-radius: 12px;
  display:inline-block;
  text-decoration:none;
  box-shadow: 0 8px 26px rgba(179,139,52,0.18);
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  font-weight:600;
}
.pravilo-page .wp-block-button__link:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(179,139,52,0.18); opacity:0.98; }

/* Изображения и media-text внутри страницы */
.pravilo-page .wp-block-media-text__media img {
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  box-shadow: var(--shadow);
  transition: transform var(--transition), filter var(--transition);
  will-change: transform;
}
.pravilo-page .wp-block-media-text:hover .wp-block-media-text__media img { transform: translateY(-6px) scale(1.02); }

/* Card panels — локально 
.pravilo-page .card-panel {
  background: rgba(255,255,255,0.65);
  border-radius: var(--card-radius);
  padding: 28px;
  box-shadow: 0 6px 20px rgba(15,23,42,0.04);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.6);
}
*/
/* Не менять глобальные has-background — только внутри 
.pravilo-page .wp-block-group.has-background { background: transparent; padding: 48px 24px; }*/

/* Списки — не глобально, только внутри pravilo */
.pravilo-page .wp-block-list { list-style: none; padding-left:0; display:flex; flex-direction:column; gap:10px; }
.pravilo-page .wp-block-list li { position:relative; padding-left:36px; line-height:1.4; }
.pravilo-page .wp-block-list li:before {
  content: "";
  position:absolute;
  left:0;
  top:2px;
  width:22px;
  height:22px;
  border-radius:6px;
  background: linear-gradient(180deg, #fff 0%, rgba(0,0,0,0.04) 100%), var(--accent);
  box-shadow: 0 4px 12px rgba(179,139,52,0.14);
}

/* Contact columns scoped */
.pravilo-page #contact .wp-block-columns { max-width: var(--container-max); margin: 0 auto; padding: 40px 24px 80px; box-sizing:border-box; }
.pravilo-page #contact .wp-block-column { padding:0 12px; }

/* Reveal animation только внутри */
.pravilo-page .reveal { opacity:0; transform: translateY(12px); transition: opacity 520ms ease, transform 520ms ease; }
.pravilo-page .reveal.visible { opacity:1; transform:none; }

/* Responsive tweaks */
@media (max-width:920px) {
  .pravilo-page .wp-block-cover__inner-container { padding:48px 18px; }
  .pravilo-page .wp-block-heading.has-x-large-font-size { font-size:32px; }
  .pravilo-page .wp-block-media-text__media img { border-radius:12px; }
  .pravilo-page .wp-block-media-text { grid-template-columns: 1fr; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pravilo-page .wp-block-media-text__media img,
  .pravilo-page .wp-block-button__link,
  .pravilo-page .reveal { transition: none !important; transform: none !important; }
}

/* Орб и декоративные элементы — scoped */
.pravilo-page .decor-orb { position:absolute; right:6%; top:10%; width:120px; height:120px; border-radius:50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.4) 30%, rgba(179,139,52,0.08) 60%); filter: blur(6px); pointer-events:none; z-index:0; }

/* Focus styles — scoped */
.pravilo-page .wp-block-button__link:focus { outline: 3px solid rgba(179,139,52,0.22); outline-offset:4px; }

/* Доп. стили для эффектов — вставь в кастомный CSS (scoped внутри .pravilo-page если нужно) */

/* Reveal: задаём переходы (если у тебя уже есть — оставь, но убедись что duration есть) */
.pravilo-page .reveal,
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms cubic-bezier(.2,.9,.3,1), transform 520ms cubic-bezier(.2,.9,.3,1);
  will-change: opacity, transform;
}

/* visible state */
.pravilo-page .reveal.visible,
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Images: initial slight scale, smooth transform, will be given .scale-in when revealed */
.pravilo-page img.will-scale,
img.will-scale {
  transform: scale(0.985);
  transition: transform 700ms cubic-bezier(.2,.9,.3,1), filter 520ms ease, opacity 520ms ease;
  will-change: transform;
  backface-visibility: hidden;
}

/* when revealed -> scale up slightly to create 'pop' */
.pravilo-page img.scale-in,
img.scale-in {
  transform: scale(1.02);
}

/* decorative orb baseline (should exist already) — ensure smooth transform */
.pravilo-page .decor-orb,
.decor-orb {
  transition: transform 600ms cubic-bezier(.2,.9,.3,1);
  will-change: transform;
  pointer-events: none;
}

/* subtle shadow and glow for orb */
.pravilo-page .decor-orb {
  box-shadow: 0 18px 40px rgba(179,139,52,0.06);
}

/* small tweak: when reduced motion, disable transforms */
@media (prefers-reduced-motion: reduce) {
  .pravilo-page .reveal,
  .reveal,
  .pravilo-page img.will-scale,
  img.will-scale,
  .pravilo-page .decor-orb,
  .decor-orb {
    transition: none !important;
    transform: none !important;
  }
}

/* предотвращаем горизонтальную прокрутку и жёсткие переполнения */
html, body { max-width: 100%; overflow-x: hidden; }

/* контейнеры — адаптивная ширина 
.container, .site, .content, .page { width: 100%; max-width: 1200px; box-sizing: border-box; margin-left: auto; margin-right: auto; }*/

/* изображения и фоновые элементы */
img, .wp-block-image img, video, iframe { max-width: 100%; height: auto; display: block; }

/* отменяем жёсткие высоты (фиксированные) */
[class*="block"], .section, .hero { min-height: 0 !important; height: auto !important; }

/* плавный типографический масштаб, без использования vw для базового размера */
html { font-size: 16px; }
h1, h2, h3, p { font-size: clamp(1rem, 1rem + 0.5vw, 1.5rem); line-height: 1.35; }

/* пример — если список внутри центр-блока: выравниваем контент, но оставляем li слева */
.center-heading-block { text-align: center; }
.center-heading-block ul { text-align: left; display: inline-block; }

/* если где-то используется flex и центрирование «ломает» список — обеспечим нормальный поток */
.center-heading-block .wrap { display: block; }

/* === FORCE: показать мобильное меню в ландшафте и на планшетах === */
/* Берём целиком mobile header контейнер и UL с мобильным меню */
@media (max-width: 1024px) and (orientation: landscape),
       (max-width: 1024px) and (min-width: 768px) {
  /* Принудительно показываем мобильный header-контейнер */
  #ast-mobile-header,
  #ast-mobile-header .ast-mobile-header-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    clip: auto !important;
  }

  /* Конкретно ул: показываем и делаем горизонтально */
  #ast-mobile-header .main-navigation > ul#ast-hf-mobile-menu,
  #ast-mobile-header .main-navigation .main-header-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Элементы меню — не скрывать */
  #ast-mobile-header .main-navigation ul#ast-hf-mobile-menu > li.menu-item {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Убираем возможные inline translate/translateY, opacity, clip, pointer-events */
  #ast-mobile-header *,
  #ast-mobile-header *::before,
  #ast-mobile-header *::after {
    transform: none !important;
    -webkit-transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip: auto !important;
    pointer-events: auto !important;
  }
}

/* Ещё: покрываем телефоны, у которых ширина >767, но контент всё равно ведёт себя как mobile */
@media (min-width: 768px) and (max-width: 900px) and (orientation: landscape) {
  #ast-mobile-header .main-navigation > ul#ast-hf-mobile-menu {
    flex-direction: row !important;
  }
}

/* ========== Отступ для первого full cover — адаптивно по размерам ========== */
.top-block:first-of-type {
  /* дефолтный запас на случай, если ни одно медиа не сработает */
  margin-top: 72px !important;
}

/* Очень маленькие телефоны (до ~360px wide) — портрет */
@media (max-width: 359px) {
  .top-block:first-of-type 
  {
    margin-top: 500px !important; /* подставь свое нужное значение */
  }
}

/* Малые телефоны (360 — 479) */
@media (min-width: 360px) and (max-width: 479px) {
  .top-block:first-of-type {
    margin-top: 500px !important;
  }
}

/* Средние телефоны (480 — 767) */
@media (min-width: 480px) and (max-width: 767px) and (orientation: portrait) {
  .top-block:first-of-type {
    margin-top: 500px !important;
  }
}

/* Портрет на широких телефонах / маленьких планшетах (768 — 1024) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .top-block:first-of-type {
    margin-top: 28px !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    .top-block:first-of-type {
        margin-top: 370px !important;
    }
}

/* Ландшафт (ориентация landscape) — чаще всего хедер выше, ставим больше запас */
@media (max-width: 1024px) and (orientation: landscape) {
   .top-block:first-of-type {
    margin-top: 20px !important;
  }
}

/* Дополнительно: небольшая плавность при смене ориентации */
@media (max-width: 1024px) {
  .top-block:first-of-type {
    transition: margin-top .14s ease;
  }
}

@media (max-width: 896px) and (orientation: landscape) {
    .top-block:first-of-type {
        margin-top: 520px !important;
    }
}

/* 1) На телефонах и небольших планшетах — всегда стек (media над/под текстом) */

@media (max-width: 900px) {
  .praktika {
    display: flex !important;
    flex-direction: column !important;  
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
/*
  .praktika {
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .praktika img,video {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
    max-width: 100% !important;
  }

  .praktika {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
  }
*/
  /* Защита для заголовков и параграфов — чтобы не сжимались в одну строчку */
  .praktika h1,h2,h3,p {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
  }
}

/* 2) На «широких мобильных / планшетах в ландшафте» — ряд, но ограничим медиа по ширине/высоте */
@media (min-width: 901px) and (max-width: 1024px) and (orientation: landscape) {
  .praktika {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Ограничиваем пространство для медиа, чтобы оно не растягивало блок вертикально 
  .praktika {
    width: 38% !important;        /* можно подкорректировать: 35-45% 
    max-height: 240px !important; /* не даём медиa вырастать слишком высоко 
    overflow: hidden !important;
  }
*/
  /* .praktika img,
  .praktika video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
 /*
  .praktika {
    width: 62% !important;
    padding: 10px 14px !important;
  } */
}

/* 3) Защита от align-items:stretch у родителя, который мог растягивать высоту */
@media (max-width: 1024px) {
  .praktika
   {
    align-self: flex-start !important;
    min-height: 0 !important;
  }
}

/* 4) Если блок в редакторе имеет атрибут 50% для media, принудительно снимем его влияние на мобилях */
@media (max-width: 900px) {
  /* .praktika 
 {
    width: 100% !important;
  }
}
*/
@media (max-width: 1024px) and (orientation: landscape), (max-width: 1024px) and (min-width: 768px) {
    #ast-mobile-header *, #ast-mobile-header *::before, #ast-mobile-header *::after {
        transform: none !important;
        -webkit-transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        clip: auto !important;
        pointer-events: auto !important;
        text-align: center;
    }
}