/* =========================================================================
   FISD EDUCATION FOUNDATION — master section + component styles.
   Loaded last, so it owns the look. Clean education brand: maroon / white /
   gold, Inter + Playfair, generous spacing. (Not a tilted-chair build.)
   ========================================================================= */

:root { --fisd-maxw: 1180px; }

/* ---- base rhythm ---- */
body { color: var(--color-ink); background: var(--color-white); }
a { color: var(--color-maroon); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

.grid-container { max-width: var(--fisd-maxw); margin-inline: auto; padding-inline: 1.5rem; width: 100%; }
section { padding-block: 4rem; }
.padding-global-2x { padding-block: 3rem; }
.padding-global-3x { padding-block: 4rem; }
.padding-global-4x { padding-block: 5rem; }
.text-align-center { text-align: center; }

/* ---- buttons ---- */
.button, a.button {
	display: inline-flex; align-items: center; justify-content: center;
	font-family: "Inter", sans-serif; font-weight: 600; font-size: .95rem;
	letter-spacing: .01em; line-height: 1; text-decoration: none;
	padding: .85rem 1.6rem; border-radius: 6px; border: 2px solid var(--color-maroon);
	background: var(--color-maroon); color: #fff; cursor: pointer;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.button:hover, a.button:hover { background: var(--color-maroon-deep); border-color: var(--color-maroon-deep); color: #fff; text-decoration: none; transform: translateY(-1px); }
.button.secondary, a.button.secondary { background: transparent; color: var(--color-maroon); }
.button.secondary:hover, a.button.secondary:hover { background: var(--color-maroon); color: #fff; }
.button.gold, a.button.gold { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-maroon); }
.button.gold:hover { background: #b08c3e; border-color: #b08c3e; color: #fff; }
.button[disabled] { opacity: .6; cursor: not-allowed; }
.button-container { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* ---- hero ---- */
.hero-image {
	min-height: 62vh; background-size: cover; background-position: center;
	background-repeat: no-repeat; position: relative;
}
.hero-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(101,29,50,0) 40%, rgba(79,2,31,.45) 100%); }

/* ---- intro / intro-home ---- */
.intro, .intro-home { padding-block: 4.5rem; }
.intro .grid-container, .intro-home .grid-container { max-width: var(--fisd-maxw); }
.eyebrow, .tagline { display: inline-block; }

/* ---- image + text ---- */
.image-text__row { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.image-text--reverse { direction: rtl; }
.image-text--reverse > * { direction: ltr; }
.image-text__media-col img { width: 100%; border-radius: 10px; box-shadow: var(--shadow-md); }
.image-text__text-col { max-width: 38rem; }

/* ---- columns (cards) ---- */
.columns__intro { margin-bottom: 2.5rem; }
.columns .grid-parent { display: flex; flex-wrap: wrap; gap: 2rem; }
.columns__card { flex: 1 1 280px; background: #fff; border: 1px solid #ece8e9; border-top: 4px solid var(--color-maroon); border-radius: 10px; padding: 1.75rem; box-shadow: var(--shadow-sm); }
.columns__card-media img { border-radius: 8px; margin-bottom: 1rem; }
.columns__card-body h3, .columns__card-body h4 { margin-top: 0; }

/* ---- board ---- */
.board__intro { margin-bottom: 2.5rem; }
.board-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.board-card__photo {
	width: 132px; height: 132px; border-radius: 50%; background: var(--color-cream);
	background-size: cover; background-position: center; border: 3px solid var(--color-gold);
	display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.board-card__initials { font-family: "Playfair Display", serif; font-size: 2.5rem; color: var(--color-maroon); }
.board-card__name { font-size: 1.15rem; margin: .25rem 0 0; color: var(--color-maroon); }
.board-card__role { font-size: .9rem; color: var(--color-gray); margin: .15rem 0 0; }

/* ---- gallery ---- */
.gallery__intro { margin-bottom: 2.5rem; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.gallery-grid__tile { margin: 0; overflow: hidden; border-radius: 8px; aspect-ratio: 4 / 3; }
.gallery-grid__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-grid__tile:hover img { transform: scale(1.05); }

/* ---- text + form (grant embed layer) ---- */
.text-form .grid-container { display: flex; gap: 2.5rem; align-items: flex-start; flex-wrap: wrap; }
.text-form__intro { flex: 1 1 280px; }
.text-form__embed { flex: 2 1 480px; background: #fff; border: 1px solid #ece8e9; border-radius: 12px; padding: 1.75rem; box-shadow: var(--shadow-sm); }
.text-form__iframe { width: 100%; border: 0; }
.fisd-form { display: flex; flex-direction: column; gap: 1rem; }
.fisd-form__note { background: var(--color-cream); border-left: 3px solid var(--color-gold); padding: .65rem .85rem; font-size: .85rem; color: var(--color-gray); border-radius: 4px; }
.fisd-form__row { display: flex; gap: 1rem; flex-wrap: wrap; }
.fisd-form__row .fisd-form__field { flex: 1 1 0; }
.fisd-form__field { display: flex; flex-direction: column; gap: .3rem; }
.fisd-form__field > span { font-size: .82rem; font-weight: 600; color: var(--color-maroon); }
.fisd-form input, .fisd-form select, .fisd-form textarea {
	font-family: "Inter", sans-serif; font-size: .95rem; padding: .6rem .7rem;
	border: 1px solid #d7d2d3; border-radius: 6px; background: #fff; width: 100%;
}
.fisd-form input:focus, .fisd-form select:focus, .fisd-form textarea:focus { outline: 2px solid var(--color-maroon); border-color: var(--color-maroon); }

/* ---- responsive ---- */
@media (max-width: 900px) {
	.image-text__row { grid-template-columns: 1fr; gap: 2rem; }
	.board-grid { grid-template-columns: repeat(2, 1fr); }
	.gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.board-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
	.gallery-grid { grid-template-columns: 1fr; }
	section { padding-block: 2.75rem; }
}

/* ---- nav ---- */
.global-nav { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid #ece8e9; box-shadow: 0 1px 8px rgba(0,0,0,.04); }
.fisd-nav { display: flex; align-items: center; justify-content: space-between; padding-block: .7rem; gap: 1rem; }
.fisd-nav__brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.fisd-nav__logo { height: 52px; width: auto; }
.fisd-nav__wordmark { font-family: "Playfair Display", serif; font-weight: 700; font-size: 1rem; line-height: 1.05; color: var(--color-maroon); text-transform: none; }
.fisd-nav__menu { display: flex; align-items: center; gap: 1.6rem; }
.fisd-nav__menu > a { font-family: "Inter", sans-serif; font-weight: 600; font-size: .95rem; color: var(--color-ink); text-decoration: none; }
.fisd-nav__menu > a:hover { color: var(--color-maroon); text-decoration: none; }
.fisd-nav__menu > a.button { color: #fff; }
.fisd-nav__menu > a.button:hover { color: #fff; }
.fisd-nav__check, .fisd-nav__burger { display: none; }
.fisd-nav__burger { flex-direction: column; gap: 5px; cursor: pointer; padding: .4rem; }
.fisd-nav__burger span { display: block; width: 26px; height: 3px; background: var(--color-maroon); border-radius: 2px; }
@media (max-width: 860px) {
	.fisd-nav__burger { display: flex; }
	.fisd-nav__menu { position: absolute; top: 100%; left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1.5rem 1.25rem; border-bottom: 1px solid #ece8e9; box-shadow: 0 8px 16px rgba(0,0,0,.08); display: none; }
	.fisd-nav__menu > a { padding: .8rem 0; border-bottom: 1px solid #f2eeef; }
	.fisd-nav__menu > a.button { margin-top: .75rem; text-align: center; }
	.fisd-nav__check:checked ~ .fisd-nav__menu { display: flex; }
	.global-nav .grid-container { position: relative; }
}

/* ---- footer ---- */
.site-footer { padding-block: 3rem 1.5rem; margin-top: 2rem; }
.fisd-footer { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: start; }
.fisd-footer__logo { height: 56px; width: auto; background: #fff; padding: 6px 10px; border-radius: 8px; margin-bottom: .75rem; }
.fisd-footer__name { font-family: "Playfair Display", serif; font-size: 1.2rem; color: #fff; margin: 0; }
.fisd-footer__addr { color: rgba(255,255,255,.85); margin: .35rem 0 0; }
.fisd-footer__addr a { color: var(--color-gold); }
.fisd-footer__nav { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.fisd-footer__nav a { color: rgba(255,255,255,.9); font-weight: 500; }
.fisd-footer__nav a:hover { color: var(--color-gold); }
.fisd-footer__credit { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.18); }
.fisd-footer__credit p { color: rgba(255,255,255,.75); font-size: .85rem; margin: 0; }
.fisd-footer__madeby a { color: var(--color-gold); font-weight: 600; }
@media (max-width: 700px) {
	.fisd-footer { grid-template-columns: 1fr; }
	.fisd-footer__credit { flex-direction: column; align-items: flex-start; }
}

/* gallery placeholder tiles (until real photos are added) */
.gallery-grid__tile--placeholder { display: flex; align-items: center; justify-content: center; text-align: center; background: linear-gradient(135deg, var(--color-cream), #efe7e0); border: 1px dashed var(--color-gold); }
.gallery-grid__tile--placeholder span { font-family: "Playfair Display", serif; font-size: .95rem; color: var(--color-maroon); opacity: .55; padding: 1rem; }

/* ---- hero (intro_home) + intro section heroes ---- */
.intro-home { padding-block: 5rem 4.5rem; text-align: center; }
.intro-home__inner { gap: 1.25rem; max-width: 820px; margin-inline: auto; }
.intro-home__title h1 { margin: 0; font-size: clamp(2.25rem, 5vw, 3.5rem); }
.intro-home__copy p { font-size: 1.15rem; margin: 0 auto; max-width: 40rem; opacity: .92; }
.intro-home .button-container { justify-content: center; }
.intro { padding-block: 4.5rem; }
.intro__inner { max-width: 58rem; margin-inline: auto; gap: 1rem; }
.intro__inner > * { max-width: 100%; }
.intro.background-maroon, .intro.background-maroon-deep { padding-block: 5rem; }
.intro.background-maroon h1, .intro.background-maroon-deep h1 { margin: 0; }
.intro__image { margin-top: 1.5rem; }

/* padding utilities referenced by fragments (in case e_padding.css differs) */
.padding-top-5x { padding-top: 5rem; }
.padding-top-2x { padding-top: 3rem; }
.padding-bottom-3x { padding-bottom: 4rem; }
.padding-global-half { padding-block: 1rem; }

/* ---- buttons on dark (maroon) sections ---- */
.background-maroon .button.secondary, .background-maroon-deep .button.secondary { background: transparent; border-color: #fff; color: #fff; }
.background-maroon .button.secondary:hover, .background-maroon-deep .button.secondary:hover { background: #fff; color: var(--color-maroon); }
.background-maroon .button:not(.gold):not(.secondary), .background-maroon-deep .button:not(.gold):not(.secondary) { background: #fff; border-color: #fff; color: var(--color-maroon); }
.background-maroon .button:not(.gold):not(.secondary):hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-maroon); }
.button.gold, a.button.gold { background: var(--color-gold) !important; border-color: var(--color-gold) !important; color: var(--color-maroon) !important; }
.button.gold:hover, a.button.gold:hover { background: #b08c3e !important; border-color: #b08c3e !important; color: #fff !important; }

/* ---- wordmark -> Inter (was Playfair) ---- */
.fisd-nav__wordmark { font-family: "Inter", system-ui, sans-serif; font-weight: 800; letter-spacing: -.01em; }

/* ---- button states (clean disabled + visible focus/active) ---- */
.button[disabled], a.button[disabled] { background: #ded7d9 !important; border-color: #ded7d9 !important; color: #8a8084 !important; opacity: 1; cursor: not-allowed; box-shadow: none; transform: none; }
.button[disabled]:hover, a.button[disabled]:hover { background: #ded7d9 !important; border-color: #ded7d9 !important; color: #8a8084 !important; transform: none; }
.button:active, a.button:active { transform: translateY(1px); }
.button:focus-visible, a.button:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }

/* ---- mission section: FISD seal (transparent logo, not a photo) ---- */
.image-text__media-col--logo img { box-shadow: none; border-radius: 0; max-width: 360px; width: 100%; margin-inline: auto; }
.image-text#mission .image-text__text-col { max-width: 42rem; }

/* ===== mobile: pin nav to top + wrap long headings (phone overflow fix) ===== */
@media (max-width: 860px) {
	.global-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; }
	body { padding-top: 64px; }
	.fisd-nav { padding-block: .55rem; }
	.fisd-nav__logo { height: 40px; }
	.fisd-nav__wordmark { font-size: .9rem; }
	.fisd-nav__menu { top: 64px; }                 /* dropdown sits below the fixed bar */
}
@media (max-width: 600px) {
	h1, .h1, .intro-home__title h1, .intro h1 { font-size: clamp(1.55rem, 7vw, 2.1rem); line-height: 1.18; }
	h1, h2, h3, h4, .h1, .h2, .intro-home__title, .intro__inner, .image-text__text-col {
		overflow-wrap: break-word; word-break: break-word; hyphens: none;
	}
	.intro-home { padding-block: 2.5rem 2rem; }
	.intro { padding-block: 2.75rem; }
	.intro-home__inner, .intro__inner { padding-inline: .25rem; }
}

/* ===== mobile nav: FORCE logo+wordmark and hamburger onto ONE row ===== */
@media (max-width: 860px) {
	header.global-nav .fisd-nav {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: .75rem;
	}
	header.global-nav .fisd-nav__brand { flex: 0 1 auto; min-width: 0; }
	header.global-nav .fisd-nav__burger { display: flex !important; flex: 0 0 auto; margin-left: auto; }
	header.global-nav .fisd-nav__menu { flex-basis: 100%; }   /* dropdown only; it's absolute/hidden until opened */
}