/* ==========================================================================
   CoachCapacity — Public / marketing site
   Consumes the tokens defined in css/brand.css (EHA navy, green, silver).
   ========================================================================== */

:root {
    /* Legacy aliases kept so existing markup and utilities keep resolving,
       now pointed at the Eagan-derived palette. */
    --cc-navy: var(--eha-navy);
    --cc-slate-blue: var(--eha-navy-light);
    --cc-sky: var(--eha-silver);
    --cc-teal: var(--eha-green);
    --cc-mint: var(--eha-green-soft);
    --cc-warm-gray: var(--brand-surface-alt);
    --cc-text-dark: var(--brand-ink);
    --cc-text-muted: var(--brand-muted);
    --cc-success: var(--eha-green);
    --cc-warning: #D98B0A;
    --cc-error: var(--eha-red);
}

body {
    font-family: var(--font-body);
    color: var(--cc-text-dark);
    background-color: white;
    overflow-x: hidden;
}

/* ==========================================================================
   Navigation — white bar over a navy accent strip, as on eaganhockey.com
   ========================================================================== */

.public-header::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--eha-navy) 0%, var(--eha-green) 50%, var(--eha-navy) 100%);
}

.navbar {
    background-color: white !important;
    box-shadow: 0 1px 3px rgba(29, 50, 96, .08);
    padding: .875rem 0;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--cc-navy) !important;
    font-size: 1.4rem;
}

/* The mark is the circular EHA crest; the wordmark carries the name, since the
   crest on its own doesn't say what the site is. */
.navbar-brand img {
    height: 48px;
    width: 48px;
    object-fit: contain;
    margin-right: 0;
}

.navbar-wordmark {
    line-height: 1;
    padding-top: .15em; /* optical centring — Bebas sits high in its box */
}

.navbar-wordmark .accent {
    color: var(--cc-teal);
}

.nav-link {
    color: var(--cc-navy) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .5rem 1rem !important;
    transition: color .2s ease;
    font-size: .8125rem;
}

.nav-link:hover {
    color: var(--cc-teal) !important;
}

.navbar .btn-primary {
    padding: .5rem 1.25rem;
    font-size: .8125rem;
    text-transform: uppercase;
}

/* ==========================================================================
   Hero — navy rink field with the logo watermark, white display headline
   ========================================================================== */

.hero {
    background: linear-gradient(135deg, var(--eha-navy) 0%, var(--eha-navy-dark) 60%, #0B1730 100%);
    color: #fff;
    padding: 5.5rem 0 8rem;
    position: relative;
    overflow: hidden;
}

/* Crest motif: concentric rings echoing the silver ring of the logo mark.
   Deliberately a tiny inline SVG rather than the full logo — at this opacity
   none of the logo's detail is legible, and scaling its ~565 paths to 600px
   made the hero expensive to rasterize. */
.hero::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -120px;
    width: 640px;
    height: 640px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff'%3E%3Ccircle cx='100' cy='100' r='94' stroke-width='10' opacity='.55'/%3E%3Ccircle cx='100' cy='100' r='78' stroke-width='2' opacity='.35'/%3E%3Ccircle cx='100' cy='100' r='56' stroke-width='1' opacity='.25'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
    opacity: .22;
    z-index: 0;
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat;
    background-size: cover;
    z-index: 1;
}

.hero-content {
    display: flex;
    align-items: center;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

.hero-text {
    flex: 1;
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: 4.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .015em;
    margin-bottom: 1rem;
    line-height: .95;
    color: #fff;
}

.hero h1 .highlight {
    color: #6FD3A4;
}

.hero .tagline {
    font-size: .875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--eha-silver);
    margin-bottom: 2rem;
}

.hero .lead {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, .82);
    max-width: 520px;
    margin-bottom: 2.5rem;
}

.hero .btn-outline-primary {
    border-color: rgba(255, 255, 255, .6);
    color: #fff;
    background: transparent;
}

.hero .btn-outline-primary:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--eha-navy);
}

.hero-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

/* ==========================================================================
   Buttons (public overrides on top of the brand defaults)
   ========================================================================== */

.btn-primary {
    background-color: var(--cc-teal);
    border-color: var(--cc-teal);
    color: white;
    padding: .75rem 1.75rem;
    font-weight: 600;
    letter-spacing: .04em;
    border-radius: var(--radius-lg);
    transition: all .2s ease;
    box-shadow: none;
    font-size: .9375rem;
}

.btn-primary:hover {
    background-color: var(--eha-green-dark);
    border-color: var(--eha-green-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(4, 135, 82, .32);
}

.btn-outline-primary {
    border: 2px solid var(--cc-teal);
    color: var(--cc-teal);
    padding: calc(.75rem - 1px) 1.75rem;
    font-weight: 600;
    letter-spacing: .04em;
    border-radius: var(--radius-lg);
    transition: all .2s ease;
    background: white;
    font-size: .9375rem;
}

.btn-outline-primary:hover {
    background-color: var(--cc-teal);
    color: white;
    border-color: var(--cc-teal);
}

.btn-lg {
    padding: .9rem 2.25rem;
    font-size: 1rem;
    text-transform: uppercase;
}

.btn-outline-primary.btn-lg {
    padding: calc(.9rem - 1px) 2.25rem;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.feature-section {
    padding: 6rem 0;
    background: white;
    position: relative;
}

.feature-section.bg-light {
    background-color: var(--brand-surface-alt) !important;
    position: relative;
}

.feature-section.bg-light::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23F4F7FA'/%3E%3C/svg%3E") no-repeat;
    background-size: cover;
}

.feature-section.wave-bottom {
    padding-bottom: 8rem;
}

.feature-section.wave-bottom::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23F4F7FA'/%3E%3C/svg%3E") no-repeat;
    background-size: cover;
}

.section-heading {
    text-align: center;
    margin-bottom: 4rem;
}

.section-heading h2 {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--cc-navy);
    margin-bottom: .75rem;
    line-height: 1;
}

.section-heading p {
    font-size: 1.0625rem;
    color: var(--cc-text-muted);
    max-width: 620px;
    margin: 0 auto;
    font-weight: 400;
    line-height: 1.65;
}

/* Silver-to-green rule under each section heading, echoing the logo ring. */
.section-heading h2::after {
    content: '';
    display: block;
    width: 72px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--eha-green) 0%, var(--eha-navy) 100%);
    margin: 1.25rem auto 1.5rem;
}

/* ==========================================================================
   Feature cards
   ========================================================================== */

.feature-box {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: white;
    border-radius: var(--radius-lg);
    transition: all .3s ease;
    height: 100%;
    border: 1px solid var(--brand-border);
    position: relative;
    overflow: hidden;
}

.feature-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--eha-green) 0%, var(--eha-navy) 100%);
    transform: scaleX(0);
    transition: transform .3s ease;
    transform-origin: left;
}

.feature-box:hover::before {
    transform: scaleX(1);
}

.feature-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--eha-silver);
}

.feature-box-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--eha-navy) 0%, var(--eha-navy-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.75rem;
    color: #fff;
    font-size: 1.625rem;
    box-shadow: 0 0 0 5px var(--eha-silver-soft);
}

.feature-box h3 {
    font-family: var(--font-display);
    color: var(--cc-navy);
    font-weight: 400;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: .85rem;
    line-height: 1.1;
}

.feature-box p {
    color: var(--cc-text-muted);
    line-height: 1.7;
    margin-bottom: 0;
    font-size: .9375rem;
}

.feature-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2.25rem;
    box-shadow: var(--shadow-sm);
    transition: all .3s ease;
    height: 100%;
    border: 1px solid var(--brand-border);
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--eha-green) 0%, var(--eha-navy) 100%);
    transform: scaleX(0);
    transition: transform .3s ease;
    transform-origin: left;
}

.feature-card:hover::before {
    transform: scaleX(1);
}

.feature-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--eha-silver);
    transform: translateY(-2px);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: var(--eha-green-soft);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--eha-green);
    font-size: 1.5rem;
}

.feature-card h3 {
    font-family: var(--font-display);
    color: var(--cc-navy);
    font-weight: 400;
    font-size: 1.375rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: .85rem;
    line-height: 1.1;
}

.feature-card p {
    color: var(--cc-text-muted);
    line-height: 1.7;
    margin-bottom: 0;
    font-size: .9375rem;
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: var(--shadow-sm);
    transition: all .2s ease;
    height: 100%;
    border: 1px solid var(--brand-border);
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--eha-silver);
}

.pricing-card.featured {
    border-color: var(--cc-teal);
    border-width: 2px;
    box-shadow: var(--shadow);
}

.pricing-badge {
    background: var(--cc-teal);
    color: white;
    padding: .375rem .875rem;
    border-radius: var(--radius-pill);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 1.25rem;
}

.pricing-card h3 {
    font-family: var(--font-display);
    color: var(--cc-navy);
    font-weight: 400;
    font-size: 1.875rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: .5rem;
    line-height: 1.1;
}

.price {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 400;
    color: var(--cc-navy);
    margin: 1.25rem 0 1.75rem;
    line-height: 1;
}

.price span {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 400;
    color: var(--cc-text-muted);
}

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-section {
    background: var(--cc-navy);
    color: white;
    padding: 8rem 0 5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%231D3260'/%3E%3C/svg%3E") no-repeat;
    background-size: cover;
}

/* Same lightweight crest motif as the hero. */
.cta-section::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 660px;
    height: 660px;
    transform: translate(-50%, -38%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23ffffff'%3E%3Ccircle cx='100' cy='100' r='94' stroke-width='10' opacity='.55'/%3E%3Ccircle cx='100' cy='100' r='78' stroke-width='2' opacity='.35'/%3E%3Ccircle cx='100' cy='100' r='56' stroke-width='1' opacity='.25'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
    opacity: .09;
    z-index: 0;
    pointer-events: none;
}

.cta-section .container {
    position: relative;
    z-index: 1;
}

.cta-section h2 {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: 1rem;
    color: white;
    line-height: 1;
}

.cta-section p {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, .85);
    margin-bottom: 2.5rem;
    line-height: 1.65;
}

.cta-section .btn-primary {
    background: var(--eha-green);
    color: #fff;
    border: none;
}

.cta-section .btn-primary:hover {
    background: #05A063;
    color: #fff;
    box-shadow: 0 6px 18px rgba(4, 135, 82, .45);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    background-color: var(--eha-navy-dark);
    color: white;
    padding: 3.5rem 0 2rem;
    margin-top: 0;
    border-top: 4px solid var(--eha-green);
}

.footer h5 {
    color: white;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 1.25rem;
    line-height: 1.4;
}

.footer a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    transition: color .2s ease;
    font-size: .875rem;
    line-height: 2;
}

.footer a:hover {
    color: #6FD3A4;
    text-decoration: none;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 2rem;
    margin-top: 3rem;
    text-align: center;
    color: rgba(255, 255, 255, .6);
    font-size: .875rem;
}

/* ==========================================================================
   Utilities (kept for existing markup)
   ========================================================================== */

.text-navy { color: var(--cc-navy) !important; }
.text-slate { color: var(--cc-slate-blue); }
.text-sky { color: var(--cc-sky); }
.text-success { color: var(--eha-green) !important; }
.bg-warm { background-color: var(--cc-warm-gray); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 992px) {
    .hero-content {
        flex-direction: column;
        gap: 3rem;
    }

    .hero-image { order: -1; }
    .hero::before { display: none; }
    .feature-section { padding: 4rem 0; }
}

@media (max-width: 768px) {
    .hero {
        padding: 3.5rem 0 5rem;
        text-align: center;
    }

    .hero h1 { font-size: 3rem; }
    .hero .tagline { font-size: .8125rem; margin-bottom: 1.5rem; }
    .hero .lead { font-size: .9375rem; margin-bottom: 2rem; margin-inline: auto; }
    .hero .d-flex { justify-content: center; }

    .feature-section { padding: 3.5rem 0; }
    .feature-section.wave-bottom { padding-bottom: 5rem; }

    .section-heading { margin-bottom: 2.5rem; }
    .section-heading h2 { font-size: 2.25rem; }

    .hero-content { gap: 2.5rem; }

    .cta-section { padding: 5rem 0 4rem; }
    .cta-section h2 { font-size: 2.25rem; }
}

/* ==========================================================================
   Section headings inside the navy hero

   .section-heading colours its h2 navy and its paragraph muted grey, which is
   right on the white sections but unreadable on the hero's navy gradient. The
   Features, About and Pricing pages all put a .section-heading inside .hero.
   ========================================================================== */

.hero .section-heading h2 {
    color: #fff;
}

.hero .section-heading p {
    color: rgba(255, 255, 255, .85);
}

/* The silver-to-green rule under the heading disappears against navy; flip it
   to white-to-green so it still reads as a divider. */
.hero .section-heading h2::after {
    background: linear-gradient(90deg, #6FD3A4 0%, rgba(255, 255, 255, .6) 100%);
}

/* ---------------------------------------------------------------------------
   Product modules (Admin / Teams / Library)

   The homepage presents the three modules in motto order, with the motto word
   as an eyebrow above each name. The eyebrow is the thing doing the work: it
   ties "Plan Lead Play" to the module it names, so the tagline reads as
   structure rather than decoration.
   --------------------------------------------------------------------------- */

.module-box .module-eyebrow {
    font-family: var(--font-display);
    font-size: 1.375rem;
    line-height: 1;
    letter-spacing: .06em;
    color: var(--eha-green);
    margin: 0 0 .25rem;
}

/* The module name sits tighter to its eyebrow than a bare heading would. */
.module-box h3 {
    margin-top: 0;
}

/* Says plainly that one part of a module is not built yet. A marketing page
   that implies otherwise is the kind of thing a customer discovers later. */
.module-box .module-note {
    display: block;
    margin-top: .75rem;
    font-size: .8125rem;
    font-style: italic;
    color: var(--brand-muted);
}