/*
Theme Name:     Hestia Child (Held In Humanity)
Template:       hestia
Version:        1.0.0
Description:    Accessibility child theme for heldinhumanity. Owns the WAI-ARIA
                disclosure-nav focus ring and — via functions.php — the
                disclosure ARIA overrides, so a Hestia parent update can no
                longer silently erase the site's accessibility work.
                See README.md (developer) and OWNER-GUIDE.md (site owner).
*/

/*
 * 1. Parent stylesheet.
 * When a child theme is active, Hestia enqueues THIS file (get_stylesheet())
 * instead of the parent's — so we must pull the parent's in here, or the
 * whole site loses its styling. A Hestia update changes what this import
 * loads, which is intended (we get their new base CSS).
 */
@import url("../hestia/style.css");

/*
 * 2. Focus-ring ownership (added by this project 2026-09-17, moved from
 *    the parent's style.css to this child on 2026-09-19 — ACCESSIBILITY.md
 *    entry #2).
 *
 * Why re-declared here instead of relying on the @import: a Hestia update
 * restores the parent's original CSS — the global `outline: 0 !important`
 * rule plus specific `outline: none` kills on nav/top-bar/header-widget
 * links — which would strip the double-ring focus indicator again. The
 * rules below are declared in the child, which always loads AFTER the
 * imported parent sheet (source-order win, all !important), so the ring
 * and the outline-rule overrides are guaranteed present on every parent
 * update, without editing the parent.
 *
 * Part A — undo the parent's outline suppression.
 */
:focus, :active, ::-moz-focus-inner {
  /* parent sets: outline: 0 !important; — re-enabled (WCAG 2.4.7).
     Our :focus-visible rule below provides the double-ring indicator. */
  outline: auto !important;
}
/* Parent kills the outline on these (Material Kit default). Re-enabled
   so keyboard focus is visible — WCAG 2.4.7. */
.form-group.is-focused .form-control {
  outline: auto !important;
}
.open > .btn.btn-default.dropdown-toggle,
.open > .btn.btn-default.dropdown-toggle:focus,
.open > .btn.btn-default.dropdown-toggle:hover {
  outline: auto !important;
}
.header-widgets-wrapper ul li a:hover, .header-widgets-wrapper ul li a:focus {
  outline: auto !important;
}
.hestia-top-bar ul li a:hover, .hestia-top-bar ul li a:focus {
  outline: auto !important;
}

/* Part B — the double-ring indicator itself. */
/* Focus ring color tokens. Change these to retheme the focus ring
   site-wide without touching the individual rules. */
:root {
  --focus-ring-inner: #ffb300;
  --focus-ring-outer: #000;
}

/* Double-ring keyboard focus indicator (Piccalili pattern).
   Uses box-shadow to layer four concentric squares:
     1. Element background (blends in)
     2. Inner ring — var(--focus-ring-inner), amber #ffb300
     3. Element background (blends in, creates visible gap between rings)
     4. Outer ring — var(--focus-ring-outer), black #000

   On dark backgrounds: amber inner ring has 9.7:1 contrast.
   On light backgrounds: black outer ring has 21:1 contrast.
   The warm amber + black pairing reads as two clearly distinct rings
   on every background in the site's palette (navy, cream, white, purple).
   The gap between them makes the double-ring structure clearly visible.

   See: https://piccalil.li/blog/taking-a-shot-at-the-double-focus-ring-problem-using-modern-css/
   See: https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html */

/* Amber + black double ring. Colors are set via --focus-ring-inner
   and --focus-ring-outer custom properties at :root. Placed last in
   file to beat Bootstrap/Elementor/SiteOrigin box-shadow overrides. */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus,
a.btn:focus,
.btn:focus,
.btn.btn-default:focus,
.btn.btn-primary:focus,
.btn.btn-white:focus,
.btn.btn-link:focus,
.sowb-button:focus,
input[type="submit"]:focus,
input[type="button"]:focus {
  outline: none;
  box-shadow:
    0 0 0 calc(0.25rem * 1) var(--_bg, transparent),
    0 0 0 calc(0.25rem * 2) var(--focus-ring-inner),
    0 0 0 calc(0.25rem * 3) var(--_bg, transparent),
    0 0 0 calc(0.25rem * 4) var(--focus-ring-outer) !important;
}

/* Suppress non-keyboard focus. */
@supports selector(:focus-visible) {
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible),
  input:focus:not(:focus-visible),
  select:focus:not(:focus-visible),
  textarea:focus:not(:focus-visible),
  [tabindex]:focus:not(:focus-visible),
  a.btn:focus:not(:focus-visible),
  .btn:focus:not(:focus-visible),
  .btn.btn-default:focus:not(:focus-visible),
  .btn.btn-primary:focus:not(:focus-visible),
  .btn.btn-white:focus:not(:focus-visible),
  .btn.btn-link:focus:not(:focus-visible),
  .sowb-button:focus:not(:focus-visible),
  input[type="submit"]:focus:not(:focus-visible),
  input[type="button"]:focus:not(:focus-visible) {
    box-shadow: none !important;
  }
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible,
  a.btn:focus-visible,
  .btn:focus-visible,
  .btn.btn-default:focus-visible,
  .btn.btn-primary:focus-visible,
  .btn.btn-white:focus-visible,
  .btn.btn-link:focus-visible,
  .sowb-button:focus-visible,
  input[type="submit"]:focus-visible,
  input[type="button"]:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 calc(0.25rem * 1) var(--_bg, transparent),
      0 0 0 calc(0.25rem * 2) var(--focus-ring-inner),
      0 0 0 calc(0.25rem * 3) var(--_bg, transparent),
      0 0 0 calc(0.25rem * 4) var(--focus-ring-outer) !important;
  }
}

/* Script-driven focus (post-navigation focus restoration). */
.route-focus:focus {
  outline: none;
  box-shadow:
    0 0 0 calc(0.25rem * 1) var(--_bg, transparent),
    0 0 0 calc(0.25rem * 2) var(--focus-ring-inner),
    0 0 0 calc(0.25rem * 3) var(--_bg, transparent),
    0 0 0 calc(0.25rem * 4) var(--focus-ring-outer) !important;
}

/* Belt-and-suspenders for primary navigation focus. */
#main-navigation .nav > li > a:focus-visible,
#main-navigation .dropdown-menu a:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 calc(0.25rem * 1) var(--_bg, transparent),
    0 0 0 calc(0.25rem * 2) var(--focus-ring-inner),
    0 0 0 calc(0.25rem * 3) var(--_bg, transparent),
    0 0 0 calc(0.25rem * 4) var(--focus-ring-outer) !important;
}

/* Force the ring on themed gradient backgrounds. */
.hero__text :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  box-shadow:
    0 0 0 calc(0.25rem * 1) var(--_bg, transparent),
    0 0 0 calc(0.25rem * 2) var(--focus-ring-inner),
    0 0 0 calc(0.25rem * 3) var(--_bg, transparent),
    0 0 0 calc(0.25rem * 4) var(--focus-ring-outer) !important;
}

/*
 * 2b. Top-level disclosure ROW restyle (added 2026-09-26 — the row is now a
 *     semantic <button>, not an <a>).
 *
 * Why this is needed: the child walker emits the top-level Services/About rows
 * as <button type="button" class="dropdown-toggle"> (no href) so that
 * "Enter = toggle, option = navigate" is semantically honest. But the parent
 * styles its nav links off `.navbar .navbar-nav > li > a` — a <button> does not
 * match those selectors, so it falls through to Bootstrap's `.btn` /
 * `.dropdown-toggle` DEFAULTS instead: an inline-block pill with a box-shadow,
 * 12px uppercase text, `12px 30px` padding, and `10px 1px` margins. That is the
 * "button looks nothing like the other nav links" regression. (Confirmed via
 * getComputedStyle 2026-09-26: the <button> rendered 12px / 12px 30px padding /
 * box-shadow; the sibling leaf <a> rendered 19px / 15px 15px 15px 35px / none.)
 *
 * Fix: give the row <button> the SAME box the parent gives its nav <a>. We set
 * the values explicitly (rather than re-declaring the parent selector) so a
 * Hestia update that changes the parent's `.navbar-nav > li > a` does not
 * silently re-split the row from the rest of the nav. Tag-agnostic on the
 * `.dropdown-toggle` class so it also styles a parent-update <a> fallback. The
 * !important on the resets beats Bootstrap's `.btn`/`.dropdown-toggle` defaults
 * (source order can't, since those load in the imported parent sheet).
 */

/* --- the chevron: mirror the parent's `<a>` caret box on the <button> row ---
   ALL WIDTHS (desktop + mobile). The parent positions its chevron ONLY for the
   <a> case via `.navbar .navbar-nav .dropdown a .caret` (30x30 absolute box,
   right:15px, top:10px, 1px #555 border, svg 12.5px). A <button> does not
   match that, so the chevron was left unstyled — it rendered inline right after
   the label (the "double caret" regression on BOTH desktop and mobile; the
   desktop-only version of this rule previously left mobile broken). Pin the
   chevron to the right edge, vertically centered, no margin gap, transparent
   box (the #555 border was the "underline" in the original screenshot and is
   not part of the chevron's intended look). Tag-agnostic on .dropdown-toggle.
   This block is intentionally OUTSIDE any width media query so mobile gets the
   exact same chevron treatment as desktop. */
#main-navigation .navbar-nav > li > .dropdown-toggle,
#main-navigation .nav > li > .dropdown-toggle {
  position: relative;
}
#main-navigation .navbar-nav > li > .dropdown-toggle .caret-wrap,
#main-navigation .nav > li > .dropdown-toggle .caret-wrap {
  display: inline-block;
}
#main-navigation .navbar-nav > li > .dropdown-toggle .caret,
#main-navigation .nav > li > .dropdown-toggle .caret {
  border: 0 !important;
  box-sizing: content-box;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  margin: 0 !important;
  position: absolute !important;
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%);
  width: 30px;
}
#main-navigation .navbar-nav > li > .dropdown-toggle .caret svg,
#main-navigation .nav > li > .dropdown-toggle .caret svg {
  width: 12.5px;
  height: auto;
  margin: 0;
  transition: transform 0.3s ease;
}
/* Open state: rotate the chevron up (matches the parent's <a> behavior). */
#main-navigation .navbar-nav > li > .dropdown-toggle .caret-open .caret svg,
#main-navigation .nav > li > .dropdown-toggle .caret-open .caret svg,
#main-navigation .navbar-nav > li.dropdown.open > .dropdown-toggle .caret svg,
#main-navigation .nav > li.dropdown.open > .dropdown-toggle .caret svg {
  transform: rotate(-180deg);
}

@media (min-width: 768px) {
  /* Kill the Bootstrap pill shadow ONLY when the row is not focused, so the
     child's :focus-visible focus ring (also a box-shadow, declared earlier in
     this file) is never overridden by this rule. Scoping to :not(:focus) is
     what makes the focus ring survive — a plain box-shadow:none here would beat
     the ring on source-order (this block loads after the ring rules). */
  #main-navigation .navbar-nav > li > .dropdown-toggle:not(:focus):not(:focus-visible),
  #main-navigation .nav > li > .dropdown-toggle:not(:focus):not(:focus-visible) {
    box-shadow: none !important;
  }
  #main-navigation .navbar-nav > li > .dropdown-toggle,
  #main-navigation .nav > li > .dropdown-toggle {
    /* --- reset the Bootstrap .btn/.dropdown-toggle pill look --- */
    border: 0 !important;
    background: none !important;
    background-image: none !important;
    margin: 0 !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    box-sizing: border-box !important;

    /* --- match the parent's `.navbar .navbar-nav > li > a` box ---
        Values read directly from the live Home <a> (getComputedStyle
        2026-09-26): color #00193E (navy), 19px, text-transform none,
        padding 15px 15px 15px 35px. Set explicitly (not inherit) because the
        parent sets these on the <a> via a rule that does not match a <button>,
        and a Hestia update can change that rule. The child loads last, so these
        explicit !important values win and keep the row in lockstep with the
        rest of the nav. */
    display: block !important;
    width: 100%;
    color: #00193e !important;
    font-size: 19px !important;
    /* line-height 20px == the Home <a>'s line-height (measured 2026-09-26), so
       the label baseline sits on the same y as the <a> labels (issue 1). 1.1
       gave 20.9px -> a 10px-taller box and a misaligned baseline. */
    line-height: 20px !important;
    /* Right padding 45px reserves room for the absolute-positioned chevron
       (30px box at right:15px => occupies right:15px..45px). 15px right let
       the label underlap the chevron (the squished/overlapping "Services" in
       the 2026-09-26 screenshot). Left stays 35px to match the <a> labels. */
    padding: 15px 45px 15px 35px !important;
    border-radius: 3px;
    text-transform: none;
    /* a <button> defaults to a centered label; left-align like the <a>. */
    text-align: left;
    /* room for the absolute-positioned chevron on the right (issue 2). */
    position: relative;
    white-space: nowrap;
  }
  /* Hover: keep the navy, no pill hover, no pill shadow. (No :focus here — the
     focus ring is a box-shadow that a later :focus-visible rule must be able to
     set; putting box-shadow:none on a focus state would wipe it. See note above.) */
  #main-navigation .navbar-nav > li > .dropdown-toggle:hover,
  #main-navigation .nav > li > .dropdown-toggle:hover {
    color: #00193e !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* Chevron positioning/sizing/rotation is handled by the ALL-WIDTHS chevron
     block above (so mobile matches desktop). Nothing chevron-specific here. */
}

/*
 * 3. Mobile disclosure chevron hit-target (added 2026-09-20 — split-control
 *    pattern, see assets/js/disclosure-nav-mobile.js).
 *
 * On mobile the top-level row is one <a> that holds a label + a chevron
 * (.caret-wrap). The parent CSS renders .caret-wrap with ZERO width at <=768px
 * (it's an inline span after the label), so the chevron is untappable — a
 * user can't hit the ~0px-wide disclosure control. We give it a real, tappable
 * hit area (>=44x44px per WCAG 2.5.5 target size / 2.5.8 24px min) pinned to
 * the right edge of the row, so:
 *   - tapping the chevron area expands/collapses the submenu (JS owns it), and
 *   - tapping anywhere else on the row navigates the link.
 * The chevron svg is visually centered in the hit box; the box itself is
 * transparent (no new visual), it only widens the tap region.
 */
@media (max-width: 768px) {
  /* --- issue 3: match the mobile leaf <a>, kill the Bootstrap pill ---
     The desktop row-button block is gated behind min-width:768px, so on mobile
     the row <button> fell through to the parent's mobile pill (brown bg, white
     12px text, rounded, shadow). Force the mobile leaf <a>'s look (measured
     2026-09-26: navy #00193E, 19px, line-height 20px, transparent bg,
     padding 15px 15px 15px 35px, display block) with !important so it beats
     the parent's mobile .dropdown-toggle/.btn pill rules. Extra right padding
     (56px) reserves room for the chevron hit-box on the right. */
  #main-navigation .nav > li.dropdown > a.dropdown-toggle,
  #main-navigation .nav > li.dropdown > button.dropdown-toggle,
  #main-navigation .navbar-nav > li > .dropdown-toggle,
  #main-navigation .navbar .navbar-nav > li > a.dropdown-toggle {
    display: block !important;
    width: 100%;
    color: #00193e !important;
    font-size: 19px !important;
    line-height: 20px !important;
    text-align: left !important;
    text-transform: none !important;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    font-weight: 400 !important;
    text-shadow: none !important;
    padding: 15px 56px 15px 35px !important;
    position: relative;
    box-sizing: border-box !important;
  }
  /* Reserve space on the right so the label doesn't underlap the hit box. */
  #main-navigation .nav > li.dropdown > a.dropdown-toggle .caret-wrap,
  #main-navigation .nav > li.dropdown > button.dropdown-toggle .caret-wrap {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Keep the chevron glyph visually small within the larger hit box. */
  #main-navigation .nav > li.dropdown > a.dropdown-toggle .caret-wrap .caret svg,
  #main-navigation .nav > li.dropdown > button.dropdown-toggle .caret-wrap .caret svg {
    width: 18px;
    height: 12px;
  }
  /* The row is the disclosure button on mobile (a real <button> from the child
     walker; a parent-fallback <a> gets role=button + tabindex from
     disclosure-nav-mobile.js). The chevron is a decorative glyph
     (pointer-events:none, so taps anywhere on the row hit the button). Give the
     row button a clear, keyboard-visible focus ring so a keyboard / VoiceOver
     user can see it is focusable. (Desktop keeps the parent's focus ring.) */
  #main-navigation .nav > li.dropdown > a.dropdown-toggle[role="button"]:focus,
  #main-navigation .nav > li.dropdown > a.dropdown-toggle[role="button"]:focus-visible,
  #main-navigation .nav > li.dropdown > button.dropdown-toggle:focus,
  #main-navigation .nav > li.dropdown > button.dropdown-toggle:focus-visible {
    outline: 2px solid #3C4858;
    outline-offset: 2px;
  }
  #main-navigation .nav > li.dropdown > a.dropdown-toggle .caret-wrap,
  #main-navigation .nav > li.dropdown > button.dropdown-toggle .caret-wrap {
    pointer-events: none; /* decorative; let taps fall through to the row button */
  }

  /* Collapsed submenus are hidden via the `hidden` attribute by
     disclosure-nav-mobile.js (so they are out of the AX tree and tab order,
     not just visually hidden). The UA `[hidden]{display:none}` is low-
     specificity and can lose to the parent's display rules, so force it here
     to guarantee a collapsed submenu is invisible to BOTH sighted and
     screen-reader users. Only the mobile collapse state carries `hidden`; the
     open state removes it, so this never hides an expanded submenu. */
  #main-navigation .collapsiblenav .dropdown-menu[hidden] {
    display: none !important;
  }

  /* Give the EXPANDED mobile submenu a distinct background so it reads as a
     separate panel against the page (the parent renders it transparent,
     which blends into the page background). A soft warm tint + a subtle
     accent left border keeps the link text legible and the panel clearly
     demarcated. Only applies when the row is open (.open), so a collapsed
     (hidden) submenu is unaffected. */
  #main-navigation .nav > li.dropdown.open > .dropdown-menu {
    background-color: #ece2e2;
    border-left: 5px solid #332121;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 3px 10px rgba(51,51,51,0.20);
  }
  #main-navigation .nav > li.dropdown.open > .dropdown-menu > li > a {
    padding-left: 20px;
  }

  /* Reset the parent theme's GLOBAL `button` element rule
     (hestia/style.css: `button, input[type=submit], input[type=button], .btn {
      margin: 10px 1px; padding: 12px 30px; ... }`) so the mobile disclosure-row
     <button> sits flush with the leaf <a> rows in the mobile column.
     Without this, the row button inherits 10px vertical margins that the
     sibling leaf links don't have, breaking the even 50px-per-row rhythm.
     Scoped to `button.dropdown-toggle` only (not the <a> fallback, not submenu
     buttons, not other buttons elsewhere). Mobile-only: desktop already sets
     margin:0 in its own (min-width:768px) block. !important is required
     because the parent's `button` rule loads LATER in the cascade (via
     @import) and is not marked !important itself. */
  #main-navigation .nav > li.dropdown > button.dropdown-toggle {
    margin: 0 !important;
  }
}

/* Forced-colors (Windows High Contrast Mode). */
@media (forced-colors: active), (-ms-high-contrast: active) {
  a:focus,
  button:focus,
  input:focus,
  select:focus,
  textarea:focus,
  [tabindex]:focus,
  a.btn:focus,
  .btn:focus,
  .btn.btn-default:focus,
  .btn.btn-primary:focus,
  .btn.btn-white:focus,
  .btn.btn-link:focus,
  .sowb-button:focus,
  input[type="submit"]:focus,
  input[type="button"]:focus {
    box-shadow: none !important;
    outline: 2px solid LinkText;
    outline-offset: 2px;
  }
}