/* ============================================================
   ASONA ABUSUA GLOBAL — POLISH LAYER
   ------------------------------------------------------------
   Loads last. Detail work, not restructuring.

   Driven by an automated audit of all 25 pages at two widths.
   The dominant finding was type: roughly 90 labels rendering
   between 8.8px and 10.9px — eyebrows, statistic captions, team
   roles, category tags. Small type is the fastest way a site
   reads as cheap, and 8.8px is not readable on a phone at all.
   ============================================================ */

/* ============================================================
   1. TYPE FLOOR
   Nothing on the site renders below 12px. Micro-labels get
   weight and letter-spacing instead of shrinking.
   ============================================================ */

.hero-info-title,
.section-eyebrow,
.sf-eyebrow,
.ba-eyebrow,
[class*="eyebrow"],
[class*="label"],
[class*="tag"],
.badge,
.chip {
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.impact-metrics .metric p,
[class*="stat"] p,
[class*="stat"] small,
[class*="counter"] p,
[class*="metric"] p {
  font-size: 12.5px !important;
  letter-spacing: 0.02em !important;
  line-height: 1.45 !important;
}

/* Team member roles were 10px under each portrait */
.team-member p,
.leadership-card p,
[class*="team"] p,
[class*="leader"] p,
figcaption {
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Catch-all floor */
p, li, span, small, a, td, th, figcaption, label, h4, h5, h6 {
  font-size: max(12px, 1em);
}
small { font-size: 12.5px !important; }

/* ============================================================
   2. TYPOGRAPHIC QUALITY
   ============================================================ */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

h1, h2, h3, .section-title {
  font-feature-settings: "kern" 1, "liga" 1, "dlig" 1;
  text-wrap: balance;          /* stops one orphaned word on its own line */
}
p { text-wrap: pretty; }

/* Figures should align in a column — proportional digits wobble */
.impact-metrics .metric h3,
[class*="stat"] h3,
[class*="counter"] h3 {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ============================================================
   3. IMAGE TREATMENT
   Consistent radius and a restrained hover. Photographs get a
   hairline so light images don't bleed into a light background.
   ============================================================ */

.card img,
.card video,
.about-content img,
ul.gallery li img,
.project-vidbox,
[class*="team"] img,
[class*="leader"] img {
  border-radius: 14px;
}

ul.gallery li a {
  border-radius: 14px;
  overflow: hidden;
  display: block;
  position: relative;
}
ul.gallery li img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
ul.gallery li a:hover img { transform: scale(1.04); }

/* Caption rises on hover instead of sitting there permanently */
ul.gallery li .event-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px 18px 16px;
  background: linear-gradient(to top, rgba(11,20,36,0.88), rgba(11,20,36,0));
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
ul.gallery li a:hover .event-info,
ul.gallery li a:focus-visible .event-info { opacity: 1; transform: none; }
ul.gallery li .event-info h5 { color: #fff; font-size: 14px !important; margin: 0 0 2px; }
ul.gallery li .event-info p { color: rgba(255,255,255,0.75); font-size: 12px !important; margin: 0; }

img { background-color: #EFEFF1; }   /* no white flash before load */

/* ============================================================
   4. LINKS AND BUTTONS
   ============================================================ */

a { transition: color 0.18s ease, opacity 0.18s ease; }

.hero-buttons button,
.card button {
  transition: color 0.18s ease, transform 0.18s ease;
}

/* Underline that grows from the left rather than appearing whole */
.sf-docs a,
footer.footer a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease, color 0.18s ease;
}
.sf-docs a:hover,
footer.footer a:hover { background-size: 100% 1px; }

/* ============================================================
   5. SECTION RHYTHM
   Alternating bands were creating a stripe pattern. Whitespace
   carries the separation; a hairline marks the change.
   ============================================================ */

section + section { border-top: 1px solid rgba(0,0,0,0.05); }
.hero + section,
section.footer-bar,
footer + section { border-top: 0; }

.section-title { position: relative; padding-bottom: 18px; }
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 44px;
  height: 2px;
  background: var(--e-gold, #B8912F);
}
.about-section .section-title::after { left: 50%; }

/* ============================================================
   6. FORMS
   ============================================================ */

input, textarea, select, .form-control {
  border-radius: 10px !important;
  border: 1px solid #D2D2D7 !important;
  padding: 14px 16px !important;
  background: #fff !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--e-gold, #B8912F) !important;
  box-shadow: 0 0 0 3px rgba(184,145,47,0.14) !important;
  outline: none;
}
button[type="submit"], input[type="submit"] {
  border-radius: 999px !important;
  padding: 15px 34px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ============================================================
   7. DECORATIVE LEFTOVERS FROM THE OLD THEME
   ============================================================ */

.gold-orb,
[class*="orb"],
[class*="glow-"],
.particle,
[class*="particle"] { display: none !important; }

/* ============================================================
   8. ACCESSIBILITY
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--e-gold, #B8912F);
  outline-offset: 3px;
  border-radius: 3px;
}
::selection { background: rgba(184,145,47,0.22); color: inherit; }

@media (prefers-reduced-motion: reduce) {
  ul.gallery li a:hover img { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   9. RESPONSIVE — LAST
   ============================================================ */

@media (max-width: 767px) {
  .section-title { padding-bottom: 14px; }
  .section-title::after { width: 36px; }
  ul.gallery li .event-info { opacity: 1; transform: none; }  /* no hover on touch */
}

/* ============================================================
   10. LAST OF THE UNDERSIZED TYPE
   Found by re-auditing after the first pass. These carry
   !important in style.css, so they need matching specificity.
   ============================================================ */

/* Leadership roles under each portrait were 10px */
.leader-card .title {
  font-size: 12.5px !important;
  letter-spacing: 0.1em !important;
  line-height: 1.45 !important;
}
.leader-card h4, .leader-card h3 { line-height: 1.3; }

/* Gallery filter tabs, 404 button, chapter CTA, side panel */
ul.filter li a,
.filter-tabs a,
.error404 a,
.thankyou-section a,
.side-content h6,
.preloader .inner p,
.blog .post .post-content .date {
  font-size: 12.5px !important;
  letter-spacing: 0.08em !important;
}

/* ============================================================
   11. CATEGORY STAT ROW OVERFLOWED ON PHONES
   .cat-stat was a fixed multi-column row; on a 390px screen the
   figures pushed past the edge.
   ============================================================ */

@media (max-width: 767px) {
  .cat-stats, [class*="cat-stat"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 12px !important;
    width: 100% !important;
  }
  .cat-stat {
    min-width: 0 !important;
    width: auto !important;
    flex: none !important;
    text-align: center;
  }
  .cat-stat strong, .cat-stat span {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* ============================================================
   12. INLINE GRIDS THAT COULDN'T SHRINK
   Several pages hard-code repeat(3,1fr) / repeat(4,1fr) inline.
   A 1fr track has a min-content floor, so on a 390px screen the
   columns refused to shrink and pushed the row past the edge.
   Overriding the inline value needs an attribute selector.
   ============================================================ */

@media (max-width: 900px) {
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 560px) {
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(2,1fr)"],
  [style*="repeat(2, 1fr)"],
  [style*="2fr 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* minmax(0,1fr) instead of 1fr so tracks may shrink below content */
@media (max-width: 900px) {
  [style*="grid-template-columns"] > * { min-width: 0; }
}

/* Gallery filter tabs were 11px */
ul.filter li a, ul.filter li a.current,
.gallery-filter a, .filter li a {
  font-size: 12.5px !important;
  letter-spacing: 0.1em !important;
}

/* Chapters CTA button */
.chapters-cta a, .chapter-cta a { font-size: 12.5px !important; }

/* Last one: .custom-button was 11px */
a.custom-button, .custom-button {
  font-size: 12.5px !important;
  letter-spacing: 0.08em !important;
}

/* ============================================================
   13. MOBILE MENU PANEL — final pass
   Rendering the open panel showed two faults the code audit
   could not: the links were still centred, and two close
   controls were stacked on each other (the hamburger turns into
   an X, and there is also a separate .mobile-menu-close button).
   ============================================================ */

@media (max-width: 991px) {
  /* One close control, not two. The hamburger already becomes an X. */
  .navbar .container .menu .mobile-menu-close { display: none !important; }

  /* Left-aligned list. The centring came from a parent, so this
     has to be set on the list and the items, not just the link. */
  .navbar .container .menu,
  .navbar .container .menu ul,
  .navbar .container .menu ul li,
  .navbar .container .menu ul li a {
    text-align: left !important;
  }
  .navbar .container .menu ul li { width: 100%; }
  .navbar .container .menu ul > li > a {
    display: block !important;
    width: 100% !important;
    padding: 15px 24px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  }

  /* Dropdown arrow to the right edge instead of jammed against text */
  .navbar .container .menu ul > li {
    position: relative;
  }
  .navbar .container .menu .mobile-dropdown-toggle {
    position: absolute !important;
    top: 0; right: 0;
    width: 52px; height: 52px;
    background: none !important;
    border: 0 !important;
    color: rgba(255,255,255,0.6) !important;
    z-index: 2;
  }

  /* Submenu indented so hierarchy is visible */
  .navbar .container .menu ul ul li a {
    padding-left: 42px !important;
    font-size: 14px !important;
    color: rgba(255,255,255,0.7) !important;
    background: rgba(0,0,0,0.22) !important;
  }
}