/* ==========================================================================
   LEIGH PAPA DESIGN SYSTEM  ·  "Spotlight Longhorn" (Design C)
   ==========================================================================
   ONE RULE FOR FUTURE MAINTAINERS:
   Change colors/fonts ONLY in the :root block below. Everything on the
   site reads from these variables. Do not edit individual sections.
   ========================================================================== */

:root{
  /* --- Brand colors (Leigh HS: pine green + gold) --- */
  --papa-ink:      #081712;   /* page background (deep pine) */
  --papa-panel:    #0f2a20;   /* card / panel background */
  --papa-panel-2:  #143528;   /* lighter panel */
  --papa-line:     #1b3a2d;   /* borders */
  --papa-gold:     #f5b301;   /* primary accent */
  --papa-gold-soft:#ffd75e;
  --papa-green:    #1e7a55;   /* secondary accent */
  --papa-mint:     #5fd3a5;   /* highlight accent */
  --papa-text:     #f4f2ec;   /* body text */
  --papa-muted:    #93a89c;   /* secondary text */

  /* --- Typography --- */
  --papa-font-display:'Archivo Black', 'Arial Black', sans-serif;
  --papa-font-body:'Archivo', Arial, sans-serif;

  /* --- Shape --- */
  --papa-radius: 18px;
  --papa-radius-pill: 999px;
}

/* ==========================================================================
   1. GLOBAL BASICS (front end only)
   ========================================================================== */
body{
  background-color: var(--papa-ink);
  font-family: var(--papa-font-body);
  color: var(--papa-text);
}

/* Selection highlight */
::selection{ background: var(--papa-gold); color:#04100b; }

/* ==========================================================================
   2. HEADER  (used by the Elementor header template via these classes)
   ========================================================================== */
.papa-topbar{
  background:#04100b; color:var(--papa-text);
  font-size:.8rem; padding:8px 0;
}
.papa-topbar a{ color:var(--papa-gold); text-decoration:none; }

.papa-header{
  background:rgba(8,23,18,.94);
  border-bottom:1px solid var(--papa-line);
}

/* --- Layout: one slim row, no wrapping.
       Kill every layer of padding/gap the builder stacks up:
       outer header column, its inner wrapper, both bars, and the nav widget. --- */
.papa-header{ padding:0 !important; gap:0 !important; row-gap:0 !important; min-height:0 !important; }
.papa-header > .e-con-inner{ gap:0 !important; row-gap:0 !important; padding:0 !important; }
.papa-topbar{ padding-top:6px !important; padding-bottom:6px !important; min-height:0 !important; }
.papa-header-inner{ flex-wrap:nowrap !important; padding-top:8px !important; padding-bottom:8px !important; min-height:0 !important; }
.papa-header-inner > .e-con-inner{ display:flex; flex-wrap:nowrap; align-items:center; justify-content:space-between; padding:0 !important; }
.papa-header .elementor-widget{ margin:0 !important; }
.papa-header .elementor-widget-container{ margin:0 !important; padding:0 !important; }
.papa-header .elementor-widget-nav-menu,
.papa-header .elementor-nav-menu--main,
.papa-header .elementor-nav-menu--main .elementor-nav-menu{ padding:0 !important; margin:0 !important; min-height:0 !important; }
.papa-header .elementor-nav-menu--main .elementor-nav-menu > li{ padding:0 !important; }

/* --- Logo block: gradient PAPA badge + two-line lockup.
       Structural selectors (no widget classes needed): the badge is a
       ::before in grid column 1; everything else is forced to column 2. --- */
.papa-header-inner > .e-con:first-child,
.papa-header-inner > .e-con-inner > .e-con:first-child{
  display:grid !important;
  grid-template-columns:44px auto;
  column-gap:12px; row-gap:0;
  align-items:center; align-content:center;
  width:auto !important; flex-shrink:0;
  padding:0 !important;
}
.papa-header-inner > .e-con:first-child > *,
.papa-header-inner > .e-con-inner > .e-con:first-child > *{
  grid-column:2 !important; width:auto !important;
}
.papa-header-inner > .e-con:first-child::before,
.papa-header-inner > .e-con-inner > .e-con:first-child::before{
  content:"PAPA";
  grid-column:1 !important; grid-row:1 / span 2;
  width:44px; height:44px; border-radius:50%;
  background:conic-gradient(from 200deg, var(--papa-gold), var(--papa-mint), var(--papa-green), var(--papa-gold));
  color:#04100b; font-family:var(--papa-font-display); font-size:.68rem;
  display:flex; align-items:center; justify-content:center;
}

/* --- Site title + tag: correct font/colors regardless of widget classes.
       First heading in the logo block = title, second = tag. --- */
.papa-header-inner .e-con:first-child .elementor-heading-title{
  font-family:var(--papa-font-body) !important;
  color:var(--papa-text) !important;
  white-space:nowrap;
}
.papa-header-inner .e-con:first-child .elementor-widget-heading:nth-of-type(1) .elementor-heading-title,
.papa-header-inner .e-con:first-child > .e-con-inner > .elementor-widget-heading:nth-of-type(1) .elementor-heading-title{
  font-weight:700 !important; font-size:1.05rem !important;
  letter-spacing:.02em; line-height:1.25 !important;
}
.papa-header-inner .e-con:first-child .elementor-widget-heading:nth-of-type(2) .elementor-heading-title,
.papa-header-inner .e-con:first-child > .e-con-inner > .elementor-widget-heading:nth-of-type(2) .elementor-heading-title{
  font-weight:600 !important; font-size:.7rem !important;
  color:var(--papa-muted) !important;
  letter-spacing:.14em !important; text-transform:uppercase !important;
  line-height:1.3 !important;
}
.papa-header-inner .e-con:first-child .elementor-heading-title a{ color:inherit !important; }

/* Legacy class-based hooks kept for templates that carry them */
.papa-site-title .elementor-heading-title{ font-family:var(--papa-font-body) !important; font-weight:700 !important; color:var(--papa-text) !important; font-size:1.05rem !important; }
.papa-site-tag .elementor-heading-title{ font-family:var(--papa-font-body) !important; font-size:.7rem !important; color:var(--papa-muted) !important; letter-spacing:.14em !important; text-transform:uppercase !important; }

/* --- Nav menu: white items, gold hover, no underline pointer, single row --- */
.papa-header .elementor-widget-nav-menu{ width:auto !important; flex-grow:0; flex-shrink:1; }
.papa-header .elementor-nav-menu--main .elementor-nav-menu{
  display:flex; flex-wrap:nowrap; gap:26px; align-items:center;
}
.papa-header .elementor-nav-menu--main .elementor-nav-menu > li{ margin:0 !important; }
.papa-header .elementor-nav-menu--main .elementor-item{
  color:var(--papa-text) !important;
  font-family:var(--papa-font-body) !important;
  font-weight:600 !important; font-size:.9rem !important;
  padding:4px 0 !important; line-height:1.3 !important;
  background:none !important;
}
.papa-header .elementor-nav-menu--main .elementor-item:hover,
.papa-header .elementor-nav-menu--main .elementor-item.elementor-item-active,
.papa-header .elementor-nav-menu--main .elementor-item.highlighted{
  color:var(--papa-gold) !important;
}
/* Kill the animated underline/pointer in every Elementor pointer mode */
.papa-header .elementor-item:before,
.papa-header .elementor-item:after{ display:none !important; }
/* Dropdown panel (submenus), if ever used */
.papa-header .elementor-nav-menu--dropdown{
  background:var(--papa-panel) !important; border:1px solid var(--papa-line); border-radius:12px;
}
.papa-header .elementor-nav-menu--dropdown .elementor-item{ color:var(--papa-text) !important; }
.papa-header .elementor-nav-menu--dropdown .elementor-item:hover{ color:var(--papa-gold) !important; }

/* ==========================================================================
   3. BUTTONS — one look everywhere.
      Works on Elementor buttons AND Gutenberg post buttons automatically.
   ========================================================================== */
.papa-btn .elementor-button,
.elementor-button,
.wp-block-button__link,
.papa-post .entry-content .wp-block-button__link{
  background: var(--papa-gold) !important;
  color:#04100b !important;
  border-radius: var(--papa-radius-pill) !important;
  font-family: var(--papa-font-body) !important;
  font-weight:700 !important;
  padding:12px 26px !important;
  border:none !important;
  text-decoration:none !important;
  transition:transform .15s ease;
}
.elementor-button:hover,
.wp-block-button__link:hover{ transform:translateY(-2px); color:#04100b !important; }

/* Outline variant: add class "is-style-outline" (built into Gutenberg)
   or "papa-btn-outline" on an Elementor button */
.is-style-outline .wp-block-button__link,
.papa-btn-outline .elementor-button{
  background:transparent !important;
  border:2px solid var(--papa-text) !important;
  color:var(--papa-text) !important;
}

/* ==========================================================================
   4. POST CONTENT — the heart of the volunteer system.
      Volunteers write plain posts in WordPress; everything inside the
      post area gets styled automatically. No Elementor needed.
   ========================================================================== */
.papa-post .elementor-widget-theme-post-content,
.papa-post .entry-content{
  font-family:var(--papa-font-body);
  color:var(--papa-text);
  font-size:1.05rem;
  line-height:1.7;
  max-width:760px;
  margin-left:auto; margin-right:auto;
}

/* Headings inside posts */
.papa-post h1, .papa-post h2{
  font-family:var(--papa-font-display);
  text-transform:uppercase;
  color:var(--papa-text);
  line-height:1.15;
  margin:1.6em 0 .5em;
}
.papa-post h2{ font-size:1.7rem; }
.papa-post h2::after{
  content:""; display:block; width:56px; height:4px;
  background:var(--papa-gold); margin-top:10px; border-radius:2px;
}
.papa-post h3{
  font-family:var(--papa-font-body); font-weight:700;
  color:var(--papa-gold-soft); font-size:1.2rem; margin:1.4em 0 .4em;
}

/* Paragraphs & links */
.papa-post p{ margin-bottom:1.1em; }
.papa-post .entry-content a,
.papa-post .elementor-widget-theme-post-content a{
  color:var(--papa-gold); text-decoration:underline; text-underline-offset:3px;
}
.papa-post a:hover{ color:var(--papa-gold-soft); }

/* Images — every image a volunteer inserts gets rounded corners + shadow */
.papa-post .entry-content img,
.papa-post .elementor-widget-theme-post-content img{
  border-radius: var(--papa-radius);
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  height:auto; max-width:100%;
}
.papa-post figcaption{
  color:var(--papa-muted); font-size:.85rem; text-align:center; margin-top:8px;
}

/* Image galleries */
.papa-post .wp-block-gallery img{ border-radius:12px; }

/* Quotes */
.papa-post blockquote{
  background:var(--papa-panel);
  border-left:4px solid var(--papa-gold);
  border-radius:0 var(--papa-radius) var(--papa-radius) 0;
  padding:20px 26px; margin:1.5em 0;
  font-style:italic; color:var(--papa-gold-soft);
}
.papa-post blockquote cite{ color:var(--papa-muted); font-style:normal; font-size:.85rem; }

/* Lists */
.papa-post ul, .papa-post ol{ margin:0 0 1.2em 1.3em; }
.papa-post li{ margin-bottom:.4em; }
.papa-post ul li::marker{ color:var(--papa-gold); }
.papa-post ol li::marker{ color:var(--papa-gold); font-weight:700; }

/* Tables (e.g., schedules, results) */
.papa-post table{
  width:100%; border-collapse:collapse; margin:1.5em 0;
  background:var(--papa-panel); border-radius:var(--papa-radius); overflow:hidden;
  font-size:.95rem;
}
.papa-post th{
  background:var(--papa-panel-2); color:var(--papa-gold);
  text-transform:uppercase; font-size:.78rem; letter-spacing:.08em;
  padding:12px 14px; text-align:left;
}
.papa-post td{ padding:12px 14px; border-top:1px solid var(--papa-line); }

/* Separators */
.papa-post hr{
  border:none; height:3px; width:80px;
  background:var(--papa-gold); border-radius:2px; margin:2.2em auto;
}

/* Embeds (YouTube, Google Calendar, forms) */
.papa-post iframe{ border-radius:var(--papa-radius); max-width:100%; border:0; }
.papa-post .wp-block-embed{ margin:1.5em 0; }

/* File/document links block */
.papa-post .wp-block-file{
  background:var(--papa-panel); border:1px solid var(--papa-line);
  border-radius:var(--papa-radius); padding:14px 18px; margin:1em 0;
}
.papa-post .wp-block-file a{ color:var(--papa-gold); font-weight:600; }

/* Post title + meta (used in the Single Post template) */
.papa-post-title .elementor-heading-title,
.papa-post .entry-title{
  font-family:var(--papa-font-display); text-transform:uppercase;
  color:var(--papa-text); line-height:1.1;
}
.papa-post-meta{ color:var(--papa-muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.1em; }

/* ==========================================================================
   5. BLOG / NEWS LIST — post cards on archive pages
   ========================================================================== */
.papa-post-card,
.papa-archive .elementor-post{
  background:var(--papa-panel);
  border:1px solid var(--papa-line);
  border-radius:var(--papa-radius);
  overflow:hidden;
}
.papa-archive .elementor-post__title,
.papa-archive .elementor-post__title a{
  font-family:var(--papa-font-body); font-weight:700; color:var(--papa-text);
}
.papa-archive .elementor-post__title a:hover{ color:var(--papa-gold); }
.papa-archive .elementor-post__excerpt{ color:var(--papa-muted); }
.papa-archive .elementor-post__read-more{ color:var(--papa-gold); font-weight:700; }
.papa-archive .elementor-post__badge{
  background:var(--papa-gold); color:#04100b;
  border-radius:var(--papa-radius-pill); font-weight:700;
}

/* ==========================================================================
   6. FOOTER
   ========================================================================== */
.papa-footer{
  background:var(--papa-ink);
  border-top:1px solid var(--papa-line);
  color:var(--papa-muted); font-size:.85rem;
}
.papa-footer a{ color:var(--papa-gold); text-decoration:none; }
.papa-footer a:hover{ color:var(--papa-gold-soft); }
.papa-footer .papa-footer-heading{
  color:var(--papa-text); font-weight:700; font-size:.9rem;
  text-transform:uppercase; letter-spacing:.12em;
}

/* ==========================================================================
   7. REUSABLE HELPERS (used by Elementor sections; volunteers never touch)
   ========================================================================== */
.papa-panel{
  background:var(--papa-panel); border:1px solid var(--papa-line);
  border-radius:24px;
}
.papa-kicker{
  display:inline-block; background:rgba(245,179,1,.15);
  border:1px solid var(--papa-gold); color:var(--papa-gold);
  font-size:.75rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; padding:6px 16px; border-radius:var(--papa-radius-pill);
}
.papa-ticker{
  background:var(--papa-gold); color:#04100b; font-weight:700; font-size:.9rem;
}
.papa-cta-band{
  background:linear-gradient(120deg,#0f5c3f,var(--papa-green) 55%,#2ea36f);
  border-radius:24px;
}

/* ==========================================================================
   8. HOME PAGE — Design C fidelity (used by the "PAPA Home" template)
   ========================================================================== */

/* Hero spotlight gradients: gold + green stage lights over the photo */
.papa-hero{ position:relative; }
.papa-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(ellipse 60% 80% at 20% 0%, rgba(245,179,1,.32), transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 20%, rgba(30,122,85,.45), transparent 60%),
    linear-gradient(to top, var(--papa-ink) 0%, transparent 45%);
}
.papa-hero > .e-con-inner,
.papa-hero > .elementor-widget,
.papa-hero > .e-con{ position:relative; z-index:2; }

/* Hero layout: box the content to the design width, centered on the page,
   text left-aligned inside — matches the Netlify original */
.papa-hero > .elementor-widget,
.papa-hero > .e-con,
.papa-hero > .e-con-inner{
  max-width:1110px; width:100%;
  margin-left:auto !important; margin-right:auto !important;
}

/* Hero kicker pill — styles the inner title ONLY.
   The widget wrapper is explicitly neutralized so the pill never doubles up. */
.papa-hero .elementor-widget-heading:first-of-type .elementor-heading-title,
.papa-hero > .e-con-inner > .elementor-widget-heading:first-of-type .elementor-heading-title,
.papa-kicker .elementor-heading-title{
  display:inline-block; width:auto;
  background:rgba(245,179,1,.15);
  border:1px solid var(--papa-gold); color:var(--papa-gold) !important;
  font-family:var(--papa-font-body) !important;
  font-size:.75rem !important; font-weight:700 !important;
  letter-spacing:.18em !important; text-transform:uppercase !important;
  padding:6px 16px; border-radius:var(--papa-radius-pill);
  margin-bottom:22px;
}
.elementor-widget.papa-kicker,
.papa-hero .elementor-widget-heading:first-of-type{
  background:transparent !important; border:none !important;
  padding:0 !important; width:auto;
}

/* Hero H1 — display face, white, never kit-blue */
.papa-hero h1.elementor-heading-title{
  font-family:var(--papa-font-display) !important;
  color:var(--papa-text) !important;
  text-transform:uppercase; line-height:1.05 !important;
}

/* Hero subtitle — Archivo medium, bright white, design width */
.papa-hero .elementor-widget-text-editor{
  font-family:var(--papa-font-body) !important;
  color:var(--papa-text) !important;
  font-size:1.2rem !important; font-weight:500;
  line-height:1.6; max-width:580px;
}
.papa-hero .elementor-widget-text-editor p{ color:inherit; font-size:inherit; font-weight:inherit; margin:0; }

/* Secondary (outline) buttons — structural: 2nd button in hero + CTA rows */
.papa-hero .elementor-widget-button:nth-of-type(2) .elementor-button,
.papa-cta-band .elementor-widget-button:nth-of-type(2) .elementor-button{
  background:transparent !important;
  border:2px solid var(--papa-text) !important;
  color:var(--papa-text) !important;
}

/* Gold news ticker */
.papa-ticker{
  background:var(--papa-gold); color:#04100b;
  font-weight:700; font-size:.9rem;
  overflow:hidden; white-space:nowrap;
}
.papa-ticker-track{ display:inline-block; padding:10px 0; animation:papa-marquee 28s linear infinite; }
.papa-ticker-track span{ margin:0 34px; }
@keyframes papa-marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* Impact stat tiles */
.papa-impact-item{
  background:var(--papa-panel); border:1px solid var(--papa-line);
  border-radius:var(--papa-radius); text-align:center;
}
.papa-impact-item .elementor-widget-heading:nth-of-type(1) .elementor-heading-title,
.papa-impact-item .e-con-inner > .elementor-widget-heading:nth-of-type(1) .elementor-heading-title,
.papa-impact-num .elementor-heading-title,
.papa-impact-num{
  font-family:var(--papa-font-display) !important; font-size:2.2rem !important; color:var(--papa-gold) !important;
}
.papa-impact-item .elementor-widget-heading:nth-of-type(2) .elementor-heading-title,
.papa-impact-item .e-con-inner > .elementor-widget-heading:nth-of-type(2) .elementor-heading-title,
.papa-impact-label .elementor-heading-title,
.papa-impact-label{ color:var(--papa-muted) !important; font-size:.85rem !important; font-family:var(--papa-font-body) !important; }

/* CTA band gold glow (matches Design C) */
.papa-cta-band{ position:relative; overflow:hidden; }
.papa-cta-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 80% 15%, rgba(245,179,1,.25), transparent 50%);
}
.papa-cta-band > *{ position:relative; z-index:2; }

/* ==========================================================================
   9. CONTENT PAGE POLISH (Hello Elementor theme pages)
   ========================================================================== */

/* Page titles get the Design C display treatment */
h1.entry-title{
  font-family:var(--papa-font-display); text-transform:uppercase;
  color:var(--papa-text); text-align:center; line-height:1.1;
  font-size:clamp(1.9rem, 4vw, 2.8rem);
  max-width:760px; margin:56px auto 10px; padding:0 20px;
}
h1.entry-title::after{
  content:""; display:block; width:64px; height:4px;
  background:var(--papa-gold); margin:16px auto 0; border-radius:2px;
}
.page .site-main, .single .site-main{ padding-bottom:70px; }

/* Center + breathe: the papa-post wrapper group on pages */
.papa-post.wp-block-group{ padding:24px 20px 0; }

/* Button rows inside posts/pages */
.papa-post .wp-block-buttons{ gap:12px; margin:0 0 1.4em; }

/* Separators inside pages match Design C */
.papa-post .wp-block-separator{
  border:none; height:3px; width:80px;
  background:var(--papa-gold); border-radius:2px; margin:2.2em auto;
}

/* ==========================================================================
   10. MOBILE POLISH
   ========================================================================== */
@media (max-width:767px){
  .papa-post .entry-content,
  .papa-post .elementor-widget-theme-post-content{ font-size:1rem; }
  .papa-post h2{ font-size:1.4rem; }
  .papa-post table{ display:block; overflow-x:auto; }
}