/* ==========================================================================
   ACHI613 component styles
   One block per widget. Class prefix is always .achi-<widget-slug>.

   RULE: every value here comes from a token in achi-tokens.css. If you find
   yourself typing a hex or a raw px value that isn't on the spacing scale,
   stop — either the token is missing (add it in Figma first) or the design
   is being invented rather than implemented.
   ========================================================================== */

/* ---------- Spacing reset for the type-ramp utilities ----------
   Every component below is a flex or grid container that owns its own spacing
   through `gap`. The browser's default paragraph and heading margins would add
   to that gap rather than replace it, so the rhythm would drift from the design
   by whatever the theme happens to set. Reset here, not in achi-tokens.css,
   which is generated from Figma and describes the ramp rather than its layout.
   Component rules further down still win — they are declared later. */
.achi-eyebrow, .achi-body-lg, .achi-body-md, .achi-body-md-bold,
.achi-body-sm, .achi-body-sm-bold, .achi-caption,
.achi-display-xl, .achi-display-lg,
.achi-heading-xl, .achi-heading-lg, .achi-heading-md, .achi-heading-sm { margin: 0; }

/* ---------- Button ---------- */
.achi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--achi-space-8);
  font: 600 16px/1.25 var(--achi-font-ui);
  padding: 14px 28px; border-radius: var(--achi-radius-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.achi-btn--primary   { background: var(--achi-brand-700); color: #fff; }
.achi-btn--primary:hover   { background: var(--achi-brand-900); color: #fff; }
.achi-btn--donate    { background: var(--achi-accent-600); color: #fff; }
.achi-btn--donate:hover    { background: var(--achi-accent-700); color: #fff; }
.achi-btn--secondary { background: var(--achi-surface-0); color: var(--achi-brand-700); border-color: var(--achi-brand-700); }
.achi-btn--secondary:hover { background: var(--achi-brand-50); }
.achi-btn--neutral   { background: var(--achi-neutral-500); color: var(--achi-ink-900); }
.achi-btn--neutral:hover   { background: var(--achi-neutral-600); }
.achi-btn--ghost     { background: transparent; color: var(--achi-brand-700); border-color: var(--achi-line-200); }
.achi-btn--ghost:hover     { border-color: var(--achi-brand-700); }
.achi-btn--sm { padding: 10px 18px; font-size: 14px; }
.achi-btn--full { width: 100%; }
/* On a blue band, the primary action is a WHITE button — a neutral fill on
   blue reads as disabled. See the CTA band widget.
   The --primary override is a guardrail: brand-700 on a brand-700 band is a
   button you cannot see at all, so picking the wrong variant degrades to the
   correct one instead of to an invisible one. */
.achi-on-dark .achi-btn--primary { background: var(--achi-surface-0); color: var(--achi-brand-700); }
.achi-on-dark .achi-btn--primary:hover { background: var(--achi-brand-100); color: var(--achi-brand-900); }
.achi-on-dark .achi-btn--secondary { border-color: var(--achi-surface-0); }
.achi-on-dark .achi-btn--ghost { color: #fff; border-color: rgba(255,255,255,.5); }
.achi-on-dark .achi-btn--ghost:hover { background: rgba(255,255,255,.12); }

/* ---------- Section heading ---------- */
.achi-section-heading { display: flex; flex-direction: column; gap: var(--achi-space-12); }
.achi-section-heading__sub { max-width: 760px; }

/* ---------- Cards (shared chrome) ---------- */
.achi-card {
  background: var(--achi-surface-0);
  border: 1px solid var(--achi-line-200);
  border-radius: 14px; overflow: hidden;
  box-shadow: var(--achi-shadow-card);
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.achi-card:hover { transform: translateY(-3px); box-shadow: var(--achi-shadow-lift); }
.achi-card__media { aspect-ratio: 16 / 11; background: var(--achi-brand-100); object-fit: cover; width: 100%; display: block; }
/* A card with no picture still holds the media slot. Without this, one
   post missing a featured image starts with text while its neighbours start
   with an image, and the whole grid row loses its alignment. */
.achi-card__media--empty { background: linear-gradient(135deg, var(--achi-brand-500), var(--achi-brand-900)); }
.achi-card__body { padding: var(--achi-space-20); display: flex; flex-direction: column; gap: var(--achi-space-8); flex: 1; }
.achi-card__foot {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--achi-space-12); margin-top: auto; padding-top: var(--achi-space-8); flex-wrap: wrap;
}
.achi-card__price { font: 700 18px/1.2 var(--achi-font-ui); color: var(--achi-brand-700); white-space: nowrap; }
.achi-card__cta { font: 600 13px/1.4 var(--achi-font-ui); color: var(--achi-accent-600); white-space: nowrap; }

/* ---------- Category tile ---------- */
.achi-tile { background: var(--achi-neutral-50); border: 1px solid var(--achi-line-200); border-radius: 14px; overflow: hidden; display: block; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.achi-tile:hover { transform: translateY(-3px); box-shadow: var(--achi-shadow-card); }
.achi-tile__media { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; display: block; }
/* A category with no image still has to hold its place in the grid, or one
   missing picture collapses a whole row. Same gradient the prototype uses for
   its placeholders. */
.achi-tile__media--empty { background: linear-gradient(135deg, var(--achi-brand-500), var(--achi-brand-900)); }
.achi-tile__body { padding: 14px var(--achi-space-16) var(--achi-space-16); display: flex; flex-direction: column; gap: var(--achi-space-4); }
.achi-tile__name { margin: 0; color: var(--achi-ink-900); }
.achi-tile__count { margin: 0; color: var(--achi-ink-500); }

/* ---------- Initiative / giving-channel card (horizontal) ---------- */
.achi-initiative { display: flex; background: var(--achi-surface-0); border: 1px solid var(--achi-line-200); border-radius: 14px; overflow: hidden; text-decoration: none; }
/* WooCommerce's get_price_html() ships a screen-reader span ("Price range: $100
   through $180") alongside the visible range. Other stylesheets on this site do
   hide .screen-reader-text, but a donation price should not depend on another
   plugin's CSS still being loaded — so hide it here too, scoped to this card. */
.achi-initiative__price .screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.achi-initiative__price { color: var(--achi-brand-700); }
.achi-initiative__cta { color: var(--achi-accent-600); margin-top: var(--achi-space-4); }
.achi-initiative__media { flex: 0 0 180px; object-fit: cover; }
.achi-initiative__body { padding: var(--achi-space-32); display: flex; flex-direction: column; gap: var(--achi-space-8); justify-content: center; }

/* ---------- Section surface ----------
   For widgets that paint their own tinted band. Elementor's colour control
   rejects `var(--token)`, so a container background cannot be token-driven —
   it would have to be a raw hex pasted into page data, and a rebrand would
   miss it. Widgets carry the surface instead, where the token dropdown lives. */
.achi-surface { padding: var(--achi-space-40) var(--achi-space-32); border-radius: var(--achi-radius-lg); }

/* ---------- Stat (#10) ---------- */
.achi-stat { display: flex; flex-direction: column; gap: var(--achi-space-4); }
.achi-stat__value { font: 600 clamp(34px, 3.4vw, 48px)/1.05 var(--achi-font-display); color: var(--achi-brand-700); display: block; }
.achi-stat__label { margin: 0; }
.achi-on-dark .achi-stat__value { color: var(--achi-surface-0); }

/* ---------- Path card (#11, three-up) ---------- */
.achi-path { border: 1px solid var(--achi-line-200); border-radius: var(--achi-radius-lg); padding: var(--achi-space-32); display: flex; flex-direction: column; gap: 14px; }
.achi-path__chip { width: 52px; height: 52px; border-radius: 12px; flex: none; }
/* The path card's eyebrow is muted, not the accent red the eyebrow carries
   everywhere else — three red labels stacked across a row would compete with
   the donate button for the only red on the page. */
.achi-path .achi-eyebrow { color: var(--achi-ink-500); }
.achi-path__title { margin: 0; }
.achi-path__body { margin: 0; }
/* Pushes the link to the card's foot so a three-up row aligns its links even
   when the bodies differ in length. */
.achi-path__link { margin-top: auto; padding-top: var(--achi-space-4); font: 600 16px/1.4 var(--achi-font-ui); }
.achi-path__link a { color: var(--achi-brand-700); text-decoration: none; }
.achi-path__link a:hover { text-decoration: underline; }
.achi-on-dark.achi-path { border-color: rgba(255,255,255,.22); }
.achi-on-dark .achi-path__link a { color: var(--achi-surface-0); }

/* ---------- Rule column (#12, "where your money goes") ---------- */
.achi-rulecol { display: flex; flex-direction: column; gap: var(--achi-space-12); }
/* flex: none so the rule keeps its 4px in a column flex container rather than
   being shrunk by a sibling. */
.achi-rulecol__rule { width: 56px; height: 4px; border-radius: 2px; background: var(--achi-accent-600); flex: none; }
.achi-rulecol__title { margin: 0; }
.achi-rulecol__body { margin: 0; }

/* ---------- CTA band (#13) ---------- */
/* The surface is set by the widget from a token, so no colour is hard-coded
   here beyond the default — the band is usable on a light surface too, and
   `.achi-on-dark` (added by the widget when the token is dark) carries the
   text-colour flip. */
.achi-band { background: var(--achi-brand-700); text-align: center; padding-block: var(--achi-section-y); padding-inline: var(--achi-space-24); }
.achi-band__inner { max-width: var(--achi-container); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--achi-space-16); }
.achi-band__sub { max-width: 720px; margin-inline: auto; }
.achi-band.achi-on-dark .achi-band__sub { color: var(--achi-brand-100); }
.achi-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--achi-space-12); margin-top: var(--achi-space-8); }

/* ---------- Hero split (#22) ---------- */
.achi-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.achi-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--achi-space-20); }
.achi-hero__actions { display: flex; flex-wrap: wrap; gap: var(--achi-space-12); }
.achi-hero__trust { color: var(--achi-ink-500); }
.achi-hero.achi-on-dark .achi-hero__trust { color: var(--achi-neutral-200); }
.achi-hero__figure { position: relative; margin: 0; border-radius: var(--achi-radius-lg); overflow: hidden; background: var(--achi-brand-100); }
.achi-hero__media { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Caption card sitting over the foot of the hero image. */
.achi-hero__caption { position: absolute; inset-inline: var(--achi-space-24); bottom: var(--achi-space-24); background: rgba(255,255,255,.95); border-radius: 14px; padding: 18px 22px; }
.achi-hero__caption > * { margin: 0; }
/* Media on the left reorders the figure rather than swapping the markup, so the
   DOM stays heading-first for screen readers and keyboard order. */
.achi-hero--media-start { grid-template-columns: .95fr 1.05fr; }
.achi-hero--media-start .achi-hero__figure { order: -1; }

/* ---------- Steps ---------- */
.achi-step { background: var(--achi-brand-50); border-radius: var(--achi-radius-lg); padding: var(--achi-space-32); }
.achi-step__num { font: 600 32px/1 var(--achi-font-display); color: var(--achi-brand-700); }

/* ---------- Pull quote ---------- */
.achi-pullquote { background: var(--achi-brand-50); border-radius: 14px; padding: var(--achi-space-24) var(--achi-space-32); }
.achi-pullquote p { font: 600 24px/1.35 var(--achi-font-display); color: var(--achi-brand-700); margin: 0; }

/* ---------- Impact list ---------- */
.achi-impact { background: var(--achi-brand-50); border-radius: 14px; padding: var(--achi-space-24); }
.achi-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--achi-space-8); }
.achi-bullets li { display: flex; gap: var(--achi-space-8); align-items: flex-start; }
.achi-bullets li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--achi-accent-600); margin-top: 9px; }

/* ---------- Donation amount picker ---------- */
.achi-amounts { display: flex; gap: var(--achi-space-12); flex-wrap: wrap; align-items: center; }
.achi-amounts__opt { border: 1px solid var(--achi-line-200); background: var(--achi-surface-0); border-radius: var(--achi-radius-md); padding: 13px 22px; font: 600 16px/1.25 var(--achi-font-ui); color: var(--achi-ink-900); cursor: pointer; text-decoration: none; display: inline-block; }
.achi-amounts__opt:hover { border-color: var(--achi-accent-600); }
/* aria-current, not aria-pressed: each amount is a real link to its WooCommerce
   variation so the giving path survives without JavaScript, and aria-pressed is
   only valid on a button. The aria-pressed selector is kept so any markup
   written against the original stylesheet still styles correctly. */
.achi-amounts__opt[aria-current="true"],
.achi-amounts__opt[aria-pressed="true"] { background: var(--achi-accent-600); border-color: var(--achi-accent-600); color: #fff; }
.achi-amounts__cta { margin-left: var(--achi-space-4); }

/* ---------- Info panel / KV table ---------- */
.achi-panel { border: 1px solid var(--achi-line-200); border-radius: var(--achi-radius-lg); padding: var(--achi-space-24); background: var(--achi-surface-0); }
.achi-kv { display: flex; justify-content: space-between; gap: var(--achi-space-16); padding-block: var(--achi-space-12); border-bottom: 1px solid var(--achi-line-200); font-size: 14px; }

/* ---------- Person card ---------- */
.achi-person { display: flex; gap: var(--achi-space-16); align-items: center; border: 1px solid var(--achi-line-200); border-radius: 14px; padding: var(--achi-space-20); background: var(--achi-surface-0); }
.achi-person__avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; object-fit: cover; background: var(--achi-brand-100); }

/* ---------- Grid helper used by the *-grid widgets ---------- */
.achi-grid { display: grid; gap: var(--achi-space-24); }
.achi-grid--1 { grid-template-columns: 1fr; }
.achi-grid--2 { grid-template-columns: repeat(2, 1fr); }
.achi-grid--3 { grid-template-columns: repeat(3, 1fr); }
.achi-grid--4 { grid-template-columns: repeat(4, 1fr); }
.achi-grid--6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1080px) {
  .achi-grid--6 { grid-template-columns: repeat(3, 1fr); }
  .achi-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .achi-hero, .achi-hero--media-start { grid-template-columns: 1fr; }
  .achi-hero__caption { inset-inline: var(--achi-space-16); bottom: var(--achi-space-16); padding: 14px 16px; }
}
@media (max-width: 760px) {
  .achi-grid--3, .achi-grid--2 { grid-template-columns: 1fr; }
  .achi-grid--6 { grid-template-columns: repeat(2, 1fr); }
  .achi-initiative { flex-direction: column; }
  .achi-initiative__media { flex: none; width: 100%; aspect-ratio: 16/9; }
}
@media (max-width: 560px) {
  .achi-grid--4 { grid-template-columns: 1fr; }
  .achi-grid--6 { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Site chrome — header and footer Theme Builder templates.

   These style Elementor Pro's own Nav Menu widget rather than replacing it.
   Non-negotiable #4 is that navigation stays a WordPress menu an editor can
   reorder in Appearance → Menus; the design system's job is to make that
   widget look like ACHI, not to reimplement it.

   Scoped under .achi-header / .achi-footer, which the templates set as a CSS
   class on their outer container.
   ========================================================================== */

/* ---------- Utility bar (Figma 8:3, top strip) ---------- */
.achi-utilitybar { background: var(--achi-brand-900); }
/* White, not brand-100 or neutral-200: on brand-900 those read as dulled grey
   at 13px. White is also the strongest contrast available on this ground. */
.achi-utilitybar, .achi-utilitybar p { font: 400 13px/1.6 var(--achi-font-ui); color: var(--achi-surface-0); margin: 0; }
.achi-utilitybar .elementor-nav-menu a {
  font: 400 13px/1.6 var(--achi-font-ui);
  text-transform: none; letter-spacing: 0;
  color: var(--achi-surface-0); padding: 0 10px;
}
/* Base is already white, so hover marks itself with an underline rather than a
   colour change that could only get dimmer. */
.achi-utilitybar .elementor-nav-menu a:hover { color: var(--achi-surface-0); text-decoration: underline; }
/* Elementor's pointer effects have no place on a 13px utility strip. */
.achi-utilitybar .elementor-nav-menu--main .elementor-item:before,
.achi-utilitybar .elementor-nav-menu--main .elementor-item:after { content: none; }
@media (max-width: 767px) { .achi-utilitybar { display: none; } }

/* Social glyphs in the strip: white on the navy, no filled chip. Elementor
   colours social icons by brand by default, which would put a row of coloured
   pills in a 40px bar. */
.achi-utilitybar .elementor-social-icon {
  background-color: transparent;
  width: auto; height: auto; padding: 2px;
}
.achi-utilitybar .elementor-social-icon svg { fill: var(--achi-surface-0); }
.achi-utilitybar .elementor-social-icon:hover { background-color: transparent; opacity: .75; }
.achi-utilitybar .elementor-social-icons-wrapper { display: flex; align-items: center; }

/* ---------- Header ---------- */
.achi-header { background: var(--achi-surface-0); border-bottom: 1px solid var(--achi-line-200); }
.achi-header .elementor-nav-menu a {
  font: 600 14px/1.43 var(--achi-font-ui);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--achi-ink-900); text-decoration: none;
}
.achi-header .elementor-nav-menu a:hover,
.achi-header .elementor-nav-menu .current-menu-item > a,
.achi-header .elementor-nav-menu .current_page_item > a { color: var(--achi-brand-700); }
/* Elementor draws its own underline/pointer; the brand colour has to win. */
.achi-header .elementor-nav-menu--main .elementor-item:after,
.achi-header .elementor-nav-menu--main .elementor-item:before { background-color: var(--achi-brand-700); }
.achi-header .elementor-menu-cart__toggle .elementor-button {
  color: var(--achi-ink-900);
  background: var(--achi-surface-50);
  border: 1px solid var(--achi-line-200);
  border-radius: var(--achi-radius-pill);
  padding: 10px 18px;
  font: 600 14px/1.25 var(--achi-font-ui);
}
.achi-header .elementor-menu-cart__toggle .elementor-button:hover { border-color: var(--achi-brand-700); color: var(--achi-brand-700); }
.achi-header__actions { flex: 0 0 auto; }
/* The nav takes the slack between logo and actions, and is allowed to shrink;
   the cart and Donate never are. */
.achi-header > .e-con-inner > .elementor-widget-nav-menu { flex: 1 1 auto; min-width: 0; }
.achi-header .elementor-nav-menu--main > .elementor-nav-menu { flex-wrap: nowrap; justify-content: flex-end; }
.achi-header .elementor-nav-menu--main .elementor-item { padding-inline: 8px; white-space: nowrap; }
/* The row is a fixed budget: logo + nav + cart + Donate on one line. Between
   the burger breakpoint and full width the nav gives up spacing first, so a
   bigger logo never pushes the actions onto a second line. */
@media (max-width: 1200px) {
  .achi-header .elementor-nav-menu--main .elementor-item { padding-inline: 6px; font-size: 13px; }
  .achi-header .elementor-element > img { max-width: 200px; }
}
.achi-header .elementor-menu-cart__toggle .elementor-button { white-space: nowrap; }

/* ---------- Footer ---------- */
.achi-footer { background: var(--achi-brand-900); }
.achi-footer, .achi-footer p, .achi-footer li { color: var(--achi-surface-0); }
.achi-footer h1, .achi-footer h2, .achi-footer h3, .achi-footer h4 { color: var(--achi-surface-0); }
.achi-footer a { color: var(--achi-surface-0); text-decoration: none; }
.achi-footer a:hover { color: var(--achi-surface-0); text-decoration: underline; }
.achi-footer .elementor-nav-menu a {
  font: 400 15px/2 var(--achi-font-ui);
  text-transform: none; letter-spacing: 0;
  color: var(--achi-surface-0);
}
.achi-footer .elementor-nav-menu a:hover { color: var(--achi-surface-0); text-decoration: underline; }
/* Column headings in the footer take neutral-200, never neutral-500 —
   neutral-500 on brand-900 is 3.9:1 and fails AA at this size. */
/* Elementor puts the CSS class on the widget WRAPPER and the text in a nested
   .elementor-heading-title, which carries the kit's own h3 typography. Style
   both, or the column headings render at default heading size instead of the
   small letter-spaced label Figma specifies. */
.achi-footer__colhead, .achi-footer__colhead .elementor-heading-title {
  font: 700 13px/1.23 var(--achi-font-ui);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--achi-surface-0); margin: 0 0 var(--achi-space-8);
}
/* Figma 11:139 spaces the footer link columns at 34px per row and keeps the
   EIN and legal type quieter than body copy. */
.achi-footer .elementor-nav-menu a { padding: 5px 0; }
.achi-footer .elementor-nav-menu--layout-vertical .elementor-item { padding-inline: 0; }
/* The EIN keeps its smaller size but not a dimmer colour — Ava's call: every
   piece of text on the two navy areas is white. Figma sets this one quieter;
   we are deliberately overriding that. Hierarchy here comes from size alone. */
.achi-footer__ein p { font-size: 13px; color: var(--achi-surface-0); margin: 0; }
.achi-footer__contact p { margin: 0 0 var(--achi-space-8); line-height: 1.7; }
.achi-footer__social p { margin: 0; display: flex; flex-wrap: wrap; gap: var(--achi-space-24); justify-content: flex-end; }
.achi-footer__legal { border-top: 1px solid rgba(255,255,255,.16); color: var(--achi-surface-0); }
.achi-footer__legal, .achi-footer__legal p { font-size: 13px; }

/* achi-tokens.css sets .achi-on-dark eyebrows to neutral-200. In the header
   strip and the footer the client wants white throughout, so override inside
   those two scopes only — the AA floor is unaffected, white is the higher
   contrast of the two. */
.achi-utilitybar .achi-eyebrow, .achi-footer .achi-eyebrow { color: var(--achi-surface-0); }

/* ---------- White-on-navy, no exceptions ----------
   achi-tokens.css tints .achi-on-dark copy to brand-100 and its eyebrows to
   neutral-200. Inside the header strip and the footer every text colour is
   white instead, by explicit instruction. Contrast improves rather than
   regresses (14.45:1 on brand-900), so nothing here weakens the AA floor the
   token rule exists to protect — it just stops applying in these two places.
   Elsewhere on dark surfaces the token rule still governs. */
.achi-utilitybar, .achi-utilitybar p, .achi-utilitybar a, .achi-utilitybar li,
.achi-utilitybar h1, .achi-utilitybar h2, .achi-utilitybar h3, .achi-utilitybar h4,
.achi-footer, .achi-footer p, .achi-footer a, .achi-footer li,
.achi-footer h1, .achi-footer h2, .achi-footer h3, .achi-footer h4 { color: var(--achi-surface-0); }
.achi-utilitybar .elementor-social-icon svg { fill: var(--achi-surface-0); }
/* Deliberately NOT a `*` selector, and no `span`: .achi-btn__label is a span,
   and a blanket rule here would repaint a white-background button's label white
   and make it invisible. Buttons keep their variant colours. */

/* ==========================================================================
   Nav Menu colour — beating Elementor's per-widget CSS.

   Elementor emits, in the per-POST stylesheet:
     .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item
       { color: var(--e-global-color-text) }
   That is specificity (0,3,0), and post-<id>.css is enqueued AFTER this file,
   so any (0,2,1) rule here loses on both counts. The footer Explore and Give
   columns kept rendering in the kit's grey body colour for exactly that reason.

   Scoping one class deeper puts these at (0,4,0), which wins regardless of load
   order. Both columns are the same widget type, so one rule covers both.
   ========================================================================== */
.achi-footer .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item,
.achi-footer .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.achi-footer .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus,
.achi-footer .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.achi-footer .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted {
  color: var(--achi-surface-0);
  fill: var(--achi-surface-0);
}

/* The header main bar sits on white, so it takes ink — same specificity problem,
   same fix. Without this the primary nav renders in the kit's global text
   colour rather than the design system's. */
.achi-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item {
  color: var(--achi-ink-900);
  fill: var(--achi-ink-900);
}
.achi-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.achi-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus,
.achi-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.achi-header .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted {
  color: var(--achi-brand-700);
  fill: var(--achi-brand-700);
}
/* Dropdown panels (Achi Store, News & Media) come from a separate Elementor
   rule set targeting .elementor-nav-menu--dropdown. */
.achi-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item,
.achi-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item {
  color: var(--achi-ink-900);
}
.achi-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item:hover,
.achi-header .elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-sub-item:hover {
  color: var(--achi-brand-700);
}