/*
Theme Name: Bogmire University
Theme URI: https://bogmire.edu
Author: Bogmire University
Description: A custom theme for Bogmire University of Advanced Magic — an institution for higher magical learning. Features a customizable hero section driven by the site's featured image, gothic-cloister styling, and Caslon Antique typography.
Version: 1.2.12
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: bogmire
*/

/* =========================================================
   0. FONTS
   ========================================================= */
@font-face {
	font-family: 'Caslon Antique';
	src: url('assets/fonts/CaslonAntique.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Caslon Antique';
	src: url('assets/fonts/CaslonAntique-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Caslon Antique';
	src: url('assets/fonts/CaslonAntique-Italic.ttf') format('truetype');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* =========================================================
   1. TOKENS
   ========================================================= */
:root {
	--bogmire-green-950: #001502;
	--bogmire-green-900: #06210b;
	--bogmire-green-800: #0c2e14;
	--bogmire-maroon: #722b45;
	--bogmire-maroon-dark: #591f36;
	--bogmire-gold: #bea053;
	--bogmire-gold-light: #bea053;
	--bogmire-gold-dim: #8a742f;
	--bogmire-cream: #e2d6c6;
	--bogmire-parchment: #d4bc9a;
	--bogmire-ink: #1a1712;
	--bogmire-paper: #f5f0e6;

	/* Exact brand colors */
	--menu-bg: #0c2e14;
	--menu-text: #d3bc9a;
	--menu-border: #fce48c;
	--hero-title: #e2d6c6;
	--hero-subtitle: #e2d6c6;
	--hero-text: #e2d6c6;
	--hero-btn-bg: #000000;
	--hero-btn-border: #fce48e;
	--hero-btn-text: #d4bc9a;

	--font-display: 'Caslon Antique', 'Iowan Old Style', Georgia, serif;
	--font-body: "PT Sans", sans-serif;
	--font-content: 'Source Sans 3', sans-serif;

	--container-width: 1280px;
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2.5rem;
	--space-5: 4rem;
	--space-6: 6rem;
	--radius: 2px;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	background: var(--bogmire-paper);
	color: var(--bogmire-ink);
	font-size: 1em;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-display);
	font-weight: 400;
/*	letter-spacing: 0.02em;*/
	margin: 0 0 var(--space-2);
	color: var(--bogmire-ink);
	/*margin-top: 60px;*/
}

h1, .h1 { font-size:4rem; }
h2, .h2 { font-size:3rem; }
h3, .h3 { font-size:2.75rem; }
h4, .h4 { font-size:2.25rem; }
h5, .h5 { font-size:2rem; }
h6, .h6 { font-size:1.5rem; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0,0,0,0); border: 0;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--bogmire-gold);
	outline-offset: 2px;
}
.container {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 var(--space-3);
}
.eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.8rem;
	color: var(--bogmire-gold);
}
.divider {
	display: block;
	margin: var(--space-3) auto;
	opacity: 0.85;
}
.btn {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 1.1rem;
	padding: 1em 2.4em;
	border: 1px solid var(--hero-btn-border);
	background: var(--hero-btn-bg);
	color: var(--hero-btn-text);
	transition: all 0.25s ease-in-out;
}
.btn:hover, .btn:focus-visible {
	background: var(--hero-btn-border);
	color: var(--hero-btn-bg);
	border-color: var(--bogmire-gold-light);
}
.applications-btn {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 1rem;
	padding: 0.7em 1.6em;
	border: 1px solid var(--menu-border);
	color: var(--menu-text);
	text-align: center;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.applications-btn span {
	display: block;
	font-style: italic;
	opacity: 0.9;
	letter-spacing: 0.02em;
	text-transform: none;
}
a.applications-btn:hover,
a.applications-btn:focus-visible {
	background: var(--menu-border);
	color: var(--menu-bg);
	border-color: var(--bogmire-gold-light);
}

/* =========================================================
   3. SITE HEADER
   ========================================================= */
.site-header {
	position: relative;
	background: var(--menu-bg);
	border-bottom: 1px solid var(--menu-border);
	z-index: 100;
}
.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	min-height: 124px;
}
/* At desktop widths, the row becomes a 3-column grid: left zone,
   logo, right zone. The two zones are each `1fr` — a guaranteed
   equal share of the remaining width — so the boundary between them
   always falls at the true horizontal center, regardless of how much
   text is in either menu or in the Applications button. The logo
   lives in its own grid column between them, so nav text and the
   logo can never occupy the same space; there's no gap math to get
   wrong. Below 783px, everything reverts to the simple stacked
   mobile layout (see the responsive section). */
@media (min-width: 783px) {
	.site-header .container {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		column-gap: 80px;
	}
}
.site-header__zone {
	display: contents;
}
/* Transparent to layout at desktop — its two children (the zones)
   are placed directly by the grid via their own grid-column values
   below, regardless of this wrapper existing in the DOM between
   them and the container. Only becomes a real, positioned box in
   the mobile media query further down. */
.site-header__mobile-menu {
	display: contents;
}
@media (min-width: 783px) {
	.site-header__zone {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-width: 0;
	}
	.site-header__zone--left { grid-column: 1; grid-row: 1; }
	.site-header__zone--right { grid-column: 3; grid-row: 1; }
}
.site-header__nav,
.site-header__nav > ul {
	display: contents;
}
.site-header__nav li {
	position: relative;
}
.site-header__nav a {
	font-family: var(--font-display);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	font-size: 1.15rem;
	color: var(--menu-text);
	white-space: nowrap;
	padding: 0.4em 0;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.site-header__nav a:hover,
.site-header__nav a:focus-visible,
.site-header__nav .current-menu-item > a {
	color: var(--bogmire-gold-light);
	border-color: var(--bogmire-gold);
}

/* Submenu dropdowns. WordPress already nests child menu items in a
   <ul class="sub-menu"> automatically (via the default nav walker) —
   these rules just style and position that markup. Opens on hover,
   on keyboard focus (tab), and on click/tap (via the small toggle
   button navigation.js adds next to any item with children). */
.site-header__nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 200;
	min-width: 220px;
	margin: 0;
	padding: 0.5em 0;
	background: var(--bogmire-ink);
	border: 1px solid var(--menu-border);
	text-align: left;
}
.site-header__nav li:hover > .sub-menu,
.site-header__nav li:focus-within > .sub-menu,
.site-header__nav li.is-submenu-open > .sub-menu {
	display: block;
}
.site-header__nav .sub-menu li { position: static; }
.site-header__nav .sub-menu a {
	display: block;
	padding: 0.6em 1.25em;
	font-size: 1rem;
	white-space: nowrap;
	border-bottom: none;
}
.site-header__nav .sub-menu a:hover,
.site-header__nav .sub-menu a:focus-visible {
	color: var(--bogmire-gold-light);
	background: rgba(255,255,255,0.06);
	border-color: transparent;
}
.submenu-toggle {
	background: none;
	border: none;
	color: inherit;
	font-size: 0.7em;
	margin-left: 0.3em;
	padding: 0 0.2em;
	cursor: pointer;
	vertical-align: middle;
}

.site-header__logo {
	position: relative;
	flex-shrink: 0;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (min-width: 783px) {
	.site-header__logo { grid-column: 2; grid-row: 1; }
}
.site-header__logo a {
	display: block;
}
.site-header__logo img {
	height: 100px;
	width: auto;
	display: block;
}
.site-header__cta {
	flex-shrink: 0;
}
.site-header__mobile-toggle {
	display: none;
	background: none;
	border: 1px solid var(--menu-border);
	color: var(--menu-text);
	width: 44px;
	height: 44px;
	font-size: 1.4rem;
	cursor: pointer;
}

/* The downward-pointing flap hanging below the header, nested inside
   the logo so it always tracks the crest's actual position (flex
   distribution can shift the logo left/right depending on how many
   nav items are on each side). It sits flush against the header's
   own bottom border, filled with the same background, with the
   border tracing only its two diagonal sides down to a sharp point. */
.site-header__point {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translateX(-50%);
	width: 150px;
	height: 41px;
	pointer-events: none;
	z-index: 1;
}
.site-header__point svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* =========================================================
   4. HERO (front page)
   ========================================================= */
.hero {
	position: relative;
	min-height: 92vh;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:rgba(0,8,2,0.7);
}
.hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	text-align: center;
	padding: var(--space-6) var(--space-3);
}
.hero__title {
	font-size: clamp(4rem, 6.8vw, 5.8rem);
	font-weight: 400;
	color: var(--hero-title);
	line-height: 1.05;
	text-shadow: 0 4px 24px rgba(0,0,0,0.6);
	margin-bottom: var(--space-1);
	margin:0;
	text-transform: uppercase;
}
.hero__subtitle {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(2.5rem, 6.8vw, 4.25rem);
	color: var(--hero-subtitle);
	margin-bottom: 0;
	margin-top:10px;
}
.hero__description {
	font-family: var(--font-content);
	max-width: 660px;
	margin: 0 auto var(--space-4);
	color: var(--hero-text);
	font-size: clamp(2rem, 2.6vw, 2.25rem);
	line-height: 1.25;
}
.hero__description p { margin: 0.2em 0; }
.hero__cta .btn { font-size: 1.25rem; }

/* Plain full-width featured image, used by the default and Container
   page templates (no title/excerpt overlay — see .page-hero below
   for that). Fixed height, cropped rather than stretched. */
.page-featured-image {
	width: 100%;
	height: 400px;
	overflow: hidden;
}
.page-featured-image__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Hero Header page template: title (+ excerpt, if set) overlaid on
   the featured image. Falls back to a plain dark panel if no
   featured image is set, so the title still has somewhere to live. */
.page-hero {
	position: relative;
	/*min-height: 450px;*/
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: var(--menu-bg);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	padding: var(--space-4) var(--space-3);
}
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(var(--hero-overlay-rgb, 0,8,2), var(--hero-overlay-opacity, 0.65));
}
.page-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 900px;
}
.page-hero__title {
	font-size: clamp(3.5rem, 6.8vw, 5rem);
	font-weight: 400;
	color: var(--hero-title);
	line-height: 1.05;
	text-shadow: 0 4px 24px rgba(0,0,0,0.6);
	margin-bottom: var(--space-1);
	margin-top:60px;
}
.page-hero__excerpt {
	margin: 0;
	margin-bottom:60px;
	color: var(--hero-subtitle);
	font-family: var(--font-content);
	font-size: 2rem;
	line-height: 1.25;
	text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

/* Header Size setting (block editor sidebar, Hero Header template
   and single posts). "Default" applies no min-height — it inherits
   whatever .page-hero computes naturally from its padding/content,
   same as before this setting existed. */
.page-hero--medium { min-height: 400px; }
.page-hero--large { min-height: 600px; }
.page-hero--full { min-height: 100vh; }

/* Hero CTA buttons (Hero Buttons block, extracted from the start of
   the content into the hero overlay). Centers the group regardless
   of the alignment chosen in the editor, since everything else in
   the hero is centered — button colors/styles themselves are left
   entirely to the Button block's own controls. */
.page-hero__buttons {
	margin-top: var(--space-2);
}
.page-hero__buttons .wp-block-buttons {
	justify-content: center;
}

/* =========================================================
   5. PAGE / CONTENT AREAS
   ========================================================= */

#main-content {
	font-family: var(--font-content);
	font-size:1.3rem;
	line-height: 1.3;
}

#main-content .container {
	padding: var(--space-3);
}

/* Normal text links inside page content. Only plain, unclassed anchors
   receive the content-link treatment. Component/UI links keep their own
   colors and decoration without the theme trying to infer button classes. */
:where(#main-content) :where(p, blockquote, figcaption, dd, .wp-block-list, .wp-block-table) a:not([class]):not([role="button"]) {
	color: #4d9376;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Never decorate links that are explicitly presented as controls. */
#main-content a.bcom-button,
#main-content a.bcom-profile-button,
#main-content a.btn,
#main-content a.button,
#main-content a.woocommerce-button,
#main-content a.checkout-button,
#main-content a.wp-block-button__link,
#main-content a[role="button"] {
	text-decoration: none;
}

/* Page-content typography: Caslon is reserved for the primary H1.
   Everything below that level uses Source Sans. Global site chrome
   (header, footer, navigation and buttons) keeps its existing fonts. */
#main-content h2,
#main-content h3,
#main-content h4,
#main-content h5,
#main-content h6,
#main-content .h2,
#main-content .h3,
#main-content .h4,
#main-content .h5,
#main-content .h6 {
	font-family: var(--font-content);
}

/* Buttons retain the typography they had before page content moved to
   Source Sans. */
#main-content button,
#main-content input[type="button"],
#main-content input[type="submit"],
#main-content input[type="reset"],
#main-content .wp-block-button__link {
	font-family: var(--font-body);
}

#main-content .btn {
	font-family: var(--font-display);
}

.page-header {
	background: var(--bogmire-green-950);
	color: var(--bogmire-paper);
	padding: var(--space-5) 0 var(--space-4);
	text-align: center;
	border-bottom: 4px solid var(--bogmire-maroon);
}
.page-header__title {
	color: var(--bogmire-cream);
	font-size: clamp(2rem, 4vw, 3rem);
}
.page-header__desc {
	font-family: var(--font-content);
	color: var(--bogmire-parchment);
	font-style: italic;
}
.content-area {
	padding: var(--space-5) 0;
}
.content-area.narrow .container { max-width: 820px; }
article.hentry { margin-bottom: var(--space-5); }
.entry-title {
	font-size: clamp(1.8rem, 3vw, 2.6rem);
}
.entry-title a { color: var(--bogmire-ink); }
.entry-meta {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bogmire-maroon);
	margin-bottom: var(--space-2);
}
.entry-content p { margin: 0 0 1.2em; }
.entry-content blockquote {
	border-left: 3px solid var(--bogmire-maroon);
	margin: var(--space-3) 0;
	padding-left: var(--space-3);
	font-style: italic;
	color: #444;
}
.entry-content img { margin: var(--space-2) 0; }
.entry-thumb { margin-bottom: var(--space-3); }
.entry-thumb img { width: 100%; }
.post-nav {
	display: flex;
	justify-content: space-between;
	padding-top: var(--space-3);
	border-top: 1px solid #d9cfbb;
	font-family: var(--font-content);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.9rem;
}
.pagination {
	display: flex;
	gap: var(--space-1);
	justify-content: center;
	margin-top: var(--space-4);
	font-family: var(--font-content);
}
.pagination a, .pagination span {
	padding: 0.5em 0.9em;
	border: 1px solid var(--bogmire-maroon);
	color: var(--bogmire-maroon);
}
.pagination .current {
	background: var(--bogmire-maroon);
	color: var(--bogmire-paper);
}
.not-found {
	text-align: center;
	padding: var(--space-6) 0;
}

/* Sidebar (used on index/archive/single if a widget area is populated) */
.layout-with-sidebar {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: var(--space-5);
}
.widget { margin-bottom: var(--space-4); }
.widget-title {
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-bottom: 2px solid var(--bogmire-maroon);
	padding-bottom: 0.4em;
}

.bog-spacer { height:60px; }

.archive-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
	padding: var(--space-5) 0;
}
.archive-item__link {
	display: block;
	color: inherit;
}
.archive-item__thumb {
	overflow: hidden;
	margin-bottom: var(--space-2);
	aspect-ratio: 4 / 3;
}
.archive-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.archive-item__link:hover .archive-item__thumb img,
.archive-item__link:focus-visible .archive-item__thumb img {
	transform: scale(1.03);
}
.archive-item__title {
	font-size: 1.4rem;
	text-align: center;
	margin: 0;
}
@media (max-width: 900px) {
	.archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.archive-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   6. FOOTER
   ========================================================= */
.site-footer {
	background: var(--bogmire-green-950);
	color: var(--bogmire-parchment);
	position: relative;
}
.site-footer__divider {
	border: 0;
	border-top: 1px solid var(--bogmire-gold-dim);
	margin: 0;
}
.site-footer__top {
	padding: var(--space-5) 0 var(--space-4);
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr 1fr;
	gap: var(--space-4);
}
.footer-brand__crest {
	display:inline-block;
	width: 200px;
	margin-bottom: var(--space-2);
}
.footer-brand__name {
	font-family: var(--font-display);
	color: var(--bogmire-cream);
	font-size: 1.3rem;
	margin-bottom: 0.3em;
}
.footer-brand__desc {
	color: var(--bogmire-parchment);
	font-size: 0.95rem;
	opacity: 0.85;
	max-width: 34ch;
}
.footer-col-title {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 1.25rem;
	color: var(--bogmire-gold);
	margin-bottom: var(--space-2);
}
.footer-col ul li { margin-bottom: 0.6em; }
.footer-col ul a {
	font-size: 1rem;
	line-height:0.9em;
	color: var(--bogmire-parchment);
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-col ul a:hover, .footer-col ul a:focus-visible {
	color: var(--bogmire-gold-light);
	border-color: var(--bogmire-gold-dim);
}
.footer-col address { font-style: normal;}
.footer-social { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.footer-social a {
	width: 38px; height: 38px;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--bogmire-gold-dim);
	color: var(--bogmire-gold-light);
	border-radius: 50%;
	font-size: 0.85rem;
}
.footer-social a:hover, .footer-social a:focus-visible {
	background: var(--bogmire-gold);
	color: var(--bogmire-green-950);
	border-color: var(--bogmire-gold-light);
}
.site-footer__bottom {
	border-top: 1px solid rgba(191,153,61,0.25);
	padding: var(--space-2) 0 var(--space-3);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-1);
	color: var(--bogmire-parchment);
	opacity: 0.75;
}
.site-footer__bottom nav ul { display: flex; gap: var(--space-3); }
.site-footer__bottom nav a:hover { color: var(--bogmire-gold-light); }

/* =========================================================
   7. RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.layout-with-sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 782px) {
	.site-header__mobile-toggle { display: block; }
	/* One single dropdown panel instead of two independently-positioned
	   ones. Previously nav-left and nav-right were each absolutely
	   positioned at the same top:100%/left:0/right:0 spot and toggled
	   together, so the second one rendered on top of and hid parts of
	   the first — that was the "missing items, wrong order" bug. Now
	   there's exactly one positioned element, and the two menus (plus
	   the Applications button) just stack inside it in normal order. */
	.site-header__mobile-menu {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: var(--space-3);
		background: var(--bogmire-green-950);
		border-bottom: 1px solid var(--bogmire-gold-dim);
		padding: var(--space-3);
		z-index: 150;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-8px);
		transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
	}
	.site-header__mobile-menu.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
		transition: opacity 0.22s ease, transform 0.22s ease;
	}
	.site-header__nav > ul {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
		width: 100%;
	}
	.site-header__nav .sub-menu {
		display: block;
		position: static;
		background: none;
		border: none;
		padding: 0.5em 0 0 1em;
		margin-top: 0.5em;
	}
	.site-header__nav .sub-menu li:not(:last-child) {
		margin-bottom: 0.5em;
	}
	.site-header__mobile-menu .site-header__cta {
		margin-top: var(--space-1);
		padding-top: var(--space-2);
		border-top: 1px solid var(--bogmire-gold-dim);
	}
	.submenu-toggle { display: none; }
	.site-header__logo img { height: 76px; }
	.site-header__point { display: none; }
	.footer-grid { grid-template-columns: 1fr; }
	.site-footer { text-align: center; }
	.site-footer__bottom { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; }
}




/** OVERRIDES **/
.pum-container { padding:0px!important; background-color: transparent!important; }
/* =========================================================
   8. LOGGED-IN USER MENU
   ========================================================= */
.site-header__user-menu {
	position: relative;
	flex-shrink: 0;
}
.site-header__user-menu-toggle {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 170px;
	padding: 0.5rem 0.75rem;
	border: 0;
	background: transparent;
	color: var(--menu-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.site-header__user-menu-toggle:focus-visible {
	outline: 2px solid var(--menu-border);
	outline-offset: 3px;
}
.site-header__user-avatar {
	display: block;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--bogmire-paper);
}
.site-header__user-avatar img,
.site-header__user-avatar-img {
	display: block;
	width: 42px;
	height: 42px;
	object-fit: cover;
}
.site-header__user-label {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	font-family: 'Source Sans 3', sans-serif;
	line-height: 1.1;
}
.site-header__user-label strong {
	display: block;
	overflow: hidden;
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0.07em;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
}
.site-header__user-label > span {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.8rem;
	font-style: italic;
	letter-spacing: 0.02em;
	opacity: 0.9;
}
.site-header__user-chevron {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	font-size: 22px;
	line-height: 22px;
	transition: transform 0.22s ease;
}
.site-header__user-menu.is-open .site-header__user-chevron {
	transform: rotate(180deg);
}
.site-header__user-notification-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	height: 1.5rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--bogmire-maroon);
	color: var(--bogmire-paper);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}
.site-header__user-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 250;
	min-width: 240px;
	background: var(--bogmire-ink);
	border: 1px solid var(--menu-border);
	box-shadow: 0 10px 28px rgba(0,0,0,0.28);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-7px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.site-header__user-menu.is-open .site-header__user-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition-delay: 0s;
}
.site-header__user-menu-list {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0;
}
.site-header__user-menu-list li {
	position: relative;
	margin: 0;
	padding: 0;
}
.site-header__user-menu-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.7rem 1rem;
	border: 0;
	color: var(--menu-text);
	font-family: 'Source Sans 3', sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
}
.site-header__user-menu-list a:hover,
.site-header__user-menu-list a:focus-visible,
.site-header__user-menu-list .current-menu-item > a {
	background: rgba(255,255,255,0.06);
	color: var(--bogmire-gold-light);
}
.site-header__user-menu-list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0 0 0.35rem 0.75rem;
}
.site-header__user-menu-list .sub-menu a {
	font-size: 0.86rem;
	opacity: 0.9;
}
.site-header__user-menu-list .bogmire-user-menu-logout {
	margin-top: 0.4rem;
	padding-top: 0.4rem;
	border-top: 1px solid rgba(252,228,140,0.25);
}

@media (max-width: 782px) {
	.site-header__user-menu,
	.site-header__user-menu-toggle,
	.site-header__user-dropdown {
		width: 100%;
	}
	.site-header__user-menu-toggle {
		justify-content: flex-start;
	}
	.site-header__user-dropdown {
		top: calc(100% + 0.5rem);
		right: 0;
		box-shadow: 0 10px 28px rgba(0,0,0,0.28);
	}
}


/* =========================================================
   FULL-SCREEN LOGIN PAGE
   The /login/ page uses page-login.php and its Featured Image as the
   left-hand visual. Header/footer/global chrome are intentionally absent.
   ========================================================= */
body.bogmire-login-screen {
	margin: 0;
	min-height: 100vh;
	background: var(--bogmire-paper);
	font-family: var(--font-content);
	color: var(--bogmire-ink);
}

.bogmire-login-layout {
	min-height: 100vh;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(440px, 1fr);
}

.bogmire-login-layout__visual {
	min-height: 100vh;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.bogmire-login-layout__panel {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(2rem, 6vw, 6rem);
	background: var(--bogmire-paper);
}

.bogmire-login-layout__content {
	width: min(100%, 430px);
}

.bogmire-login-layout__crest {
	display: block;
	width: 180px;
	margin: 0 auto 1.7rem;
	line-height: 0;
}

.bogmire-login-layout__crest-image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

.bogmire-login-layout__heading {
	text-align: center;
	margin-bottom: 1.75rem;
}

.bogmire-login-layout__heading h1 {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 4vw, 3.1rem);
	font-weight: 400;
	line-height: 1.05;
	color: var(--bogmire-ink);
}

.bogmire-login-layout__heading p {
	margin: 0.55rem 0 0;
	font-family: var(--font-content);
	font-size: 1.05rem;
	color: rgba(26, 23, 18, 0.52);
}

.bogmire-login-layout__form .bcom-form--login {
	max-width: none;
	margin: 0;
	font-family: var(--font-content);
}

.bogmire-login-layout__form .bcom-field {
	margin-bottom: 1.2rem;
	gap: 0.45rem;
}

.bogmire-login-layout__form .bcom-field label {
	font-family: var(--font-content);
	font-size: 1rem;
	font-weight: 500;
	color: var(--bogmire-ink);
}

.bogmire-login-layout__form .bcom-field input[type="text"],
.bogmire-login-layout__form .bcom-field input[type="email"],
.bogmire-login-layout__form .bcom-field input[type="password"] {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.85rem;
	border: 1px solid rgba(26, 23, 18, 0.2);
	border-radius: 4px;
	background: #fff;
	box-shadow: none;
	font-family: var(--font-content);
}

.bogmire-login-layout__form .bcom-field input:focus {
	border-color: var(--bogmire-gold);
	outline: 2px solid rgba(190, 160, 83, 0.28);
	outline-offset: 0;
}

.bcom-login-form__options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: -0.15rem 0 1.15rem;
	font-size: 0.94rem;
}

.bcom-login-form__remember {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 400;
	cursor: pointer;
}

.bcom-login-form__remember input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--bogmire-maroon);
}

.bcom-login-form__forgot,
.bcom-login-form__enroll a,
.bogmire-login-layout__form .bcom-form--login > .bcom-field > a {
	color: #3f806b;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.bcom-login-form__forgot:hover,
.bcom-login-form__enroll a:hover,
.bogmire-login-layout__form .bcom-form--login > .bcom-field > a:hover {
	color: var(--bogmire-maroon);
}

.bogmire-login-layout__form .bcom-login-form__submit {
	margin-bottom: 1.45rem;
}

.bogmire-login-layout__form .bcom-login-form__submit .bcom-button,
.bogmire-login-layout__form .bcom-field--submit .bcom-button {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 1rem;
	background: var(--bogmire-maroon);
	border: 2px solid var(--bogmire-gold);
	border-radius: 0;
	color: var(--menu-border);
	font-family: var(--font-content);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.2;
}

.bogmire-login-layout__form .bcom-login-form__submit .bcom-button:hover,
.bogmire-login-layout__form .bcom-login-form__submit .bcom-button:focus-visible,
.bogmire-login-layout__form .bcom-field--submit .bcom-button:hover,
.bogmire-login-layout__form .bcom-field--submit .bcom-button:focus-visible {
	background: var(--bogmire-maroon-dark);
	color: var(--menu-border);
}

.bcom-login-form__enroll {
	margin: 0;
	text-align: center;
	font-size: 0.95rem;
}

.bogmire-login-layout__form .bcom-notice,
.bogmire-login-layout__form .bcom-errors {
	margin-bottom: 1.25rem;
}

@media (max-width: 800px) {
	.bogmire-login-layout {
		display: block;
	}

	.bogmire-login-layout__visual {
		display: none;
	}

	.bogmire-login-layout__panel {
		min-height: 100vh;
		padding: 2.5rem 1.4rem;
	}

	.bogmire-login-layout__crest {
		width: 82px;
		margin-bottom: 1.4rem;
	}

	.bogmire-login-layout__crest-image {
		height: 96px;
	}
}

@media (max-width: 420px) {
	.bcom-login-form__options {
		align-items: flex-start;
		font-size: 0.9rem;
	}
}