/*
Theme Name:   Arkhe Child
Theme URI:    https://wordpress.org/themes/arkhe/
Description:  Дочерняя тема для Arkhe.
Author:       Ritualnoe
Author URI:   https://твойсайт.ру
Template:     arkhe
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  arkhe-child
*/


/* Сброс стилей и базовые настройки */
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html,
body {
	/* color-scheme: only light; */
	font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
}


body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	line-height: 1.6;
	background: var(--background-a) !important;
}

/* Глобальные переменные */
:root {
	color-scheme: light;
	--background-a: #f5f5f5;
	--blue: #0077ED;
	--green: #00704a;
	--white: #ffffff;
	--black: #000000;
	--h-title: #000000;
	--light-grey: #f9f9f9;
	--mid-grey: #e1e1e1;
	--grey: #cccccc;
	--mid-dark-grey: #7e7e7e;
	--dark-grey: rgba(0, 0, 0, 0.5);
	--hr: 1px solid rgba(0,0,0,0.1);
	--folder: #f1eee4;
	--yellow: #ffcc00;
	--shadow: 0px 0px 30px rgba(125, 125, 125, 0.1);
	--radius-block: 30px;
	--mid-radius-block: 20px;
	--mini-radius-block: 15px;
	--radius-btn: 100px;
	--btn-gradient: linear-gradient(135deg, #1a9be6, #1a57e6);
	--btn-gradient-variant: linear-gradient(135deg, #ff5c4d 0, #eb469f 26.56%, #8341ef 75%, #3f68f9 100%);
	--btn-gradient-hover: #1a57e6;
	--btn-shadow: 0px 15px 25px rgba(125, 125, 125, 0.2);
	--btn-shadow-blue: 0 15px 25px 0 rgba(26, 87, 230, 0.25);
	--footer: #164650;
	--text-color: rgba(0, 0, 0, 0.8);
}

.l-container {
	padding-left: 0;
	padding-right: 0;
	max-width: 100%;
}

.c-fixBtn {
	box-shadow: none;
}
.l-header__body, .l-footer__foot {
	background-color: var(--black);
	color: var(--grey);
}

.header {
	color: var(--h-title);
	text-align: center;
	margin: 0 auto;
	padding-top: 2em;
}
h1.header {
	font-size: 2rem;
}
h2.header {
	font-size: 1.5rem;
}

.header-gap {
	color: var(--h-title);
	text-align: center;
	margin: 1em auto;
}
h1.header-gap {
	font-size: 2rem;
}
h2.header-gap {
	font-size: 1.5rem;
}

.arrow {
	display: none;
}
@media (max-width: 1024px) {
	.arrow {
		/* display: inline-block; */
		all: unset;
	}
}
@media (max-width: 768px) {
	.arrow {
		/* display: inline-block; */
		all: unset;
	}
}
@media (max-width: 480px) {
	.arrow {
		/* display: inline-block; */
		all: unset;
	}
}

.frame {
	border: 2px solid var(--black);
}




.badge {
	display: inline-block;
	padding: .18em .5em;
	border: 1px solid #cbd5e1;
	border-radius: 1.5em;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap; /* предотвращает перенос текста */
	box-sizing: border-box;
	max-width: fit-content; /* ограничивает ширину по содержимому */
}

.social {
	border-color: transparent;
	color: transparent;
	background: transparent;
}

.popular {
	border-color: var(--blue);
	color: var(--white);
	background: var(--btn-gradient);
}

.vip {
	border-color: transparent;
	color: transparent;
	background: transparent;
}





/* Иконка телефона */
.mobile-phone-icon {
	/* Позиционирование */
	display: block;
	
	/* Блочная модель */
	width: 1.2em;
	height: 1.2em;
	margin-right: 0.6em;
	
	/* Оформление */
	color: #ffffff;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}









/* inner-text-effect.css */

/**
 * Заголовок с белым текстом, внутренним градиентом (серый → белый сверху вниз)
 * и эффектом "внутренней тени" снизу.
 *
 * Используется background-clip: text + mask-image для имитации внутренней тени.
 * Требования:
 *   - Родительский контейнер должен иметь фон (рекомендуется тёмный для контраста)
 *   - Текст остаётся доступным для скринридеров и поисковиков (SEO-friendly)
 *
 * Совместимость: поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge)
 * WCAG: контраст белого текста на тёмном фоне ≥ 4.5:1 — проходит AA/AAA
 * WordPress Codex: безопасный CSS, без !important, чистые селекторы
 */

.h-gradient-inner-shadow {
  /* Обязательно: текст должен быть прозрачным,
	 чтобы сквозь него был виден градиентный фон */
  color: transparent;

  /* Градиент: сверху серый (#888888), вниз — белый (#ffffff) */
  background: linear-gradient(to bottom, #888 0%, #ffffff 100%);

  /* Обрезаем фон по форме текста */
  -webkit-background-clip: text;
  background-clip: text;

  /* Делаем текст "прозрачным", чтобы показать фон */
  /* -webkit-text-fill-color: transparent;
  text-fill-color: transparent; */

  /* Дополнительно: добавляем лёгкую внутреннюю тень снизу через mask */
  /* Это создаёт визуальный эффект "затенения" в нижней части букв */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.1) 100%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.1) 100%);

  /* Убираем наследуемое подчёркивание или другие стили */
  text-decoration: none;

  /* Для лучшей читаемости на тёмных фонах — можно регулировать */
  font-weight: 700; /* или как у вас в макете */
  line-height: 1.2;
}

/* Адаптивность: шрифт масштабируется, эффект сохраняется */
@media (max-width: 768px) {
  .h-gradient-inner-shadow {
	font-size: clamp(1.8rem, 5vw, 3.5rem); /* пример адаптивного размера */
  }
}