/*
Theme Name: Hello Elementor Child - FAN
Template: hello-elementor
Description: Film Africa Network child theme -- design tokens, base styles and image sizes for the fan-core content plugin.
Version: 1.0.0
Text Domain: hello-elementor-child
*/

:root {
  /* Brand */
  --fan-black:        #000000;
  --fan-gold:         #F1C24B;
  --fan-green:        #234D36;
  --fan-green-border: #2F6446;
  --fan-paper:        #F5F3EF;

  /* Neutral ink ramp -- dark surfaces */
  --fan-bg:           #0B0B0B;
  --fan-surface:      #141414;
  --fan-border:       #1F1F1F;
  --fan-border-2:     #2A2A2A;

  /* Text on dark */
  --fan-text:         #F5F3EF;
  --fan-text-2:       #CFC9C0;
  --fan-text-3:       #A8A39B;
  --fan-text-meta:    #8F8A82;
  --fan-text-faint:   #6F6A62;

  /* Text on light */
  --fan-ink:          #1A1A1A;
  --fan-ink-2:        #3A362F;
  --fan-ink-3:        #6B665C;

  /* Gold-tinted notice surface */
  --fan-notice-bg:     #181307;
  --fan-notice-border: #3A2E0E;
  --fan-notice-text:   #E8D9A8;

  /* Type */
  --fan-display: 'Big Shoulders Display', sans-serif;
  --fan-body:    'IBM Plex Sans', system-ui, sans-serif;
  --fan-mono:    'IBM Plex Mono', monospace;

  /* Radius -- cinema, not app */
  --fan-radius:      2px;
  --fan-radius-pill: 999px;

  /* Layout */
  --fan-max:     1280px;
  --fan-max-wide: 1440px;
  --fan-gutter:  24px;

  /* Focus */
  --fan-focus: 2px solid var(--fan-gold);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--fan-bg);
  color: var(--fan-text);
  font-family: var(--fan-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fan-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.98;
  margin: 0 0 0.5em;
  color: inherit;
}

a { color: var(--fan-gold); text-decoration: none; }
a:hover { color: #FFFFFF; }

::selection { background: var(--fan-gold); color: #000; }

/* Focus -- required on every interactive element */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: var(--fan-focus); outline-offset: 2px; border-radius: 1px;
}

/* Form fields */
input, select, textarea {
  background: #000;
  border: 1px solid var(--fan-border-2);
  color: var(--fan-text);
  font-family: inherit;
  font-size: 15px;
  padding: 13px 14px;
  min-height: 44px;
  border-radius: var(--fan-radius);
}
input::placeholder, textarea::placeholder { color: var(--fan-text-faint); }

/* Type scale -- carry the clamps across; tested at every breakpoint */
.fan-h1 { font-family: var(--fan-display); font-weight: 900; font-size: clamp(38px, 7vw, 84px);   line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em; }
.fan-h2 { font-family: var(--fan-display); font-weight: 900; font-size: clamp(24px, 3.2vw, 36px); text-transform: uppercase; letter-spacing: 0.02em; }
.fan-h3 { font-family: var(--fan-display); font-weight: 900; font-size: clamp(22px, 2.8vw, 32px); text-transform: uppercase; letter-spacing: 0.03em; }
.fan-lead { font-size: clamp(16px, 1.7vw, 19px); color: var(--fan-text-2); max-width: 66ch; text-wrap: pretty; }
.fan-body { font-size: 16px; line-height: 1.6; color: var(--fan-text); }
.fan-meta { font-family: var(--fan-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fan-text-meta); }
.fan-eyebrow { font-family: var(--fan-mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fan-gold); }

/* Primary CTA */
.fan-cta {
  background: var(--fan-gold); color: #000; font-weight: 700;
  font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 13px 20px; border-radius: var(--fan-radius); border: 0;
  min-height: 44px; display: inline-flex; align-items: center;
  cursor: pointer;
}
.fan-cta:hover { background: #FFD978; color: #000; }

/* Card hover -- border warms to gold, nothing moves */
.fan-card { background: var(--fan-black); border: 1px solid var(--fan-border); }
.fan-card:hover { border-color: var(--fan-gold); }

/* Posters, stills and all imagery stay square-cornered. No drop shadows. */
.fan-image, .fan-card img { border-radius: 0; box-shadow: none; }

/* --------------------------------------------------------------------
   Elementor Pro 4.2.3 loop-grid CSS fix.
   The plugin's own frontend markup uses classes like "elementor-grid-4"
   on the widget, but its bundled widget-loop-grid.min.css only defines
   rules for "elementor-widget-loop-grid-4" -- a naming mismatch inside
   the plugin itself, so the grid never actually applies display:grid and
   every loop grid on the site silently collapses into one very tall
   single column. Patched here rather than editing plugin files, which
   would be overwritten on the next Elementor Pro update.
-------------------------------------------------------------------- */
.elementor-widget-loop-grid.elementor-grid-1 .elementor-loop-container { display: grid; grid-template-columns: repeat(1, 1fr); }
.elementor-widget-loop-grid.elementor-grid-2 .elementor-loop-container { display: grid; grid-template-columns: repeat(2, 1fr); }
.elementor-widget-loop-grid.elementor-grid-3 .elementor-loop-container { display: grid; grid-template-columns: repeat(3, 1fr); }
.elementor-widget-loop-grid.elementor-grid-4 .elementor-loop-container { display: grid; grid-template-columns: repeat(4, 1fr); }
.elementor-widget-loop-grid.elementor-grid-5 .elementor-loop-container { display: grid; grid-template-columns: repeat(5, 1fr); }
.elementor-widget-loop-grid.elementor-grid-6 .elementor-loop-container { display: grid; grid-template-columns: repeat(6, 1fr); }
.elementor-widget-loop-grid .elementor-loop-container { gap: 20px; }

@media (max-width: 1024px) {
  .elementor-widget-loop-grid.elementor-grid-tablet-1 .elementor-loop-container { grid-template-columns: repeat(1, 1fr) !important; }
  .elementor-widget-loop-grid.elementor-grid-tablet-2 .elementor-loop-container { grid-template-columns: repeat(2, 1fr) !important; }
  .elementor-widget-loop-grid.elementor-grid-tablet-3 .elementor-loop-container { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767px) {
  .elementor-widget-loop-grid.elementor-grid-mobile-1 .elementor-loop-container { grid-template-columns: repeat(1, 1fr) !important; }
  .elementor-widget-loop-grid.elementor-grid-mobile-2 .elementor-loop-container { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Home hero — real photography + art-directed scrims (IMAGE-MANIFEST.md § Home) */
.elementor-element.fan-hero-home {
  filter: brightness(1.12) saturate(1.04);
  background-color: #05070A;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: left top, left top, left top, center center;
  background-size: 100% 100%, 100% 100%, min(720px,82%) 100%, cover;
  background-image: linear-gradient(90deg,rgba(2,4,7,0.4) 0%,rgba(2,4,7,0.3) 34%,rgba(2,4,7,0.1) 58%,rgba(2,4,7,0) 76%), linear-gradient(180deg,rgba(2,4,7,0.5) 0%,rgba(2,4,7,0) 20%,rgba(2,4,7,0) 72%,rgba(2,4,7,0.45) 100%), linear-gradient(90deg,rgba(2,4,7,0.52) 0%,rgba(2,4,7,0.46) 45%,rgba(2,4,7,0.18) 68%,rgba(2,4,7,0) 100%), url('https://filmafricanetwork.com/wp-content/uploads/fan-branding/heroes/hero-open-air-cinema.png');
}


/* Home hero text — shadow lift for legibility over photography (design spec) */
.elementor-element-f446df0.elementor-heading-title { text-shadow: 0 0 28px rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,0.95), 0 1px 2px rgba(0,0,0,0.9); }
.elementor-element-7cbea44.elementor-heading-title { text-shadow: 0 0 18px rgba(0,0,0,1), 0 2px 6px rgba(0,0,0,0.95); }
.elementor-element-469cc53 .elementor-widget-container, .elementor-element-469cc53 p { text-shadow: 0 0 14px rgba(0,0,0,1), 0 1px 3px rgba(0,0,0,0.95); }