/* ==========================================================================
   09 · FOOTER — footer menu, bottom bar, Instagram feed
   ========================================================================== */

/* The top strip is translucent, so everything behind it has to be clear:
   the holder painted an opaque ground, and the .edgtf-container nested
   inside applied the same colour a second time — the same double layer
   that made the title strip read as two tones. */

footer .edgtf-footer-top-holder {
  background-color: transparent !important;
}

footer .edgtf-footer-top {
  background-color: var(--sm-footer-top) !important;
}

footer .edgtf-footer-top .edgtf-container,
footer .edgtf-footer-top .edgtf-container-inner {
  background-color: transparent !important;
}

/* --- Back to top ----------------------------------------------------------
   The control carried the last piece of the old design: a hard-edged black
   square. It now speaks the button language — filled, with the bevelled
   corner. No outline here: at 50px the offset line would sit closer to the
   shape than it does on a panel and read as a second, wobbly edge.

   The rule targets the inner span, not the link. The theme puts background
   and icon there; the anchor only carries the fixed positioning, so styling
   it would have done nothing.
   ------------------------------------------------------------------------ */

#edgtf-back-to-top > span {
  background-color: var(--sm-fill) !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 12px 0 12px 12px !important;
  color: var(--sm-white) !important;
  transition: background-color .15s ease-out !important;
}

#edgtf-back-to-top:hover > span {
  background-color: var(--sm-fill-hover) !important;
}

/* ==========================================================================
   09 · FOOTER
   --------------------------------------------------------------------------
   The page is framed by four surfaces, and the colour follows the function
   rather than the position:

     Header        --sm-veil-header   closes the page at the top
     Title strip   --sm-band          edge of the content
     ── content ──
     Footer top    --sm-band          edge of the content
     Footer bottom --sm-veil-header   closes the page at the bottom

   That symmetry has one consequence worth knowing: type direction flips
   inside the footer. Dark on sand in the upper band, light on the header
   tone in the lower one — twenty pixels apart, and deliberate.
   ========================================================================== */

/* The top strip is translucent, so everything behind it has to be clear:
   the holder painted an opaque ground, and the .edgtf-container nested
   inside applied the same colour a second time — the same double layer
   that made the title strip read as two tones. */

footer .edgtf-footer-top-holder {
  background-color: transparent !important;
}

footer .edgtf-footer-top {
  background-color: var(--sm-footer-top) !important;
}

footer .edgtf-footer-top .edgtf-container,
footer .edgtf-footer-top .edgtf-container-inner {
  background-color: transparent !important;
}

footer .edgtf-footer-bottom-holder {
  background-color: var(--sm-footer-bottom) !important;
}

/* --- Upper band: dark type on sand ---------------------------------------- */

footer .edgtf-footer-top * {
  color: var(--sm-on-sand) !important;
}

footer .edgtf-footer-top .wp-social-link a svg {
  fill: var(--sm-on-sand-icon) !important;
  transition: fill .15s ease-out;
}

footer .edgtf-footer-top .wp-social-link a:hover svg {
  fill: var(--sm-fill) !important;
}

footer .edgtf-footer-top li.wp-social-link {
  color: var(--sm-on-sand-icon) !important;
}

/* --- Lower band: light type on the header tone ---------------------------- */

footer .edgtf-footer-bottom-holder * {
  color: var(--sm-text) !important;
}

/* --- Social icons --------------------------------------------------------- */

footer .wp-block-social-link-anchor,
footer .wp-social-link a {
  width: 40px !important;
  height: 40px !important;
  font-size: 40px !important;
}

footer .wp-social-link svg {
  width: 30px !important;
  height: 30px !important;
}

footer li.wp-social-link {
  padding-left: 12px !important;
}

/* --- Compactness -----------------------------------------------------------
   The footer measured 296px for five icons and two short lines. It is now
   159. 40px is the floor for the icons — below that they get hard to hit on
   a touch screen.

   The lower band runs as one line: copyright first, then the menu. The 12px
   of bottom padding on each menu item came from the time the menu wrapped
   over several rows; in one line it was pure dead space and pushed the
   links 6px above the copyright's centre line.
   ------------------------------------------------------------------------ */

footer .edgtf-footer-top:not(.edgtf-footer-top-full) .edgtf-container-inner {
  padding: 10px 0 !important;
}

footer .edgtf-footer-bottom-holder {
  padding: 12px 0 !important;
}

footer .edgtf-footer-bottom-holder .edgtf-column-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px 28px !important;
}

footer .edgtf-footer-bottom-holder .widget {
  margin: 0 !important;
}

footer .edgtf-footer-bottom-holder .widget_block { order: 1 !important; }
footer .edgtf-footer-bottom-holder .widget_nav_menu { order: 2 !important; }

footer .edgtf-footer-bottom-holder .widget_nav_menu,
footer .edgtf-footer-bottom-holder .widget_block,
footer .edgtf-footer-bottom-holder .menu-footer-container {
  display: flex !important;
  align-items: center !important;
}

footer .edgtf-footer-bottom-holder ul.menu {
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

footer .edgtf-footer-bottom-holder ul.menu li {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

footer .edgtf-footer-bottom-holder p {
  margin: 0 !important;
}

/* --- Bottom bar navigation ------------------------------------------------
   Heavier and in the icon colour, so the menu separates from the copyright
   line below it. Both used to share one tone and read as a single block.

   Note the hover selector repeats the long form. !important does not stop a
   rule from being overridden — it only moves the contest one level up, and
   among important declarations specificity still decides. The short hover
   selector lost against this base rule and the hover silently did nothing,
   which is invisible when reading the file because both rules sit here
   together and look like a matched pair.

   The padding is not cosmetic: as inline elements only the glyphs
   themselves reacted, which at this size is a narrow target.
   ------------------------------------------------------------------------ */

footer .edgtf-footer-bottom-holder a,
footer .edgtf-footer-bottom-holder .widget ul.menu li a {
  display: inline-block !important;
  padding: 8px 14px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--sm-heading) !important;
  text-decoration: none !important;
  transition: color .15s ease-out !important;
}

footer .edgtf-footer-bottom-holder .widget ul.menu li a:hover,
footer .edgtf-footer-bottom-holder a:hover {
  color: var(--sm-link) !important;
  text-decoration: none !important;
}

footer .edgtf-footer-bottom-holder p {
  font-size: 20px !important;
}

/* --- Below 900: the single line gives way -----------------------------------
   Copyright and three menu items stop fitting side by side well before the
   phone widths. Left to flex-wrap they broke apart badly — both blocks kept
   their own width and ended up beside AND below each other, the menu top
   right and the copyright bottom left.

   The threshold sits at 900, not at 680: between those two it was already
   broken. Stacking is the deliberate version — copyright, then the menu
   underneath, each item on its own line. It costs height but every target is
   a full row, and nothing gets cut off at the edge.
   ------------------------------------------------------------------------ */

@media only screen and (max-width: 900px) {
  footer .edgtf-footer-bottom-holder .edgtf-column-inner {
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
  }
  footer .edgtf-footer-bottom-holder .widget {
    width: 100% !important;
    justify-content: center !important;
  }
  footer .edgtf-footer-bottom-holder .menu-footer-container {
    width: 100% !important;
  }
  footer .edgtf-footer-bottom-holder ul.menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }
  footer .edgtf-footer-bottom-holder ul.menu li {
    width: auto !important;
  }
  footer .edgtf-footer-bottom-holder a {
    font-size: 18px !important;
    padding: 10px 12px !important;
  }
  footer .edgtf-footer-bottom-holder p {
    font-size: 18px !important;
  }
  footer .edgtf-footer-top .edgtf-container-inner ul.wp-block-social-links {
    justify-content: center !important;
    width: 100% !important;
  }
}

footer .edgtf-footer-bottom-holder {
  background-color: var(--sm-footer-bottom) !important;
}

footer .edgtf-footer-top:not(.edgtf-footer-top-full) .edgtf-container-inner {
  padding: 24px 0 12px 0 !important;
}

@media only screen and (min-width: 768px) {
  footer .widget ul.menu {
    list-style: none;
    display: flex;
    margin: 0 auto;
    width: auto;
    justify-content: center;
  }
}

footer .widget ul.menu li {
  padding: 0 24px;
}

@media only screen and (max-width: 1024px) {
  footer .widget ul {
    list-style: none;
  }
  .menu-footer-container {
    text-align: center;
  }
}

/* --- Instagram feed ------------------------------------------------------ */

@media only screen and (max-width: 480px) {
  footer .edgtf-instagram-feed.edgtf-col-3 li,
  footer .edgtf-instagram-feed.edgtf-col-4 li,
  footer .edgtf-instagram-feed.edgtf-col-6 li,
  footer .edgtf-instagram-feed.edgtf-col-9 li {
    width: 33.3%;
  }
  footer .edgtf-footer-top:not(.edgtf-footer-top-full) .edgtf-container-inner {
    padding: 0px 0 0px 0 !important;
  }
}