/* ==========================================================================
   Public information / policy pages  (views: legal/show.php)

   This is the supplied CLR-Jobs page design, carried over unchanged: the dark
   top strip, the sticky translucent nav, the split hero with the tilted "visual"
   card, the breadcrumb, the sticky "On this page" index beside the policy
   column, the card grids, the red notice box, the blue band, the FAQ
   disclosure list, the search bar and the four-column footer.

   Two deliberate differences, both requested:
     1. The palette is the portal's own — navy #082b55 and its red accent —
        instead of the reference's generic blue, so these pages belong to
        Sun Stack. Everything else (sizes, spacing, radii, shadows, breakpoints)
        is exactly as supplied.
     2. A handful of rules are added for behaviour the portal needs and the
        static mock-up did not have: a current-page nav state, hiding filtered
        FAQ items, and the scroll-spy highlight in the index.

   Scoped by page: these class names (.top, .nav, .hero, .card, .band ...) are
   generic, so the sheet is only loaded by legal/show.php and must not be added
   to any shared layout.
   ========================================================================== */

:root {
    --navy: #082b55;
    --blue: #0756b5;
    --sky: #eaf5ff;
    --red: #ef3340;
    --ink: #14243a;
    --muted: #63748a;
    --line: #dce8f5;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Inter, Arial, sans-serif;
    color: var(--ink);
    line-height: 1.65;
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: min(1160px, calc(100% - 36px));
    margin: auto;
}

.top {
    background: var(--navy);
    color: #dcecff;
    padding: 7px 0;
    font-size: 13px;
}

.nav {
    position: sticky;
    top: 0;
    background: #ffffffed;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    z-index: 9;
}

.navin {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.brand {
    font-size: 24px;
    font-weight: 900;
    color: var(--navy);
    letter-spacing: -1px;
}

.brand b {
    color: var(--red);
}

.links {
    display: flex;
    gap: 18px;
    margin-left: auto;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 700;
    color: #40536b;
}

.links a:hover {
    color: var(--blue);
}

/* Added for the portal: the page you are on reads as current. */
.links a.is-current {
    color: var(--blue);
}

.btn {
    display: inline-block;
    padding: 11px 17px;
    border-radius: 11px;
    font-weight: 800;
    border: 0;
    cursor: pointer;
}

.primary {
    background: var(--red);
    color: white;
}

.outline {
    border: 1px solid #cbdcf0;
    color: var(--blue);
    background: white;
}

.hero {
    background: linear-gradient(115deg, #f3f9ff, #e2f1ff 65%, #fff);
    padding: 62px 0;
    overflow: hidden;
}

.heroGrid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 38px;
    align-items: center;
}

.eyebrow {
    display: inline-block;
    background: white;
    border: 1px solid #d6e9ff;
    color: var(--blue);
    border-radius: 30px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 800;
}

.eyebrow:before {
    content: '● ';
    color: var(--red);
}

h1 {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -2px;
    color: var(--navy);
    margin: 18px 0;
}

h1 span {
    color: var(--blue);
}

.hero p {
    font-size: 17px;
    color: #52677e;
    max-width: 620px;
}

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.visual {
    background: #ffffffd9;
    border: 1px solid white;
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 18px 50px #0b366317;
    transform: rotate(1deg);
}

.emoji {
    font-size: 48px;
    background: var(--sky);
    border-radius: 20px;
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
}

.visual h3 {
    font-size: 24px;
    color: var(--navy);
    margin: 15px 0 5px;
}

.mini {
    border: 1px solid var(--line);
    padding: 13px;
    border-radius: 13px;
    background: white;
    margin-top: 10px;
    font-weight: 700;
}

.mini .muted {
    font-weight: 400;
}

.section {
    padding: 62px 0;
}

.soft {
    background: #f5faff;
}

.head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 30px;
}

.head h2 {
    font-size: clamp(27px, 3vw, 42px);
    line-height: 1.15;
    color: var(--navy);
    letter-spacing: -1px;
    margin: 10px 0;
}

.head p,
.muted {
    color: var(--muted);
}

.grid3,
.grid4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
}

.grid4 {
    grid-template-columns: repeat(4, 1fr);
}

.card {
    border: 1px solid var(--line);
    border-radius: 20px;
    background: white;
    padding: 23px;
    box-shadow: 0 8px 24px #12395e08;
}

.ico {
    width: 48px;
    height: 48px;
    background: var(--sky);
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 24px;
    margin-bottom: 14px;
}

.card h3 {
    color: var(--navy);
    margin: 0 0 8px;
}

.card p {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 45px;
}

.stat {
    text-align: center;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 15px;
}

.stat b {
    display: block;
    font-size: 27px;
    color: var(--blue);
}

.stat span {
    font-size: 13px;
    color: var(--muted);
}

.crumb {
    padding: 16px 0;
    color: var(--muted);
    font-size: 13px;
}

.crumb a {
    color: var(--blue);
    font-weight: 700;
}

.split {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 30px;
    align-items: start;
}

.side {
    position: sticky;
    top: 95px;
    background: #f5faff;
    border: 1px solid var(--line);
    padding: 18px;
    border-radius: 17px;
}

.side h3 {
    color: var(--navy);
}

.side a {
    display: block;
    padding: 8px;
    color: #52677e;
    border-radius: 8px;
    font-size: 14px;
}

.side a:hover {
    background: #e3f1ff;
    color: var(--blue);
}

/* Added for the portal: the index entry for the section in view. */
.side a.is-active {
    background: #e3f1ff;
    color: var(--blue);
    font-weight: 700;
}

.policy h2 {
    font-size: 21px;
    color: var(--navy);
    scroll-margin-top: 100px;
}

.policy p,
.policy li {
    color: #53677d;
}

.policy ul {
    padding-left: 20px;
}

.policy li {
    margin: 6px 0;
}

.policy a {
    color: var(--blue);
    font-weight: 700;
}

.notice {
    padding: 15px 17px;
    border-radius: 13px;
    background: #fff1f2;
    border: 1px solid #ffd1d5;
    color: #84313a;
    font-size: 14px;
    margin: 25px 0;
}

.notice a {
    color: #84313a;
    text-decoration: underline;
}

.band {
    border-radius: 22px;
    background: linear-gradient(110deg, #0756b5, #0a3b75);
    color: white;
    padding: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.band h2 {
    margin: 0 0 5px;
}

.band p {
    margin: 0;
    color: #d5e9ff;
}

.formgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field.full {
    grid-column: 1/-1;
}

.field label {
    font-size: 13px;
    font-weight: 800;
    color: var(--navy);
}

input,
textarea,
select {
    width: 100%;
    padding: 12px;
    border: 1px solid #d7e3f0;
    border-radius: 10px;
    font: inherit;
    background: #fbfdff;
}

textarea {
    min-height: 120px;
}

.contactgrid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 20px;
}

.faq {
    border: 1px solid var(--line);
    border-radius: 13px;
    margin: 10px 0;
    background: white;
}

.faq summary {
    cursor: pointer;
    padding: 17px;
    font-weight: 800;
    color: var(--navy);
}

.faq p {
    padding: 0 17px 17px;
    margin: 0;
    color: var(--muted);
}

.search {
    display: flex;
    gap: 9px;
    max-width: 720px;
    margin: 20px auto 30px;
}

.search input {
    flex: 1;
}

.footer {
    background: linear-gradient(135deg, #06264b, #0a407b);
    color: #d5e7fb;
    padding: 45px 0 18px;
}

.footgrid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 25px;
}

.footer h4 {
    color: white;
    margin: 0 0 12px;
}

.footer a {
    display: block;
    color: #b4cbe4;
    font-size: 13px;
    margin: 8px 0;
}

.footer a:hover {
    color: #fff;
}

.footer p {
    font-size: 14px;
    color: #b4cbe4;
}

.footer .brand {
    color: #fff;
    display: inline-block;
    margin-bottom: 8px;
}

.footer .brand b {
    color: #ff7a72;
}

.footer .btn.primary {
    display: inline-block;
    color: white;
    margin-top: 6px;
}

.bottom {
    border-top: 1px solid #ffffff2b;
    margin-top: 28px;
    padding-top: 15px;
    font-size: 12px;
    color: #b4cbe4;
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.tabs {
    display: flex;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.tabs a {
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-weight: 700;
    color: var(--blue);
}

.tabs a:hover {
    background: var(--red);
    color: white;
}

.map {
    background: linear-gradient(135deg, #e6f3ff, #f7fbff);
    border: 1px dashed #b6d6f7;
    min-height: 120px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: var(--blue);
    font-weight: 800;
    margin-top: 20px;
}

@media (max-width: 900px) {
    .links {
        gap: 10px;
    }

    .grid4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .heroGrid {
        gap: 22px;
    }

    .footgrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .navin {
        padding: 12px 0;
        flex-wrap: wrap;
    }

    .links {
        order: 3;
        width: 100%;
        margin: 0;
        gap: 13px;
    }

    .navin > .btn {
        display: none;
    }

    .hero {
        padding: 42px 0;
    }

    .heroGrid,
    .split,
    .contactgrid {
        grid-template-columns: 1fr;
    }

    .visual {
        transform: none;
    }

    .section {
        padding: 43px 0;
    }

    .grid3,
    .grid4 {
        grid-template-columns: 1fr;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .side {
        position: static;
    }

    .formgrid {
        grid-template-columns: 1fr;
    }

    .field.full {
        grid-column: auto;
    }

    .band {
        flex-direction: column;
        align-items: flex-start;
    }

    .footgrid {
        grid-template-columns: 1fr 1fr;
    }

    .footgrid > div:first-child {
        grid-column: 1/-1;
    }

    .bottom {
        flex-direction: column;
        text-align: left;
    }

    .search {
        flex-direction: column;
    }

    /* The top strip's right-hand line needs the room on phones. */
    .top-right {
        display: block;
        margin-top: 2px;
    }
}