/* ==========================================================================
   Abuja Plastics — theme stylesheet
   Modern, clean/clinical redesign. Brand colors refreshed, no framework
   dependency (no Bootstrap). Mobile-first, CSS custom properties.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp,
strike, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol { list-style: decimal; padding: 0 0 0 20px; margin: 0 0 15px; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; background: none; cursor: pointer; }

/* ---------- Design tokens ---------- */
:root {
	--color-ink: #18160f;
	--color-body: #55503f;
	--color-muted: #8a8371;
	--color-maroon: #9c2138;
	--color-maroon-dark: #7a1a2c;
	--color-gold: #ab8a4c;
	--color-gold-light: #ddc98f;
	--color-charcoal: #18160f;
	--color-charcoal-soft: #262218;
	--color-cream: #f7f5ef;
	--color-cream-deep: #efe9d8;
	--color-white: #ffffff;
	--color-border: #e8e2d2;

	--font-body: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--font-heading: 'Questrial', var(--font-body);

	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-lg: 14px;

	--shadow-sm: 0 1px 2px rgba(24, 22, 15, 0.06), 0 1px 1px rgba(24, 22, 15, 0.04);
	--shadow-md: 0 8px 24px rgba(24, 22, 15, 0.07);
	--shadow-lg: 0 20px 45px rgba(24, 22, 15, 0.13);

	--container-width: 1360px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	font-family: var(--font-body);
	color: var(--color-body);
	background: var(--color-white);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
a { color: var(--color-maroon); text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease, opacity 0.15s ease; }
a:hover, a:focus { color: var(--color-maroon-dark); }
strong, b { font-weight: 700; }
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-ink); font-weight: 400; line-height: 1.2; margin: 0 0 18px; }
h1 { font-size: clamp(32px, 5vw, 52px); letter-spacing: -0.01em; }
h2 { font-size: clamp(24px, 3vw, 32px); }
h3 { font-size: 21px; color: var(--color-maroon); }
h4, h5, h6 { font-size: 17px; }
p { margin: 0 0 18px; }

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: 20px;
}

.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-gold);
	margin-bottom: 14px;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	padding: 16px 30px;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-block { display: flex; width: 100%; }
.btn-primary {
	background: var(--color-maroon);
	color: var(--color-white);
	box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-primary:focus { background: var(--color-maroon-dark); color: var(--color-white); }
.btn-light {
	background: var(--color-white);
	color: var(--color-maroon);
}
.btn-light:hover { background: var(--color-cream); color: var(--color-maroon-dark); }
.btn-outline {
	background: transparent;
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.55);
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.12); color: var(--color-white); border-color: var(--color-white); }

/* ---------- Topbar ---------- */
.topbar {
	background: var(--color-charcoal);
	color: var(--color-cream-deep);
	font-size: 13px;
}
.topbar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 10px 0;
}
@media (max-width: 700px) {
	.topbar__inner { justify-content: center; text-align: center; }
	.topbar__right { flex-wrap: wrap; justify-content: center; }
}
.topbar__address,
.topbar .email a {
	font-weight: 700;
	font-size: 15px;
	color: var(--color-gold-light);
	letter-spacing: 0.01em;
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.topbar__address svg,
.topbar .email svg { width: 14px; height: 14px; fill: var(--color-gold-light); flex: none; }
.topbar__right { display: flex; align-items: center; gap: 18px; }
.topbar .phone {
	font-weight: 700;
	font-size: 15px;
	color: var(--color-gold-light);
	letter-spacing: 0.01em;
}
.topbar .phone a { color: inherit; display: inline-flex; align-items: center; gap: 7px; }
.topbar .phone svg { width: 14px; height: 14px; fill: var(--color-gold-light); flex: none; }
@media (max-width: 700px) {
	.topbar .email { display: none; }
	.topbar__address { display: none; }
}

.list-social { display: flex; align-items: center; gap: 8px; margin: 0; }
.list-social li { margin: 0; }
.list-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-gold-light);
}
.list-social a:hover { background: var(--color-gold); color: var(--color-charcoal); }
.list-social svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------- Header / nav ---------- */
.site-header {
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 14px;
	/* Must stay above .nav-backdrop (z-index 150): the sliding mobile
	   panel (.main-nav) is nested inside this element, and CSS stacking
	   compares ancestors first — if this were lower than the backdrop,
	   the panel would render behind/tinted by it regardless of its own
	   higher z-index. */
	z-index: 300;
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	width: 100%;
	padding: 24px clamp(20px, 4vw, 56px);
}
.logo, .custom-logo-link { display: inline-flex; align-items: center; flex: none; }
.logo img, .custom-logo { max-height: 88px; width: auto; }
@media (max-width: 600px) {
	.logo img, .custom-logo { max-height: 60px; }
}

/* On the homepage's transparent header, show the "main" logo by default
   and swap to the "sticky" logo once the header solidifies on scroll.
   Selectors are scoped under .site-header so they reliably out-specificity
   the base ".logo { display: inline-flex }" rule regardless of source order. */
.site-header .logo--sticky { display: none; }
.site-header--transparent.is-scrolled .logo--main { display: none; }
.site-header--transparent.is-scrolled .logo--sticky { display: inline-flex; }

.header-cta { flex: none; white-space: nowrap; }

.call-btn {
	display: none;
	align-items: center;
	gap: 8px;
	background: var(--color-maroon);
	color: var(--color-white);
	padding: 10px 16px;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 14px;
}
.call-btn:hover { background: var(--color-maroon-dark); color: var(--color-white); }
.call-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* Transparent header overlaying the homepage hero, solidifies on scroll.
   .header-anchor is a zero-height positioning context so the absolutely
   placed header sits right after the topbar without needing its height. */
.site-header--transparent {
	background: transparent;
	border-bottom-color: transparent;
}
.site-header--transparent .nav-toggle span { background: var(--color-white); }
.site-header--transparent .nav-toggle { border-color: rgba(255, 255, 255, 0.5); }
@media (min-width: 901px) {
	.header-anchor { position: relative; height: 0; }
	.site-header--transparent { position: absolute; top: 0; left: 0; right: 0; z-index: 100; }
	.site-header--transparent .main-nav__list > li > a { color: var(--color-white); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
	.site-header--transparent .main-nav__list > li > a:hover { background: rgba(255, 255, 255, 0.12); color: var(--color-white); }
	.site-header--transparent.is-scrolled {
		position: fixed;
		background: var(--color-white);
		border-bottom-color: var(--color-border);
		box-shadow: var(--shadow-sm);
	}
	.site-header--transparent.is-scrolled .main-nav__list > li > a { color: var(--color-ink); text-shadow: none; }
	.site-header--transparent.is-scrolled .nav-toggle span { background: var(--color-ink); }
	.site-header--transparent.is-scrolled .nav-toggle { border-color: var(--color-border); }
}
@media (max-width: 900px) {
	.site-header--transparent { position: sticky; top: 14px; background: var(--color-charcoal); }
}

.nav-close { display: none; }

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
}
.nav-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--color-ink);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.main-nav__list {
	display: flex;
	align-items: stretch;
	gap: 2px;
	margin: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.main-nav__list > li { position: relative; display: flex; align-items: stretch; }
.main-nav__list > li > a {
	display: flex;
	align-items: center;
	padding: 12px 15px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink);
	border-radius: var(--radius-sm);
	white-space: nowrap;
}
.main-nav__list > li > a:hover,
.main-nav__list > li > a:focus {
	background: var(--color-cream);
	color: var(--color-maroon);
}
.main-nav__list > li.current_page_item > a,
.main-nav__list > li.current-menu-item > a,
.main-nav__list > li.current-menu-ancestor > a { color: var(--color-maroon); }

ul.children {
	list-style: none;
	margin: 0;
}
ul.children li { position: relative; }

/* Desktop dropdown */
@media (min-width: 901px) {
	ul.children {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 220px;
		background: var(--color-white);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-lg);
		padding: 8px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
		z-index: 20;
	}
	.main-nav__list > li:hover > ul.children,
	.main-nav__list > li:focus-within > ul.children,
	ul.children li:hover > ul.children,
	ul.children li:focus-within > ul.children {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	/* Nested (3rd-level+) submenus flyout to the right of their parent
	   item instead of stacking below it, so they stay reachable/visible. */
	ul.children ul.children {
		top: -9px;
		left: 100%;
		margin-left: 6px;
	}
	ul.children li a {
		display: block;
		padding: 10px 12px;
		border-radius: var(--radius-sm);
		font-size: 14px;
		font-weight: 500;
		color: var(--color-body);
	}
	ul.children li a:hover { background: var(--color-cream); color: var(--color-maroon); }
	.submenu-toggle { display: none; }

	/* Forward/down indicators for items that have their own submenu. */
	.main-nav__list > li:has(> ul.children) > a {
		display: inline-flex;
		align-items: center;
		gap: 5px;
	}
	.main-nav__list > li:has(> ul.children) > a::after {
		content: '';
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		margin-top: -3px;
		flex: none;
	}
	ul.children li:has(> ul.children) > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
	}
	ul.children li:has(> ul.children) > a::after {
		content: '';
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(-45deg);
		flex: none;
	}
}

/* Mobile nav */
@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; }
	.call-btn { display: inline-flex; }
	.header-cta { display: none; }
	.main-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(340px, 85vw);
		background: var(--color-white);
		box-shadow: var(--shadow-lg);
		transform: translateX(100%);
		transition: transform 0.25s ease;
		overflow-y: auto;
		padding: 72px 20px 24px;
		z-index: 200;
	}
	.main-nav.is-open { transform: translateX(0); }
	.nav-close {
		position: absolute;
		top: 16px;
		right: 16px;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--radius-sm);
		border: 1px solid var(--color-border);
		color: var(--color-ink);
	}
	.nav-close svg { width: 18px; height: 18px; }
	.nav-close:hover { background: var(--color-cream); }
	.main-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.main-nav__list > li { flex-direction: column; border-bottom: 1px solid var(--color-border); }
	.main-nav__list > li > a { padding: 14px 6px; flex: 1; }
	ul.children {
		display: none;
		padding: 0 0 10px 14px;
	}
	li.submenu-open > ul.children { display: block; }
	ul.children li a {
		display: block;
		padding: 10px 6px;
		font-size: 14px;
		color: var(--color-body);
	}
	ul.children ul.children { padding-left: 14px; }
	.submenu-toggle {
		position: absolute;
		right: 0;
		top: 4px;
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.submenu-toggle svg { width: 12px; height: 12px; fill: var(--color-ink); transition: transform 0.2s ease; }
	li.submenu-open .submenu-toggle svg { transform: rotate(180deg); }
	.nav-backdrop {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(20, 17, 12, 0.45);
		z-index: 150;
	}
	.nav-backdrop.is-open { display: block; }
}

/* ---------- Hero (homepage) ---------- */
.hero {
	position: relative;
	color: var(--color-white);
	overflow: hidden;
}
.hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(24, 22, 15, 0.55) 0%, rgba(24, 22, 15, 0.35) 40%, rgba(24, 22, 15, 0.72) 100%);
}
.hero__inner {
	position: relative;
	/* 100vh includes the mobile browser's address bar, so it keeps
	   recalculating as that bar shows/hides on scroll — resizing the hero
	   underneath the Ken Burns zoom animation and making it look like it's
	   jumping/resetting instead of smoothly looping. 100dvh tracks the
	   actual visible viewport instead; the 100vh above it is a fallback
	   for browsers that don't support dvh (an unsupported value is
	   ignored, so the vh line still applies there). */
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	/* Shifting weight from top to bottom padding nudges the centered
	   content up a bit (see the mobile media query below for the math)
	   while keeping enough top clearance for the floating transparent
	   header, which overlaps the hero on desktop. */
	padding: 100px 0 150px;
}
@media (max-width: 900px) {
	/* On mobile the header sits in normal flow above the hero (not
	   floating on top of it like on desktop), so the hero no longer
	   needs extra top padding to clear it — removing it lets the
	   content center properly in the viewport instead of sitting low. */
	/* With justify-content: center on a column flex, shifting weight from
	   top padding to bottom padding nudges the centered content upward
	   without breaking the centering. */
	.hero__inner { padding: 16px 0 72px; }
}
@media (min-width: 901px) and (max-width: 1024px) {
	/* Landscape tablets still use the floating desktop-style header (it
	   overlaps the hero here), so some top clearance is still needed —
	   just less than the desktop value, since tablet viewports are
	   shorter and the full 160px pushes content off-center. */
	.hero__inner { padding: 120px 0 70px; }
}
.hero .eyebrow { color: var(--color-gold-light); margin-bottom: 34px; }
.hero h1 {
	color: var(--color-white);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: clamp(38px, 6vw, 68px);
	letter-spacing: 0.01em;
	max-width: 780px;
	margin-bottom: 20px;
}
.hero p { font-size: 18px; color: var(--color-cream-deep); max-width: 560px; margin-inline: auto; }
.hero__actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------- Page banner (inner pages) ---------- */
.page-banner {
	position: relative;
	background: var(--color-charcoal);
	color: var(--color-white);
	padding: 100px 0 64px;
	text-align: center;
}
.page-banner--has-image {
	background-size: cover;
	background-position: center;
}
.page-banner--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(24, 22, 15, 0.62) 0%, rgba(24, 22, 15, 0.5) 50%, rgba(24, 22, 15, 0.72) 100%);
}
.page-banner--has-image .container { position: relative; }
.page-banner .eyebrow { color: var(--color-gold-light); }
.page-banner h1 {
	color: var(--color-white);
	font-family: var(--font-body);
	font-weight: 200;
	letter-spacing: 0.01em;
	margin-bottom: 18px;
}
.page-banner__actions { margin-top: 6px; }
.page-banner .btn-primary { background: var(--color-gold); color: var(--color-charcoal); }
.page-banner .btn-primary:hover { background: var(--color-gold-light); }

/* ---------- Content layout ---------- */
.content-layout {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
	gap: 60px;
	padding-block: 80px;
	align-items: start;
}
@media (max-width: 900px) {
	.content-layout { grid-template-columns: 1fr; gap: 36px; padding-block: 48px; }
}

.content-main { min-width: 0; font-size: 16px; color: var(--color-body); }
.content-main h1 { color: var(--color-maroon); }
.content-main h2 { font-size: 22px; }
.content-main h3, .content-main h4, .content-main h5, .content-main h6 { font-size: 17px; }
.content-main p { margin-bottom: 18px; }
.content-main ul { list-style: none; margin: 0 0 20px; padding: 0; }
.content-main ul li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.content-main ul li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 10px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-gold);
}
.content-main ol { padding-left: 22px; margin-bottom: 20px; }
.content-main a { color: var(--color-maroon); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.content-main img { border-radius: var(--radius-md); margin: 10px 0 24px; }

/* ---------- Sidebar / cards ---------- */
.content-aside { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 901px) {
	.content-aside {
		position: sticky;
		top: 152px;
		max-height: calc(100vh - 172px);
		overflow-y: auto;
	}
}
.card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 32px 28px;
	position: relative;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card h2 {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-family: var(--font-body);
	color: var(--color-maroon);
	margin-bottom: 16px;
}
.card .style1 {
	color: var(--color-gold);
	font-style: normal;
	font-size: 15px;
	margin-bottom: 10px;
	display: block;
}
.card .media { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.card .media-body { flex: 1; font-size: 14px; }
.card .media-right img { width: 90px; border-radius: var(--radius-sm); }
.card > a { font-weight: 700; font-size: 14px; }

/* ---------- Forms (theme + Contact Form 7) ---------- */
.form-contact { margin-top: 6px; }
.form-contact .form-group,
.wpcf7-form p { margin-bottom: 12px; }
.fname, .lname { width: 100%; }
.clear { clear: both; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"], input[type="number"], textarea, select,
.form-control {
	width: 100%;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-ink);
	background: var(--color-cream);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 11px 12px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea, .form-contact textarea.form-control { min-height: 96px; resize: vertical; }
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--color-gold);
	box-shadow: 0 0 0 3px rgba(171, 138, 76, 0.2);
}
::placeholder { color: var(--color-muted); }

.required { color: var(--color-muted); font-style: italic; font-size: 13px; display: inline-block; margin-top: 6px; }

.wpcf7-submit, input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;
	padding: 12px 22px;
	border-radius: var(--radius-md);
	border: none;
	background: var(--color-maroon);
	color: var(--color-white);
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.wpcf7-submit:hover, input[type="submit"]:hover { background: var(--color-maroon-dark); }
.ajax-loader, .wpcf7-validation-errors, .wpcf7-not-valid-tip { display: none !important; }
.wpcf7-not-valid { border-color: var(--color-maroon) !important; }

/* ---------- Blog list (index/loop) ---------- */
.blog_item { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--color-border); }
.blog_item:last-child { border-bottom: 0; }
.blog_item img.alignleft { float: left; margin: 4px 18px 10px 0; border-radius: var(--radius-md); max-width: 160px; }
.blog_item h2 { font-size: 21px; margin-bottom: 6px; }
.postTime { display: block; font-size: 13px; color: var(--color-muted); margin-bottom: 10px; }
.center { text-align: center; }

/* ---------- Footer ---------- */
.site-footer {
	background: var(--color-charcoal);
	color: rgba(250, 247, 240, 0.72);
	padding-top: 64px;
	font-size: 14px;
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr 1fr;
	gap: 40px;
	padding-bottom: 32px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 900px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.site-footer__legal { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.site-footer__grid { grid-template-columns: 1fr; }
	.site-footer__legal { grid-column: auto; text-align: left !important; }
}
.site-footer h4 {
	color: var(--color-gold-light);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.site-footer address { font-style: normal; margin-bottom: 16px; }
.site-footer .list-social a { background: rgba(255, 255, 255, 0.06); }
.site-footer__legal { font-size: 12.5px; line-height: 1.7; color: rgba(250, 247, 240, 0.5); }

.site-footer__brand .logo img,
.site-footer__brand .custom-logo { max-height: 60px; margin-bottom: 16px; }
.site-footer__desc { font-size: 14px; line-height: 1.7; margin-bottom: 20px; max-width: 34ch; }

.footer-contact { margin-bottom: 20px; }
.footer-contact li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
	font-size: 14px;
}
.footer-contact svg { width: 17px; height: 17px; fill: var(--color-gold); flex: none; margin-top: 2px; }
.footer-contact a { color: inherit; }
.footer-contact a:hover { color: var(--color-gold-light); }

.footer-menu li { margin-bottom: 10px; }
.footer-menu a { color: rgba(250, 247, 240, 0.72); font-size: 14px; }
.footer-menu a:hover { color: var(--color-gold-light); }
.footer-menu ul.children { padding-left: 16px; margin-top: 10px; }
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 20px 0;
	font-size: 13px;
	color: rgba(250, 247, 240, 0.55);
}
.site-footer__bottom a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.copy { color: var(--color-gold-light); }

/* ---------- Misc legacy-template fallback (search/archive/etc.) ---------- */
#container { padding-block: 40px; }
#container .container { max-width: 820px; }
.page-title, .entry-title { color: var(--color-maroon); }
.embed-responsive { margin: 10px 0 30px; }