/* ─── Reset & custom properties ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:            #f0f4f8;
    --header-bg:     #1d4ed8;
    --header-text:   #ffffff;
    --card-bg:       #ffffff;
    --text:          #111827;
    --text-muted:    #6b7280;
    --border:        #e5e7eb;
    --focus-ring:    #3b82f6;
    --radius:        0.75rem;
    --shadow:        0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
    --shadow-hover:  0 6px 12px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.06);

    /* Topic colours — bg / text pairs, WCAG AA contrast */
    --c-algorithms-bg:              #e0e7ff; --c-algorithms-text:              #3730a3;
    --c-programming-bg:             #dcfce7; --c-programming-text:             #166534;
    --c-networking-bg:              #dbeafe; --c-networking-text:              #1e40af;
    --c-data-bg:                    #fef3c7; --c-data-text:                    #92400e;
    --c-security-bg:                #fee2e2; --c-security-text:                #991b1b;
    --c-computational_thinking-bg:  #ede9fe; --c-computational_thinking-text:  #5b21b6;
    --c-data_representation-bg:     #ccfbf1; --c-data_representation-text:     #065f46;
    --c-hardware-bg:                #e2e8f0; --c-hardware-text:                #334155;
    --c-software-bg:                #ffedd5; --c-software-text:                #9a3412;
    --c-logic-bg:                   #ecfccb; --c-logic-text:                   #3f6212;
    --c-software_development-bg:    #fae8ff; --c-software_development-text:    #86198f;
    --c-data_structures-bg:         #fce7f3; --c-data_structures-text:         #9d174d;
    --c-theory-bg:                  #f3e8ff; --c-theory-text:                  #6b21a8;
    --c-ethics-bg:                  #f5f5f4; --c-ethics-text:                  #44403c;
    --c-ai-bg:                      #e0f2fe; --c-ai-text:                      #075985;
    --c-robotics-bg:                #cffafe; --c-robotics-text:                #155e75;
}

/* ─── Base ────────────────────────────────────────────────────────────────── */
body {
    font-family: system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

/* ─── Header ──────────────────────────────────────────────────────────────── */
header {
    background: var(--header-bg);
    color: var(--header-text);
    padding: 0.875rem 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.site-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.title-icon { font-size: 1.75rem; line-height: 1; }

.site-title h1 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}

.site-subtitle {
    font-size: 0.8rem;
    opacity: 0.85;
    line-height: 1.3;
}

@media (max-width: 600px) {
    .site-subtitle { display: none; }
}

/* ─── Language switcher ───────────────────────────────────────────────────── */
.lang-switcher { display: flex; gap: 0.375rem; flex-shrink: 0; }

.lang-btn {
    background: rgba(255,255,255,.15);
    border: 2px solid rgba(255,255,255,.35);
    color: white;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    min-height: 44px;
    transition: background 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.lang-native { font-weight: 600; }

.lang-english {
    font-size: 0.7rem;
    font-weight: 400;
    opacity: 0.8;
}

.lang-btn:hover { background: rgba(255,255,255,.28); }

.lang-btn.active {
    background: white;
    color: var(--header-bg);
    border-color: white;
}

/* ─── Main layout ─────────────────────────────────────────────────────────── */
main {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1rem 2rem;
    flex: 1;
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.sidebar {
    position: sticky;
    top: 5rem;
    min-width: 0;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    scrollbar-width: thin;
}

.main-content {
    min-width: 0;
}

@media (max-width: 900px) {
    main {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .sidebar {
        position: static;
    }
}

/* ─── Search ──────────────────────────────────────────────────────────────── */
.search-wrap {
    position: relative;
    margin-bottom: 1.25rem;
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    pointer-events: none;
}

#search {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    font-size: 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--card-bg);
    outline: none;
    transition: border-color 0.15s;
    min-height: 52px;
}

#search:focus { border-color: var(--focus-ring); }

/* ─── Topic filter (sidebar) ──────────────────────────────────────────────── */
.topic-filters {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.25rem;
}

.topic-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    min-height: 44px;
    width: 100%;
    text-align: left;
    background: var(--card-bg);
    color: var(--text-muted);
    border-color: var(--border);
    transition: all 0.15s;
}

.topic-chip:hover { color: var(--text); border-color: #9ca3af; }

/* Mobile: revert to horizontal scroll */
@media (max-width: 900px) {
    .topic-filters {
        flex-direction: row;
        overflow-x: auto;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        margin-bottom: 1.25rem;
        scrollbar-width: none;
    }
    .topic-filters::-webkit-scrollbar { display: none; }
    .topic-chip {
        width: auto;
        border-radius: 2rem;
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* "All" chip — active state */
.topic-chip[data-topic="all"].active {
    background: var(--header-bg);
    color: white;
    border-color: var(--header-bg);
}

/* Topic-coloured chips */
.topic-chip[data-topic="algorithms"]             { background: var(--c-algorithms-bg);             color: var(--c-algorithms-text);             border-color: var(--c-algorithms-bg); }
.topic-chip[data-topic="programming"]            { background: var(--c-programming-bg);            color: var(--c-programming-text);            border-color: var(--c-programming-bg); }
.topic-chip[data-topic="networking"]             { background: var(--c-networking-bg);             color: var(--c-networking-text);             border-color: var(--c-networking-bg); }
.topic-chip[data-topic="data"]                   { background: var(--c-data-bg);                   color: var(--c-data-text);                   border-color: var(--c-data-bg); }
.topic-chip[data-topic="security"]               { background: var(--c-security-bg);               color: var(--c-security-text);               border-color: var(--c-security-bg); }
.topic-chip[data-topic="computational_thinking"] { background: var(--c-computational_thinking-bg); color: var(--c-computational_thinking-text); border-color: var(--c-computational_thinking-bg); }
.topic-chip[data-topic="data_representation"]    { background: var(--c-data_representation-bg);    color: var(--c-data_representation-text);    border-color: var(--c-data_representation-bg); }
.topic-chip[data-topic="hardware"]               { background: var(--c-hardware-bg);               color: var(--c-hardware-text);               border-color: var(--c-hardware-bg); }
.topic-chip[data-topic="software"]               { background: var(--c-software-bg);               color: var(--c-software-text);               border-color: var(--c-software-bg); }
.topic-chip[data-topic="logic"]                  { background: var(--c-logic-bg);                  color: var(--c-logic-text);                  border-color: var(--c-logic-bg); }
.topic-chip[data-topic="software_development"]   { background: var(--c-software_development-bg);   color: var(--c-software_development-text);   border-color: var(--c-software_development-bg); }
.topic-chip[data-topic="data_structures"]        { background: var(--c-data_structures-bg);        color: var(--c-data_structures-text);        border-color: var(--c-data_structures-bg); }
.topic-chip[data-topic="theory"]                 { background: var(--c-theory-bg);                 color: var(--c-theory-text);                 border-color: var(--c-theory-bg); }
.topic-chip[data-topic="ethics"]                 { background: var(--c-ethics-bg);                 color: var(--c-ethics-text);                 border-color: var(--c-ethics-bg); }
.topic-chip[data-topic="ai"]                     { background: var(--c-ai-bg);                     color: var(--c-ai-text);                     border-color: var(--c-ai-bg); }
.topic-chip[data-topic="robotics"]               { background: var(--c-robotics-bg);               color: var(--c-robotics-text);               border-color: var(--c-robotics-bg); }

/* Active border on all coloured chips */
.topic-chip.active { box-shadow: 0 0 0 2px currentColor; }

/* ─── Keyword grid ────────────────────────────────────────────────────────── */
.keyword-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 580px)  { .keyword-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .keyword-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .keyword-grid { grid-template-columns: repeat(4, 1fr); } }

/* ─── Keyword card ────────────────────────────────────────────────────────── */
.keyword-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: box-shadow 0.15s, transform 0.15s;
}

.keyword-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.card-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    cursor: default;
}

.chip-label { display: none; }

@media (max-width: 900px) {
    .card-chip {
        width: auto;
        height: auto;
        border-radius: 2rem;
        padding: 0.2rem 0.6rem;
        gap: 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
    }
    .chip-label { display: inline; }
}

.card-chip[data-topic="algorithms"]             { background: var(--c-algorithms-bg);             color: var(--c-algorithms-text); }
.card-chip[data-topic="programming"]            { background: var(--c-programming-bg);            color: var(--c-programming-text); }
.card-chip[data-topic="networking"]             { background: var(--c-networking-bg);             color: var(--c-networking-text); }
.card-chip[data-topic="data"]                   { background: var(--c-data-bg);                   color: var(--c-data-text); }
.card-chip[data-topic="security"]               { background: var(--c-security-bg);               color: var(--c-security-text); }
.card-chip[data-topic="computational_thinking"] { background: var(--c-computational_thinking-bg); color: var(--c-computational_thinking-text); }
.card-chip[data-topic="data_representation"]    { background: var(--c-data_representation-bg);    color: var(--c-data_representation-text); }
.card-chip[data-topic="hardware"]               { background: var(--c-hardware-bg);               color: var(--c-hardware-text); }
.card-chip[data-topic="software"]               { background: var(--c-software-bg);               color: var(--c-software-text); }
.card-chip[data-topic="logic"]                  { background: var(--c-logic-bg);                  color: var(--c-logic-text); }
.card-chip[data-topic="software_development"]   { background: var(--c-software_development-bg);   color: var(--c-software_development-text); }
.card-chip[data-topic="data_structures"]        { background: var(--c-data_structures-bg);        color: var(--c-data_structures-text); }
.card-chip[data-topic="theory"]                 { background: var(--c-theory-bg);                 color: var(--c-theory-text); }
.card-chip[data-topic="ethics"]                 { background: var(--c-ethics-bg);                 color: var(--c-ethics-text); }
.card-chip[data-topic="ai"]                     { background: var(--c-ai-bg);                     color: var(--c-ai-text); }
.card-chip[data-topic="robotics"]               { background: var(--c-robotics-bg);               color: var(--c-robotics-text); }

/* Primary language section (English) */
.card-primary {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-bottom: 0.875rem;
}

/* Second language section */
.card-secondary {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--border);
}

.card-no-translation {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.card-no-translation p {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
}

.card-secondary .card-term  { color: var(--header-bg); }
.card-secondary .card-definition { color: var(--text-muted); }

.card-term {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.card-definition {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.65;
}

/* ─── No results ──────────────────────────────────────────────────────────── */
.no-results {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-muted);
    font-size: 1rem;
    padding: 3rem 1rem;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
footer {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 2;
}

footer a {
    color: var(--header-bg);
    font-weight: 600;
    text-decoration: none;
}

footer a:hover { text-decoration: underline; }