/*
Theme Name:   PWBI 2026
Theme URI:    https://pwbi.org/
Description:  Theme for Professionals Without Borders, Inc. Accessible dropdown navigation, responsive layout, no page builder. Page bodies are ordinary WordPress content using the classes defined here, so staff can edit text without touching the theme.
Author:       Professionals Without Borders, Inc.
Version:      1.4.6
Requires at least: 6.4
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  pwbi
*/

:root {
	--navy: #0e2a47;
	--navy-2: #173b61;
	--green: #1b6e4a;
	--green-soft: #e8f3ed;
	--gold: #d9a21b;
	--gold-ink: #6b4c00;
	--ink: #1c2530;
	--muted: #56616e;
	--line: #dfe5ec;
	--bg: #ffffff;
	--bg-soft: #f4f6f9;
	--live: #c62828;
	--radius: 10px;
	--shadow: 0 6px 24px rgba(14, 42, 71, .08);
	--wrap: 1160px;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-head: "Source Serif 4", Georgia, "Times New Roman", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink);
	background: var(--bg);
	overflow-x: hidden;
}
img, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--navy-2); text-underline-offset: 3px; }
a:hover { color: var(--green); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--navy); line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
	clip: auto; width: auto; height: auto; margin: 0; padding: 12px 18px; z-index: 100000;
	background: #fff; color: var(--navy); top: 8px; left: 8px; box-shadow: var(--shadow);
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section--tight { padding: 44px 0; }
.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--navy); color: #e8eef5; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy a:not(.btn) { color: #fff; }
.section--green { background: var(--green-soft); }
.eyebrow {
	display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--green); margin-bottom: .7em;
}
.section--navy .eyebrow { color: var(--gold); }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 46em; }
.section--navy .lead { color: #cfd9e4; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.grid { display: grid; gap: 28px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.split--reverse > :first-child { order: 2; }
.split img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-height: 560px; object-fit: cover; }
.stack > * + * { margin-top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	padding: .8em 1.5em; border-radius: 6px; font-weight: 700; font-size: 1rem;
	text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.2;
	font-family: var(--font-body);
}
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); color: #fff; }
.btn-donate { background: var(--gold); color: #1d1600; }
.btn-donate:hover { background: #e8b53a; color: #1d1600; }
.btn-outline { border-color: currentColor; color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.section--navy .btn-outline, .hero .btn-outline { color: #fff; }
.section--navy .btn-outline:hover, .hero .btn-outline:hover { background: #fff; color: var(--navy); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.4em; }
.center .btn-row { justify-content: center; }

/* ---------- Header & navigation ---------- */
.site-header {
	position: sticky; top: 0; z-index: 1000; background: #fff;
	border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(14, 42, 71, .05);
}
.admin-bar .site-header { top: 32px; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); }
.brand img { width: 60px; height: 60px; flex: none; }
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.22rem; line-height: 1.15; }
.brand-name small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .72rem; color: var(--muted); letter-spacing: .04em; }
.nav-toggle {
	display: none; background: none; border: 2px solid var(--line); border-radius: 6px;
	padding: 8px 12px; font: inherit; font-weight: 700; color: var(--navy); cursor: pointer;
}
.primary-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.primary-nav li { position: relative; }
.primary-nav a, .primary-nav .submenu-toggle {
	display: flex; align-items: center; gap: 4px; padding: 10px 12px; color: var(--ink);
	text-decoration: none; font-weight: 600; font-size: .95rem; border-radius: 6px;
	background: none; border: 0; cursor: pointer; font-family: var(--font-body);
}
.primary-nav a:hover, .primary-nav .submenu-toggle:hover,
.primary-nav .current-menu-item > a, .primary-nav .current-menu-ancestor > .submenu-toggle { color: var(--green); background: var(--green-soft); }
.submenu-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; }
.primary-nav .sub-menu {
	list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0; min-width: 230px;
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
	display: none;
}
.primary-nav li.is-open > .sub-menu { display: block; }
@media (hover: hover) and (min-width: 1181px) {
	.primary-nav li:hover > .sub-menu { display: block; }
}
.primary-nav .sub-menu a { font-weight: 500; }
.primary-nav .menu-donate > a { background: var(--gold); color: #1d1600; margin-left: 6px; padding: 10px 18px; }
.primary-nav .menu-donate > a:hover { background: #e8b53a; color: #1d1600; }

@media (max-width: 1180px) {
	.nav-toggle { display: inline-flex; }
	.primary-nav {
		display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff;
		border-bottom: 1px solid var(--line); box-shadow: var(--shadow); max-height: calc(100vh - 76px); overflow-y: auto;
	}
	.primary-nav.is-open { display: block; }
	.primary-nav > ul { flex-direction: column; align-items: stretch; padding: 10px 16px 18px; }
	.primary-nav a, .primary-nav .submenu-toggle { width: 100%; justify-content: space-between; padding: 13px 10px; font-size: 1rem; }
	.primary-nav .sub-menu { position: static; box-shadow: none; border: 0; border-left: 3px solid var(--green-soft); border-radius: 0; margin-left: 10px; padding: 0 0 0 6px; }
	.primary-nav .menu-donate > a { margin: 8px 0 0; justify-content: center; }
}
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

/* ---------- Hero ---------- */
.hero {
	position: relative; color: #fff; min-height: 560px; display: flex; align-items: flex-end;
	background: var(--navy) center / cover no-repeat;
}
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(15deg, rgba(8, 24, 42, .9) 0%, rgba(8, 24, 42, .55) 55%, rgba(8, 24, 42, .2) 100%); }
.hero .container { position: relative; padding-top: 110px; padding-bottom: 80px; }
.hero h1 { color: #fff; max-width: 17em; }
.hero p { font-size: 1.2rem; max-width: 36em; color: #e6edf4; }
.hero .eyebrow { color: var(--gold); }
.hero-credit { position: absolute; right: 12px; bottom: 8px; font-size: .72rem; color: rgba(255, 255, 255, .7); z-index: 1; }
.page-hero { position: relative; background: var(--navy) center / cover no-repeat; color: #fff; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 24, 42, .92), rgba(8, 24, 42, .55)); }
.page-hero .container { position: relative; padding-top: 70px; padding-bottom: 56px; }
.page-hero h1 { color: #fff; margin-bottom: .3em; }
.page-hero p { color: #dfe8f1; max-width: 42em; font-size: 1.15rem; margin: 0; }
.page-hero--plain { background: var(--navy); }

/* ---------- Cards ---------- */
.card {
	background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
	display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(0, 0, 0, .03);
}
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: .4em; }
.card-body p { color: var(--muted); font-size: .98rem; }
.card-body .more { margin-top: auto; font-weight: 700; text-decoration: none; }
.card-body .more::after { content: " →"; }
.card-body .more + .more { margin-top: 6px; }
.card--feature { border-top: 4px solid var(--green); }
.icon-card { padding: 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.icon-card h3 { font-size: 1.15rem; }
.icon-card p { color: var(--muted); margin: 0; font-size: .98rem; }
.icon-card .icon { font-size: 1.7rem; line-height: 1; margin-bottom: 12px; display: block; }

/* ---------- Callouts ---------- */
.notice {
	border-left: 4px solid var(--green); background: var(--green-soft); padding: 18px 22px;
	border-radius: 0 var(--radius) var(--radius) 0; margin: 1.5em 0;
}
.notice p:last-child { margin: 0; }
.notice--gold { border-left-color: var(--gold); background: #fdf6e3; }
.notice--navy { border-left-color: var(--navy); background: #eef3f8; }
.pending {
	border: 2px dashed #b8860b; background: #fffaf0; color: #5c4400; padding: 16px 20px;
	border-radius: var(--radius); margin: 1.2em 0; font-size: .95rem;
}
.pending strong { display: block; margin-bottom: 4px; }

/* ---------- Galleries ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 1.5em 0; }
.gallery-grid figure { margin: 0; }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.gallery-grid figcaption { font-size: .85rem; color: var(--muted); margin-top: 6px; }
.gallery-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Content helpers ---------- */
.entry-content > .container:first-child { margin-top: 0; }
.checklist { list-style: none; padding: 0; }
.checklist li { padding-left: 1.8em; position: relative; margin-bottom: .6em; }
.checklist li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; }
.fact { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.fact strong { display: block; font-family: var(--font-head); font-size: 1.5rem; color: var(--navy); }
.fact span { color: var(--muted); font-size: .92rem; }
.program-block { padding: 34px 0; border-top: 1px solid var(--line); }
.program-block:first-of-type { border-top: 0; }
.anchor-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.anchor-nav a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: .9rem; font-weight: 600; background: #fff; }
.anchor-nav a:hover { border-color: var(--green); }
[id] { scroll-margin-top: 100px; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
th { background: var(--bg-soft); }

/* ---------- Posts ---------- */
.post-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.post-meta { color: var(--muted); font-size: .9rem; margin-bottom: .6em; }
.article { max-width: 780px; margin: 0 auto; }
.article img { border-radius: 8px; margin: 1.2em 0; }
.article .wp-block-image, .article figure { margin: 1.2em 0; }
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
.pagination .current { background: var(--navy); color: #fff; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.form-grid .full { grid-column: 1 / -1; }
.field label, .field legend { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: .85rem; margin-top: 4px; }
input[type=text], input[type=email], input[type=tel], input[type=search], input[type=url], input[type=datetime-local], select, textarea {
	width: 100%; padding: 11px 13px; border: 1px solid #b9c3cf; border-radius: 6px; font: inherit; background: #fff; color: var(--ink);
}
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--navy-2); outline: 3px solid rgba(217, 162, 27, .45); outline-offset: 0; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-message { padding: 14px 18px; border-radius: 8px; margin-bottom: 18px; }
.form-message--ok { background: var(--green-soft); border: 1px solid #9fcfb5; }
.form-message--error { background: #fdecea; border: 1px solid #f5c2bd; }
.required { color: var(--live); }

/* ---------- Footer ---------- */
.site-footer { background: #0a1f35; color: #c3cfdc; padding: 60px 0 26px; font-size: .95rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.site-footer h2 { color: #fff; font-family: var(--font-body); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.footer-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.footer-brand img { width: 56px; height: 56px; background: #fff; border-radius: 50%; }
.footer-brand strong { color: #fff; font-family: var(--font-head); font-size: 1.1rem; line-height: 1.2; }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 40px; padding-top: 20px; font-size: .85rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.nonsectarian { font-size: .88rem; color: #9fb0c2; max-width: 34em; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.grid-4, .gallery-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
	.grid-3, .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.split { grid-template-columns: 1fr; gap: 32px; }
	.split--reverse > :first-child { order: 0; }
	.section { padding: 56px 0; }
}
@media (max-width: 640px) {
	body { font-size: 1rem; }
	.grid-2, .grid-3, .grid-4, .post-list, .form-grid { grid-template-columns: 1fr; }
	.gallery-grid, .gallery-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-grid { grid-template-columns: 1fr; }
	.hero { min-height: 480px; }
	.hero .container { padding-top: 80px; padding-bottom: 48px; }
	.brand-name small { display: none; }
	.brand img { width: 44px; height: 44px; }
	.btn { width: 100%; }
	.btn-row { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- English / Español ---------- */
/* English unless <html> carries "pwbi-es" (set in <head>, see inc/lang.php). */
/* Only the language not chosen is hidden, so everything shown keeps the theme's own layout. */
html:not(.pwbi-es) .lang-es { display: none !important; }
html.pwbi-es .lang-en { display: none !important; }
.lang-switch { display: flex; align-items: center; border: 2px solid var(--line); border-radius: 6px; overflow: hidden; flex: none; order: 3; }
.lang-switch a { display: block; padding: 6px 10px; font-weight: 700; font-size: .85rem; color: var(--navy); text-decoration: none; line-height: 1.2; }
.lang-switch a + a { border-left: 2px solid var(--line); }
.lang-switch a[aria-pressed="true"] { background: var(--navy); color: #fff; }
.lang-switch a:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.lang-switch .lang-short { display: none; }
.primary-nav { order: 2; }
.brand { order: 1; }
.nav-toggle { order: 4; }
.lang-note { max-width: var(--wrap); margin: 16px auto; padding: 10px 16px; border-left: 4px solid var(--gold); background: #fdf6e3; font-size: .95rem; }
@media (max-width: 1499px) {
	.lang-switch .lang-long { display: none; }
	.lang-switch .lang-short { display: inline; }
}
@media (max-width: 1180px) {
	.header-inner { gap: 10px; }
	.brand { margin-right: auto; }
}
/* Request a consultation: a clear button inside the Health card. */
.card-body .btn-consult { align-self: flex-start; margin-top: 14px; }
/* Menu labels stay on one line; Spanish labels are longer, so a little less padding on desktop. */
.primary-nav a, .primary-nav .submenu-toggle { white-space: nowrap; }
@media (min-width: 1181px) {
	html.pwbi-es .primary-nav > ul > li > a, html.pwbi-es .primary-nav > ul > li > .submenu-toggle { padding-left: 9px; padding-right: 9px; }
}
@media (min-width: 1181px) and (max-width: 1300px) {
	.brand-name small { display: none; }
	.primary-nav > ul > li > a, .primary-nav > ul > li > .submenu-toggle { padding-left: 8px; padding-right: 8px; font-size: .9rem; }
}
/* "Request a Consultation or Coaching" stands out in the Programs menu. */
.primary-nav .menu-consult > a { color: var(--green); font-weight: 700; }
.primary-nav .menu-consult > a::before { content: "→"; margin-right: 2px; }

/* ---- Homepage refinements (2026-10) --------------------------------------------------------------
 * Hero with the group photo of the children: framed on the faces (less empty wall), the dark overlay
 * kept behind the text on the left and lightened over the children on the right. On a phone the
 * whole group is shown across the top, with the headline and buttons below on a dark band.
 */
.hero--group { background-position: 50% 46%; }
.hero--group::before { background: linear-gradient(90deg, rgba(8, 24, 42, .9) 0%, rgba(8, 24, 42, .72) 38%, rgba(8, 24, 42, .32) 64%, rgba(8, 24, 42, .12) 100%); }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); }
.news-archive-note { color: var(--muted); font-size: .95rem; margin: -6px 0 18px; }
@media (max-width: 640px) {
	.hero--group { min-height: 0; background-color: var(--navy); background-size: 100% auto; background-position: 50% -14vw; } /* the photo top is empty wall */
	.hero--group::before { background: linear-gradient(180deg, rgba(8, 24, 42, 0) 0, rgba(8, 24, 42, 0) 34vw, rgba(8, 24, 42, .9) 48vw, var(--navy) 56vw, var(--navy) 100%); }
	.hero--group .container { padding-top: 46vw; padding-bottom: 36px; }
	.hero--group p { font-size: 1.04rem; }
	.hero--group .eyebrow { font-size: .72rem; }
	.brand img { width: 48px; height: 48px; }
	.brand-name { font-size: 1rem; }
}
.pwbi-yt-latest .card { max-width: 520px; margin-left: auto; }
.pwbi-yt-latest .card img { aspect-ratio: 16 / 9; }
@media (max-width: 860px) { .pwbi-yt-latest .card { margin: 0 auto; } }