/*
 Theme Name:   BPSF Theme
 Theme URI:    https://boiseschools.org
 Description:  Boise Public Schools Foundation - FSE Block Theme
 Author:       Boise Public Schools Foundation
 Author URI:   https://boiseschools.org
 Version:      2.0.0
 Requires at least: 6.4
 Tested up to: 6.8
 Requires PHP: 8.0
 Text Domain:  bpsf-theme
 License:      GPL-2.0-or-later
*/

/* Global box-sizing reset — every element renders as border-box */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Kill default browser body margin so full-bleed sections reach the viewport edge. */
html,
body {
  margin: 0;
  padding: 0;
}

/* WP injects padding on .wp-block-template-part via root padding-aware alignments;
   strip it so the header (and any other template part) reaches the viewport edge. */
.wp-block-template-part {
  padding: 0 !important;
  margin: 0 !important;
}

@media (max-width: 1058px) {
  :where(.wp-site-blocks) > * {
    margin-block-start: 4px !important;
  }
}

/* Shared button — yellow pill CTA used in heroes/banners */
a.bpsf-btn,
.bpsf-btn {
  display: inline-block;
  font-family: var(--wp--preset--font-family--cal-sans, 'Cal Sans', sans-serif);
  font-weight: 600;
  font-size: 13px;
  background-color: var(--wp--preset--color--yellow-dark, #eeb81c);
  color: var(--wp--preset--color--teal, #1b4456);
  border-radius: 20.5px;
  padding: 10px 30px;
  line-height: 21px;
  text-decoration: none;
  text-align: center;
  border: none;
  box-shadow: none;
  transition: background-color 0.2s ease;
}
a.bpsf-btn:hover,
.bpsf-btn:hover {
  background-color: var(--wp--preset--color--yellow, #ffcd3e);
  color: var(--wp--preset--color--teal, #1b4456);
}

/* Smooth hover transition for core button block (e.g. header Donate) */
.wp-element-button,
.wp-block-button__link {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover state for core buttons — beats WP's `has-*-background-color !important` */
.wp-block-button__link.has-yellow-background-color:hover,
.wp-block-button__link.has-yellow-background-color:focus,
.wp-element-button.has-yellow-background-color:hover,
.wp-element-button.has-yellow-background-color:focus {
  background-color: var(--wp--preset--color--yellow-dark, #eeb81c) !important;
  color: var(--wp--preset--color--teal, #1b4456) !important;
}
.wp-block-button__link.has-yellow-dark-background-color:hover,
.wp-block-button__link.has-yellow-dark-background-color:focus,
.wp-element-button.has-yellow-dark-background-color:hover,
.wp-element-button.has-yellow-dark-background-color:focus {
  background-color: var(--wp--preset--color--yellow, #ffcd3e) !important;
  color: var(--wp--preset--color--teal, #1b4456) !important;
}

/* Gray pill variant — used on yellow info-tiles where a yellow CTA would disappear */
a.bpsf-btn--gray,
.bpsf-btn--gray {
  background-color: #c5d2d8;
  color: #1B4456;
}
a.bpsf-btn--gray:hover,
.bpsf-btn--gray:hover {
  background-color: #b3c2c9;
  color: #1B4456;
}

/* Header navigation — Figma spec */
header .wp-block-navigation,
header .wp-block-navigation .wp-block-navigation-item__content {
  font-family: 'Cal Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  color: #1B4456 !important;
}

/* Animated underline — base state, scales out from center on hover/active */
header .wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content {
  position: relative;
}
header .wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 25%;
  bottom: -9px;
  width: 50%;
  height: 2px;
  background-color: rgba(27, 68, 86, 0.4);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms ease, opacity 220ms ease, background-color 220ms ease;
  pointer-events: none;
}

/* Hover — subtler underline */
header .wp-block-navigation .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after {
  opacity: 1;
  transform: scaleX(1);
  background-color: rgba(27, 68, 86, 0.15);
}

/* Active page indicator — full underline */
header .wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
header .wp-block-navigation .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::after,
header .wp-block-navigation .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content::after,
header .wp-block-navigation .wp-block-navigation-item.current_page_parent > .wp-block-navigation-item__content::after,
header .wp-block-navigation .wp-block-navigation-item[aria-current="page"] > .wp-block-navigation-item__content::after,
header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
  background-color: rgba(27, 68, 86, 0.4);
}

/* Force the nav overlay (hamburger) to trigger below 980px so the inline
   header doesn't break in the tablet range (~600–980px). */
@media (max-width: 1058px) {
  header .wp-block-navigation.is-responsive .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
  header .wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
    display: flex !important;
  }
}

/* Nav overlay (hamburger open state) — branded panel anchored top-right
   so it visually originates from the hamburger that opened it. */
header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--teal, #1b4456) !important;
  padding: 76px 28px 32px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  display: flex !important;
  flex-direction: column !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 100000 !important;
}
header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  margin-top: 0 !important;
}
header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 18px !important;
  width: auto !important;
}
header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: auto !important;
}
header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: #ffffff !important;
  font-family: 'Cal Sans', sans-serif !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.5px;
  text-align: right;
  padding: 4px 0 !important;
}
header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--yellow, #ffcd3e) !important;
}
header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: #ffffff !important;
  position: absolute !important;
  top: 22px !important;
  right: -4px !important;
  padding: 0 !important;
  margin: 0 !important;
}
header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}
/* Hamburger trigger button — match teal brand */
header .wp-block-navigation .wp-block-navigation__responsive-container-open {
  color: var(--wp--preset--color--teal, #1b4456) !important;
}
header .wp-block-navigation .wp-block-navigation__responsive-container-open svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* Mobile header: single row, Donate sits to the LEFT of the hamburger. */
@media (max-width: 1058px) {
  header {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 16px !important;
    padding-bottom: 8px !important;
  }
  header > .wp-block-group {
    align-items: center;
    flex-wrap: nowrap;
  }
  /* Inner group holds [navigation (hamburger), buttons (Donate)].
     Natural order: hamburger on the left, Donate on the right. */
  header .wp-block-group:has(> .wp-block-navigation) {
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 14px;
  }
  header .wp-block-buttons {
    display: flex !important;
    margin: 0 !important;
  }
  header .wp-block-buttons .wp-block-button__link {
    font-size: 13px !important;
    padding: 8px 20px !important;
    border-radius: 20.5px !important;
    white-space: nowrap;
  }
}

/* Phone-sized: bigger logo, tighter side padding. */
@media (max-width: 600px) {
  header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  header .wp-block-site-logo img,
  header .wp-block-site-logo a img {
    max-width: 170px !important;
    height: auto !important;
    width: auto !important;
  }
  header .wp-block-buttons .wp-block-button__link {
    font-size: 12px !important;
    padding: 7px 16px !important;
  }
  header .wp-block-group:has(> .wp-block-navigation) {
    gap: 10px;
  }
}

@media (max-width: 400px) {
  header .wp-block-site-logo img,
  header .wp-block-site-logo a img {
    max-width: 140px !important;
  }
  header .wp-block-buttons .wp-block-button__link {
    padding: 7px 12px !important;
  }
}

.bpsf-cards-overlap,
.wp-block-columns:has(.bpsf-support-card) {
  position: relative;
  z-index: 2;
  background: transparent !important;
}
.bpsf-cards-overlap .wp-block-column,
.wp-block-columns:has(.bpsf-support-card) > .wp-block-column {
  background: transparent !important;
}
/* Social icons: large size — circles render ~46px (Figma footer spec) */
.wp-block-social-links.has-large-icon-size {
  font-size: 30px;
}

/* Top utility bar — wider gutters at tablet/laptop sizes (under desktop) */
@media (max-width: 1360px) {
  .wp-block-group.has-teal-background-color > .wp-block-group:first-child {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

/* Top utility bar — keep gutters and let items wrap on small screens */
@media (max-width: 767px) {
  .wp-block-group.has-teal-background-color > .wp-block-group:first-child {
    padding-left: 20px !important;
    padding-right: 20px !important;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
  .wp-block-group.has-teal-background-color > .wp-block-group:first-child > .wp-block-group {
    flex-wrap: wrap;
    gap: 4px 14px;
  }
  .wp-block-group.has-teal-background-color > .wp-block-group:first-child p {
    font-size: 11px !important;
  }
}

/* Generic mobile gutter — keep prose from hugging the viewport edges
   inside full/wide groups that don't set their own padding. */
@media (max-width: 767px) {
  .wp-block-group.alignfull > .wp-block-heading,
  .wp-block-group.alignfull > p,
  .wp-block-group.alignwide > .wp-block-heading,
  .wp-block-group.alignwide > p {
    padding-left: 24px;
    padding-right: 24px;
  }
  /* Sections that wrap their content in columns — pad the section itself */
  .wp-block-group.alignfull:has(> .wp-block-columns),
  section.wp-block-group.alignfull {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Footer — tablet: scale type down so email/address fit on one line in 4-up layout */
@media (min-width: 782px) and (max-width: 1240px) {
  footer h3 {
    font-size: 18px !important;
  }
  footer .wp-block-columns p {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  footer .wp-block-columns p a {
    word-break: keep-all;
    overflow-wrap: normal;
  }
  footer p.has-text-align-center {
    font-size: 14px !important;
  }
}

/* Footer — tighten and center on tablet/mobile */
@media (max-width: 781px) {
  footer.wp-block-group {
    padding-top: 40px !important;
    padding-bottom: 28px !important;
  }
  footer .wp-block-columns {
    gap: 28px !important;
    text-align: center;
  }
  footer .wp-block-columns .wp-block-column {
    flex-basis: 100% !important;
  }
  footer h3 {
    font-size: 20px !important;
    margin-bottom: 6px !important;
  }
  footer .wp-block-columns p {
    font-size: 17px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }
  /* Email address: keep on one line on mobile */
  footer .wp-block-columns p a[href^="mailto:"] {
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    display: inline-block;
    max-width: 100%;
  }
  footer .wp-block-social-links {
    justify-content: center !important;
  }
  footer .wp-block-spacer {
    height: 20px !important;
  }
  footer p.has-text-align-center {
    font-size: 14px !important;
  }
}

/* Footer email — shrink on very narrow viewports so it still fits on one line */
@media (max-width: 380px) {
  footer .wp-block-columns p a[href^="mailto:"] {
    font-size: 15px !important;
  }
}
@media (max-width: 340px) {
  footer .wp-block-columns p a[href^="mailto:"] {
    font-size: 13px !important;
  }
}

/* Responsive video embeds (YouTube etc.) — force iframe to fit viewport on mobile.
   WP's own responsive embed CSS only kicks in if `wp-embed-responsive` is on <body>;
   without it, oEmbed iframes keep their 560x315 inline attrs and overflow. */
.wp-block-embed {
  max-width: 100%;
}
.wp-block-embed .wp-block-embed__wrapper {
  max-width: 100%;
}
.wp-block-embed iframe {
  max-width: 100%;
  display: block;
}
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mobile: shrink spacer blocks ~90% (footer keeps its own override above) */
@media (max-width: 767px) {
  .wp-block-spacer {
    height: 6px !important;
    min-height: 0 !important;
  }
  /* Tighten oversized vertical padding on full-bleed sections */
  .wp-block-group[style*="padding-top:80px"],
  .wp-block-group[style*="padding-top:60px"] {
    padding-top: 24px !important;
  }
  .wp-block-group[style*="padding-bottom:80px"],
  .wp-block-group[style*="padding-bottom:60px"] {
    padding-bottom: 24px !important;
  }
}

/* About Us — director/staff cards: smaller body text, tighter line-height */
.bpsf-team-grid .wp-block-columns .wp-block-column p {
  font-size: 14px !important;
  line-height: 1.4 !important;
}
.bpsf-team-grid .wp-block-columns .wp-block-column h4 {
  font-size: 18px !important;
  margin-bottom: 6px !important;
}

/* Subhead block styles for core/heading — registered in functions.php */
.wp-block-heading.is-style-subhead-1,
.wp-block-heading.is-style-subhead-2,
.wp-block-heading.is-style-subhead-3 {
  font-family: var(--wp--preset--font-family--cal-sans, 'Cal Sans', sans-serif) !important;
  font-weight: 400 !important;
  color: #116BBC !important;
  text-transform: uppercase;
}
.wp-block-heading.is-style-subhead-1 {
  font-size: 34px !important;
  line-height: 34px !important;
  letter-spacing: 2.38px;
}
.wp-block-heading.is-style-subhead-2 {
  font-size: 25px !important;
  line-height: 25px !important;
  letter-spacing: 1.75px;
}
.wp-block-heading.is-style-subhead-3 {
  font-size: 20px !important;
  line-height: 20px !important;
  letter-spacing: 1.4px;
}

/* Responsive heading sizes (theme.json sets fixed desktop sizes for h1/h2/h3) */
@media (max-width: 980px) {
  h1.wp-block-heading:not([style*="font-size"]),
  .wp-block-post-title h1:not([style*="font-size"]) { font-size: 48px; line-height: 1.1; }
  h2.wp-block-heading:not([style*="font-size"]) { font-size: 40px; line-height: 1.15; }
  h3.wp-block-heading:not([style*="font-size"]) { font-size: 26px; line-height: 1.3; }
}
@media (max-width: 767px) {
  h1.wp-block-heading:not([style*="font-size"]),
  .wp-block-post-title h1:not([style*="font-size"]) { font-size: 36px; line-height: 1.15; }
  h2.wp-block-heading:not([style*="font-size"]) { font-size: 30px; line-height: 1.2; }
  h3.wp-block-heading:not([style*="font-size"]) { font-size: 22px; line-height: 1.3; }
}
@media (max-width: 479px) {
  h1.wp-block-heading:not([style*="font-size"]),
  .wp-block-post-title h1:not([style*="font-size"]) { font-size: 30px; }
  h2.wp-block-heading:not([style*="font-size"]) { font-size: 26px; }
}