/*
Theme Name: Historic Sites
Template: ojji-base
Description: Child theme of Ojji Base for historic sites, landmarks, and heritage attractions. "Trailhead" identity (v2, Oct 2026) -- pine/saddle/rust/goldenrod on parchment, a full-coverage custom "Fort Mitchell" display font. Built from the Fort Mitchell Historic Site rebuild.
Version: 0.2.0
Text Domain: historic-sites
*/

/* ==========================================================================
   Fort Mitchell -- full custom display typeface (upper/lowercase, digits,
   punctuation), loaded locally. Supersedes v1's partial 8-letter trace.
   ========================================================================== */

@font-face {
	font-family: 'Fort Mitchell';
	src: url('assets/fonts/FortMitchell-Regular.woff2') format('woff2'),
	     url('assets/fonts/FortMitchell-Regular.woff') format('woff'),
	     url('assets/fonts/FortMitchell-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Design tokens -- see the brand guide (ftmitchellbrand.ojjistudio.com) for
   the full palette with usage notes. ojji-base's shared components key off
   these same custom properties (e.g. --color-ink doubles as "the dark
   surface color" for contact-band/footer/hero cards, not just heading
   text) -- Pine fills that role here. Where this design's actual text ink
   (#231d16) needs to differ from that, it's overridden explicitly below
   rather than by renaming what --color-ink means project-wide.
   ========================================================================== */

:root {
	--color-bg: #f1e8d6;          /* Parchment */
	--color-bg-alt: #f8f2e6;      /* Card */
	--color-border: #d9ccb2;      /* Rule */
	--color-border-2: #cdbf9f;    /* Rule, alt */
	--color-ink: #263a2a;         /* Pine -- dark-surface token (see note above) */
	--color-ink-dark: #1d2b1f;    /* Deep Pine -- footer */
	--color-card-dark: #4a3021;   /* Saddle -- dark-surface cards (hero panel, date badges) */
	--color-text: #231d16;        /* Ink -- actual body/heading text color */
	--color-text-muted: #4b4034;  /* Muted */
	--color-text-muted-2: #5c4f40;
	--color-text-on-dark-muted: #efe6d2;
	--color-text-on-dark-faint: #b8ad96;
	--color-accent: #8c3f1f;      /* Rust -- links/buttons/eyebrows on light */
	--color-accent-light: #e7c98f; /* Goldenrod -- eyebrows/links on dark */
	--color-sand: #e6dac2;        /* Sand -- alternate band */
	--color-surface-blue: #e9e4d1;
	--color-tag-border: #d9ccb2;
	--color-placeholder: #d6c8ac;

	--font-body: 'Source Serif 4', Georgia, serif;
	--font-heading: 'Fort Mitchell', 'Source Serif 4', serif;

	--radius-lg: 10px;
}

/* Headings/body both read as plain Ink here (not a separate darker "heading
   ink" tone) -- only the italic accent and on-dark sections differ. The
   base rule sets color:var(--color-ink), which above is Pine (needed for
   dark-surface components) -- override back to the real text ink for
   headings specifically. */
h1, h2, h3, h4 {
	color: var(--color-text);
}

/* The Trailhead reference never mixes a second color/italic into a
   heading -- every h1-h3 is one solid color, set entirely in Fort
   Mitchell. ojji-base's shared ojji_base_accent_last_word() still wraps a
   word in <em> (auto-accenting the last word when no explicit *word* is
   given), so rather than rewrite every heading string, neutralize what
   <em> looks like here instead. */
h1 em, h2 em, h3 em, blockquote em {
	color: inherit;
	font-style: normal;
}

.card,
.form-control {
	border-radius: 6px;
}

/* ojji-base's editorial default centers section eyebrows/headings
   (.eyebrow carries Bootstrap's .text-center utility, which is
   !important); the Trailhead reference left-aligns every section header
   instead. */
.eyebrow.text-center {
	text-align: left !important;
}

.section__heading {
	text-align: left;
}

.section__subheading {
	text-align: left;
	margin-inline: 0;
}

.btn {
	--bs-btn-border-radius: 6px;
	font-family: var(--font-heading);
	letter-spacing: 0.05em;
}

/* "Nothing here" content (404 / empty search / empty archive) -- the seal
   mark standing in for ojji-base's generic compass icon. */
.content-none__seal {
	opacity: 0.85;
	margin-bottom: 0.25rem;
}

/* Eyebrows are set in the display font here, not mono/small-caps, and
   carry no icon -- a clean "Fort Mitchell" accent is the brand device now,
   not a cropped arrowhead glyph (see v1's now-removed .eyebrow::before). */
.eyebrow {
	font-family: var(--font-heading);
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: none;
	color: var(--color-accent);
}

/* ==========================================================================
   Utility bar + header
   ========================================================================== */

.announcement-bar {
	font-size: 14px;
	letter-spacing: normal;
}

.announcement-bar a {
	text-decoration: none;
}

.site-navbar {
	background-color: var(--color-bg);
	border-bottom: 3px solid var(--color-card-dark);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* The seal is a detailed circular badge, not a simple wordmark -- needs
   more room to read than ojji-base's default nav-logo height. */
.site-navbar .navbar-brand img {
	height: 64px;
}

.navbar-brand__title {
	font-size: 28px;
}

.navbar-brand__tagline {
	letter-spacing: 0.14em;
	color: var(--color-card-dark);
}

.site-navbar .nav-link {
	font-family: var(--font-heading);
	font-size: 17px;
	letter-spacing: 0.04em;
	color: var(--color-text);
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link.active {
	color: var(--color-accent);
}

.site-navbar .nav-link--cta {
	background: var(--color-accent);
	color: #fff;
	border-radius: 6px;
}

.site-navbar .nav-link--cta:hover {
	background: var(--color-card-dark);
}

/* .nav-link.active above and .nav-link--cta.active here are both 3-class
   selectors (.site-navbar + one more + .active) -- equal specificity, so
   when WP marks this link "active" (e.g. the hero's #visit anchor, often
   current on the front page), it comes down to source order. Re-assert
   white after .nav-link.active, in this same stylesheet, so it wins. */
.site-navbar .nav-link--cta.active {
	color: #fff;
}

/* ==========================================================================
   Hero -- a solid Saddle panel over the photo (not plain scrim text),
   plus the floating "Open This Weekend" hours card.
   ========================================================================== */

.hero-overlay {
	min-height: 620px;
}

/* The reference hero relies on the solid Saddle card for contrast, not a
   darkened photo -- ojji-base's default scrim (for themes that set plain
   text straight over the photo) would otherwise mute a crisp, bright photo
   like this one. */
.hero-overlay__scrim {
	display: none;
}

/* .hero-overlay__content stays a plain, untouched Bootstrap .container (same
   centering/max-width/gutters as every other section on the page) so the
   card below lines up with the rest of the page's content edge instead of
   hugging the browser's literal edge -- only .hero-overlay__card (a new
   inner wrapper, see hero-overlay.php) gets the Saddle box treatment,
   capped at its own 600px width and left-aligned within that container.
   The hours card (a separate sibling, see below) uses the exact same
   .container class so both line up within the same content width, each
   pinned to its own side. */
.hero-overlay .container.hero-overlay__content {
	display: flex;
	padding-bottom: 48px;
}

.hero-overlay__card {
	max-width: 600px;
	background: var(--color-card-dark);
	color: var(--color-text-on-dark-muted);
	padding: 30px 34px 32px;
	border-radius: var(--radius-lg);
	box-shadow: 0 0 0 6px rgba(246, 239, 225, 0.18);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hero-overlay__kicker {
	font-family: var(--font-heading);
	font-size: 14px;
	letter-spacing: 0.16em;
	color: var(--color-accent-light);
	margin-bottom: 0;
}

.hero-overlay__heading {
	font-family: var(--font-heading);
	max-width: none;
	margin-bottom: 0;
}

.hero-overlay__heading em {
	color: inherit;
	font-style: normal;
}

.hero-overlay__cta {
	--bs-btn-border-radius: 6px;
	--bs-btn-bg: #f6efe1;
	--bs-btn-border-color: #f6efe1;
	--bs-btn-color: var(--color-card-dark);
	--bs-btn-hover-bg: var(--color-accent-light);
	--bs-btn-hover-border-color: var(--color-accent-light);
	--bs-btn-hover-color: var(--color-card-dark);
	font-family: var(--font-heading);
}

.hero-overlay__cta--secondary {
	--bs-btn-bg: transparent;
	--bs-btn-border-color: #f6efe1;
	--bs-btn-color: #f6efe1;
	--bs-btn-hover-bg: rgba(246, 239, 225, 0.15);
	--bs-btn-hover-border-color: #f6efe1;
	--bs-btn-hover-color: #f6efe1;
}

/* Matches .hero-overlay__content's own padding-bottom above, so the hours
   card and the main Saddle card sit flush with each other along the same
   bottom edge instead of floating at two different heights. */
.hero-overlay__hours-inner {
	padding-block: 0 48px;
}

.hero-overlay__hours {
	border-top: 8px solid var(--color-ink);
	background: var(--color-text-on-dark-muted);
}

.hero-overlay__hours-heading {
	font-family: var(--font-heading);
	font-size: 22px;
	color: var(--color-ink);
}

/* ==========================================================================
   Facts band (Plan Your Visit) -- Pine band, Goldenrod rules/eyebrow
   ========================================================================== */

.facts-band {
	background: var(--color-ink);
	color: var(--color-text-on-dark-muted);
}

/* Without this, the global h1-h4 rule's dark Ink color would win over
   plain inheritance (element-type selectors still beat inheriting from a
   parent) -- explicitly inherit the section's own off-white instead of a
   stark #fff, matching the reference (every dark-section heading there is
   the section's text color, not a separately brightened white). */
.facts-band h2,
.facts-band h3 {
	color: inherit;
}

.facts-band .eyebrow {
	color: var(--color-accent-light);
}

.facts-band__fact {
	border-top-color: var(--color-accent-light);
}

.facts-band a {
	color: var(--color-accent-light);
}

/* ==========================================================================
   Events list -- Saddle date badge (Rust for the featured/single-date one)
   ========================================================================== */

.events-list {
	background: var(--color-bg);
}

.events-list__card {
	border-radius: var(--radius-lg);
}

.events-list__date {
	border-radius: 6px;
	background: var(--color-card-dark);
	width: auto;
	height: auto;
	padding: 8px 12px 6px;
}

.events-list__date-month {
	font-family: var(--font-heading);
	font-size: 14px;
	letter-spacing: 0.08em;
	color: var(--color-text-on-dark-muted);
}

.events-list__date-day {
	font-family: var(--font-heading);
	font-size: 28px;
	font-weight: 400;
}

.events-list__title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
}

/* ==========================================================================
   History (three-col-principles with photos) -- Sand band
   ========================================================================== */

.three-col-principles {
	background: var(--color-sand);
}

.three-col-principles h3 {
	font-family: var(--font-heading);
	font-size: 1.5rem;
}

/* ==========================================================================
   Blog teasers (Stories of the Fort)
   ========================================================================== */

.blog-teasers__thumb {
	aspect-ratio: 16 / 10;
}

.blog-teasers__title {
	font-family: var(--font-heading);
	font-size: 1.4rem;
}

.blog-teasers__byline {
	font-family: var(--font-body);
	font-style: italic;
	text-transform: none;
	letter-spacing: normal;
	font-size: 13px;
}

/* ==========================================================================
   Membership (info-band seal-inline variant) -- Pine band
   ========================================================================== */

/* The reference's Membership section has no card chrome at all -- it's
   just the Pine section's own direct content, full width within the page's
   normal container inset. info-band.php always wraps its content in a
   `.info-band` div (border/background/padding, meant to look like a card
   floating in a plain section), so move the Pine background up to the
   <section> itself via :has() and strip the inner div back down to a
   plain content wrapper instead of a boxed-in card. */
.section:has(> .container > .info-band--seal-inline) {
	background: var(--color-ink);
	color: var(--color-text-on-dark-muted);
}

.info-band--seal-inline {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

.info-band--seal-inline h2 {
	color: inherit;
}

.info-band--seal-inline .eyebrow {
	color: var(--color-accent-light);
}

.info-band--seal-inline .btn-primary {
	--bs-btn-bg: var(--color-accent-light);
	--bs-btn-border-color: var(--color-accent-light);
	--bs-btn-color: var(--color-ink);
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-border-color: #fff;
	--bs-btn-hover-color: var(--color-ink);
	font-family: var(--font-heading);
}

/* ==========================================================================
   Creek Nation band (two-col-band) -- Saddle
   ========================================================================== */

.two-col-band {
	background: var(--color-card-dark);
	color: var(--color-text-on-dark-muted);
}

.two-col-band h2 {
	color: inherit;
}

.two-col-band .eyebrow,
.two-col-band a {
	color: var(--color-accent-light);
}

/* ==========================================================================
   Nearby attractions (place-cards rows style)
   ========================================================================== */

.place-cards {
	background: var(--color-bg);
}

.place-cards__row {
	border-top-color: var(--color-border-2);
}

/* ==========================================================================
   Contact -- Sand band, light card form (contact-band is dark by default
   in ojji-base; this redesign wants it light, so it's overridden directly
   here rather than through the shared dark-surface tokens, which other
   sections on this same page still rely on being dark).
   ========================================================================== */

.contact-band {
	background: var(--color-sand);
	color: var(--color-text);
}

.contact-band h2,
.contact-band h3 {
	color: var(--color-text);
}

.contact-band .eyebrow:not(.contact-band__label) {
	color: var(--color-accent);
}

/* ojji-base's own .contact-band em rule (color: var(--color-accent-light))
   predates this section being a light Sand band -- it's more specific
   than the global h1-h3 em neutralization above (.contact-band em beats
   a bare "h2 em"), so it still wins there even after removing this
   theme's own now-redundant copy of it. Target the actual heading
   elements instead so this wins on specificity rather than source order,
   and "Address"/"Note" read as plain text like every other heading. */
.contact-band h2 em,
.contact-band h3 em {
	color: inherit;
	font-style: normal;
}

.contact-band a {
	color: var(--color-accent);
}

.contact-band__label {
	color: var(--color-text-muted);
}

.contact-band__map-embed {
	border: 1px solid var(--color-border-2);
}

.contact-band__form-text {
	color: var(--color-text-muted);
}

.contact-band__form .staticform .form-label,
.contact-band__form .ojji-form__field label {
	color: var(--color-text-muted);
}

.contact-band__form .ojji-form__submit,
.contact-band__form .staticform button[type='submit'] {
	background: var(--color-accent);
	color: #fff;
}

.contact-band__form .ojji-form__submit:hover,
.contact-band__form .staticform button[type='submit']:hover {
	background: var(--color-card-dark);
}

/* ==========================================================================
   Galleries page ([ojji_galleries])
   ========================================================================== */

.ojji-galleries__tab {
	font-family: var(--font-heading);
	font-size: 16px;
	letter-spacing: 0.04em;
	border-radius: 6px;
	border-color: var(--color-border-2);
	background: var(--color-bg-alt);
	color: var(--color-text);
}

.ojji-galleries__tab.is-active {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: #fff;
}

/* ==========================================================================
   Footer -- historic-sites ships its own footer.php (not ojji-base's
   shared one) to match the Trailhead reference's exact 4-column layout:
   brand | Visit | Connect | Donate, each a plain text column with no
   card chrome.
   ========================================================================== */

/* ojji-base's shared .site-footer rule puts its own padding-block (96px
   96px top, 32px bottom) directly on the <footer> element; this theme's
   own .container padding below was stacking on top of that rather than
   replacing it. Zero out the base padding here and let .container own it
   entirely. */
.trailhead-footer {
	background: var(--color-ink-dark);
	color: #d9cfba;
	padding-block: 0;
}

.trailhead-footer .container {
	padding: 86px 32px 31px;
}

.trailhead-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 32px;
	margin-bottom: 24px;
}

.trailhead-footer__brand {
	display: flex;
	align-items: center;
	gap: 16px;
}

.trailhead-footer__brand img {
	width: 84px;
	height: 84px;
	display: block;
}

.trailhead-footer__wordmark {
	font-family: var(--font-heading);
	font-size: 26px;
	line-height: 1;
	color: var(--color-text-on-dark-muted);
}

.trailhead-footer__col,
.trailhead-footer__donate {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 15px;
}

.trailhead-footer__heading {
	font-family: var(--font-heading);
	font-size: 17px;
	color: var(--color-text-on-dark-muted);
}

.trailhead-footer__col a,
.trailhead-footer__donate a {
	color: var(--color-accent-light);
	width: fit-content;
}

.trailhead-footer__donate {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	line-height: 1.5;
}

.trailhead-footer__qr {
	width: 84px;
	height: 84px;
	flex: none;
	border-radius: 6px;
	display: block;
}

.trailhead-footer__bottom {
	border-top: 1px solid #34463a;
	padding-top: 12px;
	font-size: 14px;
	color: #a89f8c;
	text-align: center;
}