/*
Theme Name: True Blue Army
Theme URI: https://truebluearmy.com/
Author: True Blue Army
Author URI: https://truebluearmy.com/
Description: Custom theme for truebluearmy.com, styled to match the look of the TBA forum (forum.truebluearmy.com).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tba
*/

/* -------------------------------------------------------------------------
   Design tokens - lifted from forum.truebluearmy.com (vBulletin skin) and
   the trueblueArmy.com/wp-content/uploads/2020/11/tba.png logo.
   ---------------------------------------------------------------------- */
:root {
	--tba-navy: #051793;
	--tba-navy-dark: #030f66;
	--tba-black: #0f0f0f;
	--tba-red: #c1282c;
	--tba-red-dark: #971f22;
	--tba-grey-lightest: #f5f5f5;
	--tba-grey-light: #efefef;
	--tba-grey-mid: #dddddd;
	--tba-grey-dark: #999999;
	--tba-grey-darker: #666666;
	--tba-text: #333333;
	--tba-border: #cccccc;
	--tba-white: #ffffff;
	--tba-cream: #f2ead9;
	--tba-font: "Ubuntu", Tahoma, Verdana, Arial, sans-serif;
	--tba-max-width: 960px;
}

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

html { -webkit-text-size-adjust: 100%; }

html, body { height: 100%; }

body {
	margin: 0;
	background: var(--tba-white);
	color: var(--tba-text);
	font-family: var(--tba-font);
	font-size: 16px;
	line-height: 1.6;
}

.site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.site-content {
	flex: 1 0 auto;
	padding-bottom: 40px;
	/* The Pompey retro shirt's own chevron weave (assets/images/pattern-chevron.png) -
	   an autocorrelation-verified, zero-seam 242x139px tile, recoloured from
	   its original blue to a very light white/grey - as a subtle backdrop
	   behind the page's content panels. Padding-bottom (rather than the
	   footer's own margin-top) keeps this background running right down to
	   the footer instead of leaving a plain gap. */
	background-color: #ffffff;
	background-image: url("assets/images/pattern-chevron.png");
	background-repeat: repeat;
	background-size: 242px 139px;
}

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

a {
	color: var(--tba-navy);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--tba-red);
	text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--tba-font);
	font-weight: 700;
	line-height: 1.2;
	color: var(--tba-black);
	margin: 0 0 .5em;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }

p { margin: 0 0 1.2em; }

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.tba-container {
	max-width: var(--tba-max-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* -------------------------------------------------------------------------
   Site header - mirrors the forum's navy utility bar + logo banner
   ---------------------------------------------------------------------- */
/* Heights/colours below are matched pixel-for-pixel to forum.truebluearmy.com's
   .upper/.lower bars so switching between the two sites isn't jarring. */
.site-header__bar {
	background: var(--tba-navy);
	color: var(--tba-white);
	font-size: 1rem;
	line-height: 1.4;
	border-top: 1px solid #444444;
	border-bottom: 1px solid #000000;
}

.site-header__bar .tba-container {
	display: flex;
	align-items: center;
	min-height: 42.4px; /* stays 44.4px total (incl. borders) even with no tagline set */
	padding-top: 10px;
	padding-bottom: 10px;
}

.site-header__tagline { opacity: .85; }

/* Grey utility bar - mirrors the forum's "View New Posts" row, holds the
   primary navigation, right-aligned. */
.site-header__utility {
	background: var(--tba-grey-light);
	color: var(--tba-grey-dark);
	font-size: 1rem;
	line-height: 1.4;
	border-top: 1px solid var(--tba-white);
	border-bottom: 1px solid var(--tba-border);
}

.site-header__utility .tba-container {
	display: flex;
	justify-content: flex-end;
	min-height: 32.4px; /* stays 34.4px total (incl. borders) regardless of nav content */
	padding-top: 5px;
	padding-bottom: 5px;
}

.site-header__brand {
	background: var(--tba-white);
}

.site-header__brand .tba-container {
	display: flex;
	padding-top: 24px;
	padding-bottom: 24px;
}

.site-branding {
	display: flex;
	align-items: center;
}

.site-branding img {
	display: block;
	max-height: 150px;
	width: auto;
}

.site-branding__text {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--tba-navy);
}

.site-branding__text a { color: inherit; }

/* Primary nav, styled like the forum's plain grey link row */
.main-navigation { position: relative; }

/* Decorative fan badge and pinstripe-frame pieces, only ever shown inside
   the mobile overlay */
.main-navigation__badge,
.main-navigation__frame,
.main-navigation__frame-bottom { display: none; }

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: auto;
	background: transparent;
	color: var(--tba-navy);
	border: 0;
	font-size: 1.25rem;
	cursor: pointer;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0 20px;
}

.main-navigation li { margin: 0; }

/* Matches forum.truebluearmy.com's .lower bar links exactly: #666 at rest,
   same #666 on hover/active (colour never changes) but with an underline
   added on hover, same as the forum's global a:hover rule. */
.main-navigation a,
.main-navigation a:link,
.main-navigation a:visited {
	display: block;
	padding: 0;
	color: var(--tba-grey-darker);
	font-weight: 400;
	font-size: 1rem;
	text-decoration: none;
}

.main-navigation a:hover,
.main-navigation a:active {
	color: var(--tba-grey-darker);
	text-decoration: underline;
}

.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a {
	font-weight: 700;
}

@media (max-width: 700px) {
	.menu-toggle {
		display: flex;
		position: relative;
		z-index: 1001; /* stays above the full-screen overlay so it can close it */
	}

	.menu-toggle__icon-close { display: none; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__icon-open { display: none; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__icon-close { display: block; font-size: 2.5rem; }
	.menu-toggle[aria-expanded="true"] {
		color: var(--tba-white); /* the icon otherwise reads navy-on-navy against the open overlay */
		/* Pulled off the true edge while the overlay is open: vertically
		   centred on the badge (badge top:28px, height:110px -> centre at
		   83px; this button is 40px tall, so top = 83 - 20 = 63px), sitting
		   horizontally halfway between the right-hand bars and the badge. */
		position: fixed;
		top: 63px;
		left: calc(75vw - 5px);
		right: auto;
		margin-left: 0;
		z-index: 1003;
	}

	/* Full-screen nav overlay: solid navy, white text, evenly spaced. Plain
	   background-color only. nav-bg.jpg (the etched-panel/circuit texture
	   from the design reference) sits on top of it; background-color is
	   still set as the fallback while the image loads or if it fails. */
	.main-navigation ul {
		display: none;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: stretch;
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		margin: 0;
		padding: 170px 32px 32px;
		overflow-y: auto;
		background-color: var(--tba-navy);
		background-image: url("assets/images/nav-bg.jpg");
		background-size: cover;
		background-position: center;
		gap: 0;
		z-index: 1000;
	}
	.main-navigation ul.is-open { display: flex; }

	/* Pinstripe frame around the overlay: a red line down each edge with a
	   white line inset, joined along the bottom by matching red/white bars
	   so the whole thing reads as one continuous frame. Each colour is its
	   own element sized so the vertical and horizontal pieces butt against
	   each other exactly (red meets red, white meets white) rather than
	   overlapping where they'd cross. */
	/* Diagonal tips: the outer (viewport-edge) side of each bar runs a touch
	   higher than the inner side, cut on a true 45deg angle (the cut's rise
	   equals the bar's own 5px width). Red starts a little higher than
	   white so its tip shows just above white's. */
	.main-navigation ul::before,
	.main-navigation ul::after {
		content: '';
		position: absolute;
		top: 18px;
		bottom: 16px;
		width: 5px;
		background: var(--tba-red);
		z-index: 2;
	}
	.main-navigation ul::before {
		left: 16px;
		clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 100%);
	}
	.main-navigation ul::after {
		right: 16px;
		clip-path: polygon(0 5px, 100% 0, 100% 100%, 0 100%);
	}

	.main-navigation__frame::before,
	.main-navigation__frame::after {
		content: '';
		position: absolute;
		top: 24px;
		bottom: 25px;
		width: 5px;
		background: var(--tba-white);
		z-index: 2;
	}
	.main-navigation__frame::before {
		left: 25px;
		clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 100%);
	}
	.main-navigation__frame::after {
		right: 25px;
		clip-path: polygon(0 5px, 100% 0, 100% 100%, 0 100%);
	}

	.main-navigation__frame-bottom::before {
		content: '';
		position: absolute;
		left: 16px;
		right: 16px;
		bottom: 16px;
		height: 5px;
		background: var(--tba-red);
		z-index: 2;
	}
	.main-navigation__frame-bottom::after {
		content: '';
		position: absolute;
		left: 25px;
		right: 25px;
		bottom: 25px;
		height: 5px;
		background: var(--tba-white);
		z-index: 2;
	}

	/* Circular fan-badge, shown centred above the menu items while open. */
	.main-navigation__badge {
		display: none;
	}
	.menu-toggle[aria-expanded="true"] ~ .main-navigation__badge {
		display: block;
		position: fixed;
		top: 28px;
		left: 50%;
		transform: translateX(-50%);
		width: 110px;
		height: 110px;
		z-index: 1001;
	}
	.main-navigation__badge img {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	/* Wrappers that host the pinstripe-frame pieces (see the ::before/::after
	   rules above) while the overlay is open. */
	.main-navigation__frame,
	.main-navigation__frame-bottom {
		display: none;
	}
	.menu-toggle[aria-expanded="true"] ~ .main-navigation__frame,
	.menu-toggle[aria-expanded="true"] ~ .main-navigation__frame-bottom {
		display: block;
		position: fixed;
		inset: 0;
		pointer-events: none;
		z-index: 1002; /* above ul's own z-index:1000 background, or its opaque texture image hides these */
	}

	.main-navigation li {
		position: relative;
	}

	.main-navigation a,
	.main-navigation a:link,
	.main-navigation a:visited {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		padding: 14px 0;
		color: var(--tba-white);
		font-size: 1.375rem;
		font-weight: 700;
		text-align: center;
	}

	/* Thin flourish lines flanking each item's label, except the current page */
	.main-navigation li:not(.current-menu-item):not(.current_page_item) > a::before,
	.main-navigation li:not(.current-menu-item):not(.current_page_item) > a::after {
		content: '';
		flex: 1 1 60px;
		max-width: 90px;
		height: 1px;
		background: rgba(255, 255, 255, 0.55);
	}
	.main-navigation a:hover,
	.main-navigation a:active {
		color: var(--tba-white);
		text-decoration: none;
	}
	.main-navigation a:hover::before,
	.main-navigation a:hover::after,
	.main-navigation a:active::before,
	.main-navigation a:active::after {
		background: var(--tba-red);
	}

	/* Current page: flanking white lines either side of the label - inset
	   8px from the li (which itself sits 32px in from the overlay edge)
	   so they stop short of the vertical piping (the white inset line
	   ends 30px from the edge) with room to spare, instead of running
	   full-bleed underneath/past it. */
	.main-navigation .current-menu-item > a,
	.main-navigation .current_page_item > a {
		position: relative;
		padding: 28px 8px;
	}

	/* Flanking lines either side of the current page's label - white and
	   as thick as the red bars above/below. No max-width, so each grows to
	   fill the a's full padded width, ending flush with the padding edge -
	   the same x position where the red bars start - instead of stopping
	   short around the text. The flex gap keeps them clear of the text. */
	.main-navigation .current-menu-item > a::before,
	.main-navigation .current-menu-item > a::after,
	.main-navigation .current_page_item > a::before,
	.main-navigation .current_page_item > a::after {
		content: '';
		flex: 1 1 auto;
		height: 20px;
		background: var(--tba-white);
	}
}

/* -------------------------------------------------------------------------
   Panels - the reusable "vBulletin box" used for page content, news, etc.
   Class names deliberately echo the forum markup (thead/tcat/trow) so the
   two sites share a visual vocabulary.
   ---------------------------------------------------------------------- */
.tba-panel {
	margin: 28px 0;
	border: 1px solid var(--tba-grey-mid);
	background: var(--tba-white);
}

.tba-panel__thead {
	background: var(--tba-navy);
	color: var(--tba-white);
	padding: 10px 16px;
	font-size: 1.0625rem;
	font-weight: 700;
}

.tba-panel__thead a { color: var(--tba-white); }

.tba-panel__tcat {
	background: var(--tba-black);
	color: var(--tba-white);
	padding: 6px 16px;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.tba-panel__tcat p { margin: 0; }

.tba-panel__body {
	padding: 20px;
}

.tba-panel__body > *:last-child { margin-bottom: 0; }

.tba-panel__foot {
	background: var(--tba-grey-mid);
	color: var(--tba-grey-darker);
	padding: 8px 16px;
	font-size: .8125rem;
}

/* Alternating list rows (news index, archives) */
.tba-list { width: 100%; border-collapse: collapse; }

.tba-list__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 16px;
	padding: 14px 16px;
	border-top: 1px solid var(--tba-grey-mid);
}

.tba-list__row:nth-child(odd) { background: var(--tba-grey-lightest); }
.tba-list__row:first-child { border-top: 0; }

.tba-list__title { font-weight: 700; font-size: 1.0625rem; flex: 1 1 auto; }
.tba-list__meta { color: var(--tba-grey-darker); font-size: .8125rem; }

/* Breadcrumb/title bar used at the top of the content area, replacing what
   used to be a large standalone page heading. */
.tba-page-title {
	background: var(--tba-navy);
	color: var(--tba-white);
}

.tba-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding: 14px 0;
	font-size: 1rem;
}

.tba-breadcrumb a {
	color: rgba(255, 255, 255, .75);
}

.tba-breadcrumb a:hover,
.tba-breadcrumb a:focus {
	color: var(--tba-white);
	text-decoration: underline;
}

.tba-breadcrumb__sep {
	color: rgba(255, 255, 255, .45);
}

.tba-breadcrumb__current {
	margin: 0;
	color: var(--tba-white);
	font-size: 1rem;
	font-weight: 700;
}

.tba-breadcrumb__current--only {
	padding: 14px 0;
}

/* -------------------------------------------------------------------------
   Content typography (posts/pages edited in the block editor)
   ---------------------------------------------------------------------- */
.entry-content > * { max-width: 100%; }

.tba-news-subhead {
	font-size: 1.0625rem;
	color: var(--tba-grey-darker);
}

/* Used on the front page, where content isn't wrapped in .tba-panel so that
   full-width/wide blocks (e.g. coloured update bands) can bleed edge to
   edge; ordinary blocks still get a readable measure and side padding. */
.tba-flow > * {
	max-width: var(--tba-max-width);
	margin-left: auto;
	margin-right: auto;
	padding: 24px 20px;
}

.tba-flow > .alignwide {
	max-width: calc(var(--tba-max-width) + 200px);
}

/* Panels (e.g. the "Service updates" entries) manage their own internal
   spacing via .tba-panel__tcat/.tba-panel__body, so they shouldn't also get
   the generic flow padding - that was pushing the black title bar away from
   the box's top edge instead of letting it sit flush. */
.tba-flow > .tba-panel {
	padding: 0;
}

.tba-flow > .alignfull {
	max-width: none;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: 0;
	padding-right: 0;
}

.tba-flow > .alignfull > * {
	max-width: var(--tba-max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.entry-content ul,
.entry-content ol { padding-left: 1.4em; }

.entry-content blockquote {
	margin: 1.2em 0;
	padding: 10px 20px;
	background: var(--tba-grey-lightest);
	border-left: 4px solid var(--tba-navy);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
}

.entry-content table th,
.entry-content table td {
	border: 1px solid var(--tba-grey-mid);
	padding: 8px 12px;
}

.entry-content table th {
	background: var(--tba-navy);
	color: var(--tba-white);
}

/* -------------------------------------------------------------------------
   Fence band - vectorised ironwork X-brace railing motif, repeating
   horizontally in a strip right above the footer.
   ---------------------------------------------------------------------- */
.site-fence {
	height: 120px;
	background-image: url("assets/images/pattern-fence.svg");
	background-repeat: repeat-x;
	background-size: auto 120px;
	background-position: left top;
}

@media (max-width: 700px) {
	/* Exactly 3 complete trusses edge to edge, whatever the phone width -
	   33.3334% of the viewport per tile, with the element's own height
	   computed from the tile's 170:140 intrinsic ratio so nothing crops or
	   leaves a gap underneath. */
	.site-fence {
		height: calc(100vw * 140 / 510);
		background-size: 33.3334% auto;
	}
}

/* -------------------------------------------------------------------------
   Footer - grey utility bar like the forum's footer row
   ---------------------------------------------------------------------- */
.site-footer {
	flex-shrink: 0;
	background: #262626;
	color: var(--tba-white);
	font-size: .8125rem;
}

.site-footer .tba-container {
	padding-top: 16px;
	padding-bottom: 16px;
}

.site-disclaimer {
	margin: 0;
}

.site-footer__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.site-footer a { color: var(--tba-white); }
.site-footer a:hover { color: var(--tba-red); }

.site-footer__social {
	list-style: none;
	display: flex;
	gap: 20px;
	margin: 0 0 0 auto;
	padding: 0;
}

.site-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--tba-navy);
	color: var(--tba-white);
	font-size: .9375rem;
}

.site-footer__social a:hover {
	background: var(--tba-red);
	color: var(--tba-white);
	text-decoration: none;
}

@media (max-width: 700px) {
	/* Disclaimer text centred on its own line, social icons centred on a
	   second line below - instead of the desktop's single inline row. */
	.site-footer__row {
		flex-direction: column;
		align-items: center;
	}
	.site-disclaimer {
		text-align: center;
		width: 100%;
	}
	.site-footer__social {
		margin: 0;
		width: 100%;
		justify-content: center;
	}
}

.footer-navigation ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
   404 / search
   ---------------------------------------------------------------------- */
.tba-search-form {
	display: flex;
	gap: 8px;
	margin: 20px 0;
}

.tba-search-form input[type="search"] {
	flex: 1 1 auto;
	padding: 10px 12px;
	border: 1px solid var(--tba-grey-mid);
	font-family: var(--tba-font);
}

.tba-search-form button {
	background: var(--tba-navy);
	color: var(--tba-white);
	border: 0;
	padding: 10px 20px;
	font-weight: 700;
	cursor: pointer;
}

.tba-search-form button:hover { background: var(--tba-red); }

.tba-pagination {
	display: flex;
	gap: 8px;
	margin: 20px 0;
	flex-wrap: wrap;
}

.tba-pagination a,
.tba-pagination span {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--tba-grey-mid);
	color: var(--tba-navy);
}

.tba-pagination .current {
	background: var(--tba-navy);
	color: var(--tba-white);
	border-color: var(--tba-navy);
}