/*
Theme Name: txsuv
Theme URI: https://wordpress.txsuv.org
Author: Department of Texas and Louisiana, SUVCW
Author URI: https://txsuv.org
Description: A heritage-focused block theme for the Sons of Union Veterans of the Civil War, Department of Texas and Louisiana. Carries forward the patriotic red, white, and blue visual identity of the original site with a modern WordPress block-editing experience.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: txsuv
Tags: full-site-editing, block-theme, custom-colors, custom-menu, featured-images, two-columns
*/

/* ==========================================================================
   1. GLOBAL RESETS & BASE
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	font-family: Lora, Georgia, serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #333333;
	/* Paper texture background is injected via wp_add_inline_style in functions.php */
	background-color: #d8cfc0; /* fallback colour close to the paper texture */
	background-repeat: repeat;
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: Lora, Georgia, serif;
	color: #050665;
	font-weight: bold;
	line-height: 1.3;
	margin-top: 0;
}

h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1em; }
h6 { font-size: 0.9em; }

p {
	margin-top: 0;
	margin-bottom: 1em;
}

/* ==========================================================================
   3. LINKS
   ========================================================================== */

a,
a:visited {
	color: #000080;
	text-decoration: underline;
}

a:hover,
a:active {
	color: #c00000;
	text-decoration: underline;
}

/* ==========================================================================
   4. STRIPE BARS
   ========================================================================== */

/*
 * Top stripe bar (at top of header and bottom of footer):
 *   8px dark navy / 3px white / 5px red  = 16px total
 */
.txsuv-stripe-top {
	display: block;
	width: 100%;
	height: 16px;
	background: linear-gradient(
		to bottom,
		#2e3092 0px,
		#2e3092 8px,
		#ffffff 8px,
		#ffffff 11px,
		#ff0000 11px,
		#ff0000 16px
	);
	padding: 0 !important;
	margin: 0 !important;
}

/*
 * Bottom stripe bar (below header flags):
 *   5px red / 3px white  = 8px total
 */
.txsuv-stripe-bottom {
	display: block;
	width: 100%;
	height: 8px;
	background: linear-gradient(
		to bottom,
		#ff0000 0px,
		#ff0000 5px,
		#ffffff 5px,
		#ffffff 8px
	);
	padding: 0 !important;
	margin: 0 !important;
}

/* ==========================================================================
   5. HEADER FLAGS ROW
   ========================================================================== */

.txsuv-header-flags {
	background-color: #ffffff;
}

.txsuv-header-flags .wp-block-columns {
	align-items: center;
	gap: 0;
	margin: 0;
}

/* Center column stretches to fill available space */
.txsuv-header-flags .wp-block-columns .wp-block-column:nth-child(2) {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1 1 auto;
}

/* Flag columns stay at intrinsic width and center their image vertically */
.txsuv-header-flags .wp-block-columns .wp-block-column:first-child,
.txsuv-header-flags .wp-block-columns .wp-block-column:last-child {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.txsuv-header-flags img {
	display: block;
}

/* On narrow viewports, hide flags and let banner center */
@media (max-width: 700px) {
	.txsuv-header-flags .wp-block-columns .wp-block-column:first-child,
	.txsuv-header-flags .wp-block-columns .wp-block-column:last-child {
		display: none;
	}
}

/* ==========================================================================
   6. NAVIGATION BAR
   ========================================================================== */

.txsuv-nav-bar {
	background-color: #00007f;
	width: 100%;
}

.txsuv-nav-bar .wp-block-navigation {
	width: 100%;
	justify-content: center;
	background-color: #00007f;
}

/* Top-level nav links */
.txsuv-nav-bar .wp-block-navigation a,
.txsuv-nav-bar .wp-block-navigation .wp-block-navigation-item__content {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
	color: #ffffff !important;
	text-transform: uppercase;
	padding: 10px 14px;
	text-decoration: none;
	letter-spacing: 0.03em;
	transition: background-color 0.15s ease;
}

.txsuv-nav-bar .wp-block-navigation a:hover,
.txsuv-nav-bar .wp-block-navigation .wp-block-navigation-item.current-menu-item > a {
	background-color: #ff0000;
	color: #ffffff !important;
}

/* Dropdown submenu containers */
.txsuv-nav-bar .wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: #1a1a8c;
	border: 1px solid #3a3aaa;
	border-radius: 0 0 4px 4px;
	min-width: 180px;
	z-index: 999;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.txsuv-nav-bar .wp-block-navigation .wp-block-navigation__submenu-container a,
.txsuv-nav-bar .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 12px;
	color: #ffffff !important;
	padding: 8px 14px;
	border-top: 1px solid #2e2e9a;
	text-transform: none;
	display: block;
}

.txsuv-nav-bar .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
	background-color: #ff0000;
	color: #ffffff !important;
}

/* Mobile hamburger overlay */
.txsuv-nav-bar .wp-block-navigation__responsive-container.is-menu-open {
	background-color: #00007f;
}

/* Inner content panel — WP core sets this to white; override to navy */
.txsuv-nav-bar .wp-block-navigation__responsive-container-content {
	background-color: #00007f;
}

/* All links/items inside the open mobile menu */
.txsuv-nav-bar .wp-block-navigation__responsive-container.is-menu-open a,
.txsuv-nav-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #ffffff !important;
	background-color: transparent;
}

/* Mobile submenus — remove the dropdown border/radius, show inline */
.txsuv-nav-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	background-color: #1a1a8c;
	border: none;
	border-radius: 0;
	position: static;
	padding-left: 16px;
}

.txsuv-nav-bar .wp-block-navigation__responsive-container-open,
.txsuv-nav-bar .wp-block-navigation__responsive-container-close {
	color: #ffffff;
}

/* ==========================================================================
   7. PAGE CONTENT WRAPPER (80% max-width, centered)
   ========================================================================== */

.txsuv-page-wrap {
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;
	padding: 10px 10px 20px;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
}

@media (max-width: 900px) {
	.txsuv-page-wrap {
		max-width: 95%;
	}
}

@media (max-width: 600px) {
	.txsuv-page-wrap {
		max-width: 100%;
		padding: 8px;
	}
}

/* ==========================================================================
   8. TWO-COLUMN SIDEBAR LAYOUT
   ========================================================================== */

.txsuv-columns.wp-block-columns {
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 0;
	margin-bottom: 0;
}

/* Sidebar column: fixed 250px */
.txsuv-columns.wp-block-columns > .wp-block-column:first-child {
	flex: 0 0 250px;
	max-width: 250px;
	min-width: 0;
}

/* Main content column: fill remaining space */
.txsuv-columns.wp-block-columns > .wp-block-column:last-child {
	flex: 1 1 auto;
	min-width: 0;
	padding-left: 20px;
}

/* Stack on mobile */
@media (max-width: 768px) {
	.txsuv-columns.wp-block-columns {
		flex-wrap: wrap;
	}

	.txsuv-columns.wp-block-columns > .wp-block-column:first-child,
	.txsuv-columns.wp-block-columns > .wp-block-column:last-child {
		flex: 1 1 100%;
		max-width: 100%;
		padding-left: 0;
	}

	/* On mobile, sidebar appears below content */
	.txsuv-columns.wp-block-columns > .wp-block-column:first-child {
		order: 2;
	}

	.txsuv-columns.wp-block-columns > .wp-block-column:last-child {
		order: 1;
	}
}

/* ==========================================================================
   9. SIDEBAR CONTENTS
   ========================================================================== */

.txsuv-sidebar {
	background-color: #ffffff;
	padding: 10px 5px;
	text-align: center;
	border-right: 1px solid #e0d8cc;
}

.txsuv-sidebar .wp-block-image {
	margin-left: auto;
	margin-right: auto;
}

/* Image slideshow – CSS crossfade, no JavaScript */
.txsuv-slideshow {
	position: relative;
	width: 220px;
	height: 165px;
	overflow: hidden;
	margin: 0 auto 10px;
	border: 1px solid #ccc;
}

.txsuv-slideshow .wp-block-image {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}

.txsuv-slideshow .wp-block-image img {
	width: 220px;
	height: 165px;
	object-fit: contain;
	opacity: 0;
}

/* Three-image crossfade: 3s visible per image, 9s total cycle */
.txsuv-slide--1 img { animation: txsuv-fade 9s 0s infinite; }
.txsuv-slide--2 img { animation: txsuv-fade 9s 3s infinite; }
.txsuv-slide--3 img { animation: txsuv-fade 9s 6s infinite; }

@keyframes txsuv-fade {
	0%   { opacity: 0; }
	5%   { opacity: 1; }
	33%  { opacity: 1; }
	38%  { opacity: 0; }
	100% { opacity: 0; }
}

/* Social icons row */
.txsuv-social-row.wp-block-group {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin: 8px 0;
}

.txsuv-social-row .wp-block-image img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	transition: opacity 0.2s;
}

.txsuv-social-row .wp-block-image img:hover {
	opacity: 0.8;
}

/* Clara Barton promo box */
.txsuv-barton-box {
	border: 2px solid #5a3e28;
	padding: 8px;
	background-color: #fffef8;
	width: 230px;
	margin: 8px auto;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	text-align: left;
}

.txsuv-barton-box .wp-block-image {
	flex-shrink: 0;
	margin: 0;
}

.txsuv-barton-box .wp-block-paragraph {
	font-size: 0.85em;
	margin: 0;
}

/* Newsletter section */
.txsuv-newsletter .wp-block-image {
	margin: 0 auto 4px;
}

.txsuv-newsletter .wp-block-paragraph {
	font-size: 0.85em;
	font-style: italic;
}

/* Tax-exempt disclaimer */
.txsuv-disclaimer {
	font-size: 0.75em;
	font-style: italic;
	color: #555;
	border-top: 1px solid #ddd;
	padding-top: 8px;
	margin-top: 8px;
	line-height: 1.4;
}

/* ==========================================================================
   10. MAIN CONTENT AREA
   ========================================================================== */

.txsuv-main-content {
	padding: 10px 5px 10px 10px;
}

.txsuv-main-content p {
	text-align: justify;
}

.txsuv-main-content .wp-block-post-title,
.txsuv-main-content h1.entry-title {
	border-bottom: 2px solid #2e3092;
	padding-bottom: 6px;
	margin-bottom: 16px;
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.txsuv-footer-content {
	background-color: #ffffff;
	padding: 12px 20px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #333;
}

.txsuv-footer-content a {
	color: #000080;
}

.txsuv-footer-content a:hover {
	color: #c00000;
}

/* ==========================================================================
   12. FULL-WIDTH (BLOG) TEMPLATES
   ========================================================================== */

.txsuv-full-width-wrap {
	max-width: 80%;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;
	padding: 20px 24px;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
}

@media (max-width: 900px) {
	.txsuv-full-width-wrap {
		max-width: 95%;
	}
}

@media (max-width: 600px) {
	.txsuv-full-width-wrap {
		max-width: 100%;
		padding: 12px;
	}
}

/* Post/page entry styling */
.entry-header {
	margin-bottom: 16px;
	border-bottom: 2px solid #2e3092;
	padding-bottom: 8px;
}

.entry-meta {
	font-size: 0.85em;
	color: #555;
	font-family: Arial, Helvetica, sans-serif;
}

/* ==========================================================================
   13. BLOCK EDITOR OVERRIDES (Gutenberg cleanup)
   ========================================================================== */

/*
 * The Events Calendar widget renders its block preview in a standalone iframe
 * that loads the frontend CSS but has no .txsuv-page-wrap white wrapper.
 * TEC injects a #page.site / #content.site-content wrapper that is absent in
 * the FSE block template, so these selectors only affect the preview iframe.
 * min-height: 100% ensures the white fill covers the full iframe height even
 * when the widget content is shorter than the iframe frame.
 */
.tribe-compatibility-container,
#page.site {
	background-color: #ffffff;
	min-height: 100vh;
}


/* Remove default top margin from first block inside content */
.wp-block-post-content > *:first-child {
	margin-top: 0;
}

/* Ensure images don't overflow their containers */
.wp-block-image img {
	max-width: 100%;
	height: auto;
}

/* WordPress caption style */
.wp-block-image figcaption {
	font-size: 0.8em;
	font-style: italic;
	color: #555;
	text-align: center;
}

/* Table styling */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table th,
.wp-block-table td {
	border: 1px solid #ccc;
	padding: 6px 10px;
	text-align: left;
}

.wp-block-table th {
	background-color: #2e3092;
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.9em;
}

.wp-block-table tr:nth-child(even) td {
	background-color: #f4f2ee;
}

/* ==========================================================================
   14. LATEST POSTS (front page query block)
   ========================================================================== */

.txsuv-latest-posts-heading {
	font-family: Lora, Georgia, serif;
	font-size: 1.3rem;
	font-weight: 700;
	color: #050665;
	border-bottom: 2px solid #2e3092;
	padding-bottom: 6px;
	margin-top: 24px;
	margin-bottom: 16px;
}

.txsuv-post-card {
	border-bottom: 1px solid #ddd;
	padding-bottom: 14px;
	margin-bottom: 14px;
}

.txsuv-post-card:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.txsuv-post-card .wp-block-post-title {
	font-family: Lora, Georgia, serif;
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: 3px;
	margin-top: 0;
}

.txsuv-post-card .wp-block-post-title a {
	color: #000080;
	text-decoration: none;
}

.txsuv-post-card .wp-block-post-title a:hover {
	color: #c00000;
	text-decoration: underline;
}

.txsuv-post-card .wp-block-post-date {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.78rem;
	color: #777;
	margin-bottom: 6px;
	display: block;
}

.txsuv-post-card .wp-block-post-excerpt {
	font-size: 0.9rem;
	line-height: 1.55;
	color: #444;
}

.txsuv-post-card .wp-block-post-excerpt__more-link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8rem;
	font-weight: bold;
	color: #2e3092;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.txsuv-post-card .wp-block-post-excerpt__more-link:hover {
	color: #c00000;
}