/**
 * Patriot University — Echo Knowledge Base Overrides
 *
 * EKB renders with inline <style> blocks using !important on nearly every rule.
 * Our selectors must match EKB's actual DOM IDs/classes and use !important.
 *
 * Known EKB containers (from source inspection):
 *   #epkb-modular-main-page-container
 *   #epkb-ml__module-search
 *   #epkb-ml__module-categories-articles
 *   #epkb-ml-categories-layout
 *   #epkb-ml__row-1, #epkb-ml__row-2
 *   .epkb-ml__module-categories-articles__row
 *   .epkb-ml-search-box__text  (the visible label causing overlap)
 *   .epkb-ml-search-box__input
 *   .epkb-ml-search-box__btn
 */

/* ══════════════════════════════════════════════════════════════════════════
   MAIN PAGE — SEARCH BOX LABEL FIX
   The .epkb-ml-search-box__text element renders "Search" visibly on top of
   the input. Hide it visually while keeping it accessible.
   ══════════════════════════════════════════════════════════════════════════ */

#epkb-ml__module-search .epkb-ml-search-box__text,
#epkb-modular-main-page-container .epkb-ml-search-box__text,
.epkb-ml-search-box__text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Also catch any <label> element EKB renders inside search */
#epkb-ml__module-search label,
#epkb-modular-main-page-container label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Search input styling */
#epkb-ml__module-search .epkb-ml-search-box__input {
    padding: 12px 80px 12px 20px !important;
    font-size: 1rem !important;
    border-radius: 9999px !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
}

/* Search form — wider on desktop */
#epkb-ml__module-search #epkb-ml-search-classic-layout #epkb-ml-search-form,
#epkb-ml__module-search #epkb-ml-search-modern-layout #epkb-ml-search-form {
    max-width: 600px !important;
    width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MAIN PAGE — CATEGORY GRID SPACING
   EKB already sets gap:20px on .epkb-ml__module-categories-articles__row.
   The crowding is between SECTIONS (Topics vs People vs Learning Paths).
   We need vertical space between the section groups.
   ══════════════════════════════════════════════════════════════════════════ */

/* More gap between rows of category boxes */
#epkb-ml-categories-layout .epkb-ml__module-categories-articles__row {
    gap: 24px !important;
    margin-bottom: 32px !important;
}

/* Section dividers — the group headings ("Topics", "People", etc.) */
#epkb-ml-categories-layout .epkb-ml-top-categories-button,
#epkb-ml-categories-layout .epkb-ml-top-categories-button-container,
#epkb-ml-categories-layout [class*="section-head"],
#epkb-modular-main-page-container [class*="section-head"] {
    margin-top: 48px !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
}

/* First section head needs less top space */
#epkb-ml-categories-layout .epkb-ml-top-categories-button:first-of-type,
#epkb-ml-categories-layout .epkb-ml-top-categories-button-container:first-of-type,
#epkb-ml-categories-layout [class*="section-head"]:first-of-type {
    margin-top: 16px !important;
}

/* Category boxes — more internal breathing room */
#epkb-ml-categories-layout .epkb-top-category-box {
    padding: 20px 16px !important;
}

/* Overall container for the categories module */
#epkb-ml__module-categories-articles {
    padding-top: 16px !important;
}

/* Row-2 container (holds the category grid) */
#epkb-ml__row-2 {
    padding: 24px 20px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   CATEGORY ARCHIVE PAGE
   Pages like /knowledge-base/category/topics/accountability-profiles/
   EKB renders its own sidebar tree + article list. We style the wrapper,
   sidebar, breadcrumb, headings, and article links.
   ══════════════════════════════════════════════════════════════════════════ */

/* Wrapper — constrain and center */
#epkb-main-page-container,
#epkb-content-container,
.eckb-kb-template {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 24px var(--iti-space-md, 16px) !important;
    font-family: var(--pu-font-body) !important;
    color: var(--pu-ink) !important;
    line-height: 1.6 !important;
}

/* Category archive title */
.eckb-category-archive-title,
#epkb-main-page-container h1,
.epkb-category-archive h1 {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 8px !important;
    color: var(--pu-ink) !important;
}

/* Sidebar navigation tree — compact, clean */
#epkb-main-page-container .epkb-sidebar,
.eckb-kb-template .epkb-sidebar,
.epkb-category-level-1,
.epkb-category-level-2,
.epkb-category-level-3 {
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
}

#epkb-main-page-container .epkb-sidebar a,
.eckb-kb-template .epkb-sidebar a,
.epkb-category-level-1 a,
.epkb-category-level-2 a,
.epkb-category-level-3 a {
    color: var(--pu-gray-600) !important;
    text-decoration: none !important;
    padding: 4px 0 !important;
    display: block !important;
}

#epkb-main-page-container .epkb-sidebar a:hover,
.eckb-kb-template .epkb-sidebar a:hover,
.epkb-category-level-1 a:hover,
.epkb-category-level-2 a:hover,
.epkb-category-level-3 a:hover {
    color: var(--pu-navy) !important;
}

/* Article list in the archive */
.epkb-articles-coming-soon,
.epkb-category-archive-page-container .epkb-article-list-items,
#epkb-main-page-container .epkb-article-list-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 16px 0 !important;
}

.epkb-category-archive-page-container .epkb-article-list-items li,
#epkb-main-page-container .epkb-article-list-items li {
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--pu-gray-200) !important;
}

.epkb-category-archive-page-container .epkb-article-list-items li a,
#epkb-main-page-container .epkb-article-list-items li a {
    color: var(--pu-navy) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.epkb-category-archive-page-container .epkb-article-list-items li a:hover,
#epkb-main-page-container .epkb-article-list-items li a:hover {
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* Section headings within category tree */
#epkb-main-page-container h2,
.epkb-category-archive h2,
.eckb-kb-template h2 {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
    margin: 24px 0 12px !important;
    color: var(--pu-ink) !important;
}

/* Breadcrumb on category pages */
.epkb-category-archive-page-container [class*="breadcrumb"],
#epkb-main-page-container [class*="breadcrumb"] {
    font-size: 0.8125rem !important;
    padding: 8px 0 16px !important;
    color: var(--pu-gray-600) !important;
}

.epkb-category-archive-page-container [class*="breadcrumb"] a,
#epkb-main-page-container [class*="breadcrumb"] a {
    color: var(--pu-gray-600) !important;
    text-decoration: none !important;
}

.epkb-category-archive-page-container [class*="breadcrumb"] a:hover,
#epkb-main-page-container [class*="breadcrumb"] a:hover {
    color: var(--pu-navy) !important;
    text-decoration: underline !important;
}

/* EKB search on category pages */
.epkb-category-archive-page-container [class*="search"],
#epkb-main-page-container .epkb-doc-search-container {
    max-width: 600px !important;
    margin-bottom: 24px !important;
}

/* Show/Collapse toggles */
.epkb-show-all-articles,
[class*="show-all-articles"],
[class*="collapse-articles"] {
    font-size: 0.8125rem !important;
    color: var(--pu-navy) !important;
    cursor: pointer !important;
    padding: 4px 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE PAGE
   ══════════════════════════════════════════════════════════════════════════ */

/* Allow EKB's article container to break out of .pu-article max-width */
.pu-kb-article {
    max-width: none !important;
    width: 100% !important;
}

.pu-kb-article__body {
    max-width: none !important;
    width: 100% !important;
}

.pu-prose #eckb-article-page-container-v2,
.pu-prose #eckb-article-page-container,
.pu-article__body #eckb-article-page-container-v2,
.pu-article__body #eckb-article-page-container {
    max-width: none !important;
}

.pu-article__body.pu-prose:has(#eckb-article-page-container-v2),
.pu-article__body.pu-prose:has(#eckb-article-page-container) {
    max-width: none !important;
}

#eckb-article-page-container-v2 {
    font-family: var(--pu-font-body) !important;
    color: var(--pu-ink) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* Hide the redundant search bar on individual article pages */
#eckb-article-page-container-v2 #eckb-article-header {
    display: none !important;
}

#eckb-article-page-container-v2 #eckb-article-body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    grid-template-columns: 200px 1fr 240px !important;
}

#eckb-article-page-container {
    font-family: var(--pu-font-body) !important;
    color: var(--pu-ink) !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

#eckb-article-page-container .eckb-article-title {
    font-size: 1.75rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.25 !important;
    color: var(--pu-ink) !important;
    margin-bottom: 16px !important;
}

#eckb-article-page-container .eckb-article-body {
    font-size: 1rem !important;
    line-height: 1.7 !important;
    color: var(--pu-ink) !important;
}

#eckb-article-page-container .eckb-article-body h2 {
    font-size: 1.375rem !important;
    font-weight: 600 !important;
    margin-top: 32px !important;
    margin-bottom: 16px !important;
    color: var(--pu-ink) !important;
}

#eckb-article-page-container .eckb-article-body h3 {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
}

#eckb-article-page-container .eckb-article-body p {
    margin-bottom: 16px !important;
}

#eckb-article-page-container .eckb-article-body a {
    color: var(--pu-navy) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

#eckb-article-page-container .eckb-article-body a:hover {
    color: var(--pu-navy-dark) !important;
}

#eckb-article-page-container .eckb-article-body ul,
#eckb-article-page-container .eckb-article-body ol {
    margin: 0 0 16px 24px !important;
}

#eckb-article-page-container .eckb-article-body li {
    margin-bottom: 4px !important;
}

#eckb-article-page-container .eckb-article-body table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 16px 0 !important;
}

#eckb-article-page-container .eckb-article-body th {
    text-align: left !important;
    padding: 8px 12px !important;
    background: var(--pu-gray-50) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid var(--pu-gray-200) !important;
}

#eckb-article-page-container .eckb-article-body td {
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--pu-gray-200) !important;
}

#eckb-article-page-container .eckb-article-body blockquote {
    border-left: 3px solid var(--pu-gold) !important;
    padding: 12px 16px !important;
    margin: 16px 0 !important;
    color: var(--pu-gray-600) !important;
    background: var(--pu-gold-light) !important;
    border-radius: 0 8px 8px 0 !important;
}

#eckb-article-page-container .eckb-article-body code {
    font-family: var(--pu-font-mono) !important;
    font-size: 0.875rem !important;
    background: var(--pu-gray-100) !important;
    padding: 0.125em 0.375em !important;
    border-radius: 4px !important;
}

#eckb-article-page-container .eckb-article-body pre {
    background: var(--pu-gray-100) !important;
    padding: 16px !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    border: 1px solid var(--pu-gray-200) !important;
}

#eckb-article-page-container .eckb-article-body pre code {
    background: none !important;
    padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ARTICLE PAGE — TOC SIDEBAR
   ══════════════════════════════════════════════════════════════════════════ */

#eckb-article-page-container [class*="toc"] {
    background: var(--pu-gray-50) !important;
    border: 1px solid var(--pu-gray-200) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    font-size: 0.875rem !important;
}

#eckb-article-page-container [class*="toc"] a {
    color: var(--pu-gray-600) !important;
    text-decoration: none !important;
    display: block !important;
    padding: 4px 0 !important;
}

#eckb-article-page-container [class*="toc"] a:hover {
    color: var(--pu-navy) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════════════════════════ */

#eckb-article-page-container [class*="breadcrumb"] {
    font-size: 0.8125rem !important;
    padding: 16px 0 !important;
    color: var(--pu-gray-600) !important;
}

#eckb-article-page-container [class*="breadcrumb"] a {
    color: var(--pu-gray-600) !important;
    text-decoration: none !important;
}

#eckb-article-page-container [class*="breadcrumb"] a:hover {
    color: var(--pu-navy) !important;
    text-decoration: underline !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVIGATION SIDEBAR
   ══════════════════════════════════════════════════════════════════════════ */

#eckb-article-page-container [class*="navigation"] a {
    display: flex !important;
    align-items: center !important;
    padding: 6px 8px !important;
    color: var(--pu-gray-600) !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    min-height: 36px !important;
    font-size: 0.875rem !important;
}

#eckb-article-page-container [class*="navigation"] a:hover,
#eckb-article-page-container [class*="navigation"] a.active {
    background: var(--pu-navy-light) !important;
    color: var(--pu-navy) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   RATING / FEEDBACK
   ══════════════════════════════════════════════════════════════════════════ */

#eckb-article-page-container [class*="rating"] {
    margin-top: 32px !important;
    padding-top: 16px !important;
    border-top: 1px solid var(--pu-gray-200) !important;
    font-size: 0.875rem !important;
    color: var(--pu-gray-600) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SHOW ALL ARTICLES BY DEFAULT
   EKB hides overflow articles with .epkb-hide-elem (main content) and
   .elay-hide-elem (sidebar). Their CSS uses high-specificity selectors.
   We beat them by adding an extra class to the selector chain.
   ══════════════════════════════════════════════════════════════════════════ */

body #eckb-archive-page-container #eckb-archive-content .epkb-hide-elem {
    display: block !important;
}

body #eckb-archive-page-container #elay-sidebar-container-v2 .elay-sidebar__cat-container .elay-hide-elem {
    display: list-item !important;
}

.elay-show-all-articles,
.eckb-article-list-show-more-container,
.eckb-article-list-show-all-link,
.epkb-show-all-articles {
    display: none !important;
}