/* ===== ESSHM AUDIT FIXES v1 — 23 Sep 2026 ===== */

/* 1. Root cause of the 32px mobile overflow: custom components were
      authored for border-box but no reset was present. */
[class^="esshm-"], [class*=" esshm-"],
[class^="hn-"],    [class*=" hn-"],
[class^="esshm-"] *, [class*=" esshm-"] *,
[class^="hn-"] *,    [class*=" hn-"] * { box-sizing: border-box; }

/* 2. Mobile drawer: full-width fixed panel instead of a 42px absolute box */
@media (max-width: 900px){
  .esshm-gh .esshm-gh-mobile { position: static; }
  .esshm-gh .esshm-gh-mobile > summary{
    display: flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; padding: 0 14px;
    list-style: none; cursor: pointer;
  }
  .esshm-gh .esshm-gh-mobile > summary::-webkit-details-marker{ display: none; }
  .esshm-gh .esshm-gh-mobile[open] > .esshm-gh-drawer{
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    top: 100% !important; bottom: auto !important;
    width: auto !important; max-width: none !important;
    height: auto !important; max-height: calc(100dvh - 72px) !important;
    padding: 8px 16px 32px !important;
    overflow-y: auto !important;
    background: #0a111e !important;
    border-radius: 0;
  }
  .esshm-gh .esshm-gh-drawer a{
    display: flex; align-items: center;
    width: 100%; min-height: 52px;
  }
}

/* 2b. Drawer legibility — opaque panel; colour only the group rows, never the pills */
@media (max-width: 900px){
  .esshm-gh .esshm-gh-drawer{ background: #0a111e !important; }
  .esshm-gh .esshm-gh-drawer .esshm-mobile-group > summary,
  .esshm-gh .esshm-gh-drawer .esshm-mobile-group a{ color: #f5f7fa !important; }
  .esshm-gh .esshm-gh-drawer .esshm-mobile-group > summary{
    min-height: 52px; display: flex; align-items: center; justify-content: space-between;
  }
  .esshm-gh .esshm-gh-drawer .esshm-mobile-group{ border-bottom: 1px solid rgba(255,255,255,.10); }
}

/* 3. Keyboard focus was invisible (outline-style: none) */
:where(a, button, summary, input, select, textarea, [role="button"]):focus-visible{
  outline: 3px solid #7dd3fc;
  outline-offset: 3px;
  border-radius: 4px;
}

/* 4. Touch targets: footer links were 206x17px */
.esshm-footer-grid a{ display: flex; align-items: center; min-height: 44px; }

/* 5. Contrast below AA */
.esshm-gh .esshm-command-key,
.esshm-command-key{ color: #cbd5e1 !important; }
.esshm-gh .esshm-trigger-key,
.esshm-trigger-key{ color: #e8eef2 !important; }
.esshm-gh .esshm-gh-search span,
.esshm-search-trigger span{ color: #cbd5e1 !important; }

/* 6. Section rhythm: 86px top / 74px bottom -> symmetric 88px (8pt grid) */
@media (min-width: 901px){
  .hn-section{ padding-block: 88px; }
}

/* 7. Cards had no hover feedback */
.hn-card{
  transition: transform 180ms cubic-bezier(.22,1,.36,1),
              border-color 180ms ease,
              box-shadow 180ms ease;
}
.hn-card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
}

/* 8. Headline wrapping: no orphaned last word */
h1, h2, .hn-section h2{ text-wrap: balance; }
p{ text-wrap: pretty; }

/* 9. Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 10. Arabic portal parity — same heritage hero, mirrored for RTL */
.esshm-ar-hero{ position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(440px, 58vh, 660px); display: flex; align-items: center; }
.esshm-ar-hero::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(to left, rgba(10,17,30,.97) 0%, rgba(10,17,30,.93) 32%, rgba(10,17,30,.62) 58%, rgba(10,17,30,.20) 82%, rgba(10,17,30,.06) 100%),
    url("https://esshm.org/wp-content/uploads/2026/09/esshm-heritage-hand-hero.webp");
  background-size: cover, cover;
  background-position: 50% 50%, 0% 50%;
  background-repeat: no-repeat, no-repeat;
}
.esshm-ar-hero > *{ position: relative; z-index: 1; width: 100%; }
@media (max-width: 900px){
  .esshm-ar-hero{ min-height: 420px; }
  .esshm-ar-hero::before{
    background-position: 50% 50%, 50% 22%;
    background-image:
      linear-gradient(to bottom, rgba(10,17,30,.72) 0%, rgba(10,17,30,.90) 48%, rgba(10,17,30,.97) 100%),
      url("https://esshm.org/wp-content/uploads/2026/09/esshm-heritage-hand-hero.webp");
  }
}
/* 11. Arabic section rhythm matches English */
.esshm-ar-main{ padding-block: 86px; }
@media (max-width: 900px){ .esshm-ar-main{ padding-block: 62px; } }
/* 12. Arabic index cards get the English hover step */
.esshm-ar-index > *{ transition: transform 180ms cubic-bezier(.22,1,.36,1), border-color 180ms ease, box-shadow 180ms ease; }
.esshm-ar-index > *:hover{ transform: translateY(-2px); border-color: rgba(10,17,30,.22); box-shadow: 0 12px 32px rgba(10,17,30,.12); }
/* 13. English hero: soften the hard vertical seam */
.hn-hero{ isolation: isolate; }
.hn-hero::after{ content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(17,24,36,.55) 0%, rgba(17,24,36,.28) 34%, rgba(17,24,36,0) 56%); }
.hn-hero > *{ position: relative; z-index: 1; }