/* ── Footer chrome ─────────────────────────────────────────────────
   Two things Divi has no panel for: a full-viewport-width colour band
   behind a shrink-to-fit menu, and one continuous rule across four
   independent info groups. Everything else about the footer is builder
   settings. Hooks: .urban-smiles-footer-nav (menu module), .eos-footer-grid
   (the info-grid column). */

/* The 100vw band would otherwise be able to introduce a horizontal
   scrollbar; clip it at the footer wrapper, which Divi keeps stable. */
.et-l--footer { overflow-x: clip; }

/* ── Teal band behind the nav items ────────────────────────────────
   Scoped to the menu WRAP, not the section: the logo lives in this same
   menu module and is itself teal, so a section background would swallow
   it. The band is pushed out to the viewport edges from wherever the
   menu happens to sit. */
/* Divi pads menu links 31px top and bottom (measured), which made the
   clickable area nearly 4x the text height, stretched this wrap to 86px,
   and inflated the stacked mobile gap to ~78px instead of the intended
   1rem. Zeroing the vertical padding fixes all three at once. Horizontal
   spacing between items is untouched — that comes from the li's own 11px
   padding, not the anchor. */
.urban-smiles-footer-nav .et-menu > li > a {
  padding-top    : 0 !important;
  padding-bottom : 0 !important;
}

/* The colour is on the real element, not only on ::before, because contrast
   checkers resolve a background by walking the element tree and cannot see
   pseudo-elements — a ::before-only band reports as white-on-white. */
.urban-smiles-footer-nav .et_pb_menu__wrap {
  position   : relative;
  background : var(--darker-teal);
}

/* Extends that band to the viewport edges, with 0.5rem of it above and below
   the link text. */
.urban-smiles-footer-nav .et_pb_menu__wrap::before {
  content     : '';
  position    : absolute;
  top         : -0.5rem;
  bottom      : -0.5rem;
  left        : 50%;
  margin-left : -50vw;
  width       : 100vw;
  background  : var(--darker-teal);
  z-index     : 0;
}

/* keep the links above the band */
.urban-smiles-footer-nav .et_pb_menu__menu { position: relative; z-index: 1; }

/* ── One continuous rule under the four headings (desktop only) ─────
   The four groups are spread with justify-content: space-between, so a
   border on each heading would render as four segments with breaks.

   A CSS-grid version was tried first (groups as `display: contents`, a
   pseudo-element spanning `grid-column: 1 / -1`) and does NOT work here:
   a grid item spanning row 1 occupies every cell in it, so auto-placement
   pushed the headings into extra implicit columns — measured as six
   tracks instead of four, with the line only 980px of the row's 1382px.

   So the flex layout the builder authors is left completely alone, and
   the rule is drawn as one absolutely-positioned line instead. Its offset
   is the heading's own line box (subheading-sm: 1rem x 1.375) plus half
   the groups' 2.25rem rowGap, which lands it centred in the gap between
   each heading and its body. Verified by measurement, not arithmetic
   alone — if subheading-sm's size or line-height changes, re-check it.

   Desktop-only: below 981 the builder stacks this column and the section
   already carries its own border-top. */
@media (min-width: 981px) {
  .eos-footer-grid { position: relative; }

  .eos-footer-grid::before {
    content    : '';
    position   : absolute;
    left       : 0;
    right      : 0;
    top        : calc(1rem * 1.375 + 1.125rem);
    border-top : 1px solid var(--black);
    pointer-events: none;
  }
}

/* ── ≤980px — band off, stacked nav gets its gap ───────────────────
   style.css's baseline .pa-open-mobile-menu block already hides the
   hamburger and turns #menu-footer-menu into a centred column; it just
   doesn't set a gap. */
@media (max-width: 980px) {
  /* Both halves of the band have to go: the stacked links are black here, and
     black on --darker-teal is 2.84:1 — an actual contrast failure. */
  .urban-smiles-footer-nav .et_pb_menu__wrap         { background: transparent; }
  .urban-smiles-footer-nav .et_pb_menu__wrap::before { display: none; }
  #menu-footer-menu { gap: 1rem; }
}


/* Footer nav stacks to a centred column below 980px. */
@media (max-width: 980px) {
  #menu-footer-menu {
    flex-direction : column !important;
    align-items    : center;
  }
}