/* =============================================================
   Wellness Mama – Drupal 11 Site Footer CSS
   Matches the 4-column footer layout from the reference design.
   ============================================================= */

/* ── CSS Custom Properties ────────────────────────────────── */
:root {
  --wm-color-primary:       #0f766e;  /* teal green            */
  --wm-color-secondary:     #ecf4f4;  /* light teal-grey bg    */
  --wm-color-contrast:      #0a0a0a;  /* near-black text       */
  --wm-color-tertiary:      #0d9488;  /* mid teal – button     */
  --wm-color-base:          #ffffff;  /* white                 */
  --wm-color-link:          #1a1a1a;  /* default link color    */
  --wm-color-border:        #0f766e;  /* top border teal       */

  --wm-font-outfit:         Outfit, sans-serif;
  --wm-font-freight:        FreightText, serif;

  --wm-font-size-tiny:      16px;   /* --tiny  */
  --wm-font-size-xs:        18px;   /* --x-small */
  --wm-font-size-small:     20px;   /* --small */

  --wm-fw-regular:          400;
  --wm-fw-medium:           500;
  --wm-fw-bold:             700;

  --wm-lh-body:             1.75;
  --wm-lh-medium:           1.5;

  --wm-spacing-xs:          20px;
  --wm-spacing-small:       30px;
  --wm-spacing-medium:      40px;
  --wm-spacing-large:       60px;
}

/* ── Footer Shell ─────────────────────────────────────────── */
footer.site-footer {
  background-color: var(--wm-color-secondary);
  border-top: 2px solid var(--wm-color-primary);
  padding-top:    var(--wm-spacing-large);
  padding-bottom: var(--wm-spacing-large);
  width: 100%;
  box-sizing: border-box;
}

/* ── Footer Region – 4-column grid ───────────────────────── */
footer.site-footer .region.region-footer {
  display:               grid;
  grid-template-columns: repeat(3, 1fr) 1.4fr; /* 3 menus + wider signup */
  gap:                   var(--wm-spacing-medium);
  max-width:             1240px;
  margin-left:           auto;
  margin-right:          auto;
  padding-left:          var(--wm-spacing-xs);
  padding-right:         var(--wm-spacing-xs);
  box-sizing:            border-box;
  align-items:           start;
}

/* ═══════════════════════════════════════════════════════════
   MENU BLOCKS  (Content / Policies / Support)
   ═══════════════════════════════════════════════════════════ */

footer.site-footer .block-menu {
  display: flex;
  flex-direction: column;
}

/* ── Column Headings (Content / Policies / Support) ──────── */
footer.site-footer .block-menu h2 {
  font-family:     var(--wm-font-outfit);
  font-size:       var(--wm-font-size-small);   /* 20px */
  font-weight:     var(--wm-fw-bold);
  color:           var(--wm-color-contrast);
  margin:          0 0 14px 0;
  padding:         0;
  line-height:     var(--wm-lh-medium);
  letter-spacing:  -0.01em;
}

/* ── Menu List ────────────────────────────────────────────── */
footer.site-footer .block-menu ul.menu {
  list-style:    disc;
  margin:        0;
  padding-left:  20px;   /* indent for bullet */
}

/* ── Menu Items ───────────────────────────────────────────── */
footer.site-footer .block-menu ul.menu li.menu-item {
  margin-bottom: 6px;
  padding:       0;
}

footer.site-footer .block-menu ul.menu li.menu-item:last-child {
  margin-bottom: 0;
}

/* ── Menu Links ───────────────────────────────────────────── */
footer.site-footer .block-menu ul.menu li.menu-item a {
  font-family:          var(--wm-font-outfit);
  font-size:            var(--wm-font-size-tiny);   /* 16px */
  font-weight:          var(--wm-fw-regular);
  color:                var(--wm-color-link);
  text-decoration:      underline;
  text-decoration-color: var(--wm-color-link);
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  line-height:          var(--wm-lh-medium);
  transition:           color 0.2s ease, text-decoration-color 0.2s ease;
}

/* ── Hover / Focus ────────────────────────────────────────── */
footer.site-footer .block-menu ul.menu li.menu-item a:hover,
footer.site-footer .block-menu ul.menu li.menu-item a:focus {
  color:                 var(--wm-color-primary);
  text-decoration-color: var(--wm-color-primary);
  outline:               none;
}

footer.site-footer .block-menu ul.menu li.menu-item a:focus-visible {
  outline:        2px solid var(--wm-color-primary);
  outline-offset: 2px;
  border-radius:  2px;
}

/* ── Active Trail ─────────────────────────────────────────── */
footer.site-footer .block-menu ul.menu li.menu-item--active-trail a {
  color:                 var(--wm-color-primary);
  text-decoration-color: var(--wm-color-primary);
}

/* ═══════════════════════════════════════════════════════════
   NEWSLETTER / SIMPLENEWS BLOCK
   ═══════════════════════════════════════════════════════════ */

footer.site-footer .block-simplenews {
  display:        flex;
  flex-direction: column;
}

/* ── "Join the Tribe" Heading ─────────────────────────────── */
footer.site-footer .block-simplenews h2 {
  font-family:    var(--wm-font-outfit);
  font-size:      var(--wm-font-size-small);   /* 20px */
  font-weight:    var(--wm-fw-bold);
  color:          var(--wm-color-contrast);
  margin:         0 0 12px 0;
  padding:        0;
  line-height:    var(--wm-lh-medium);
  letter-spacing: -0.01em;
}

/* ── Form wrapper ─────────────────────────────────────────── */
footer.site-footer .block-simplenews form {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  width:          100%;
}

/* ── "Stay informed" message ─────────────────────────────── */
footer.site-footer .block-simplenews #edit-message {
  font-family:  var(--wm-font-outfit);
  font-size:    var(--wm-font-size-tiny);
  color:        var(--wm-color-contrast);
  line-height:  var(--wm-lh-body);
  margin:       0 0 4px;
}

/* ── Email Label (visually present in this theme) ─────────── */
footer.site-footer .block-simplenews .form-item__label {
  font-family:  var(--wm-font-outfit);
  font-size:    var(--wm-font-size-tiny);
  font-weight:  var(--wm-fw-medium);
  color:        var(--wm-color-contrast);
  margin-bottom: 4px;
  display:      block;
}

/* ── Description text under input ────────────────────────── */
footer.site-footer .block-simplenews .form-item__description {
  display: none;   /* hide "The subscriber's email address." helper text */
}

/* ── Email Input ──────────────────────────────────────────── */
footer.site-footer .block-simplenews input[type="email"] {
  font-family:   var(--wm-font-outfit) !important;
  font-size:     var(--wm-font-size-tiny) !important;
  font-weight:   var(--wm-fw-regular) !important;
  color:         var(--wm-color-contrast) !important;
  background:    var(--wm-color-base) !important;
  border:        1px solid var(--wm-color-primary) !important;
  border-radius: 0 !important;
  padding:       12px 16px !important;
  width:         100% !important;
  box-sizing:    border-box !important;
  line-height:   1.4 !important;
  transition:    border-color 0.2s ease, filter 0.2s ease;
}

footer.site-footer .block-simplenews input[type="email"]::placeholder {
  color:   var(--wm-color-contrast) !important;
  opacity: 0.45 !important;
  font-size: var(--wm-font-size-tiny) !important;
}

footer.site-footer .block-simplenews input[type="email"]:focus {
  filter:  brightness(97%);
  outline: none;
}

/* ── Subscribe Button ─────────────────────────────────────── */
footer.site-footer .block-simplenews input[type="submit"],
footer.site-footer .block-simplenews .button--primary {
  font-family:      var(--wm-font-outfit) !important;
  font-size:        var(--wm-font-size-tiny) !important;
  font-weight:      var(--wm-fw-medium) !important;
  color:            var(--wm-color-base) !important;
  background-color: var(--wm-color-tertiary) !important;   /* #0d9488 */
  border:           none !important;
  border-radius:    0 !important;
  padding:          13px 20px !important;
  width:            100% !important;
  cursor:           pointer !important;
  text-align:       center !important;
  letter-spacing:   0.02em;
  text-transform:   none;
  transition:       background-color 0.2s ease, filter 0.2s ease;
  line-height:      1.4 !important;
}

footer.site-footer .block-simplenews input[type="submit"]:hover,
footer.site-footer .block-simplenews .button--primary:hover {
  background-color: var(--wm-color-primary) !important;   /* slightly darker on hover */
  filter:           brightness(105%);
}

/* ── Form actions wrapper ─────────────────────────────────── */
footer.site-footer .block-simplenews .form-actions {
  margin: 0;
}

/* ── Subscriptions field (hidden newsletters selector) ────── */
footer.site-footer #edit-subscriptions-wrapper {
  display: none;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* Tablet – 2-column grid */
@media (max-width: 900px) {
  footer.site-footer .region.region-footer {
    grid-template-columns: 1fr 1fr;
    gap: var(--wm-spacing-small);
  }

  /* Newsletter spans full width on tablet */
  footer.site-footer .block-simplenews {
    grid-column: 1 / -1;
  }
}

/* Mobile – single column */
@media (max-width: 540px) {
  footer.site-footer .region.region-footer {
    grid-template-columns: 1fr;
    gap: var(--wm-spacing-xs);
  }

  footer.site-footer .block-simplenews {
    grid-column: auto;
  }

  footer.site-footer {
    padding-top:    var(--wm-spacing-medium);
    padding-bottom: var(--wm-spacing-medium);
  }
}