/* BHIS PTA header and footer. Uses the tokens from tokens.css. Header collapses to the menu icon below 1240px. */

html { scroll-padding-top: 100px; }
body { font-family: var(--font-body); color: var(--text-primary); padding-top: 96px; }
body #page-container { padding-top: 0 !important; }
#main-header, #top-header { display: none !important; }

:where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.bhis-skip { position: absolute; left: 12px; top: -80px; z-index: 100000; background: var(--navy-900); color: var(--cream-100); padding: 10px 16px; border-radius: 8px; }
.bhis-skip:focus { top: 12px; }

/* Header: one floating yellow bar, fixed to the top, no shrink or hide on scroll */
.bhis-header { position: fixed; z-index: 9990; top: 12px; left: 12px; right: 12px; }
body.admin-bar .bhis-header { top: calc(var(--wp-admin--admin-bar--height, 32px) + 12px); }
.bhis-header__bar {
	position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px;
	max-width: 100%; margin: 0 auto; min-height: 72px; padding: 10px 24px;
	background: var(--bg-section); border-radius: 16px; box-shadow: 0 1px 0 rgba(15, 34, 67, .08);
	transition: box-shadow .2s ease;
}
html.bhis-scrolled .bhis-header__bar { box-shadow: 0 8px 24px rgba(15, 34, 67, .18); }

.bhis-logo { display: flex; flex-direction: row; align-items: center; gap: 16px; flex: none; text-decoration: none; color: var(--text-primary);
	font: 600 13px/1.2 var(--font-body); }
.bhis-logo:hover { color: var(--text-primary); }

.bhis-nav { display: flex; align-items: center; justify-content: flex-end; flex: 1; gap: 24px; }
.bhis-nav__list { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.bhis-nav__item { position: relative; display: flex; align-items: center; gap: 2px; }
.bhis-nav__link { font: 400 18px/1.2 var(--font-heading); color: var(--text-primary); text-decoration: none; padding: 8px 0; }
.bhis-nav__link:hover, .bhis-nav__link:focus-visible { color: var(--text-link-hover); text-decoration: underline; }
.bhis-nav__caret { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.bhis-nav__caret::before { content: ""; position: absolute; left: 7px; top: 8px; width: 7px; height: 7px;
	border-right: 2px solid var(--text-primary); border-bottom: 2px solid var(--text-primary); transform: rotate(45deg); transition: transform .15s; }
.bhis-nav__item.is-open > .bhis-nav__caret::before { transform: rotate(-135deg); top: 11px; }

.bhis-nav__sub { display: none; position: absolute; top: 100%; left: -16px; min-width: 260px; margin: 8px 0 0; padding: 8px; list-style: none;
	background: var(--white); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 34, 67, .18); }
.bhis-nav__item:hover > .bhis-nav__sub, .bhis-nav__item:focus-within > .bhis-nav__sub, .bhis-nav__item.is-open > .bhis-nav__sub { display: block; }
.bhis-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.bhis-nav__sub a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--text-primary); text-decoration: none; font: 500 16px/1.3 var(--font-body); }
.bhis-nav__sub a:hover, .bhis-nav__sub a:focus-visible { background: var(--cream-100); color: var(--text-link-hover); }

.bhis-nav__tools { display: flex; align-items: center; gap: 12px; }

/* Buttons, from the Figma "Button" (node 20:3337) and "Button outline" (node 20:3342) components.
   48px tall pill, Familjen Grotesk SemiBold 16px / 22px (the Figma buttons are SemiBold), 40px side padding.
   Solid: navy-900 with gold text. Outline: 1px navy-900 border inside, navy text.
   Hover (both): navy-950 fill with gold text. */
.bhis-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; height: 48px; padding: 0 40px;
	font: 600 16px/22px var(--font-body); letter-spacing: 0; text-decoration: none; white-space: nowrap; }
.bhis-btn--solid { background: var(--navy-900); border: 0; border-radius: 50px; color: var(--button-primary-text); }
.bhis-btn--outline { background: transparent; border: 1px solid var(--navy-900); border-radius: 60px; color: var(--navy-900); }
.bhis-btn--solid:hover, .bhis-btn--solid:focus-visible, .bhis-btn--outline:hover, .bhis-btn--outline:focus-visible {
	background: var(--navy-950); border-color: var(--navy-950); color: var(--button-primary-text); }

.bhis-menu-toggle { display: none; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--text-primary); cursor: pointer; align-items: center; justify-content: center; }
.bhis-menu-toggle { position: relative; }
.bhis-menu-toggle .bhis-ico { position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px; transition: opacity .18s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
.bhis-menu-toggle .bhis-ico--close { opacity: 0; transform: rotate(-90deg) scale(.8); }
.is-open .bhis-menu-toggle .bhis-ico--menu { opacity: 0; transform: rotate(90deg) scale(.8); }
.is-open .bhis-menu-toggle .bhis-ico--close { opacity: 1; transform: none; }
.bhis-nav__ring { display: none; }
.bhis-nav__ctas { display: contents; }

/* Collapsed header: phones and tablets. Figma: Mobile nav (node 20:3382).
   Closed: a 64px yellow bar (logo, menu icon). Open: the same bar plus the menu become ONE yellow card:
   bar with a hairline under it, 52px rows (Young Serif 16px), round plus/minus buttons, Join and Donate side by side,
   then a navy strip with EN / ES / 中文. */
@media (max-width: 1099px) {
	body { padding-top: 88px; }
	.bhis-header__bar { min-height: 64px; height: 64px; box-sizing: border-box; padding: 0 16px; border-radius: 12px; gap: 8px; border-bottom: 1px solid transparent;
		transition: border-radius .3s cubic-bezier(.2, .8, .2, 1), border-color .3s ease, box-shadow .2s ease; }
	.bhis-logo { font-weight: 700; line-height: 1.05; }
	.bhis-menu-toggle { display: inline-flex; flex: none; }
	.is-open .bhis-header__bar { border-radius: 12px 12px 0 0; border-bottom-color: var(--rule-hairline); box-shadow: none; }

	.bhis-nav { display: grid; position: absolute; left: 0; right: 0; top: calc(100% + 1px); gap: 0; padding: 0; background: var(--bg-section);
		visibility: hidden; opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0);
		transition: clip-path .3s cubic-bezier(.2, .8, .2, 1), opacity .18s ease, visibility 0s linear .3s;
		border-radius: 0 0 12px 12px; box-shadow: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; max-height: calc(100vh - 12px - 64px - 16px);
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; justify-content: stretch; }
	.is-open .bhis-nav { visibility: visible; opacity: 1; pointer-events: auto; clip-path: inset(0 0 0 0);
		transition: clip-path .3s cubic-bezier(.2, .8, .2, 1), opacity .18s ease, visibility 0s; } /* sits just under the bar's 1px hairline */
	body.admin-bar .bhis-nav { max-height: calc(100vh - 32px - 12px - 64px - 16px); }

	/* Rows */
	.bhis-nav__list { grid-column: 1 / -1; order: 1; display: block; margin: 0; padding: 0 0 8px; }
	.bhis-nav__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0; padding: 0 16px; min-height: 52px; }
	.bhis-header a.bhis-nav__link { flex: 1 1 auto; display: flex; align-items: center; min-height: 52px; padding: 0; font: 400 16px/1.2 var(--font-heading); text-decoration: none; }
	.bhis-header a.bhis-nav__link:hover, .bhis-header a.bhis-nav__link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

	/* Round plus/minus buttons: 48px target, 36px circle, 20px icon */
	.bhis-nav__caret { width: 48px; height: 48px; padding: 0; border-radius: 50%; background: none; display: inline-flex; align-items: center; justify-content: center; flex: none; }
	.bhis-nav__caret::before { display: none; }
	.bhis-nav__ring { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--yellow-300); color: var(--text-primary); }
	.bhis-nav__ring .bhis-ico { position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px; transition: opacity .18s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
	.bhis-nav__ring .bhis-ico--minus { opacity: 0; transform: rotate(-90deg); }
	.bhis-nav__item.is-open > .bhis-nav__caret .bhis-ico--plus { opacity: 0; transform: rotate(90deg); }
	.bhis-nav__item.is-open > .bhis-nav__caret .bhis-ico--minus { opacity: 1; transform: none; }

	/* Sub rows: same 52px rows, indented 48px */
	.bhis-nav__sub { position: static; display: block; flex: 0 0 100%; width: 100%; min-width: 0; margin: 0 -16px; padding: 0; background: transparent; border-radius: 0; box-shadow: none;
		max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .3s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .3s; }
	.bhis-nav__sub::before { display: none; }
	.bhis-nav__item.is-open > .bhis-nav__sub { max-height: calc(var(--rows, 6) * 52px); visibility: visible; transition: max-height .3s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
	.bhis-header .bhis-nav__sub a { display: flex; align-items: center; min-height: 52px; padding: 0 16px 0 48px; border-radius: 0; font: 400 16px/1.2 var(--font-heading); }
	.bhis-header .bhis-nav__sub a:hover, .bhis-header .bhis-nav__sub a:focus-visible { background: transparent; text-decoration: underline; text-underline-offset: 3px; color: var(--text-primary); }

	/* Join and Donate side by side, then the language strip. The tools wrapper dissolves so its children join the grid. */
	.bhis-nav__tools { display: contents; }
	.bhis-nav__tools .bhis-btn { display: inline-flex; min-width: 0; width: auto; height: 48px; padding: 0 12px; font: 600 16px/22px var(--font-body); }
	.bhis-nav__tools .bhis-btn--join { border-radius: 60px; }
	.bhis-nav__tools .bhis-btn--solid { border-radius: 50px; }
	/* Join and Donate, then the language strip, stay pinned to the bottom of the sheet while the rows scroll.
	   The strip is 52px tall, so the buttons stick 52px up from the bottom. */
	.bhis-nav__ctas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; grid-column: 1 / -1; order: 2; padding: 8px 16px 24px;
		position: sticky; bottom: 52px; z-index: 2; background: var(--bg-section); }
	.bhis-nav__tools .bhis-lang--header { grid-column: 1 / -1; order: 3; position: sticky; bottom: 0; z-index: 2; justify-content: center; align-self: stretch; gap: 10px; margin: 0; padding: 16px 20px; box-sizing: border-box; min-height: 52px;
		background: var(--navy-900); --lang-active: var(--yellow-500); --lang-inactive: var(--white-80); }
}

/* Footer */
.bhis-footer { background: var(--bg-footer); color: var(--cream-100); margin-top: 0; padding: 48px 24px 32px; }
.bhis-footer__inner { max-width: 1380px; margin: 0 auto; }
.bhis-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.bhis-footer__heading { margin: 0 0 12px; font: 600 14px/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--yellow-500); }
.bhis-footer ul { margin: 0; padding: 0; list-style: none; }
.bhis-footer li { margin: 0 0 8px; }
.bhis-footer a { color: var(--cream-100); text-decoration: underline; text-underline-offset: 3px; font: 400 15px/1.4 var(--font-body); }
.bhis-footer a:hover, .bhis-footer a:focus-visible { color: var(--yellow-300); }
.bhis-footer__bottom { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--white-20); font: 400 14px/1.4 var(--font-body); }
.bhis-footer__bottom p { margin: 0; padding: 0; color: var(--white-80); }
@media (max-width: 767px) {
	.bhis-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}

/* Specificity guard: Divi's customizer sets a global link color that would otherwise win in the header and footer. */
.bhis-header a.bhis-logo, .bhis-header a.bhis-logo:hover { color: var(--text-primary); }
.bhis-header a.bhis-nav__link { color: var(--text-primary); }
.bhis-header a.bhis-nav__link:hover, .bhis-header a.bhis-nav__link:focus-visible { color: var(--text-link-hover); }
.bhis-header .bhis-nav__sub a { color: var(--text-primary); }
.bhis-header .bhis-nav__sub a:hover, .bhis-header .bhis-nav__sub a:focus-visible { color: var(--text-link-hover); }
.bhis-header a.bhis-btn--solid, .bhis-header a.bhis-btn--solid:hover { color: var(--yellow-500); }
.bhis-header a.bhis-btn--outline { color: var(--navy-900); }
.bhis-header a.bhis-btn--outline:hover, .bhis-header a.bhis-btn--outline:focus-visible { color: var(--yellow-500); }
.bhis-footer a, .bhis-footer a:visited { color: var(--cream-100); }
.bhis-footer a:hover, .bhis-footer a:focus-visible { color: var(--yellow-300); }

/* GTranslate: the header carries the language selector, so hide the floating one. */
.gt_switcher_wrapper { display: none !important; }
#main-footer.bhis-footer { background-color: var(--bg-footer); color: var(--cream-100); }

/* Tab labels never wrap; the language selector stays compact. */
.bhis-nav__link { white-space: nowrap; }

/* Interim state: full tab row, no Join/Donate buttons, until there is room for all of it. */
@media (min-width: 1100px) and (max-width: 1259px) {
	.bhis-header__bar { column-gap: 16px; padding-left: 28px; padding-right: 20px; }
	.bhis-nav__list { gap: 22px; }
	.bhis-nav__tools .bhis-btn { display: none; }
}

/* Language switcher, from Figma node 92:13099: EN / ES / 中文.
   Buttons are Familjen Grotesk SemiBold 14px, 10px apart. The active language is underlined at full strength; the others sit at 75%.
   Separators and the 中文 label use the Eyebrow/Small style (11px, 10% letter spacing), as drawn in Figma. */
.bhis-lang { --lang-active: var(--text-primary); --lang-inactive: var(--text-secondary);
	position: relative; display: inline-flex; align-items: center; gap: 10px; }
.bhis-lang--footer { --lang-active: var(--cream-100); --lang-inactive: var(--white-80); margin-top: 16px; }
.bhis-lang__btn { appearance: none; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
	font: 600 14px/1.4 var(--font-body); letter-spacing: 0; color: var(--lang-inactive); text-decoration: none; }
.bhis-lang__btn[aria-pressed="true"] { color: var(--lang-active); text-decoration: underline; text-underline-offset: 3px; }
.bhis-lang__btn:hover { color: var(--lang-active); }
.bhis-lang__btn--cjk { font-size: 11px; line-height: 1; letter-spacing: .1em; }
.bhis-lang__sep { font: 600 11px/1 var(--font-body); letter-spacing: .1em; color: var(--lang-inactive); }
.bhis-lang__engine { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* At the top the bar runs edge to edge. Once the page scrolls it pulls in to the 1380px content width (width only, so the page never shifts) and gains a shadow. */
.bhis-header__bar { transition: max-width .3s ease, box-shadow .3s ease; }
@media (min-width: 1440px) {
	html.bhis-scrolled .bhis-header__bar { max-width: 1380px; }
}
@media (prefers-reduced-motion: reduce) {
	.bhis-header__bar, .bhis-nav__caret::before { transition: none !important; }
}

/* Three zones on desktop: logo left, tabs centered, tools right. */
@media (min-width: 1100px) {
	.bhis-header__bar {
		display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px;
		padding-left: 40px; padding-right: 24px;
	}
	.bhis-nav { display: contents; }
	.bhis-logo { grid-column: 1; justify-self: start; }
	.bhis-nav__list { grid-column: 2; justify-self: center; transform: translateX(-8px); } /* cancels the 40px/24px padding difference so tabs sit at the bar's true center */
	.bhis-nav__tools { grid-column: 3; justify-self: end; }
}

/* The surface class is on the outer header only to switch the tokens; only the bar itself should be colored. */
.bhis-header.surface-yellow { background-color: transparent; }

/* Homepage: the hero photo starts at the top of the screen and the bar floats over it. */
body.home, body.home #page-container { padding-top: 0 !important; }

/* Desktop nav items, from the Figma "Nav Menu" component (node 35:3085).
   Label: Young Serif 16px / 120%. Item padding 15px 12px, 8px between label and caret.
   Hover or open: label underlined, caret flips. Dropdown: cream card, 16px radius, 24px serif items. */
@media (min-width: 1100px) {
	.bhis-nav__list { gap: 0; }
	.bhis-nav__item { gap: 0; padding: 0 12px; }
	.bhis-header a.bhis-nav__link { font: 400 16px/1.2 var(--font-heading); padding: 15px 0; text-decoration: none; }
	.bhis-header .bhis-nav__item:hover > a.bhis-nav__link,
	.bhis-header .bhis-nav__item:focus-within > a.bhis-nav__link,
	.bhis-header .bhis-nav__item.is-open > a.bhis-nav__link { text-decoration: underline; text-underline-offset: 3px; color: var(--text-primary); }
	.bhis-nav__caret { width: 16px; height: 16px; margin-left: 8px; border-radius: 0; background: none; }
	/* Caret: the 16x16 SVG from Figma (node 91:12686), drawn as a background so it stays crisp. */
	.bhis-nav__caret::before { left: 0; top: 0; width: 16px; height: 16px; border: 0; transform: none; background: no-repeat center / 16px 16px
		url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.3537 7.35375L8.35366 12.3538C8.30722 12.4002 8.25207 12.4371 8.19138 12.4623C8.13068 12.4874 8.06561 12.5004 7.99991 12.5004C7.9342 12.5004 7.86913 12.4874 7.80844 12.4623C7.74774 12.4371 7.69259 12.4002 7.64616 12.3538L2.64616 7.35375C2.57615 7.28382 2.52847 7.1947 2.50914 7.09765C2.48982 7.00061 2.49972 6.90002 2.53759 6.8086C2.57547 6.71719 2.63962 6.63908 2.72191 6.58414C2.80421 6.5292 2.90096 6.49992 2.99991 6.5H12.9999C13.0989 6.49992 13.1956 6.5292 13.2779 6.58414C13.3602 6.63908 13.4243 6.71719 13.4622 6.8086C13.5001 6.90002 13.51 7.00061 13.4907 7.09765C13.4713 7.1947 13.4237 7.28382 13.3537 7.35375Z' fill='%230F2243'/%3E%3C/svg%3E"); }
	/* Opening turns the same caret 180 degrees. The pivot is the middle of the triangle (y 9.5 of 16), so it lands where Figma's open caret (node 91:12771) sits. */
	.bhis-nav__caret::before { transform-origin: 8px 9.5px; transition: transform .2s ease; }
	.bhis-nav__item:hover > .bhis-nav__caret::before, .bhis-nav__item:focus-within > .bhis-nav__caret::before, .bhis-nav__item.is-open > .bhis-nav__caret::before {
		top: 0; transform: rotate(180deg); border: 0; }
	.bhis-nav__sub { left: 0; min-width: 400px; margin: 0; padding: 16px 0; background: var(--cream-100); border-radius: 16px; top: calc(100% - 4px); }
	.bhis-nav__sub::before { top: -22px; height: 22px; }
	.bhis-header .bhis-nav__sub a { padding: 16px 32px; border-radius: 0; font: 400 24px/1.3 var(--font-heading); }
	.bhis-header .bhis-nav__sub a:hover, .bhis-header .bhis-nav__sub a:focus-visible { background: transparent; text-decoration: underline; text-underline-offset: 4px; color: var(--text-primary); }
}
.bhis-nav__tools .bhis-lang { align-self: flex-start; }
@media (min-width: 1100px) { .bhis-nav__tools .bhis-lang { align-self: auto; } }

/* Header buttons share one size: the width of Donate (129px). A minimum, so a longer translated label can still grow. */
@media (min-width: 1100px) {
	.bhis-nav__tools .bhis-btn { min-width: 129px; padding: 0 24px; }
}

/* A little extra room between the language row and Join the PTA (12px gap + 8px). Only where the buttons show. */
@media (min-width: 1440px) {
	.bhis-nav__tools .bhis-lang { margin-right: 8px; }
}

/* ---------- Shared page pieces: buttons outside the header, page header band, breadcrumb ---------- */
a.bhis-btn { text-decoration: none; transition: background-color .15s, color .15s; }
a.bhis-btn--outline { color: var(--button-secondary-text); }
a.bhis-btn--outline:hover, a.bhis-btn--outline:focus-visible { background: var(--button-secondary-text); color: var(--bg-section); }
a.bhis-btn--solid, a.bhis-btn--solid:hover { color: var(--button-primary-text); }
.bhis-btn--sm { padding: 10px 18px; font-size: 14px; font-weight: 600; }

body.bhis-has-hero { padding-top: 0; }
.bhis-pagehead { padding: 148px 0 72px; }
.bhis-pagehead__inner { width: min(1360px, 100% - 80px); margin: 0 auto; }
.bhis-breadcrumb { margin: 0 0 20px; font: 600 12px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--text-eyebrow); }
.bhis-breadcrumb a { color: var(--text-eyebrow); text-decoration: none; }
.bhis-breadcrumb a:hover { text-decoration: underline; }
.bhis-pagehead__title { margin: 0 0 24px; padding: 0; font: 400 clamp(44px, 7vw, 80px)/1.05 var(--font-heading); color: var(--text-primary); }
.bhis-pagehead__lead { margin: 0; max-width: 900px; font: 400 clamp(18px, 2.2vw, 28px)/1.4 var(--font-body); color: var(--text-secondary); }
@media (max-width: 767px) {
	.bhis-pagehead { padding: 112px 0 48px; }
	.bhis-pagehead__inner { width: calc(100% - 32px); }
}

/* Numerals: natural (proportional) widths, and lining figures so every digit sits on the baseline at one height, in both fonts.
   !important because the `font:` shorthand used throughout resets font-variant-numeric to normal. */
html, body, body *, body *::before, body *::after { font-variant-numeric: lining-nums proportional-nums !important; }

/* ---------- Header and page header band: spacing from Figma (Events, node 73:5968 desktop / 73:6201 mobile) ---------- */
/* Page header band. The yellow bar is fixed, so positions are measured from the top of the page. */
.bhis-pagehead { padding: 232px 0 80px; }
.bhis-pagehead__inner { width: min(1360px, 100% - 80px); padding-left: 24px; box-sizing: border-box; }
.bhis-breadcrumb { margin: 0 0 40px; font: 600 11px/11px var(--font-body); }
.bhis-pagehead__title { margin: 0 0 20px; font: 400 clamp(40px, 7vw, 80px)/1.1 var(--font-heading); }
.bhis-pagehead__lead { max-width: none; font: 400 18px/1.2 var(--font-body); }
body.bhis-has-hero .bhis-calendar { padding-top: 56px; }

/* Yellow bar on wide screens: 40px from the top and sides, 72px tall; it eases up to 12px once the page scrolls. */
@media (min-width: 1440px) {
	.bhis-header { top: 40px; left: 40px; right: 40px; transition: top .3s ease; }
	body.admin-bar .bhis-header { top: calc(var(--wp-admin--admin-bar--height, 32px) + 40px); }
	html.bhis-scrolled .bhis-header { top: 12px; }
	html.bhis-scrolled body.admin-bar .bhis-header { top: calc(var(--wp-admin--admin-bar--height, 32px) + 12px); }
	.bhis-header__bar { max-width: 1360px; padding-left: 40px; padding-right: 40px; }
	html.bhis-scrolled .bhis-header__bar { max-width: 1360px; padding-left: 40px; padding-right: 40px; column-gap: 24px; }
	.bhis-nav__list, html.bhis-scrolled .bhis-nav__list { transform: none; gap: 28px; }
	body { padding-top: 112px; }
}
@media (prefers-reduced-motion: reduce) { .bhis-header { transition: none; } }

/* Phones: bar 12px from the top, 16px from the sides, 64px tall; band spacing from the mobile frame. */
@media (max-width: 767px) {
	.bhis-header { top: 12px; left: 16px; right: 16px; }
	body.admin-bar .bhis-header { top: calc(var(--wp-admin--admin-bar--height, 46px) + 12px); }
	.bhis-header__bar { min-height: 64px; }
	body { padding-top: 92px; }
	.bhis-pagehead { padding: 100px 0 48px; }
	.bhis-pagehead__inner { width: calc(100% - 32px); padding-left: 8px; }
	.bhis-breadcrumb { margin: 0 0 24px; }
	.bhis-pagehead__title { margin: 0 0 16px; font: 400 24px/1.3 var(--font-heading); }
	.bhis-pagehead__lead { font: 400 16px/1.4 var(--font-body); }
	body.bhis-has-hero .bhis-calendar { padding-top: 24px; }
}
.bhis-pagehead .bhis-breadcrumb { display: flex; align-items: center; gap: 6px; height: 11px; margin-bottom: 40px; padding: 0 !important; line-height: 11px; }
.bhis-pagehead .bhis-breadcrumb a, .bhis-pagehead .bhis-breadcrumb span { line-height: 11px; }
@media (max-width: 767px) { .bhis-pagehead .bhis-breadcrumb { margin-bottom: 24px; } }

/* Breadcrumb states (Figma "Breadcrumbs" set): Link, Current, Disabled. Colors come from the surface tokens, so they flip with the section class. */
.bhis-breadcrumb [aria-hidden="true"] { color: var(--text-secondary); opacity: .75; }
.bhis-breadcrumb a { position: relative; color: var(--text-link); }
.bhis-breadcrumb a::after { content: ""; position: absolute; inset: -8px -4px; } /* larger tap target than the 11px text */
.bhis-breadcrumb a:hover { color: var(--text-link-hover); }
.bhis-breadcrumb a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.bhis-breadcrumb [aria-current="page"] { color: var(--text-primary); }
.bhis-breadcrumb .is-disabled { color: var(--text-secondary); opacity: .5; cursor: default; } /* an ancestor with no page yet: plain text, not a link */

/* Scroll narrowing (wide screens): the bar eases from Figma's 1360px to 1280px and tightens its inner spacing so everything still fits. */
.bhis-header__bar { transition: max-width .3s ease, padding .3s ease, column-gap .3s ease, box-shadow .3s ease; }
@media (min-width: 1440px) {
	html.bhis-scrolled .bhis-header__bar { max-width: 1280px; padding-left: 24px; padding-right: 24px; column-gap: 12px; }
	html.bhis-scrolled .bhis-nav__list { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) { .bhis-header__bar { transition: none; } }

/* ---------- Desktop nav bar layout, from the Figma Navigation component (node 33:156) ----------
   1360 x 72, 12px corners. Three groups spread with equal space between: logo (40px padding each side),
   tabs (40px padding each side), tools (language row, Join, Donate, 40px right padding).
   The tabs, carets, dropdown and button sizes are set in the "Nav Menu" block above. */
@media (min-width: 1100px) {
	.bhis-header__bar,
	html.bhis-scrolled .bhis-header__bar { display: flex; align-items: center; justify-content: space-between; column-gap: 0; padding: 0; min-height: 72px; height: 72px; border-radius: 12px; }
	.bhis-logo { padding: 0 40px; flex: none; }
	.bhis-nav__list, html.bhis-scrolled .bhis-nav__list { gap: 0; padding: 0 40px; transform: none; justify-self: auto; }
	.bhis-nav__tools { gap: 8px; padding-right: 40px; justify-self: auto; }
	.bhis-header a.bhis-btn { box-sizing: border-box; height: 48px; border-width: 1px; font: 600 16px/22px var(--font-body); }
	.bhis-header a.bhis-btn--outline { border-radius: 60px; }
}
/* Scrolled (wide screens): Figma's 1360px bar eases to 1280px; the three groups just move closer together. */
@media (min-width: 1440px) {
	html.bhis-scrolled .bhis-header__bar { max-width: 1280px; }
}

/* Category tags, shared by the calendar list and the event page. Colors come from the Figma Tag component tokens. */
.bhis-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 600 11px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.bhis-tag--school { background: var(--tag-school-bg); color: var(--tag-school-text); }
.bhis-tag--pta { background: var(--tag-pta-bg); color: var(--tag-pta-text); }
.bhis-tag--fundraiser { background: var(--tag-fundraiser-bg); color: var(--tag-fundraiser-text); }
.bhis-tag--closure { background: var(--tag-closure-bg); color: var(--tag-closure-text); }

/* Contact strip */
.bhis-contact { padding: 56px 0; }
.bhis-contact__inner { width: min(1360px, 100% - 80px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.bhis-contact__text { max-width: 927px; }
.bhis-contact h2 { margin: 0 0 12px; padding: 0; font: 400 clamp(32px, 4vw, 40px)/1.1 var(--font-heading); color: var(--text-primary); }
.bhis-contact p { margin: 0; padding: 0; font: 400 18px/1.45 var(--font-body); color: var(--text-primary); }
.bhis-contact__actions { display: flex; align-items: center; gap: 20px; flex: none; }
.bhis-contact .bhis-btn--solid { padding: 15px 28px; font: 600 16px/22px var(--font-body); }
a.bhis-contact__mail { color: var(--text-primary); font: 400 16px/1.4 var(--font-body); text-decoration: underline; text-underline-offset: 3px; }
a.bhis-contact__mail:hover { color: var(--text-link-hover); }
@media (max-width: 899px) {
	.bhis-contact { padding: 40px 0; }
	.bhis-contact__inner { width: calc(100% - 32px); flex-direction: column; align-items: flex-start; gap: 24px; }
	.bhis-contact__actions { flex-direction: column; align-items: stretch; width: 100%; gap: 14px; }
	.bhis-contact .bhis-btn--solid { width: 100%; box-sizing: border-box; }
	a.bhis-contact__mail { text-align: center; }
}

/* The base solid button is fixed navy with yellow text (matches the header). On navy sections it needs the token colors instead. */
.bhis-contact a.bhis-btn--solid { background: var(--button-primary-bg); color: var(--button-primary-text); }
.bhis-contact a.bhis-btn--solid:hover, .bhis-contact a.bhis-btn--solid:focus-visible { background: var(--yellow-300); color: var(--button-primary-text); }


/* ---------- Bar position, final rules ----------
   Wide screens (1100px and up): the bar is 40px from the top, left and right of the screen at all times.
   At the top of the page it spans the full width between those margins. Scrolling keeps the 40px top margin and only narrows the bar. */
@media (min-width: 1100px) {
	.bhis-header, html.bhis-scrolled .bhis-header { top: 40px; left: 40px; right: 40px; }
	body.admin-bar .bhis-header, html.bhis-scrolled body.admin-bar .bhis-header { top: calc(var(--wp-admin--admin-bar--height, 32px) + 40px); }
	/* max-width must be a length or percentage, not none: browsers cannot animate between none and a pixel value. */
	.bhis-header__bar { max-width: 100%; width: 100%; }
	body { padding-top: 112px; }
}
/* Buttons need the room: with 40px margins they fit from 1400px; below that the language row stays and Join and Donate hide. */
@media (min-width: 1260px) and (max-width: 1399px) {
	.bhis-nav__tools .bhis-btn { display: none; }
}
/* Scrolled: the bar narrows to the 1360px content width, centered, and keeps the 40px top margin.
   On a 1440px window the full-width bar is already 1360px, so only wider windows see it narrow. */
@media (min-width: 1400px) {
	html.bhis-scrolled .bhis-header__bar { max-width: 1360px; padding: 0; column-gap: 0; }
}

/* Scroll animation: the bar glides between its full width and the narrowed width. */
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
	.bhis-header__bar { transition: max-width .45s cubic-bezier(.4, 0, .2, 1), box-shadow .45s ease; will-change: max-width; }
}

.bhis-tag--featured { background: var(--tag-featured-bg); color: var(--tag-featured-text); }

/* Desktop dropdown links stay on one line (the longest label is "School Choice & Open Enrollment"); the menu grows to fit. */
@media (min-width: 1100px) {
	.bhis-nav__sub { width: max-content; min-width: 260px; }
	.bhis-nav__sub a { white-space: nowrap; }
}


/* Visitors who ask their device to reduce motion get the menu without any movement. */
@media (prefers-reduced-motion: reduce) {
	.bhis-header__bar, .bhis-nav, .bhis-nav__sub, .bhis-menu-toggle .bhis-ico, .bhis-nav__ring .bhis-ico { transition: none !important; }
}


/* External-link arrow inside buttons. It takes the button's text color and sits after the label. */
.bhis-ext { flex: none; width: 18px; height: 18px; margin-left: 6px; }
.bhis-hbtn--external .wp-block-button__link, .bhis-btn--join { display: inline-flex; align-items: center; justify-content: center; }
.bhis-btn--join .bhis-ext { width: 16px; height: 16px; margin-left: 4px; }

/* Skills list (volunteer band): plain rows on desktop, one dot-separated line on phones. Not interactive, so no pill shapes. */
ul.bhis-skills { display: grid; gap: 12px; margin: 16px 0 24px; padding: 0; list-style: none; color: var(--navy-900); }
ul.bhis-skills li { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 16px; margin: 0; padding: 0; font: 400 16px/1.4 var(--font-body); }
ul.bhis-skills .bhis-skill__name { font-weight: 600; font-size: 16px; }
ul.bhis-skills li.bhis-skills__more { display: block; margin-top: 4px; }
ul.bhis-skills .bhis-skills__more-m { display: none; }
@media (max-width: 767px) {
	ul.bhis-skills { display: block; font: 600 16px/1.6 var(--font-body); }
	ul.bhis-skills li { display: inline; font: inherit; }
	ul.bhis-skills li.bhis-skills__more { display: inline; margin: 0; }
	ul.bhis-skills li::after { content: "\00a0· "; }
	ul.bhis-skills li:last-child::after { content: none; }
	ul.bhis-skills .bhis-skill__name { font: inherit; white-space: nowrap; }
	ul.bhis-skills .bhis-skill__eg, ul.bhis-skills .bhis-skills__more-d { display: none; }
	ul.bhis-skills .bhis-skills__more-m { display: inline; }
}

/* Tiger paw next to the school name (Figma: Navigation) */
.bhis-logo__paw { flex: none; width: 36px; height: 36px; display: block; }
.bhis-logo__text { display: flex; flex-direction: column; }

/* Placeholder marker: any text still waiting for an answer from the PTA is tagged so it cannot be missed. Search the pages for "bhis-todo" before launch; none should remain. */
.bhis-todo, .bhis-inner .bhis-todo, .bhis-inner p.bhis-todo { padding: 1px 6px; border-radius: 4px; background: var(--tiger-500); color: var(--navy-900); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
p.bhis-todo { align-self: flex-start; width: fit-content; }

/* Touch targets: links in the breadcrumb, footer and language row were 11 to 20px tall. Padding enlarges the tappable area; negative margins keep the layout where Figma has it. */
.bhis-pagehead .bhis-breadcrumb a { display: inline-block; padding: 7px 0; margin: -7px 0; }
.bhis-lang__btn { display: inline-flex; align-items: center; min-height: 24px; padding: 6px 4px; margin: -6px -4px; box-sizing: content-box; }
@media (max-width: 767px) {
	.bhis-footer li { margin: 0; }
	.bhis-footer li a, .bhis-footer__legal a { display: inline-block; padding: 7px 0; }
}