/* FocusWize v3 additions. Uses the design tokens defined in app.css. */

html { scroll-behavior: smooth; }
body.focuswize-site { margin: 0; }
body.admin-bar .fw-header { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .fw-header { top: 46px; } }

.fw-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.fw-skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 100;
    background: hsl(var(--primary)); color: hsl(var(--primary-foreground));
    padding: .75rem 1rem; font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
}
.fw-skip-link:focus { top: 1rem; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid hsl(var(--copper)); outline-offset: 2px;
}
.fw-current { box-shadow: inset 0 -2px 0 hsl(var(--copper)); }

/* Mobile navigation without JavaScript (<details>). */
.fw-mobile-nav > summary { list-style: none; cursor: pointer; }
.fw-mobile-nav > summary::-webkit-details-marker { display: none; }
.fw-mobile-nav .fw-close-icon { display: none; }
.fw-mobile-nav[open] .fw-close-icon { display: inline-flex; }
.fw-mobile-nav[open] .fw-open-icon { display: none; }
.fw-mobile-nav .fw-open-icon, .fw-mobile-nav .fw-close-icon { align-items: center; }
.fw-mobile-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    padding: .5rem 1.5rem 1.75rem; box-shadow: 0 18px 30px -20px hsl(var(--foreground) / .35);
    max-height: calc(100dvh - 4rem); overflow-y: auto;
}
.fw-mobile-panel ul { list-style: none; margin: 0; padding: 0; }

/* Step sequence (Snapshot → Audit → Guardrails). */
.fw-steps { list-style: none; margin-left: 0; padding: 0; display: grid; gap: 1px; background: hsl(var(--line)); border: 1px solid hsl(var(--line)); }
.fw-steps li { background: hsl(var(--background)); padding: 1.5rem 1.75rem; display: flex; flex-direction: column; gap: .5rem; position: relative; }
.fw-steps strong { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 1.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05; }
.fw-steps li > span:last-child { color: hsl(var(--muted-foreground)); font-size: .9375rem; line-height: 1.6; }
@media (min-width: 768px) {
    .fw-steps { grid-template-columns: repeat(3, 1fr); }
    .fw-steps li:not(:last-child)::after {
        content: ""; position: absolute; right: -9px; top: 50%; z-index: 1; width: 16px; height: 16px;
        background: hsl(var(--copper)); clip-path: polygon(0 0, 100% 50%, 0 100%);
        transform: translateY(-50%);
    }
}

/* Scorecard table. */
.fw-table-wrap { position: relative; overflow-x: auto; }
.fw-sample-flag { margin: 0; padding: .65rem 1rem; background: hsl(var(--copper-soft)); color: hsl(var(--foreground)); border-bottom: 1px solid hsl(var(--line)); }
.fw-table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 520px; }
.fw-table th, .fw-table td { text-align: left; vertical-align: top; padding: .85rem 1rem; border-bottom: 1px solid hsl(var(--line)); }
.fw-table thead th { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 400; color: hsl(var(--muted-foreground)); background: hsl(var(--card)); }
.fw-table tbody th { font-weight: 600; white-space: nowrap; }
.fw-table tbody td:last-child { color: hsl(var(--muted-foreground)); line-height: 1.5; }
.fw-table tbody tr:last-child th, .fw-table tbody tr:last-child td { border-bottom: 0; }
.fw-rag { display: inline-flex; align-items: center; gap: .45rem; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.fw-rag-dot { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.fw-rag-g .fw-rag-dot { background: #2f7d4f; }
.fw-rag-a .fw-rag-dot { background: #c9891f; }
.fw-rag-r .fw-rag-dot { background: #b33a2e; }

/* Long-form text (Insights posts, privacy notice, other pages). */
.fw-prose { font-size: 1.125rem; line-height: 1.75; }
.fw-prose > * + * { margin-top: 1.25rem; }
.fw-prose h2 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 1.9rem; font-weight: 600; text-transform: uppercase; line-height: 1.05; letter-spacing: -.01em; margin-top: 2.5rem; }
.fw-prose h3 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-size: 1.5rem; font-weight: 600; text-transform: uppercase; margin-top: 2rem; }
.fw-prose ul, .fw-prose ol { padding-left: 1.4rem; }
.fw-prose ul { list-style: square; }
.fw-prose ol { list-style: decimal; }
.fw-prose li + li { margin-top: .5rem; }
.fw-prose a { color: hsl(var(--copper)); text-decoration: underline; text-underline-offset: 4px; }
.fw-prose blockquote { border-left: 3px solid hsl(var(--copper)); padding-left: 1.25rem; font-style: italic; color: hsl(var(--muted-foreground)); }
.fw-prose img { max-width: 100%; height: auto; }

/* Form. */
.fw-form-error { border-left: 3px solid hsl(var(--destructive)); background: hsl(var(--destructive) / .06); padding: .85rem 1rem; color: hsl(var(--foreground)); }
.fw-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fw-checkbox { width: 1.1rem; height: 1.1rem; accent-color: hsl(var(--copper)); flex-shrink: 0; }
textarea { resize: vertical; }

/* Pagination. */
.fw-pagination { display: flex; gap: 1rem; flex-wrap: wrap; }
.fw-pagination .current { color: hsl(var(--copper)); }

/* Printable checklist. */
.fw-checklist-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 2px solid hsl(var(--foreground)); padding-bottom: .75rem; flex-wrap: wrap; }
.fw-checklist-list { list-style: none; padding: 0; margin: 0; }
.fw-checklist-list li { display: flex; gap: 1rem; align-items: flex-start; padding: .9rem 0; border-bottom: 1px solid hsl(var(--line)); break-inside: avoid; }
.fw-box { width: 1.15rem; height: 1.15rem; border: 1.5px solid hsl(var(--foreground)); flex-shrink: 0; margin-top: .2rem; }

@media print {
    @page { margin: 14mm; }
    .fw-header, footer, .fw-no-print, .fw-skip-link, #wpadminbar { display: none !important; }
    body { background: #fff !important; }
    .fw-checklist .max-w-\[60rem\] { padding: 0 !important; }
    .fw-checklist-list li { padding: .55rem 0; }
    .fw-checklist p { color: #222 !important; }
}

/* Utilities used by v3 templates that the compiled design CSS did not include. */
.bg-background\/92 { background-color: hsl(var(--background) / .92); }
.bg-primary-foreground\/15 { background-color: hsl(var(--primary-foreground) / .15); }
.hover\:text-primary-foreground:hover { color: hsl(var(--primary-foreground)); }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }
@media (min-width: 640px) {
    .sm\:items-start { align-items: flex-start; }
    .sm\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
    .sm\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Keep wide tables scrolling inside their box on small screens. */
.fw-table-wrap { max-width: 100%; }
:has(> .fw-table-wrap) { min-width: 0; }

/* Lighter copper on dark sections for readable contrast. */
.bg-aubergine .text-copper, .bg-aubergine-deep .text-copper { color: hsl(22 62% 66%); }
[id] { scroll-margin-top: 6rem; }