/*
 * Sterkenburg Media site template (TPL-01 foundation)
 * Visual reference: design/prototypes/concept-c (approved Concept C).
 *
 * Plain CSS, no build step, no Bootstrap bundle. Sections:
 *   1. Design tokens        5. Navigation (desktop header / mobile bottom bar)
 *   2. Base and typography  6. Main content and Joomla content
 *   3. Layout               7. Joomla core compatibility (forms, buttons, alerts ...)
 *   4. Header and wordmark  8. Footer, error page, print, reduced motion
 *
 * Breakpoints (custom properties cannot be used in media queries, so they are
 * written out and must stay in sync):
 *   --sm-bp-nav    900px   below: navigation becomes the bottom bar
 *   --sm-bp-narrow 600px   below: single-column footer
 */

/* ===================================================================== 1. Design tokens */

:root {
    /* Colours (brand: #1B98E0, #0F2937, #FFFFFF) */
    --sm-color-bg: #F3F6F8;
    --sm-color-surface: #FFFFFF;
    --sm-color-ink: #0F2937;
    --sm-color-muted: #4E616D;             /* 5.9:1 on the page background */
    --sm-color-line: #DCE3E8;             /* decorative lines only */
    --sm-color-field-line: #768792;       /* form field borders: 3.7:1 on white, 3.4:1 on the background (WCAG 1.4.11) */
    --sm-color-accent: #1B98E0;            /* brand blue: surfaces, never for small text on light (3.2:1 on white) */
    --sm-color-accent-ink: #0A6FA8;        /* links and small text on light: 5.5:1 on white */
    --sm-color-accent-ink-hover: #085B8A;
    --sm-color-accent-bg: #E2F2FB;
    --sm-color-navy: #0F2937;
    --sm-color-navy-2: #16384A;
    --sm-color-on-navy: #FFFFFF;
    --sm-color-on-navy-soft: #C9D7E0;
    --sm-color-on-navy-muted: #A9BECB;
    --sm-color-on-navy-accent: #7CC7F0;
    --sm-color-on-navy-line: #2C4757;
    --sm-color-success: #1E6B3A;
    --sm-color-success-bg: #E5F4EA;
    --sm-color-warning: #7A4B00;
    --sm-color-warning-bg: #FFF4DB;
    --sm-color-danger: #A4161A;
    --sm-color-danger-bg: #FCE8E8;

    /* Typography: system fonts only (no downloads). Headings use a condensed
       face where the platform has one (Windows: Bahnschrift, Apple: DIN Alternate,
       Android: sans-serif-condensed) and fall back to the system UI font. */
    --sm-font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --sm-font-head: Bahnschrift, "DIN Alternate", "Avenir Next Condensed", "Roboto Condensed", sans-serif-condensed, "Arial Narrow", system-ui, sans-serif;
    --sm-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
    --sm-text-xs: .78rem;
    --sm-text-s: .88rem;
    --sm-text-m: 1rem;
    --sm-text-l: 1.15rem;
    --sm-h1: clamp(1.9rem, 3.6vw, 2.6rem);
    --sm-h2: clamp(1.45rem, 2.4vw, 1.9rem);
    --sm-h3: 1.2rem;
    --sm-leading: 1.6;
    --sm-leading-tight: 1.15;

    /* Spacing */
    --sm-space-1: .25rem;
    --sm-space-2: .5rem;
    --sm-space-3: .75rem;
    --sm-space-4: 1rem;
    --sm-space-5: 1.5rem;
    --sm-space-6: 2rem;
    --sm-space-7: clamp(2.5rem, 5vw, 4rem);
    --sm-gutter: clamp(1rem, 3vw, 2.5rem);

    /* Shape and depth */
    --sm-radius-s: 6px;
    --sm-radius-m: 8px;
    --sm-radius-l: 12px;
    --sm-shadow-s: 0 1px 2px rgb(15 41 55 / .08);
    --sm-shadow-m: 0 4px 16px rgb(15 41 55 / .10);

    /* Layout */
    --sm-container: 84rem;
    --sm-measure: 72ch;
    --sm-measure-article: 53rem;           /* an ordinary article page (CONTENT-LAYOUT-R01): about 850px at the default size */
    --sm-measure-wide: 48rem;              /* text on a wide article page (PORT-01A): about 90 characters */
    --sm-header-h: 4.5rem;
    --sm-tabbar-h: 3.625rem;               /* 58px: touch targets of at least 44px */
    --sm-target: 44px;

    /* Focus */
    --sm-focus-color: var(--sm-color-accent-ink);
    --sm-focus-on-dark: var(--sm-color-on-navy-accent);
    --sm-focus-width: 3px;
    --sm-focus-offset: 2px;
}

/* ===================================================================== 2. Base and typography */

*,
*::before,
*::after { box-sizing: border-box; }

/* STM Featured Slider (mod_stmfeaturedslider, FSL-01): the module takes the site's fonts
   from these hooks; its colours and ratio are module settings. */
.stm-fs {
    --stm-fs-font-head: var(--sm-font-head);
    --stm-fs-font-head-stretch: 87.5%;
    --stm-fs-font-text: var(--sm-font-text);
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--sm-header-h) + var(--sm-space-4));
    /* R-13: the space for a classic (non-overlay) scrollbar is always reserved, so short
       and long pages line up and nothing moves sideways between them or when the
       lightbox opens. Overlay scrollbars (phones, macOS by default) reserve nothing. */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background: var(--sm-color-bg);
    color: var(--sm-color-ink);
    font: 400 var(--sm-text-m)/var(--sm-leading) var(--sm-font-text);
}

img,
svg,
video { max-width: 100%; height: auto; }

a { color: var(--sm-color-accent-ink); text-underline-offset: .18em; }
a:hover { color: var(--sm-color-accent-ink-hover); }

:focus-visible {
    outline: var(--sm-focus-width) solid var(--sm-focus-color);
    outline-offset: var(--sm-focus-offset);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sm-space-3);
    font-family: var(--sm-font-head);
    font-stretch: 87.5%;
    font-weight: 700;
    line-height: var(--sm-leading-tight);
    color: var(--sm-color-ink);
}

h1 { font-size: var(--sm-h1); }
h2 { font-size: var(--sm-h2); }
h3 { font-size: var(--sm-h3); }
h4, h5, h6 { font-size: var(--sm-text-l); }

p,
ul,
ol,
dl,
blockquote,
table,
figure { margin: 0 0 var(--sm-space-4); }

ul,
ol { padding-left: 1.4em; }

blockquote {
    padding: var(--sm-space-3) var(--sm-space-4);
    border-left: 4px solid var(--sm-color-accent);
    background: var(--sm-color-surface);
    color: var(--sm-color-muted);
}

code,
pre { font-family: var(--sm-font-mono); font-size: .92em; }

pre {
    overflow-x: auto;
    padding: var(--sm-space-4);
    border-radius: var(--sm-radius-m);
    background: var(--sm-color-surface);
}

hr { border: 0; border-top: 1px solid var(--sm-color-line); margin: var(--sm-space-6) 0; }

/* ===================================================================== 3. Layout */

.sm-wrap {
    width: min(100% - 2 * var(--sm-gutter), var(--sm-container));
    margin-inline: auto;
}

.sm-page { padding-block: var(--sm-space-5) var(--sm-space-7); }

/* Short pages: the footer stays at the bottom of the viewport. */
body.site { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.site > .sm-page { flex: 1 0 auto; }

.sm-main:focus { outline: none; }        /* target of the skip link; it is not interactive */

.sm-skip {
    position: absolute;
    top: var(--sm-space-4);
    left: var(--sm-space-4);
    transform: translateY(calc(-100% - 2 * var(--sm-space-4)));
    z-index: 100;
    padding: var(--sm-space-3) var(--sm-space-4);
    border-radius: var(--sm-radius-m);
    background: var(--sm-color-surface);
    color: var(--sm-color-ink);
    font-weight: 700;
}

.sm-skip:focus { transform: none; }

/* ===================================================================== 4. Header and wordmark */

.sm-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--sm-color-navy);
    color: var(--sm-color-on-navy);
}

.sm-header :focus-visible { outline-color: var(--sm-focus-on-dark); }

.sm-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2rem);
    min-height: var(--sm-header-h);
    padding-top: env(safe-area-inset-top, 0px);
}

.sm-brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--sm-target);
    flex: none;
    color: var(--sm-color-on-navy);
    text-decoration: none;
}

.sm-brand:hover { color: var(--sm-color-on-navy); }

.sm-brand__name {
    font: 700 1.25rem/1 var(--sm-font-head);
    font-stretch: 87.5%;
    letter-spacing: .03em;
}

.sm-brand__accent { color: var(--sm-color-on-navy-accent); }
/* The owner's horizontal logo (BRAND-04): 684 x 92 units, so 2.5rem high is 18.59rem wide. Explicit lengths, no percentage
   of a shrink-to-fit parent; on the narrowest screens it scales down with its aspect ratio kept (width and height
   attributes on the <img> give the ratio before it loads). */
.sm-brand__logo { display: block; width: 18.59rem; max-width: calc(100vw - 2 * var(--sm-gutter)); height: auto; }

.sm-header__search { flex: 1 1 18rem; max-width: 28rem; }

/* ===================================================================== 5. Navigation */

/*
 * One menu module (position "menu", mod_menu) inside one <nav>. Menu item
 * "Link Class" values used by the design (set in the menu item, not in code):
 *   sm-nav-cta     the emphasised item (Webshop)
 *   sm-icon-home | sm-icon-images | sm-icon-monitor | sm-icon-mail | sm-icon-bag
 *                  icon in the mobile bottom bar (and on the emphasised item)
 */
.sm-nav { margin-left: auto; }

/* mod_menu's own CSS adds a start margin to anything matching [class*="icon-"],
   which includes the sm-icon-* link classes. */
.mod-menu a[class*="sm-icon-"] { margin-inline-start: 0; }

.sm-nav ul { margin: 0; padding: 0; list-style: none; }
.sm-nav ul ul { display: none; }         /* sub levels: not part of TPL-01 */

.sm-nav .mod-menu {
    display: flex;
    align-items: center;
    gap: var(--sm-space-1);
}

.sm-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: var(--sm-target);
    padding: 0 .85rem;
    border-radius: var(--sm-radius-m);
    color: var(--sm-color-on-navy);
    font-weight: 600;
    text-decoration: none;
}

.sm-nav a:hover { background: rgb(255 255 255 / .1); color: var(--sm-color-on-navy); }

/* 2.6.6 (WEBPORTFOLIO-R05): also the parent of the current page (Joomla gives it only "active"), so a project page under
   Webdesign keeps Webdesign marked. */
.sm-nav a[aria-current="page"]:not(.sm-nav-cta)::after,
.sm-nav :is(.current, .active) > a:not(.sm-nav-cta)::after {
    content: "";
    position: absolute;
    left: .85rem;
    right: .85rem;
    bottom: 4px;
    height: 3px;
    border-radius: 2px;
    background: var(--sm-color-on-navy-accent);
}

/* The emphasised item: navy text on the brand blue (4.75:1). */
.sm-nav a.sm-nav-cta {
    margin-left: var(--sm-space-2);
    padding: 0 1rem;
    background: var(--sm-color-accent);
    color: var(--sm-color-ink);
}

.sm-nav a.sm-nav-cta:hover { background: #3AA9E8; color: var(--sm-color-ink); }
.sm-nav a.sm-nav-cta[aria-current="page"] { box-shadow: 0 0 0 2px var(--sm-color-navy), 0 0 0 4px var(--sm-color-on-navy-accent); }

/* Icons: CSS masks, so they take the text colour; decorative only. */
.sm-nav a[class*="sm-icon-"]::before {
    content: "";
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--sm-icon) center / contain no-repeat;
    mask: var(--sm-icon) center / contain no-repeat;
}

.sm-icon-home { --sm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.sm-icon-images { --sm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-8 8'/%3E%3C/svg%3E"); }
.sm-icon-monitor { --sm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); }
.sm-icon-mail { --sm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.sm-icon-bag { --sm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); }

@media (min-width: 900px) {
    /* In the header only the emphasised item shows its icon, as in Concept C. */
    .sm-nav a[class*="sm-icon-"]:not(.sm-nav-cta)::before { display: none; }
}

@media (max-width: 1000px) and (min-width: 900px) {
    .sm-nav a { padding: 0 .6rem; }
    .sm-nav a[aria-current="page"]:not(.sm-nav-cta)::after { left: .6rem; right: .6rem; }
}

/* Below 900px the same <nav> becomes the fixed bottom navigation. */
@media (max-width: 899.98px) {
    .sm-header__inner { flex-wrap: wrap; gap: var(--sm-space-3) var(--sm-space-4); min-height: 0; padding-block: calc(var(--sm-space-3) + env(safe-area-inset-top, 0px)) var(--sm-space-3); }
    .sm-header__search { order: 3; flex-basis: 100%; max-width: none; }

    .sm-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        margin: 0;
        padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
        background: var(--sm-color-surface);
        border-top: 1px solid var(--sm-color-line);
        box-shadow: 0 -2px 10px rgb(15 41 55 / .06);
    }

    .sm-nav .mod-menu {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 0;
    }

    .sm-nav a {
        display: grid;
        justify-items: center;
        align-content: center;
        gap: .15rem;
        width: 100%;
        min-height: var(--sm-tabbar-h);
        padding: 0 .2rem;
        border-radius: 0;
        color: var(--sm-color-muted);
        font-size: .72rem;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .sm-nav a:hover { background: var(--sm-color-bg); color: var(--sm-color-ink); }

    .sm-nav a[aria-current="page"],
    .sm-nav :is(.current, .active) > a { color: var(--sm-color-accent-ink); box-shadow: inset 0 3px 0 var(--sm-color-accent-ink); }

    .sm-nav a[aria-current="page"]:not(.sm-nav-cta)::after,
    .sm-nav :is(.current, .active) > a:not(.sm-nav-cta)::after { display: none; }

    .sm-nav a.sm-nav-cta { margin: 0; padding: 0 .2rem; background: var(--sm-color-accent); color: var(--sm-color-ink); }
    .sm-nav a.sm-nav-cta[aria-current="page"] { box-shadow: inset 0 3px 0 var(--sm-color-ink); }
    .sm-nav :focus-visible { outline-color: var(--sm-focus-color); outline-offset: -3px; }

    /* Keep content (and later a cookie notice) clear of the bar. */
    body.has-menu { padding-bottom: calc(var(--sm-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
    /* WCAG 2.4.11: keyboard focus scrolled into view must not end up under the bar. */
    html { scroll-padding-bottom: calc(var(--sm-tabbar-h) + env(safe-area-inset-bottom, 0px) + var(--sm-space-4)); }
}

/* 2.3.6: at 320 px each of the five tabs is 64 px wide; a slightly smaller label keeps
   "Webdesign" whole instead of breaking it inside the word (CLOUD86-STAGE-02). */
@media (max-width: 359.98px) {
    .sm-nav a,
    .sm-nav a.sm-nav-cta { padding-inline: .1rem; font-size: .68rem; }
}

/* ===================================================================== 6. Main content and Joomla content */

.sm-breadcrumbs { margin-bottom: var(--sm-space-4); font-size: var(--sm-text-s); color: var(--sm-color-muted); }

.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sm-space-1) var(--sm-space-2); margin: 0; padding: 0; list-style: none; }
.breadcrumb-item + .breadcrumb-item::before { content: "›"; margin-right: var(--sm-space-2); color: var(--sm-color-muted); }
.breadcrumb a { color: var(--sm-color-accent-ink); }
.mod-breadcrumbs__here { margin-right: var(--sm-space-1); }

.sm-main { min-width: 0; }
.sm-main__top,
.sm-main__bottom { margin-block: var(--sm-space-5); }

.sm-top { margin-top: var(--sm-space-5); }

.page-header { margin-bottom: var(--sm-space-4); }

/* Articles and blog items: readable line length, quiet meta data. Since 2.6.4 (CONTENT-LAYOUT-R01) the
   column is about 850px (53rem) and centred in the content region; before it was 72ch (about 620px)
   against the left edge. --sm-measure stays for the album description and the error page. */
.com-content-article,
.blog-item,
.com-content-category-blog__item { max-width: var(--sm-measure-article); margin-inline: auto; }

/* Wide article page (PORT-01A): a menu item with the Page Class " sm-page-wide" (tab Page
   Display) lets its article use the content width for wide blocks, such as the portfolio
   (.sm-portfolio) or any block with the class sm-wide, while the title and the text keep a
   comfortable reading width. No other page changes.
   Since 2.6.5 (WEBPORTFOLIO-R03) an article that contains a portfolio (.stm-pf, the module's root)
   is wide as well, whatever its menu item's Page Class: the Page Class is configuration a host may
   not have, and the 53rem reading column would squeeze the grid to two narrow columns. */
.com-content-article:is(.sm-page-wide, :has(.stm-pf)) { max-width: none; }

.com-content-article:is(.sm-page-wide, :has(.stm-pf)) > :not(.com-content-article__body),
.com-content-article:is(.sm-page-wide, :has(.stm-pf)) .com-content-article__body > :not(.sm-portfolio, .sm-wide) { max-width: var(--sm-measure-wide); }

/* A module wrapper holding the portfolio is no text (kept apart: :not() is not forgiving, so a browser without
   :has would drop the whole text rule above). */
.com-content-article:is(.sm-page-wide, :has(.stm-pf)) .com-content-article__body > :has(.stm-pf) { max-width: none; }

/* Contact call to action (homepage since TPL-02A; moved here from home.css in 2.6.7, WEBDESIGN-R01, unchanged, so the
   Webdesign page can use the same block): navy block, white heading, bright blue button. On the homepage it is a
   heading and a button; below the portfolio (partials/contact-cta.php) the heading comes with a short text in
   .sm-contact-cta__body, and the button stays on the right and wraps below the text on a narrow screen, as on the homepage. */
.sm-contact-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sm-space-4);
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--sm-radius-l);
    background: var(--sm-color-navy);
    color: var(--sm-color-on-navy);
}

.sm-contact-cta h2 { margin: 0; color: var(--sm-color-on-navy); font-size: clamp(1.35rem, 2.4vw, 1.9rem); }

.sm-contact-cta__btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--sm-target);
    padding: .55rem 1.15rem;
    border-radius: var(--sm-radius-m);
    background: var(--sm-color-accent);
    color: var(--sm-color-ink);          /* navy on brand blue: 4.75:1 */
    font-weight: 700;
    text-decoration: none;
}

.sm-contact-cta__btn:hover { background: #3AA9E8; color: var(--sm-color-ink); }
.sm-contact-cta :focus-visible { outline-color: var(--sm-focus-on-dark); }

.sm-contact-cta__body { flex: 1 1 22rem; max-width: 46rem; }
.sm-contact-cta__body p { margin: var(--sm-space-2) 0 0; color: var(--sm-color-on-navy); }

/* Below the portfolio: the same width as the article's wide blocks, some air above. */
.sm-article-cta { margin-top: var(--sm-space-6); }

/* Contact page (2.6.0, CONTACT-UI-R01; 2.6.1, CONTACT-UI-R02; before: 2.3.3, LAUNCH-02). A centred
   header (title and the owner's intro), then the form card and the details card ("contact-details"
   modules: business details, social links, privacy link). From 900px the cards stand side by side,
   about 55/45, aligned at the top; below that they stack in reading order (form first) at a
   comfortable width. Every rule is scoped to .sm-contact (or to the page that holds it), so no other
   page changes.
   2.6.1: the cards use the site container's width, so their outer edges line up with the header's
   wordmark and Webshop button and with the footer (2.6.0 capped them at 70rem, which left them
   floating inside the header's edges on large screens); from 1200px a contact-only type scale gives
   the cards a clear hierarchy (larger card headings and intro, 17px text and fields, semibold 16px
   labels; the page title keeps the site-wide h1), and fields and the send button share one height. */
.sm-contact {
    --sm-contact-text: var(--sm-text-m);
    --sm-contact-card-heading: var(--sm-h3);
    --sm-contact-field-h: 3.25rem;
}

.sm-contact__header { max-width: 48rem; margin: var(--sm-space-4) auto var(--sm-space-6); text-align: center; }
.sm-contact__header h1 { margin-bottom: var(--sm-space-3); }
.sm-contact__intro { color: var(--sm-color-muted); font-size: var(--sm-text-l); }
.sm-contact__intro > :last-child { margin-bottom: 0; }

/* From 1200px: the contact-only type scale (after the base rules above, so it wins at equal
   specificity). The page title keeps the site-wide h1 size. */
@media (min-width: 1200px) {
    .sm-contact {
        --sm-contact-text: 1.0625rem;
        --sm-contact-card-heading: clamp(1.3rem, .8rem + .6vw, 1.5rem);
    }

    .sm-contact__intro { font-size: clamp(1.15rem, .95rem + .3vw, 1.3rem); }
}

.sm-contact__details { margin-bottom: var(--sm-space-6); }

.sm-contact__layout { display: grid; gap: var(--sm-space-5); align-items: start; max-width: 44rem; margin-inline: auto; }

@media (min-width: 900px) {
    .sm-contact__layout--aside { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: clamp(var(--sm-space-6), 3vw, 3.5rem); max-width: none; }
}

/* The shorter details card stays in view below the sticky header while the form is filled in, but
   only on screens tall enough to show it whole (not on scaled laptop screens or when zoomed in). */
@media (min-width: 900px) and (min-height: 48rem) {
    .sm-contact__layout--aside > .sm-contact__aside { position: sticky; top: calc(var(--sm-header-h) + var(--sm-space-4)); }
}

.sm-contact__card {
    font-size: var(--sm-contact-text);
    padding: clamp(1.25rem, 3vw, 3rem);
    border: 1px solid var(--sm-color-line);
    border-radius: var(--sm-radius-l);
    background: var(--sm-color-surface);
    box-shadow: var(--sm-shadow-s);
}

.sm-contact__card > h2:first-child,
.sm-contact__aside .mod-custom > h2:first-child { margin: 0 0 var(--sm-space-4); font-size: var(--sm-contact-card-heading); }

/* The form card: core's form, with its redundant legend ("E-mail verzenden", the card's heading
   says it) kept for screen readers only, the required-field note as a quiet line, full-width
   fields, name and e-mail side by side when the card is wide enough, a roomy message field and a
   clear send button. Selectors use core's field ids and classes, not their order. */
/* The card is a size container (name and e-mail side by side when it is wide enough); this also
   makes it the containing block of fixed-position content inside it, so a captcha that floats
   (ALTCHA's "floating" mode) would need the container on an inner element instead. */
.sm-contact__form { container-type: inline-size; }
.sm-contact__form form { margin: 0; }
.sm-contact__form legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.sm-contact__form fieldset { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; column-gap: var(--sm-space-4); }
.sm-contact__form .control-group { margin-bottom: var(--sm-space-4); }
.sm-contact__form .field-spacer { margin-bottom: var(--sm-space-3); }
.sm-contact__form .field-spacer strong { color: var(--sm-color-danger); font-weight: 400; }
.sm-contact__form .control-label { display: block; }
.sm-contact__form .control-label label { margin-bottom: var(--sm-space-2); font-size: var(--sm-text-m); font-weight: 600; }
/* The required-field note (core's spacer field, whose label also sits in a .control-label) stays a
   quiet small line: it follows the field-label rule above and is more specific. */
.sm-contact__form .field-spacer .control-label label { margin: 0; color: var(--sm-color-muted); font-size: var(--sm-text-s); font-weight: 400; }
/* Core's validation puts its message inside the label: a space after the asterisk. */
.sm-contact__form .form-control-feedback { margin-inline-start: .35em; font-weight: 400; }

.sm-contact__form input[type="text"],
.sm-contact__form input[type="email"],
.sm-contact__form textarea { max-width: none; min-height: var(--sm-contact-field-h); padding: .75rem .9rem; font-size: var(--sm-contact-text); }

.sm-contact__form textarea { block-size: 12.5rem; min-height: 8rem; line-height: var(--sm-leading); } /* instead of core's rows="10" */

@container (min-width: 32rem) {
    .sm-contact__form fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-contact__form fieldset > .control-group { grid-column: 1 / -1; }
    .sm-contact__form fieldset > .control-group:has(#jform_contact_name),
    .sm-contact__form fieldset > .control-group:has(#jform_contact_email) { grid-column: auto; }
}

.sm-contact__form altcha-widget { --altcha-max-width: 100%; --altcha-border-radius: var(--sm-radius-m); --altcha-color-border: var(--sm-color-field-line); display: block; }

.sm-contact__form form > .control-group:last-child { margin: var(--sm-space-5) 0 0; }
/* 2.6.2 (CONTACT-Q79-R01): the short privacy notice above the send button; a quiet line. */
.sm-contact__form .sm-contact__privacy { margin: var(--sm-space-5) 0 0; color: var(--sm-color-muted); font-size: var(--sm-text-s); line-height: var(--sm-leading); }
.sm-contact__form .sm-contact__privacy + .control-group { margin-top: var(--sm-space-4); }
.sm-contact__form button[type="submit"] { width: 100%; min-height: var(--sm-contact-field-h); padding-inline: 2.25rem; font-size: var(--sm-contact-text); }

@media (min-width: 600px) {
    .sm-contact__form button[type="submit"] { width: auto; }
}

/* The details card: its sections (module headings) separated by a quiet line. */
.sm-contact__aside h2 { margin: 0 0 var(--sm-space-3); font-size: var(--sm-contact-card-heading); }
.sm-contact__aside h2:not(:first-child),
.sm-contact__aside .mod-custom + .mod-custom h2:first-child {
    margin-top: var(--sm-space-5);
    padding-top: var(--sm-space-5);
    border-top: 1px solid var(--sm-color-line);
}
.sm-contact__aside p { margin: 0 0 var(--sm-space-3); }
.sm-contact__aside .mod-custom > :last-child { margin-bottom: 0; }

.sm-contact__facts { display: grid; gap: var(--sm-space-3); margin: 0; }
.sm-contact__facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.sm-contact__facts dt { color: var(--sm-color-muted); font-size: var(--sm-text-m); font-weight: 600; }
.sm-contact__facts dd { margin: 0; overflow-wrap: anywhere; }

@media (min-width: 1100px), (min-width: 480px) and (max-width: 899.98px) {
    .sm-contact__facts > div { grid-template-columns: minmax(7rem, auto) 1fr; gap: var(--sm-space-3); align-items: baseline; }
}

/* Social links as quiet outlined buttons: real text labels (no icon-only links), 44px targets. */
.sm-contact__links { display: flex; flex-wrap: wrap; gap: var(--sm-space-2); margin: 0; padding: 0; list-style: none; }
.sm-contact__links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--sm-target);
    padding: 0 var(--sm-space-4);
    border: 1px solid var(--sm-color-field-line);
    border-radius: 999px;
    color: var(--sm-color-accent-ink);
    font-size: var(--sm-text-m);
    font-weight: 600;
    text-decoration: none;
}
.sm-contact__links a:hover { border-color: var(--sm-color-accent-ink); background: var(--sm-color-accent-bg); color: var(--sm-color-accent-ink-hover); }

/* Messages on the contact page (sent, refused, failed) span the contact block: since 2.6.1 that is
   the main column itself, so they need no rule of their own. */

/* 2.6.1: below the contact cards the page's bottom padding and the footer's top margin (each
   --sm-space-7, 2.5rem to 4rem) added up to 80-128px of empty band; on the contact page each is
   2rem (64px together). The page still grows to push the footer down on tall screens (body.site is
   a flex column). The body classes are core's component and view classes (index.php). */
body.site.com_contact.view-contact > .sm-page { padding-bottom: var(--sm-space-6); }
body.site.com_contact.view-contact > .sm-footer { margin-top: var(--sm-space-6); }

.com-content-article__body img,
.item-content img { border-radius: var(--sm-radius-m); }

.article-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sm-space-1) var(--sm-space-4);
    margin: 0 0 var(--sm-space-4);
    color: var(--sm-color-muted);
    font-size: var(--sm-text-s);
}

/* The "Details" term is redundant visually; keep it for screen readers. */
.article-info dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.article-info dd { margin: 0; }

.items-leading > *,
.blog-items > *,
.blog-item { margin-bottom: var(--sm-space-6); }

.readmore { margin-top: var(--sm-space-3); }

table { width: 100%; border-collapse: collapse; background: var(--sm-color-surface); }
th,
td { padding: var(--sm-space-2) var(--sm-space-3); border-bottom: 1px solid var(--sm-color-line); text-align: left; vertical-align: top; }
th { font-weight: 700; }

/* Core prev/next links (content - pagenavigation) use icon font classes; no icon font is loaded. */
.pagenavigation .icon-chevron-left::before { content: "‹"; }
.pagenavigation .icon-chevron-right::before { content: "›"; }

.pagination { display: flex; flex-wrap: wrap; gap: var(--sm-space-1); margin: var(--sm-space-5) 0; padding: 0; list-style: none; }
.pagination .page-link { display: inline-grid; place-items: center; min-width: var(--sm-target); min-height: var(--sm-target); padding: 0 var(--sm-space-3); border: 1px solid var(--sm-color-line); border-radius: var(--sm-radius-m); background: var(--sm-color-surface); text-decoration: none; }
.pagination .active .page-link { background: var(--sm-color-navy); border-color: var(--sm-color-navy); color: var(--sm-color-on-navy); }

/* ===================================================================== 7. Joomla core compatibility */

/*
 * Core views (login, contact, search ...) output Bootstrap 5 class names. Instead
 * of loading the whole Bootstrap bundle, only the classes those views need are
 * styled here, with the tokens above. Extend this list when a later task shows a
 * view that needs more.
 */
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    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;
    white-space: nowrap !important;
    border: 0 !important;
}

.control-group,
.mb-3 { margin-bottom: var(--sm-space-4); }

label,
.control-label,
.form-label { display: inline-block; margin-bottom: var(--sm-space-1); font-weight: 600; }

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
select,
textarea {
    display: block;
    width: 100%;
    max-width: 32rem;
    min-height: var(--sm-target);
    padding: .55rem .75rem;
    border: 1px solid var(--sm-color-field-line);
    border-radius: var(--sm-radius-m);
    background: var(--sm-color-surface);
    color: var(--sm-color-ink);
    font: inherit;
}

textarea { min-height: 8rem; resize: vertical; }

.form-control:focus-visible,
.form-select:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { border-color: var(--sm-color-accent-ink); outline-offset: 0; }

.form-check { display: flex; align-items: center; gap: var(--sm-space-2); min-height: var(--sm-target); }
.form-check-input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--sm-color-accent-ink); } /* never squeezed by a wrapping label */
.form-check-label { margin: 0; font-weight: 400; }

.input-group { display: flex; align-items: stretch; max-width: 32rem; }
.input-group > .form-control { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; font-weight: 700; }

/* Links under core forms (login: forgot password / username). */
.list-group { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sm-space-1); margin-top: var(--sm-space-4); }
.list-group-item { display: inline-flex; align-items: center; min-height: var(--sm-target); }

.star,
.form-control-feedback,
.invalid-feedback { color: var(--sm-color-danger); }
.invalid,
.form-control.invalid { border-color: var(--sm-color-danger); }

.btn,
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sm-space-2);
    min-height: var(--sm-target);
    padding: .55rem 1.15rem;
    border: 1px solid var(--sm-color-line);
    border-radius: var(--sm-radius-m);
    background: var(--sm-color-surface);
    color: var(--sm-color-ink);
    font: 600 .95rem/1.2 var(--sm-font-text);
    text-decoration: none;
    cursor: pointer;
}

.btn:hover { background: var(--sm-color-bg); color: var(--sm-color-ink); }

.btn-primary,
input[type="submit"] { border-color: var(--sm-color-accent-ink); background: var(--sm-color-accent-ink); color: #FFFFFF; }
.btn-primary:hover,
input[type="submit"]:hover { background: var(--sm-color-accent-ink-hover); color: #FFFFFF; }

/* Password show/hide button of core login forms: its Font Awesome icon is not loaded. */
.input-password-toggle { min-width: var(--sm-target); padding-inline: var(--sm-space-3); }
.input-password-toggle .icon-eye,
.input-password-toggle .icon-eye-slash {
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* System messages (<joomla-alert>, core "messages" asset). */
#system-message-container:empty { display: none; }
#system-message-container { margin-bottom: var(--sm-space-5); }

joomla-alert {
    position: relative;
    display: block;
    margin-bottom: var(--sm-space-3);
    padding: var(--sm-space-3) calc(var(--sm-target) + var(--sm-space-3)) var(--sm-space-3) var(--sm-space-4);
    border: 1px solid currentColor;
    border-left-width: 6px;
    border-radius: var(--sm-radius-m);
    background: var(--sm-color-accent-bg);
    color: var(--sm-color-accent-ink);
}

joomla-alert[type="success"] { background: var(--sm-color-success-bg); color: var(--sm-color-success); }
joomla-alert[type="warning"] { background: var(--sm-color-warning-bg); color: var(--sm-color-warning); }
joomla-alert[type="danger"],
joomla-alert[type="error"] { background: var(--sm-color-danger-bg); color: var(--sm-color-danger); }

joomla-alert .alert-heading { margin: 0 0 var(--sm-space-1); font: 700 var(--sm-text-m) var(--sm-font-text); }
joomla-alert .alert-message { color: var(--sm-color-ink); }

joomla-alert .joomla-alert--close,
joomla-alert button[class*="close"] {
    position: absolute;
    top: var(--sm-space-1);
    right: var(--sm-space-1);
    width: var(--sm-target);
    height: var(--sm-target);
    border: 0;
    border-radius: var(--sm-radius-m);
    background: none;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

/* ===================================================================== 8. Footer, error page, print, reduced motion */

.sm-footer {
    margin-top: var(--sm-space-7);
    padding: var(--sm-space-6) 0 var(--sm-space-5);
    background: var(--sm-color-navy);
    color: var(--sm-color-on-navy-soft);
    font-size: .92rem;
}

.sm-footer a { color: var(--sm-color-on-navy); }
.sm-footer a:hover { color: var(--sm-color-on-navy-accent); }
.sm-footer :focus-visible { outline-color: var(--sm-focus-on-dark); }

.sm-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--sm-space-6);
}

.sm-footer__brand {
    margin-bottom: var(--sm-space-3);
    color: var(--sm-color-on-navy);
    font: 700 1.15rem/1 var(--sm-font-head);
    font-stretch: 87.5%;
    letter-spacing: .03em;
}

.sm-footer__logo { display: block; width: 14rem; max-width: 100%; height: auto; }

.sm-footer h2,
.sm-footer h3 {
    margin-bottom: var(--sm-space-2);
    color: var(--sm-color-on-navy-muted);
    font: 700 .76rem var(--sm-font-text);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Several footer modules (menus) in one column: space between them. */
.sm-footer .moduletable + .moduletable { margin-top: var(--sm-space-5); }

.sm-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sm-space-1); }
.sm-footer ul a { display: inline-flex; align-items: center; min-height: 32px; }

.sm-footer__base {
    margin: var(--sm-space-6) 0 0;
    padding-top: var(--sm-space-4);
    border-top: 1px solid var(--sm-color-on-navy-line);
    color: var(--sm-color-on-navy-muted);
    font-size: .82rem;
}

@media (max-width: 599.98px) {
    .sm-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

.sm-error { max-width: var(--sm-measure); padding-block: var(--sm-space-6); }
.sm-error__code { margin: 0; color: var(--sm-color-accent-ink); font: 700 var(--sm-text-s) var(--sm-font-text); letter-spacing: .08em; }
.sm-error__debug { overflow-x: auto; font-size: var(--sm-text-s); }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0s !important;
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    .sm-header,
    .sm-footer,
    .sm-skip,
    .sm-breadcrumbs { display: none !important; }

    body { background: #FFFFFF; padding: 0 !important; }
}