/* EasyFixObamacare — Single Page Styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Chakra Petch', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #2b7cb8;
    color: #ffffff;
    line-height: 1.6;
}

.hero {
    text-align: center;
    padding: 3rem 1rem 2rem;
}

.hero h1 {
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero .accent {
    color: #8fd4f0;
    font-weight: 700;
}

.tagline {
    font-size: 1rem;
    margin-top: 0.5rem;
    opacity: 0.9;
}

main {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
}

/* POPS Section */
.pops {
    text-align: center;
    margin-bottom: 3rem;
}

.pops-title {
    font-size: 2.75rem;
    font-weight: 900;
    margin-bottom: 0.25rem;
}

.pops-subtitle {
    font-size: 1.56rem;
    margin-bottom: 2rem;
    color: #8fd4f0;
}

.pops-subtitle strong {
    font-size: 1.5rem;
}

.fix-item {
    text-align: left;
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid rgba(255, 255, 255, 0.4);
    background-color: #24699c;
    border-radius: 6px;
}

.fix-item h3 {
    font-size: 1.54rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: #8fd4f0;
}

.fix-item p {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* Other Fixes Section */
.other-fixes {
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    padding-top: 2rem;
}

.other-fixes h2 {
    font-size: 1.3rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.other-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.other-item h3 {
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: #8fd4f0;
}

.other-item p {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* Hero initials — E, F, O are 15% larger */
.hero-initial {
    font-size: 115%;
}

/* Accent Colors — light blue initials from infographic */
.initial {
    color: #ffffff;
    font-size: 1.15em;
    font-weight: 700;
}

.accent-heading {
    color: #8fd4f0;
}

.accent-word {
    font-weight: 700;
}

/* ===== FLY-IN ANIMATIONS ===== */

/* Keyframes */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-80px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* LS-014: Hero header — slide down from top */
.hero h1 {
    animation: slideDown 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.tagline {
    animation: slideDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

/* LS-015: POPS title — scale up / fade in */
.pops-title {
    animation: scaleIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

.pops-subtitle {
    animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s both;
}

/* LS-016: Fix items — staggered slide from left */
.fix-item {
    animation: slideFromLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fix-item:nth-of-type(1) {
    animation-delay: 0.8s;
}

.fix-item:nth-of-type(2) {
    animation-delay: 1.1s;
}

.fix-item:nth-of-type(3) {
    animation-delay: 1.4s;
}

/* LS-021: Fix numbers — staggered slide from left, leading the text */
.fix-number {
    display: inline-block;
    animation: slideFromLeft 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.fix-item:nth-of-type(1) .fix-number {
    animation-delay: 0.7s;
}

.fix-item:nth-of-type(2) .fix-number {
    animation-delay: 1.0s;
}

.fix-item:nth-of-type(3) .fix-number {
    animation-delay: 1.3s;
}

/* LS-017: Other Easy Ways heading — slide up from bottom */
.accent-heading {
    animation: slideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.6s both;
}

/* LS-018: Other grid items — fly in from right, staggered */
.other-item {
    animation: slideFromRight 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.other-item:nth-of-type(1) {
    animation-delay: 1.8s;
}

.other-item:nth-of-type(2) {
    animation-delay: 2.1s;
}

.other-item:nth-of-type(3) {
    animation-delay: 2.4s;
}

/* LS-023: Campaign URL — slide up after all content */
.campaign-url {
    text-align: center;
    padding: 2rem 1rem 3rem;
    animation: slideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 3.2s both;
}

.campaign-url a {
    color: #8fd4f0;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.campaign-url a:hover {
    color: #ffffff;
}

/* Social embeds */
.social-embed {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1.5rem 3rem;
    margin-top: 20px;
    text-align: center;
}

/* LS-019: Accessibility — disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero h1,
    .tagline,
    .pops-title,
    .pops-subtitle,
    .fix-item,
    .fix-number,
    .accent-heading,
    .other-item,
    .campaign-url {
        animation: none;
    }
}

/* Responsive */
@media (max-width: 600px) {
    /* LS-024: Fix header centering on mobile */
    .hero {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .hero h1 {
        font-size: 1.2rem;
        overflow-wrap: break-word;
        max-width: 100%;
    }

    /* LS-025: Fix tagline line breaking */
    .tagline {
        font-size: 0.85rem;
        padding: 0 0.25rem;
    }

    .pops-title {
        font-size: 2.2rem;
    }

    /* LS-026: Stack POPS subtitle with staggered indent */
    .pops-subtitle {
        text-align: left;
        font-size: 1.58rem;
        padding-left: 1rem;
        line-height: 0.9;
    }

    .pops-line {
        display: block;
    }

    .pops-line-2 {
        padding-left: 6rem;
    }

    .pops-line-3 {
        padding-left: 12rem;
    }

    .other-grid {
        grid-template-columns: 1fr;
    }
}