/* ===========================================================
   MTL Electric - Privacy policy (/privacy)
   Implements the "Privacy Policy Page" design (Claude Design).

   Loaded after css/shared.css and css/service.css, which supply
   the design tokens, base reset, .svc-crumbs, .svc-eyebrow and
   the .svc-aside / .svc-toc sidebar this page reuses (reusing
   .svc-toc also picks up the scroll-spy in js/site.js).
   =========================================================== */

/* -----------------------------------------------------------
   Page header
   ----------------------------------------------------------- */
.pv-head {
    padding: 72px 0 48px;
    border-bottom: 1px solid var(--line-soft);
}

.pv-head .wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pv-head__title {
    font: 700 clamp(42px, 3.6vw + 14px, 66px)/.95 var(--font-display);
    color: var(--navy);
    text-transform: uppercase;
}

.pv-head__lead {
    font: 400 18px/1.55 var(--font-body);
    color: var(--body);
    max-width: 680px;
    text-wrap: pretty;
}

.pv-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding-top: 4px;
    font: 500 14px/1.4 var(--font-body);
    color: var(--muted);
}
.pv-dates strong { color: var(--ink); }
.pv-dates__sep { color: #cfd3dc; }

@media (max-width: 1024px) {
    .pv-head { padding: 48px 0 36px; }
}

@media (max-width: 768px) {
    .pv-head { padding: 40px 0 28px; }
    .pv-head .wrap { gap: 12px; }
    .pv-head__lead { font-size: 15px; line-height: 1.5; }
    .pv-dates { font-size: 13px; }
    /* Only the "last updated" date earns the space here */
    .pv-dates__effective,
    .pv-dates__sep { display: none; }
}

/* -----------------------------------------------------------
   Body layout: contents sidebar | policy
   ----------------------------------------------------------- */
.pv-body {
    padding: 64px 0 var(--sec-y);
}

.pv-body .wrap {
    display: grid;
    grid-template-columns: 280px minmax(0, 760px);
    gap: 72px;
    align-items: start;
}

/* Contents list (.svc-toc, a size down for a 13-item list) */
.pv-toc a {
    font: 500 14px/1.3 var(--font-body);
    padding: 9px 0;
}
.pv-toc a.is-active {
    font-weight: 600;
    color: var(--navy);
}

.pv-help {
    background: var(--paper);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pv-help__label {
    font: 600 12px/1 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange);
}
.pv-help p {
    font: 400 14px/1.5 var(--font-body);
    color: var(--body);
}
.pv-help a { font-weight: 600; }

/* -----------------------------------------------------------
   Policy text
   ----------------------------------------------------------- */
.pv-policy {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font: 400 17px/1.7 var(--font-body);
    color: #2a3140;
}

.pv-policy > p { margin: 0; }
.pv-policy strong { color: var(--ink); }

.pv-policy a {
    color: var(--navy);
    font-weight: 600;
    border-bottom: 1px solid var(--orange);
    transition: color .15s;
}
.pv-policy a:hover { color: var(--orange); }

.pv-lead {
    font: 500 19px/1.6 var(--font-body);
    color: var(--ink);
}

.pv-policy h2 {
    margin: 24px 0 0;
    font: 700 30px/1 var(--font-display);
    color: var(--navy);
    text-transform: uppercase;
}

/* Em-dash lists */
.pv-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.pv-list li {
    display: flex;
    gap: 14px;
}
.pv-list li::before {
    content: '\2014';
    flex: none;
    color: var(--orange);
    font-weight: 700;
}

/* "In plain English" callout */
.pv-note {
    border-left: 3px solid var(--orange);
    background: var(--paper);
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pv-note__label {
    font: 600 12px/1 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange);
}
.pv-note p {
    font: 400 15px/1.6 var(--font-body);
    color: var(--ink);
}

/* Your rights & choices */
.pv-rights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pv-rights li {
    border: 1px solid var(--line);
    padding: 16px 18px;
    font: 500 15px/1.4 var(--font-body);
    color: var(--ink);
}

/* Contact block */
.pv-contact {
    border-top: 2px solid var(--navy);
    padding-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.pv-contact__col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pv-contact__label {
    font: 600 12px/1 var(--font-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}
.pv-contact__col span {
    font: 500 16px/1.5 var(--font-body);
    color: var(--ink);
}
.pv-contact__col a {
    font: 600 16px/1.5 var(--font-body);
    color: var(--navy);
    border-bottom: 0;
}

@media (max-width: 1024px) {
    /* service.css hides .svc-aside here (service pages carry a separate
       mobile TOC); this page keeps its contents list at every width. */
    .pv-aside { display: flex; }

    .pv-body { padding: 48px 0 var(--sec-y); }
    .pv-body .wrap {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 40px;
    }
    .pv-policy { font-size: 16px; line-height: 1.65; }
    .pv-policy h2 { font-size: 26px; }
}

@media (max-width: 768px) {
    .pv-body { padding: 28px 0 56px; }
    .pv-body .wrap {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    /* The sidebar becomes a compact inline contents box */
    .pv-aside {
        display: flex;
        position: static;
        gap: 16px;
    }
    .pv-toc {
        background: var(--paper);
        border-top: 0;
        padding: 16px 18px;
        display: block;
    }
    .pv-toc .svc-toc__label {
        display: block;
        padding: 0 0 6px;
        font-size: 11px;
    }
    .pv-toc a {
        display: inline;
        padding: 0;
        border-bottom: 0;
        font: 600 14px/1.4 var(--font-body);
        color: var(--navy);
    }
    .pv-toc a:not(:last-child)::after {
        content: ' \00B7 ';
        color: var(--muted);
        font-weight: 400;
    }
    .pv-toc a.is-active { color: var(--orange); }

    /* Section 13 already carries the same contact details */
    .pv-aside .pv-help { display: none; }

    .pv-policy { gap: 16px; }
    .pv-lead { font-size: 17px; line-height: 1.55; }
    .pv-policy h2 {
        margin-top: 16px;
        font-size: 24px;
    }
    .pv-list { gap: 8px; }
    .pv-list li { gap: 12px; }
    .pv-note { padding: 16px 18px; }
    .pv-note__label { font-size: 11px; }
    .pv-note p { font-size: 14px; line-height: 1.55; }
    .pv-rights {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .pv-rights li { padding: 14px 16px; font-size: 14px; }
    .pv-contact {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-top: 16px;
    }
    .pv-contact__col span,
    .pv-contact__col a { font-size: 15px; }
}