/*
Theme Name: Modern Child: Night Garden
Template: modern
Description: Вечерний сад: глубокий тёмно-синий фон, карточки цвета слоновой кости, античное золото, шрифты Oswald и Roboto Slab. Записи — сетка из трёх колонок на всю ширину, картинка сверху, золотая метка рубрики.
Version: 1.0.0
Text Domain: modern-child
*/

/* ---------- Палитра: переопределяем переменные Modern ---------- */
:root {
	--ng-navy: #111A2E;
	--ng-navy-2: #18233B;
	--ng-ivory: #F2EBDD;
	--ng-gold: #C9A44C;
	--ng-gold-dark: #8A6D24;
	--ng-ink: #2A2F3A;
	--ng-head: 'Oswald', 'Arial Narrow', sans-serif;
	--ng-text: 'Roboto Slab', Georgia, serif;

	--color_accent: var(--ng-gold);
	--color_accent_text: var(--ng-navy);
	--color_header_background: var(--ng-navy);
	--color_header_text: var(--ng-ivory);
	--color_header_headings: var(--ng-gold);
	--color_intro_background: var(--ng-navy);
	--color_intro_text: var(--ng-ivory);
	--color_content_background: var(--ng-ivory);
	--color_content_text: var(--ng-ink);
	--color_content_headings: var(--ng-navy);
	--color_footer_background: #0B1222;
	--color_footer_text: #A9A28F;
	--color_footer_headings: var(--ng-gold);
	--background_color: var(--ng-navy);
}

html, body { background: var(--ng-navy); }
body, button, input, select, textarea {
	font-family: var(--ng-text);
}
.site { color: var(--ng-ivory); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .entry-title, .page-title, .site-title,
.main-navigation, .menu-toggle, .widget-title, .wp-block-heading {
	font-family: var(--ng-head);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .04em;
}
a { color: var(--ng-gold-dark); }
.posts .entry, .sidebar .widget, .site-footer, .site-header-navigation { box-shadow: none; }

/* ---------- Шапка: тёмно-синяя полоса, золотое название слева, меню справа ---------- */
.site-header {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.6rem 1.5rem;
	border-bottom: 1px solid rgba(201, 164, 76, .35);
}
.site-header::after { content: none; }
.site-header-content { order: -1; background: none; margin: 0; padding: 0; }
.site-header-navigation, .site-header-navigation::before { background: none; border: 0; position: static; width: auto; }
.site-header-navigation::before { content: none; }
.site-header-inner { padding: 0; max-width: none; width: auto; margin: 0; }
.site-header-content .site-header-inner { padding: 0; }
.site-branding { margin: 0; padding: 0; border: 0; }
.site-branding::after { content: none; }
.site-title {
	margin: 0;
	font-size: 1.9rem;
	line-height: 1.1;
	letter-spacing: .12em;
	color: var(--ng-gold);
}
.site-title a { color: inherit; text-decoration: none; }
.main-navigation-container .menu-primary { display: flex; margin: 0; padding: 0; }
.main-navigation-container .menu-primary > li > a {
	display: inline-block;
	padding: .45em 1.2em;
	border: 1px solid var(--ng-gold);
	color: var(--ng-ivory);
	font-size: .95rem;
	letter-spacing: .14em;
	text-decoration: none;
	transition: background .2s, color .2s;
}
.main-navigation-container .menu-primary > li > a:hover,
.main-navigation-container .menu-primary > li > a:focus {
	background: var(--ng-gold);
	color: var(--ng-navy);
}
.main-navigation-container .menu-primary > li > a::after { content: none; }

/* ---------- Сетка записей: три колонки карточек цвета слоновой кости ---------- */
.no-widgets-sidebar .site-content-inner,
.site-content-inner { width: auto; max-width: 1200px; margin: 0 auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.blog .content-area, .archive .content-area, .search .content-area { width: 100%; max-width: none; padding: 0; float: none; }
.posts, .posts-layout-columns-3 .posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
	margin: 0 0 3rem;
}
.posts .entry, .posts-layout-columns-3 .posts .entry {
	width: auto !important; /* у родителя ширина колонки задана через calc() */
	margin: 0;
	padding: 0;
	background: var(--ng-ivory);
	color: var(--ng-ink);
	border: 0;
	outline: 1px solid transparent;
	outline-offset: 6px;
	transition: outline-color .25s, transform .25s;
}
.posts .entry:hover, .posts .entry:focus-within {
	outline-color: var(--ng-gold);
	transform: translateY(-3px);
}
.posts .entry-media { margin: 0; }
.posts .entry-media .post-thumbnail { margin: 0; }
.posts .entry-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.posts .entry-content-container { padding: 0 1.6rem 1.6rem; }
.posts .ng-cat {
	align-self: flex-start;
	margin: -.85rem 0 1rem;
	padding: .3em .9em;
	background: var(--ng-gold);
	color: var(--ng-navy);
	font-family: var(--ng-head);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .16em;
	line-height: 1.4;
	position: relative;
}
.posts .entry:not(.has-post-thumbnail) .ng-cat { margin-top: 1.6rem; }
.posts .entry-header { margin-bottom: .8rem; }
.posts .entry-title { font-size: 1.35rem; line-height: 1.25; margin: 0; }
.posts .entry-title a { color: var(--ng-navy); text-decoration: none; }
.posts .entry-title a:hover { color: var(--ng-gold-dark); }
.posts .entry-summary { font-size: .95rem; line-height: 1.65; color: var(--ng-ink); }
.posts .link-more { margin-top: 1rem; }
.posts .link-more a {
	font-family: var(--ng-head);
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--ng-gold-dark);
	text-decoration: none;
	border-bottom: 1px solid var(--ng-gold);
}

/* H1 главной (mu-plugin portfolio-headings) — на всю ширину сетки */
.portfolio-home-h1 {
	grid-column: 1 / -1;
	margin: 3rem 0 .5rem;
	padding-bottom: 1.2rem;
	font-family: var(--ng-head);
	font-weight: 500;
	font-size: clamp(1.6rem, 3.4vw, 2.6rem);
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ng-ivory);
	border-bottom: 1px solid rgba(201, 164, 76, .5);
}
.portfolio-home-h1::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin-top: 1.2rem;
	background: var(--ng-gold);
	position: relative;
	top: calc(1.2rem + 1px);
}

/* Пагинация */
.pagination { margin: 0 0 3rem; text-align: center; font-family: var(--ng-head); }
.pagination a, .pagination span {
	display: inline-block;
	min-width: 2.4em;
	padding: .4em .7em;
	margin: .2em;
	border: 1px solid rgba(201, 164, 76, .5);
	background: transparent;
	color: var(--ng-ivory);
	text-decoration: none;
}
.pagination .current, .pagination a:hover { background: var(--ng-gold); color: var(--ng-navy); border-color: var(--ng-gold); }

/* ---------- Запись ---------- */
.intro-container { background: var(--ng-navy); }
.intro-title { font-family: var(--ng-head); color: var(--ng-ivory); }
/* Размытая обложка за шапкой не нужна: фото записи и так стоит в начале статьи */
.intro-media { display: none; }
.intro-container { min-height: 0; }
.is-singular .content-area { background: var(--ng-ivory); color: var(--ng-ink); }
.is-singular .content-area h2, .is-singular .content-area h3 { color: var(--ng-navy); }
.entry-content a { color: var(--ng-gold-dark); }

/* ---------- Подвал ---------- */
.site-footer { background: #0B1222; color: #A9A28F; border-top: 1px solid rgba(201, 164, 76, .35); }
.site-info-inner, .site-footer .site-info-inner { padding-top: 2rem; padding-bottom: 2rem; }
.site-info { width: 100%; text-align: center; font-size: .9rem; letter-spacing: .06em; }

/* ---------- Адаптив ---------- */
@media (max-width: 960px) {
	.posts, .posts-layout-columns-3 .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (max-width: 600px) {
	.site-header { padding: 1.1rem 1rem; }
	.site-title { font-size: 1.35rem; letter-spacing: .08em; }
	.main-navigation-container .menu-primary > li > a { padding: .35em .9em; font-size: .85rem; }
	.site-content-inner { padding-left: 1rem; padding-right: 1rem; }
	.posts, .posts-layout-columns-3 .posts { grid-template-columns: 1fr; }
	.portfolio-home-h1 { margin-top: 2rem; }
}