/*
Theme Name:  Stand for Life and Marriage Theme
Author:      Liberty University
Author URI:  https://example.com
Description: A bold, patriotic WordPress theme for Stand for Faith, Family & Constitution. Built with full Gutenberg block editor support.
Version:     1.0.0
Requires at least: 6.3
Tested up to: 6.6
Requires PHP: 8.0
License:     GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sflam
Tags:        custom-logo, custom-menu, featured-images, threaded-comments, block-patterns, wide-blocks
*/

/* ============================================================
   0. GOOGLE FONTS IMPORT
   ============================================================ */
/* cyrillic-ext */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700;800&family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* ============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
	--sflam-navy: #081738;
	--sflam-navy-dark: #111827;
	--sflam-red: #eb1c2c;
	--sflam-red-dark: #a8172a;
	--sflam-gold: #e8a020;
	--sflam-cream: #fffbeb;
	--sflam-white: #ffffff;
	--sflam-gray-light: #e5e0d8;
	--sflam-text-dark: #111111;

	--sflam-font-display: 'Oswald', 'Arial Black', sans-serif;
	--sflam-font-body: 'Open Sans', Arial, sans-serif;

	--sflam-content-width: 1100px;
	--sflam-wide-width: 1400px;

	--sflam-header-height: 72px;

	--sflam-radius: 4px;
	--sflam-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.color-navy,
.color-navy * {
	fill: var(--sflam-navy) !important;
	color: var(--sflam-navy) !important;
}

.color-navy-dark,
.color-navy-dark * {
	fill: var(--sflam-navy-dark) !important;
	color: var(--sflam-navy-dark) !important;
}

.color-red,
.color-red * {
	fill: var(--sflam-red) !important;
	color: var(--sflam-red) !important;
}

.color-red-dark,
.color-red-dark * {
	fill: var(--sflam-red-dark) !important;
	color: var(--sflam-red-dark) !important;
}

.color-gold,
.color-gold * {
	fill: var(--sflam-gold) !important;
	color: var(--sflam-gold) !important;
}

.color-cream,
.color-cream * {
	fill: var(--sflam-cream) !important;
	color: var(--sflam-cream) !important;
}

.color-white,
.color-white * {
	fill: var(--sflam-white) !important;
	color: var(--sflam-white) !important;
}

.color-gray-light,
.color-gray-light * {
	fill: var(--sflam-gray-light) !important;
	color: var(--sflam-gray-light) !important;
}

.bg-color-navy,
.bg-color-navy p {
	background: var(--sflam-navy) !important;
}

.bg-color-navy-dark,
.bg-color-navy-dark p {
	background: var(--sflam-navy-dark) !important;
}

.bg-color-red,
.bg-color-red p {
	background: var(--sflam-red) !important;
}

.bg-color-red-dark,
.bg-color-red-dark p {
	background: var(--sflam-red-dark) !important;
}

.bg-color-gold,
.bg-color-gold p {
	background: var(--sflam-gold) !important;
}

.bg-color-cream,
.bg-color-cream p {
	background: var(--sflam-cream) !important;
}

.bg-color-white,
.bg-color-white p {
	background: var(--sflam-white) !important;
}

.bg-color-gray-light,
.bg-color-gray-light p {
	background: var(--sflam-gray-light) !important;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--sflam-font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--sflam-text-dark);
	background-color: var(--sflam-cream);
	-webkit-font-smoothing: antialiased;
	position: relative;
}

body.admin-bar {
	margin-top: 32px;
}

img,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--sflam-red);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--sflam-red-dark);
	text-decoration: underline;
}

.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots) {
	height: 6px;
}

#sitewrap {
	width: 100%;
	overflow-x: hidden;
}

/* ============================================================
   3. LAYOUT HELPERS
   ============================================================ */
.sflam-container {
	max-width: var(--sflam-content-width);
	margin-inline: auto;
	padding-inline: 24px;
}

.sflam-container--wide {
	max-width: var(--sflam-wide-width);
}

/* ============================================================
   4. HEADER
   ============================================================ */
.sflam-header {
	position: absolute;
	width: 100%;
	top: 0;
	z-index: 1000;
}

.sflam-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--sflam-header-height);
	margin-inline: auto;
	width: 1100px;
	max-width: 100%;
	padding: 2rem 0;
}

/* Logo */
.sflam-header__logo a {
	display: flex;
	align-items: center;
	text-decoration: none;
}

.sflam-header__logo img {
	height: 56px;
	width: auto;
}

.sflam-header__logo .custom-logo-link {
	display: flex;
	align-items: center;
}

/* Site title fallback (no logo set) */
.sflam-header__logo .site-title {
	font-family: var(--sflam-font-display);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Nav */
.sflam-header__nav {
	display: flex;
	align-items: center;
	gap: 0;
	flex: 1;
	justify-content: flex-end;
}

.sflam-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0;
	flex-wrap: wrap;
}

.sflam-nav ul li a {
	display: block;
	padding: 6px 18px;
	font-family: var(--sflam-font-body);
	color: var(--sflam-navy-dark);
	font-size: 1rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s;
}

.sflam-nav ul li a:hover {
	text-decoration: underline;
}


/* Mobile hamburger */
.sflam-header__hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
}

.sflam-header__hamburger span {
	display: block;
	width: 26px;
	height: 2px;
	background-color: var(--sflam-text-dark);
	border-radius: 2px;
	transition: transform 0.25s, opacity 0.25s;
}

.sflam-header__hamburger.is-active span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.sflam-header__hamburger.is-active span:nth-child(2) {
	opacity: 0;
}

.sflam-header__hamburger.is-active span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Mobile nav panel */
.sflam-mobile-nav {
	display: none;
	background-color: var(--sflam-navy);
	padding: 16px 24px 24px;
}

.sflam-mobile-nav.is-open {
	display: block;
}

.sflam-mobile-nav ul {
	list-style: none;
	display: flex;
	flex-direction: column;
}

.sflam-mobile-nav ul li a {
	display: block;
	padding: 10px;
	font-family: var(--sflam-font-body);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sflam-white);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   5. MAIN CONTENT AREA
   ============================================================ */
.sflam-main {
	min-height: 60vh;
}

/* Allow full-width blocks to break out of content wrapper */
.entry-content,
.wp-block-group {
	width: 100%;
}

/* Block editor alignment support */
.alignfull {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	max-width: 100vw;
	width: 100vw;
}

.alignwide {
	max-width: var(--sflam-wide-width);
	margin-inline: auto;
}

/* ============================================================
   6. BUTTONS (front-end Gutenberg button overrides)
   ============================================================ */
.wp-block-button__link,
.sflam-btn {
	font-family: var(--sflam-font-body);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Primary red button */
.wp-block-button.is-style-sflam-primary .wp-block-button__link,
.wp-block-button.sflam-btn-primary .wp-block-button__link {
	background-color: var(--sflam-red);
	color: var(--sflam-white);
	border: 2px solid var(--sflam-red);
}

.wp-block-button.is-style-sflam-primary .wp-block-button__link:hover {
	background-color: var(--sflam-red-dark);
	border-color: var(--sflam-red-dark);
}

/* Outline button */
.wp-block-button.is-style-sflam-outline .wp-block-button__link,
.wp-block-button.sflam-btn-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--sflam-navy);
	border: 2px solid var(--sflam-navy);
}


/* Gold button */
.wp-block-button.is-style-sflam-gold .wp-block-button__link {
	background-color: var(--sflam-gold);
	color: var(--sflam-navy);
	border: 2px solid var(--sflam-gold);
}

/* Small outline (used inside cards) */
.wp-block-button.is-style-sflam-card-cta .wp-block-button__link {
	background-color: transparent;
	color: var(--sflam-red);
	border: 2px solid var(--sflam-red);
	font-size: 0.8rem;
	padding: 6px 18px;
}

.wp-block-button.is-style-sflam-card-cta .wp-block-button__link:hover {
	background-color: var(--sflam-red);
	color: var(--sflam-white);
}



/* ============================================================
   7. FOOTER
   ============================================================ */
.sflam-footer {
	padding: 1rem 1rem;
	background-color: var(--sflam-navy);
	color: var(--sflam-white);
}

.sflam-footer__pattern-area {
	padding: 0;
}

.sflam-footer__bar {
	background-color: var(--sflam-navy-dark);
	text-align: center;
	padding: 18px 24px;
}

.sflam-footer__bar p,
.sflam-footer__bar a {
	font-family: var(--sflam-font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--sflam-white);
	text-transform: uppercase;
	margin: 0;
}

.sflam-footer__nav {
	padding: 28px 24px;
	max-width: var(--sflam-content-width);
	margin-inline: auto;
}

.sflam-footer__nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 24px;
}

.sflam-footer__nav ul li a {
	font-family: var(--sflam-font-display);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	transition: color 0.2s;
}

.sflam-footer__nav ul li a:hover {
	color: var(--sflam-gold);
	text-decoration: none;
}

.sflam-footer__copy {
	text-align: center;
	padding: 12px 24px 20px;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.45);
}

/* ============================================================
   8. PATTERN-SPECIFIC STYLES
   ============================================================ */

/* --- Icon Bar --- */
.sflam-icon-bar {
	background-color: var(--sflam-navy);
	padding: 32px 24px;
}

.sflam-icon-bar .wp-block-columns {
	max-width: var(--sflam-content-width);
	margin-inline: auto;
	justify-content: center;
	align-items: center;
	gap: 0;
}

.sflam-icon-bar .wp-block-column {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 8px 24px;
}

.sflam-icon-bar .wp-block-image img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	filter: brightness(0) saturate(100%) invert(62%) sepia(80%) saturate(500%) hue-rotate(10deg) brightness(95%);
}

.sflam-icon-bar p {
	font-family: var(--sflam-font-display);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sflam-white);
	margin: 0;
}

/* ============================================================
   9. UTILITY CLASSES
   ============================================================ */
.sflam-uppercase {
	text-transform: uppercase !important;
}

.sflam-bold {
	font-weight: 700 !important;
}

.sflam-text-center {
	text-align: center !important;
}

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
	.sflam-nav {
		display: none;
	}

	.sflam-header__hamburger {
		display: flex;
	}
}

@media (max-width: 782px) {
	body.admin-bar {
		margin-top: 46px;
	}
}

@media (max-width: 600px) {
	.sflam-header__inner {
		padding-inline: 16px;
	}

	.sflam-hero-headline {
		font-size: 2rem;
	}

	#wpadminbar {
		position: fixed;
	}
}


/* ============================================================
   12. WORDPRESS CORE BLOCK OVERRIDES
   ============================================================ */
.wp-block-cover__inner-container {
	padding-inline: 24px;
}

/* Ensure cover blocks can go full-width */
.entry-content .wp-block-cover.alignfull,
.entry-content .wp-block-group.alignfull {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	max-width: 100vw;
	width: 100vw;
}


/* Columns spacing */
.wp-block-columns.alignfull {
	padding-inline: 24px;
}