/**
 * R4Y base styles for custom plugin templates.
 *
 * Loaded only when a page type renders through a custom template (body class
 * .r4y-template). Everything is scoped so Elementor pages are untouched.
 * Specificity is chosen to win over the Elementor Kit (.elementor-kit-3906 a/h2/p)
 * while the Kit is still active in the hybrid phase.
 */

/* ── Main + prose ───────────────────────────────────────────────────── */
.r4y-template .r4y-main {
    font-family: var(--r4y-font-body);
    font-size: var(--r4y-fs-base);
    font-weight: var(--r4y-fw-regular);
    line-height: var(--r4y-lh-body);
    color: var(--r4y-color-text);
}

.r4y-template .r4y-main h1,
.r4y-template .r4y-main h2,
.r4y-template .r4y-main h3,
.r4y-template .r4y-main p,
.r4y-template .r4y-main ul,
.r4y-template .r4y-main ol {
    margin: 0;
}

/* Rich text (ACF wysiwyg). Mirrors what the Elementor vacancy template actually renders:
   paragraphs have no margin; spacing comes from the empty " " paragraphs editors type.
   (Its custom CSS also had a "p + p { margin-top: 1em }" rule, but a trailing comma in the
   selector list made the browser drop it — so it is intentionally not reproduced.) */
.r4y-template .r4y-prose ul {
    padding-inline-start: 25px;
    list-style-type: disc;
}
/* Improvement over Elementor: "bolder" on light (300) text resolves to 400 and is barely
   visible, so bold is set explicitly. */
.r4y-template .r4y-prose strong,
.r4y-template .r4y-prose b {
    font-weight: var(--r4y-fw-semibold);
}

/* Visually hidden, still read by screen readers */
.r4y-template .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Containers ─────────────────────────────────────────────────────── */
.r4y-template .r4y-section {
    padding-inline: var(--r4y-gutter);
}
.r4y-template .r4y-container {
    width: 100%;
    max-width: var(--r4y-container);
    margin-inline: auto;
}
.r4y-template .r4y-section--alt  { background-color: var(--r4y-color-surface-alt); }
.r4y-template .r4y-section--dark { background-color: var(--r4y-color-surface-dark); }

/* ── Headings ───────────────────────────────────────────────────────── */
.r4y-template .r4y-heading {
    font-family: var(--r4y-font-heading);
    font-size: var(--r4y-fs-4xl);
    font-weight: var(--r4y-fw-light);
    line-height: 1; /* Elementor .elementor-heading-title */
    color: var(--r4y-color-heading);
}

/* ── Buttons (Elementor Kit button + per-widget overrides) ──────────── */
.r4y-template a.r4y-button,
.r4y-template button.r4y-button {
    display: inline-block;
    padding: var(--r4y-space-md);
    border: 0;
    border-radius: var(--r4y-radius-none);
    font-family: var(--r4y-font-ui);
    font-size: var(--r4y-fs-base);
    font-weight: var(--r4y-fw-medium);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--r4y-transition), color var(--r4y-transition);
}
.r4y-template a.r4y-button--primary,
.r4y-template button.r4y-button--primary {
    background-color: var(--r4y-kit-primary);
    color: var(--r4y-kit-white);
}
.r4y-template a.r4y-button--primary:hover,
.r4y-template a.r4y-button--primary:focus,
.r4y-template button.r4y-button--primary:hover,
.r4y-template button.r4y-button--primary:focus {
    background-color: var(--r4y-kit-secondary);
    color: var(--r4y-kit-white);
}
.r4y-template a.r4y-button--secondary,
.r4y-template button.r4y-button--secondary {
    background-color: var(--r4y-kit-secondary);
    color: var(--r4y-kit-white);
}
.r4y-template a.r4y-button--secondary:hover,
.r4y-template a.r4y-button--secondary:focus,
.r4y-template button.r4y-button--secondary:hover,
.r4y-template button.r4y-button--secondary:focus {
    background-color: var(--r4y-kit-primary);
    color: var(--r4y-kit-white);
}

/* ── Badge (gold label: "Gesloten", sector, "Deze vacature is gesloten") */
.r4y-template .r4y-badge {
    display: inline-block;
    width: fit-content;
    padding: var(--r4y-space-sm) var(--r4y-space-md);
    background-color: var(--r4y-kit-secondary);
    color: var(--r4y-kit-white);
    font-family: var(--r4y-font-body);
    font-size: var(--r4y-fs-base);
    font-weight: var(--r4y-fw-light);
    line-height: var(--r4y-lh-body);
    text-decoration: none;
}

/* Note: the gutter is not changed globally. Elementor switches 30px → 15px at
   different breakpoints per template (overview: ≤767, detail: ≤1024), so each
   page stylesheet overrides --r4y-gutter itself. */