/* ============================================================
   legal.css — long-form legal pages (privacy policy / terms)
   Ported from techowlshield.com so both sites read identically.
   Every rule is scoped under .legal, so nothing here can leak
   into the rest of techowl.com.
   ============================================================ */

.legal {
    position: relative;
    overflow: clip;

    --color-accent: #00AEFF;
    --color-accent-hover: #00aeffec;
    --color-white: #FFFFFF;
    --color-text: #FFFFFF;
    --color-text-muted: #cccccc;
    --color-text-muted-2: #cccccc;
    --color-border-soft: #ffffff14;
    --color-card-bg: #010516;
    --color-card-bg-2: #0a0d1f;
    --color-card-bg-3: #111323;
    --color-surface-soft: #fcfcfc0d;
    --color-border-blue: rgba(0, 140, 255, 0.32);
    --color-attack-icon-top: #2EB9FF;
    --color-attack-icon-bottom: #1C4E99;
    --color-attack-icon-glow: rgba(46, 185, 255, .45);
}

/* ---- page head ---- */
.legal .blog-hero {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    padding: 30px 30px;
    margin: 30px 0px;
    background:
        radial-gradient(120% 160% at 0% 0%, rgba(0, 174, 255, 0.45) 0%, rgba(0, 96, 180, 0.18) 34%, rgba(1, 5, 22, 0) 62%),
        linear-gradient(90deg, #062a52 0%, #041634 42%, var(--color-card-bg) 100%);
}

/* grid overlay */
.legal .blog-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 22.74px 22.74px;
    -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 90%);
    mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .35) 55%, #00000059 90%);
    pointer-events: none;
    z-index: 0;
}

/* keep hero content above the grid overlay */
.legal .blog-hero__eyebrow,
.legal .blog-hero__title,
.legal .blog-hero__sub {
    position: relative;
    z-index: 1;
}

.legal .blog-hero__eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 8px;
}

.legal .blog-hero__title {
    font-size: 32px;
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 10px;
    letter-spacing: normal;
}

.legal .blog-hero__sub {
    font-size: 16px;
    color: var(--color-text-muted-2);
    margin: 0;
    line-height: 1.7;
}

/* ---- layout ---- */
.legal-layout {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 2.5rem;
    align-items: start;
    margin: 0 auto;
}

/* ---- content column ---- */
.legal-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* each section is its own card */
.legal-block {
    scroll-margin-top: 100px;
    background: var(--color-card-bg-3);
    border: 1px solid var(--color-border-soft);
    border-radius: 9px;
    padding: 2rem;
}

.legal-block__head {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border-soft);
}

.legal-block__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 9px;
    background: linear-gradient(160deg, var(--color-attack-icon-top) 0%, var(--color-attack-icon-bottom) 100%);
    box-shadow: 0 0 12px var(--color-attack-icon-glow);
    color: var(--color-white);
    font-size: 22px;
}

/* phosphor icons are inlined as svg, so no icon font is loaded */
.legal-block__icon svg {
    display: block;
    width: 22px;
    height: 22px;
}

.legal-block .resolve-title {
    color: var(--color-white);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 14px;
}

.legal-block h3 {
    color: var(--color-white);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.5rem 0 .5rem;
}

.legal-block h4 {
    color: var(--color-white);
    font-size: .95rem;
    font-weight: 600;
    margin: 1.35rem 0 .5rem;
}

.legal-block p,
.legal-block li {
    color: var(--color-text-muted-2);
    font-size: 15px;
    line-height: 1.8;
}

.legal-block p {
    margin-bottom: 1rem;
}

.legal-block p:last-child {
    margin-bottom: 0;
}

.legal-block strong,
.legal-block b {
    color: var(--color-white);
    font-weight: 600;
}

/* custom bulleted lists with accent markers */
.legal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.legal-list li {
    position: relative;
    padding-left: 1.7rem;
    margin: 0;
}

/* line-style check mark drawn with borders (no icon font) */
.legal-list li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .35rem;
    width: 6px;
    height: 11px;
    border: solid var(--color-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.legal-list li strong {
    color: var(--color-white);
    font-weight: 600;
}

.legal-link {
    color: var(--color-accent);
    font-weight: 500;
    text-decoration: none;
    transition: color .2s ease;
}

.legal-link:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

/* highlighted grievance / contact card */
.legal-contact-card {
    background: var(--color-card-bg-2);
    border: 1px solid var(--color-border-soft);
    border-left: 3px solid var(--color-accent);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: 1.25rem 0;
}

.legal-contact-card p {
    margin-bottom: .4rem;
}

.legal-contact-card p:last-child {
    margin-bottom: 0;
}

/* ---- responsive data tables ---- */
.legal-table-wrap {
    overflow-x: auto;
    margin: .25rem 0;
    border-radius: 12px;
    border: 2px solid #222940;
}

.legal-table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
.legal-table-wrap::-webkit-scrollbar-thumb { background: rgba(241, 241, 241, .27); border-radius: 4px; }

.legal-table {
    width: 100%;
    min-width: 480px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
    margin: 0;
}

.legal-table th,
.legal-table td {
    text-align: left;
    padding: .85rem 1rem;
    border-bottom: 2px solid #222940;
    vertical-align: top;
    line-height: 1.7;
}

.legal-table thead th {
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: 600;
    white-space: nowrap;
}

/* zebra striping */
.legal-table tbody tr:nth-child(odd) td { background: #100D24; }
.legal-table tbody tr:nth-child(even) td { background: #0F162F; }

.legal-table tbody td {
    color: var(--color-white);
}

.legal-table tbody td:first-child {
    font-weight: 600;
    white-space: nowrap;
}

/* spec tables (privacy policy §4) carry their label in the first cell instead
   of a header row, so that column needs a fixed share of the width */
.legal-table--spec tbody td:first-child {
    width: 30%;
    white-space: normal;
}

.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td {
    border-bottom: none;
}

.legal-table tbody tr:hover td {
    background: #ffffff08;
}

/* spec tables: the first row is the header band, same as a thead row */
.legal-table--spec tbody tr:first-child td,
.legal-table--spec tbody tr:first-child:hover td {
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: 600;
}

/* ============================================================
   <= 991px — tablet and below
   ============================================================ */
@media (max-width: 991px) {
    .legal-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* ============================================================
   <= 767px — large mobile / small tablet
   ============================================================ */
@media (max-width: 767px) {
    .legal .blog-hero {
        padding: 24px 20px;
    }

    .legal .blog-hero__title {
        font-size: 2rem;
    }

    .legal-block {
        padding: 1.5rem 1.35rem;
    }

    .legal-block__head {
        gap: .7rem;
    }
}

/* ============================================================
   <= 575px — MOBILE
   collapse each table row into a stacked card so 2-column data
   stays readable without horizontal scrolling on phones
   ============================================================ */
@media (max-width: 575px) {
    .legal-table-wrap {
        border: none;
        border-radius: 0;
        overflow: visible;
    }

    .legal-table {
        min-width: 0;
        width: 100%;
    }

    .legal-table thead {
        display: none;
    }

    .legal-table tbody tr,
    .legal-table tbody td {
        display: block;
        width: 100%;
    }

    .legal-table tbody tr {
        border: 2px solid #222940;
        border-radius: 12px;
        overflow: hidden;
        margin-bottom: 1rem;
    }

    .legal-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .legal-table tbody td,
    .legal-table tbody tr:nth-child(odd) td,
    .legal-table tbody tr:nth-child(even) td {
        background: #100D24;
        border-bottom: 1px solid #222940;
        padding: .75rem 1rem;
        white-space: normal;
    }

    .legal-table tbody td:last-child {
        border-bottom: none;
    }

    /* show the column heading above each value */
    .legal-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .3rem;
        color: var(--color-accent);
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .legal-table tbody td:first-child {
        font-size: 1rem;
    }

    /* spec tables already carry their label in the first cell — show it as the
       heading and drop the generated one */
    .legal-table--spec tbody td::before {
        content: none;
    }

    .legal-table--spec tbody td:first-child {
        width: auto;
        color: var(--color-accent);
        font-size: .72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
        border-bottom: none;
        padding-bottom: 0;
    }

    /* first row stays the header band on phones too */
    .legal-table--spec tbody tr:first-child td {
        background: var(--color-accent);
    }

    .legal-table--spec tbody tr:first-child td:first-child {
        color: var(--color-white);
    }
}