/* Shared presentation for About, Contact, and legal information pages. */
body.info-page {
    --info-teal: #0f8f84;
    --info-teal-bright: #58d0c5;
    --info-teal-soft: #e9f7f4;
    --info-blue: #153a59;
    --info-gold: #d4a64b;
    --info-line: #d8e6e7;
    --info-shadow: 0 18px 48px rgba(13, 47, 67, .09);
    background:
        radial-gradient(circle at 10% 4%, rgba(15, 143, 132, .1), transparent 25rem),
        #f3f8f8;
}

html[data-theme="dark"] body.info-page {
    --bg-primary: #0d1729;
    --bg-secondary: #152337;
    --bg-card: #132238;
    --border-color: #33485d;
    --text-primary: #f4f8f8;
    --text-secondary: #b9c7d2;
    --text-muted: #99aebe;
    --info-teal: #58d0c5;
    --info-teal-bright: #78ded5;
    --info-teal-soft: #15313b;
    --info-blue: #0b2632;
    --info-line: rgba(107, 198, 190, .24);
    --info-shadow: 0 22px 58px rgba(0, 8, 18, .24);
    background:
        radial-gradient(circle at 10% 4%, rgba(45, 212, 191, .08), transparent 27rem),
        #0d1729;
}

body.info-page .header {
    background: rgba(255, 255, 255, .96);
    border-bottom-color: rgba(11, 55, 62, .12);
}

html[data-theme="dark"] body.info-page .header {
    background: rgba(8, 28, 41, .96);
    border-bottom-color: rgba(99, 181, 176, .2);
}

body.info-page .logo {
    background: none;
    color: var(--text-primary);
    -webkit-text-fill-color: currentColor;
}

body.info-page .logo::after {
    color: var(--info-teal);
    content: ".";
}

body.info-page .nav-link:hover,
body.info-page .dropdown.active > .nav-link {
    background: rgba(15, 143, 132, .11);
    color: var(--info-teal);
}

body.info-page .main-container {
    align-items: start;
    gap: clamp(1.4rem, 3vw, 2.75rem);
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
    margin-inline: auto;
    max-width: 1320px;
    padding: 1.5rem 1.5rem 5rem;
    width: 100%;
}

body.info-page .main-content {
    min-width: 0;
    padding: 0;
}

body.info-page .welcome-section {
    background:
        linear-gradient(rgba(75, 178, 171, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75, 178, 171, .055) 1px, transparent 1px),
        radial-gradient(circle at 92% 5%, rgba(31, 156, 153, .25), transparent 36%),
        linear-gradient(135deg, #0b2632 0%, #0c202a 72%);
    background-size: 44px 44px, 44px 44px, auto, auto;
    border: 1px solid rgba(81, 184, 177, .3);
    border-radius: 1.5rem;
    box-shadow: 0 24px 70px rgba(2, 15, 25, .2);
    margin-bottom: 1.5rem;
    min-height: 300px;
    padding: clamp(2.75rem, 6vw, 5rem);
    text-align: left;
}

body.info-page .welcome-section::before {
    background: linear-gradient(90deg, var(--info-teal-bright), #86d5c1 72%, var(--info-gold));
    height: 4px;
}

body.info-page .welcome-section h1 {
    background: none;
    color: #f7fbfa;
    font-size: clamp(2.65rem, 5vw, 4.8rem);
    letter-spacing: -.05em;
    line-height: 1.02;
    margin: 0 0 1.25rem;
    max-width: 760px;
    -webkit-text-fill-color: currentColor;
}

body.info-page .welcome-section > p:not(.info-eyebrow) {
    color: #c8d9dc;
    font-size: clamp(1rem, 1.45vw, 1.18rem);
    line-height: 1.75;
    margin: 0;
    max-width: 720px;
}

body.info-page .info-eyebrow {
    align-items: center;
    color: var(--info-teal-bright);
    display: flex;
    font-size: .75rem;
    font-weight: 800;
    gap: .7rem;
    letter-spacing: .14em;
    margin: 0 0 1.3rem;
    text-transform: uppercase;
}

body.info-page .info-eyebrow span {
    background: currentColor;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(88, 208, 197, .12);
    height: .48rem;
    width: .48rem;
}

body.info-page .main-content > .content-card,
body.info-page .sidebar > .content-card {
    background: var(--bg-card);
    border: 1px solid var(--info-line);
    border-radius: 1.15rem;
    box-shadow: var(--info-shadow);
}

body.info-page .main-content > .content-card {
    padding: clamp(1.6rem, 3.5vw, 3rem);
}

body.info-page .main-content > .content-card h2,
body.info-page .main-content > .content-card h3 {
    color: var(--text-primary);
    letter-spacing: -.02em;
    line-height: 1.25;
    margin-top: 2.2rem;
}

body.info-page .main-content > .content-card h2:first-child,
body.info-page .main-content > .content-card > p:first-child + h2 {
    margin-top: 0;
}

body.info-page .main-content > .content-card h2 {
    font-size: clamp(1.65rem, 3vw, 2.1rem);
}

body.info-page .main-content > .content-card h3 {
    border-left: 3px solid var(--info-teal);
    font-size: 1.22rem;
    padding-left: .85rem;
}

body.info-page .main-content > .content-card p,
body.info-page .main-content > .content-card li {
    color: var(--text-secondary) !important;
    line-height: 1.78;
}

body.info-page .main-content > .content-card a,
body.info-page .main-content > .content-card a:visited {
    color: var(--info-teal) !important;
    font-weight: 700;
    text-decoration-color: color-mix(in srgb, var(--info-teal) 42%, transparent) !important;
    text-underline-offset: .2em;
}

body.info-page .sidebar {
    padding: 0;
    position: sticky;
    top: 6rem;
}

body.info-page .sidebar > .content-card {
    overflow: hidden;
    padding: 1.35rem;
}

body.info-page .sidebar > .content-card::before {
    background: linear-gradient(90deg, var(--info-teal), var(--info-teal-bright), var(--info-gold));
    content: "";
    display: block;
    height: 3px;
    margin: -1.35rem -1.35rem 1.25rem;
}

body.info-page .sidebar h3 {
    color: var(--text-primary);
    font-size: 1.18rem;
    margin-bottom: 1rem;
}

body.info-page .sidebar .content-card > div {
    gap: .65rem !important;
}

body.info-page .sidebar .content-card > div > a {
    background: var(--info-teal-soft) !important;
    border: 1px solid transparent;
    border-radius: .75rem !important;
    color: var(--text-secondary) !important;
    padding: .85rem .95rem !important;
    position: relative;
}

body.info-page .sidebar .content-card > div > a::after {
    color: var(--info-teal);
    content: "\2192";
    font-weight: 800;
    position: absolute;
    right: .85rem;
    top: 50%;
    transform: translateY(-50%);
}

body.info-page .sidebar .content-card > div > a:hover {
    border-color: var(--info-teal);
    transform: translateY(-2px);
}

body.info-page .sidebar a strong {
    color: var(--text-primary) !important;
}

body.info-page .sidebar a small {
    color: var(--text-muted);
    display: inline-block;
    max-width: calc(100% - 1.5rem);
}

@media (max-width: 900px) {
    body.info-page .main-container {
        grid-template-columns: 1fr;
    }

    body.info-page .main-content {
        order: 1 !important;
    }

    body.info-page .sidebar {
        order: 2 !important;
        position: static;
    }
}

@media (max-width: 640px) {
    body.info-page .main-container {
        padding: 1rem 1rem 3.5rem;
    }

    body.info-page .welcome-section {
        border-radius: 1.1rem;
        min-height: 0;
        padding: 2.5rem 1.4rem;
    }

    body.info-page .welcome-section h1 {
        font-size: clamp(2.1rem, 10vw, 3rem);
        overflow-wrap: anywhere;
        white-space: normal;
    }

    body.info-page .main-content > .content-card {
        padding: 1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.info-page .sidebar .content-card > div > a {
        transition: none;
    }
}