/* ════════════════════════════════════════════════════════════════
   Docs (/docs/, single doc) and client handover pages.
   Screen first, then the print sheet shared by both.
   Enqueued from includes/docs.php on those views only.
════════════════════════════════════════════════════════════════ */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.docs-page,
.doc-page {
    padding: var(--space-lg) 0 var(--space-xl);
}

/* the manual reads at a comfortable measure, not the full 1440 grid */
.doc-wrap,
.handover-wrap { max-width: 860px; }

/* ── /docs/ — intro and tools ────────────────────────────────── */

.docs-head { max-width: 640px; }

.docs-title,
.doc-title {
    font-size: clamp(2.25rem, 4.6vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.docs-sub,
.doc-summary {
    font-size: var(--text-lg);
    line-height: 1.55;
    color: var(--muted);
    margin-top: 14px;
    max-width: 52ch;
}

.docs-search,
.docs-jump {
    display: block;
    margin-top: var(--space-md);
}

.docs-search[hidden],
.docs-jump[hidden] { display: none; }

.docs-jump select,
.docs-search input {
    font: inherit;
    font-size: 15px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 16px;
    min-height: 48px;
}

.docs-search input { width: min(320px, 100%); }

.docs-jump select:focus-visible,
.docs-search input:focus-visible {
    outline: 2px solid var(--color-blue);
    outline-offset: 1px;
}

/* on desktop the sidebar is the jump menu */
@media (min-width: 769px) {
    .docs-jump { display: none; }
}

/* ── /docs/ — topic list ─────────────────────────────────────── */

.docs-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.docs-toc {
    position: sticky;
    top: calc(130px + var(--space-sm));
    align-self: start;
}

.docs-toc__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 10px;
}

.docs-toc ul { list-style: none; }

.docs-toc a {
    display: block;
    padding: 6px 0;
    font-size: 15px;
    color: var(--text);
    text-decoration: none;
}

.docs-toc a:hover { color: var(--color-green-text); }

.docs-topic + .docs-topic { margin-top: var(--space-md); }

.docs-topic[hidden],
.docs-row[hidden] { display: none; }

.docs-topic__title {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-green-text);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--text);
}

.docs-rows { list-style: none; }

.docs-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.docs-row__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

/* the whole row is the target */
.docs-row__title::after {
    content: "";
    position: absolute;
    inset: 0;
}

.docs-row:hover .docs-row__title { color: var(--color-green-text); }

.docs-row__summary {
    grid-column: 1;
    font-size: 15px;
    color: var(--muted);
    line-height: 1.5;
}

.docs-row__time {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--text-sm);
    color: var(--muted);
    white-space: nowrap;
}

.docs-empty {
    font-size: var(--text-lg);
    color: var(--muted);
    padding: var(--space-md) 0;
}

.docs-empty a { color: var(--color-green-text); }

@media (max-width: 768px) {
    /* the jump menu replaces the sidebar and rides under the sticky header */
    .docs-layout { display: block; }
    .docs-toc { display: none; }

    .docs-search { margin-top: var(--space-sm); }

    .docs-jump {
        position: sticky;
        top: 97px;
        z-index: 50;
        background: var(--bg);
        padding: 10px 0;
        margin-top: 0;
    }

    .docs-jump,
    .docs-search,
    .docs-jump select,
    .docs-search input { width: 100%; }

    .docs-page { padding-top: var(--space-md); }

    /* anchor jumps clear the header and the sticky jump bar */
    .docs-topic { scroll-margin-top: 80px; }

    .docs-row { display: block; }

    .docs-row__summary,
    .docs-row__time { display: block; margin-top: 2px; }
}

/* ── Single doc — header ─────────────────────────────────────── */

.doc-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: var(--text-sm);
    color: var(--muted);
    margin-bottom: var(--space-sm);
}

.doc-crumbs a {
    color: var(--color-green-text);
    text-decoration: none;
}

.doc-crumbs a:hover { color: var(--text); }

.doc-head {
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}

.doc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: var(--space-sm);
}

.doc-meta__line {
    font-size: var(--text-sm);
    color: var(--muted);
}

.doc-print {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border: 1px solid var(--text);
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.doc-print:hover {
    background: var(--text);
    color: var(--bg);
}

.doc-print[hidden] { display: none; }

/* ── Doc body — intro, numbered steps, screenshots, callouts ─── */

.doc-body { margin-top: var(--space-md); }

.doc-intro { margin-bottom: var(--space-md); }

.doc-intro p,
.doc-step__text p,
.ho-prose p {
    font-size: 17px;
    line-height: 1.7;
    max-width: 68ch;
}

.doc-intro p + p,
.doc-step__text p + p,
.ho-prose p + p { margin-top: 12px; }

.doc-intro a,
.doc-step__text a,
.ho-prose a,
.ho-help a { color: var(--color-green-text); }

.doc-steps {
    list-style: none;
    counter-reset: step;
}

.doc-step {
    counter-increment: step;
    position: relative;
    padding-left: 56px;
    padding-bottom: var(--space-md);
}

.doc-step + .doc-step {
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.doc-step::before {
    content: counter(step);
    position: absolute;
    left: 0;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-green-text);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    line-height: 1;
}

.doc-step + .doc-step::before { top: var(--space-md); }

.doc-step__title {
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.25;
    min-height: 36px;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.doc-shot { margin-top: var(--space-sm); }

.doc-shot a { display: block; }

.doc-shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
}

.doc-shot figcaption {
    font-size: var(--text-sm);
    color: var(--muted);
    margin-top: 8px;
}

/* two kinds only, and quiet: a coloured rule and a label, no fill */
.doc-callout {
    margin-top: var(--space-sm);
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--color-blue);
    max-width: 68ch;
}

.doc-callout--careful { border-left-color: var(--color-pink); }

.doc-callout__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 2px;
}

.doc-callout--careful .doc-callout__label { color: var(--color-pink-text); }

.doc-callout p:last-child {
    font-size: 16px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .doc-step { padding-left: 0; }

    .doc-step::before {
        position: static;
        margin-bottom: 10px;
    }

    .doc-step__title { min-height: 0; }
}

/* ── Related + help block ────────────────────────────────────── */

.doc-related {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.doc-related__title,
.ho-title {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-green-text);
    margin-bottom: 14px;
}

.doc-related ul { list-style: none; }

.doc-related li + li { margin-top: 8px; }

.doc-related a {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
}

.doc-related a:hover { color: var(--color-green-text); }

.doc-help {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-sm) var(--space-md);
    margin-top: var(--space-lg);
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: 2px;
}

.doc-help__title {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    line-height: 1.1;
}

.doc-help__sub {
    color: var(--muted);
    margin-top: 8px;
    max-width: 52ch;
}

.doc-help__sub a { color: var(--color-green-text); }

.doc-help__link {
    font-family: var(--font-serif);
    font-size: var(--text-xl);
    color: var(--color-green-text);
    text-decoration: none;
}

.doc-help__link:hover { color: var(--text); }

/* ── Handover ────────────────────────────────────────────────── */

.handover-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border);
}

.ho-section { margin-top: var(--space-lg); }

/* the block a client comes back for, so the one with a ground of its own */
.ho-glance {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: #fff;
    border: 1px solid var(--border);
    border-top: 3px solid var(--color-green);
    border-radius: 2px;
}

.ho-glance__row,
.ho-owns__row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: var(--space-sm);
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.ho-glance__row:last-child { border-bottom: 0; }

.ho-glance dt,
.ho-owns dt {
    font-size: var(--text-sm);
    color: var(--muted);
}

.ho-glance dd {
    font-size: 17px;
    font-weight: 600;
}

.ho-glance a { color: var(--color-green-text); }

.ho-lede {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
}

.ho-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.ho-table th,
.ho-table td {
    text-align: left;
    padding: 12px 16px 12px 0;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.ho-table thead th {
    font-size: var(--text-sm);
    font-weight: 400;
    color: var(--muted);
}

.ho-table tbody th { font-weight: 600; }

.ho-table__guide {
    text-align: right !important;
    padding-right: 0 !important;
    white-space: nowrap;
}

.ho-table__guide a {
    color: var(--color-green-text);
    font-weight: 600;
}

.ho-owns dd strong { font-weight: 600; }

.ho-owns dd span {
    display: block;
    color: var(--muted);
    font-size: 15px;
}

/* accordions: collapsed on screen, all open in print */
.ho-guide { border-bottom: 1px solid var(--border); }

.ho-guide:first-of-type { border-top: 1px solid var(--text); }

.ho-guide summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 16px 32px 16px 0;
    cursor: pointer;
    list-style: none;
    position: relative;
}

.ho-guide summary::-webkit-details-marker { display: none; }

.ho-guide summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 12px;
    font-size: 24px;
    line-height: 1;
    color: var(--color-green-text);
}

.ho-guide[open] summary::after { content: "\2212"; }

.ho-guide__title {
    font-size: 17px;
    font-weight: 600;
}

.ho-guide__meta {
    font-size: var(--text-sm);
    color: var(--muted);
}

.ho-guide__body { padding: 0 0 var(--space-md); }

.ho-guide__body > .doc-summary {
    margin: 0 0 var(--space-sm);
    font-size: 17px;
}

.ho-help p { font-size: 17px; }

.ho-help__note {
    color: var(--muted);
    font-size: 15px !important;
}

.handover-lock {
    max-width: 480px;
    padding: var(--space-lg) 0;
}

.handover-lock form { margin-top: var(--space-md); }

.handover-lock label {
    display: block;
    font-size: var(--text-sm);
    color: var(--muted);
}

.handover-lock input[type="password"] {
    display: block;
    width: 100%;
    margin-top: 6px;
    font: inherit;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
}

.handover-lock input[type="submit"] {
    margin-top: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 12px 22px;
    border: 0;
    border-radius: 6px;
    background: var(--text);
    color: var(--bg);
    cursor: pointer;
}

@media (max-width: 640px) {
    .ho-glance { padding: var(--space-sm); }

    .ho-glance__row,
    .ho-owns__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .ho-table thead { display: none; }

    .ho-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 12px 0;
        border-bottom: 1px solid var(--border);
    }

    .ho-table th,
    .ho-table td {
        padding: 0;
        border: 0;
    }

    .ho-table td:nth-child(2) {
        grid-row: 2;
        color: var(--muted);
        font-size: 15px;
    }

    .ho-table__guide { grid-row: 1 / span 2; grid-column: 2; }
}

/* ── Print masthead — paper only ─────────────────────────────── */

.doc-printhead { display: none; }

/* ════════════════════════════════════════════════════════════════
   PRINT — single docs and handovers
   Black on white, 11pt, no chrome. The cream ground floods ink on A4
   and the 10%-black hairline vanishes on paper, so both are replaced.
════════════════════════════════════════════════════════════════ */

@page {
    size: A4;
    margin: 16mm 15mm 18mm;

    @bottom-center {
        content: "Prepared by Visible \00b7 visible.ie";
        font-family: "Plus Jakarta Sans", arial, sans-serif;
        font-size: 8pt;
        color: #555;
    }
}

@media print {
    .site-header,
    .nav-primary,
    .nav-toggle,
    .ftr,
    .site-footer,
    .cta-band,
    .doc-print,
    .doc-help,
    .doc-crumbs,
    .docs-search,
    .docs-jump,
    .docs-toc,
    .ho-help__note { display: none !important; }

    html,
    body,
    .doc-page,
    .ho-glance {
        background: #fff !important;
    }

    body {
        font-size: 11pt;
        line-height: 1.5;
        color: #000 !important;
    }

    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .doc-page { padding: 0 !important; }

    .doc-wrap,
    .handover-wrap {
        max-width: none;
        padding: 0;
    }

    .doc-printhead {
        display: flex !important;
        align-items: center;
        gap: 8px;
        font-size: 9pt;
        color: #333;
        padding-bottom: 8pt;
        margin-bottom: 14pt;
        border-bottom: 0.5pt solid #999;
    }

    .doc-title { font-size: 24pt !important; }

    .doc-summary,
    .doc-meta__line,
    .doc-shot figcaption,
    .ho-glance dt,
    .ho-owns dt,
    .ho-owns dd span,
    .ho-guide__meta,
    .ho-table thead th,
    .docs-row__summary { color: #333 !important; }

    .doc-summary { font-size: 12pt !important; }

    .doc-intro p,
    .doc-step__text p,
    .ho-prose p,
    .ho-glance dd,
    .ho-help p,
    .ho-table { font-size: 11pt !important; }

    .doc-step__title { font-size: 13pt !important; }

    .doc-head,
    .handover-head,
    .doc-step + .doc-step,
    .ho-glance,
    .ho-glance__row,
    .ho-owns__row,
    .ho-table th,
    .ho-table td,
    .ho-guide,
    .doc-related { border-color: #999 !important; }

    /* A4 is narrower than the 768px switch, so the stacked mobile steps
       would apply on paper; keep the number beside the step instead */
    .doc-step {
        padding: 10pt 0 10pt 30pt !important;
    }

    .doc-step::before {
        position: absolute !important;
        top: 10pt !important;
        left: 0;
        width: 20pt;
        height: 20pt;
        font-size: 10pt;
        margin: 0;
        background: #fff !important;
        color: #000 !important;
        border: 1pt solid #000;
    }

    .doc-step__title { min-height: 20pt !important; }

    .ho-title,
    .doc-related__title { color: #000 !important; }

    .doc-step,
    .doc-callout,
    .doc-shot,
    .ho-table,
    .ho-glance,
    .ho-owns__row { break-inside: avoid; }

    h1, h2, h3,
    .doc-step__title,
    summary { break-after: avoid; }

    .ho-section { margin-top: 18pt; }

    /* one step to a page at most: cap the screenshot height */
    .doc-shot img {
        max-width: 100%;
        max-height: 110mm;
        width: auto;
        border-color: #999 !important;
    }

    .doc-callout { border-left-color: #000 !important; }

    .doc-callout__label { color: #000 !important; }

    /* every guide expanded, each starting a page */
    .ho-guide { break-before: page; border: 0 !important; }

    .ho-guide::details-content {
        content-visibility: visible;
        display: block;
    }

    .ho-guide summary { padding: 0 0 8pt; }

    .ho-guide summary::after { display: none; }

    .ho-guide__title { font-size: 16pt; }

    a {
        color: #000 !important;
        text-decoration: underline;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }

    /* a screenshot link or the print logo printing its own URL is noise */
    .doc-shot a::after,
    .ho-guide a[href^="#"]::after { content: none !important; }
}