/* ============================================================
   Internal Integration - HomePage.razor and FooterComponent.razor
   Self-contained: defines its own design tokens and has no
   dependency on any other stylesheet being loaded.
   ============================================================ */

/* Design tokens - scoped to the two root classes so they do not
   leak into the rest of the page.

   NOTE: navy, blue, blue-light, gold are brand constants that
   don't change between modes. The semantic tokens below are the
   mode-aware layer that CSS rules should use for text,
   backgrounds, and borders. light-dark(light-value, dark-value)
   resolves based on the computed `color-scheme` of the element. */
.sc-internal-homepage,
.sc-internal-footer {
    /* --- Brand constants (mode-independent) --- */
    --sc-internal-navy: #0B1D3A;
    --sc-internal-blue: #1B6FE8;
    --sc-internal-blue-light: #4A90F0;
    --sc-internal-gold: #D4A843;
    --sc-internal-cream: #FAF7F2;
    --sc-internal-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sc-internal-font-body: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    /* Primary text: headings, card titles, section headings.
       Light: navy brand / Dark: near-white for high contrast */
    --sc-internal-text-primary: light-dark(#0B1D3A, #E8EAED);
    /* Secondary text: body paragraphs, descriptions.
       Light: dark slate with opacity / Dark: light gray */
    --sc-internal-text-secondary: light-dark(rgba(30, 41, 59, 0.7), rgba(232, 234, 237, 0.75));
    /* Muted text: tips, captions, de-emphasized content.
       Light: slate gray / Dark: medium gray */
    --sc-internal-text-muted: light-dark(#64748b, #9AA0A6);
    /* Surface background: page body, card backgrounds.
       Light: white / Dark: Fluent dark surface */
    --sc-internal-bg-surface: light-dark(#ffffff, #1B1B1F);
    /* Surface-alt background: cream bands, tips sections, checklists.
       Light: warm cream / Dark: slightly elevated dark surface */
    --sc-internal-bg-surface-alt: light-dark(#FAF7F2, #2B2B30);
    /* Border: dividers, card borders, separators.
       Light: light slate / Dark: subtle light border */
    --sc-internal-border: light-dark(#e2e8f0, rgba(255, 255, 255, 0.12));
    /* Blockquote background: subtle accent fill.
       Light: very faint blue / Dark: slightly elevated blue tint */
    --sc-internal-bg-blockquote: light-dark(rgba(27, 111, 232, 0.03), rgba(27, 111, 232, 0.08));
    /* Hover background: step headers, dropdown items.
       Light: faint blue / Dark: slightly visible blue */
    --sc-internal-bg-hover: light-dark(rgba(27, 111, 232, 0.02), rgba(27, 111, 232, 0.06));
    /* Card icon background: stage icons, card decorations.
       Light: very faint blue / Dark: slightly more visible */
    --sc-internal-bg-icon: light-dark(rgba(27, 111, 232, 0.06), rgba(27, 111, 232, 0.12));
    /* Card icon hover background */
    --sc-internal-bg-icon-hover: light-dark(rgba(27, 111, 232, 0.12), rgba(27, 111, 232, 0.20));
    /* Mistake card problem border */
    --sc-internal-border-error: light-dark(#fee2e2, rgba(239, 68, 68, 0.3));
    /* Shadow values - darker in light mode, lighter in dark */
    --sc-internal-shadow-md: light-dark(0 4px 12px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.3));
    --sc-internal-shadow-lg: light-dark(0 8px 30px rgba(0, 0, 0, 0.1), 0 8px 30px rgba(0, 0, 0, 0.35));
    --sc-internal-shadow-xl: light-dark(0 20px 50px rgba(0, 0, 0, 0.12), 0 20px 50px rgba(0, 0, 0, 0.4));
}

/* Page root */
.sc-internal-homepage {
    font-family: var(--sc-internal-font-body);
}

/* Eyebrow label above the hero heading */
.sc-internal-eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--sc-internal-gold);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
}

/* Page hero - navy band */
.sc-internal-hero {
    background: var(--sc-internal-navy);
    color: white;
    padding: 80px 24px 48px;
    text-align: center;
}

    .sc-internal-hero h1 {
        font-family: var(--sc-internal-font-display);
        font-size: 2.8rem;
        line-height: 1.2;
        margin: 16px 0;
        font-weight: 700;
        color: white;
    }

        /* Heading emphasis - gold accent on the payload phrase. */
        .sc-internal-hero h1 em {
            color: var(--sc-internal-gold);
            font-style: italic;
        }

    .sc-internal-hero p {
        font-size: 1.1rem;
        opacity: 0.85;
        line-height: 1.6;
        max-width: 640px;
        margin: 0 auto;
    }

        /* Subheading emphasis - the surrounding text is dimmed, so
           emphasis reads as full-opacity white rather than gold. */
        .sc-internal-hero p em {
            color: #ffffff;
            opacity: 1;
            font-style: italic;
        }

    /* Hero links - the hero band is always navy (mode-independent),
       so links need a fixed light color; theme-default link blue is
       invisible against navy in light mode. */
    .sc-internal-hero a {
        color: var(--sc-internal-blue-light);
        text-decoration-color: rgba(255, 255, 255, 0.4);
    }

        .sc-internal-hero a:hover {
            color: #ffffff;
        }

/* Content wrapper - wide centered band for grid layouts */
.sc-internal-content {
    padding: 24px 12px;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

/* Section heading - centered display heading */
.sc-internal-section-heading {
    font-family: var(--sc-internal-font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--sc-internal-text-primary);
    margin: 0 0 32px;
    text-align: center;
}

/* Card grid - centered wrapping row for audience/product/trust cards.
   Flex (not grid) so that a trailing partial row centers instead of
   leaving a left-aligned orphan when the card count does not divide
   evenly into the column count. */
.sc-internal-card-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    margin-bottom: 24px;
}

/* Card - centered card with hover lift.
   Basis 280px with grow lets 1, 2, or 3 per row fill the width
   evenly; max-width keeps a lone card from spanning the full band.
   align-self/height override the fluent-card host sizing so every
   card matches the tallest card in its row. */
.sc-internal-card {
    flex: 1 1 280px;
    max-width: 340px;
    align-self: stretch;
    height: auto;
    box-sizing: border-box;
    padding: 28px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    cursor: default;
}

    .sc-internal-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--sc-internal-shadow-lg);
    }

    .sc-internal-card h3 {
        font-family: var(--sc-internal-font-display);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--sc-internal-text-primary);
        margin: 12px 0 10px;
        transition: color 0.2s;
    }

    .sc-internal-card:hover h3 {
        color: var(--sc-internal-blue);
    }

    .sc-internal-card p {
        color: var(--sc-internal-text-muted);
        line-height: 1.6;
        font-size: 0.95rem;
        margin: 0;
    }

/* Call-to-action button row - centered, wraps on narrow viewports */
.sc-internal-cta-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
}

/* ============================================================
   Footer - FooterComponent.razor
   Centered single-column layout: brand block, inline link row,
   bottom note.
   ============================================================ */

.sc-internal-footer {
    background: var(--sc-internal-navy);
    color: rgba(255, 255, 255, 0.75);
    padding: 10px 20px;
}

.sc-internal-footer-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto;
    padding: 14px 0;
}

.sc-internal-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.sc-internal-footer-logo {
    font-family: var(--sc-internal-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.sc-internal-footer-tagline {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.sc-internal-footer-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    margin: 0;
}

.sc-internal-footer-links-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

    .sc-internal-footer-links-row a,
    .sc-internal-footer-links-row a:visited {
        font-size: 0.9rem;
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        padding: 8px 4px; /* comfortable touch target height */
        transition: color 0.2s;
    }

        .sc-internal-footer-links-row a:hover {
            color: #ffffff;
        }

.sc-internal-footer-link-sep {
    color: rgba(255, 255, 255, 0.35);
}

.sc-internal-footer-bottom {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}