/*
 * 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:           #222222;
    --dtnav-focus:         #005fcc;

    --dtnav-navy:          #073949; --dtnav-navy-bg: #e4f0f3; --dtnav-navy-border: #b0ced7;
    --dtnav-blue:          #005581; --dtnav-blue-bg: #e0eef8; --dtnav-blue-border: #9cc4e0;
    --dtnav-grn:           #3d6622; --dtnav-grn-bg:  #eaf4e2; --dtnav-grn-border:  #b0d49c;
    --dtnav-org:           #7a3d00; --dtnav-org-bg:  #fdf0e0; --dtnav-org-border:  #e0b880;
    --dtnav-wm:            #5c5248; --dtnav-wm-bg:   #f2efeb; --dtnav-wm-border:   #c4bbb4;
    --dtnav-prp:           #5b2c6f; --dtnav-prp-bg:  #f4ecf7; --dtnav-prp-border:  #d2b4de;
}

/* ── 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.375rem; /* 22px relative */
    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.125rem; /* 18px relative */
    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: 1rem; /* 16px relative */
    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: 12px;
}

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

.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: 14px;
    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.375rem; /* 22px relative */
    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: 12px;
    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 ───────────────────────────────────────────────────────── */

/* Badge */
.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 10px;
    margin-bottom: 8px;
    border: 1px solid;
    letter-spacing: 0.02em;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__badge--navy { background: var(--dtnav-navy-bg); color: var(--dtnav-navy); border-color: var(--dtnav-navy-border); }
.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__badge--blue { background: var(--dtnav-blue-bg); color: var(--dtnav-blue); border-color: var(--dtnav-blue-border); }
.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__badge--grn  { background: var(--dtnav-grn-bg);  color: var(--dtnav-grn);  border-color: var(--dtnav-grn-border);  }
.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__badge--org  { background: var(--dtnav-org-bg);  color: var(--dtnav-org);  border-color: var(--dtnav-org-border);  }
.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__badge--wm   { background: var(--dtnav-wm-bg);   color: var(--dtnav-wm);   border-color: var(--dtnav-wm-border);   }
.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__badge--red  { background: var(--dtnav-bg-alt); color: var(--dtnav-primary); border-color: var(--dtnav-primary-border);  }
.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__badge--prp  { background: var(--dtnav-prp-bg);  color: var(--dtnav-prp);  border-color: var(--dtnav-prp-border);  }

/* 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.125rem; /* 18px relative */
    margin: 0 0 0.25rem;
}

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

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

.dtnav-root:not(.dtnav-root--no-design) .dtnav-result__note {
    font-size: 13px;
    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 {
    font-size: 13px;
    font-weight: 600;
    color: #333333;
    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 {
    background: var(--dtnav-primary);
    border-color: var(--dtnav-primary);
    color: #ffffff;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-actions__restart {
    font-size: 13px;
    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 {
    background: #8f1515;
    border-color: #8f1515;
}

/* ── "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.7rem;
    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: #787c82;
}

.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: '→';
    font-size: 16px;
    line-height: 18px;
}

.dtnav-root:not(.dtnav-root--no-design) .dtnav-actions__back-arrow::after {
    content: '←';
    font-size: 16px;
    line-height: 18px;
    color: inherit; /* Inherit from arrow container */
}

.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;
}