/* HOSJJ theme — supplemental styles beyond theme.json */

/* Header navigation: understated links on crimson */
.hosjj-header .wp-block-navigation a {
	color: #f5e9e0;
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
	transition: color 120ms ease, border-color 120ms ease;
}
.hosjj-header .wp-block-navigation a:hover,
.hosjj-header .wp-block-navigation .current-menu-item > a {
	color: #ffffff;
	border-bottom-color: var(--wp--preset--color--accent);
}

/* Section cards on the homepage and events index */
.hosjj-card {
	background: var(--wp--preset--color--base-pure);
	border: 1px solid #e5ddd0;
	border-top: 3px solid var(--wp--preset--color--primary);
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(35, 33, 32, 0.06);
	transition: box-shadow 150ms ease, transform 150ms ease;
	height: 100%;
}
.hosjj-card:hover {
	box-shadow: 0 6px 18px rgba(35, 33, 32, 0.12);
	transform: translateY(-2px);
}
.hosjj-card a {
	text-decoration: none;
}
.hosjj-card h3 a:hover {
	color: var(--wp--preset--color--primary);
}

/* Document download rows on the Library page */
.hosjj-doc {
	background: var(--wp--preset--color--base-pure);
	border: 1px solid #e5ddd0;
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 4px;
	padding: 1.25rem 1.5rem;
}
.hosjj-doc h3 {
	margin-top: 0;
}

/* Gallery images: subtle frame */
.wp-block-gallery .wp-block-image img {
	border-radius: 3px;
}

/* Essay prose rhythm on narrow template */
.hosjj-essay p {
	margin-bottom: 1.35em;
}

/* Hero */
.hosjj-hero {
	background:
		radial-gradient(ellipse at 50% -20%, rgba(168, 132, 44, 0.18), transparent 60%),
		linear-gradient(170deg, #4e0d14 0%, #7a1620 100%);
}
.hosjj-hero .hosjj-hero-kicker {
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
}

/* Page title band */
.hosjj-title-band {
	border-bottom: 1px solid #e5ddd0;
	background: var(--wp--preset--color--surface);
}

/* On small screens, unfloat side images so the text column stays readable */
@media (max-width: 600px) {
	main .wp-block-image.alignright,
	main .wp-block-image.alignleft {
		float: none;
		margin-left: auto;
		margin-right: auto;
		display: block;
		text-align: center;
	}
	main .wp-block-image.alignright img,
	main .wp-block-image.alignleft img {
		width: 100% !important;
		max-width: 320px;
		height: auto;
	}
}

/* Skip to content — WP outputs its own, keep focus visible */
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}