/* ============================================================
   HEALTHFIRST SALES RALLY — STYLES
   ------------------------------------------------------------
   TO CHANGE COLORS OR FONT SIZES: edit the variables right
   below. Everything on the site pulls from these values, so
   you should never need to touch the rest of this file.
   ============================================================ */

:root {
    /* ----- COLORS (official Healthfirst brand palette) ----- */
    --hf-green:       #82C341;   /* Lime Green (waves, headings) */
    --hf-green-dark:  #529535;   /* Dark Green (leaves, hover states) */
    --hf-blue:        #008BBF;   /* Sky Blue — top navigation bar */
    --hf-navy:        #003863;   /* Dark Blue sections (Register / Contact) */
    --hf-magenta:     #AB3192;   /* Purple — buttons + thin accent stripes */
    --hf-lime:        #CADB2D;   /* Additional Information section (from sketch) */
    --hf-yellow:      #FFEE00;   /* Yellow (brand palette, unused so far) */
    --hf-light-blue:  #BFD0D6;   /* Light Blue (brand palette, unused so far) */
    --hf-nav-hover:   #AECCD8;   /* nav link hover color */
    --hf-gray:        #474B55;   /* Dark Gray — footer bar */
    --hf-light-gray:  #A8ABAC;   /* Light Gray (brand palette, unused so far) */
    --text-dark:      #474B55;   /* body text on white */
    --text-light:     #ffffff;   /* text on dark/green backgrounds */

    /* ----- FONTS (Museo Sans via Adobe Typekit, loaded in header.php) ----- */
    --font-main:      'museo-sans', 'Segoe UI', Helvetica, Arial, sans-serif;
    --font-heading:   'museo', Georgia, serif;   /* headers only, weight 700 */

    /* ----- FONT SIZES ----- */
    --size-body:      17px;      /* normal paragraph text */
    --size-nav:       15px;      /* top navigation links */
    --size-h1:        34px;      /* big headings ("The Sales Rally is Back!") */
    --size-h2:        30px;      /* section headings (Agenda, Contact Us) */
    --size-h3:        20px;      /* sub headings (agenda times, form labels) */
    --size-small:     13px;      /* footer + fine print */

    /* ----- SPACING ----- */
    --section-pad:    50px;      /* vertical padding inside each section */
}

/* ============================================================
   Everything below uses the variables above.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    font-weight: 300;            /* Museo Sans 300 for body text */
    font-size: var(--size-body);
    color: var(--text-dark);
    line-height: 1.6;
    background: #fff;
}

img { max-width: 100%; height: auto; }

.wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ----- STICKY TOP NAVIGATION ----- */
.topnav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--hf-blue);
    padding: 22px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.topnav .logo img { height: 54px; display: block; }
.topnav nav a {
    color: var(--text-light);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: var(--size-nav);
    font-weight: 700;
    margin-left: 26px;
}
.topnav nav a:hover { color: var(--hf-nav-hover); }
.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
}

/* ----- GREEN SWIRL BANNER + BADGE (top of every page) ----- */
.banner { text-align: center; }
.banner .swirl {
    height: 140px;
    background: var(--hf-green) url('../img/banner-back.jpg') center / cover no-repeat;
}
.banner .badge {
    /* pulls the round badge up so it straddles the green banner
       and whatever section comes next */
    margin-top: -140px;
    margin-bottom: -112px;
    position: relative;
    z-index: 5;
}
.banner .badge img {
    width: 240px;
    height: 240px;
    object-fit: contain;
}

/* ----- HERO TEXT (home page, under the banner) ----- */
.hero {
    position: relative;
    text-align: center;
    padding: 96px 0 30px;  /* top padding clears the badge */
}
.hero h1 { font-family: var(--font-heading); font-size: 42px; color: var(--hf-green); font-weight: 700; margin-top: 8px; }
.hero .date-venue { color: var(--hf-blue); font-size: 24px; font-weight: 700; margin-top: 6px; line-height: 1.4; }
.hero p.intro { max-width: 560px; margin: 14px auto 0; }
.hero p.intro a { color: var(--hf-blue); font-weight: 700; text-decoration: none; }

/* ----- BUTTONS ----- */
.btn {
    display: inline-block;
    background: var(--hf-magenta);
    color: var(--text-light);
    font-weight: 700;
    font-size: var(--size-body);
    text-decoration: none;
    border: none;
    cursor: pointer;
    padding: 12px 28px;
    margin-top: 28px;
    margin-bottom: 30px;
    font-family: var(--font-main);
}
.btn:hover { opacity: .85; }

/* ----- GENERIC SECTIONS ----- */
section { text-align: center; }
section h2 { font-family: var(--font-heading); font-size: var(--size-h1); font-weight: 700; margin-bottom: 30px; line-height: 1.5; }
/* Links inside sections — same style as the Register/Decline card links */
section a {
    color: var(--hf-magenta);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
section a:hover { color: var(--hf-gray); }

/* Green agenda section — wave + leaf art is baked into the
   background image (img/agenda-back-swirl.jpg); the top ~25% of that
   image is the white-to-green wave, hence the big top padding */
.agenda {
    background: var(--hf-green) url('../img/agenda-back-swirl.jpg') top center / 100% auto no-repeat;
    color: var(--text-dark);
    /* 27vw tracks the wave art as the window grows, CAPPED at 150px
       so the Agenda heading stops sliding down on wide screens —
       raise/lower 150px to move the heading down/up */
    padding: min(27vw, 150px) 24px var(--section-pad);
}
.agenda h2 { color: var(--text-dark); }
.agenda .slot { margin-bottom: 26px; }
.agenda .slot .time { font-size: var(--size-h3); font-weight: 700; }

/* Lime "Additional Information" section (stage 2 only) */
.addinfo {
    background: var(--hf-lime);
    color: var(--hf-navy);
    padding: var(--section-pad) 24px;
}
.addinfo h2 { color: var(--hf-green-dark); }
.addinfo h3 { font-size: var(--size-h3); color: var(--hf-blue); margin: 26px 0 8px; }
.addinfo p { max-width: 640px; margin: 0 auto; }

/* White "Another" section (stage 2 only) */
.another {
    padding: var(--section-pad) 24px;
    background: url('../img/another-back.png') right bottom no-repeat;
}
.another h2 { color: var(--hf-navy); }
.another h3 { font-size: var(--size-h3); color: var(--hf-blue); margin: 26px 0 8px; }
.another .alert { color: var(--hf-magenta); font-weight: 700; margin-bottom: 18px; }
.another p { max-width: 660px; margin: 0 auto 16px; text-align: center; }
.another p strong { color: var(--hf-navy); }
.another ul { list-style: none; margin: 10px auto 16px; }
.another ul li { margin: 4px 0; }

/* Dark navy sections (Register / Contact) */
.navy {
    background: var(--hf-navy);
    color: var(--text-light);
    border-top: 5px solid var(--hf-magenta);
    padding: var(--section-pad) 24px;
}
.navy h2 { color: var(--hf-green); }
/* ----- FORM PAGES (Register / Decline) -----
   Full-page green swirl background with a white card panel */
body.swirl-page {
    background: var(--hf-green) url('../img/registration-back.jpg') center top / cover no-repeat fixed;
}
.card-badge {
    text-align: center;
    margin: 40px auto -195px;   /* badge overlaps the card's top edge */
    position: relative;
    z-index: 5;
}
.card-badge img { width: 390px; height: 390px; }
.form-card {
    background: #fff;
    background-clip: padding-box;               /* keep white inside the frame */
    border: 40px solid rgba(255, 255, 255, .5); /* translucent frame over the swirl */
    max-width: 840px;
    margin: 0 auto 70px;
    padding: 225px 40px 50px;   /* top padding clears the badge */
    text-align: center;
}
.form-card h2 { font-family: var(--font-heading); font-size: var(--size-h1); color: var(--hf-green); font-weight: 700; margin-bottom: 16px; }
.form-card .respond-by { color: var(--hf-blue); font-weight: 700; }
.form-card a {
    color: var(--hf-magenta);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.form-card a:hover { color: var(--hf-gray); }

/* ----- FORMS (embedded JotForms) ----- */
.jotform {
    max-width: 560px;
    margin: 30px auto 0;
    text-align: left;
}
.alt-form-link { margin-top: 26px; font-size: var(--size-small); }

/* ----- FOOTER ----- */
footer {
    background: var(--hf-gray);
    color: var(--text-light);
    font-weight: 300;
    text-align: center;
    font-size: var(--size-small);
    padding: 14px;
    border-top: 6px solid var(--hf-magenta);  /* purple rule above footer */
}

/* ----- MOBILE (burger menu) ----- */
@media (max-width: 760px) {
    .nav-toggle { display: block; }
    .topnav nav {
        display: none;
        width: 100%;
        text-align: center;
        padding-top: 12px;
    }
    .topnav nav.open { display: block; }
    .topnav nav a { display: block; margin: 12px 0; }
    .banner .badge img { width: 230px; height: 230px; }  /* matches register-page badge size */
    .banner .badge { margin-top: -120px; margin-bottom: -105px; }
    .hero { padding-top: 150px; }  /* clears the bigger badge */
    section h2, .form-card h2 { font-size: var(--size-h2); }  /* mobile keeps original heading size */
    .hero h1 { font-size: var(--size-h1); }
    .hero .date-venue { font-size: var(--size-h3); }
    .another { background: none; }        /* art would crowd text on small screens */
    /* Fill the whole agenda section with the swirl art on phones
       (desktop only stretches it across the top) */
    .agenda { background-size: cover; }
    .card-badge img { width: 230px; height: 230px; }
    .card-badge { margin-bottom: -115px; }
    .form-card { border-width: 20px; padding: 140px 20px 40px; }
}