/* Argenta public LANDING pages (explore / nonprofit / impact).
   Ported from the WebForms _landing.css, SCOPED under .landing-page so the aggressive,
   near-global rules (body font, link colors, heading sizes) can NEVER leak into the rest
   of the Blazor app. Every landing page wraps its content in <div class="landing-page">. */

.landing-page {
    --la-blue: #00A1BE;
    --la-blue-light: #8DC3C9;
    --la-blue-lighter: #B1D9D7;
    --la-orange: #FF4A11;
    --la-pink: #F37468;
    --la-gray: #464646;
    --la-red: #CC3333;
    --la-gold: #F8C364;
    --la-navy: #072326;
    --mont: 'Montserrat', sans-serif;
    --muli: 'Mulish', sans-serif;
    font-family: var(--muli);
    color: var(--la-gray);
    overflow-x: hidden;
}

/* color utilities */
.landing-page .argenta-blue { color: var(--la-blue); }
.landing-page .blue { color: var(--la-blue); }
.landing-page .blue-light { color: var(--la-blue-light); }
.landing-page .orange { color: var(--la-orange); }
.landing-page .red { color: var(--la-red); }
.landing-page .gray { color: var(--la-gray); }
.landing-page .gold,
.landing-page .yellow { color: var(--la-gold); }
.landing-page .navy { color: var(--la-navy); }
.landing-page .white { color: #FFF; }
.landing-page .black { color: #000; }

.landing-page .font-90 { font-size: 90%; }
.landing-page .font-120 { font-size: 120%; }
.landing-page .bold { font-weight: bold; }
.landing-page .no-underline { text-decoration: none !important; }
.landing-page .text-align-center { text-align: center; }

/* links + base typography */
.landing-page a,
.landing-page a:visited { color: var(--la-blue-light); }
.landing-page a:hover { color: var(--la-pink); }
.landing-page img { max-width: 100%; }

.landing-page h1,
.landing-page h2,
.landing-page h3 { font-family: var(--mont); }
.landing-page h4,
.landing-page h5,
.landing-page h6 { font-family: var(--muli); }
.landing-page h1 { font-size: 2.5em !important; font-weight: 800; color: #464646 !important; }
.landing-page h2 { font-size: 1.75em !important; font-weight: 800; }
.landing-page h3 { font-size: 1.5em !important; }
.landing-page h4 { font-size: 1.25em !important; }

.landing-page .section-title { font-size: 2rem !important; font-weight: 800; }
.landing-page .section-subtitle { font-size: 1.25rem !important; font-weight: 700; }
@media (min-width: 992px) { .landing-page .section-title { font-size: 2.5rem !important; } }

/* logo + CTA buttons */
.landing-page .logo { max-width: 250px; }
.landing-page .demo-button,
.landing-page .demo-button:hover,
.landing-page .demo-button:visited { background-image: linear-gradient(to right, #05AABD, #02BBAA); color: #FFF; border-radius: 30px; border: 0; font-size: 1.3rem; font-weight: 700; padding: .75rem 2.5rem 1rem 2.5rem; text-decoration: none; cursor: pointer; display: inline-block; }
.landing-page .trial-button,
.landing-page .trial-button:hover,
.landing-page .trial-button:visited { background-color: var(--la-orange); color: #FFF; border-radius: 30px; border: 0; font-size: 1.3rem; font-weight: 700; padding: .75rem 2.5rem 1rem 2.5rem; text-decoration: none; cursor: pointer; display: inline-block; }
.landing-page .btn-orange,
.landing-page .btn-orange:hover,
.landing-page .btn-orange:visited { background: #FF4A11; color: #FFF; }

.landing-page .pill-box { background-color: var(--la-blue-lighter); border-radius: 60px; width: 100%; padding: 0 5%; font-weight: 600; }

/* hero — main (explore) + nonprofit */
.landing-page #hero-landing { background-image: url('/images/landing/landing-hero.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; min-height: 50vh; }
@media (max-width: 767px) { .landing-page #hero-landing { background-position: 20% center; } }
@media (min-width: 768px) { .landing-page #hero-landing { background-position: calc(50% + 350px) center; min-height: 0; } }
@media (min-width: 992px) { .landing-page #hero-landing { background-position: calc(50% + 200px) center; background-size: contain; min-height: 0; } }
@media (min-width: 1280px) { .landing-page #hero-landing { background-position: calc(50% + 200px) top; background-size: cover; min-height: 75vh; } }

/* hero — political (impact) */
.landing-page #hero-political { background-image: url('/images/heros/hero-political.jpg'); background-size: cover; background-repeat: no-repeat; background-position: bottom center; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
@media (min-width: 768px) { .landing-page #hero-political { background-position: bottom center; min-height: 0; } }
@media (min-width: 992px) { .landing-page #hero-political { background-position: 0% top; min-height: 0; } }

/* social proof */
.landing-page .profile-images img { width: 35px; height: 35px; border-radius: 50%; }
.landing-page .stars { font-size: 24px; color: #FFD700; margin-bottom: 5px; }
.landing-page .review-text { font-size: 12px; color: #000; margin-top: -3px; }

/* collapsible "View Full List of Features" section */
.landing-page .features-list-wrap { max-height: 680px; transition: all .5s ease-in-out; overflow: hidden; }
.landing-page .features-list-wrap--open { max-height: none; overflow: initial; }
.landing-page .features-list-toggle { position: relative; cursor: pointer; }
.landing-page .features-list-toggle::before { content: ''; height: 100px; width: 100%; display: block; position: absolute; z-index: 2; background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,1) 100%); top: -100px; }
.landing-page .features-list-toggle--text { color: #00A1BE; font-weight: 700; font-size: 1.25rem; margin-bottom: 1rem; font-family: 'Mulish', sans-serif !important; }
