/*
Theme Name: Stories Kadence Child
Theme URI: https://stories.petrosyan.tech/
Description: Update-safe editorial styling and media layout for Stories.
Author: Stories
Template: kadence
Version: 1.0.0
Text Domain: stories-kadence-child
*/

:root {
	--stories-ink: #13283d;
	--stories-ink-deep: #091827;
	--stories-coral: #e95b43;
	--stories-coral-dark: #c94430;
	--stories-cream: #fffaf2;
	--stories-line: rgba(19, 40, 61, 0.14);
	--stories-shadow: 0 16px 42px rgba(9, 24, 39, 0.10);
	--stories-radius: 20px;
}

/* Editorial masthead: compact enough for reading, distinctive at every size. */
#masthead,
#masthead .site-main-header-wrap .site-header-row-container-inner {
	background: rgba(255, 255, 255, 0.97);
}

#masthead {
	border-bottom: 1px solid var(--stories-line);
	box-shadow: 0 8px 28px rgba(9, 24, 39, 0.06);
}

.stories-branding {
	padding: 0;
}

.stories-branding .brand {
	display: inline-flex;
	align-items: center;
	gap: 0.76rem;
	min-height: 52px;
	padding: 0.25rem 0.45rem 0.25rem 0.2rem;
	border-radius: 15px;
	color: var(--stories-ink-deep);
	text-decoration: none;
}

.stories-brand-mark {
	display: grid;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 14px 14px 14px 5px;
	background: linear-gradient(145deg, #1d3c59, var(--stories-ink-deep));
	box-shadow: 0 9px 20px rgba(9, 24, 39, 0.20);
	color: #fff;
	transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.stories-brand-mark svg {
	display: block;
	width: 29px;
	height: 29px;
}

.stories-brand-copy {
	display: grid;
	gap: 0.08rem;
	min-width: 0;
}

.stories-branding .site-title {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.46rem, 2vw, 1.72rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.045em;
	color: var(--stories-ink-deep);
}

.stories-branding .site-description {
	margin: 0;
	font-size: 0.64rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: #597083;
}

.stories-branding .brand:hover .stories-brand-mark {
	transform: translateY(-2px) rotate(-1deg);
	background: linear-gradient(145deg, #244b6c, #0d2032);
	box-shadow: 0 12px 24px rgba(9, 24, 39, 0.25);
}

.stories-branding .brand:focus-visible,
#masthead a:focus-visible,
#masthead button:focus-visible {
	outline: 3px solid var(--stories-coral);
	outline-offset: 3px;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a {
	font-weight: 650;
	letter-spacing: 0.01em;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
	color: var(--stories-coral-dark);
}

/* Single-story hierarchy: title, trustworthy byline/date, media, then body. */
.single-post .entry.single-entry {
	border: 1px solid var(--stories-line);
	border-radius: var(--stories-radius);
	box-shadow: var(--stories-shadow);
	overflow: hidden;
}

.single-post .entry-content-wrap {
	padding: clamp(1.3rem, 4vw, 2.6rem);
}

.single-post .entry-header .entry-title {
	margin-bottom: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(2rem, 4.7vw, 3.2rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.stories-entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.48rem 0.72rem;
	margin-top: 0.9rem;
	font-size: 0.9rem;
	line-height: 1.45;
	color: #617384;
}

.stories-entry-meta a {
	font-weight: 700;
	color: var(--stories-ink);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.stories-entry-meta__divider {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--stories-coral);
}

.single-post .article-post-thumbnail.kadence-thumbnail-position-below {
	margin-top: clamp(1.25rem, 3vw, 2rem);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(9, 24, 39, 0.13);
}

.single-post .article-post-thumbnail.kadence-thumbnail-position-below .post-thumbnail-inner {
	aspect-ratio: 16 / 9;
}

.single-post .article-post-thumbnail.kadence-thumbnail-position-below img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.single-post .gs-ytfi-wrap {
	margin-top: clamp(1.25rem, 3vw, 2rem);
}

.single-post .gs-ytfi {
	--gs-accent: var(--stories-coral);
	box-shadow: 0 16px 36px rgba(9, 24, 39, 0.22);
}

.single-post .entry-content.single-content {
	margin-top: clamp(1.4rem, 3vw, 2.1rem);
}

.single-post .entry-content.single-content > :first-child {
	margin-top: 0;
}

.single-post .entry-content.single-content p,
.single-post .entry-content.single-content li {
	font-size: clamp(1rem, 1.5vw, 1.08rem);
	line-height: 1.78;
}

.single-post .entry-content.single-content h2,
.single-post .entry-content.single-content h3 {
	font-family: Georgia, "Times New Roman", serif;
	letter-spacing: -0.02em;
}

@media (max-width: 767px) {
	.stories-brand-mark {
		flex-basis: 42px;
		width: 42px;
		height: 42px;
		border-radius: 13px 13px 13px 5px;
	}

	.stories-brand-mark svg {
		width: 26px;
		height: 26px;
	}

	.stories-branding .site-title {
		font-size: 1.42rem;
	}

	.stories-branding .site-description {
		font-size: 0.57rem;
		letter-spacing: 0.1em;
	}

	.single-post .entry.single-entry {
		border-radius: 15px;
	}
}

@media (max-width: 374px) {
	.stories-branding .site-description {
		display: none;
	}

	.stories-branding .brand {
		gap: 0.55rem;
	}

	.single-post .entry-content-wrap {
		padding: 1.15rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.stories-brand-mark,
	.stories-branding .brand,
	#masthead a,
	#masthead button {
		transition: none !important;
	}

	.stories-branding .brand:hover .stories-brand-mark {
		transform: none;
	}
}