/* ============================================================================
   Greenford Nano and Cancer Foundation — Elementor Custom CSS
   /css/greenford-elementor.css

   WHERE TO LOAD THIS:
   Elementor → Site Settings → Custom CSS (Pro), OR your child theme's
   style.css, OR a "Simple Custom CSS" plugin if not using Elementor Pro.
   Do NOT paste this into a single widget's individual "Custom CSS" field —
   it's meant to be site-wide.

   HOW TO USE THE gf-* CLASSES:
   On any Elementor widget/container, open Advanced → CSS Classes and type
   the class name (e.g. gf-card, gf-program-card). No code editing needed
   after that — this is what keeps the site Elementor-editable per your
   Section 17 requirement.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS (mirrors Phase 3 — keep in sync if tokens change)
   --------------------------------------------------------------------------- */
:root {
  --gf-primary: #0D9488;
  --gf-secondary: #0EA5E9;
  --gf-secondary-dark: #0369A1;
  --gf-accent: #EA580C;
  --gf-accent-hover: #C2410C;
  --gf-text: #0F172A;
  --gf-muted: #64748B;
  --gf-background: #FFFFFF;
  --gf-surface: #F0FDFA;
  --gf-dark-surface: #0F766E;
  --gf-border: #CBD5E1;
  --gf-radius-sm: 8px;
  --gf-radius-md: 12px;
  --gf-radius-lg: 16px;
  --gf-container: 1200px;
  --gf-section-space: clamp(48px, 6vw, 96px);
  --gf-font-heading: "Sora", "Inter", sans-serif;
  --gf-font-body: "Inter", "Sora", sans-serif;
}

/* ---------------------------------------------------------------------------
   2. FONT LOADING
   Elementor's Global Fonts (Site Settings) will normally enqueue Google
   Fonts for you once Sora/Inter are set there (Phase 7 §4). This @import
   is a fallback only — remove it once Global Fonts is confirmed working,
   to avoid loading the fonts twice.
   --------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------------------------
   3. BASE / ACCESSIBILITY (site-wide, not tied to a CSS class)
   --------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body { font-family: var(--gf-font-body); color: var(--gf-text); }
h1, h2, h3, h4, h5, h6 { font-family: var(--gf-font-heading); }

/* Visible keyboard focus everywhere, including inside Elementor widgets */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.elementor-element:focus-visible {
  outline: 3px solid var(--gf-secondary) !important;
  outline-offset: 2px;
}

/* Skip link — add via Elementor's Header template as an HTML widget wrapping
   only this one element, or a "Skip Link" block if your theme provides one */
.gf-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gf-primary); color: #fff;
  padding: 12px 20px; border-radius: 0 0 8px 0;
  font-weight: 600; font-size: 14px;
}
.gf-skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------------
   4. LAYOUT UTILITIES
   --------------------------------------------------------------------------- */
.gf-section { padding-top: var(--gf-section-space); padding-bottom: var(--gf-section-space); }
.gf-section-tight { padding-top: calc(var(--gf-section-space) / 2); padding-bottom: calc(var(--gf-section-space) / 2); }
.gf-readable { max-width: 68ch; }
.gf-muted { color: var(--gf-muted) !important; }
.gf-surface-bg { background: var(--gf-surface) !important; }
.gf-dark-bg { background: var(--gf-dark-surface) !important; }

/* Eyebrow label — apply to a Heading or Text Editor widget */
.gf-eyebrow {
  font-family: var(--gf-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--gf-secondary-dark) !important;
}

/* ---------------------------------------------------------------------------
   5. CARDS (apply to a Container's Advanced > CSS Classes field)
   --------------------------------------------------------------------------- */
.gf-card {
  background: var(--gf-surface);
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-radius-lg);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.gf-card:hover { border-color: var(--gf-secondary); }

.gf-program-card, .gf-research-card {
  background: var(--gf-surface);
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-radius-lg);
  padding: 28px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.gf-program-card:hover, .gf-research-card:hover {
  border-color: var(--gf-secondary);
  transform: translateY(-3px);
}

.gf-impact-card {
  background: #fff;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-radius-lg);
  padding: 24px;
}
.gf-impact-card--pending { border-style: dashed; }

/* ---------------------------------------------------------------------------
   6. BUTTONS — extends Elementor's native .elementor-button rather than
   replacing it, so Elementor's built-in hover/focus/loading states still work
   --------------------------------------------------------------------------- */
.gf-button-primary.elementor-button {
  background-color: var(--gf-accent) !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: var(--gf-radius-sm) !important;
}
.gf-button-primary.elementor-button:hover { background-color: var(--gf-accent-hover) !important; }

.gf-button-secondary.elementor-button {
  background-color: transparent !important;
  color: var(--gf-secondary-dark) !important;
  border: 1px solid var(--gf-secondary) !important;
  border-radius: var(--gf-radius-sm) !important;
}
.gf-button-secondary.elementor-button:hover { background-color: rgba(94,137,100,0.1) !important; }

.gf-donation-cta { background: var(--gf-accent) !important; color: #fff !important; border-radius: var(--gf-radius-lg) !important; }

/* ---------------------------------------------------------------------------
   7. VERIFY TAG — flags unverified content directly in the editor/front end
   (use for anything still carrying a [VERIFY BEFORE PUBLISHING] note)
   --------------------------------------------------------------------------- */
.gf-verify-tag {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #92400E; background: #FEF3C7; border: 1px solid #FDE68A;
  border-radius: 999px; padding: 2px 10px;
}

/* ---------------------------------------------------------------------------
   8. ELEMENTOR WIDGET OVERRIDES (brand consistency for native widgets)
   --------------------------------------------------------------------------- */

/* Accordion (FAQ) — brand the active state */
.elementor-widget-accordion .elementor-accordion-item {
  border-color: var(--gf-border) !important;
}
.elementor-widget-accordion .elementor-tab-title.elementor-active {
  color: var(--gf-secondary-dark) !important;
}

/* Tabs (Donate fund selector) — active tab in maroon per Phase 3 component tokens */
.elementor-widget-tabs .elementor-tab-title.elementor-active {
  background-color: var(--gf-accent) !important;
  color: #fff !important;
  border-radius: var(--gf-radius-sm);
}

/* Icon List checkmarks in brand secondary color */
.elementor-widget-icon-list .elementor-icon-list-icon i { color: var(--gf-secondary); }

/* Nav Menu widget (header) — active/hover state */
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
  color: var(--gf-secondary) !important;
}

/* Testimonial widget (Chairman/Advisor message) */
.elementor-widget-testimonial .elementor-testimonial__content {
  font-style: italic;
  color: var(--gf-text);
}

/* Counter widget (verified impact stats only — never on unverified figures) */
.elementor-widget-counter .elementor-counter-number-wrapper {
  font-family: var(--gf-font-heading) !important;
  font-weight: 800 !important;
  color: var(--gf-primary) !important;
}

/* Form widget — match input styling to the rest of the site */
.elementor-field-group .elementor-field {
  border-color: var(--gf-border) !important;
  border-radius: var(--gf-radius-sm) !important;
}
.elementor-field-group .elementor-field:focus-visible {
  outline: 3px solid var(--gf-secondary) !important;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   9. MOBILE NAV FIXES
   Elementor's Nav Menu widget mobile dropdown sometimes inherits the theme's
   default (often white) background — force it to brand navy for contrast.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementor-nav-menu--dropdown,
  .elementor-nav-menu__container {
    background-color: var(--gf-primary) !important;
  }
  .elementor-nav-menu--dropdown .elementor-item {
    color: rgba(255,255,255,0.85) !important;
  }
}

/* ---------------------------------------------------------------------------
   10. RESPONSIVE / MISC FIXES
   --------------------------------------------------------------------------- */
img { max-width: 100%; height: auto; }

/* Prevent horizontal scroll from any wide embedded table/iframe */
.gf-scroll-x { overflow-x: auto; }

/* Justified body text used in several long-form pages (About, Programs) —
   keep readable line length even when justified */
.gf-justify { text-align: justify; max-width: 68ch; }