/*
 * layout/footer.css — the site footer template part (parts/footer.html).
 *
 * Root class: .fcs-footer
 * Background: navy (#003b70), text: white (#ffffff)
 */

.fcs-footer {
  background-color: #003b70 !important;
  color: #ffffff !important;
}

.fcs-footer a:where(:not(.wp-element-button)) {
  color: #ffffff;
  text-decoration: none;
}

.fcs-footer a:where(:not(.wp-element-button)):hover,
.fcs-footer a:where(:not(.wp-element-button)):focus-visible {
  color: #fbbc05;
}

/*
 * Animated underline on footer links.
 *
 * Replaces an instant text-decoration: underline on hover with the same sweep
 * used by the header nav and site buttons — scaleX with a transform-origin
 * flip, entering from the left and leaving to the right.
 *
 * inline-block is required for the bar to span the text rather than the flex
 * row that contains it. Safe here because every footer link is a short,
 * single-line label; do not extend this to links that can wrap.
 *
 * The app-store badges are excluded: they are images, and an underline beneath
 * a PNG badge reads as a rendering fault. base/reset.css zeroes the transition
 * under prefers-reduced-motion.
 *
 * The bar is pinned white, not currentcolor. Footer links turn yellow
 * (#fbbc05) on hover, which is the exact moment the bar appears, so
 * currentcolor would render it yellow every time. White matches the links'
 * resting state and keeps the header and footer navs consistent.
 */
.fcs-footer a:where(:not(.wp-element-button, .fcs-footer__app-badge a)) {
  position: relative;
  display: inline-block;
}

.fcs-footer a:where(:not(.wp-element-button, .fcs-footer__app-badge a))::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: var(--fcs-underline-size);
  background-color: #ffffff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--fcs-sweep-link);
}

.fcs-footer a:where(:not(.wp-element-button, .fcs-footer__app-badge a)):hover::after,
.fcs-footer a:where(:not(.wp-element-button, .fcs-footer__app-badge a)):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/*
 * Figma's footer container is max-width 1280px with 20px side padding, i.e. a
 * 1240px measure — the same as theme.json's wideSize. Expressed the same way
 * here so the gutter survives below 1280px instead of the text hitting the
 * viewport edge.
 */
.fcs-footer__inner {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-inline: 20px !important;
  gap: 24px !important;
  text-align: center !important;
  align-items: center !important;
}

/*
 * Footer navigation — top row of 8 links.
 *
 * Scoped by POSITION (any .wp-block-navigation inside .fcs-footer), not by the
 * .fcs-footer__nav class. A navigation created in wp-admin is its own
 * wp_navigation post and carries no theme class, so a class-only selector
 * styles the one in the template part and silently misses every other one —
 * which is how a duplicated menu ends up with black text and a hamburger.
 *
 * .fcs-footer__nav is kept in the selector list so an explicitly-classed block
 * still matches wherever it sits.
 */
.fcs-footer .wp-block-navigation,
.fcs-footer__nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
  justify-content: center !important;
  width: 100%;
}

.fcs-footer .wp-block-navigation ul,
.fcs-footer .wp-block-navigation .wp-block-navigation__container,
.fcs-footer__nav ul,
.fcs-footer__nav .wp-block-navigation__container {
  display: flex !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.fcs-footer .wp-block-navigation a,
.fcs-footer__nav a {
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  color: #ffffff !important;
  font-weight: 400 !important;
}

/*
 * The footer menu is a flat list of links — never an overlay. Core still
 * renders the responsive container and its open button, and will collapse to a
 * hamburger below its own 600px threshold unless told otherwise. Neutralising
 * it here means a newly-created navigation behaves like the designed one
 * without the editor having to set overlayMenu:"never" by hand.
 */
.fcs-footer .wp-block-navigation__responsive-container-open,
.fcs-footer .wp-block-navigation__responsive-container-close {
  display: none !important;
}

.fcs-footer .wp-block-navigation__responsive-container {
  display: flex !important;
  position: static !important;
  width: 100%;
  background-color: transparent !important;
  padding: 0 !important;
}

.fcs-footer .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
  display: flex !important;
  width: 100%;
}

/* Divider line */
.fcs-footer .wp-block-separator {
  width: 100% !important;
  border: none !important;
  border-top: 1px solid #ffffff !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
  padding: 0 !important;
}

/* Campus blocks section */
.fcs-footer__campuses {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  align-items: center !important;
  width: 100% !important;
}

.fcs-footer__campus {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

.fcs-footer__campus-name {
  font-family: var(--wp--preset--font-family--body) !important;
  margin: 0 0 8px 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

.fcs-footer__campus p {
  margin: 0 0 8px 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Social icons row */
.fcs-footer__social {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.fcs-footer__social-icon {
  margin: 0 !important;
}

.fcs-footer__social-icon img {
  width: 32px !important;
  height: 32px !important;
  display: block;
  opacity: 1;
  transition: opacity 180ms ease;
}

.fcs-footer__social-icon:hover img,
.fcs-footer__social-icon:focus-within img {
  opacity: 0.7;
}

/* App download section */
.fcs-footer__app-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: center !important;
}

/*
 * line-height is declared explicitly, not inherited.
 *
 * This is an <h3>, so it picks up theme.json's global heading line-height.
 * That global value is now 1.2 (Figma's H3 is 30px/36px), which at this
 * element's 24px would render 28.8px and shift the badges below it. Pinning
 * 32px here keeps the footer matching the signed-off Figma frame regardless of
 * what the global scale does later.
 */
.fcs-footer__app-heading {
  font-family: var(--wp--preset--font-family--body) !important;
  margin: 0 !important;
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 600 !important;
}

.fcs-footer__app-badges {
  display: flex !important;
  gap: 12px !important;
}

.fcs-footer__app-badge {
  margin: 0 !important;
}

.fcs-footer__app-badge a {
  display: block;
  text-decoration: none;
}

.fcs-footer__app-badge img {
  display: block;
  width: 120px !important;
  height: 40px !important;
  transition: opacity 180ms ease;
}

.fcs-footer__app-badge:hover img,
.fcs-footer__app-badge:focus-within img {
  opacity: 0.8;
}

/*
 * Non-discrimination statement.
 *
 * The 24px below it is the gap to the copyright line (Figma: 24px between
 * every block in the "Copyright & Legal" stack). It is a margin rather than a
 * parent gap because __inner's own gap is also 24px — expressing it here keeps
 * the two independent if one of them changes.
 */
.fcs-footer__statement {
  margin: 0 0 24px 0 !important;
  font-size: 12px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.8);
}

/*
 * Legal footer row — a single centred line that wraps.
 *
 * Figma renders it as "© … • Privacy Policy • Accessibility Statement", the
 * bullets being their own text layers. Here they are ::before pseudo-elements
 * instead, so they are decorative: a screen reader announces three items, not
 * two stray bullet characters. 8px each side matches the design's 8px gap.
 */
.fcs-footer__legal {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding-top: 0;
  font-size: 12px;
  line-height: 20px;
}

.fcs-footer__legal p {
  margin: 0 !important;
}

.fcs-footer__legal p + p::before {
  content: '\2022';
  margin-inline-end: 8px;
  color: currentColor;
}

.fcs-footer__legal a {
  color: #ffffff;
}

.fcs-footer__legal a:hover,
.fcs-footer__legal a:focus-visible {
  color: #fbbc05;
}

/*
 * The legal links' underline follows the text colour, unlike the nav's.
 *
 * These read as prose links rather than navigation, so the bar going yellow
 * with the label is the correct behaviour — a white bar under yellow text
 * looks like a rendering fault. The nav above pins its bar white on purpose,
 * because there the underline is a hover affordance on a row of peers, not
 * part of the link's own styling.
 */
.fcs-footer__legal a::after {
  background-color: currentcolor;
}

/* Mobile responsive */
@media (max-width: 767px) {
  /*
   * Figma m-Footer: 56px top/bottom (desktop is 80px, set on the block's own
   * padding attribute in parts/footer.html). That attribute renders as an
   * inline style, so overriding it here needs !important — no selector
   * outranks an inline style.
   */
  .fcs-footer {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Figma m-Footer: "Download Our App" steps down to 20px/28px. */
  .fcs-footer__app-heading {
    font-size: 20px !important;
    line-height: 28px !important;
  }

  /* Side padding is 20px at every width (set on the base rule) — the design
   * uses the same gutter on mobile, so it is not overridden here. */
  .fcs-footer__inner {
    text-align: center !important;
    align-items: center !important;
  }

  /*
   * Navigation: two equal columns (Figma m-Footer 10063:13471).
   *
   * The grid is declared on the <ul> that actually holds the <li> items, not
   * on .fcs-footer__nav. An earlier version put it on the wrapper and relied
   * on `display: contents` to promote the items into the grid — that is
   * unreliable and left the links in a single column.
   *
   * Figma: 20px between columns, 24px between rows, 16px text.
   */
  .fcs-footer .wp-block-navigation,
  .fcs-footer__nav {
    display: block !important;
    width: 100% !important;
  }

  .fcs-footer .wp-block-navigation__responsive-container,
  .fcs-footer .wp-block-navigation__responsive-container-content {
    display: block !important;
    width: 100% !important;
  }

  .fcs-footer .wp-block-navigation ul,
  .fcs-footer .wp-block-navigation .wp-block-navigation__container,
  .fcs-footer__nav ul,
  .fcs-footer__nav .wp-block-navigation__container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 20px !important;
    row-gap: 24px !important;
    width: 100% !important;
  }

  .fcs-footer .wp-block-navigation li,
  .fcs-footer__nav li {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  .fcs-footer .wp-block-navigation a,
  .fcs-footer__nav a {
    display: block !important;
    width: 100% !important;
    font-size: 16px !important;
    line-height: 24px !important;
  }

  /*
   * No sliding underline on the mobile nav.
   *
   * These links are display:block at 100% width inside the two-column grid, so
   * the bar would span the whole grid cell rather than the label — it reads as
   * a rule between columns, not as a hover affordance. The colour change is
   * enough here. Links elsewhere in the footer keep the animation.
   */
  .fcs-footer .wp-block-navigation a::after,
  .fcs-footer__nav a::after {
    content: none;
  }

  /* Campuses: centered stack on mobile */
  .fcs-footer__campuses {
    flex-direction: column !important;
    gap: 24px !important;
    align-items: center !important;
    width: 100% !important;
  }

  .fcs-footer__campus {
    text-align: center !important;
  }

  /* Social icons: centered on mobile */
  .fcs-footer__social {
    justify-content: center !important;
    width: 100% !important;
  }

  /* App section: centered on mobile */
  .fcs-footer__app-section {
    align-items: center !important;
    width: 100% !important;
  }

  .fcs-footer__app-badges {
    justify-content: center !important;
    width: 100% !important;
  }

  /* Statement: centered on mobile */
  .fcs-footer__statement {
    text-align: center !important;
    width: 100% !important;
  }

  /* Legal row: already centred and bullet-separated at every width — only the
   * full-width constraint is mobile-specific, so it can wrap cleanly. */
  .fcs-footer__legal {
    width: 100% !important;
    text-align: center;
  }
}