/*
 * ServerDog public UI 4.0
 * CEOFans-aligned visual language: blue primary, white surfaces, slate copy,
 * restrained shadows, and clear desktop/mobile hierarchy.
 */
:root {
    --sd-bg: #f8fafc;
    --sd-panel: #ffffff;
    --sd-text: #1e293b;
    --sd-heading: #0f172a;
    --sd-muted: #64748b;
    --sd-subtle: #94a3b8;
    --sd-line: #e2e8f0;
    --sd-primary: #2563eb;
    --sd-primary-dark: #1d4ed8;
    --sd-primary-soft: #eff6ff;
    --sd-success: #16a34a;
    --sd-danger: #dc2626;
    --sd-radius-sm: 8px;
    --sd-radius: 12px;
    --sd-radius-lg: 18px;
    --sd-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
    --sd-shadow: 0 12px 32px rgba(15, 23, 42, .08);
}

body.site-home,
body.public-foster-page,
body.public-cert-page {
    background: var(--sd-bg);
    color: var(--sd-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.site-home::before { display: none; }
body.site-home .shell { width: min(1200px, calc(100% - 48px)); }

body.site-home .site-header {
    position: fixed;
    inset: 0 0 auto;
    min-height: 64px;
    border: 0;
    border-bottom: 1px solid var(--sd-line);
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.site-home .header-inner { min-height: 64px; }
body.site-home .brand { gap: 10px; }
body.site-home .brand-mark {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .1);
}
body.site-home .brand-copy strong { color: var(--sd-heading); font-size: 16px; font-weight: 800; }
body.site-home .brand-copy span { color: var(--sd-muted); font-size: 11px; letter-spacing: .05em; }
body.site-home .nav { gap: 6px; }
body.site-home .nav a {
    padding: 8px 10px;
    border-radius: var(--sd-radius-sm);
    color: var(--sd-muted);
    font-size: 14px;
    font-weight: 500;
    transition: color .2s, background .2s;
}
body.site-home .nav a:hover { background: var(--sd-primary-soft); color: var(--sd-primary); }
body.site-home .nav .nav-login { margin-left: 4px; padding-inline: 15px; }
body.site-home .nav .nav-student {
    background: linear-gradient(135deg, var(--sd-primary), var(--sd-primary-dark));
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .2);
}
body.site-home .nav .nav-student:hover { background: var(--sd-primary-dark); color: #fff; }
body.site-home .nav .nav-staff { border-color: var(--sd-line); color: #475569; }
body.site-home .nav .nav-staff:hover { border-color: #bfdbfe; background: var(--sd-primary-soft); color: var(--sd-primary); }

body.site-home .hero {
    position: relative;
    overflow: hidden;
    padding: 148px 0 82px;
    background:
        radial-gradient(circle at 16% 18%, rgba(96, 165, 250, .17), transparent 32%),
        radial-gradient(circle at 84% 20%, rgba(191, 219, 254, .35), transparent 30%),
        linear-gradient(180deg, #eff6ff 0%, #f8fafc 62%, #fff 100%);
}
body.site-home .hero::before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(37, 99, 235, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(37, 99, 235, .035) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 84%);
    content: "";
    pointer-events: none;
}
body.site-home .hero-grid { position: relative; z-index: 1; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr); gap: 68px; }
body.site-home .eyebrow,
body.site-home .section-kicker,
body.site-home .process-kicker {
    color: var(--sd-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
}
body.site-home .eyebrow {
    padding: 7px 13px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: rgba(239, 246, 255, .84);
}
body.site-home .eyebrow::before { width: 7px; height: 7px; background: var(--sd-primary); }
body.site-home .hero h1 {
    max-width: 760px;
    color: var(--sd-heading);
    font-size: clamp(46px, 5.3vw, 68px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.12;
}
body.site-home .hero h1 span { color: var(--sd-primary); }
body.site-home .hero-lead { color: #475569; font-size: 18px; line-height: 1.8; }
body.site-home .btn {
    min-height: 48px;
    padding: 12px 21px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
body.site-home .btn-primary {
    background: linear-gradient(135deg, var(--sd-primary), var(--sd-primary-dark));
    box-shadow: 0 6px 16px rgba(37, 99, 235, .24);
}
body.site-home .btn-primary:hover { background: var(--sd-primary-dark); box-shadow: 0 9px 22px rgba(37, 99, 235, .28); }
body.site-home .btn-secondary { border-color: var(--sd-line); color: #475569; }
body.site-home .btn-secondary:hover { border-color: #bfdbfe; background: var(--sd-primary-soft); color: var(--sd-primary); }
body.site-home .hero-note { color: var(--sd-muted); }
body.site-home .hero-note::before { background: var(--sd-success); }

body.site-home .process-card {
    padding: 28px;
    border: 1px solid var(--sd-line);
    border-radius: var(--sd-radius-lg);
    box-shadow: var(--sd-shadow);
}
body.site-home .process-card::after { border-color: #dbeafe; box-shadow: inset 0 0 0 42px rgba(37, 99, 235, .025); }
body.site-home .process-card h2 { color: var(--sd-heading); }
body.site-home .process-card > p { color: var(--sd-muted); }
body.site-home .process-item { border-color: var(--sd-line); }
body.site-home .process-no,
body.site-home .service-no,
body.site-home .journey-index {
    border-color: #dbeafe;
    background: var(--sd-primary-soft);
    color: var(--sd-primary);
}

body.site-home .trust { padding: 0 0 72px; background: #fff; }
body.site-home .trust-grid { position: relative; z-index: 2; margin-top: -24px; border-color: var(--sd-line); border-radius: var(--sd-radius); box-shadow: 0 10px 28px rgba(15,23,42,.06); }
body.site-home .trust-item { border-color: var(--sd-line); }
body.site-home .trust-item strong { color: var(--sd-heading); }
body.site-home .trust-item span { color: var(--sd-muted); }

body.site-home .section { padding: 88px 0; }
body.site-home .section-alt { border-color: var(--sd-line); background: var(--sd-bg); }
body.site-home .section-heading h2,
body.site-home .journey-copy h2 { color: var(--sd-heading); font-weight: 750; letter-spacing: -.025em; }
body.site-home .section-heading p,
body.site-home .journey-copy p { color: var(--sd-muted); }
body.site-home .service-grid,
body.site-home .role-grid { gap: 16px; }
body.site-home .service-card,
body.site-home .journey-item,
body.site-home .role-card {
    border-color: var(--sd-line);
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow-sm);
}
body.site-home .service-card:hover,
body.site-home .journey-item:hover,
body.site-home .role-card:hover { border-color: #bfdbfe; box-shadow: 0 10px 24px rgba(37,99,235,.08); }
body.site-home .service-card h3,
body.site-home .journey-item h3,
body.site-home .role-card h3 { color: var(--sd-heading); }
body.site-home .service-card p,
body.site-home .journey-item p,
body.site-home .role-card p { color: var(--sd-muted); }
body.site-home .service-link { color: var(--sd-primary); }
body.site-home .role-tag { border-color: #dbeafe; background: var(--sd-primary-soft); color: var(--sd-primary); }
body.site-home .cta-card {
    border: 1px solid #bfdbfe;
    border-left: 4px solid var(--sd-primary);
    background: linear-gradient(135deg, #eff6ff, #f8fafc);
}
body.site-home .cta-card h2 { color: var(--sd-heading); }
body.site-home .cta-card p { color: var(--sd-muted); }
body.site-home .footer { border-color: var(--sd-line); }
body.site-home .footer-links a:hover { color: var(--sd-primary); }
body.site-home .logged-bar { border-color: #bbf7d0; background: #f0fdf4; color: var(--sd-success); }

/* Public foster application */
body.public-foster-page { padding-bottom: 64px; }
body.public-foster-page .hero {
    padding: 72px 24px 58px;
    background:
        radial-gradient(circle at 20% 15%, rgba(96,165,250,.2), transparent 34%),
        linear-gradient(180deg, #eff6ff, #f8fafc);
    color: var(--sd-heading);
}
body.public-foster-page .hero h1 { color: var(--sd-heading); font-size: clamp(30px, 4vw, 42px); }
body.public-foster-page .hero p { color: var(--sd-muted); opacity: 1; font-size: 15px; }
body.public-foster-page .hero-badge { border: 1px solid #bfdbfe; background: rgba(255,255,255,.75); color: var(--sd-primary); }
body.public-foster-page .form-card,
body.public-foster-page .success-box {
    border: 1px solid var(--sd-line);
    border-radius: var(--sd-radius-lg);
    box-shadow: var(--sd-shadow);
}
body.public-foster-page input,
body.public-foster-page select,
body.public-foster-page textarea { border-color: var(--sd-line); border-radius: 10px; }
body.public-foster-page input:focus,
body.public-foster-page select:focus,
body.public-foster-page textarea:focus { border-color: var(--sd-primary); box-shadow: 0 0 0 4px rgba(37,99,235,.1); }
body.public-foster-page button[type="submit"] { background: linear-gradient(135deg, var(--sd-primary), var(--sd-primary-dark)); box-shadow: 0 4px 12px rgba(37,99,235,.22); }

/* Public certificate verification */
body.public-cert-page { padding-top: 72px; }
body.public-cert-page .brand .logo-icon { color: var(--sd-primary); }
body.public-cert-page .brand strong { color: var(--sd-heading); }
body.public-cert-page .card { border: 1px solid var(--sd-line); border-radius: var(--sd-radius-lg); box-shadow: var(--sd-shadow-sm); }
body.public-cert-page .search-row input { border-color: var(--sd-line); border-radius: 10px; }
body.public-cert-page .search-row input:focus { border-color: var(--sd-primary); box-shadow: 0 0 0 4px rgba(37,99,235,.1); }
body.public-cert-page .btn { background: linear-gradient(135deg, var(--sd-primary), var(--sd-primary-dark)); border-radius: 10px; }

@media (max-width: 1040px) {
    body.site-home .hero-grid { grid-template-columns: 1fr; }
    body.site-home .process-card { max-width: 720px; }
}

@media (max-width: 760px) {
    body.site-home .shell { width: min(100% - 28px, 1200px); }
    body.site-home .site-header { position: sticky; }
    body.site-home .header-inner { min-height: 64px; }
    body.site-home .brand-copy { display: none; }
    body.site-home .nav a:not(.nav-login) { display: none; }
    body.site-home .nav .nav-login { padding-inline: 11px; font-size: 13px; white-space: nowrap; }
    body.site-home .hero { padding: 58px 0 72px; }
    body.site-home .hero h1 { font-size: clamp(40px, 11vw, 52px); }
    body.site-home .hero-lead { font-size: 16px; }
    body.site-home .hero-actions { display: grid; }
    body.site-home .trust-grid { margin-top: -18px; }
    body.site-home .section { padding: 64px 0; }
    body.public-foster-page .hero { padding-top: 48px; }
    body.public-cert-page { padding: 28px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    body.site-home *, body.public-foster-page *, body.public-cert-page * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}