/* ════════════════════════════════════════════════════════════════════════════
 * ELP Landing Pages Stylesheet (v1 — May 2026)
 * ════════════════════════════════════════════════════════════════════════════
 * Scoped exclusively to public marketing pages: home, about, campus, faq,
 * terms, contact. All rules are wrapped in :where(body:has(app-landing-*))
 * so they NEVER leak into the platform (admin/staff/student dashboards).
 *
 * Loaded BEFORE elp-design-system.css in index.html — design-system rules
 * are themselves restricted to non-landing bodies, so the two files don't
 * fight each other.
 * ════════════════════════════════════════════════════════════════════════════ */

/* The landing scope. Any one of these app-landing-* hosts marks a public
   marketing page. Using :where() keeps specificity at 0 so individual
   selectors below decide their own weight. */
/* ── CTA SECTION ─────────────────────────────────────────────────────── */

  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) section.cta-section, body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) section[class*="cta-section"] {
    background: #ffffff;
    background-color: #ffffff;
    background-image: none;
    color: inherit;
    padding: 80px 0;
  }

  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="cta-card"] {
    background: linear-gradient(135deg, #1a5070 0%, #20638b 55%, #2d7aa8 100%);
    border-radius: 28px;
    padding: 56px 64px;
    display: grid;
    grid-template-columns: 1.4fr auto;
    gap: 56px;
    align-items: center;
    box-shadow:
      0 30px 70px -20px rgba(32, 99, 139, 0.55),
      0 8px 24px -8px rgba(0, 0, 0, 0.20),
      inset 0 1px 0 rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="cta-card"]::after { content: none; }

  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="cta-content"] { position: relative; z-index: 1; }

  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="cta-content"] h2 {
    color: #ffffff;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="cta-content"] p {
    color: rgba(255, 255, 255, 0.88);
    font-size: 17px;
    line-height: 1.75;
    margin: 0;
    max-width: 560px;
  }

  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="cta-actions"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 1;
  }

  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="btn-cta-primary"], body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="btn-cta-outline"] {
    padding: 15px 30px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 15.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space: nowrap;
    min-width: 170px;
  }

  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="btn-cta-primary"] {
    background: linear-gradient(135deg, #ff9800, #ff7a00);
    color: #ffffff;
    border: 0;
    box-shadow: 0 12px 24px -10px rgba(255, 122, 0, 0.65);
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="btn-cta-primary"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -12px rgba(255, 122, 0, 0.80);
    background: linear-gradient(135deg, #ffa820, #ff8a10);
  }

  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="btn-cta-outline"] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(4px);
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="btn-cta-outline"]:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.85);
    transform: translateY(-2px);
  }

  /* ── FOOTER ──────────────────────────────────────────────────────────── */

  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer.landing-footer, body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] {
    background: linear-gradient(180deg, #1a5070 0%, #134059 100%);
    color: rgba(255, 255, 255, 0.82);
    padding: 72px 0 0;
    margin-top: 0;
  }

  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-grid"] {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 56px;
    padding-bottom: 56px;
    align-items: start;
  }

  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-brand"] .logo {
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-brand"] h3 {
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 12px;
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-brand"] p {
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.85;
    font-size: 14px;
    margin: 0;
    max-width: 320px;
  }

  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-links"] h4, body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-contact"] h4 {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 22px;
    padding: 0 0 12px;
    border-bottom: 0;
    display: block;
    position: relative;
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-links"] h4::after, body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-contact"] h4::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    background: #ff9800;
    border-radius: 2px;
  }

  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-links"] ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-links"] li { margin: 0; }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-links"] a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color .18s ease, transform .18s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-links"] a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff9800;
    opacity: 0.55;
    transition: opacity .18s ease, transform .18s ease;
    flex-shrink: 0;
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-links"] a:hover {
    color: #ffffff;
    transform: translateX(-3px);
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-links"] a:hover::before {
    opacity: 1;
    transform: scale(1.3);
  }

  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="contact-list"] {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="contact-list"] li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="contact-list"] li i {
    color: #ff9800;
    font-size: 14px;
    margin-top: 4px;
    width: 28px;
    height: 28px;
    background: rgba(255, 152, 0, 0.12);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="contact-list"] a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color .18s ease;
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="contact-list"] a:hover { color: #ff9800; }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="contact-list"] small {
    display: block;
    color: rgba(255, 255, 255, 0.60);
    font-size: 12px;
    margin-top: 2px;
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="contact-list"] [dir="ltr"] {
    direction: ltr;
    unicode-bidi: embed;
  }

  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-bottom"] {
    border-top: 1px solid rgba(255, 255, 255, 0.10);
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.70);
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-bottom"] p { margin: 0; }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="powered-by"] a {
    color: #ff9800;
    text-decoration: none;
    font-weight: 700;
    transition: color .18s ease;
  }
  
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="powered-by"] a:hover { color: #ffb84d; }

  /* ── RESPONSIVE ──────────────────────────────────────────────────────── */

  
  @media (max-width: 1024px) {
    
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-grid"] {
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }
  
  }
  
  @media (max-width: 960px) {
    
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="cta-card"] {
      grid-template-columns: 1fr;
      padding: 44px 28px;
      text-align: center;
      gap: 32px;
    }
    
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="cta-actions"] { justify-content: center; }
    
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="cta-content"] p { margin-inline: auto; }
    
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="cta-content"] h2 { font-size: 30px; }
  
  }
  
  @media (max-width: 640px) {
    
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] { padding-top: 56px; }
    
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-grid"] {
      grid-template-columns: 1fr;
      gap: 36px;
      padding-bottom: 40px;
    }
    
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-bottom"] {
      flex-direction: column;
      text-align: center;
      gap: 8px;
    }
  
  }
  
  @media (max-width: 480px) {
    
  body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="btn-cta-primary"], body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) [class*="btn-cta-outline"] { width: 100%; min-width: 0; }
  
  }

/* ── Footer brand logo + email visibility (v4) ────────────────────────── */
/* logo.png is a solid blue mark on a transparent background. Recolor to
   pure white via CSS filter — preserves transparency, no background fill.
   brightness(0) → all non-transparent pixels become black; invert(1) → white. */
body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="footer-brand"] img.logo {
  filter: brightness(0) invert(1) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
}

/* Force the email link (and any link inside contact-list) to white,
   killing browser default :link/:visited blue and any selection highlight
   that bled through the dark background. */
body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="contact-list"] a,
body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="contact-list"] a:link,
body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="contact-list"] a:visited {
  color: #ffffff;
  background: transparent;
  background-color: transparent;
  -webkit-text-fill-color: #ffffff;
}
body:is(:has(app-landing-home), :has(app-landing-about), :has(app-landing-campus), :has(app-landing-faq), :has(app-landing-terms), :has(app-landing-contact)) footer[class*="landing-footer"] [class*="contact-list"] a:hover {
  color: #ff9800;
  -webkit-text-fill-color: #ff9800;
}