@charset "UTF-8";
/*
 * design.css — Decision Tree Navigator
 *
 * All visual styles: colours, typography, borders, hover states, badges.
 * Only targets .dtnav-* classes — never relies on theme classes existing.
 * Theme-specific classes (secondary-navigation, current-menu-item, etc.)
 * are additive hooks in the HTML; this file does not need them.
 *
 * Disable via:
 *   Settings > Decision Tree > uncheck "Load design styles"
 *   or: add_filter( 'dtnav_load_design_css', '__return_false' );
 */

/* ── Colour tokens ───────────────────────────────────────────────────────── */
:where(.dtnav-root:not(.dtnav-root--no-design)) {
    /* Customization API — theme can override these */
    --dtnav-primary:          var(--wp--preset--color--primary, #b31b1b);
    --dtnav-primary-contrast: #ffffff; /* Text color on top of primary background */

    --dtnav-bg-alt:        #f8f8f8; /* Subtle neutral background for hovers/active states */
    --dtnav-primary-border:var(--wp--preset--color--subtle, #f0d0d0);

    --dtnav-border:        #dddddd;
    --dtnav-muted:         #555555;
    --dtnav-ink:           var(--wp--preset--color--contrast, #222222);
    --dtnav-focus:         #005fcc;

}

/* ── Base typography ─────────────────────────────────────────────────────── */
:where(.dtnav-root:not(.dtnav-root--no-design)) {
    /* Inherit everything from theme by default */
    font-family: inherit;
    font-size:   inherit;
    line-height: inherit;
    color:       var(--dtnav-ink);
}

.dtnav-root:not(.dtnav-root--no-design) h2 {
    font-size: 1.375em;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.75rem;
    color: var(--dtnav-ink);
}

.dtnav-root:not(.dtnav-root--no-design) h3 {
    font-size: 1.125em;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.5rem;
    color: var(--dtnav-ink);
}

.dtnav-root:not(.dtnav-root--no-design) h4 {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.25rem;
    color: var(--dtnav-ink);
}

:where(.dtnav-root:not(.dtnav-root--no-design)) p {
    margin: 0 0 0.75rem;
}

:where(.dtnav-root:not(.dtnav-root--no-design)) a {
    color: var(--dtnav-primary);
    text-decoration: none;
}

:where(.dtnav-root:not(.dtnav-root--no-design)) a:hover {
    text-decoration: underline;
}

/* ── Sidebar / All Pathways active link ──────────────────────────────────── */
:where(.dtnav-root:not(.dtnav-root--no-design)) .dtnav-tree-nav a[aria-current="step"],
:where(.dtnav-root:not(.dtnav-root--no-design)) .dtnav-tree-nav .current-menu-item > a {
    font-weight: 700;
    color: var(--dtnav-primary);
    text-decoration: none;
    border-left: 3px solid var(--dtnav-primary);
    padding-left: 6px;
}

/* ── Focus rings ─────────────────────────────────────────────────────────── */
.dtnav-root:not(.dtnav-root--no-design) button:focus,
.dtnav-root:not(.dtnav-root--no-design) a:focus,
.dtnav-root:not(.dtnav-root--no-design) [tabindex]:focus {
    outline: 2px solid var(--dtnav-focus) !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 2px var(--dtnav-bg), 0 0 0 4px var(--dtnav-focus) !important;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.dtnav-root:not(.dtnav-root--no-design) .dtnav-breadcrumb__item {
    font-size: 0.8em;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-breadcrumb__item + .dtnav-breadcrumb__item::before {
    color: var(--dtnav-muted);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-breadcrumb__link {
    font-weight: 600;
    color: var(--dtnav-primary);
    transition: color 0.1s;
}

:where(.dtnav-root:not(.dtnav-root--no-design)) .dtnav-breadcrumb__link:hover {
    color: var(--dtnav-primary);
    text-decoration: underline;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-breadcrumb__current {
    font-weight: 600;
    color: var(--dtnav-muted);
}

/* ── Arrows (CSS content, no SVG) ────────────────────────────────────────── */
.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choice-arrow,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-question__choice-arrow,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__item-arrow {
    color: var(--dtnav-muted);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-actions__back-arrow {
    color: inherit; /* Inherit from button color */
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choice:hover .dtnav-start__choice-arrow,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choice:focus-visible .dtnav-start__choice-arrow,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-question__choice:hover .dtnav-question__choice-arrow,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-question__choice:focus-visible .dtnav-question__choice-arrow,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__list--rows .dtnav-also__item:hover .dtnav-also__item-arrow,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__list--rows .dtnav-also__item:focus-visible .dtnav-also__item-arrow {
    color: var(--dtnav-primary);
}

/* ── Start screen ────────────────────────────────────────────────────────── */
.dtnav-root:not(.dtnav-root--no-design) .dtnav-tree {
    font-size: 0.875em;
    line-height: 1.4;
    list-style: none;
    padding: 0;
    margin: 0;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-tree ul {
    list-style: none;
    padding-left: 1.25rem;
    margin: 0.25rem 0 0.5rem 0;
    border-left: 1px solid var(--dtnav-border); /* Tree guidelines */
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-tree li {
    margin: 4px 0;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-tree a {
    display: block;
    color: var(--dtnav-primary);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    transition: background 0.2s, color 0.1s;
    border-left: 3px solid transparent;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-tree a:hover,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-tree a:focus-visible {
    background: var(--dtnav-bg-alt);
    color: var(--dtnav-primary);
}

/* Active item highlighting - use primary background for best contrast */
.dtnav-root:not(.dtnav-root--no-design) .dtnav-tree .current-menu-item > a {
    font-weight: 700;
    color: var(--dtnav-primary-contrast) !important;
    background: var(--dtnav-primary);
    border-left-color: var(--dtnav-primary-contrast);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__heading,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-question__heading,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__heading,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-tree-nav__title {
    font-size: 1.375em;
    margin-bottom: 1rem;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__intro {
    color: var(--dtnav-muted);
    margin-bottom: 20px;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choices {
    border: 1px solid var(--dtnav-border);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choices li + li {
    border-top: 1px solid var(--dtnav-border);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choice {
    transition: background 0.1s;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choice:hover,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choice:focus-visible {
    background: var(--dtnav-bg-alt);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choice-label {
    font-weight: 700;
    line-height: 1.3;
    transition: color 0.1s;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choice:hover .dtnav-start__choice-label,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choice:focus-visible .dtnav-start__choice-label {
    color: var(--dtnav-primary);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choice-desc {
    font-size: 0.8em;
    color: var(--dtnav-muted);
}

/* Fix contrast failure (SC 1.4.3): muted desc on red-light hover background is only ~2.4:1. */
/* Ensure high contrast on hover */
.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choice:hover .dtnav-start__choice-desc,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choice:focus-visible .dtnav-start__choice-desc {
    color: var(--dtnav-ink);
}

/* ── Question screen ─────────────────────────────────────────────────────── */
/* Question screen choices grid */
.dtnav-root:not(.dtnav-root--no-design) .dtnav-question__choices {
    border: 1px solid var(--dtnav-border);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-question__choices li + li {
    border-top: 1px solid var(--dtnav-border);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-question__choice {
    line-height: 1.45;
    transition: background 0.1s, color 0.1s;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-question__choice:hover,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-question__choice:focus-visible {
    background: var(--dtnav-bg-alt);
    color: var(--dtnav-primary);
}

/* ── Result screen ───────────────────────────────────────────────────────── */

/* Resource list */
.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource {
    border-bottom: 1px solid var(--dtnav-border);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resources > li:first-child {
    border-top: 1px solid var(--dtnav-border);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-name {
    font-size: 1.125em;
    margin: 0 0 0.25rem;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-name-link {
    color: var(--dtnav-primary);
    text-decoration: underline;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-name-link:hover {
    text-decoration: none;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-name-sep {
    color: var(--dtnav-ink);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-detail {
    font-size: 0.8125em;
    color: var(--dtnav-muted);
    margin: 0;
    line-height: 1.5;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-phone a {
    font-size: 1em;
    font-weight: 700;
    color: var(--dtnav-primary);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-field {
    font-size: 0.875em;
    color: var(--dtnav-muted);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-field a {
    color: inherit;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-field-details h4 {
    font-size: 1.1em; /* slightly larger than field text */
    font-weight: 700;
    margin: 8px 0 2px;
    color: var(--dtnav-ink);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-field-details h5 {
    font-size: 1em; /* same size as field text, weight provides distinction */
    font-weight: 600;
    margin: 6px 0 2px;
    color: var(--dtnav-ink);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-field-details p,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-field-details ul,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-field-details ol {
    margin: 4px 0;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-field-details ul,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-field-details ol {
    padding-left: 1.25rem;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-field-details a {
    color: var(--dtnav-primary);
    text-decoration: underline;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-field--phone {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--dtnav-primary);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-field--phone a {
    color: var(--dtnav-primary);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-field--website a,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__resource-field--email a {
    color: var(--dtnav-primary);
    font-weight: 600;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__note {
    font-size: 0.8125em;
    color: var(--dtnav-muted);
    border-left: 3px solid var(--dtnav-border);
    padding: 6px 12px;
    margin-top: 4px;
    margin-bottom: 14px;
}

/* ── Action buttons ──────────────────────────────────────────────────────── */
.dtnav-root:not(.dtnav-root--no-design) .dtnav-actions__back,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-actions__copy {
    font-size: 0.8125em;
    font-weight: 600;
    color: var(--dtnav-ink);
    border: 1px solid var(--dtnav-border);
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-actions__back:hover,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-actions__back:focus-visible,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-actions__copy:hover,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-actions__copy:focus-visible {
    background: var(--dtnav-primary);
    border-color: var(--dtnav-primary);
    color: #ffffff;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-actions__restart {
    font-size: 0.8125em;
    font-weight: 600;
    color: var(--dtnav-primary-contrast);
    background: var(--dtnav-primary);
    border: 1px solid var(--dtnav-primary);
    transition: background 0.1s;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-actions__restart:hover {
    filter: brightness(0.85);
}

/* ── "Also available" shelf ──────────────────────────────────────────────── */
.dtnav-root:not(.dtnav-root--no-design) .dtnav-also {
    border-top: 1px solid var(--dtnav-border);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__heading {
    font-size: 0.8em;
    font-weight: 700;
    color: var(--dtnav-muted);
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

/* Pills */
.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__list--pills .dtnav-also__item {
    border: 1px solid var(--dtnav-border);
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__list--pills .dtnav-also__item:hover,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__list--pills .dtnav-also__item:focus-visible {
    border-color: var(--dtnav-primary);
    background: var(--dtnav-bg-alt);
    color: var(--dtnav-primary);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__item-desc {
    color: var(--dtnav-muted);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__list--pills .dtnav-also__item:hover .dtnav-also__item-desc,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__list--pills .dtnav-also__item:focus-visible .dtnav-also__item-desc {
    color: var(--dtnav-ink);
}

/* Rows */
.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__list--rows {
    border: 1px solid var(--dtnav-border);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__list--rows li + li {
    border-top: 1px solid var(--dtnav-border);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__list--rows .dtnav-also__item {
    line-height: 1.45;
    transition: background 0.1s, color 0.1s;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__list--rows .dtnav-also__item:hover,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__list--rows .dtnav-also__item:focus-visible {
    background: var(--dtnav-bg-alt);
    color: var(--dtnav-primary);
}

/* ── Breadcrumb Decoration ──────────────────────────────────────────────── */
.dtnav-root:not(.dtnav-root--no-design) .dtnav-breadcrumb__item + .dtnav-breadcrumb__item::before {
    content: "›";
    color: var(--dtnav-muted);
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-breadcrumb__item:first-child .dtnav-breadcrumb__link,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-breadcrumb__item:first-child .dtnav-breadcrumb__current {
    padding-left: 0;
}

/* ── Decorative Arrows ──────────────────────────────────────────────────── */
.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choice-arrow::after,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-question__choice-arrow::after,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__item-arrow::after {
    content: '→';
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-actions__back-arrow::after {
    content: '←';
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-start__choice-arrow,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-question__choice-arrow,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-actions__back-arrow,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-also__item-arrow {
    transition: transform 0.15s ease;
}

.dtnav-start__choice:hover .dtnav-start__choice-arrow,
.dtnav-question__choice:hover .dtnav-question__choice-arrow,
.dtnav-also__item:hover .dtnav-also__item-arrow,
.dtnav-start__choice:focus-visible .dtnav-start__choice-arrow,
.dtnav-question__choice:focus-visible .dtnav-question__choice-arrow,
.dtnav-also__item:focus-visible .dtnav-also__item-arrow {
    transform: translateX(3px);
}

.dtnav-actions__back:hover .dtnav-actions__back-arrow,
.dtnav-actions__back:focus-visible .dtnav-actions__back-arrow {
    transform: translateX(-3px);
}

/* ── Entry Animation ─────────────────────────────────────────────────────── */
@keyframes dtnav-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-question,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-result,
.dtnav-root:not(.dtnav-root--no-design) .dtnav-start {
    animation: dtnav-in 0.18s ease;
}