/* ==========================================================================
   Warbird Games — site styles
   Consolidated from the Parabola theme (static CSS + the theme's dynamic
   settings block) into a single tight, renamed schema. Visual design is
   unchanged; only the class names and organization are new.
   Fonts (Spartan, Josefin Sans) load via Google Fonts in the page head.
   ========================================================================== */

:root {
	--bg:        #3f3a2c;   /* page background (dark olive-brown)   */
	--box:       #676151;   /* content/panel background             */
	--header:    #b5ae9b;   /* header band (tan)                    */
	--footer2:   #26241c;   /* darkest footer band                 */
	--ink:       #D0D0D0;   /* body text                            */
	--ink-soft:  #c0c0c0;   /* footer text                          */
	--link:      #d7c984;   /* links / accents (gold)               */
	--link-hi:   #f8f0a5;   /* link hover (light gold)              */
	--line:      #423c2f;   /* borders                              */
	--social:    #8d895e;   /* social icon background               */
	--nav-hover: #7A6A53;   /* nav item hover background            */

	--wrap: 1200px;         /* main content max width               */
	--wrap-slider: 1280px;  /* slider max width                     */

	--font-body:  "Spartan", "Josefin Sans", Arial, sans-serif;
	--font-head:  "Josefin Sans", "Spartan", Arial, sans-serif;
}

/* --- Reset / base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 14px; line-height: 1.7; }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--ink);
	background-color: var(--bg);
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hi); }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: normal; }

/* --- Layout scaffolding ------------------------------------------------- */
.site { margin: 0 auto; }

.main {
	max-width: var(--wrap);
	margin: 0 auto;
	min-height: 200px;
	padding: 0 10px 30px;
}

/* --- Header ------------------------------------------------------------- */
.site-header-wrap { background-color: var(--header); }

.site-header {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 10px;
}

/* Top bar (Press / Contact / About) */
.topbar { overflow: hidden; }
.topbar ul {
	list-style: none;
	margin: 0;
	padding: 4px 0 0;
	float: right;
}
.topbar li { float: left; margin: 0 3px; }
.topbar a {
	display: block;
	padding: 3px 5px;
	font-size: .9em;
	text-transform: uppercase;
	color: var(--box);
	transition: all .3s ease-in-out;
}
.topbar a:hover { color: var(--box); background-color: #fff; }

/* Masthead: banner + primary nav */
.masthead { clear: both; }

.branding { position: relative; }
.brand-banner { display: block; }

.socials { overflow: hidden; }
.social-link {
	display: block;
	float: left;
	padding: 4px;
	line-height: 0;
	background-color: var(--social);
	transition: background-color .3s ease-in-out;
}
.social-link + .social-link { margin-left: 5px; }
.social-link:hover { background-color: var(--box); }
.social-link img { width: 26px; height: 26px; }

.socials-header {
	position: absolute;
	top: 0;
	right: 5px;
	z-index: 20;
}

/* Primary navigation (Home / Jack Houston / News) */
.mainnav { clear: both; margin-top: 10px; }
.menu {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.menu li { float: left; margin: 0 8px 10px 0; }
.menu a {
	display: block;
	padding: .5em 1em;
	font-family: var(--font-head);
	font-size: 14px;
	text-transform: uppercase;
	color: var(--ink);
	background-color: var(--box);
	transition: all .3s ease-in-out;
}
.menu a:hover { color: var(--link-hi); background-color: var(--nav-hover); }
.menu .is-current > a { color: #eee; background-color: var(--bg); }

/* --- Breadcrumbs -------------------------------------------------------- */
.breadcrumbs {
	display: inline-block;
	position: relative;
	margin: 10px 0 0;
	padding-left: 20px;
	font-size: .9em;
	line-height: 29px;
}
.breadcrumbs::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 6px;
	width: 0; height: 0;
	border: 5px solid transparent;
	border-left-color: var(--ink);
}
.breadcrumbs a { margin: 0 .35em; }

/* --- Content container + posts ----------------------------------------- */
.container { width: 100%; margin-top: 20px; }

.page-title {
	color: var(--link);
	font-family: var(--font-body);
	font-size: 40px;
	line-height: 1.3;
	margin: 0 0 .5em;
}

.post {
	overflow: hidden;
	padding: 3em;
	margin-bottom: 20px;
	background-color: var(--box);
	border: 1px solid var(--line);
}

.post-title {
	font-family: var(--font-body);
	font-size: 40px;
	font-weight: normal;
	line-height: 1.3;
	margin: 0 0 10px;
	color: var(--link);
	word-wrap: break-word;
}
.post-title a { color: inherit; }
.post-title a:hover { color: var(--link-hi); }

.post-meta {
	font-size: .85em;
	clear: both;
	margin-bottom: 1em;
	overflow: hidden;
}
.post-meta time,
.post-meta .post-cat {
	display: inline-block;
	padding: 0 10px;
	line-height: 2;
	letter-spacing: .5px;
	text-transform: uppercase;
	border: 1px solid var(--bg);
	margin-right: -1px;
}

.post-thumb { display: block; margin: 0 0 1em; }

.post-body h1, .post-body h2, .post-body h3,
.post-body h4, .post-body h5, .post-body h6 {
	font-family: var(--font-head);
	color: var(--link);
	line-height: 1.3;
	margin: 0 0 .5em;
}
.post-body h1 { font-size: 2.676em; }
.post-body h2 { font-size: 2.352em; }
.post-body h3 { font-size: 2.028em; }
.post-body h4 { font-size: 1.704em; }
.post-body h5 { font-size: 1.38em; }
.post-body h6 { font-size: 1.056em; }
.post-body p, .post-body ul, .post-body ol,
.post-body dd, .post-body pre, .post-body hr { margin: 0 0 1em; }
.post-body ul { margin-left: 1.5em; list-style: square; }
.post-body ol { margin-left: 1.5em; list-style: decimal; }
.post-body a { color: var(--link); }
.post-body a:hover { color: var(--link-hi); }
.post-body img { height: auto; }
.post-body iframe, .post-body embed, .post-body video { max-width: 100%; }
.post-body blockquote {
	margin: 0 0 1em;
	padding: .5em 1em;
	border-left: 4px solid var(--social);
	background-color: var(--bg);
}

.post-footer { clear: both; font-size: .85em; }

/* News listing excerpts */
.post-excerpt .post-title { font-size: 28px; }

/* --- WordPress block content compatibility ------------------------------
   The migrated About / Jack Houston / Contact page bodies still use Gutenberg
   block markup. These few rules reproduce the block layout the content relies
   on, instead of loading WordPress's full ~30KB block stylesheet. */
.post-body .is-layout-flex { display: flex; flex-wrap: wrap; gap: 1em; align-items: flex-start; }
.post-body .is-layout-flow > * { margin-top: 0; }
.post-body .wp-block-columns { display: flex; flex-wrap: wrap; gap: 1.5em; margin: 0 0 1em; }
.post-body .wp-block-column { flex: 1 1 0; min-width: 0; }         /* honors inline flex-basis */
.post-body .wp-block-image { margin: 0 0 1em; }
.post-body .wp-block-image img { height: auto; max-width: 100%; }
.post-body .wp-block-image.is-style-rounded img,
.post-body .is-style-rounded img { border-radius: 9999px; }
.post-body .has-text-align-center { text-align: center; }
.post-body .has-text-align-right { text-align: right; }
.post-body .has-text-align-left { text-align: left; }
.post-body .wp-block-separator { border: 0; border-top: 1px solid var(--line); margin: 1.5em auto; opacity: .6; }
.post-body .wp-block-separator.is-style-wide { width: 100%; }
.post-body .wp-block-spacer { display: block; }
.post-body .wp-block-gallery { display: flex; flex-wrap: wrap; gap: .5em; margin: 0 0 1em; list-style: none; padding: 0; }
.post-body .wp-block-gallery figure { margin: 0; flex-grow: 1; }
.post-body .wp-block-gallery img { display: block; width: 100%; height: auto; }
.post-body .wp-block-embed { margin: 0 0 1em; }
.post-body .wp-block-embed__wrapper { position: relative; }
.post-body .wp-block-embed iframe { max-width: 100%; }
.post-body figure { margin: 0 0 1em; }

/* --- Front page: slider ------------------------------------------------- */
.frontpage { margin-top: 20px; }

.slider {
	position: relative;
	max-width: var(--wrap-slider);
	margin: 0 auto 30px;
	border: 8px solid var(--box);
	overflow: hidden;
	background-color: var(--box);
}
.slide { display: none; position: relative; }
.slide.is-active { display: block; }
.slide-link { display: block; }
.slide-link img { display: block; width: 100%; }

.slide-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 2em 3em;
	color: #fff;
	background-color: rgba(63, 58, 44, .7);
}
.slide-caption a { color: #fff; }
.slide-title {
	font-family: var(--font-body);
	font-size: 1.752em;
	color: #fff;
	margin: 0 0 .5em;
}
.slide-text { margin: 0; }

/* --- Front page: promo columns ----------------------------------------- */
.columns { overflow: hidden; margin-bottom: 30px; }
.column {
	float: left;
	width: 49%;
	margin: 0 2% 2% 0;
	background-color: var(--box);
	border: 1px solid var(--line);
}
.column:nth-child(2n) { margin-right: 0; }
.column-image { display: block; padding: 8px; }
.column-image img { display: block; width: 100%; max-height: 278px; object-fit: cover; }
.column-text { padding: 1em 1.5em 2.5em; }
.column-text h2 {
	font-family: var(--font-body);
	font-size: 1.752em;
	color: var(--ink);
	margin: 0 0 .5em;
}
.column-text a { color: var(--link); }

/* --- Footer ------------------------------------------------------------- */
.site-footer { clear: both; width: 100%; color: var(--ink-soft); background-color: var(--bg); }
.colophon { overflow: hidden; }

.footer-bottom {
	color: var(--ink-soft);
	background-color: var(--footer2);
	border-top: 1px solid rgba(103, 97, 81, .1);
	padding: 10px;
}
.footer-bottom-inner { max-width: var(--wrap); margin: 0 auto; }
.footer-bottom a { color: var(--link); }
.footer-bottom a:hover { color: var(--link-hi); text-decoration: underline; }

.copyright {
	padding-top: 5px;
	margin: 1em auto 0;
	font-style: italic;
	text-align: center;
}
.socials-footer {
	display: table;
	float: none;
	clear: both;
	margin: 1em auto 0;
	overflow: visible;
}
.socials-footer .social-link { float: left; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 800px) {
	.post-title, .page-title { font-size: 38px; }
	.post { padding: 2em; }
}
@media (max-width: 650px) {
	.post-title, .page-title { font-size: 36px; }
	.column { float: none; width: 100%; margin-right: 0; }
	.slide-caption { padding: 1em 1.5em; position: static; }
	.socials-header { position: static; margin-top: 8px; }
	.topbar ul { float: none; }
}