/* ---------- Self-hosted fonts ---------- */
/* Downloaded from Google Fonts and self-hosted rather than linked from
   a CDN, consistent with this project's cost/dependency-reduction goal
   and avoiding a third-party request on every page load. */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/inter-variable.woff2') format('woff2');
}

@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: 700 900;
	font-display: swap;
	src: url('../fonts/playfair-display-variable.woff2') format('woff2');
}

@font-face {
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/playfair-display-italic.woff2') format('woff2');
}

/* Root cause found via real browser inspection (getComputedStyle): the
   home.html template had `"layout":{"type":"grid","columnCount":3}` on
   BOTH the outer wp:query block and the inner wp:post-template block.
   That made the outer wrapper itself a 3-column grid container, so its
   one child (post-template) got squeezed into a single ~1/3-width outer
   column and then subdivided again into 3 more columns internally -
   explaining the "narrow column, title wraps mid-word" symptom. Fixed
   in templates/home.html by removing the grid layout attribute from the
   outer wp:query block, keeping it only on wp:post-template. The
   width:100% "defensive fix" from an earlier pass was masking a
   different guess entirely and didn't actually address this - removed. */
.wp-block-post-template {
	gap: 2rem 1.5rem;
}

/* ---------- Section heading ---------- */
/* Plain single-side rule instead of the block editor's "has-border-color"
   attribute, which pulls in a default all-sides border via core CSS and
   rendered as a full box rather than the intended bottom rule. */
.ot-section-heading {
	border-bottom: 2px solid var(--wp--preset--color--contrast);
	padding-bottom: 0.5rem;
	margin-bottom: 1.75rem;
}

/* ---------- Category color-coding ---------- */
/* Core's Post Terms block doesn't offer per-term color styling, so this
   keys off the category slug in the link's href (same technique as the
   Records feed's JS filter) rather than needing a custom block. */
.ot-eyebrow a[href*="/category/news/"] { color: #0f5c8c; }
.ot-eyebrow a[href*="/category/sports/"] { color: #1e824c; }
.ot-eyebrow a[href*="/category/records/"] { color: #5c6270; }
.ot-eyebrow a[href*="/category/obituaries/"] { color: #3a3a3a; }
.ot-eyebrow a[href*="/category/features/"] { color: #c0392b; }
.ot-eyebrow a[href*="/category/premium/"] { color: #8e44ad; }

/* ---------- Hero (top story) ---------- */
.ot-hero {
	margin-bottom: 3rem;
}

.ot-hero__image img {
	border-radius: 16px;
	transition: transform 0.4s ease;
}

.ot-hero:hover .ot-hero__image img {
	transform: scale(1.02);
}

.ot-hero__body {
	margin-top: 1.5rem;
}

.ot-eyebrow {
	display: inline-block;
	margin: 0 0 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ot-eyebrow a {
	text-decoration: none;
}

.ot-hero__title {
	margin: 0 0 1rem;
	font-weight: 800;
}

.ot-hero__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.ot-hero__title a:hover {
	color: var(--wp--preset--color--accent);
}

.ot-hero__excerpt {
	font-size: 1.15rem;
	color: var(--wp--preset--color--contrast-3);
	max-width: 65ch;
	margin-bottom: 0.75rem;
}

.ot-hero__byline {
	font-size: 0.85rem;
	color: var(--wp--preset--color--contrast-3);
}

/* ---------- Trending grid cards ---------- */
/* Cards had no visible container before this pass (background matched
   the page background, so items just read as plain stacked text) -
   background/padding/shadow is what actually makes each post read as a
   "card," and the hover lift is what makes the grid feel interactive
   rather than static. */
.ot-trending-card {
	background: var(--wp--preset--color--base);
	border: 1px solid #ececec;
	border-radius: 12px;
	padding: 1rem;
	box-shadow: 0 1px 3px rgba(20, 22, 26, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ot-trending-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(20, 22, 26, 0.12);
}

.ot-trending-card .wp-block-post-featured-image {
	margin: -1rem -1rem 0;
}

.ot-trending-card .wp-block-post-featured-image img {
	border-radius: 12px 12px 0 0;
	display: block;
}

.ot-trending-card .wp-block-post-title {
	margin: 0 0 0.35rem;
	font-size: 1.2rem;
}

.ot-trending-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.ot-trending-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

.ot-trending-card__byline {
	font-size: 0.8rem;
	color: var(--wp--preset--color--contrast-3);
}

/* ---------- Records feed ---------- */
.ot-record-filters {
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.ot-record-filter {
	border: 1px solid var(--wp--preset--color--contrast-3, #5c6270);
	background: transparent;
	border-radius: 999px;
	padding: 0.4rem 1rem;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.ot-record-filter:hover {
	background: var(--wp--preset--color--contrast-2);
}

.ot-record-filter.is-active {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fff;
}

.ot-record-card {
	border-bottom: 1px solid #e5e5e5;
	padding: 1.25rem 0;
	gap: 1rem;
}

.ot-record-card__type {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 0.25rem;
}

.ot-record-card__type a {
	color: inherit;
	text-decoration: none;
}

.ot-record-card .wp-block-post-title {
	margin: 0 0 0.25rem;
}

/* ---------- Weather widget ---------- */
/* A small inline pill, not a full card, since it's meant to sit
   unobtrusively near the masthead rather than compete with the hero/grid. */
.ot-weather-widget {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--contrast-2);
	margin-bottom: 2rem;
}

.ot-weather-widget__location {
	color: var(--wp--preset--color--contrast-3);
}

.ot-weather-widget__temp {
	font-weight: 700;
}