/* Reading design for pages and posts.
   Loaded only on is_page() and single posts, so staff profiles, courses and the student
   council keep their own bespoke layouts untouched. */

.kc-article {
    --kc-ink: #1b2a38;          /* softer than #000, still far above WCAG AA on white */
    --kc-muted: #5b6b7c;
    --kc-accent: #094e96;
    --kc-accent-soft: #4490bf;
    --kc-line: #e4ebf2;
    --kc-panel: #f6f9fc;
    --kc-measure: 72ch;         /* ~70 characters; the readable range is 65-75 */
    color: var(--kc-ink);
}

/* ---- Article header ---------------------------------------------------- */

.kc-head { margin: 0 0 32px; }

.kc-eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kc-muted);
}
.kc-eyebrow time { color: inherit; }
.kc-chip {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--kc-panel);
    border: 1px solid var(--kc-line);
    color: var(--kc-accent);
    letter-spacing: .06em;
}
.kc-chip a { color: inherit; text-decoration: none; }
.kc-chip a:hover { text-decoration: underline; }

/* style.css:397 hides the page title (`.single-content.studij h1{display:none}`) because the
   old tab bar doubled as the heading. Scoped here so only the redesigned page.php shows it;
   the seven other templates on that class keep their current behaviour. */
.kc-article.single-content.studij h1 { display: block; }

.kc-article h1,
.kc-article.single-content h1 {
    margin: 0 0 18px;
    /* 48px at a 1.5 line-height reads as two detached lines; tighten and let it breathe above */
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.14;
    letter-spacing: -.015em;
    color: var(--kc-ink);
    max-width: 22ch;
}

/* Full-width cover image under the heading. */
.kc-cover {
    margin: 0 0 34px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--kc-panel);
}
.kc-cover img { display: block; width: 100%; height: auto; }

/* ---- Reading column ---------------------------------------------------- */

/* Constrain the text, let wide things out. Applied to direct children so a paragraph is
   narrow while a gallery or table still uses the full column. */
.kc-article .page-content > * { max-width: var(--kc-measure); }
.kc-article .page-content > .gallery,
.kc-article .page-content > table,
.kc-article .page-content > figure,
.kc-article .page-content > .wp-block-image,
.kc-article .page-content > .wp-block-table,
.kc-article .page-content > iframe,
.kc-article .page-content > .wp-block-embed { max-width: none; }

.kc-article .page-content {
    font-size: 18px;
    line-height: 1.68;
}
.kc-article .page-content p { margin: 0 0 22px; }

/* Opening paragraph carries the article: slightly larger, a touch lighter. */
.kc-article .page-content > p:first-of-type {
    font-size: 20px;
    line-height: 1.6;
    color: #24384a;
}

.kc-article .page-content h2 {
    margin: 44px 0 14px;
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--kc-ink);
}
.kc-article .page-content h3 {
    margin: 32px 0 10px;
    font-size: 21px;
    line-height: 1.3;
    color: var(--kc-ink);
}
.kc-article .page-content h4 {
    margin: 26px 0 8px;
    font-size: 17px;
    letter-spacing: .01em;
    color: var(--kc-muted);
    text-transform: uppercase;
}
.kc-article .page-content > *:first-child { margin-top: 0; }

.kc-article .page-content a:not(.kc-doc) {
    color: var(--kc-accent);
    text-decoration: underline;
    text-decoration-color: #b5ccdf;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.kc-article .page-content a:not(.kc-doc):hover { text-decoration-color: currentColor; }

.kc-article .page-content ul,
.kc-article .page-content ol { margin: 0 0 22px; padding-left: 1.3em; }
.kc-article .page-content li { margin-bottom: 8px; }
.kc-article .page-content ul { list-style: none; padding-left: 1.5em; }
.kc-article .page-content ul > li { position: relative; }
.kc-article .page-content ul > li::before {
    content: '';
    position: absolute;
    left: -1.1em;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kc-accent-soft);
}

.kc-article .page-content blockquote {
    margin: 30px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--kc-accent-soft);
    color: #24384a;
    font-size: 20px;
    line-height: 1.55;
}
.kc-article .page-content blockquote p:last-child { margin-bottom: 0; }

.kc-article .page-content img { max-width: 100%; height: auto; border-radius: 12px; }

.kc-article .page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 26px;
    font-size: 16px;
}
.kc-article .page-content th,
.kc-article .page-content td { padding: 11px 14px; border-bottom: 1px solid var(--kc-line); text-align: left; }
.kc-article .page-content th { background: var(--kc-panel); font-weight: 600; color: var(--kc-ink); }

/* Tables are the one thing that must be allowed to scroll rather than squeeze. */
.kc-article .page-content > table { display: block; overflow-x: auto; }

/* ---- Gallery ----------------------------------------------------------- */

/* A responsive grid instead of fixed 350px inline blocks, so images fill the column
   evenly at any width. Image size itself is fixed in functions.php (post_500). */
.kc-article .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin: 32px 0;
    text-align: left;
}
.kc-article .gallery br { display: none; }
.kc-article .gallery figure,
.kc-article .gallery .gallery-item {
    width: auto !important;
    height: auto;
    margin: 0 !important;
    display: block;
}
.kc-article .gallery figure img,
.kc-article .gallery .gallery-item img {
    width: 100%;
    height: 200px;
    max-height: none;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--kc-line);
    transition: transform .3s ease, box-shadow .3s ease;
}
.kc-article .gallery a:hover img {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -12px #12395a55;
}
.kc-article .gallery figcaption { margin-top: 6px; font-size: 14px; color: var(--kc-muted); }

/* ---- Documents --------------------------------------------------------- */

.kc-docs { margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--kc-line); }
.kc-docs h4 {
    margin: 0 0 16px;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--kc-muted);
}
.kc-docs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }

/* invictum_get_post_attachemnts() prints the icon as a sibling of the link, so the row
   itself is the card and both children sit inside it. */
.kc-docs-list > div {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--kc-line);
    border-radius: 12px;
    background: #fff;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.kc-docs-list > div:hover { border-color: var(--kc-accent-soft); background: var(--kc-panel); transform: translateY(-1px); }
.kc-docs-list i { color: var(--kc-accent); font-size: 19px; flex: 0 0 auto; }
.kc-docs-list a {
    color: var(--kc-ink);
    text-decoration: none;
    font-size: 16px;
    line-height: 1.35;
}
.kc-docs-list a:hover { color: var(--kc-accent); }

@media (max-width: 1000px) {
    .kc-article .page-content { font-size: 17px; }
    .kc-article .page-content > p:first-of-type { font-size: 18px; }
    .kc-article h1 { max-width: none; }
    .kc-head { margin-bottom: 24px; }
}

@media (max-width: 600px) {
    .kc-article .gallery { grid-template-columns: 1fr; }
    .kc-article .gallery figure img { height: 220px; }
    .kc-docs-list { grid-template-columns: 1fr; }
}

/* ---- Page sidebar ------------------------------------------------------ */
/* Rendered as a table-cell sibling of .body, matching the legacy .article-container layout.
   When template-parts/page-sidebar.php prints nothing, the table falls back to a single cell
   and the article keeps the full width - no empty rail. */

/* Grid instead of the legacy display:table, scoped to pages that actually have a sidebar.
   It lets the title sit in the right column on desktop while staying first in source order,
   so on mobile it still comes before the article text (and before it for screen readers). */
.article-container.kc-has-side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    column-gap: 44px;
    align-items: start;
}
.kc-has-side > .kc-head { grid-column: 2; grid-row: 1; margin-bottom: 26px; }
.kc-has-side > .body { grid-column: 1; grid-row: 1 / span 2; display: block; width: auto; padding-right: 0; }
.kc-has-side > .kc-side { grid-column: 2; grid-row: 2; }

/* In a 330px column the article-scale heading is far too big. */
.kc-has-side > .kc-head h1 {
    font-size: 28px;
    line-height: 1.2;
    max-width: none;
    margin-bottom: 0;
}
.kc-has-side > .kc-head .kc-eyebrow { margin-bottom: 8px; font-size: 11px; letter-spacing: .12em; }

.kc-side { font-size: 16px; vertical-align: top; }
.article-container.kc-has-side .kc-side { width: auto; max-width: none; padding-left: 0; }
.kc-side-inner { position: sticky; top: 24px; display: grid; gap: 30px; }

/* Section labels: small, quiet, with a short accent rule instead of a heavy card header. */
.kc-side-title {
    position: relative;
    margin: 0 0 16px;
    padding-bottom: 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kc-muted, #5b6b7c);
}
.kc-side-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--kc-accent, #094e96);
}

.kc-card { padding: 0; border: 0; background: none; border-radius: 0; }
.kc-side ul, .kc-side ol { margin: 0; padding: 0; list-style: none; }
.kc-side li { margin: 0; }

/* ---- On this page (generated) ---- */

.kc-toc ol { position: relative; padding-left: 15px; }
/* One continuous rail behind the whole list; the active dot rides on it. */
.kc-toc ol::before {
    content: '';
    position: absolute;
    left: 3px; top: 6px; bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: #e4ebf2;
}
.kc-toc a {
    position: relative;
    display: block;
    padding: 7px 0 7px 4px;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--kc-muted, #5b6b7c);
    text-decoration: none;
    transition: color .18s ease;
}
.kc-toc a::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 13px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #d5e1ec;
    transition: border-color .18s ease, transform .18s ease;
}
.kc-toc a:hover { color: var(--kc-ink, #1b2a38); }
.kc-toc a.is-current { color: var(--kc-accent, #094e96); font-weight: 600; }
.kc-toc a.is-current::before { border-color: var(--kc-accent, #094e96); transform: scale(1.25); }
.kc-toc-l1 a { padding-left: 16px; font-size: 14px; }
.kc-toc-l2 a { padding-left: 28px; font-size: 13.5px; }

/* ---- In this section ---- */

.kc-side-nav > ul > li > a {
    position: relative;
    display: block;
    padding: 9px 0 9px 15px;
    color: #3c4f61;
    text-decoration: none;
    font-size: 15.5px;
    line-height: 1.4;
    border-radius: 0 8px 8px 0;
    transition: color .18s ease, background-color .18s ease;
}
/* The rail doubles as the active marker, so no borders or fills are needed. */
.kc-side-nav > ul > li > a::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 2px;
    border-radius: 2px;
    background: #e4ebf2;
    transition: background-color .18s ease, width .18s ease;
}
.kc-side-nav > ul > li > a:hover { color: var(--kc-accent, #094e96); background: #f7fafd; }
.kc-side-nav > ul > li.is-open > a,
.kc-side-nav > ul > li > a[aria-current="page"] { color: var(--kc-accent, #094e96); font-weight: 600; }
.kc-side-nav > ul > li.is-open > a::before,
.kc-side-nav > ul > li > a[aria-current="page"]::before { background: var(--kc-accent, #094e96); width: 3px; }

.kc-side-sub { margin: 0 0 6px; padding: 2px 0 2px 15px; }
.kc-side-sub a {
    display: block;
    padding: 6px 0 6px 12px;
    font-size: 14.5px;
    line-height: 1.4;
    color: var(--kc-muted, #5b6b7c);
    text-decoration: none;
    border-left: 2px solid #eef3f8;
}
.kc-side-sub a:hover { color: var(--kc-ink, #1b2a38); border-left-color: #d5e1ec; }
.kc-side-sub a.is-here { color: var(--kc-accent, #094e96); font-weight: 600; border-left-color: var(--kc-accent, #094e96); }

/* ---- Documents ---- */

.kc-side-docs li + li { margin-top: 8px; }
.kc-side-docs li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f7fafd;
    transition: background-color .2s ease, transform .2s ease;
}
.kc-side-docs li:hover { background: #eef5fb; transform: translateX(2px); }
.kc-side-docs i { color: var(--kc-accent, #094e96); font-size: 16px; margin-top: 2px; flex: 0 0 auto; }
.kc-side-docs a { color: #3c4f61; text-decoration: none; font-size: 14.5px; line-height: 1.45; }
.kc-side-docs li:hover a { color: var(--kc-accent, #094e96); }

/* ---- Contact ---- */

.kc-side-contact {
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(160deg, #f4f9fe 0%, #eef4fa 100%);
    border: 1px solid #e4ebf2;
}
.kc-side-contact .kc-side-title { margin-bottom: 14px; }
.kc-side-contact address { font-style: normal; display: grid; gap: 4px; }
.kc-side-contact a {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 7px 0;
    color: #3c4f61;
    text-decoration: none;
    font-size: 14.5px;
    line-height: 1.45;
}
.kc-side-contact a:hover { color: var(--kc-accent, #094e96); }
.kc-side-contact i {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #fff;
    color: var(--kc-accent, #094e96);
    font-size: 14px;
    box-shadow: 0 1px 3px #12395a14;
}

/* With a sidebar beside it the column is already narrow; the measure cap would double up. */
.kc-has-side .kc-article .page-content > * { max-width: none; }

@media (max-width: 1000px) {
    /* One column, explicit order: title, article, then the rest of the panel. */
    /* minmax(0,1fr), not 1fr: a bare fr track takes min-content as its floor, so one long
       unbreakable line in the content stretches the whole column past the viewport. */
    .article-container.kc-has-side { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
    .kc-has-side > .kc-head { grid-column: 1; grid-row: 1; margin-bottom: 20px; }
    .kc-has-side > .body { grid-column: 1; grid-row: 2; }
    .kc-has-side > .kc-side { grid-column: 1; grid-row: 3; margin-top: 40px; }
    .kc-has-side > .kc-head h1 { font-size: clamp(28px, 7vw, 38px); }
    .kc-side { display: block; }
    .kc-side-inner { position: static; gap: 26px; }
    /* The generated list duplicates headings that are right there on a single column. */
    .kc-toc { display: none; }
}