/*
   /buitenverlichting (2026-09-30, owner's request).

   The page is built from the service-detail vocabulary (page hero, .detail
   with a sticky aside, .checklist--premium, .icon-cards, .steps, .faq) and
   the body class page-service-detail, so it looks native. This file only adds
   what a long guide needs and a service page does not: section rhythm, a
   figure for the diagram, a comparison pair, a table, a term list, a callout,
   the table of contents and the closing card. Everything is scoped to
   .page-outdoor-lighting and uses the tokens of eplus.css.
*/

.page-outdoor-lighting .ol-body > .lede {
    margin: 0;
}

.page-outdoor-lighting .ol-section {
    scroll-margin-top: calc(var(--sticky-offset, 5rem) + 0.5rem);
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--c-line);
}

.page-outdoor-lighting .ol-section > * + * {
    margin-top: 0.85rem;
}

.page-outdoor-lighting .ol-section > .h3 {
    margin-top: 1.5rem;
    font-size: var(--t-lg);
    font-weight: 650;
}

.page-outdoor-lighting .ol-section p {
    color: var(--c-ink-2);
    line-height: var(--lh-body);
}

.page-outdoor-lighting #vragen {
    scroll-margin-top: calc(var(--sticky-offset, 5rem) + 0.5rem);
}

/* Cards of what is possible: the icon-card, without an icon. */
.page-outdoor-lighting .ol-cards {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.page-outdoor-lighting .ol-cards .icon-card {
    border-color: var(--page-card-border, var(--c-line));
    border-radius: 0.62rem;
    background: linear-gradient(180deg, #fff, #fafbfc);
}

/* Figures: the diagram at its own width, captions as quiet notes. */
.page-outdoor-lighting .ol-figure {
    margin: 1.25rem 0 0;
}

.page-outdoor-lighting .ol-figure img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--c-line);
    border-radius: 0.62rem;
    background: #fff;
}

.page-outdoor-lighting .ol-figure--diagram img {
    max-width: 34rem;
    margin-inline: auto;
}

.page-outdoor-lighting .ol-figure figcaption {
    max-width: 34rem;
    margin: 0.5rem auto 0;
    color: var(--c-ink-3);
    font-size: var(--t-xs);
    line-height: 1.45;
    text-align: center;
}

/* 230 volt or low voltage: two cards side by side from 44rem. */
.page-outdoor-lighting .ol-compare {
    display: grid;
    gap: 0.85rem;
}

@media (min-width: 44rem) {
    .page-outdoor-lighting .ol-compare {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.page-outdoor-lighting .ol-compare__card {
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--page-card-border, var(--c-line));
    border-radius: 0.62rem;
    background: #fff;
}

.page-outdoor-lighting .ol-compare__card > * + * {
    margin-top: 0.6rem;
}

.page-outdoor-lighting .ol-compare__title {
    margin: 0;
    font-size: var(--t-base);
    font-weight: 700;
}

.page-outdoor-lighting .ol-compare__card p {
    font-size: var(--t-sm);
}

.page-outdoor-lighting .ol-compare__label {
    color: var(--c-ink) !important;
    font-size: var(--t-xs) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.page-outdoor-lighting .ol-compare__list {
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.35rem;
}

.page-outdoor-lighting .ol-compare__list li {
    position: relative;
    padding-left: 1.35rem;
    color: var(--c-ink-2);
    font-size: var(--t-sm);
    line-height: 1.5;
}

.page-outdoor-lighting .ol-compare__list li::before {
    content: "+";
    position: absolute;
    left: 0.2rem;
    top: 0;
    color: var(--c-red);
    font-weight: 800;
}

.page-outdoor-lighting .ol-compare__list--care li::before {
    content: "!";
    left: 0.35rem;
    color: var(--c-ink-3);
}

/* A grid item grows to its widest child by default (min-width: auto); without
   this the IP table's min-width widened the whole column on a phone. */
.page-outdoor-lighting .detail__body {
    min-width: 0;
}

/* The IP table: scrolls inside its own box on a narrow screen, never the page. */
.page-outdoor-lighting .ol-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--page-card-border, var(--c-line));
    border-radius: 0.62rem;
    background: #fff;
}

.page-outdoor-lighting .ol-table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: var(--t-sm);
}

.page-outdoor-lighting .ol-table caption {
    padding: 0.75rem 1rem 0.25rem;
    color: var(--c-ink-3);
    font-size: var(--t-xs);
    text-align: left;
}

.page-outdoor-lighting .ol-table th,
.page-outdoor-lighting .ol-table td {
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--c-line);
    color: var(--c-ink-2);
    line-height: 1.45;
    text-align: left;
    vertical-align: top;
}

.page-outdoor-lighting .ol-table thead th {
    background: var(--c-bg-2);
    color: var(--c-ink);
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.page-outdoor-lighting .ol-table tbody th {
    color: var(--c-red);
    font-family: var(--font-mono);
    font-weight: 700;
    white-space: nowrap;
}

/* 2026-10-05 (QA ISSUE-006): on a phone each row is a small card, the IP code
   on top and each value under its column name, so no column is cut off and
   nothing scrolls sideways. The column headings stay for screen readers
   (visually hidden); the table keeps its roles in the markup. */
@media (max-width: 43.99rem) {
    .page-outdoor-lighting .ol-table {
        min-width: 0;
    }

    .page-outdoor-lighting .ol-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .page-outdoor-lighting .ol-table tbody,
    .page-outdoor-lighting .ol-table tr,
    .page-outdoor-lighting .ol-table tbody th,
    .page-outdoor-lighting .ol-table td {
        display: block;
    }

    .page-outdoor-lighting .ol-table tbody tr {
        padding: 0.8rem 1rem;
        border-top: 1px solid var(--c-line);
    }

    .page-outdoor-lighting .ol-table tbody th,
    .page-outdoor-lighting .ol-table td {
        padding: 0.15rem 0 0;
        border-top: 0;
    }

    .page-outdoor-lighting .ol-table td::before {
        content: attr(data-label);
        display: block;
        margin-block-start: 0.35rem;
        color: var(--c-ink-3);
        font-size: var(--t-xs);
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
}

.page-outdoor-lighting .ol-note {
    padding: 0.72rem 0.85rem;
    border-left: 3px solid var(--c-red);
    background: var(--c-red-wash);
    font-size: var(--t-sm);
}

/* Ways to switch: a term list in two columns from 44rem. */
.page-outdoor-lighting .ol-terms {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0 0;
}

@media (min-width: 44rem) {
    .page-outdoor-lighting .ol-terms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.page-outdoor-lighting .ol-terms__item {
    padding: 0.95rem 1.05rem;
    border: 1px solid var(--page-card-border, var(--c-line));
    border-radius: 0.62rem;
    background: #fff;
}

.page-outdoor-lighting .ol-terms dt {
    color: var(--c-ink);
    font-weight: 700;
}

.page-outdoor-lighting .ol-terms dd {
    margin: 0.3rem 0 0;
    color: var(--c-ink-2);
    font-size: var(--t-sm);
    line-height: 1.5;
}

/* "Ons advies" after the problems. */
.page-outdoor-lighting .ol-callout {
    margin-top: 1.25rem !important;
    padding: 1.05rem 1.15rem;
    border: 1px solid var(--page-card-border, var(--c-line));
    border-left: 4px solid var(--c-red);
    border-radius: 0.62rem;
    background: #fff;
}

.page-outdoor-lighting .ol-callout > * + * {
    margin-top: 0.5rem;
}

.page-outdoor-lighting .ol-callout__title {
    color: var(--c-ink) !important;
    font-weight: 700;
}

/* Safety: text and the illustrative photo; the photo keeps its ratio. */
.page-outdoor-lighting .ol-safety .checklist {
    margin-top: 0.6rem;
}

.page-outdoor-lighting .ol-safety > div > * + * {
    margin-top: 0.85rem;
}

.page-outdoor-lighting .ol-safety .h3 {
    margin-top: 1.25rem;
    font-size: var(--t-lg);
    font-weight: 650;
}

.page-outdoor-lighting #werkwijze .service-detail__method-head {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* The table of contents in the aside. */
.page-outdoor-lighting .ol-toc__list {
    margin: 0;
    padding: 0 0 0 1.25rem;
    display: grid;
    gap: 0.2rem;
    color: var(--c-ink-3);
    font-size: var(--t-sm);
}

.page-outdoor-lighting .ol-toc__list a {
    display: inline-block;
    padding: 0.3rem 0;
    color: var(--c-ink);
    text-decoration: none;
}

.page-outdoor-lighting .ol-toc__list a:hover,
.page-outdoor-lighting .ol-toc__list a:focus-visible {
    color: var(--c-red);
    text-decoration: underline;
}

/* The questions: intro beside the list from 58rem. */
.page-outdoor-lighting .ol-faq__inner {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 58rem) {
    .page-outdoor-lighting .ol-faq__inner {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
        align-items: start;
    }
}

.page-outdoor-lighting .ol-faq__intro > * + * {
    margin-top: 0.6rem;
}

.page-outdoor-lighting .ol-faq__intro p:not(.eyebrow) {
    color: var(--c-ink-2);
}

.page-outdoor-lighting .ol-faq .faq__question {
    font-size: var(--t-base);
}

.page-outdoor-lighting .ol-faq .faq__answer {
    font-size: var(--t-base);
    line-height: 1.6;
}

/* The closing card. */
.page-outdoor-lighting .ol-closing__card {
    display: grid;
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--page-card-border, var(--c-line));
    border-radius: var(--page-card-radius, 0.78rem);
    background: linear-gradient(115deg, #f8f9fa 0%, #f1f3f5 52%, #e6eaed 100%);
}

.page-outdoor-lighting .ol-closing__card p {
    margin-top: 0.5rem;
    color: var(--c-ink-2);
}

@media (min-width: 58rem) {
    .page-outdoor-lighting .ol-closing__card {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}