﻿/* ================================================================
   Static Pages (Privacy, Terms, Disclaimer, Contact)
================================================================ */

/* ─── Hero ─────────────────────────────────────────────────── */
.sp-hero {
    background: linear-gradient(150deg, var(--navy-950) 0%, var(--navy-800) 60%, #0a2e1a 100%);
    padding: 3.5rem 0 5rem;
    position: relative;
    overflow: hidden;
}

.sp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 80% 40%, rgba(var(--primary-rgb), .06), transparent);
    pointer-events: none;
}

.sp-hero__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
    position: relative;
}

.sp-breadcrumb {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
    color: rgba(var(--primary-rgb), .6);
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.sp-breadcrumb a {
    color: rgba(var(--primary-rgb), .6);
    text-decoration: none;
    transition: color .15s;
}

.sp-breadcrumb a:hover { color: var(--gold-400); }
.sp-breadcrumb i { font-size: .6rem; opacity: .6; }

.sp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(var(--primary-rgb), .1);
    border: 1px solid rgba(var(--primary-rgb), .22);
    color: var(--gold-400);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .28rem .75rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
}

.sp-hero__title {
    font-size: clamp(1.7rem, 3.5vw, 2.6rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.15;
    margin: 0 0 1rem;
}

.sp-hero__title-accent { color: var(--gold-400); }

.sp-hero__subtitle {
    font-size: 1rem;
    color: rgba(255,255,255,.6);
    max-width: 560px;
    line-height: 1.7;
    margin: 0 0 1.75rem;
}

.sp-hero__meta {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.sp-hero__meta-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .76rem;
    color: rgba(255,255,255,.6);
}

.sp-hero__meta-item i { color: rgba(255,255,255,.6); font-size: .8rem; }

.sp-hero__wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    line-height: 0;
}

.sp-hero__wave svg { width: 100%; height: 50px; }

/* ─── Main Layout ───────────────────────────────────────────── */
.sp-main {
    background: var(--gray-50);
    padding: 3rem 0 5rem;
}

.sp-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 2.5rem;
    align-items: start;
}

/* ─── Prose ─────────────────────────────────────────────────── */
.sp-prose {
    background: var(--white);
    border-radius: .875rem;
    padding: 2.5rem;
    box-shadow: 0 2px 20px rgba(0,0,0,.05);
}

.sp-prose h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy-800);
    margin: 2.25rem 0 .75rem;
    padding-top: 2rem;
    border-top: 1px solid var(--gray-100);
    display: flex;
    align-items: center;
    gap: .5rem;
    scroll-margin-top: 90px;
}

.sp-prose h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.sp-prose h2 i { color: var(--gold-500); font-size: .95rem; }

.sp-prose h3 {
    font-size: .97rem;
    font-weight: 600;
    color: var(--navy-700);
    margin: 1.5rem 0 .5rem;
}

.sp-prose p {
    font-size: .93rem;
    color: var(--gray-600);
    line-height: 1.82;
    margin: 0 0 .9rem;
}

.sp-prose ul, .sp-prose ol {
    margin: .5rem 0 1rem 1.25rem;
    padding: 0;
}

.sp-prose li {
    font-size: .91rem;
    color: var(--gray-600);
    line-height: 1.75;
    margin-bottom: .3rem;
}

.sp-prose a { color: var(--navy-600); font-weight: 500; }
.sp-prose a:hover { color: var(--gold-600); }
.sp-prose strong { color: var(--navy-800); }

.sp-highlight {
    background: rgba(var(--primary-rgb), .07);
    border-left: 3px solid var(--gold-500);
    border-radius: 0 .5rem .5rem 0;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}

.sp-highlight p {
    margin: 0;
    font-size: .87rem;
    color: var(--gray-700);
    font-style: italic;
}

/* ─── Sidebar ───────────────────────────────────────────────── */
.sp-sidebar { position: sticky; top: 0px; }

.sp-toc {
    background: var(--white);
    border-radius: .875rem;
    padding: 1.5rem;
    box-shadow: 0 2px 20px rgba(0,0,0,.05);
    margin-bottom: 1rem;
}

.sp-toc__title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin: 0 0 .9rem;
}

.sp-toc__list { list-style: none; margin: 0; padding: 0; }
.sp-toc__item { margin-bottom: .15rem; }

.sp-toc__item a {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .8rem;
    color: var(--gray-500);
    text-decoration: none;
    padding: .35rem .5rem;
    border-radius: .375rem;
    transition: all .15s;
    line-height: 1.45;
}

.sp-toc__item a:hover {
    background: var(--gray-50);
    color: var(--navy-700);
}

.sp-toc__item a i {
    color: var(--gold-500);
    font-size: .65rem;
    margin-top: .22rem;
    flex-shrink: 0;
}

.sp-quick-links {
    background: linear-gradient(150deg, var(--navy-900), var(--navy-800));
    border-radius: .875rem;
    padding: 1.5rem;
}

.sp-quick-links__title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(var(--primary-rgb), .65);
    margin: 0 0 .9rem;
}

.sp-quick-links__list { list-style: none; margin: 0; padding: 0; }
.sp-quick-links__item { margin-bottom: .1rem; }

.sp-quick-links__item a {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    color: rgba(255,255,255,.55);
    text-decoration: none;
    padding: .4rem .5rem;
    border-radius: .375rem;
    transition: all .15s;
}

.sp-quick-links__item a:hover {
    background: rgba(255,255,255,.05);
    color: var(--gold-400);
}

.sp-quick-links__item a.active {
    color: var(--gold-400);
    background: rgba(var(--primary-rgb), .1);
}

.sp-quick-links__item a i { color: var(--gold-500); font-size: .78rem; }

/* ─── Alert ─────────────────────────────────────────────────── */
.sp-alert {
    padding: .9rem 1.25rem;
    border-radius: .5rem;
    margin-bottom: 1.75rem;
    font-size: .88rem;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    line-height: 1.55;
}

.sp-alert--success {
    background: rgba(5,150,105,.07);
    border: 1px solid rgba(5,150,105,.22);
    color: #065f46;
}

.sp-alert--error {
    background: rgba(220,38,38,.06);
    border: 1px solid rgba(220,38,38,.2);
    color: #991b1b;
}

.sp-alert i { flex-shrink: 0; margin-top: .15rem; font-size: 1rem; }
.sp-alert ul { margin: .4rem 0 0 1.1rem; padding: 0; }
.sp-alert ul li { margin-bottom: .2rem; }

/* ─── Contact Layout ────────────────────────────────────────── */
.contact-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: start;
}

.contact-card {
    background: var(--white);
    border-radius: .875rem;
    padding: 2.25rem;
    box-shadow: 0 2px 20px rgba(0,0,0,.05);
}

.contact-card__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy-800);
    margin: 0 0 .4rem;
}

.contact-card__subtitle {
    font-size: .88rem;
    color: var(--gray-500);
    margin: 0 0 2rem;
    line-height: 1.65;
}

.contact-form .form-group { margin-bottom: 1.2rem; }

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.contact-form .form-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--navy-700);
    margin-bottom: .4rem;
}

.contact-form .form-label .req { color: #dc2626; margin-left: .15rem; }

.contact-form .form-control {
    width: 100%;
    border: 1.5px solid var(--gray-200);
    border-radius: .5rem;
    padding: .62rem .85rem;
    font-size: .9rem;
    color: var(--gray-700);
    background: var(--gray-50);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}

.contact-form .form-control:focus {
    border-color: var(--navy-500);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .1);
}

.contact-form textarea.form-control {
    resize: vertical;
    min-height: 150px;
}

.contact-form .btn-submit {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--gold-500);
    color: var(--navy-900);
    font-weight: 700;
    font-size: .9rem;
    border: none;
    border-radius: .5rem;
    padding: .72rem 1.75rem;
    cursor: pointer;
    transition: all .2s;
    font-family: inherit;
}

.contact-form .btn-submit:hover {
    background: var(--gold-400);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), .35);
}

/* Contact info box */
.contact-info-card {
    background: var(--white);
    border-radius: .875rem;
    padding: 1.75rem;
    box-shadow: 0 2px 20px rgba(0,0,0,.05);
    margin-bottom: 1rem;
}

.contact-info-card__title {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gray-400);
    margin: 0 0 1.25rem;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1.2rem;
}

.contact-info-item:last-child { margin-bottom: 0; }

.contact-info-item__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: .5rem;
    background: rgba(var(--primary-rgb), .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-500);
    font-size: .9rem;
}

.contact-info-item__label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--gray-400);
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1;
}

.contact-info-item__value {
    font-size: .86rem;
    color: var(--gray-600);
    margin-top: .25rem;
    line-height: 1.55;
}

.contact-info-item__value a {
    color: var(--navy-600);
    text-decoration: none;
    font-weight: 500;
}

.contact-info-item__value a:hover { color: var(--gold-600); }

/* Contact sidebar social icons */
.contact-social-icons {
    display: flex;
    gap: .45rem;
    margin-top: .15rem;
}
.contact-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: .88rem;
    transition: background .2s, color .2s;
    text-decoration: none;
}
.contact-social-icons a:hover {
    background: var(--gray-50);
    color: var(--navy-700);
}

.contact-notice-card {
    background: linear-gradient(150deg, var(--navy-900), var(--navy-800));
    border-radius: .875rem;
    padding: 1.5rem;
    color: rgba(255,255,255,.65);
    font-size: .82rem;
    line-height: 1.65;
}

.contact-notice-card strong { color: var(--gold-400); display: block; margin-bottom: .5rem; font-size: .85rem; }

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .sp-container {
        grid-template-columns: 1fr;
    }

    .sp-sidebar {
        position: static;
        order: -1;
    }

    .sp-toc, .sp-quick-links { display: none; }

    .sp-prose { padding: 1.5rem; }

    .contact-wrap {
        grid-template-columns: 1fr;
    }

    .contact-form .form-row {
        grid-template-columns: 1fr;
    }
}
