/*
 * EduMinds Africa shared design tokens.
 * This file defines shared tokens, opt-in type utilities and reusable actions.
 * It intentionally does not globally restyle Elementor widgets or theme layouts.
 */
:root {
  /* Brand colors */
  --em-color-forest: #102A1B;
  --em-color-green: #23843B;
  --em-color-gold: #D9A441;
  --em-color-text: #34443B;
  --em-color-muted-text: #66736B;
  --em-color-white: #FFFFFF;

  /* Page surfaces */
  --em-color-canvas: #F0EBDD;
  --em-color-sage: #E3EBE2;
  --em-color-card: #FFFFFF;

  /* Approved fonts loaded by functions.php; the Site Kit uses these families too. */
  --em-font-heading: "Newsreader", Georgia, serif;
  --em-font-body: "Geist", Arial, sans-serif;

  /* Responsive type scale */
  --em-size-display: clamp(3rem, 5.5vw, 4.75rem);
  --em-size-h1: clamp(2.5rem, 4.5vw, 4rem);
  --em-size-h2: clamp(2rem, 3.3vw, 3rem);
  --em-size-h3: clamp(1.375rem, 2vw, 1.75rem);
  --em-size-body: 1.0625rem;
  --em-size-small: 0.9375rem;
  --em-size-label: 0.75rem;

  /* Type weights and rhythm */
  --em-weight-regular: 400;
  --em-weight-medium: 500;
  --em-weight-semibold: 600;
  --em-line-heading: 1.08;
  --em-line-body: 1.65;
  --em-letter-heading: -0.025em;
  --em-letter-label: 0.11em;
}

/* Apply to an Elementor widget only when its CSS Classes field includes em-eyebrow. */
.em-eyebrow {
  font-family: var(--em-font-body);
  font-size: var(--em-size-label);
  font-weight: var(--em-weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--em-letter-label);
  text-transform: uppercase;
}

/* Approved action system. Only explicit em-action components are styled. */
  .em-action:is(.em-action--primary,.em-action--trail,.em-action--campaign) {
    --em-action-ink: #14291D;
    --em-action-accent: #F5DC9F;
    --em-action-focus: #2A7F3E;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    max-width: 100% !important;
    font: 600 16px/1.2 var(--em-font-body, "Geist", Arial, sans-serif) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none !important;
    cursor: pointer !important;
  }
  .em-action:is(.em-action--primary,.em-action--trail,.em-action--campaign)[hidden] { display: none !important; }
  .em-action:is(.em-action--primary,.em-action--trail,.em-action--campaign)::before, .em-action:is(.em-action--primary,.em-action--trail,.em-action--campaign)::after { content: none !important; display: none !important; }
  .em-action-label, .em-action .em-action-label { color: inherit !important; font: inherit !important; }
  .em-action-slot, .em-action .em-action-slot {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 18px !important;
    flex: none !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
  }
  .em-action-svg, .em-action .em-action-svg {
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    flex: none !important;
    margin: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
  }
  .em-action-svg path, .em-action .em-action-svg path { fill: none !important; stroke: currentColor !important; }
  .em-action:is(.em-action--primary,.em-action--trail,.em-action--campaign):focus-visible {
    outline: 3px solid var(--em-action-focus) !important;
    outline-offset: 5px !important;
  }
  .em-action.em-action--primary {
    justify-content: center !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 14px 20px !important;
    border: 0 !important;
    border-radius: var(--em-action-radius, 3px) !important;
    background: var(--em-color-green, #23843B) !important;
    color: #fff !important;
    box-shadow: none !important;
    transition: transform .3s cubic-bezier(.3,1.7,.5,1), background-color .2s !important;
  }
  .em-action.em-action--primary:is(:hover,:focus-visible) {
    background: var(--em-color-forest, #102A1B) !important;
    transform: translateY(-2px) rotate(-1deg) !important;
  }
  .em-action.em-action--primary .em-action-svg {
    transition: transform .3s cubic-bezier(.3,1.8,.5,1) !important;
  }
  .em-action.em-action--primary:is(:hover,:focus-visible) .em-action-svg { transform: translate(2px,-2px) !important; }
  .em-action.em-action--trail, .em-action.em-action--campaign {
    justify-content: flex-start !important;
    width: fit-content !important;
    min-width: 0 !important;
    min-height: 32px !important;
    height: auto !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--em-action-ink) !important;
    box-shadow: none !important;
    transform: none !important;
    white-space: normal !important;
  }
  .em-action.em-action--trail:is(:hover,:focus-visible) { background: none !important; color: var(--em-action-ink) !important; }
  .em-action-trail {
    display: inline-flex !important;
    align-items: center !important;
    height: 18px !important;
    flex: none !important;
    line-height: 0 !important;
  }
  .em-action-trail i {
    display: block !important;
    height: 2px !important;
    width: 14px !important;
    border-radius: 2px !important;
    background: currentColor !important;
    transition: width .35s cubic-bezier(.3,1.6,.5,1) !important;
  }
  .em-action-trail .em-action-svg {
    width: 11px !important;
    height: 11px !important;
    margin-left: -9px !important;
    stroke-width: 2.4 !important;
  }
  .em-action.em-action--trail:is(:hover,:focus-visible) .em-action-trail i { width: 36px !important; }
  .em-action.em-action--campaign {
    --em-action-accent: var(--c, #F5DC9F);
    min-height: 0 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
    align-self: flex-start !important;
    margin-top: auto !important;
    background: linear-gradient(var(--em-action-accent),var(--em-action-accent)) 0 100% / 100% 34% no-repeat !important;
    transition: background-size .35s cubic-bezier(.2,.8,.3,1), color .25s !important;
  }
  .em-action.em-action--campaign:is(:hover,:focus-visible) { background-size: 100% 100% !important; color: #14291D !important; }
  .em-action.em-action--campaign .em-action-svg { transition: transform .3s cubic-bezier(.3,1.8,.5,1) !important; }
  .em-action.em-action--campaign:is(:hover,:focus-visible) .em-action-svg { transform: translate(3px,-3px) !important; }
  .em-action.em-action--on-dark { --em-action-ink: #F1EBDD; --em-action-focus: #9ED8A8; }
  .em-action.em-action--gold { background: #D9A441 !important; color: #14291D !important; }
  .em-action.em-action--gold:is(:hover,:focus-visible) { background: #F5DC9F !important; }
  
  .em-menu-mobile .em-action-slot { margin-left: auto !important; }
  .em-menu-mobile .em-donate-link { justify-content: flex-start !important; }
  .em-menu-mobile .em-donate-link .em-action-slot { margin-left: auto !important; }
  .em-nav-inner .em-donate-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  [data-em-navigation] a .em-action-svg {
    transition: transform .3s cubic-bezier(.3,1.8,.5,1) !important;
  }
  [data-em-navigation] a:is(:hover,:focus-visible) .em-action-svg {
    transform: translate(2px,-2px) !important;
  }
  [data-em-navigation] a:focus-visible {
    outline: 3px solid var(--em-color-green, #23843B) !important;
    outline-offset: 5px !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .em-action:is(.em-action--primary,.em-action--trail,.em-action--campaign), .em-action:is(.em-action--primary,.em-action--trail,.em-action--campaign) *, [data-em-navigation] .em-action-svg { transition: none !important; }
    .em-action.em-action--primary:is(:hover,:focus-visible),
    .em-action:is(.em-action--primary,.em-action--trail,.em-action--campaign):is(:hover,:focus-visible) .em-action-svg,
    [data-em-navigation] a:is(:hover,:focus-visible) .em-action-svg { transform: none !important; }
  }
/* Footer typography and spacing stay part of the existing footer layout. */
.em-footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.em-footer-nav a { text-decoration: none; }
.em-work-cta { text-align: left; }
#em-work-in-action, #em-general-gift { scroll-margin-top: 110px; }