/* Release 4a (owner, 31 October 2026): sections 1, 2, 3, 4, 8, 9 and 10 of the owner's extra CSS in the global styles
   (post 18), moved here unchanged: the same selectors, declarations, order and !important, with tokens for the colours. The
   owner's section numbers and titles are kept; sections 5, 6, 7 and 11-19 stay in the global styles.

   Where this file stands decides what wins, so it stands where these rules stood. In the page they came at the end of
   global-styles-inline-css: after the bridge's CSS and before the owner's later sections and theme.css. The theme prints this
   file at wp_enqueue_scripts priority 0: after every stylesheet the blocks queued while rendering (the bridge among them)
   and before the block library and the global styles, so before the owner's remaining sections, as in the owner's own order
   (functions.php explains why 0 and not 9). Every
   rule starts with body plus a class, which outweighs whatever the theme.json global styles print around it. Section 1's
   prose width on body is the --as-prose-width token of theme.css (680px). */

:root {
    /* The light blue of a call to action and of a closing with buttons. */
    --as-callout-background: #eef3ff;
    --as-callout-border: #d3e0fe;
}

/* 1 Basis: één tekstkolom (680px) voor alle pagina's met één kolom */
body .as-layout-grid:has(.as-content-page--faq) > .as-page-heading,
body .as-content-page--faq > .as-faq-intro {
    margin-inline: auto !important;
}

body .as-faq-columns {
    display: block;
    max-width: var(--as-prose-width);
    margin-inline: auto;
}

body .as-faq-columns > .as-faq-group + .as-faq-group {
    margin-top: var(--space-section, 4rem) !important;
}

body .as-content-page .wp-block-columns {
    max-width: var(--as-prose-width);
    margin-inline: auto;
    gap: 1rem;
}

body .as-content-page p {
    hyphens: manual;
}

body .as-content-page .as-simple-application {
    max-width: var(--as-prose-width);
    margin-inline: auto;
}

/* 2 Hero: titel, intro en knoppen overal gelijk */
body :is(.as-simple-hero .has-large-font-size, .as-faq-intro .has-large-font-size, .as-contact-page__lead, .as-vacancy-landing__intro p, .as-about-hero__lead) {
    color: var(--wp--preset--color--text);
    line-height: var(--lh-lead, 1.55);
}

body .as-hero-jump {
    gap: 0.75rem;
}

/* 3 Paginanavigatie 'Op deze pagina' */
body :not(.as-faq-intro) > ul.as-faq-toc {
    display: block;
    columns: 2;
    column-gap: 2rem;
    list-style: none;
    counter-reset: as-toc;
    margin: var(--space-block, 2rem) 0 0;
    padding: 1.25rem 1.5rem 1rem;
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--as-border-color);
    border-radius: var(--as-card-radius, 12px);
}

body :not(.as-faq-intro) > ul.as-faq-toc::before {
    content: "Op deze pagina";
    display: block;
    column-span: all;
    margin: 0 0 0.5rem;
    font-family: var(--as-heading-font);
    font-size: var(--fs-tiny, 0.8125rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted);
}

body :not(.as-faq-intro) > ul.as-faq-toc li {
    margin: 0;
    break-inside: avoid;
    counter-increment: as-toc;
}

body :not(.as-faq-intro) > ul.as-faq-toc a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    font-weight: 500;
    color: var(--wp--preset--color--text);
    text-decoration: none;
}

body :not(.as-faq-intro) > ul.as-faq-toc a::before {
    content: counter(as-toc, decimal-leading-zero);
    flex: 0 0 1.5rem;
    font-size: var(--fs-small, 0.875rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--wp--preset--color--brand);
}

body :not(.as-faq-intro) > ul.as-faq-toc a:is(:hover, :focus-visible) {
    color: var(--wp--preset--color--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 600px) {
    body :not(.as-faq-intro) > ul.as-faq-toc {
        columns: 1;
        padding: 1rem 1.25rem 0.75rem;
    }
}

/* FAQ-pagina: Studenten · Werkgevers als pills */
body .as-faq-intro ul.as-faq-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin-top: 1.25rem;
}

body .as-faq-intro ul.as-faq-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--as-border-color);
    border-radius: 999px;
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--primary);
    font-weight: 500;
    text-decoration: none;
}

body .as-faq-intro ul.as-faq-toc a:hover {
    border-color: var(--wp--preset--color--brand);
    color: var(--wp--preset--color--brand);
}

/* 4 Tekst in de inhoud */
body :is(.as-content-page, .as-vacancy-landing__guide) :is(.as-info-section, .as-info-band) :is(p, li):not(.has-large-font-size):not(.as-faq-toc li):not(.as-qa__question):not(.as-page-closing > p):not(.as-chip-links) {
    font-size: 1.0625rem;
    line-height: 1.7;
}

body :is(.as-content-page, .as-vacancy-landing__guide) h3.wp-block-heading:not(.as-qa__question) {
    font-family: var(--as-heading-font);
    font-size: 1.3125rem;
    line-height: 1.25;
    margin-top: 2rem;
}

body :is(.as-content-page, .as-vacancy-landing__guide) :is(h1, h2, h3) {
    text-wrap: balance;
}

body :is(.as-content-page, .as-vacancy-landing__guide) p {
    text-wrap: pretty;
}

body :is(.as-content-page, .as-vacancy-landing__guide) ul.wp-block-list:not(.as-faq-toc):not(.as-check-list):not(.as-related-guides__list) {
    padding-left: 1.25rem;
}

body :is(.as-content-page, .as-vacancy-landing__guide) ul.wp-block-list:not(.as-faq-toc):not(.as-check-list):not(.as-related-guides__list) > li + li {
    margin-top: 0.5rem;
}

body :is(.as-content-page, .as-vacancy-landing__guide) ul.wp-block-list:not(.as-faq-toc) > li::marker {
    color: var(--wp--preset--color--brand);
}

@media (max-width: 700px) {
    body .as-article-table {
        background: linear-gradient(to right, var(--wp--preset--color--base) 30%, rgba(255,255,255,0)) 0 0 / 40px 100% no-repeat local, linear-gradient(to left, var(--wp--preset--color--base) 30%, rgba(255,255,255,0)) 100% 0 / 40px 100% no-repeat local, radial-gradient(farthest-side at 100% 50%, rgba(28,28,84,.2), transparent) 100% 0 / 14px 100% no-repeat scroll;
    }
    body .as-article-table :is(th, td):first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--wp--preset--color--base);
        box-shadow: 1px 0 0 var(--wp--preset--color--border);
    }
    body .as-info-band .as-article-table :is(th, td):first-child {
        background: var(--wp--preset--color--surface);
    }
}

/* 8 Afsluiting: kop, één zin, knoppen – op elke pagina */
body :is(.as-content-page, .as-vacancy-landing__guide) > .as-page-closing {
    margin-top: var(--space-section, 4rem) !important;
}

body .as-page-closing:has(.wp-block-buttons):not(.as-employer-closing) {
    background: var(--as-callout-background);
    border: 1px solid var(--as-callout-border);
    border-top: 1px solid var(--as-callout-border);
    border-radius: 16px;
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

body .as-page-closing:has(.wp-block-buttons) > * {
    margin: 0 !important;
}

body .as-page-closing:has(.wp-block-buttons) > * + * {
    margin-top: 0.75rem !important;
}

body .as-page-closing:has(.wp-block-buttons) > .wp-block-buttons {
    margin-top: 1.25rem !important;
}

body .as-page-closing:has(.wp-block-buttons):not(.as-employer-closing) > p:first-child {
    font-family: var(--as-heading-font);
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wp--preset--color--primary);
}

body .as-page-closing:has(.wp-block-buttons) > p:not(:first-child) {
    color: var(--wp--preset--color--text);
}

/* 9 Zoek gericht: pills met labels Vakgebied / Plaats */
body .as-inline-cta {
    margin-top: var(--space-section, 4rem) !important;
    background: var(--as-callout-background);
    border: 1px solid var(--as-callout-border);
    border-radius: 16px;
    padding: clamp(1.25rem, 3vw, 2rem);
}

body .as-inline-cta > * {
    margin: 0 !important;
}

body .as-inline-cta > * + * {
    margin-top: 1rem !important;
}

body .as-inline-cta__title {
    font-family: var(--as-heading-font);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wp--preset--color--primary);
}

body .as-chip-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

body .as-chip-links__label {
    flex: 0 0 100%;
    margin-bottom: 0.125rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wp--preset--color--muted);
}

body .as-chip-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--as-border-color);
    border-radius: 999px;
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--primary);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}

body .as-chip-links a:is(:hover, :focus-visible) {
    border-color: var(--wp--preset--color--brand);
    color: var(--wp--preset--color--brand);
}

/* 10 Lees ook, rekenhulpen en auteurskaart */
body .as-related-guides__title {
    font-size: 1.25rem;
}

body :is(.as-content-page, .as-vacancy-landing__guide) ul.wp-block-list.as-related-guides__list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
}

body :is(.as-content-page, .as-vacancy-landing__guide) ul.wp-block-list.as-related-guides__list > li {
    margin: 0 !important;
}

body ul.wp-block-list.as-related-guides__list > li::marker {
    content: none;
}

body .as-related-guides__list a {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    height: 100%;
    box-sizing: border-box;
    padding: 1rem 1.125rem;
    border: 1px solid var(--as-border-color);
    border-radius: var(--as-card-radius, 12px);
    background: var(--wp--preset--color--base);
    color: var(--wp--preset--color--muted);
    font-size: 0.9375rem;
    line-height: 1.45;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

body .as-related-guides__list a strong {
    color: var(--wp--preset--color--primary);
    font-family: var(--as-heading-font);
    font-size: 1.0625rem;
}

body .as-related-guides__list a:is(:hover, :focus-visible) {
    border-color: var(--wp--preset--color--brand);
    box-shadow: var(--as-card-shadow);
}

body .as-related-guides__list a:hover strong {
    color: var(--wp--preset--color--brand);
}

body :is(.as-content-page) ul.wp-block-list.as-tool-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
    body :is(.as-content-page) ul.wp-block-list.as-tool-cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

body .as-tool-cards a::after {
    content: "Bereken →";
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--wp--preset--color--brand);
    font-weight: 600;
}

body .as-author-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: var(--space-block, 2rem) !important;
    padding-top: 1.5rem;
    border-top: 1px solid var(--as-border-color);
}

body .as-author-card > * {
    margin: 0 !important;
}

body .as-author-card__photo {
    flex: 0 0 64px;
}

body .as-author-card__photo img {
    display: block;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

body .as-author-card__text {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--wp--preset--color--muted);
}

body .as-author-card__text strong {
    color: var(--wp--preset--color--primary);
}