/* =============================================================
   barrio_npm_prototype — site footer.
   Own rules for .np-site-footer* — supersedes the contrib
   bootstrap_barrio/css/components/site-footer.css treatment on
   this surface. Retires cascade fights over `.site-footer`
   classes (audit: documentation/site-footer.md, implementation:
   documentation/site-footer-option-c-plan.md).

   Class contract:
     .np-site-footer                 outer wrapper on every page
     .np-site-footer.np-front-footer front variant (page--front.html.twig)
     .np-site-footer__top            regions container (footer_1..4)
     .np-site-footer__sitemap        wrapper around footer_1 (spans full width)
     .np-site-footer__bottom         regions container (footer_5)
   ============================================================= */

/* --- Knobs — tune these while iterating on visual design ---
   All visually-tunable values live here as :root custom properties
   so the design can be dialled without editing individual rules.
   Change a value, drush cr, hard-reload. When a design lands, either
   leave the knobs in place (future-tuning stays cheap) or bake the
   final values into the rules below and retire the knob. */
:root {
  --np-site-footer-bg:          transparent;   /* try #fff or #f1ece1 for opaque */
  --np-site-footer-fg:          #2a2a2a;
  --np-site-footer-link:        var(--np-link);
  --np-site-footer-heading-fg:  #1a1a1a;
  --np-site-footer-heading-transform: uppercase;
  --np-site-footer-border:      rgba(0, 0, 0, .12);
  --np-site-footer-block-border: rgba(0, 0, 0, .08);
  --np-site-footer-padding-y:   35px;
  --np-site-footer-bottom-gap:  30px;
}

/* --- Container --- */
.np-site-footer {
  padding: var(--np-site-footer-padding-y) 0;
  background: var(--np-site-footer-bg);
  color: var(--np-site-footer-fg);
  font-family: inherit;
}

/* --- Top row — CSS-grid layout for the region row. Contrib's float-
   based 24% + padding math retired; grid handles column widths and
   gaps declaratively. Stack at mobile, 2-col at tablet, 4-col at
   desktop. --- */
.np-site-footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .np-site-footer__top {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .np-site-footer__top {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Sitemap region — full-width span.
   The content_menu_block:block_2 sitemap block placed in footer_1
   needs to render at full container width so its internal BS5 grid
   (col-md-6 col-lg-3 on each item) can lay out as a 4x2 card grid.
   Without this, the block would sit in a single 1/4-width cell and
   squish the cards to unusable widths. `1 / -1` spans from line 1
   to line -1 (last line) — CSS-grid shorthand for "span all
   columns". The wrapping .np-site-footer__sitemap div is emitted
   by page.html.twig + page--front.html.twig around footer_1
   specifically. --- */
.np-site-footer__sitemap {
  grid-column: 1 / -1;
}

/* --- Region children (headings, text, links inside placed blocks) --- */
.np-site-footer h2 {
  margin: 0 0 8px;
  padding-bottom: 4px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--np-site-footer-heading-fg);
  text-transform: var(--np-site-footer-heading-transform);
  border-bottom: 1px solid var(--np-site-footer-border);
}
.np-site-footer .content { font-size: 0.9rem; line-height: 1.5; }
.np-site-footer .content a,
.np-site-footer .content a.is-active {
  color: var(--np-site-footer-link);
}
.np-site-footer .content a:hover,
.np-site-footer .content a:focus {
  color: var(--np-site-footer-link);
  text-decoration: underline;
}
.np-site-footer .menu-item { padding: 0; }
.np-site-footer .content ol:not(.menu),
.np-site-footer .content ul:not(.menu) { padding-left: 1.4em; }

/* --- Block wrapper (Drupal wraps every placed block in <div class="block ...">) --- */
.np-site-footer .block {
  margin: 12px 0;
  /* Border removed 2026-08-18 with the frontpage-pivot ship — footer blocks
     now read as clean stacked chrome without the extra outline weight. */
  /* border: 1px solid var(--np-site-footer-block-border); */
  padding: 10px;
}

/* --- Bottom row --- */
.np-site-footer__bottom {
  margin-top: var(--np-site-footer-bottom-gap);
  padding-top: 16px;
  border-top: 1px solid var(--np-site-footer-border);
  letter-spacing: 0.2px;
}
.np-site-footer__bottom .block { margin: 0.5em 0; border: none; padding: 0; }

/* --- Bottom-row inline nav (if a menu block is placed in footer_fifth) --- */
.np-site-footer__bottom .menu {
  display: flex; flex-wrap: wrap; gap: 0;
  padding: 0; margin: 0; list-style: none;
}
.np-site-footer__bottom .menu-item a {
  display: block;
  padding: 0 12px;
  border-right: 1px solid var(--np-site-footer-border);
}
.np-site-footer__bottom .menu-item:first-child a { padding-left: 0; }
.np-site-footer__bottom .menu-item:last-child a { padding-right: 0; border-right: none; }

/* --- Front-page modifier (BEM style — Q1 decision, §8) ---
   Front variant carries `.np-site-footer.np-front-footer` on the wrapper.
   Base `.np-site-footer` rules above apply to both variants; anything
   front-specific goes here. Starter empty — fill during visual iteration.
   Typical use cases: different background (e.g. transparent so the front
   hero bleeds through), tighter padding (the front's contact section
   provides top spacing), or hiding elements (`display: none` on
   `.np-site-footer__top` if the front should skip the region grid). */
.np-front-footer {
  /* e.g. background: transparent; padding-top: 0; */
}