/* =============================================
   MODUS DIGITAL - UTILITIES
   Color, background, typography, spacing, layout
   ============================================= */

/* -----------------------------------------
   Color utilities
   ----------------------------------------- */
.text-primary {
    color: var(--md-color-primary) !important;
}

.cl-white {
    color: var(--md-color-white);
}

.md-text-light-alt {
    color: var(--md-color-accent);
}

.md-text-dark {
    color: #1F6170;
}

.md-text-medium {
    color: var(--md-color-blue-medium);
}

.md-text-light {
    color: var(--md-color-primary);
}

/* -----------------------------------------
   Background utilities
   ----------------------------------------- */
.bg-green {
    background-color: var(--md-color-primary);
}

.bg-light-grey {
    background-color: var(--md-color-gray-100);
}

.bg-warning {
    background-color: #ff2a6f !important;
}

.bg-secondary {
    background-color: var(--md-color-gray-50) !important;
}

.bg-light {
    background-color: var(--md-color-accent) !important;
}

.section-bg-darkgray {
    background-color: var(--md-color-dark);
}

.section-bg-lightblue {
    background-color: var(--md-color-primary);
}

/* -----------------------------------------
   Icon utilities
   ----------------------------------------- */
.md-icon-rounded {
    color: var(--md-color-white) !important;
    width: 60px;
    height: 60px;
    display: block;
    background: var(--md-color-dark);
    text-align: center;
    padding-top: 16px;
    margin-bottom: 11px;
    border-radius: 52px;
    font-size: 28px;
}

.md-icon-lg {
    font-size: 45px;
    line-height: 49px;
}

/* -----------------------------------------
   Image utilities
   ----------------------------------------- */
.md-img-rounded-shadow {
    border-radius: var(--md-radius-xl);
    box-shadow: var(--md-shadow-image);
}

.md-img-rounded {
    border-radius: 15px;
}

.md-img-container img {
    border-radius: 25px;
}

.md-img-container {
    padding: 26px;
}

/* Below the md breakpoint, text_and_image stacks (col-md-6 → col-12).
   The image col becomes full-width but the 26px horizontal inset
   still applies, leaving the image visibly narrower than the
   adjacent text col. Drop horizontal padding when stacked so both
   columns align to the same edges. Vertical 26px kept for breathing
   room between the now-stacked image and text. */
@media (max-width: 767.98px) {
    .md-img-container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* -----------------------------------------
   Font size utilities
   ----------------------------------------- */
.fz-lg,
.fz-lg p,
.fz-lg ul li,
.fz-lg ol li {
    font-size: var(--md-font-size-lg);
    line-height: var(--md-line-height-normal);
}

/* Inline label class for metadata pairs (Adres/KvK/Telefoon/BTW on
   /contact, etc.). Visual matches the legacy h3.md-title styling
   that these labels used to carry, but on a <p> tag so they don't
   pollute the document outline as phantom headings. */
.md-label {
    font-family: var(--md-font-display);
    font-size: var(--md-font-size-xl);
    line-height: 32px;
    font-weight: var(--md-font-weight-black);
    margin-bottom: var(--md-space-2);
}

/* -----------------------------------------
   Layout utilities
   ----------------------------------------- */
.md-max-w-lg {
    max-width: 670px;
}

.md-max-w-md {
    max-width: 480px;
}

.z-3 {
    z-index: 3;
}

/* -----------------------------------------
   Alignment utilities
   ----------------------------------------- */
.md-align-left {
    text-align: left;
}

.md-align-center {
    text-align: center;
}

.md-align-center h1 {
    margin: 0 auto;
}

.md-align-right h1 {
    margin-left: auto;
}

.md-align-right {
    text-align: right;
}

/* -----------------------------------------
   Theming utilities
   ----------------------------------------- */
.md-theming-default {
    background-color: var(--md-color-dark);
}

.md-theming-light {
    background-image: var(--md-gradient-theme-light);
}

.md-theming-medium {
    background-image: var(--md-gradient-theme-medium);
}

.md-theming-dark {
    background-image: var(--md-gradient-theme-dark);
}

/* -----------------------------------------
   Spacing utilities
   ----------------------------------------- */
.md-top-page-padding {
    padding-top: 212px !important;
}

/* Listing pages (/cases, /blog, /vacatures) eat too much screen on small
   viewports with the desktop 212px value — halve below the lg breakpoint
   to preserve viewport real-estate for the title + first content row. */
@media (max-width: 991px) {
    .md-top-page-padding {
        padding-top: 106px !important;
    }
}

/* Listing-page title row — token-driven vertical rhythm between the H1
   row and the description / content row below. Replaces hardcoded
   Bootstrap mb-4 (24px) with a semantic token. Applied on /cases, /blog,
   /vacatures. Same value across all breakpoints. */
.md-listing-title-row {
    margin-bottom: var(--md-space-stack-md);
}

/* Unified section vertical rhythm — opt-in via class.
   Matches parked's section padding (56→120px fluid). */
.md-section-py {
    padding-top: var(--md-section-pad-y);
    padding-bottom: var(--md-section-pad-y);
}

/* Token-driven vertical rhythm between a section's content rows.
   Flex column with no fixed gap; per-row spacing is set with margin-top
   tokens via the adjacent-sibling rules below (so it survives the optional
   heading block — the margin only applies when a previous row exists). */
.md-section-stack {
    display: flex;
    flex-direction: column;
}

/* Neutralize each row's trailing bottom-margin (Bootstrap's default
   p margin, the eyebrow/card mb-* utilities) so the inter-row gaps below
   are exact. Non-last children (e.g. h2 → p) keep their own margins. */
.md-section-stack .row > * > :last-child {
    margin-bottom: 0;
}

/* features_container button-row reset (the .md-features-cta wrapper provides
   the spacing — the inner .md-btn-row's default 16px margin-top would be
   additive). The .md-section-stack > * + .md-features-grid / .md-features-cta
   rhythm rules live in md-sections.css and use the canonical
   --md-space-rhythm-* tokens. */
.md-features-cta .md-btn-row {
    margin-top: 0;
}

.md-features-grid p {
    line-height: var(--md-line-height-normal);
}

.align-super {
    vertical-align: super !important;
}

.pt-0,
.py-0 {
    padding-top: 0 !important;
}

/* -----------------------------------------
   Short label
   ----------------------------------------- */
.short-label {
    display: inline-block;
    width: 61px;
    color: var(--md-color-gray-500);
}

/* -----------------------------------------
   Text intro / heading / paragraph
   ----------------------------------------- */
.md-text-intro p,
p.md-text-intro {
    font-size: 22px;
    line-height: 40px;
}

.md-paragraph-lg {
    font-family: var(--md-font-body);
    max-width: 670px;
    /* Fluid lg: 18px on phones, 22px at desktop+ via --md-font-size-lg.
       Line-height-normal (1.4) tracks fluidly with the font-size, matching
       the prior fixed 30px at the upper end (22 * 1.4 ≈ 30.8). */
    font-size: var(--md-font-size-lg);
    line-height: var(--md-line-height-normal);
}

h3.md-heading {
    font-weight: 700;
    font-size: 33px;
    line-height: 40px;
}

/* -----------------------------------------
   Link utilities
   ----------------------------------------- */
.md-link {
    color: var(--md-color-dark);
    text-decoration: none;
}

.basic-link {
    text-decoration: none;
    color: var(--md-color-primary);
}

.basic-link i {
    width: 20px;
    text-align: center;
    text-decoration: none;
}

.basic-link:hover {
    text-decoration: none;
    color: var(--md-color-black);
}

/* -----------------------------------------
   Padding utilities (Tailwind-style)
   ----------------------------------------- */
.pt-\[50px\] { padding-top: 50px !important; }
.pt-\[70px\] { padding-top: 70px !important; }
.pt-\[90px\] { padding-top: 90px !important; }
.pb-\[75px\] { padding-bottom: 75px !important; }
.pb-\[90px\] { padding-bottom: 90px !important; }
.pb-\[120px\] { padding-bottom: 120px !important; }

/* -----------------------------------------
   Badge (Bootstrap override)
   ----------------------------------------- */
.badge {
    padding: 10px 12px;
    max-width: 32px;
    max-height: 32px;
}

/* -----------------------------------------
   Filter utility
   ----------------------------------------- */
.filter-hidden {
    display: none !important;
}