/* HT123 Grade Hub UI v2.2.2
 * Separate late-loaded stylesheet to avoid stale child-theme style.css caches.
 */

html body.category {
    background: #eef3f8 !important;
    background-image: none !important;
    color: #1f3249 !important;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

html body.category #container {
    box-sizing: border-box !important;
    width: min(1180px, calc(100% - 28px)) !important;
    max-width: 1180px !important;
    margin: 18px auto !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 18px 50px rgba(15, 35, 65, .10) !important;
}

html body.category #top-bar {
    box-sizing: border-box !important;
    min-height: 0 !important;
    padding: 20px 28px 15px !important;
    background: #fff !important;
    border: 0 !important;
}

html body.category #top-bar-info { float: none !important; }
html body.category #site-title,
html body.category #site-title a {
    margin: 0 !important;
    padding: 0 !important;
    color: #13253d !important;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 32px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: -.025em !important;
    text-shadow: none !important;
    text-decoration: none !important;
}
html body.category #site-description {
    margin: 5px 0 0 !important;
    color: #6b7a90 !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
}

html body.category #nav-main {
    min-height: 0 !important;
    border: 0 !important;
    background: #155f92 !important;
    box-shadow: none !important;
}
html body.category #nav-main .nav-main,
html body.category #nav-main ul.nav-main { margin: 0 !important; }
html body.category #nav-main .nav-main a {
    padding: 10px 9px !important;
    color: #fff !important;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    text-shadow: none !important;
}
html body.category #nav-main .nav-main > li:hover > a,
html body.category #nav-main .nav-main > li.current-menu-item > a,
html body.category #nav-main .nav-main > li.current-menu-ancestor > a {
    background: #0f4f7b !important;
}

html body.category #main {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    padding: 18px 26px 42px !important;
    background: #f6f8fb !important;
}
html body.category #content,
html body.category #content-primary,
html body.category .content-area {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
}

html body.category .ht123-grade-hub-page {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    font-family: inherit !important;
}
html body.category .ht123-grade-hero {
    padding: 27px 30px !important;
    border: 1px solid #dfe7f1 !important;
    border-top: 4px solid #377cf6 !important;
    border-radius: 17px !important;
    background: linear-gradient(135deg, #fff 0%, #fff 78%, #f0f5ff 78%, #f0f5ff 100%) !important;
    box-shadow: 0 8px 24px rgba(22, 49, 85, .05) !important;
}
html body.category .ht123-grade-hero h1 {
    margin: 5px 0 9px !important;
    color: #19324f !important;
    font-family: inherit !important;
    font-size: 32px !important;
    line-height: 1.16 !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
}
html body.category .ht123-grade-hero p,
html body.category .ht123-grade-description {
    max-width: 920px !important;
    color: #5c6f87 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
}

html body.category .ht123-grade-category-nav {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 20px 0 24px !important;
}
html body.category .ht123-grade-category-card {
    min-width: 0 !important;
    border: 1px solid #e0e7f0 !important;
    border-top-width: 4px !important;
    border-radius: 16px !important;
    background: #fff !important;
    overflow: hidden !important;
    box-shadow: 0 7px 22px rgba(18, 42, 72, .055) !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
}
html body.category .ht123-grade-category-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(18, 42, 72, .095) !important;
}
html body.category .ht123-card-jump {
    box-sizing: border-box !important;
    min-height: 168px !important;
    padding: 19px 19px 15px !important;
    color: inherit !important;
    text-decoration: none !important;
}
html body.category .ht123-card-icon {
    width: 36px !important;
    height: 36px !important;
    margin-bottom: 13px !important;
    border-radius: 10px !important;
    font-size: 19px !important;
}
html body.category .ht123-card-title {
    margin: 0 0 7px !important;
    color: #142c49 !important;
    font-family: inherit !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    font-weight: 750 !important;
}
html body.category .ht123-card-desc {
    color: #65768b !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
}
html body.category .ht123-card-meta {
    box-sizing: border-box !important;
    min-height: 38px !important;
    padding: 9px 14px !important;
    border-top: 1px solid #edf1f6 !important;
    background: #fbfcfe !important;
    font-family: inherit !important;
    font-size: 11px !important;
}

html body.category .ht123-grade-sections {
    display: grid !important;
    gap: 16px !important;
}
html body.category .ht123-grade-section {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 21px !important;
    border: 1px solid #dfe6ef !important;
    border-left-width: 4px !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(20, 45, 78, .04) !important;
}
html body.category .ht123-grade-section-head {
    gap: 12px !important;
    margin-bottom: 10px !important;
}
html body.category .ht123-section-icon {
    width: 39px !important;
    height: 39px !important;
    flex-basis: 39px !important;
    border-radius: 11px !important;
    font-size: 20px !important;
}
html body.category .ht123-grade-section-title h2 {
    margin: 1px 0 3px !important;
    color: #17304d !important;
    font-family: inherit !important;
    font-size: 21px !important;
    line-height: 1.28 !important;
    font-weight: 780 !important;
    letter-spacing: -.01em !important;
}
html body.category .ht123-section-kicker {
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
}
html body.category .ht123-grade-section-desc {
    margin-top: 4px !important;
    color: #69798e !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
}
html body.category .ht123-section-open {
    padding: 8px 11px !important;
    border-radius: 8px !important;
    background: #122b48 !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
    text-decoration: none !important;
}

html body.category .ht123-post-grid,
html body.category .ht123-subcategory-grid {
    gap: 8px 10px !important;
}
html body.category .ht123-grade-section .ht123-post-link a,
html body.category .ht123-theory-p2 .ht123-post-link a,
html body.category .ht123-category-section .ht123-post-link a,
html body.category .ht123-subcategory-preview a {
    box-sizing: border-box !important;
    min-height: 42px !important;
    padding: 9px 11px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #263b55 !important;
    font-family: inherit !important;
    font-size: 12.5px !important;
    line-height: 1.42 !important;
    font-weight: 650 !important;
    text-decoration: none !important;
}
html body.category .ht123-grade-section .ht123-post-link a:hover,
html body.category .ht123-subcategory-preview a:hover {
    border-color: #b9cceb !important;
    background: #f7faff !important;
    color: #0e5cab !important;
}

html body.category .ht123-show-all {
    margin-top: 14px !important;
    padding: 8px 15px !important;
    border: 1px solid #dbe3ee !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #344c68 !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

html body.category #bottom-bar {
    box-sizing: border-box !important;
    padding: 20px 26px !important;
    border: 0 !important;
    background: #0f1c2f !important;
    color: #c9d4e3 !important;
    font-family: inherit !important;
    font-size: 12px !important;
}
html body.category #bottom-bar a { color: #fff !important; }

/* Child-category archive: keep the current compact list, but make it clearer. */
html body.category .ht123-archive-title-row h1,
html body.category .ht123-category-header h1 {
    font-family: inherit !important;
    color: #17304d !important;
    font-weight: 800 !important;
    letter-spacing: -.015em !important;
}
html body.category .ht123-archive-title-icon {
    border: 1px solid #dfe8f5 !important;
    background: #eef5ff !important;
}

@media (max-width: 1080px) {
    html body.category #container { width: min(100%, calc(100% - 18px)) !important; margin: 9px auto !important; }
    html body.category .ht123-grade-category-nav { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 820px) {
    html body.category #main { padding: 14px 14px 32px !important; }
    html body.category #top-bar { padding: 15px 17px 11px !important; }
    html body.category #site-title, html body.category #site-title a { font-size: 28px !important; }
    html body.category .ht123-grade-category-nav { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    html body.category .ht123-grade-hero { padding: 22px 20px !important; }
    html body.category .ht123-grade-hero h1 { font-size: 27px !important; }
}
@media (max-width: 560px) {
    html body.category #container { width: 100% !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; }
    html body.category #main { padding: 10px 9px 26px !important; }
    html body.category .ht123-grade-category-nav { grid-template-columns: 1fr !important; gap: 10px !important; }
    html body.category .ht123-card-jump { min-height: 0 !important; }
    html body.category .ht123-grade-section { padding: 15px !important; }
    html body.category .ht123-grade-section-title h2 { font-size: 18px !important; }
    html body.category .ht123-section-open { font-size: 9.5px !important; }
}