/*
Theme Name: IISSOnline
Theme URI: https://iissonline.com/
Description: A custom magazine theme for IISSOnline, forked from Twenty Ten by the WordPress team. Extends the classic two-column layout with a modern editorial design, custom homepage features, and enhanced article presentation.
Author: Karnei Gozman
Author URI: https://iissonline.com/
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, two-columns, custom-header, custom-background, threaded-comments, sticky-post, editor-style, custom-menu, flexible-header, featured-images, footer-widgets, block-patterns
Text Domain: iissonline

Based on Twenty Ten (https://wordpress.org/themes/twentyten/)
Copyright 2010-2025 the WordPress team
Licensed under GPLv2 or later — https://www.gnu.org/licenses/gpl-2.0.html
*/


/* =Design Tokens
-------------------------------------------------------------- */

:root {
	/* Brand colors */
	--color-nav:          #1d3e61; /* masthead / nav bar */
	--color-splash-bg:    #0d1f33; /* homepage splash section */
	--color-accent:       #ff4b33; /* hover / active state */
	--color-link:         #0066cc;
	--color-link-visited: #743399;
	--color-text:         #666;
	--color-text-dark:    #333;
	--color-border:       #e7e7e7;

	/* Layout
	   Sidebar is 220px wide. Content right-margin = sidebar + two gaps (280px).
	   Container uses a negative right-margin of 240px (sidebar + one gap)
	   to allow the sidebar float to sit alongside full-width #content. */
	--column-width:  940px;
	--sidebar-width: 220px;

	/* Typography */
	--font-ui:    'Inter', 'Helvetica Neue', Arial, sans-serif;
	--font-serif: Georgia, "Bitstream Charter", serif;
	--font-mono:  "Courier 10 Pitch", Courier, monospace;
	--font-code:  Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}


/* =Reset default browser CSS. Based on work by Eric Meyer.
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
blockquote {
	quotes: none;
}
blockquote:before,
blockquote:after {
	content: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a img {
	border: none;
}


/* =Layout
-------------------------------------------------------------- */

/*
LAYOUT: Two columns
DESCRIPTION: Two-column fixed layout with one sidebar right of content.
Uses a float + negative-margin trick so #container is full-width while
the sidebar floats alongside it. Magic numbers:
  -240px = --sidebar-width (220px) + gap (20px)
   280px = --sidebar-width (220px) + gap (20px) + inner padding (40px)
*/

#container {
	float: left;
	margin: 0 -240px 0 0;
	width: 100%;
}
#content {
	margin: 0 280px 0 20px;
}
#primary,
#secondary {
	float: right;
	overflow: hidden;
	width: var(--sidebar-width);
}
#secondary {
	clear: right;
}
#footer {
	clear: both;
	width: 100%;
}

/*
LAYOUT: One column, no sidebar
DESCRIPTION: One centered column with no sidebar
*/

.one-column #content {
	margin: 0 auto;
	width: 640px;
}

/*
LAYOUT: Full width, no sidebar
DESCRIPTION: Full width content with no sidebar; used for attachment pages
*/

.single-attachment #content {
	margin: 0 auto;
	width: 900px;
}

/* Layout responsive overrides */
@media screen and (max-width: 940px) {
	#access .menu-header,
	div.menu,
	#colophon,
	#main,
	#wrapper {
		width: 100%;
		box-sizing: border-box;
	}
	#wrapper {
		margin-top: 0;
		padding: 0 16px;
	}
	/* Stack sidebar below content */
	#container {
		float: none;
		margin: 0;
		width: 100%;
	}
	#content {
		margin: 0;
	}
	#primary,
	#secondary {
		float: none;
		width: 100%;
		clear: both;
	}
}
@media screen and (max-width: 599px) {
	#wrapper {
		padding: 0 12px;
	}
	#content {
		font-size: 14px;
		line-height: 1.7;
	}
}


/* =Fonts
-------------------------------------------------------------- */

body,
input,
textarea {
	font-family: var(--font-serif);
}
/* UI elements use the sans-serif stack */
h3#comments-title,
h3#reply-title,
#cancel-comment-reply-link,
.form-allowed-tags,
#site-info,
#wp-calendar,
.calendar_wrap,
.comment-meta,
.comment-body tr th,
.comment-body thead th,
.entry-content label,
.entry-content tr th,
.entry-content thead th,
.entry-meta,
.entry-title,
.entry-utility,
#respond label,
.navigation,
.page-title,
.page-title span,
.pingback a.url,
.pingback p,
.reply,
.widget-title,
.wp-caption-text {
	font-family: var(--font-ui);
}
input[type="submit"] {
	font-family: var(--font-ui);
}
pre {
	font-family: var(--font-mono);
}
code {
	font-family: var(--font-code);
}


/* =Structure
-------------------------------------------------------------- */

/* Main theme structure — centers the content column */
#access .menu-header,
div.menu,
#colophon,
#main,
#wrapper {
	margin: 0 auto;
	width: var(--column-width);
	max-width: calc(100% - 40px); /* keep total box (content + 20px padding each side) within viewport */
	position: relative;
	z-index: 0; /* establishes stacking context so ::before sits behind content but above body */
}
#wrapper {
	background: #F1F1F1;
	padding: 0 ;
}
/* Full-width off-white band for the entire content area between header and footer */
#wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	background: #f1f1f1;
	z-index: -1;
}

/* Footer area */
#footer-widget-area {
	overflow: hidden;
}
#footer-widget-area .widget-area {
	float: left;
	margin-right: 20px;
	width: var(--sidebar-width);
}
#footer-widget-area #fourth {
	margin-right: 0;
}
#site-info {
	float: left;
	font-size: 14px;
	font-weight: bold;
	width: 700px;
}
#site-generator {
	float: right;
	width: var(--sidebar-width);
}


/* =Global Elements
-------------------------------------------------------------- */

body {
	background: #1e3a5f; /* navy below/outside the content wrapper */
	overflow-x: hidden; /* prevent full-bleed 100vw elements from triggering horizontal scroll */
}
body,
input,
textarea {
	color: var(--color-text);
	font-size: 12px;
	line-height: 18px;
}
hr {
	background-color: var(--color-border);
	border: 0;
	clear: both;
	height: 1px;
	margin-bottom: 18px;
}

/* Text elements */
p {
	margin-bottom: 18px;
}
ul {
	list-style: square;
	margin: 0 0 18px 1.5em;
}
ol {
	list-style: decimal;
	margin: 0 0 18px 1.5em;
}
ol ol {
	list-style: upper-alpha;
}
ol ol ol {
	list-style: lower-roman;
}
ol ol ol ol {
	list-style: lower-alpha;
}
ul ul,
ol ol,
ul ol,
ol ul {
	margin-bottom: 0;
}
dl {
	margin: 0 0 24px 0;
}
dt {
	font-weight: bold;
}
dd {
	margin-bottom: 18px;
}
strong {
	font-weight: bold;
}
cite,
em,
i {
	font-style: italic;
}
big {
	font-size: 131.25%;
}
ins {
	background: #ffc;
	text-decoration: none;
}
blockquote {
	font-style: italic;
	padding: 0 3em;
}
blockquote cite,
blockquote em,
blockquote i {
	font-style: normal;
}
pre {
	background: #f7f7f7;
	color: #222;
	line-height: 18px;
	margin-bottom: 18px;
	overflow: auto;
	padding: 1.5em;
}
abbr,
acronym {
	border-bottom: 1px dotted var(--color-text);
	cursor: help;
}
sup,
sub {
	height: 0;
	line-height: 1;
	position: relative;
	vertical-align: baseline;
}
sup {
	bottom: 1ex;
}
sub {
	top: .5ex;
}
small {
	font-size: smaller;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea {
	background: #f9f9f9;
	border: 1px solid #ccc;
	box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
	padding: 2px;
}
a:link {
	color: var(--color-link);
}
a:visited {
	color: var(--color-link-visited);
}
a:active,
a:hover {
	color: var(--color-accent);
}

/* Text meant only for screen readers */
.screen-reader-text {
	clip-path: inset(50%);
	overflow: hidden;
	position: absolute !important;
	height: 1px;
	width: 1px;
}
a.skip-link:focus {
	background-color: #ddd;
	clip-path: none;
	color: var(--color-text-dark);
	display: block;
	font-size: 16px;
	height: auto;
	left: 5px;
	line-height: 1.5;
	padding: 16px 24px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}


/* =Header
-------------------------------------------------------------- */

/* Full-bleed breakout: #header spans the viewport while #wrapper stays at --column-width */
#header {
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-nav);
	margin-bottom:20px;
	z-index: 100; /* ensure overlay menu floats above page content */
}
#masthead {
	width: 100%;
}
.masthead-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: var(--column-width);
    margin: 0 auto;
    padding: 12px 6px 0;
    box-sizing: border-box;
}
#branding {
	flex: 0 0 auto;
	padding: 0 0 8px 0;
}
#site-title {
	font-family: var(--font-ui);
	font-size: 36px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
	padding: 20px;
	float: none;
	width: auto;

	margin-bottom:100px;
}
#site-title a {
	color: #FFF;
	text-decoration: none;
	margin-bottom:20px;
}
#site-title a:hover {
	color: #ccc;
}
#site-description {
	display: none;
}

.site-tagline {
	font-family: var(--font-ui);
    font-size: 14px;
    font-style: italic;
	font-weight:400;
    color: #DDD;
    text-transform: initial;
    margin-top: 4px;
    font-weight: 400;
    padding-right: 39%;
}


/* =Navigation
-------------------------------------------------------------- */

#access {
	background: transparent;
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
}
#menu-toggle {
	display: none;
}
#access .menu-header,
div.menu {
	font-size: 13px;
	margin: 0;
	width: auto;
	padding: 0;
	box-sizing: border-box;
	flex: 1;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}
#access .menu-header > ul,
div.menu > ul {
	display: flex;
	justify-content: flex-end;
}
#access .menu-header li,
div.menu li {
	position: relative;
}
#access ul ul li {
	display: block;
}
#access a {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #aaa;
	display: block;
	padding: 10px 14px 0px 14px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
#access ul ul {
	box-shadow: 0 3px 6px rgba(0,0,0,0.35);
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	float: left;
	width: 200px;
	z-index: 99999;
}
#access ul ul li {
	min-width: 200px;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #1a1a1a;
	line-height: 1.4;
	padding: 10px 16px;
	width: auto;
	height: auto;
	font-size: 12px;
	border-bottom: 1px solid #2a2a2a;
	text-transform: none;
	letter-spacing: 0.02em;
}
#access ul ul li:last-child > a {
	border-bottom: none;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #222;
	color: #fff;
}
#access ul li:hover > ul {
	display: block;
}
#access ul li.current_page_item > a,
#access ul li.current_page_ancestor > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff;
	box-shadow: inset 0 -3px 0 #fff;
}

/* Navigation responsive — hamburger menu */
@media screen and (max-width: 940px) {
	.masthead-inner {
		flex-direction: column;
		align-items: stretch;
		padding: 0;
	}
	#branding {
		padding: 10px 16px;
		border-bottom: 1px solid rgba(255,255,255,0.1);
	}
	#access {
		overflow: visible;
		position: relative;
		width: 100%;
		min-height: 38px; /* anchor height so top:100% on the dropdown is predictable */
	}
	#menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 32px;
		height: 22px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
		position: absolute;
		top: 8px;
		right: 12px;
		z-index: 1000;
	}
	#menu-toggle span {
		display: block;
		height: 3px;
		width: 100%;
		background: #aaa;
		border-radius: 2px;
		transition: background 0.2s;
	}
	#menu-toggle:hover span {
		background: #fff;
	}
	#access .menu-header,
	#access div.menu {
		width: 100%;
	}
	/* Match desktop specificity (#access .menu-header > ul { display: flex })
	   so this hide rule wins at the breakpoint. */
	#access .menu-header > ul,
	#access div.menu > ul {
		display: none;
		flex-direction: column;
		width: 100%;
		margin: 0;
	}
	#access .menu-header > ul.menu-open,
	#access div.menu > ul.menu-open {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: var(--color-nav);
		box-shadow: 0 6px 16px rgba(0,0,0,0.35);
		z-index: 500;
	}
	#access ul li {
		float: none;
		display: block;
		width: 100%;
	}
	#access ul li a {
		padding: 12px 16px;
		line-height: 1.4;
		border-top: 1px solid #222;
	}
	#access ul ul {
		position: static;
		display: none;
		width: 100%;
		box-shadow: none;
	}

	#access .menu-header, div.menu, #colophon, #main, #wrapper {
    	width: initial;
    	max-width: 100vw;
	}

}
@media screen and (max-width: 599px) {
	#site-title {
		font-size: 20px;
	}
	#access ul li a {
		font-size: 15px;
		padding: 14px 16px;
	}
}


/* =Content
-------------------------------------------------------------- */

#main {
	clear: both;
	padding: 0;
}
#content {
	margin-bottom: 36px;
}
#content,
#content input,
#content textarea {
	color: var(--color-text-dark);
	font-size: 16px;
	line-height: 24px;
}
#content p,
#content ul,
#content ol,
#content dd,
#content pre,
#content hr {
	margin-bottom: 24px;
}
#content ul ul,
#content ol ol,
#content ul ol,
#content ol ul {
	margin-bottom: 0;
}
#content pre,
#content kbd,
#content tt,
#content var {
	font-size: 15px;
	line-height: 21px;
}
#content code {
	font-size: 13px;
}
#content dt,
#content th {
	color: #000;
}
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
	color: #000;
	line-height: 1.5em;
	margin: 0 0 20px 0;
}
#content table {
	border: 1px solid var(--color-border);
	margin: 0 -1px 24px 0;
	text-align: left;
	width: 100%;
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
#content tr th,
#content thead th {
	color: #777;
	font-size: 12px;
	font-weight: bold;
	line-height: 18px;
	padding: 9px 24px;
}
#content tr td {
	border-top: 1px solid var(--color-border);
	padding: 6px 24px;
}
#content tr.odd td {
	background: #f2f7fc;
}
.hentry {
	margin: 0 0 48px 0;
}
.home .sticky {
	background: #f2f7fc;
	border-top: 4px solid #000;
	margin-left: -20px;
	margin-right: -20px;
	padding: 18px 20px;
}
.single .hentry {
	margin: 0 0 36px 0;
}
.page-title {
	color: #000;
	font-size: 14px;
	font-weight: bold;
	margin: 0 0 36px 0;
}
.page-title span {
	color: var(--color-text-dark);
	font-size: 16px;
	font-style: italic;
	font-weight: normal;
}
.page-title a:link,
.page-title a:visited {
	color: #777;
	text-decoration: none;
}
.page-title a:active,
.page-title a:hover {
	color: var(--color-accent);
}
#content .entry-title {
	color: #000;
	font-size: 21px;
	font-weight: bold;
	line-height: 1.3em;
	margin-bottom: 0;
}
.entry-title a:link,
.entry-title a:visited {
	color: #000;
	text-decoration: none;
}
.entry-title a:active,
.entry-title a:hover {
	color: var(--color-accent);
}
.entry-meta {
	color: #777;
	font-size: 12px;
}
.entry-meta abbr,
.entry-utility abbr {
	border: none;
}
.entry-meta abbr:hover,
.entry-utility abbr:hover {
	border-bottom: 1px dotted var(--color-text);
}
.entry-content,
.entry-summary {
	clear: both;
	padding: 12px 0 0 0;
}
.entry-content .more-link {
	white-space: nowrap;
}
.entry-content img {
	max-width: 100%;
	height: auto;
}
#content .entry-summary p:last-child {
	margin-bottom: 12px;
}
.entry-content fieldset {
	border: 1px solid var(--color-border);
	margin: 0 0 24px 0;
	padding: 24px;
}
.entry-content fieldset legend {
	background: #fff;
	color: #000;
	font-weight: bold;
	padding: 0 24px;
}
.entry-content input {
	margin: 0 0 24px 0;
}
.entry-content input.file,
.entry-content input.button {
	margin-right: 24px;
}
.entry-content label {
	color: #777;
	font-size: 12px;
}
.entry-content select {
	margin: 0 0 24px 0;
}
.entry-content sup,
.entry-content sub {
	font-size: 10px;
}
/* Floated pull-quotes: 33% gives a 1/3 column effect */
.entry-content blockquote.left {
	float: left;
	margin-left: 0;
	margin-right: 24px;
	text-align: right;
	width: 33%;
}
.entry-content blockquote.right {
	float: right;
	margin-left: 24px;
	margin-right: 0;
	text-align: left;
	width: 33%;
}
.page-link {
	clear: both;
	color: #000;
	font-weight: bold;
	line-height: 48px;
	word-spacing: 0.5em;
}
.page-link a:link,
.page-link a:visited {
	background: #f1f1f1;
	color: var(--color-text-dark);
	font-weight: normal;
	padding: 0.5em 0.75em;
	text-decoration: none;
}
.home .sticky .page-link a {
	background: #d9e8f7;
}
.page-link a:active,
.page-link a:hover {
	color: var(--color-accent);
}
body.page .edit-link {
	clear: both;
	display: block;
}
/* Author bio box.
   Avatar uses a negative right-margin so the description text wraps beside it.
   -104px = avatar box width (60px) + padding (11px x2) + gap (22px) */
#entry-author-info {
	background: #f2f7fc;
	border-top: 4px solid #000;
	clear: both;
	font-size: 14px;
	line-height: 20px;
	margin: 24px 0;
	overflow: hidden;
	padding: 18px 20px;
}
#entry-author-info #author-avatar {
	background: #fff;
	border: 1px solid var(--color-border);
	float: left;
	height: 60px;
	margin: 0 -104px 0 0;
	padding: 11px;
}
#entry-author-info #author-description {
	float: left;
	margin: 0 0 0 104px;
}
#entry-author-info h2 {
	color: #000;
	font-size: 100%;
	font-weight: bold;
	margin-bottom: 0;
}
.entry-utility {
	clear: both;
	color: #777;
	font-size: 12px;
	line-height: 18px;
}
.entry-meta a,
.entry-utility a {
	color: #777;
}
.entry-meta a:hover,
.entry-utility a:hover {
	color: var(--color-accent);
}
#content .video-player {
	padding: 0;
}
.format-standard .wp-video,
.format-standard .wp-audio-shortcode,
.format-audio .wp-audio-shortcode,
.format-standard .video-player {
	margin-bottom: 24px;
}

/* Content responsive overrides */
@media screen and (max-width: 599px) {
	.entry-title {
		font-size: 20px;
	}
	.entry-content img {
		max-width: 100%;
		height: auto;
	}
}


/* =Asides
-------------------------------------------------------------- */

.home #content .format-aside p,
.home #content .category-asides p {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 10px;
	margin-top: 0;
}
.home .hentry.format-aside,
.home .hentry.category-asides {
	padding: 0;
}
.home #content .format-aside .entry-content,
.home #content .category-asides .entry-content {
	padding-top: 0;
}


/* =Gallery listing
-------------------------------------------------------------- */

.format-gallery .size-thumbnail img,
.category-gallery .size-thumbnail img {
	border: 10px solid #f1f1f1;
	margin-bottom: 0;
}
.format-gallery .gallery-thumb,
.category-gallery .gallery-thumb {
	float: left;
	margin-right: 20px;
	margin-top: -4px;
}
.home #content .format-gallery .entry-utility,
.home #content .category-gallery .entry-utility {
	padding-top: 4px;
}


/* =Attachment pages
-------------------------------------------------------------- */

.attachment .entry-content .entry-caption {
	font-size: 140%;
	margin-top: 24px;
}
.attachment .entry-content .nav-previous a:before {
	content: '\2190 a0';
}
.attachment .entry-content .nav-next a:after {
	content: ' a0\2192';
}


/* =Images
-------------------------------------------------------------- */

img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-container img {
	max-width: 100%;
	height: auto;
}
.alignleft,
img.alignleft {
	display: inline;
	float: left;
	margin-right: 24px;
	margin-top: 4px;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
	margin-left: 24px;
	margin-top: 4px;
}
.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignleft,
img.alignright,
img.aligncenter {
	margin-bottom: 12px;
}
.wp-caption {
	background: #f1f1f1;
	line-height: 18px;
	margin-bottom: 20px;
	max-width: 632px !important;
	padding: 4px;
	text-align: center;
}
.widget-container .wp-caption {
	max-width: 100% !important;
}
.wp-caption img {
	margin: 5px 5px 0;
	max-width: 622px;
}
.wp-caption p.wp-caption-text {
	color: #777;
	font-size: 12px;
	margin: 5px;
}
.wp-smiley {
	margin: 0;
}
.gallery {
	margin: 0 auto 18px;
}
.gallery .gallery-item {
	float: left;
	margin-top: 0;
	text-align: center;
	width: 33%;
}
.gallery-columns-2 .gallery-item {
	width: 50%;
}
.gallery-columns-4 .gallery-item {
	width: 25%;
}
.gallery img {
	border: 10px solid #f1f1f1;
}
.gallery-columns-2 .attachment-medium {
	max-width: 92%;
	height: auto;
}
.gallery-columns-4 .attachment-thumbnail {
	max-width: 84%;
	height: auto;
}
.gallery .gallery-caption {
	color: #777;
	font-size: 12px;
	margin: 0 0 12px;
}
.gallery dl {
	margin: 0;
}
.gallery br+br {
	display: none;
}
#content .attachment img {
	display: block;
	margin: 0 auto;
}


/* =Post Navigation
-------------------------------------------------------------- */

.navigation {
	color: #777;
	font-size: 12px;
	line-height: 18px;
	overflow: hidden;
}
.navigation a:link,
.navigation a:visited {
	color: #777;
	text-decoration: none;
}
.navigation a:active,
.navigation a:hover {
	color: var(--color-accent);
}
.nav-previous {
	float: left;
	width: 50%;
}
.nav-next {
	float: right;
	text-align: right;
	width: 50%;
}
#nav-above {
	display: none;
	margin: 0 0 18px 0;
}
.paged #nav-above,
.single #nav-above {
	display: block;
}
#nav-below {
	margin: -18px 0 0 0;
}


/* =Comments
-------------------------------------------------------------- */

#comments {
	clear: both;
}
#comments .navigation {
	padding: 0 0 18px 0;
}
h3#comments-title,
h3#reply-title {
	color: #000;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 0;
}
h3#comments-title {
	padding: 24px 0;
}
.commentlist {
	list-style: none;
	margin: 0;
}
.commentlist li.comment {
	border-bottom: 1px solid var(--color-border);
	line-height: 24px;
	margin: 0 0 24px 0;
	padding: 0 0 0 56px;
	position: relative;
}
.commentlist li:last-child {
	border-bottom: none;
	margin-bottom: 0;
}
#comments .comment-body ul,
#comments .comment-body ol {
	margin-bottom: 18px;
}
#comments .comment-body p:last-child {
	margin-bottom: 6px;
}
#comments .comment-body blockquote p:last-child {
	margin-bottom: 24px;
}
.commentlist ol {
	list-style: decimal;
}
.commentlist .avatar {
	position: absolute;
	top: 4px;
	left: 0;
}
.comment-author cite {
	color: #000;
	font-style: normal;
	font-weight: bold;
}
.comment-author .says {
	font-style: italic;
}
.comment-meta {
	font-size: 12px;
	margin: 0 0 18px 0;
}
.comment-meta a:link,
.comment-meta a:visited {
	color: #777;
	text-decoration: none;
}
.comment-meta a:active,
.comment-meta a:hover {
	color: var(--color-accent);
}
.reply {
	font-size: 12px;
	padding: 0 0 24px 0;
}
.reply a,
a.comment-edit-link {
	color: #777;
}
.reply a:hover,
a.comment-edit-link:hover {
	color: var(--color-accent);
}
.commentlist .children {
	list-style: none;
	margin: 0;
}
.commentlist .children li {
	border: none;
	margin: 0;
}
.nopassword,
.nocomments {
	display: none;
}
#comments .pingback {
	border-bottom: 1px solid var(--color-border);
	margin-bottom: 18px;
	padding-bottom: 18px;
}
.commentlist li.comment+li.pingback {
	margin-top: -6px;
}
#comments .pingback p {
	color: #777;
	display: block;
	font-size: 12px;
	line-height: 18px;
	margin: 0;
}
#comments .pingback .url {
	font-size: 13px;
	font-style: italic;
}
input[type="submit"] {
	color: var(--color-text-dark);
}
#respond {
	border-top: 1px solid var(--color-border);
	margin: 24px 0;
	overflow: hidden;
	position: relative;
}
#respond p {
	margin: 0;
}
#respond .comment-notes {
	margin-bottom: 1em;
}
.form-allowed-tags {
	line-height: 1em;
}
.children #respond {
	margin: 0 48px 0 0;
}
h3#reply-title {
	margin: 18px 0;
}
#comments-list #respond {
	margin: 0 0 18px 0;
}
#comments-list ul #respond {
	margin: 0;
}
#cancel-comment-reply-link {
	font-size: 12px;
	font-weight: normal;
	line-height: 18px;
}
#respond .required {
	color: var(--color-accent);
	font-weight: bold;
}
#respond label {
	color: #777;
	font-size: 12px;
}
#respond input {
	margin: 0 0 9px;
	width: 98%;
}
#respond textarea {
	width: 98%;
}
#respond .form-allowed-tags {
	color: #777;
	font-size: 12px;
	line-height: 18px;
}
#respond .form-allowed-tags code {
	font-size: 11px;
}
#respond .form-submit {
	margin: 12px 0;
}
#respond .form-submit input {
	font-size: 14px;
	width: auto;
}
#respond #wp-comment-cookies-consent {
	width: auto;
	margin: 0 10px 0 0;
}


/* =Widget Areas
-------------------------------------------------------------- */

.widget-area ul {
	list-style: none;
	margin-left: 0;
}
.widget-area ul ul {
	list-style: square;
	margin-left: 1.3em;
}
.widget-area select {
	max-width: 100%;
}
.widget_search #s {
	width: 60%;
}
.widget_search label {
	display: none;
}
.widget-container {
	word-wrap: break-word;
	hyphens: auto;
	margin: 0 0 18px 0;
}
.widget-container .wp-caption img {
	margin: auto;
}
.widget-title {
	color: #222;
	font-weight: bold;
}

/* Archives scrollable list — max-height of 500px prevents it dominating the sidebar */
.archives-scroll {
	max-height: 500px;
	overflow-y: auto;
	border: 1px solid var(--color-border);
	border-radius: 3px;
	background: #fafafa;
	scrollbar-width: thin;
	scrollbar-color: #bbb #f0f0f0;
	margin-top: 10px;
}
.archives-scroll::-webkit-scrollbar {
	width: 6px;
}
.archives-scroll::-webkit-scrollbar-track {
	background: #f0f0f0;
	border-radius: 3px;
}
.archives-scroll::-webkit-scrollbar-thumb {
	background: #bbb;
	border-radius: 3px;
}
.archives-scroll::-webkit-scrollbar-thumb:hover {
	background: #999;
}
.archives-scroll ul {
	list-style: none;
	margin: 0;
	padding: 0;
	margin-left: 10px;
	list-style-image: url('images/archive-bullet.png');
	border:1px solid red;
}
.archives-scroll ul li {
	border-bottom: 1px solid #ececec;
	margin-left: 10px;
}
.archives-scroll ul li:last-child {
	border-bottom: none;
}
.archives-scroll ul li a {
	display: block;
	padding: 7px 12px;
	font-size: 13px;
	color: #444;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.archives-scroll ul li a:hover {
	background: #1a4a7a;
	color: #fff;
	text-decoration: none;
}
.widget-area a:link,
.widget-area a:visited {
	text-decoration: none;
}
.widget-area a:active,
.widget-area a:hover {
	text-decoration: underline;
}
.widget-area .entry-meta {
	font-size: 11px;
}
#wp_tag_cloud div {
	line-height: 1.6em;
}
#wp-calendar {
	width: 100%;
}
#wp-calendar caption {
	color: #222;
	font-size: 14px;
	font-weight: bold;
	padding-bottom: 4px;
	text-align: left;
}
#wp-calendar thead {
	font-size: 11px;
}
#wp-calendar tbody {
	color: #aaa;
}
#wp-calendar tbody td {
	background: #f5f5f5;
	border: 1px solid #fff;
	padding: 3px 0 2px;
	text-align: center;
}
#wp-calendar tbody .pad {
	background: none;
}
.wp-calendar-nav {
	display: table;
	width: 100%;
}
.wp-calendar-nav span {
	display: table-cell;
}
.wp-calendar-nav-next,
#wp-calendar tfoot #next {
	text-align: right;
}
.widget_rss a.rsswidget {
	color: #000;
}
.widget_rss a.rsswidget:hover {
	color: var(--color-accent);
}
.widget_rss .widget-title img {
	width: 11px;
	height: 11px;
}
.widget_text ul,
.widget_text ol {
	margin-bottom: 1.5em;
}
.widget_text ol {
	margin-left: 1.3em;
}
.widget_text ul ul,
.widget_text ol ol,
.widget_text ul ol,
.widget_text ol ul {
	margin-bottom: 0;
}
.widget_media_video video {
	max-width: 100%;
}
.tagcloud ul {
	list-style-type: none;
	margin-left: 0 !important;
}
.tagcloud ul li {
	display: inline-block;
}
/* Gallery images inside widget areas — consolidated from 9 separate rules */
.widget-area .gallery-columns-1 img,
.widget-area .gallery-columns-2 img,
.widget-area .gallery-columns-3 img,
.widget-area .gallery-columns-4 img,
.widget-area .gallery-columns-5 img,
.widget-area .gallery-columns-6 img,
.widget-area .gallery-columns-7 img,
.widget-area .gallery-columns-8 img,
.widget-area .gallery-columns-9 img {
	border: none;
	max-width: 90%;
	width: auto;
}
#main .widget-area ul {
	margin-left: 0;
	padding: 0 20px 0 0;
}
#main .widget-area ul ul {
	border: none;
	margin-left: 1.3em;
	padding: 0;
}
#main .widget-area ul.wp-block-latest-posts.wp-block-latest-posts__list {
	list-style: square;
}

/* Widget responsive overrides */
@media screen and (max-width: 599px) {
	.widget-area {
		font-size: 14px;
	}
	.widget-area ul {
		column-count: 1;
	}
}


/* =Footer
-------------------------------------------------------------- */

#footer {
	margin-bottom: 20px;
}
#colophon {
	border-top: 4px solid #000;
	margin-top: -4px;
	overflow: hidden;
	padding: 18px 0;
}
#site-info {
	font-weight: bold;
}
#site-info a {
	color: #000;
	text-decoration: none;
}
#site-generator {
	font-style: italic;
	position: relative;
}
#site-generator a {
	background: url(images/wordpress.png) center left no-repeat;
	color: var(--color-text);
	display: inline-block;
	line-height: 16px;
	padding-left: 20px;
	text-decoration: none;
}
#site-generator a:hover {
	text-decoration: underline;
}
img#wpstats {
	display: block;
	margin: 0 auto 10px;
}
#site-info span[role=separator] {
	padding: 0 0.6em 0 0.3em;
}
#site-info span[role=separator]::before {
	content: '\00b7';
}


/* =Mobile Safari ( iPad, iPhone and iPod Touch )
-------------------------------------------------------------- */

pre {
	-webkit-text-size-adjust: 140%;
}
code {
	-webkit-text-size-adjust: 160%;
}
#access,
.entry-meta,
.entry-utility,
.navigation,
.widget-area {
	-webkit-text-size-adjust: 120%;
}


/* =Print
-------------------------------------------------------------- */

@media print {
	body {
		background: none !important;
	}
	#wrapper {
		clear: both !important;
		display: block !important;
		float: none !important;
		position: relative !important;
	}
	#header {
		border-bottom: 2pt solid #000;
		padding-bottom: 18pt;
	}
	#colophon {
		border-top: 2pt solid #000;
	}
	#site-title,
	#site-description {
		float: none;
		line-height: 1.4em;
		margin: 0;
		padding: 0;
	}
	#site-title {
		font-size: 13pt;
	}
	.entry-content {
		font-size: 14pt;
		line-height: 1.6em;
	}
	.entry-title {
		font-size: 21pt;
	}
	#access,
	#branding img,
	#respond,
	.comment-edit-link,
	.edit-link,
	.navigation,
	.page-link,
	.widget-area {
		display: none !important;
	}
	#container,
	#header,
	#footer {
		margin: 0;
		width: 100%;
	}
	#content,
	.one-column #content {
		margin: 24pt 0 0;
		width: 100%;
	}
	.wp-caption p {
		font-size: 11pt;
	}
	#site-info,
	#site-generator {
		float: none;
		width: auto;
	}
	#colophon {
		width: auto;
	}
	img#wpstats {
		display: none;
	}
	#site-generator a {
		margin: 0;
		padding: 0;
	}
	#entry-author-info {
		border: 1px solid var(--color-border);
	}
	#main {
		display: inline;
	}
	.home .sticky {
		border: none;
	}
}


/* =Homepage Splash Area
-------------------------------------------------------------- */

/* Full-bleed breakout — same technique as #header */
#homepage-splash {
	overflow: hidden;
	margin: 0 0 24px;
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}
.homepage-splash-inner {
	max-width: var(--column-width);
	margin: 0 auto;
	padding: 24px 20px;
	box-sizing: border-box;
	display: flex;
	gap: 20px;
}

/* Primary (left) — most recent post */
.splash-primary {
	flex: 0 0 57%;
	width: 57%;
	box-sizing: border-box;
	padding-right: 16px;
	position: relative;
}
.splash-primary-title a {
	text-decoration: none;
	color: inherit;
}
.splash-primary-image {
	position: relative;
	overflow: hidden;
	background: #1a2a3a;
	line-height: 0;
}
.splash-primary-image img {
	width: 100%;
	height: auto;
	display: block;
	transition: opacity 0.2s ease;
}
.splash-primary:hover .splash-primary-image img {
	opacity: 0.88;
}
.splash-no-thumb {
	width: 100%;
	padding-bottom: 60%;
	background: #2c3e50;
}
.splash-category-label {
	position: absolute;
	bottom: 0;
	left: 0;
	background: #1a4a7a;
	color: #fff;
	font-family: var(--font-ui);
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 4px 10px;
	text-decoration: none;
}
.splash-primary-content {
	padding: 12px 0 4px;
}
.splash-primary-title {
	font-family: var(--font-ui);
	font-size: 20px;
	font-weight: bold;
	line-height: 1.3;
	color: #369;
	margin-bottom: 8px;
}
.splash-primary:hover .splash-primary-title {
	color: #a8c8f0;
}
.splash-primary-excerpt {
	font-size: 13px;
	line-height: 1.6;
	color: #b0c4d8;
	margin: 0;
}

/* Secondary (right) — 2nd–4th most recent posts */
.splash-secondary {
	flex: 1;
	width: 41%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.splash-secondary-item {
	border: 1px solid #2a4a6a;
	margin-bottom: 0;
	background: #FFFFFF;
	overflow: hidden;
	display: flex;
	min-height: 110px;
}
.splash-secondary-item:last-child {
	margin-bottom: 0;
}
.splash-secondary-item a {
	text-decoration: none;
    color: #4e565f;
}
.splash-secondary-item:hover .splash-secondary-thumb img {
	opacity: 0.85;
}
.splash-secondary-thumb {
	flex: 0 0 120px;
	width: 120px;
	overflow: hidden;
	background: #2c3e50;
	line-height: 0;
}
.splash-secondary-thumb img {
	width: 120px;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: opacity 0.15s ease;
}
.splash-secondary-thumb .splash-no-thumb {
	width: 120px;
	height: 100%;
	min-height: 110px;
	padding: 0;
	background: #2c3e50;
}
.splash-secondary-content {
	flex: 1;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.splash-secondary-category {
	font-family: var(--font-ui);
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #7ab3e0;
	display: block;
	margin-bottom: 4px;
	text-decoration: none;
}
.splash-secondary-title {
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: bold;
	line-height: 1.3;
	color: #e8eef4;
	margin-bottom: 5px;
}
.splash-secondary-item:hover .splash-secondary-title {
	color: #a8c8f0;
}
.splash-secondary-caption {
	font-size: 12px;
	line-height: 1.5;
	color: #8099b0;
	margin: 0;
}

/* Splash responsive overrides are in the v2 Design Integration section below */


/* =Homepage Stories Grid (posts 4-9)
-------------------------------------------------------------- */

#homepage-stories-grid {
	clear: both;
	margin: 8px 0 30px;
}
.stories-grid-heading {
	font-family: var(--font-ui);
	font-size: 18px;
	font-weight: bold;
	color: #222;
	margin-bottom: 14px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--color-border);
}
.stories-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.stories-grid-item {
	background: #fff;
	border: 1px solid #e0e0e0;
	overflow: hidden;
}
.stories-grid-item a {
	display: block;
	text-decoration: none;
	color: inherit;
}
.stories-grid-item:hover .stories-grid-thumb img {
	opacity: 0.85;
}
.stories-grid-thumb {
	overflow: hidden;
	background: #2c3e50;
	line-height: 0;
}
.stories-grid-thumb img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
	transition: opacity 0.15s ease;
}
.stories-grid-thumb .splash-no-thumb {
	width: 100%;
	height: 180px;
	padding: 0;
	background: #2c3e50;
}
.stories-grid-content {
	padding: 10px 12px 12px;
}
.stories-grid-category {
	font-family: var(--font-ui);
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #1a4a7a;
	display: block;
	margin-bottom: 4px;
	text-decoration: none;
}
.stories-grid-title {
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: bold;
	line-height: 1.35;
	color: #111;
	margin-bottom: 6px;
}
.stories-grid-item:hover .stories-grid-title {
	color: #1a4a7a;
}
.stories-grid-caption {
	font-size: 12px;
	line-height: 1.5;
	color: var(--color-text);
	margin: 0;
}

/* Drop-in animation for newly loaded grid cards */
@keyframes iiss-card-drop-in {
	from {
		opacity: 0;
		transform: translateY( -10px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* New cards start invisible; JS adds --animate after append */
.stories-grid-item--new {
	opacity: 0;
}
.stories-grid-item--animate {
	animation: iiss-card-drop-in 0.35s ease forwards;
}

/* Read more footer row */
.stories-grid-footer {
	display: flex;
	justify-content: flex-end;
	margin-top: 16px;
}
.stories-read-more {
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: bold;
	color: #1a4a7a;
	background: transparent;
	border: 2px solid #1a4a7a;
	padding: 6px 16px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.stories-read-more:hover:not( :disabled ) {
	background: #1a4a7a;
	color: #fff;
}
.stories-read-more:disabled {
	opacity: 0.55;
	cursor: default;
}

/* Stories grid responsive overrides */
@media screen and (max-width: 940px) {
	.stories-grid {
		grid-template-columns: repeat(2, 1fr);
	}

}
@media screen and (max-width: 599px) {
	.stories-grid {
		grid-template-columns: 1fr;
	}
	.stories-grid-thumb img {
		height: 200px;
	}
	.stories-grid-thumb .splash-no-thumb {
		height: 200px;
	}
}


/* =Homepage About Panel
-------------------------------------------------------------- */

#homepage-about {
	background: transparent;
	padding: 20px 20px 20px 0;
}
#homepage-about .homepage-about-title {
	font-family: var(--font-ui);
	font-size: 16px;
	font-weight: bold;
	color: #222;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--color-border);
}
#homepage-about p {
	font-size: 13px;
	line-height: 1.7;
	color: #555;
	margin-bottom: 12px;
}
#homepage-about p:last-child {
	margin-bottom: 0;
}

/* About panel responsive overrides */
@media screen and (max-width: 940px) {
	#homepage-about {
        padding: 20px;
	}
}
@media screen and (max-width: 599px) {
	#homepage-about p {
		font-size: 14px;
		line-height: 1.75;
	}
}


/* =Single Post
-------------------------------------------------------------- */

.entry-thumbnail {
	margin-bottom: 20px;
}
.entry-thumbnail img {
	display: block;
	max-width: 100%;
	height: auto;
}


/* =Homepage Design v2 — Demo Integration
-------------------------------------------------------------- */

/* ── A. Header + global font refinements ── */

/* Apply Inter globally to match demo.html body { font-family: var(--font-ui) } */
body {
	font-family: var(--font-ui);
}

.masthead-inner {
	padding: 0 6px 0.8rem;
}

/* Site title */
#site-title {
	font-family: var(--font-ui);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.5rem 6px;
}

        .footer-col a.footer-brand {
            color:#f4f4f5;
			font-size:2em;
			line-height:1.0em;
        }
        
/* Nav links */
#access .menu-header > ul,
div.menu > ul {
	justify-content: flex-start;
}

#access a {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	font-weight: 500;
	color: #e2e2e2;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 10px 14px 10px 10px;
	border-bottom:1px solid rgba(255, 255, 255, 0.7)
}

#access a:hover {
	color: rgba(255,255,255,0.75);
}

/* ── Primary article typography — white polaroid background ── */
.splash-primary-title {
	font-family: var(--font-ui);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: #1e3a5f;
}

.splash-primary-excerpt {
	font-family: var(--font-ui);
	font-size: 13px;
	line-height: 1.6;
	color: #374151;
}

/* ── Secondary article typography — dark (#122038) background ── */
.splash-secondary-title {
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: #e8eef4;
}

.splash-secondary-caption {
	font-family: var(--font-ui);
	font-size: 12px;
	line-height: 1.5;
	color: #8099b0;
}

.splash-secondary-category {
	font-family: var(--font-ui);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #7ab3e0;
}

/* ── Category label on primary image ── */
.splash-category-label {
	font-family: var(--font-ui);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ── Stories grid typography ── */
.stories-grid-title {
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: #111;
}

.stories-grid-caption {
	font-family: var(--font-ui);
	font-size: 12px;
	line-height: 1.5;
	color: #555;
}

.stories-grid-category {
	font-family: var(--font-ui);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #1a4a7a;
}


/* ── B. Masthead: parallax bg + fg + splash grid ── */

.masthead {
	position: relative;
	overflow: hidden;
	width: 100vw;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: 0;
}

.bg-layer,
.fg-layer {
	position: absolute;
	top: -200px;
	left: 0;
	width: 100%;
	height: 130%;
	pointer-events: none;
}

.bg-layer {
	z-index: 1;
	background-image: url('images/background-desert.jpg');
	background-size: auto 100%;
	background-repeat: repeat-x;
	background-position: center top;
	filter: brightness(0.7);
}

.fg-layer {
	z-index: 2;
	background-image: url('images/foreground-soldier.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center top;
}

.masthead-content {
	position: relative;
	z-index: 10;
	max-width: var(--column-width);
	margin: 0 auto;
	padding: calc(2rem + 100px) 20px 2rem;
	box-sizing: border-box;
}

.splash-layout {
	display: grid;
	grid-template-columns: 57% 43%;
	grid-template-rows: auto auto;
	column-gap: 10px;
}

.main-headline-box {
	grid-column: 1 / 3;
	grid-row: 1;
	background: rgba(59, 80, 104, 0.88);
	color: white;
	padding: 1.25rem 1.75rem;
	box-shadow: 0 8px 24px rgba(0,0,0,0.35);
	position: relative;
	z-index: 100;
	width: 100%;
	top: -10px;
	height: fit-content;
}

.main-headline-box h1 {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.2;
	width: 50%;
	margin: 0;
}

/* Override existing flex sizing from old splash rules */
.splash-primary {
	grid-column: 1;
	grid-row: 2;
	margin-top: 5px;
	margin-left: 10px;
	margin-right: 20px;
	position: relative;
	z-index: 10;
	width: auto;
	flex: none;
	background: white;
	padding: 10px;
}

.splash-secondary {
	grid-column: 2;
	grid-row: 1 / 3;
	position: relative;
	z-index: 1000;
	width: 100%;
	flex: none;
	margin-top: 60px;
	padding-right: 20px;
}

.splash-secondary-item {
	padding: 10px;
}

@media screen and (max-width: 940px) {

	#site-title a {
	    color: #FFF;
    	border-bottom: 0px solid white;
	}
	
	.masthead-content {
		padding: 1rem 16px 1.5rem;
	}
	/* Collapse from 57%/43% two-column to single column */
	.splash-layout {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
	.main-headline-box {
		grid-column: 1;
		grid-row: 1;
		padding: 0.75rem 1rem;
	}
	.main-headline-box h1 {
		font-size: 1.4rem;
		width: 100%;
	}
	.splash-primary {
		grid-column: 1;
		grid-row: 2;
		margin: 8px 0 0;
		width: 100%;
	}
	/* Secondary becomes a horizontal strip of 3 cards below the primary */
	.splash-secondary {
		grid-column: 1;
		grid-row: 3;
		display: flex;
		flex-direction: row;
		gap: 8px;
		margin-top: 8px;
	}
	.splash-secondary-item {
		flex: 1;
		min-height: auto;
		flex-direction: column;
	}
	.splash-secondary-thumb {
		width: 100%;
	}
	.splash-secondary-thumb img,
	.splash-secondary-thumb .splash-no-thumb {
		width: 100%;
		height: 120px;
		object-fit: cover;
	}
	.splash-secondary-title {
		font-size: 12px;
	}
	.splash-secondary-caption {
		display: none;

	}
	.home #container {
		background-color: transparent!important;
	}
	#main{
		margin:0px;
	}

	.site-title a{
		border-bottom:0px!important;
	}

	div#primary.widget-area{
		padding-left: 20px;
	}
	div#primary.widget-area #archives{
		padding-right:20px;
	}
	div#primary.widget-area #archives .archives-scroll{
		padding-top:0px;
	}
} /* close @media (max-width: 940px) */

@media screen and (max-width: 599px) {
	.splash-layout {
		grid-template-columns: 1fr;
	}
	.main-headline-box {
		grid-column: 1;
		grid-row: 1;
		top: 0;
	}
	.main-headline-box h1 {
		font-size: 1.3rem;
		width: 100%;
	}
	.splash-primary {
		grid-column: 1;
		grid-row: 2;
		margin: 6px 0 0;
		width: 100%;
	}
	.splash-secondary {
		grid-column: 1;
		grid-row: 3;
		margin-top: 6px;
		flex-direction: column;
		gap: 10px;
	}
	.splash-secondary-item {
		flex: none;
		width: 100%;
	}
	.splash-secondary-thumb,
	.splash-secondary-thumb img,
	.splash-secondary-thumb .splash-no-thumb {
		flex: none;
		width: 100%;
		height: 160px;
		object-fit: cover;
	}
	.splash-secondary-title {
		font-size: 13px;
	}
	.splash-secondary-caption {
		display: none;
	}
	/* Clamp parallax layer offsets so they don't create extra space on short viewports */
	.bg-layer,
	.fg-layer {
		top: 0;
		height: 100%;
	}
}


/* ── C. Stories grid constrained to content column ── */

.home #homepage-stories-grid {
	max-width: var(--column-width);
	margin: 0 auto;
	padding: 24px 20px 0px 20px;
	clear: none;
}


/* ── D. Homepage container + sidebar (scoped to .home body class) ── */

.home #container {
	float: none;
	clear: both;
	display: flex;
	gap: 2.5rem;
	align-items: flex-start;
	max-width: var(--column-width);
	margin: 0 auto;
	padding: 2rem 20px;
	background: white;
	width: auto;
}

.home #content {
	flex: 1;
	min-width: 0;
	margin: 0;
}

.home #primary,
.home #secondary {
	float: none;
	width: 240px;
	flex: 0 0 240px;
	position: static;
	clear: none;
	overflow: visible;
}

@media screen and (max-width: 940px) {
	.home #container {
		flex-wrap: wrap;
		gap: 1.5rem;
	}
	.home #primary,
	.home #secondary {
		width: 100%;
		flex: 0 0 100%;
	}
}
@media screen and (max-width: 599px) {
	.home #container {
		flex-direction: column;
	}
	.home #primary,
	.home #secondary {
		width: 100%;
		flex: none;
	}
}


/* ── E. Homepage Timeline Area ── */

#homepage-timeline-area {
	background: white;
	max-width: var(--column-width);
	margin: 0 auto;
	clear: both;

	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}

#homepage-timeline-area

.timeline-area-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid #e2e8f0;
}
@media screen and (max-width: 599px) {
	.timeline-area-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}
}

.timeline-area-title {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #1e3a5f;
	margin: 0;
}

.timeline-area-toggle {
	display: flex;
	gap: 0;
}

.timeline-toggle-btn {
	font-size: 0.8rem;
	padding: 0.3rem 0.85rem;
	border: 1px solid #cbd5e1;
	color: #374151;
	text-decoration: none;
	background: white;
	cursor: pointer;
}

.timeline-toggle-btn:first-child {
	border-right: none;
}

.timeline-toggle-btn.active {
	background: #1e3a5f;
	color: white;
	border-color: #1e3a5f;
}

.timeline-calendar-wrap {
	display: inline-block;
	min-width: 240px;
	margin-bottom: 1.5rem;
	vertical-align: top;
}

.timeline-placeholder {
	margin-top: 0.5rem;
	margin-bottom: 20px;
	padding: 2rem;
	background: #f8fafc;
	border: 1px dashed #cbd5e1;
	color: #94a3b8;
	font-size: 0.85rem;
	text-align: center;
}


/* ── F. Footer 4-column grid ── */

#footer {
	background: #1e3a5f;
	padding: 3rem 0 0;
	margin: 3rem 0 0;
	clear: both;
	width: 100vw;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

#colophon {
	border: none;
	margin: 0;
	padding: 0;
	width: auto;
}

.footer-inner {
	max-width: var(--column-width);
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255,255,255,0.15);
}

.footer-col h4 {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255,255,255,0.5);
	margin-bottom: 1rem;
}

.footer-brand {
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: 0.04em;
	display: block;
	margin-bottom: 0.75rem;
	color: white;
	text-decoration: none;
}

.footer-tagline {
	font-size: 0.85rem;
	line-height: 1.6;
	color: rgba(255,255,255,0.6);
	margin-bottom: 1.25rem;
}

.footer-social {
	display: flex;
	gap: 0.75rem;
}

.footer-social a {
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border: 1px solid rgba(255,255,255,0.25);
	padding: 0.3rem 0.6rem;
}

.footer-social a:hover {
	color: white;
	border-color: white;
}

.footer-col ul,
.footer-col .menu {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.footer-col ul li a,
.footer-col .menu li a {
	color: rgba(255,255,255,0.75);
	text-decoration: none;
	font-size: 0.85rem;
	line-height: 1.4;
}

.footer-col ul li a:hover,
.footer-col .menu li a:hover {
	color: white;
}

.footer-bottom {
	padding: 1rem 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.75rem;
	color: rgba(255,255,255,0.4);
}

.footer-bottom a {
	color: rgba(255,255,255,0.4);
	text-decoration: none;
}

.footer-bottom a:hover {
	color: rgba(255,255,255,0.7);
}

#site-info,
#site-generator {
	display: none;
}

@media screen and (max-width: 940px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}
	.footer-col:first-child {
		grid-column: 1 / 3;
	}
}
@media screen and (max-width: 599px) {
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
	.footer-col:first-child {
		grid-column: auto;
	}
	.footer-bottom {
		flex-direction: column;
		gap: 0.5rem;
		text-align: center;
	}
}


/* =Login Page
-------------------------------------------------------------- */

#login-page-wrap {
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 20px 4rem;
}

.login-card {
	background: #fff;
	width: 100%;
	max-width: 420px;
	padding: 2.5rem 2.5rem 2rem;
	border-top: 4px solid #1e3a5f;
	box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}

/* Brand block at top of card */
.login-card-brand {
	margin-bottom: 1.75rem;
	text-align: center;
}

.login-card-brand a {
	font-family: var(--font-ui);
	font-size: 1.5rem;
	line-height: normal;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #1e3a5f;
	text-decoration: none;
	display: block;
	margin-bottom: 0.25rem;
}

.login-card-tagline {
	font-family: var(--font-ui);
	font-size: 0.78rem;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin: 0;
}

/* ── Form labels ── */
#login-page-wrap .login-card label,
#login-page-wrap .login-card .pms-form label {
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #64748b;
	display: block;
	margin-bottom: 0.35rem;
}

/* ── Inputs ── */
#login-page-wrap #pms_login input[type="text"],
#login-page-wrap #pms_login input[type="password"],
#login-page-wrap #pms_login input[type="email"] {
	font-family: var(--font-ui);
	font-size: 0.9rem;
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid #cbd5e1;
	border-radius: 0;
	background: #f8fafc;
	color: #1e293b;
	box-sizing: border-box;
	transition: border-color 0.15s ease, background 0.15s ease;
	margin-bottom: 1rem;
	display: block;
}

#login-page-wrap #pms_login input[type="text"]:focus,
#login-page-wrap #pms_login input[type="password"]:focus,
#login-page-wrap #pms_login input[type="email"]:focus {
	outline: none;
	border-color: #1e3a5f;
	background: #fff;
}

/* ── Submit button ── */
#login-page-wrap #pms_login input[type="submit"],
#login-page-wrap #pms_login .pms-submit-button {
	font-family: var(--font-ui);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	width: 100%;
	padding: 0.75rem 1rem;
	background: #1e3a5f;
	color: #fff;
	border: none;
	cursor: pointer;
	transition: background 0.15s ease;
	margin-top: 0.5rem;
}

#login-page-wrap #pms_login input[type="submit"]:hover,
#login-page-wrap #pms_login .pms-submit-button:hover {
	background: #16304f;
}

/* ── Remember me ── */
#login-page-wrap #pms_login .login-remember {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

#login-page-wrap #pms_login .login-remember label {
	font-size: 0.8rem;
	text-transform: none;
	letter-spacing: 0;
	color: #475569;
	margin: 0;
}

/* ── Extra links (register / lost password) ── */
#login-page-wrap #pms_login .login-extra,
#login-page-wrap #pms_login p.pms-login-links {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid #e2e8f0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
}

#login-page-wrap #pms_login .login-extra a,
#login-page-wrap #pms_login p.pms-login-links a {
	font-family: var(--font-ui);
	font-size: 0.78rem;
	color: #1e3a5f;
	text-decoration: none;
}

#login-page-wrap #pms_login .login-extra a:hover,
#login-page-wrap #pms_login p.pms-login-links a:hover {
	text-decoration: underline;
}

/* ── Error messages ── */
#login-page-wrap .pms-login-error,
#login-page-wrap .pms-error {
	font-family: var(--font-ui);
	font-size: 0.82rem;
	background: #fef2f2;
	border-left: 3px solid #dc2626;
	color: #b91c1c;
	padding: 0.6rem 0.75rem;
	margin-bottom: 1rem;
}

/* ── Back to site link ── */
.login-back-link {
	margin-top: 1.25rem;
	text-align: center;
}

.login-back-link a {
	font-family: var(--font-ui);
	font-size: 0.78rem;
	color: #64748b;
	text-decoration: none;
}

.login-back-link a:hover {
	color: #1e3a5f;
}

/* ── Strip plugin's default paragraph spacing inside form ── */
#login-page-wrap #pms_login p {
	margin-bottom: 0;
}

@media screen and (max-width: 480px) {
	.login-card {
		padding: 2rem 1.25rem 1.5rem;
	}
}


/* =Registration Page
-------------------------------------------------------------- */

/* Wider card for registration (more fields + subscription plans) */
.login-card--wide {
	max-width: 560px;
}

/* ── PMS form field list ── */
#login-page-wrap form.pms-form ul.pms-form-fields-wrapper {
	list-style: none;
	margin: 0;
	padding: 0;
}

#login-page-wrap form.pms-form ul.pms-form-fields-wrapper li,
#login-page-wrap form.pms-form .pms-field {
	margin-bottom: 1rem;
	padding: 0;
	list-style: none;
}

/* ── Labels ── */
#login-page-wrap form.pms-form label {
	font-family: var(--font-ui);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #64748b;
	display: block;
	margin-bottom: 0.35rem;
}

/* ── All text/email/password inputs ── */
#login-page-wrap form.pms-form input[type="text"],
#login-page-wrap form.pms-form input[type="email"],
#login-page-wrap form.pms-form input[type="password"],
#login-page-wrap form.pms-form input[type="number"],
#login-page-wrap form.pms-form textarea,
#login-page-wrap form.pms-form .pms-field.pms-field-type-select select {
	font-family: var(--font-ui);
	font-size: 0.9rem;
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid #cbd5e1;
	background: #f8fafc;
	color: #1e293b;
	box-sizing: border-box;
	transition: border-color 0.15s ease, background 0.15s ease;
	display: block;
	border-radius: 0;
	appearance: none;
}

#login-page-wrap form.pms-form input[type="text"]:focus,
#login-page-wrap form.pms-form input[type="email"]:focus,
#login-page-wrap form.pms-form input[type="password"]:focus,
#login-page-wrap form.pms-form textarea:focus,
#login-page-wrap form.pms-form .pms-field.pms-field-type-select select:focus {
	outline: none;
	border-color: #1e3a5f;
	background: #fff;
}

/* ── Submit button ── */
#login-page-wrap form.pms-form input[type="submit"],
#login-page-wrap form.pms-form button[type="submit"],
#login-page-wrap form.pms-form .pms-submit-button {
	font-family: var(--font-ui);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	width: 100%;
	padding: 0.75rem 1rem;
	background: #1e3a5f;
	color: #fff;
	border: none;
	cursor: pointer;
	transition: background 0.15s ease;
	margin-top: 0.5rem;
}

#login-page-wrap form.pms-form input[type="submit"]:hover,
#login-page-wrap form.pms-form button[type="submit"]:hover {
	background: #16304f;
}

/* ── Required asterisk ── */
#login-page-wrap form.pms-form .pms-field-required-asterix {
	color: #dc2626;
	margin-left: 2px;
}

/* ── Field description ── */
#login-page-wrap form.pms-form .pms-field-description {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	color: #94a3b8;
	margin-top: 0.25rem;
}

/* ── Subscription plan selector ── */
#login-page-wrap .pms-subscription-plans-group-wrapper {
	border: 1px solid #e2e8f0;
	margin-bottom: 1rem;
}

#login-page-wrap .pms-subscription-plan {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid #e2e8f0;
	cursor: pointer;
	transition: background 0.1s ease;
}

#login-page-wrap .pms-subscription-plan:last-child,
#login-page-wrap .pms-subscription-plan.pms-last {
	border-bottom: none;
}

#login-page-wrap .pms-subscription-plan:hover {
	background: #f8fafc;
}

#login-page-wrap .pms-subscription-plan input[type="radio"] {
	flex: 0 0 auto;
	margin: 0;
	accent-color: #1e3a5f;
}

#login-page-wrap .pms-subscription-plan label {
	font-family: var(--font-ui);
	font-size: 0.88rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	color: #1e293b;
	cursor: pointer;
	flex: 1;
	margin: 0;
}

#login-page-wrap .pms-subscription-plan-description {
	font-family: var(--font-ui);
	font-size: 0.78rem;
	color: #64748b;
	margin-top: 0.2rem;
	font-weight: 400;
}

/* ── Form-level error messages ── */
#login-page-wrap .pms-form-errors-wrapper,
#login-page-wrap .pms_field-errors-wrapper {
	font-family: var(--font-ui);
	font-size: 0.82rem;
	background: #fef2f2;
	border-left: 3px solid #dc2626;
	color: #b91c1c;
	padding: 0.6rem 0.75rem;
	margin-bottom: 1rem;
}

#login-page-wrap .pms-form-errors-wrapper p,
#login-page-wrap .pms_field-errors-wrapper p {
	margin: 0;
}

/* ── Success message ── */
#login-page-wrap .pms_success-messages-wrapper {
	font-family: var(--font-ui);
	font-size: 0.88rem;
	background: #f0fdf4;
	border-left: 3px solid #16a34a;
	color: #15803d;
	padding: 0.75rem 1rem;
	margin-bottom: 1rem;
}

#login-page-wrap .pms_success-messages-wrapper p {
	margin: 0;
}

/* ── GDPR / checkbox fields ── */
#login-page-wrap form.pms-form .pms-field-type-checkbox label,
#login-page-wrap form.pms-form .pms-gdpr-field label,
#login-page-wrap form.pms-form .pms-email-marketing-field label {
	font-size: 0.8rem;
	text-transform: none;
	letter-spacing: 0;
	color: #475569;
	font-weight: 400;
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
}

@media screen and (max-width: 480px) {
	.login-card--wide {
		padding: 2rem 1.25rem 1.5rem;
	}

	/* Splash: tighten headline font further on very small phones */
	.main-headline-box h1 {
		font-size: 1.1rem;
	}
	.splash-primary-title {
		font-size: 15px;
	}

	/* Stories grid: shorter thumb images to preserve reading space */
	.stories-grid-thumb img,
	.stories-grid-thumb .splash-no-thumb {
		height: 160px;
	}
}