/**
 * Клиентская часть сайта: оформление поверх Cassiopeia.
 *
 * Палитра и приёмы взяты из панели учёта (templates/rostsayt): тёмно-коричневый
 * градиент шапки, золотой акцент, тёплый фон страницы. Витрина и рабочие экраны
 * должны выглядеть частями одного сайта.
 *
 * Здесь только вид — ни одного текста: всё, что читает посетитель, приходит
 * из админки. Файл user.css подключается шаблоном последним, поэтому правки
 * переживают обновление Joomla.
 */

:root {
	/* Те же значения, что в templates/rostsayt/css/template.css */
	--arctic-brown: #3A260D;
	--arctic-brown-dark: #2a1b08;
	--arctic-gold: #FFD364;
	--arctic-gold-dark: #e8b73f;
	--arctic-gold-deep: #8a6413;
	--arctic-ink: #2b2118;
	--arctic-muted: #6f6156;
	--arctic-surface: #f2ece4;
	--arctic-page: #faf7f4;
	--arctic-radius: 1rem;
	--arctic-shadow: 0 .5rem 1.5rem rgb(58 38 13 / 12%);

	/* Cassiopeia строит из этих переменных кнопки, а ссылки — из --link-color-rgb. */
	--cassiopeia-color-primary: var(--arctic-brown);
	--cassiopeia-color-link: var(--arctic-gold-deep);
	--cassiopeia-color-hover: var(--arctic-brown);
	--link-color: var(--arctic-gold-deep);
	--link-color-rgb: 138, 100, 19;
	--link-hover-color: var(--arctic-brown);
	--link-hover-color-rgb: 58, 38, 13;

	--bs-body-color: var(--arctic-ink);
	--bs-border-radius: .75rem;
}

body.site {
	font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	background: var(--arctic-page);
	color: var(--arctic-ink);
}

/* Золотая кнопка — та же, что в панели и в окне входа. */
.btn-primary {
	--bs-btn-color: var(--arctic-ink);
	--bs-btn-bg: var(--arctic-gold);
	--bs-btn-border-color: var(--arctic-gold);
	--bs-btn-hover-color: var(--arctic-ink);
	--bs-btn-hover-bg: var(--arctic-gold-dark);
	--bs-btn-hover-border-color: var(--arctic-gold-dark);
	--bs-btn-active-color: var(--arctic-ink);
	--bs-btn-active-bg: #dcaa32;
	--bs-btn-active-border-color: #dcaa32;
	--bs-btn-disabled-bg: var(--arctic-gold);
	--bs-btn-disabled-border-color: var(--arctic-gold);
	--bs-btn-disabled-color: var(--arctic-ink);
}

.btn-outline-primary {
	--bs-btn-color: var(--arctic-brown);
	--bs-btn-border-color: rgb(58 38 13 / 35%);
	--bs-btn-hover-color: var(--arctic-ink);
	--bs-btn-hover-bg: var(--arctic-gold);
	--bs-btn-hover-border-color: var(--arctic-gold);
	--bs-btn-active-color: var(--arctic-ink);
	--bs-btn-active-bg: var(--arctic-gold);
	--bs-btn-active-border-color: var(--arctic-gold);
}

.btn {
	--bs-btn-border-radius: .625rem;
	font-weight: 500;
}

/* Cassiopeia красит кнопки не переменными Bootstrap, а прямыми свойствами,
   поэтому цвет приходится задавать так же напрямую. */
.btn-primary,
.btn-primary:disabled {
	color: var(--arctic-ink);
	background-color: var(--arctic-gold);
	border-color: var(--arctic-gold);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	color: var(--arctic-ink);
	background-color: var(--arctic-gold-dark);
	border-color: var(--arctic-gold-dark);
}

.btn-outline-primary {
	color: var(--arctic-brown);
	background-color: transparent;
	border-color: rgb(58 38 13 / 35%);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
	color: var(--arctic-ink);
	background-color: var(--arctic-gold);
	border-color: var(--arctic-gold);
}

.arctic-hero .btn-outline-primary {
	color: #fff;
	border-color: rgb(255 211 100 / 45%);
}

.arctic-hero .btn-outline-primary:hover,
.arctic-hero .btn-outline-primary:focus {
	color: var(--arctic-ink);
	background-color: var(--arctic-gold);
	border-color: var(--arctic-gold);
}

.form-control:focus,
.form-select:focus {
	border-color: var(--arctic-gold-dark);
	box-shadow: 0 0 0 .2rem rgb(255 211 100 / 35%);
}

/* --- Шапка ------------------------------------------------------------- */

.container-header {
	background: linear-gradient(160deg, var(--arctic-brown) 0%, var(--arctic-brown-dark) 100%);
	color: #fff;
}

/* Кнопка «Личный кабинет» (гостя она уводит на вход, сотрудника — в панель
   производства) приходит из позиции topbar, а Cassiopeia отдаёт этой позиции
   отдельную полосу над шапкой. Полоса ради одной кнопки — потерянная строка,
   поэтому шапку собираем сеткой: первая строка держит логотип у левого края и
   кнопку у правого, меню остаётся ниже. Пустой контейнер не должен занимать
   место, а пробелы внутри мешают :empty, поэтому всё включается через :has(a). */
.container-topbar {
	display: none;
}

/* Колонка content повторяет ширину .grid-child (1320px по центру), поэтому
   кнопка встаёт ровно по краю содержимого страницы, а не экрана. */
.container-header:has(.container-topbar a) {
	display: grid;
	grid-template-columns:
		[full-start] minmax(0, 1fr)
		[content-start] minmax(0, 1320px) [content-end]
		minmax(0, 1fr) [full-end];
	align-items: center;
}

.container-header:has(.container-topbar a) > * {
	grid-column: content;
}

/* Логотип и кнопка делят одну ячейку и расходятся по её углам. Логотип занимает
   всю ширину, поэтому кнопку поднимаем над ним — иначе по ней не попасть. */
.container-header:has(.container-topbar a) > .container-topbar,
.container-header:has(.container-topbar a) > .grid-child:has(.navbar-brand) {
	grid-row: 1;
}

.container-topbar:has(a) {
	display: flex;
	align-items: center;
	gap: .5rem;
	justify-content: flex-end;
	justify-self: end;
	position: relative;
	z-index: 1;
	padding: .5em;   /* тот же отступ, что у .container-header .grid-child */
}

/* На узком экране в строке с логотипом стоят и кнопка кабинета, и корзина.
   Надпись кнопки прячем, оставляя значок: строка перестаёт распирать страницу,
   а название остаётся у скринридеров. */
@media (width <= 480px) {
	.container-topbar .arctic-sitelink span {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.container-topbar .arctic-sitelink {
		padding-inline: .55rem;
	}
}

/* Ссылка вокруг знака — строчная, и знак стоит на базовой линии строки: он выше
   неё и свисает вниз, из-за чего логотип оказывается ниже кнопки в той же
   строке шапки. Флексом высота ссылки становится высотой знака, и середины
   совпадают. */
.container-header .navbar-brand .brand-logo {
	display: flex;
	align-items: center;
}

.container-header .navbar-brand img.logo,
.container-header .brand-logo img {
	height: 2.6rem;
	width: auto;
}

/* На узком экране логотип и кнопка делят ту же строку: знак чуть меньше, чтобы
   они не наехали друг на друга. */
@media (width <= 575.98px) {
	.container-header .navbar-brand img.logo,
	.container-header .brand-logo img {
		height: 2.1rem;
	}
}

.container-header .mod-menu {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.container-header .mod-menu > li > a {
	display: inline-block;
	padding: .55rem .9rem;
	color: rgb(255 255 255 / 82%);
	font-weight: 500;
	text-decoration: none;
	border-radius: .625rem;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus {
	background: rgb(255 211 100 / 14%);
	color: var(--arctic-gold);
}

.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li.active > a {
	background: var(--arctic-gold);
	color: var(--arctic-ink);
}

/* --- Сетка страницы ---------------------------------------------------- */

/* Сетка Cassiopeia заводит строку под каждую позицию шаблона, поэтому общий
   row-gap раздувает пустоты между блоками. Отступы задаём самим блокам. */
.site-grid {
	row-gap: 0;
}

.site-grid > .container-component,
.site-grid > .container-main-top,
.site-grid > .container-main-bottom,
.site-grid > .container-bottom-a,
.site-grid > .container-bottom-b,
.site-grid > .container-top-a,
.site-grid > .container-top-b {
	padding-block: clamp(1.75rem, 3.5vw, 3rem);
}

.site-grid > .container-banner {
	padding-block: 0;
}

/* Модули на главной Joomla заворачивает в «карточку» с рамкой. Блокам во всю
   ширину страницы она мешает: оставляем от карточки только заголовок. */
.site-grid .card {
	background: none;
	border: 0;
	border-radius: 0;
}

.site-grid .card > .card-body {
	padding: 0;
}

.site-grid .moduletable > h3,
.site-grid .card > .card-header,
.site-grid .card > h3 {
	margin: 0 0 1.25rem;
	padding: 0;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
	background: none;
	border: 0;
}

.site-grid .moduletable > h3::after,
.site-grid .card > .card-header::after,
.site-grid .card > h3::after {
	content: "";
	display: block;
	width: 3rem;
	height: .1875rem;
	margin-top: .625rem;
	background: var(--arctic-gold);
	border-radius: 1rem;
}

/* Два блока подряд в одной позиции не должны слипаться. */
.site-grid .card + .card {
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* Блок акций стоит на подложке — так страница читается разделами. */
.container-bottom-a {
	position: relative;
}

.container-bottom-a::before {
	content: "";
	position: absolute;
	inset: 0 -100vw;
	z-index: -1;
	background: var(--arctic-surface);
}

/* --- Первый экран ------------------------------------------------------ */

/* Тот же фон, что на экране входа в панель. */
.arctic-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(3rem, 8vw, 6.5rem) clamp(1.25rem, 5vw, 3rem);
	color: #fff;
	background-color: #1d1306;
	background-image:
		radial-gradient(60rem 40rem at 50% -15%, rgb(255 211 100 / 18%), transparent 65%),
		linear-gradient(160deg, var(--arctic-brown) 0%, #1d1306 100%);
	border-radius: 0;
}

.arctic-hero--image {
	background-image: none;
}

.arctic-hero__inner {
	position: relative;
	max-width: 1320px;   /* та же ширина, что у остального содержимого страницы */
	margin-inline: auto;
	padding-inline: 0;
}

.arctic-hero--left .arctic-hero__inner > * {
	max-width: 44rem;
}

.arctic-hero__eyebrow {
	color: var(--arctic-gold);
	opacity: 1;
}

.arctic-hero__heading {
	font-weight: 700;
	letter-spacing: -.01em;
}

.arctic-hero .btn-outline-primary {
	--bs-btn-color: #fff;
	--bs-btn-border-color: rgb(255 211 100 / 45%);
	--bs-btn-hover-bg: var(--arctic-gold);
	--bs-btn-hover-color: var(--arctic-ink);
	--bs-btn-hover-border-color: var(--arctic-gold);
}

/* --- Карточки товаров и новостей --------------------------------------- */

.arctic-card {
	background: #fff;
	border-color: rgb(58 38 13 / 12%);
	border-radius: var(--arctic-radius);
	transition: box-shadow .2s ease, transform .2s ease;
}

.arctic-card:hover {
	box-shadow: var(--arctic-shadow);
	transform: translateY(-.125rem);
}

.arctic-card__media {
	background: var(--arctic-surface);
}

.arctic-card__placeholder svg {
	width: 45%;
	height: auto;
	color: var(--arctic-brown);
	opacity: .3;
}

.arctic-card__price-now {
	color: var(--arctic-ink);
}

.arctic-card__badge {
	color: var(--arctic-ink);
	background: var(--arctic-gold);
}

.arctic-catalog__nav {
	color: var(--arctic-brown);
	border-color: rgb(58 38 13 / 15%);
	box-shadow: var(--arctic-shadow);
}

.arctic-news__media {
	border-radius: var(--arctic-radius);
}

.arctic-news__title a {
	color: var(--arctic-ink);
}

.arctic-news__title a:hover {
	color: var(--arctic-gold-deep);
}

/* --- Материалы: каталог, блог, страницы -------------------------------- */

/* Cassiopeia раскладывает записи колонками (masonry); ровная сетка читается
   лучше и не оставляет висящих карточек. */
.com-content-category-blog .com-content-category-blog__items,
.com-content-category-blog .blog-items {
	display: grid;
	gap: 1.5rem;
	columns: auto;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.com-content-category-blog .blog-item {
	break-inside: auto;
	margin: 0;
}

.blog-items .blog-item {
	padding: 1.25rem;
	background: #fff;
	border: 1px solid rgb(58 38 13 / 12%);
	border-radius: var(--arctic-radius);
}

.blog-items .blog-item .page-header h2 {
	font-size: 1.25rem;
	margin-bottom: .5rem;
}

.blog-items .blog-item img {
	border-radius: .75rem;
}

.com-content-article,
.com-contact {
	max-width: 48rem;
}

.com-content-article__body,
.com-contact__container {
	font-size: 1.0625rem;
	line-height: 1.7;
}

.com-contact .contact-form {
	margin-top: 2rem;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid rgb(58 38 13 / 12%);
	border-radius: var(--arctic-radius);
}

/* --- Поля товара на странице материала --------------------------------- */

.com-content-article .fields-container {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background: var(--arctic-surface);
	border-radius: var(--arctic-radius);
}

.com-content-article .fields-container .field-entry {
	display: flex;
	gap: .5rem;
	padding-block: .25rem;
}

.com-content-article .fields-container .field-label {
	color: var(--arctic-muted);
	font-weight: 500;
}

.com-content-article .fields-container .field-value {
	font-weight: 600;
}

/* Списки материалов: заголовки не должны выглядеть ссылкой в тексте. */
.blog-items .blog-item h2 a,
.com-content-category-blog__item h2 a {
	color: var(--arctic-ink);
	text-decoration: none;
}

.blog-items .blog-item h2 a:hover,
.com-content-category-blog__item h2 a:hover {
	color: var(--arctic-gold-deep);
}

/* --- Окно заказа звонка ------------------------------------------------- */

.modal-content {
	border: 0;
	border-radius: var(--arctic-radius);
	box-shadow: 0 1.5rem 3rem rgb(43 33 24 / 22%);
}

.modal-header {
	border-bottom: 0;
	padding-bottom: .5rem;
}

/* --- Подвал ------------------------------------------------------------- */

.container-footer {
	margin-top: clamp(3rem, 6vw, 5rem);
	background: linear-gradient(160deg, var(--arctic-brown) 0%, var(--arctic-brown-dark) 100%);
	color: rgb(255 255 255 / 78%);
}

.container-footer a {
	color: var(--arctic-gold);
}

.back-to-top-link {
	color: var(--arctic-ink);
	background: var(--arctic-gold);
}