/* =====================================================
   West of the Tunnel — Homepage Layout Styles
   Styles for the custom block patterns used to build
   flexible homepage layouts (featured block + cards).
   ===================================================== */

/* --- Featured block (full width, on top) --- */
.wott-featured-query {
	margin-bottom: 2.5rem;
}

.wott-featured-image img {
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: cover;
	border-radius: 4px;
}

.wott-featured-title {
	font-size: 2rem;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

.wott-featured-excerpt {
	font-size: 1.1rem;
	color: #444;
	max-width: 800px;
}

a.wott-featured-button {
	font-weight: 600;
	display: inline-block;
	margin-top: 0.5rem;
}

/* --- Card row (1, 2, or 3 across) --- */
.wott-card-query {
	margin-bottom: 2.5rem;
}

.wott-card-query .wp-block-post-template {
	gap: 2rem;
}

.wott-card-query .wp-block-post {
	border-top: 1px solid #e2e2e2;
	padding-top: 1rem;
}

.wott-card-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 4px;
}

.wott-card-title {
	font-size: 1.25rem;
	margin-top: 0.75rem;
	margin-bottom: 0.4rem;
}

.wott-card-excerpt {
	font-size: 0.95rem;
	color: #555;
}

a.wott-card-button {
	font-size: 0.9rem;
	display: inline-block;
	margin-top: 0.4rem;
}

/* --- Responsive: stack columns on smaller screens --- */
@media (max-width: 768px) {
	.wott-card-query .wp-block-post-template {
		flex-direction: column;
	}

	.wott-featured-title {
		font-size: 1.5rem;
	}

	.wott-main-briefs-columns {
		flex-direction: column;
	}

	/* On mobile: More Local News first, then County and State,
	   then the main story column last. */
	.wott-main-briefs-columns .wott-more-local-column {
		order: 1;
	}

	.wott-main-briefs-columns .wott-county-state-column {
		order: 2;
	}

	.wott-main-briefs-columns .wott-main-column {
		order: 3;
	}
}

/* =====================================================
   Main Column + Briefs Column layouts
   (used by "3 Columns — Main Center" and
   "2 Columns — Main Right" patterns)
   ===================================================== */

.wott-main-briefs-columns {
	align-items: flex-start;
}

/* --- Main column (dominant story feed) --- */
.wott-main-column {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.wott-main-query .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.wott-main-query .wp-block-post-template > li:not(:first-child) {
	border-top: 1px solid #ccc;
	padding-top: 2rem;
}

/* The card itself (image, overlay, headline) is rendered using
   Evoke's own existing .blog-item styling — we're intentionally
   NOT overriding its positioning/display, just giving it a bit more
   height here since it's the dominant column. */
.wott-evoke-card {
	height: 420px;
}

/* Featured variant: shows the complete, uncropped photo at its
   natural aspect ratio (no fixed height), with the headline
   overlaid on top. */
.wott-evoke-card-featured {
	height: auto !important;
}

.wott-evoke-card-featured .post-url {
	position: relative !important;
	display: block;
	height: auto !important;
	background-image: none !important;
}

.wott-evoke-card-featured-img {
	width: 100%;
	height: auto;
	display: block;
}

.wott-evoke-card-featured .overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: transparent !important;
	transition: background-color 0.3s ease-in-out;
}

.wott-evoke-card-featured:hover .overlay {
	background-color: rgba(0, 0, 0, 0.25) !important;
}

.wott-evoke-card-featured-title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 1.5rem 2rem;
	color: #fff !important;
	font-size: 2.5rem;
	line-height: 1.2;
}

/* Optional description below the photo — leave the post's excerpt
   field blank/empty if you don't want any text here. */
.wott-main-item-excerpt {
	font-size: 1rem;
	color: #444;
	margin-top: 0.75rem;
}

@media (max-width: 768px) {
	.wott-main-item-title {
		font-size: 1.4rem;
	}
}

/* --- Thin grey divider lines between columns, tighter gaps --- */
.wott-main-briefs-columns,
.wott-card-columns-uneven {
	gap: 1.25rem;
}

/* Evoke's theme doesn't define its own "wide" width for Gutenberg's
   alignwide class, so we define it ourselves — wider than the
   normal content column, short of full-bleed edge-to-edge. */
/* Evoke's theme wraps content in a Bootstrap container with its own
   max-width, so a simple max-width on our side can never exceed it.
   This breaks the section out to genuinely span wider than that
   container, capped at 1400px on large screens. */
.wott-main-briefs-columns.alignwide {
	width: 100vw;
	max-width: 1400px;
	margin-left: 50%;
	transform: translateX(-50%);
}

.wott-main-briefs-columns > .wp-block-column:not(:first-child),
.wott-card-columns-uneven > .wp-block-column:not(:first-child) {
	border-left: 1px solid #ccc;
	padding-left: 1.25rem;
}

/* --- Brief column (briefs, updates, links) --- */
.wott-brief-column-title {
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #000;
	margin-bottom: 1rem;
	border-bottom: 2px solid #941c1c;
	padding-bottom: 0.5rem;
}

.wott-brief-query .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.wott-brief-query .wp-block-post-template > li:not(:first-child) {
	border-top: 1px solid #ccc;
}

/* --- Brief Card: whole card is the link, used by both
   County/State (updates) and More Local News (links) columns --- */
.wott-brief-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 0;
	text-decoration: none;
	color: inherit;
}

.wott-brief-card-thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 3px;
	background-size: cover;
	background-position: center;
	background-color: #eee;
}

.wott-brief-card-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.wott-brief-card-byline {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #941c1c;
	margin-bottom: 0.15rem;
}

.wott-brief-card-title {
	font-size: 1rem !important;
	line-height: 1.3 !important;
	color: #000 !important;
	font-weight: 700 !important;
	margin: 0 !important;
}

.wott-brief-card-date {
	font-size: 0.7rem;
	color: #888;
	margin-top: 0.15rem;
}

.wott-brief-card-excerpt {
	font-size: 0.8rem;
	line-height: 1.35;
	color: #555;
	margin-top: 0.3rem;
}

.wott-brief-card:hover .wott-brief-card-title {
	text-decoration: underline;
}

/* Asymmetric 20/60/20 card row (Featured + 3 Columns) */
.wott-card-columns-uneven {
	margin-bottom: 2.5rem;
}

.wott-query-pagination {
	margin-top: 1.5rem;
	text-align: center;
}

.wott-query-pagination a {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	border: 1px solid #1a1a1a;
	border-radius: 3px;
	color: #1a1a1a;
	text-decoration: none;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.wott-query-pagination a:hover {
	background: #1a1a1a;
	color: #fff;
}

/* On narrow screens, drop the divider since columns stack */
@media (max-width: 768px) {
	.wott-main-briefs-columns > .wp-block-column:not(:first-child),
	.wott-card-columns-uneven > .wp-block-column:not(:first-child) {
		border-left: none;
		padding-left: 0;
		border-top: 1px solid #ccc;
		padding-top: 1rem;
		margin-top: 1rem;
	}
}

/* =====================================================
   Disable the theme's sticky-header-on-scroll behavior —
   it was interacting badly with our banner sitting above
   the header, causing a visible jump and the social icons
   disappearing partway through scrolling.
   ===================================================== */

.nav-fixed-top .header-container,
.nav-fixed-top .nav-holder-4,
.nav-fixed-top.main-header,
header.nav-fixed-top {
	position: static !important;
	top: auto !important;
}

/* Hide the header's social icons entirely — they were the specific
   element disappearing/jumping during scroll, and removing them
   sidesteps the issue rather than continuing to chase it. (Footer
   social icons are a separate element and are unaffected.) */
.search-social {
	display: none !important;
}

/* Hide the small, unlinked "HOME" breadcrumb text that the theme
   shows above the page content — it serves no purpose here. */
.small-title {
	display: none !important;
}

/* The nav-relocation script (in the banner) physically moves the
   real <nav> into our banner, leaving its original container empty
   — but still taking up space via its own padding. Collapse that
   padding specifically on pages where our banner (and therefore the
   relocation) is present, leaving other page types untouched. */
body:has(.wott-site-banner) header.main-header .header-container {
	padding: 0 !important;
	min-height: 0 !important;
}

.wott-site-banner {
	position: relative;
	text-align: center;
	background: #fff;
	padding: 1.5rem 2rem;
}

.wott-site-banner-date {
	position: absolute;
	left: 2rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 0.85rem;
	color: #666;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.wott-site-banner-center {
	text-align: center;
}

.wott-site-banner-title {
	font-family: Georgia, "Times New Roman", serif;
	color: #1a1a1a;
	font-size: 3.75rem;
	font-weight: 300;
	letter-spacing: 0.01em;
	margin: 0;
}

/* The nav menu brings its original theme styling with it when
   relocated here — strip out floats/positioning so it sits cleanly
   centered between the title and the rule lines. */
.wott-site-banner-nav-slot {
	margin: 0.75rem 0;
}

.wott-site-banner-nav-slot .nav-holder {
	position: static !important;
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	display: flex !important;
	justify-content: center !important;
}

.wott-site-banner-nav-slot .menu-nav {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	width: 100% !important;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

/* Two thin rule lines under the title, sized to the content column
   rather than spanning the full browser width. */
.wott-site-banner-rules {
	max-width: 800px;
	margin: 0.6rem auto;
}

.wott-site-banner-rule {
	height: 1px;
	background: #1a1a1a;
	margin: 0.25rem 0;
}

.wott-site-banner-tagline {
	color: #666;
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0.4rem 0 0;
}

@media (max-width: 768px) {
	.wott-site-banner-title {
		font-size: 2.4rem;
	}

	.wott-site-banner-date {
		position: static;
		display: block;
		transform: none;
		margin-bottom: 0.5rem;
	}
}

/* =====================================================
   Footer menu — restyles the existing footer Menu widget
   to display horizontally, matching the top nav's look,
   instead of its default vertical list.
   ===================================================== */

#footer-content .widgettitle {
	display: none;
}

#footer-content .menu-main-menu-container {
	text-align: center;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e0e0e0;
}

#footer-content .menu-main-menu-container ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer-content .menu-main-menu-container li {
	margin: 0;
}

#footer-content .menu-main-menu-container a {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 700;
	font-size: 0.85rem;
	color: #1a1a1a;
	text-decoration: none;
}

#footer-content .menu-main-menu-container a:hover {
	color: #941c1c;
}

/* Tighten the gap between the post title and whatever follows it
   (subtitle, first paragraph, etc.) on single posts. */
.single-title {
	margin-bottom: 0.5rem !important;
}

.content-style2 {
	margin-top: 16px !important;
}