@font-face {
    font-family: 'Zed Display';
    src: url('https://hectormangas.com/assets/fonts/ZedDisplayLVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Zed Text';
    src: url('https://hectormangas.com/assets/fonts/ZedTextLVariable.woff2') format('woff');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Greta Mono';
    src: url('https://hectormangas.com/assets/fonts/GretaMonoNormalLVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
}

:root {
    --bg-color: #e6e6e6;
    --text-color: #222222;
    --card-bg: #f5f5f5;
    --link-color: #5f5f5f;
    --link-hover-color: #000000;

    /* Tag Colors (Backgrounds for pills) */
    --tag-dyslexia: #1565c0;
    --tag-autism: #7b1fa2;
    --tag-adhd: #ef6c00;
    --tag-vision: #2e7d32;

    --font-display: 'Zed Display', sans-serif;
    --font-body: 'Zed Text', sans-serif;
    --font-mono: 'Greta Mono', monospace;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    margin: 0;
    padding: 1rem;
    line-height: 1.6;
}

.container {
    max-width: 900px;
    /* Main container still wide for flexibility */
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    padding-bottom: 6rem;
    /* Space for fixed button */
}

/* Width Constraints for Lists */
/* Width Constraints for Lists */
.step,
#recommendations-container,
.results-header-block {
    max-width: 700px;
    /* Increased to 700px per Round 10 */
    /* Maintain alignment with subtitle which is 600px */
}

/* HEADER */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Center items vertically */
    padding: 1rem 0;
    margin-bottom: 1rem;
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-color);
}

#intro-header {
    /* Sticky moved to H1 inside HTML */
    background: var(--bg-color);
    padding-bottom: 1rem;
    padding-top: 0;
}

.header-breadcrumb {
    display: flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 1.2rem;
    gap: 0.5rem;
}

.nav-home {
    font-weight: bold;
    color: var(--text-color);
    text-decoration: none;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
}

.nav-link {
    font-family: var(--font-mono);
    text-decoration: none;
    color: var(--link-color);
    font-size: 0.9rem;
    font-weight: bold;
    transition: color 0.1s ease;
}

/* Links */
a {
    color: var(--text-color);
    /* Round 12: Inherit text color */
    text-decoration: underline;
    /* Round 12: Default underline */
    transition: color 0.1s ease;
}

a:hover {
    text-decoration: none;
    /* Round 12: No underline on hover */
    color: var(--text-color);
    /* Keep distinct or same? User said "text for links the same color as the rest of the text" */
}

.nav-link:hover {
    color: var(--link-hover-color);
    text-decoration: none;
}

/* Titles */
h1 {
    font-family: var(--font-display);
    font-size: 3rem;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    margin-top: 2rem;
    line-height: 1.1;
    font-style: normal;
    font-variation-settings: 'slnt' 0;
}

.subtitle {
    font-size: 1.2rem;
    opacity: 0.7;
    max-width: 600px;
    margin-bottom: 3rem;
}

/* Layout */
.step {
    animation: fadeIn 0.5s ease-out;
}

.hidden {
    display: none !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.fade-in-up {
    animation: fadeIn 0.4s ease-out forwards;
}

.fade-out {
    animation: fadeOut 0.3s ease-in forwards;
}

/* COLLAPSIBLES */
.group-section {
    margin-bottom: 2rem;
    /* Divide with border? */
    /* border-bottom: 3px solid var(--text-color); Thicker Divider */
    /* Wait, HTML structure changed to remove border from group-section and add it to wrapper */
    /* Let's double check HTML. Yes, border-bottom is on .group-title-wrapper in HTML now for sticky. */
    padding-bottom: 1rem;
}

.category-section {
    margin-bottom: 2rem;
    border-bottom: 3px solid var(--text-color);
    /* Thicker Divider */
}

.collapsible-trigger,
.sub-collapsible-trigger,
.category-trigger {
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    color: var(--text-color);
}

.group-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin: 0 0 1rem 0;
}

.category-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin-top: 1.5rem;
    /* More spacing between categories */
    margin-bottom: 1rem;
}

.category-header-text {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: bold;
    color: var(--text-color);
}

.chevron {
    font-size: 0.8rem;
    transition: transform 0.3s;
}

/* Rotate chevron when open */
.group-section.is-open .chevron,
.sub-group-header.is-open .sub-collapsible-trigger,
.category-section.is-open .chevron,
.category-header-wrap.is-open .chevron {
    transform: rotate(180deg);
}

.collapsible-content,
.sub-collapsible-content,
.category-content {
    display: none;
    margin-top: 0.5rem;
}

.group-section.is-open .collapsible-content,
.sub-collapsible-content.is-open,
.category-section.is-open .category-content {
    display: block;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* CHECKLIST ITEMS */
.selection-list,
.sub-selection-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sub-selection-list {
    padding-left: 2rem;
    margin-top: 0rem;
}

/* Row Style */
.check-item-row {
    display: flex;
    align-items: flex-start;
    /* Align checkbox with top */
    /* Align checkbox line with text line */
    gap: 1rem;
    padding: 0.7rem 1.3rem;
    /* Increase padding */
    margin-bottom: 0rem;
    /* Increase spacing between elements */
    border-radius: 8px;
    transition: background 0.1s;
}

.check-item-row:hover {
    background: rgba(0, 0, 0, 0.05);
    /* Highlight on hover */
    outline: 1px solid rgba(0, 0, 0, 0.1);
    /* Explicit highlight border */
}

/* Inline text fixes */
.text-content {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.label-text {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.2rem;
}

.description-block {
    display: block;
    font-size: 0.95rem;
    font-weight: 400;
    /* Non-bold */
    color: #666;
    /* Lighter */
    opacity: 1;
    /* Reset opacity control to color */
    line-height: 1.4;
    max-width: 90%;
}

/* For nested items logic */
.check-item-row.has-children {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.sub-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub-collapsible-trigger {
    width: auto;
    padding: 0 1rem;
    font-size: 0.8rem;
}

/* Checkbox Styling */
.checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    /* Ensure checkmark aligns with top of label */
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
    user-select: none;
    margin: 0;
    flex-shrink: 0;
    /* Don't shrink label */
}

.checkbox-wrapper input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
}

.checkmark {
    height: 20px;
    width: 20px;
    border: 2px solid var(--text-color);
    border-radius: 4px;
    display: inline-block;
    margin-right: 20px;
    margin-top: 7px;
    /* Fine-tune to match Display font baseline */
    position: relative;
    flex-shrink: 0;
}

.checkbox-wrapper input:checked~.checkmark {
    background-color: var(--text-color);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid var(--bg-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-wrapper input:checked~.checkmark:after {
    display: block;
}

/* Remove old block description style if present or ensure it doesn't conflict */
/* .description-inline { ... } merged above */


/* BUTTONS */
.actions {
    margin-top: 2rem;
}

.nav-btn {
    /* Shared styles */
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--text-color);
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    color: var(--text-color);
    min-width: 140px;
}

/* Get Recommendations Button */
/* Get Recommendations Button */
.nav-btn.next {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 100;
    font-size: 1.1rem;
    padding: 1rem 2rem;
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    /* Hidden by default (Round 9) */
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.nav-btn.next.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* .results-header-sticky-wrapper styles are handled inline in HTML */

.nav-btn.next.highlighted {
    background: var(--text-color);
    color: var(--bg-color);
}

.nav-btn.next.highlighted .next-label-title,
.nav-btn.next.highlighted .next-label-top {
    color: var(--bg-color) !important;
}

.nav-btn.next:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

.nav-btn.prev {
    align-items: flex-start;
    text-align: left;
}

.nav-btn:hover {
    background: var(--text-color);
    color: var(--bg-color);
    transform: translateY(-2px);
}

.nav-btn:hover * {
    color: var(--bg-color) !important;
}

.next-label-top,
.nav-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: var(--font-mono);
    opacity: 0.8;
}

.next-label-title,
.nav-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
}

/* Clear Button */
.clear-btn:hover {
    background: none !important;
    transform: none !important;
}

.clear-btn:hover .nav-label {
    opacity: 1 !important;
    color: var(--text-color) !important;
}

/* Rec Item Hover */
.rec-item:hover {
    background: rgba(0, 0, 0, 0.05);
    /* Highlight on hover */
    outline: 1px solid rgba(0, 0, 0, 0.1);
    /* Explicit highlight border */
    /* Transition inherited from rec-item? Add transition if needed */
    transition: background 0.1s;
}

/* RESULTS PAGE */
.results-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.results-header-block h2,
.results-title {
    font-size: 3rem;
    /* Match H1 size */
    font-family: var(--font-display);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.results-subtitle,
.results-subtitle-content {
    margin-bottom: 2rem;
    font-size: 1.2rem;
    opacity: 0.7;
    max-width: 600px;
}

.category-section {
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.category-header-text {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: bold;
}

.rec-list {
    list-style: none;
    padding: 0;
}

.rec-item {
    position: relative;
    /* Anchor for absolute tags */
    padding: 2.5rem 0;
    /* More padding */
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    /* Clearer divider */
    /* No bg, transparent */
}

/* Tags Top-Right */
.tags-container {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.tag-link {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    text-decoration: none;
    color: var(--bg-color) !important;
    /* Text is page bg */
    transition: opacity 0.2s;
    white-space: nowrap;
}

.tag-link:hover {
    opacity: 0.8;
}

/* Tag background colors */
.tag-link.dyslexia {
    background-color: var(--tag-dyslexia);
    color: white !important;
    /* Ensure readable text */
}

.tag-link.autism {
    background-color: var(--tag-autism);
    color: white !important;
}

.tag-link.adhd {
    background-color: var(--tag-adhd);
    color: white !important;
}

.tag-link.color-blindness,
.tag-link.low-vision,
.tag-link.glaucoma,
.tag-link.cataracts,
.tag-link.myopia {
    background-color: var(--tag-vision);
    color: white !important;
}

.more-tags-badge {
    font-size: 0.7rem;
    font-weight: 700;
    opacity: 0.5;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--text-color);
    border-radius: 20px;
    cursor: pointer;
    /* Pointer cursor for clickable badge */
    background: rgba(0, 0, 0, 0.05);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
}

/* Rec Item Content */
.rec-header {
    margin-right: 200px;
    /* Space for tags */
}

.rec-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    /* Prominent title */
    font-weight: 600;
}

.rec-desc {
    margin-top: 0.5rem;
    margin-left: 35px;
    /* Indent */
    max-width: 800px;
    opacity: 1;
    /* Reset opacity as requested indirectly by "zed display" style usually implying clearer text? User just said make it bigger and zed display. I'll keep opacity 1 for clarity or maybe 0.9. Let's stick to 0.8 but larger font might need more contrast. Let's try 0.9 or remove opacity. I'll remove opacity to be safe for legibility with Display font. */
    font-family: var(--font-display);
    font-size: 1.4rem;
    /* Bigger */
    line-height: 1.4;
}

/* Square Download Button (Round 15) */
#btn-download {
    border-radius: 4px;
    /* Square-ish */
}


/* PRINT STYLES */
@media print {

    header,
    .actions,
    #btn-back,
    #btn-print,
    #intro-header,
    #step-selection {
        display: none !important;
    }

    /* Force show results step */
    #step-results {
        display: block !important;
    }

    .container {
        margin: 0;
        max-width: 100%;
    }

    body {
        padding: 0;
        background: white;
        color: black;
    }

    .rec-item {
        page-break-inside: avoid;
        border-bottom: 1px solid #ccc;
    }

    .tags-container {
        position: static;
        /* Flow naturally in print */
        margin-bottom: 0.5rem;
    }

    .rec-header {
        margin-right: 0;
    }
}

/* WELCOME SECTION (Round 9) */
#welcome-section {
    min-height: 85vh;
    /* Almost full height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 4rem;
}

.welcome-title {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 2rem;
    font-family: var(--font-display);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: left top;
}

.welcome-title.minimized {
    font-size: 2rem;
    margin-bottom: 1rem;
    margin-top: 0;
    color: var(--link-color);
    /* Lighter gray/link color */
}

.return-btn-wrapper {
    margin-bottom: 1rem;
    animation: fadeIn 0.3s ease-out;
}

.return-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--link-color);
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: color 0.2s;
}

.return-btn:hover {
    color: var(--text-color);
}

.return-btn svg {
    transition: transform 0.2s;
}

.return-btn:hover svg {
    transform: translateX(-4px);
}

.mission-text {
    margin-bottom: 4rem;
    max-width: 800px;
}

.welcome-grid,
.topic-grid {
    /* Added .topic-grid alias */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    width: 100%;
}

.topic-card {
    background: var(--bg-color);
    border: 2px solid var(--text-color);
    border-radius: 16px;
    padding: 1.5rem;
    color: var(--text-color);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0px !important;
}

.topic-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    background: var(--text-color);
    color: var(--bg-color);
}

.topic-card.dashed {
    border: 2px dashed var(--text-color);
    background: transparent;
}

.topic-card.dashed:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-color);
    border-color: var(--text-color);
}

/* Dark mode overrides for hover */
@media (prefers-color-scheme: dark) {
    .topic-card:hover {
        color: var(--bg-color);
    }

    .topic-card.dashed:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-color);
    }
}

.topic-card h3 {
    margin: 0;
    font-size: 1.5rem;
    font-family: var(--font-display);
    font-variation-settings: 'slnt' 0;
}

.topic-card h3 em,
.topic-card h3 i {
    font-variation-settings: 'slnt' -15;
    font-style: italic;
}

.topic-card p {
    font-size: 1.1rem;
    font-family: var(--font-body);
    opacity: 0.8;
    margin: 0;
    line-height: 1.5;
}

.topic-card.highlight {
    animation: pulse-card 1s infinite ease-in-out;
    animation: none;
}