/* ============================================================
   In the Trenches 2026 — Conference Stylesheet
   Loads AFTER style.css. Scoped overrides + conference components.

   PALETTE (on-brand with EWW):
     --eww-sage    #4a5c3e   EWW primary green — headings on light bg
     --eww-gold    #d4af37   EWW gold — shared accent, both sites
     --conf-brown  #36272c   Conference dark panel (banner, CTAs)
     --conf-gold-lt #e8d5a3  Light gold — body text on dark panels
     --ink         #2c3e50   Neutral dark for body headings
   ============================================================ */

:root {
    --eww-sage:     #4a5c3e;
    --eww-gold:     #d4af37;
    --conf-brown:   #36272c;
    --conf-gold-lt: #e8d5a3;
    --ink:          #2c3e50;
    --muted:        #666;
    --rule:         #e8e0d4;
    --paper:        #fdfdfb;
    --serif:  'Playfair Display', serif;
    --sans:   'Source Sans 3', sans-serif;
}

/* ------------------------------------------------------------
   1. NEUTRALIZE THE GLOBAL HEADING RULE
   style.css line 2 forces ALL headings to sage with !important:
       h1,h2,h3,h4,h5,h6 { color: #4a5c3e !important; }
   That's fine on white, but 1.95:1 (invisible) on our dark panels.
   We scope headings by context instead of fighting per-element.
   ------------------------------------------------------------ */

/* Headings on dark conference panels -> gold */
.conf-dark h1, .conf-dark h2, .conf-dark h3,
.conf-dark h4, .conf-dark h5, .conf-dark h6 {
    color: var(--eww-gold) !important;
}

/* Headings on light conference panels -> neutral ink */
.conf-light h1, .conf-light h2, .conf-light h3,
.conf-light h4, .conf-light h5, .conf-light h6 {
    color: var(--ink) !important;
}

/* Opt-in helpers for one-off cases */
.conf-h-gold  { color: var(--eww-gold) !important; }
.conf-h-sage  { color: var(--eww-sage) !important; }
.conf-h-ink   { color: var(--ink) !important; }
.conf-h-light { color: var(--conf-gold-lt) !important; }

/* Conference headings use the display serif */
.conf-dark h1, .conf-dark h2, .conf-dark h3,
.conf-light h1, .conf-light h2, .conf-light h3 {
    font-family: var(--serif) !important;
}

/* ------------------------------------------------------------
   2. PANELS
   ------------------------------------------------------------ */
.conf-dark {
    background: var(--conf-brown);
    border-radius: 12px;
}
.conf-dark p,
.conf-dark li {
    color: var(--conf-gold-lt);
}

.conf-light {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.07);
    border-top: 3px solid var(--eww-gold);
}
.conf-light p { color: var(--muted); }

/* ------------------------------------------------------------
   3. SPONSOR / FUNDER LOGO TILES
   ------------------------------------------------------------ */
.logo-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 18px;
}
.logo-tile {
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 18px 22px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    min-width: 150px;
    transition: border-color 0.2s, transform 0.2s;
}
.logo-tile:hover { border-color: var(--eww-gold); transform: translateY(-2px); }
.logo-tile img {
    max-height: 100%;
    max-width: 190px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}
/* NEA logo ships with a baked-in black background */
.logo-tile.on-dark { background: #000; border-color: #000; }
.logo-tile.on-dark:hover { border-color: var(--eww-gold); }

.logo-tile--lg { height: 130px; min-width: 175px; padding: 20px 24px; }
.logo-tile--lg img { max-width: 215px; }

/* ------------------------------------------------------------
   4. FUNDERS SECTION (home page)
   ------------------------------------------------------------ */
.funders-section {
    margin-bottom: 40px;
    padding: 36px 40px;
    text-align: center;
}
.grant-credit {
    font-family: var(--sans);
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto 28px;
}
.grant-credit strong { color: var(--ink); font-weight: 600; }

.sponsor-divider {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 32px auto 26px;
    max-width: 420px;
}
.funders-subhead {
    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #a89f8c;
    margin-bottom: 18px;
}

/* ------------------------------------------------------------
   5. CONFERENCE BUTTONS
   Named conf-* so they never collide with style.css .btn-gold
   ------------------------------------------------------------ */
.conf-btn, .conf-btn-ghost {
    display: inline-block;
    padding: 12px 26px;
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 4px;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
    cursor: pointer;
}
.conf-btn {
    background: var(--eww-gold);
    color: var(--conf-brown) !important;
    border: 1px solid var(--eww-gold);
}
.conf-btn:hover { background: var(--conf-gold-lt); border-color: var(--conf-gold-lt); }
.conf-btn-ghost {
    background: transparent;
    color: var(--eww-gold) !important;
    border: 1px solid rgba(212,175,55,0.5);
}
.conf-btn-ghost:hover { border-color: var(--eww-gold); }
.conf-btn:active, .conf-btn-ghost:active { transform: translateY(1px); }

.conf-btn-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------
   6. SPONSOR PAGE
   ------------------------------------------------------------ */
.page-head {
    background: var(--conf-brown);
    padding: 48px 20px 44px;
    text-align: center;
}
.page-head h1 { font-size: 2.1rem; font-weight: 400; font-style: italic; margin-bottom: 10px; }
.page-head p {
    font-family: var(--sans);
    font-size: 1rem;
    color: var(--conf-gold-lt);
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.6;
}

.sp-main { max-width: 1000px; margin: 0 auto; padding: 44px 20px 20px; }
.sp-section { margin-bottom: 52px; }
.sp-section h2 { font-size: 1.5rem; font-weight: 400; font-style: italic; margin-bottom: 8px; text-align: center; }
.sp-lede {
    font-family: var(--sans);
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto 28px;
    text-align: center;
}
.sp-lede strong { color: var(--ink); font-weight: 600; }

.tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
    margin-top: 8px;
}
.tier-card {
    background: #fff;
    border-radius: 10px;
    padding: 26px 22px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.07);
    border-top: 3px solid var(--eww-gold);
    display: flex;
    flex-direction: column;
    text-align: left;
}
.tier-card .tier-name {
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--ink) !important;
    font-weight: 700;
    margin-bottom: 4px;
}
.tier-card .tier-amt {
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--eww-sage);
    margin-bottom: 14px;
}
.tier-card ul {
    list-style: none;
    padding: 0; margin: 0;
    font-family: var(--sans);
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.6;
}
.tier-card li { padding-left: 18px; position: relative; margin-bottom: 7px; }
.tier-card li::before {
    content: '\2726';
    position: absolute;
    left: 0;
    color: var(--eww-gold);
    font-size: 0.7rem;
    top: 2px;
}

.sp-cta { padding: 40px; text-align: center; margin-bottom: 52px; }
.sp-cta h2 { font-size: 1.4rem; font-weight: 400; font-style: italic; margin-bottom: 14px; }
.sp-cta p { font-size: 0.95rem; line-height: 1.7; max-width: 680px; margin: 0 auto 24px; }

.tax-note {
    font-family: var(--sans);
    font-size: 0.78rem;
    color: #888;
    text-align: center;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto 40px;
}

/* ------------------------------------------------------------
   7. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .funders-section { padding: 28px 20px; }
    .logo-row { gap: 12px; }
    .logo-tile { height: 84px; padding: 12px 16px; min-width: 120px; }
    .logo-tile img { max-width: 130px; }
    .logo-tile--lg { height: 96px; min-width: 130px; padding: 14px 18px; }
    .logo-tile--lg img { max-width: 150px; }

    .page-head { padding: 32px 16px 30px; }
    .page-head h1 { font-size: 1.6rem; }
    .sp-main { padding: 28px 16px 12px; }
    .sp-cta { padding: 28px 20px; }
}