/*
 * Structural placeholder only — colours/spacing confirmed from live
 * screenshots (near-black bg, gold accent), but this is NOT a full visual
 * pass yet. Card components, overlay menu animation, responsive
 * breakpoints, and the design-inconsistency fixes (heading spacing,
 * hamburger overlay contrast) still need building out.
 */

/*
 * Roobert font files copied over from viasat-world's assets/fonts/ — same
 * brand family, reused on the assumption this is fine across Viasat
 * properties (both built by Fire Up Design). Flag if that assumption is
 * wrong and a different font should be used for the blogs specifically.
 */
@font-face {
	font-family: 'Roobert';
	src: url('../fonts/Roobert-Regular.woff2') format('woff2');
	font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Roobert';
	src: url('../fonts/Roobert-Medium.woff2') format('woff2');
	font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Roobert';
	src: url('../fonts/Roobert-SemiBold.woff2') format('woff2');
	font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
	font-family: 'Roobert';
	src: url('../fonts/Roobert-Bold.woff2') format('woff2');
	font-weight: 700; font-style: normal; font-display: swap;
}

:root {
	--blog-bg:     #000000;
	--blog-accent: #936900;
	--blog-text:   #FFFAD2;
	--blog-muted:  #9ca3af;
	--blog-font:   'Roobert', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* overflow-x: hidden guards against the vw-vs-scrollbar mismatch the
   .home-epg .vepg-bar 100vw full-bleed technique relies on (100vw doesn't
   subtract the vertical scrollbar's width in most browsers, so it can
   slightly exceed the true visible width — confirmed live as a ~7.5px
   symmetric overshoot above the 1400px cap, accepted as a known tolerance
   rather than chased further with a JS-measured viewport width). Set on
   both html and body — the "root scrolling element" that actually
   governs page-level horizontal overflow is browser-dependent, and
   overflow-x on body alone doesn't reliably suppress it if the browser
   treats html as the root scroller. */
html { overflow-x: hidden; }
body { background: var(--blog-bg); color: var(--blog-text); margin: 0; font-family: var(--blog-font); overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { font-family: var(--blog-font); font-weight: 700; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--blog-accent); }

.blog-article__meta a { color: var(--blog-muted); text-decoration: underline; }
.blog-article__meta a:hover { color: var(--blog-accent); }

.home-intro {
	max-width: 1400px;
	margin: 0 auto;
	padding: 40px 24px 0;
	color: #d8d8d8;
	font-size: 1rem;
	line-height: 1.7;
}
.home-intro__title {
	color: var(--blog-accent);
	font-size: 2rem;
	font-weight: 800;
	margin: 0 0 16px;
}

/* Header */
.site-header { border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 24px; }
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px 24px;
}
.site-header__logo-word1 { color: var(--blog-accent); font-style: italic; font-weight: 700; }
.site-header__logo-word2 { background: var(--blog-accent); color: #000; padding: 2px 8px; font-weight: 800; }
/* Explicit caps so logo size is deterministic regardless of the uploaded
   image's actual file dimensions — add_theme_support('custom-logo')'s
   height/width only guide the Customizer's cropping UI, not final
   rendered size, since flex-height/flex-width are true. */
.site-header .custom-logo-link img {
	max-height: 55px;
	width: auto;
}
.site-footer .custom-logo-link img,
.site-footer__logo img {
	max-height: 55px;
	width: auto;
}
.site-header__menu-toggle { background: none; border: none; cursor: pointer; }
.site-header__menu-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; }

.site-header__nav, .site-header__search {
	display: none;
}
.site-header__nav-list {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-header__nav-list > li {
	position: relative;
}
.site-header__nav-list > li > a {
	color: #FFFAD2;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 4px;
}
.site-header__nav-list .menu-item-has-children > a::after {
	content: "▾";
	font-size: 10px;
}
.site-header__nav-list .sub-menu {
	position: absolute;
	top: calc(100% + 12px);
	left: 0;
	background: #1a1a1a;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	padding: 8px;
	min-width: 160px;
	list-style: none;
	margin: 0;
	display: none;
	flex-direction: column;
	z-index: 1000;
}
.site-header__nav-list .sub-menu.is-open {
	display: flex;
}
.site-header__nav-list .sub-menu a {
	color: #FFFAD2;
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 14px;
	display: block;
}
.site-header__nav-list .sub-menu a:hover {
	background: rgba(255,255,255,0.08);
	color: var(--blog-accent);
}
.site-header__search-form {
	display: flex;
	align-items: center;
	background: #1a1a1a;
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 6px;
	padding: 4px 4px 4px 14px;
}
.site-header__search-form input {
	background: none;
	border: none;
	color: #FFFAD2;
	font-size: 14px;
	width: 160px;
}
.site-header__search-form input:focus {
	outline: none;
}
.site-header__search-form button {
	background: var(--blog-accent);
	border: none;
	border-radius: 4px;
	color: #1a1a1a;
	padding: 8px;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.site-header__search {
	position: relative;
}

@media (min-width: 900px) {
	.site-header__menu-toggle {
		display: none;
	}
	.site-header__nav {
		display: flex;
		align-items: center;
		gap: 32px;
		margin-right: 20px;
	}
	.site-header__search {
		display: flex;
	}
}

/* Replaces the old "More Articles" teaser section — single CTA to the
   full, paginated article list. No top padding of its own: the plugin's
   own .blog-gallery-featured-stories already carries an 80px bottom
   margin (the same rhythm used between its other sections), so adding
   padding here on top of that was stacking to ~120px — a visibly larger
   gap than anywhere else on the page. */
.blog-gallery-scope ~ .home-articles-cta {
	margin-top: -88px;
}
.home-articles-cta {
	display: flex;
	justify-content: center;
	padding: 24px 24px 24px;
}
/* Solid gold fill (matches the heading accent color), distinct from
   .blog-article__jump-link's outline-pill treatment used elsewhere —
   this is the page's primary "see everything" action, not a secondary
   in-article jump link, so it reads as more prominent. Hover darkens +
   lifts rather than staying static, same "give real feedback" principle
   as the pagination hover fix earlier in this build. */
.home-articles-cta__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--blog-accent);
	color: var(--blog-text);
	border: 1.5px solid var(--blog-accent);
	border-radius: 6px;
	padding: 15px 30px;
	font-size: 15px;
	font-weight: 500;
	line-height: 18px;
	text-transform: uppercase;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.2s ease;
}
.home-articles-cta__link:hover {
	color: #1a1a1a;
	filter: brightness(0.88);
	transform: translateY(-2px);
}

/* EPG grid — basic dark theming until the real plugin markup is tested live */
.home-epg { background: #141414; padding: 40px 0 32px; margin-top: 48px; }
/* Single shared box for the heading AND the schedule grid — both live
   inside this one wrapper so they inherit identical left/right edges from
   one source of truth. Previously the heading got its containment from
   .home-epg's own padding while [data-vepg-root] centered itself
   independently via its own max-width:1400px;margin:0 auto — two separate
   box models that happened to look similar but didn't actually share an
   edge, so they drifted apart (heading ~24px from the section edge, grid
   ~84.5px, at typical desktop widths). Ported from viasat-world's
   .site-main--full-width [data-vepg-root] pattern (see the TV Schedule
   page there), using this site's 1400px/24px container convention instead
   of Explore's 1280px. */
.home-epg__container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px 0;
	box-sizing: border-box;
}
/* Matches the blog-gallery plugin's own .blog-gallery-section-header h2
   treatment (color: var(--bg-section-heading), font-weight: 700, and our
   28px override of its 48px default) so this section reads consistently
   with "Latest Articles" / "Featured Articles" / "More Articles" above it. */
.home-epg__heading {
	color: var(--blog-accent);
	font-weight: 700;
	font-size: 28px;
	margin: 0 0 10px;
}
.home-epg__cta {
	text-align: center;
	padding: 48px 0 0;
}

/* .vepg-bar deliberately has no width/margin override here — confirmed
   with Jason the earlier full-bleed treatment (ported from Explore) works
   technically but doesn't fit this site's look. It now sits naturally
   inside .home-epg__container at the same 1400px containment as the
   heading and grid, using only the plugin's own base styling
   (position: sticky for day-nav pinning, etc.). If a bleed effect is
   wanted again later, see git history for the calc()-based version. */

/* ═══════════════════════════════════════════════════════════════
   Fixes for flagged design issues from the live-site audit
   ═══════════════════════════════════════════════════════════════ */

/* Fix: heading ran directly into the next H3 with no visible spacing
   on the live site — ensure body copy always has breathing room before
   the next heading. */
.blog-article__body p + h2,
.blog-article__body p + h3 { margin-top: 2em; }

/* Restore the wider main-card ratio from the reference design — the
   plugin's own default is an even 1fr/1fr split, which doesn't match.
   Desktop-only (min-width just above the plugin's own 992px mobile
   breakpoint) — this selector is identical to the plugin's own
   @media (max-width: 992px) mobile-collapse rule, and since our theme.css
   loads after the plugin's inline styles, an unscoped version of this
   rule was winning the cascade at every width and silently overriding
   the plugin's working 1-column mobile stack back to 2fr/1fr. */
@media (min-width: 993px) {
	.blog-gallery-scope .blog-gallery-latest-grid {
		grid-template-columns: 2fr 1fr;
	}
}

/* Reduce the plugin's hardcoded 48px section heading size, which has
   no corresponding option to control via PHP — must be overridden here. */
.blog-gallery-scope .blog-gallery-section-header h2 {
	font-size: 28px;
}

/* Fix: hamburger overlay was low-contrast gold-on-gold on the live site,
   a real legibility issue — darker, more opaque background instead. */
.site-overlay-nav {
	position: fixed; inset: 0; background: rgba(13,13,13,0.96);
	display: none; flex-direction: column; align-items: center; justify-content: center;
	gap: 20px; z-index: 999;
}
.site-overlay-nav.is-open { display: flex; }
.site-overlay-nav__close {
	position: absolute;
	top: 24px;
	right: 24px;
	background: none;
	border: none;
	color: #FFFAD2;
	cursor: pointer;
	padding: 8px;
}
.site-overlay-nav__search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}
.site-overlay-nav__search input {
	background: #1a1a1a;
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 6px;
	padding: 10px 14px;
	color: #FFFAD2;
	width: 220px;
}
.site-overlay-nav__search button {
	background: var(--blog-accent);
	border: none;
	border-radius: 6px;
	padding: 10px;
	color: #1a1a1a;
	cursor: pointer;
}
.site-overlay-nav__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-overlay-nav__list a {
	color: #FFFAD2;
	font-size: 1.8rem;
	font-weight: 700;
	letter-spacing: 0.5px;
}
.site-overlay-nav__list a:hover {
	color: var(--blog-accent);
}

/* "What's in this article" jump button — gold outline pill, per reference */
.blog-article__jump-link {
	display: inline-flex; align-items: center; gap: 8px;
	border: 1.5px solid var(--blog-accent); color: var(--blog-accent);
	background: transparent; border-radius: 999px; padding: 10px 20px;
	font-weight: 700; text-decoration: none; margin: 20px 0;
}

.site-main--page {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
}
.blog-page__header {
	margin-bottom: 32px;
}
.blog-page__title {
	color: #FFFAD2;
	font-size: 2.2rem;
	font-weight: 800;
	margin: 0 0 8px;
}
.blog-page__updated {
	color: var(--blog-muted);
	font-size: 0.85rem;
	margin: 0;
}
.blog-page__body {
	color: #d8d8d8;
	font-size: 1rem;
	line-height: 1.75;
	margin-bottom: 64px;
}
.blog-page__body h2 {
	color: var(--blog-accent);
	font-size: 1.3rem;
	margin-top: 2.5em;
	margin-bottom: 0.75em;
}
.blog-page__body h3 {
	color: #FFFAD2;
	font-size: 1.05rem;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}
.blog-page__body ul, .blog-page__body ol {
	padding-left: 1.5em;
	margin-bottom: 1.2em;
}
.blog-page__body li {
	margin-bottom: 0.5em;
}
.blog-page__body a {
	color: var(--blog-accent);
	text-decoration: underline;
}
.blog-page__highlight {
	background: rgba(201,150,44,0.08);
	border: 1px solid rgba(201,150,44,0.35);
	border-radius: 8px;
	padding: 20px 24px;
	margin: 24px 0;
}

/* Archive grid */
.site-main--archive {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
}
.archive-header {
	margin-bottom: 32px;
}
.archive-header__title {
	color: var(--blog-accent);
	font-size: 2rem;
	font-weight: 800;
	margin: 0 0 8px;
	text-align: left;
}
.archive-header__count {
	color: var(--blog-muted);
	font-size: 0.85rem;
	margin: 0 0 18px;
}
.archive-header__description {
	color: #c8c8c8;
	font-size: 0.95rem;
	line-height: 1.65;
	margin: 0 0 24px;
}
.archive-header__explore {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding-bottom: 28px;
	margin-bottom: 28px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.archive-header__explore-label {
	color: var(--blog-accent);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	margin-right: 6px;
}
.archive-header__explore-pill {
	border: 1px solid rgba(255,255,255,0.25);
	color: var(--blog-text);
	font-size: 15px;
	font-weight: 500;
	padding: 15px 30px;
	line-height: 18px;
	border-radius: 6px;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.archive-header__explore-pill:hover {
	border-color: var(--blog-accent);
	color: var(--blog-accent);
}
.archive-header__explore-pill.is-active {
	background: var(--blog-accent);
	color: var(--blog-text);
	border-color: transparent;
}
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.site-main--archive .archive-grid { margin-bottom: 64px; }
@media (max-width: 900px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .archive-grid { grid-template-columns: 1fr; } }
.archive-grid__card { position: relative; display: block; text-decoration: none; color: inherit; border-radius: 8px; overflow: hidden; }
.archive-grid__thumb {
	position: relative;
	z-index: 0;
	aspect-ratio: 4/3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 12px;
	background-color: #1a1a1a;
}
.archive-grid__thumb::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0) 100%);
	z-index: 0;
}
.archive-grid__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}
.archive-grid__cat {
	position: relative;
	z-index: 1;
	align-self: flex-start;
	background: #f5e6c8;
	color: #1a1a1a;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 0.7rem;
	font-weight: 700;
	margin-bottom: 8px;
}
.archive-grid__title {
	position: relative;
	z-index: 1;
	color: #FFFAD2;
	font-weight: 700;
}
.archive-grid__meta {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 12px;
	margin-top: 6px;
	color: #d8d8d8;
	font-size: 0.75rem;
}

.search-no-results {
	text-align: center;
	padding: 60px 24px;
	color: var(--blog-muted);
	font-size: 1.1rem;
}

.pagination, .navigation.pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: 40px 0;
	list-style: none;
	padding: 0;
}
.pagination li, .navigation.pagination li {
	list-style: none;
}
a.page-numbers, span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 8px;
	background: rgba(255,255,255,0.06);
	color: #FFFAD2;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
}
span.page-numbers.current {
	background: var(--blog-accent);
	color: #1a1a1a;
}
span.page-numbers.dots {
	background: transparent;
}
a.page-numbers:hover {
	background: rgba(255,255,255,0.12);
}

.blog-article__related {
	background: #141414;
	width: 100%;
	margin-top: 4rem;
	padding: 2rem 0 3rem;
	border-top: 1px solid rgba(255,255,255,0.1);
}
.blog-article__related-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
}
.blog-article__related .blog-article__related-heading {
	color: var(--blog-accent);
	text-transform: uppercase;
	font-size: 1.6rem;
	margin-bottom: 20px;
}

/* Article */
.site-main--article__container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
}
.blog-article__hero-band {
	background: #151515;
	width: 100%;
	padding: 48px 0 64px;
	margin-top: -24px;
	margin-bottom: 40px;
}
.blog-article__title { font-size: 2rem; font-weight: 800; }
.blog-article__meta { color: var(--blog-muted); }
.blog-article__body h2 { color: var(--blog-accent); text-transform: uppercase; margin-top: 2.5em; } /* NOTE: no text-transform:capitalize — Slavic casing trap, per §4.7 */
.blog-article__body h3 { color: var(--blog-accent); margin-top: 1.5em; }
.blog-article__body img {
	max-width: 100%;
	height: auto;
	display: block;
}
.blog-article__body .wp-caption {
	max-width: 100% !important;
	width: auto !important;
}
.blog-article__body .wp-caption-text {
	color: var(--blog-muted);
	font-size: 0.85rem;
	text-align: center;
	padding: 8px 0;
	margin: 0;
}

.blog-faq {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 24px;
}
.blog-faq__item {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	padding: 20px 24px;
}
.blog-article__body .blog-faq__question {
	color: var(--blog-accent);
	font-size: 1.1rem;
	margin: 0 0 8px;
}
.blog-faq__answer {
	color: #d8d8d8;
	margin: 0;
}

.blog-article__hero-split {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	gap: 32px;
	align-items: center;
}
.blog-article__hero-text {
	flex: 1;
	min-width: 0;
}
.blog-article__hero-image {
	width: 55%;
	max-width: 640px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.blog-article__hero-image img {
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: contain;
	border-radius: 8px;
}
.blog-article__category-badge {
	display: inline-block;
	background: #f5e6c8;
	color: #1a1a1a;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 4px;
	margin-bottom: 12px;
}
.blog-article__hero-intro {
	color: #c8c8c8;
	font-size: 15px;
	line-height: 1.6;
	margin-top: 12px;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 700px) {
	.blog-article__hero-split {
		flex-direction: column;
	}
	.blog-article__hero-image {
		width: 100%;
		order: -1;
	}
	.blog-article__hero-image img {
		max-height: 240px;
	}
}

/* Footer */
.site-footer { background: #141414; border-top: 1px solid rgba(255,255,255,0.1); padding: 64px 24px 24px; }
.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1400px;
	margin: 0 auto;
}
.site-footer__brand {
	max-width: 320px;
	flex-shrink: 0;
}
.site-footer__col { min-width: 140px; }
.site-footer__col h3 { color: var(--blog-accent); text-transform: uppercase; font-size: 0.8rem; }
.site-footer__col ul { list-style: none; padding: 0; }
.site-footer__col ul li { margin-bottom: 14px; }
.site-footer__col ul li:last-child { margin-bottom: 0; }
.site-footer__col a { color: #FFFAD2; text-decoration: none; }
.site-footer__col a:hover { color: var(--blog-accent); }

.site-footer__channels { max-width: 1400px; margin: 40px auto 0; padding: 0 24px; }
.site-footer__channels h3 { color: var(--blog-accent); text-transform: uppercase; }
.site-footer__channels-logos { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 16px; justify-content: space-between; }
.site-footer__channel-logo { display: inline-block; transition: transform 0.2s ease, opacity 0.2s ease; }
.site-footer__channel-logo:hover { transform: translateY(-4px); opacity: 0.8; }
.site-footer__channel-logo img { max-height: 52px; width: auto; display: block; }
/* Fallback text state (before real logos are uploaded via Customizer) —
   readable spacing instead of running together unstyled */
.site-footer__channel-logo:not(:has(img)) {
	background: rgba(255,255,255,0.08); padding: 6px 14px; border-radius: 4px;
	font-size: 0.85rem; text-transform: capitalize;
}

.site-footer__bottom {
	max-width: 1400px;
	margin: 32px auto 0;
	padding: 20px 24px 0;
	border-top: 1px solid rgba(255,255,255,0.1);
	display: flex; flex-wrap: wrap; align-items: center; gap: 16px; justify-content: space-between; color: var(--blog-muted); font-size: 0.85rem;
}
.site-footer__legal {
	display: flex;
	align-items: center;
	gap: 8px;
}
.site-footer__legal a:not(:last-child)::after {
	content: "•";
	margin-left: 8px;
	color: var(--blog-muted);
}
.site-footer__legal a, .site-footer__credit a { color: var(--blog-muted); }