/*
 Theme Name:   YBGR Twenty Twenty-Five
 Theme URI:    https://www.ybgr.org
 Description:  YBGR child theme based on Twenty Twenty-Five. Accessible, WCAG 2.1 AA compliant.
 Author:       Yellowstone Boys and Girls Ranch
 Template:     twentytwentyfive
 Version:      1.0.0
 Text Domain:  ybgr-twentytwentyfive
*/

/* =============================================================
   YBGR BRAND COLORS (CSS Custom Properties)
   ============================================================= */
:root {
	--ybgr-blue:       #274F66;
	--ybgr-gold:       #F4AA3F;
	--ybgr-green:      #4F6E32;
	--ybgr-blue-dark:  #1a3547;
	--ybgr-blue-light: #3a6b8a;
	--ybgr-gold-dark:  #c98a1f;
	--ybgr-green-dark: #3a5225;
	--ybgr-gray-light: #f1f1f1;
	--ybgr-gray-mid:   #c8c8c8;
	--ybgr-text:       #000000;
	--ybgr-white:      #ffffff;

	/* Map YBGR colors to Twenty Twenty-Five CSS variables */
	--wp--preset--color--primary:    var(--ybgr-blue);
	--wp--preset--color--secondary:  var(--ybgr-gold);
	--wp--preset--color--tertiary:   var(--ybgr-green);
	--wp--preset--color--foreground: var(--ybgr-text);
	--wp--preset--color--background: var(--ybgr-white);
}

/* =============================================================
   TYPOGRAPHY — Raleway (matches existing site)
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700&display=swap');

body,
p,
input,
textarea,
select,
button {
	font-family: 'Raleway', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Raleway', sans-serif;
	color: var(--ybgr-blue);
	line-height: 1.5;
}

h1, h2 {
	letter-spacing: .15em;
	text-transform: uppercase;
	line-height: 1.2;
}

h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1.0rem; }

/* =============================================================
   LINKS
   ============================================================= */
a {
	color: var(--ybgr-blue);
	font-weight: bold;
	transition: color 300ms ease-out;
}

a:hover,
a:focus {
	color: var(--ybgr-green);
	text-decoration: underline; /* WCAG: always underline on focus/hover */
}

/* WCAG: Visible focus indicator — never remove outline */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--ybgr-gold);
	outline-offset: 2px;
}

/* Phone links — inherit context color */
a[href^="tel"] {
	color: inherit;
	text-decoration: none;
}

/* =============================================================
   SITE HEADER
   ============================================================= */
.wp-block-template-part[data-slug="header"],
header.wp-block-template-part {
	background-image: url('/wp-content/themes/ybgr-twentytwentyfive/art/header-bg.jpg');
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;
}

.site-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1.5em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1em;
}

/* Logo */
.custom-logo-link img {
	max-width: 220px;
	height: auto;
}

/* Admissions CTA in header */
.header-admissions {
	text-align: right;
}

.header-admissions .admissions-label {
	display: block;
	font-size: .75em;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--ybgr-blue);
}

.header-admissions .admissions-phone {
	display: block;
	font-size: 1.6em;
	color: var(--ybgr-blue);
	font-weight: 400;
	letter-spacing: .05em;
	text-decoration: none;
}

/* =============================================================
   NAVIGATION
   ============================================================= */
.wp-block-navigation {
	background-color: var(--ybgr-blue);
	border-top: 1px solid var(--ybgr-white);
	border-bottom: 1px solid var(--ybgr-white);
}

.wp-block-navigation__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.wp-block-navigation-item__content {
	color: var(--ybgr-white) !important;
	padding: 1.2em 1em;
	font-size: .85em;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: .05em;
	transition: background-color 200ms ease-out;
}

.wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation-item:focus-within > .wp-block-navigation-item__content,
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--ybgr-gold);
	color: var(--ybgr-white) !important;
}

/* Dropdown submenus */
.wp-block-navigation__submenu-container {
	background-color: var(--ybgr-gray-mid);
	border: none;
	min-width: 200px;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--ybgr-blue) !important;
	border-bottom: 1px solid #a5a5a5;
	font-size: .85em;
	padding: .9em 1em;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	background-color: var(--ybgr-blue);
	color: var(--ybgr-white) !important;
}

/* Mobile nav toggle */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	color: var(--ybgr-white);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--ybgr-blue);
}

/* =============================================================
   SKIP LINK — WCAG required
   ============================================================= */
.skip-link {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 9999;
	padding: .75em 1.5em;
	background-color: var(--ybgr-gold);
	color: var(--ybgr-white);
	font-weight: bold;
	text-decoration: none;
	transition: top 200ms;
}

.skip-link:focus {
	top: 0;
}

/* =============================================================
   BUTTONS — WCAG contrast compliant
   ============================================================= */
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
a.custom-button {
	background-color: var(--ybgr-gold);
	color: var(--ybgr-white);
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	padding: .9em 2em;
	border: none;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 300ms ease-out;
	text-decoration: none;
	display: inline-block;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
a.custom-button:hover,
a.custom-button:focus {
	background-color: var(--ybgr-blue);
	color: var(--ybgr-white);
	text-decoration: none;
}

/* =============================================================
   FORMS — WCAG compliant labels and contrast
   ============================================================= */
label {
	display: block;
	font-weight: 700;
	margin-bottom: .3em;
}

input,
textarea,
select {
	font-family: 'Raleway', sans-serif;
	border: 2px solid #767676; /* WCAG: min 3:1 contrast for UI components */
	padding: .6em .8em;
	width: 100%;
	background: #fff;
	color: var(--ybgr-text);
	font-size: 1em;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--ybgr-blue);
	outline: 3px solid var(--ybgr-gold);
	outline-offset: 1px;
}

/* =============================================================
   HORIZONTAL RULE
   ============================================================= */
hr {
	border: none;
	border-top: 1px solid var(--ybgr-gold);
	width: 70%;
	margin: 3% auto;
}

/* =============================================================
   IMAGES
   ============================================================= */
img {
	max-width: 100%;
	height: auto;
}

/* WCAG: Images must have alt text — this visually flags missing alt */
img:not([alt]) {
	outline: 3px solid red;
}

.entry-thumbnail img {
	border-bottom: 4px solid var(--ybgr-green);
}

/* =============================================================
   HOME PAGE — Hero / Intro
   ============================================================= */
.home-intro-wrapper {
	background-color: rgba(39, 79, 102, .7);
	max-width: 1600px;
	margin: 0 auto;
	overflow: hidden;
}

.home-intro-left {
	float: left;
	width: 43%;
	padding: 1.5em;
}

.home-slider {
	float: left;
	width: 55%;
	background-color: var(--ybgr-white);
}

.home-intro-text h1,
.home-intro-text p {
	color: var(--ybgr-white);
}

.home-intro-text h1 {
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	font-size: clamp(1em, 2.5vw, 2em);
	line-height: 1.5;
}

/* CTA blocks */
.home-cta-bg {
	background-color: var(--ybgr-blue);
	padding: 1.5em;
	border-bottom: 1px solid var(--ybgr-white);
}

.home-cta {
	display: inline-block;
	margin: 0 5% 0 0;
	padding-left: 3em;
	position: relative;
	max-width: 26%;
	text-align: left;
}

.home-cta h2,
.home-cta p,
.home-cta i {
	color: var(--ybgr-white);
}

.home-cta h2 {
	font-size: 1.4em;
	margin: 0 0 12px 0;
}

/* =============================================================
   CONTENT AREA
   ============================================================= */
.content-wrapper {
	max-width: 1200px;
	padding: 0 1em;
	margin: 0 auto;
}

.wp-block-post-content,
.entry-content {
	max-width: 1200px;
	padding: 0 24px;
}

/* =============================================================
   DARK BACKGROUND SECTIONS
   ============================================================= */
.dark-background h1,
.dark-background h2,
.dark-background h3,
.dark-background h4,
.dark-background h5,
.dark-background h6,
.dark-background p,
.dark-background li,
.dark-background blockquote {
	color: var(--ybgr-white) !important;
}

.dark-background a {
	color: var(--ybgr-white);
	font-weight: bold;
}

.dark-background a:hover,
.dark-background a:visited {
	color: var(--ybgr-gold);
}

/* =============================================================
   FOOTER
   ============================================================= */

/* Insurance logos bar — force horizontal flex on frontend */
.wp-block-group.insurance-bg,
.wp-block-group.insurance-bg.is-layout-flex,
.wp-block-group.insurance-bg.wp-block-group-is-layout-flex {
	background-color: var(--ybgr-gray-mid) !important;
	padding: 1.5em 2em !important;
	border-bottom: 1px solid var(--ybgr-white);
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 3em !important;
	width: 100%;
}

.wp-block-group.insurance-bg .wp-block-image {
	margin: 0 !important;
	flex-shrink: 0;
}

.wp-block-group.insurance-bg .wp-block-image img {
	max-width: 160px !important;
	max-height: 50px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	display: block;
}

/* Footer main section */
.wp-block-group.site-info {
	background-image: url('/wp-content/themes/ybgr-twentytwentyfive/art/footer-bg.jpg') !important;
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	color: var(--ybgr-white) !important;
	width: 100% !important;
	padding: 3em 2em !important;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	gap: 2em !important;
}

/* Footer widget columns */
.wp-block-group.site-info > .wp-block-group.footer-widget {
	flex: 1 1 200px;
	min-width: 180px;
}

/* Footer text and links */
.wp-block-group.site-info p,
.wp-block-group.site-info a,
.wp-block-group.site-info .wp-block-navigation-item__content {
	color: var(--ybgr-white) !important;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.wp-block-group.site-info a:hover,
.wp-block-group.site-info .wp-block-navigation-item__content:hover {
	color: var(--ybgr-gold) !important;
	text-decoration: none;
}

/* Footer logo */
.wp-block-group.site-info .wp-block-site-logo {
	margin-bottom: 1em;
}

.wp-block-group.site-info .wp-block-site-logo img {
	max-width: 200px !important;
	height: auto;
}

/* Footer nav — vertical list, no blue bar */
.footer-navigation,
.wp-block-group.site-info .wp-block-navigation {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
}

.footer-navigation .wp-block-navigation__container,
.wp-block-group.site-info .wp-block-navigation .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	background: transparent !important;
	border: none !important;
	gap: 0.25em !important;
}

.footer-navigation .wp-block-navigation-item__content,
.wp-block-group.site-info .wp-block-navigation-item__content {
	color: var(--ybgr-white) !important;
	text-transform: uppercase;
	font-weight: 300 !important;
	font-size: 0.85em;
	padding: 0.2em 0 !important;
	background: transparent !important;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.footer-navigation .wp-block-navigation-item__content:hover,
.wp-block-group.site-info .wp-block-navigation-item__content:hover {
	color: var(--ybgr-gold) !important;
	background: transparent !important;
}

/* 211 logo */
.wp-block-group.site-info .wp-block-image img {
	max-width: 90px !important;
	height: auto;
}

/* Social links */
.footer-social-links {
	display: flex !important;
	flex-direction: row !important;
	gap: 1em;
	margin-top: 1em;
}

.footer-social-links a {
	color: var(--ybgr-white) !important;
	display: inline-flex;
	align-items: center;
	transition: color 200ms ease-out;
	text-decoration: none;
}

.footer-social-links a:hover {
	color: var(--ybgr-gold) !important;
}

/* Copyright bar — plain small centered text, no background */
.wp-block-group.footer-copyright {
	padding: 0.75em 2em;
	text-align: center;
}

.wp-block-group.footer-copyright p {
	font-size: 0.8em;
	margin: 0;
	color: #000;
}

.wp-block-group.footer-copyright a {
	color: #000;
	font-weight: normal;
}

.wp-block-group.footer-copyright a:hover {
	color: var(--ybgr-blue);
}

/* Mobile footer */
@media (max-width: 640px) {
	.wp-block-group.site-info {
		flex-direction: column !important;
	}

	.wp-block-group.insurance-bg {
		gap: 1.5em !important;
	}

	.wp-block-group.insurance-bg .wp-block-image img {
		max-width: 110px !important;
	}
}

/* =============================================================
   UTILITY CLASSES (preserved from original theme)
   ============================================================= */
.white-text  { color: var(--ybgr-white) !important; }
.black-text  { color: #000 !important; }
.text-centered { text-align: center; }
.text-left  { text-align: left; }
.text-right { text-align: right; }
.centered   { margin: 0 auto; }
.full-width-wrapper { width: 100%; padding: 1.5em 0; }
.reverse-title {
	background-color: var(--ybgr-blue);
	padding: .5em;
	color: var(--ybgr-white);
}
.styled-title {
	border-bottom: 2px solid var(--ybgr-gold);
}
.disclaimer {
	font-size: .7em;
	font-style: italic;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 840px) {
	.home-intro-left,
	.home-slider {
		float: none;
		width: 100%;
	}

	.home-cta {
		max-width: none;
		float: none;
		margin: 0 0 1em 0;
		padding-bottom: 1em;
		border-bottom: 1px solid #547a95;
	}
}

@media (max-width: 643px) {
	.home-cta:last-child {
		padding-bottom: 0;
		border-bottom: none;
	}

	.wp-block-navigation__container {
		padding: 0;
	}
}

@media (max-width: 500px) {
	a.insurance-link {
		max-width: 80px;
		margin: 6px;
	}
}

/* =============================================================
   WCAG SPECIFIC FIXES
   ============================================================= */

/* Ensure sufficient color contrast for muted text */
.home-post-meta,
.sidebar-post-meta {
	color: #595959; /* passes 7:1 on white */
}

/* Remove visited link color change that could confuse low-vision users */
a:visited {
	color: var(--ybgr-blue);
}

/* Ensure text is readable over background images */
.site-info {
	/* Additional text-shadow for readability over photo background */
	text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

/* WCAG: captions need adequate contrast */
.wp-caption-text,
figcaption {
	color: #595959;
	font-size: .875em;
}

/* WCAG: error states need more than just color */
.wpcf7-not-valid-tip,
.form-error {
	color: #ba0000;
	font-weight: bold;
}

.wpcf7-not-valid {
	border-color: #ba0000;
	border-width: 2px;
}

/* WCAG: table accessibility */
table {
	border-collapse: collapse;
	width: 100%;
}

th {
	background-color: var(--ybgr-blue);
	color: var(--ybgr-white);
	padding: .6em 1em;
	text-align: left;
}

td {
	padding: .5em 1em;
	border-bottom: 1px solid var(--ybgr-gray-mid);
}

/* WCAG: lists in content */
.entry-content ul,
.entry-content ol {
	padding-left: 1.5em;
	margin: 1em 0;
}

.entry-content li {
	margin-bottom: .5em;
	line-height: 1.6;
}