/*
Theme Name: SAJE Child
Theme URI: https://markusmedia.fi/plugins/changelog/#saje-theme
Author: Markus Media
Author URI: https://markusmedia.fi/
Description: GeneratePress child theme for Salon Jääkiekkoerotuomarit. Single-page sidebar layout, full WP template set (front-page, page, single, archive, search, 404), block-editor palette, dynamic hero image via CSS variable, and Finnish translations. All site content is owned by the SAJE Hallinta plugin.
Version: 1.5.20
Requires at least: 6.3
Tested up to: 7.0
Requires PHP: 7.4
Template: generatepress
Text Domain: saje-child
Domain Path: /languages
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: child-theme, one-page, sidebar-navigation, custom-logo, custom-menu, translation-ready
MarkusMedia-Product: saje-theme
MarkusMedia-Type:    theme
*/

:root {
    --primary-black: #1a1a1a;
    --dark-black: #000000;
    --accent-orange: #e65100;
    --accent-orange-light: #ff8c00;
    --accent-orange-dark: #bf360c;
    /* Primary filled buttons: white text must meet 4.5:1 on background (hover darker still). */
    --accent-orange-darker: #9e2e0a;
    --text-dark: #1a1a1a;
    --text-light: #333333;
    --white: #ffffff;
    --gray-light: #f8f8f8;
    --gray-border: #e0e0e0;
    --sidebar-width: 280px;
    /* Horizontal space for fixed #sidebar-desktop-reveal when sidebar is collapsed (desktop). */
    --sidebar-reveal-strip: 48px;
    --sidebar-bg: rgba(0, 0, 0, 1);
    /* Sidebar primary nav rows (`.nav-link`, submenu links): square corners. */
    --sidebar-nav-link-radius: 0;
    /* Collapse control, org card: keep slight rounding (not menu rows). */
    --sidebar-chrome-radius: 6px;
    /* Site-wide text scale (1 = default); set by A-/A+ in breadcrumbs bar. */
    --saje-text-scale: 1;
    /* `.sidebar-nav-scroll` scrollbar (Firefox `scrollbar-color` + WebKit pseudos). HK body overrides thumb hues. */
    --sidebar-scrollbar-track: rgba(255, 255, 255, 0.06);
    --sidebar-scrollbar-thumb: rgba(230, 81, 0, 0.45);
    --sidebar-scrollbar-thumb-hover: rgba(255, 140, 0, 0.8);
    /* Harrastekiekko accent — declared globally so the always-on
       sidebar marker (and any other Harrastekiekko-themed control
       outside body.saje-section-harrastekiekko) can use it. The
       reskin block redeclares them under the body scope so future
       palette tweaks stay co-located, but the values must match. */
    --hk-accent: #1565c0;
    --hk-accent-dark: #0d47a1;
    /* Sidebar footer stats on --sidebar-bg: brighter than --hk-accent for WCAG AA vs dark gray. */
    --hk-accent-on-sidebar: #64b5f6;
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 12px rgba(0, 0, 0, 0.15);
    /* Hero image resolved at runtime by the theme's wp_head hook from
       the SAJE Hallinta `hero_image` option (or the bundled default).
       Used by body and the in-section background overlays. */
    /* Fallback when `hero_image` is empty and `wp_head` does not override (e.g. plugin inactive). */
    --saje-hero-image: url('assets/images/hero-mrg4dgw8dzg-unsplash.jpg');
}

html {
    scroll-behavior: smooth;
    font-size: calc(100% * var(--saje-text-scale, 1));
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Phosphor icons: fixed em box so font swap does not reflow adjacent text (CLS). */
.ph-fill {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: -0.125em;
    flex-shrink: 0;
    text-align: center;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.7;
    color: var(--text-dark);
    background-color: var(--gray-light);
    background-image: var(--saje-hero-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    font-weight: 400;
}

@media (max-width: 768px) {
    body {
        background-attachment: scroll;
    }
}

@media (prefers-reduced-motion: reduce) {
    body {
        background-attachment: scroll;
    }
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 248, 248, 0.95);
    z-index: -1;
}

/* Skip Link for Accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--accent-orange-dark);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 1100;
    font-weight: 500;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 6px;
    outline: 3px solid var(--accent-orange);
    outline-offset: 2px;
}

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

/* Sidebar */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    color: rgba(255, 255, 255, 1);
    border-right: none;
    border-image: none;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: hidden;
}

.sidebar-header {
    flex-shrink: 0;
    padding: 30px 20px;
    border-bottom: 1px solid #333;
    background: unset;
    background-color: transparent;
}

.sidebar-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sidebar-header-top .logo {
    flex: 1;
    min-width: 0;
}

.sidebar-desktop-toggle {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 2px 0 0;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.25);
    color: var(--white);
    cursor: pointer;
    border-radius: var(--sidebar-chrome-radius);
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sidebar-desktop-toggle:hover {
    border-color: var(--accent-orange-light);
    background: rgba(0, 0, 0, 0.35);
}

.sidebar-desktop-toggle .ph-fill {
    font-size: 1.15rem;
    line-height: 1;
}

.sidebar-desktop-reveal {
    display: none;
    position: fixed;
    top: 15px;
    left: 0;
    z-index: 1001;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 2px solid var(--accent-orange);
    border-left: none;
    background: var(--sidebar-bg);
    color: var(--white);
    cursor: pointer;
    border-radius: 0 6px 6px 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sidebar-desktop-reveal:hover {
    border-color: var(--accent-orange-light);
    background: #323232;
}

.sidebar-desktop-reveal .ph-fill {
    font-size: 1.2rem;
    line-height: 1;
}

@media (min-width: 769px) {
    .sidebar {
        transition: transform 0.25s ease;
    }

    .sidebar-desktop-toggle {
        display: inline-flex;
    }

    body.sidebar-desktop-collapsed .sidebar {
        transform: translateX(-100%);
    }

    body.sidebar-desktop-collapsed .main-content {
        margin-left: 0;
        padding-left: var(--sidebar-reveal-strip);
    }

    /* Hand the freed sidebar width to the content: the centered .container may
       grow by exactly --sidebar-width, so tables and wide layouts gain room
       instead of the space becoming side gutters. */
    body.sidebar-desktop-collapsed .main-content .container {
        max-width: calc(1200px + var(--sidebar-width));
    }

    body.sidebar-desktop-collapsed .main-content::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: var(--sidebar-reveal-strip);
        height: 100vh;
        background: var(--sidebar-bg);
        z-index: 998;
        pointer-events: none;
    }

    body.sidebar-desktop-collapsed .sidebar-desktop-reveal:not([hidden]) {
        display: flex;
    }
}

.sidebar .site-description.logo-tagline {
    font-size: 0.8125rem;
    line-height: 1.45;
    font-weight: 500;
    color: #ccc;
    margin: 0.35rem 0 0;
    max-width: 100%;
    white-space: pre-line;
}

.logo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.logo-box {
    background: var(--accent-orange);
    padding: 8px 12px;
    font-size: 1.3rem;
    font-weight: 900;
    display: inline-block;
    width: fit-content;
    border-radius: 0;
    color: var(--white);
}

.logo-text {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--white);
}

.logo .custom-logo-link {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.logo .custom-logo {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 96px;
    display: block;
}

/* Visually hide the site name when an uploaded logo replaces it. */
.logo-text.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* WordPress nav-menu defaults: keep operator-managed menus styled. */
.nav-links .menu-item {
    margin: 0;
    list-style: none;
}

.nav-links .menu-item-has-children > .nav-link::after {
    content: "";
    margin-left: auto;
    border: solid currentColor;
    border-width: 0 0 2px 2px;
    width: 6px;
    height: 6px;
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.nav-links .current-menu-item > .nav-link,
.nav-links .current_page_item > .nav-link,
.nav-links .current-menu-parent > .nav-link,
.nav-links .current-menu-ancestor > .nav-link {
    background: var(--accent-orange-dark);
    color: var(--white);
    border-radius: var(--sidebar-nav-link-radius);
}

/*
 * Always-visible Harrastekiekko marker. The parent menu item links to
 * "/#harrastekiekko" (front-page anchor) so WP cannot match it against
 * a Harrastekiekko sub-page URL and never emits current-menu-* on it.
 * The href$ selector targets only the top-level row (children carry
 * /harrastekiekko/<slug>/ paths). Always rendered in the harraste
 * blue accent so the sub-site reads as a distinct section even when
 * the visitor is on /etusivu, /yhteystiedot, /linkit, etc.
 */
.nav-links > .menu-item > .nav-link[href$="#harrastekiekko"],
.nav-links > .menu-item > .nav-link[href$="/#harrastekiekko"] {
    background: var(--hk-accent);
    color: var(--white);
    border-left: 2px solid var(--hk-accent);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--sidebar-nav-link-radius);
    border-bottom-right-radius: var(--sidebar-nav-link-radius);
}

.nav-links > .menu-item > .nav-link[href$="#harrastekiekko"]:hover,
.nav-links > .menu-item > .nav-link[href$="/#harrastekiekko"]:hover {
    background: var(--hk-accent-dark);
}

/*
 * Top-level non-parent menu items (Etusivu, Tuomarinimeamiset, Jasenet,
 * Linkit, Aloitusopas, Yhteystiedot) get a thin orange edge so the
 * primary section is visually distinguished from the harraste branch.
 * The 2px border eats into the existing 14px left padding so text
 * shifts only marginally; the active-state orange background covers
 * the border with no visible seam. Excludes parent rows that already
 * carry the harraste marker / chevron.
 */
.nav-links > .menu-item:not(.menu-item-has-children) > .nav-link {
    border-left: 2px solid var(--accent-orange);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    min-height: 40px;
    align-items: center;
}

/*
 * Expandable parents (UKK, Aloitusopas, …): same left accent column as
 * single-row items so the strip is one continuous vertical rhythm.
 */
.nav-links > .menu-item-has-children:not(:has(> .nav-link[href$="#harrastekiekko"])):not(:has(> .nav-link[href$="/#harrastekiekko"])) > .nav-link {
    border-left: 2px solid var(--accent-orange);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/*
 * All primary sub-menus: accent strip shares the same x-origin as
 * top-level .nav-link borders (no margin-left on the ul). Indent labels
 * via .nav-sublinks .nav-link padding-left instead.
 */
.nav-links > .menu-item-has-children > .nav-sublinks {
    margin-left: 0;
    border-left: 2px solid var(--accent-orange);
}

/*
 * Harrastekiekko sub-menu: blue strip, aligned with the parent row and
 * leaf items (2px to match other rails).
 */
.nav-links > .menu-item-has-children:has(> .nav-link[href$="#harrastekiekko"]) > .nav-sublinks,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="/#harrastekiekko"]) > .nav-sublinks {
    margin-left: 0;
    padding-left: 0;
    border-left: 2px solid var(--hk-accent);
}

.nav-links > .menu-item-has-children:has(> .nav-link[href$="#harrastekiekko"]) > .nav-sublinks .nav-link,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="/#harrastekiekko"]) > .nav-sublinks .nav-link {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/*
 * Harrastekiekko branch keeps the blue accent in every interactive
 * state. Without these overrides the generic .current-menu-item /
 * .nav-link.active / .nav-link:hover rules above repaint the row in
 * --accent-orange-dark whenever a Harrastekiekko sub-page is the
 * current page or the row is hovered. Specificity here is intentionally
 * higher than the cascade defaults so the branch reads as one cohesive
 * blue section regardless of route or pointer state.
 */
.nav-links > .menu-item-has-children:has(> .nav-link[href$="#harrastekiekko"]) > .nav-link,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="/#harrastekiekko"]) > .nav-link,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="#harrastekiekko"]) > .nav-link.active,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="/#harrastekiekko"]) > .nav-link.active,
.nav-links > .menu-item-has-children.current-menu-parent:has(> .nav-link[href$="#harrastekiekko"]) > .nav-link,
.nav-links > .menu-item-has-children.current-menu-parent:has(> .nav-link[href$="/#harrastekiekko"]) > .nav-link,
.nav-links > .menu-item-has-children.current-menu-ancestor:has(> .nav-link[href$="#harrastekiekko"]) > .nav-link,
.nav-links > .menu-item-has-children.current-menu-ancestor:has(> .nav-link[href$="/#harrastekiekko"]) > .nav-link,
.nav-links > .menu-item-has-children.current-menu-item:has(> .nav-link[href$="#harrastekiekko"]) > .nav-link,
.nav-links > .menu-item-has-children.current-menu-item:has(> .nav-link[href$="/#harrastekiekko"]) > .nav-link {
    background: var(--hk-accent);
    color: var(--white);
}

.nav-links > .menu-item-has-children:has(> .nav-link[href$="#harrastekiekko"]) > .nav-link:hover,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="/#harrastekiekko"]) > .nav-link:hover,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="#harrastekiekko"]) > .nav-link.active:hover,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="/#harrastekiekko"]) > .nav-link.active:hover {
    background: var(--hk-accent-dark);
    color: var(--white);
}

.nav-links > .menu-item-has-children:has(> .nav-link[href$="#harrastekiekko"]) > .nav-sublinks .current-menu-item > .nav-link,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="/#harrastekiekko"]) > .nav-sublinks .current-menu-item > .nav-link,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="#harrastekiekko"]) > .nav-sublinks .current_page_item > .nav-link,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="/#harrastekiekko"]) > .nav-sublinks .current_page_item > .nav-link,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="#harrastekiekko"]) > .nav-sublinks .nav-link.active,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="/#harrastekiekko"]) > .nav-sublinks .nav-link.active {
    background: var(--hk-accent);
    color: var(--white);
}

.nav-links > .menu-item-has-children:has(> .nav-link[href$="#harrastekiekko"]) > .nav-sublinks .nav-link:hover,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="/#harrastekiekko"]) > .nav-sublinks .nav-link:hover,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="#harrastekiekko"]) > .nav-sublinks .current-menu-item > .nav-link:hover,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="/#harrastekiekko"]) > .nav-sublinks .current-menu-item > .nav-link:hover,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="#harrastekiekko"]) > .nav-sublinks .nav-link.active:hover,
.nav-links > .menu-item-has-children:has(> .nav-link[href$="/#harrastekiekko"]) > .nav-sublinks .nav-link.active:hover {
    background: var(--hk-accent-dark);
    color: var(--white);
}

/*
 * Top-level non-Harrastekiekko menu items (Etusivu, Tuomarinimeamiset,
 * Jasenet, Linkit, Aloitusopas, Yhteystiedot) keep the orange accent
 * in every interactive state. These rules mirror the Harrastekiekko
 * blue overrides above so the two branches cannot leak into each
 * other when WordPress emits current-menu-* classes for the active
 * route or the JS hashchange listener toggles .nav-link.active. The
 * :not(.menu-item-has-children) clause keeps the chevron parents (the
 * harraste row) out of this orange path even if the menu structure
 * gains additional submenu parents in the future.
 */
.nav-links > .menu-item:not(.menu-item-has-children) > .nav-link.active,
.nav-links > .menu-item:not(.menu-item-has-children).current-menu-item > .nav-link,
.nav-links > .menu-item:not(.menu-item-has-children).current_page_item > .nav-link,
.nav-links > .menu-item:not(.menu-item-has-children).current-menu-parent > .nav-link,
.nav-links > .menu-item:not(.menu-item-has-children).current-menu-ancestor > .nav-link {
    background: var(--accent-orange-dark);
    color: var(--white);
}

.nav-links > .menu-item:not(.menu-item-has-children) > .nav-link:hover,
.nav-links > .menu-item:not(.menu-item-has-children) > .nav-link.active:hover,
.nav-links > .menu-item:not(.menu-item-has-children).current-menu-item > .nav-link:hover,
.nav-links > .menu-item:not(.menu-item-has-children).current_page_item > .nav-link:hover {
    background: var(--accent-orange-dark);
    color: var(--white);
}


.sidebar-nav {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 12px 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.sidebar-nav-scroll {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-scrollbar-thumb) var(--sidebar-scrollbar-track);
}

.sidebar-nav-scroll::-webkit-scrollbar {
    width: 7px;
}

.sidebar-nav-scroll::-webkit-scrollbar-track {
    background: var(--sidebar-scrollbar-track);
    border-radius: 4px;
}

.sidebar-nav-scroll::-webkit-scrollbar-thumb {
    background: var(--sidebar-scrollbar-thumb);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.sidebar-nav-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--sidebar-scrollbar-thumb-hover);
    background-clip: padding-box;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.nav-links li {
    margin: 0;
}

.nav-links > .menu-item + .menu-item {
    margin-top: 0;
}

.nav-link {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.3;
    border-radius: var(--sidebar-nav-link-radius);
    transition: all 0.15s ease;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.nav-links .menu-item-has-children > .nav-link {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}

.nav-links .menu-item-has-children > .nav-link .nav-icon {
    margin-top: 0;
}

.nav-link:hover,
.nav-link.active {
    background: var(--accent-orange-dark);
    color: var(--white);
}

.nav-icon {
    font-size: 0.98rem;
    flex-shrink: 0;
    line-height: 1.2;
    margin-top: 0.08em;
    opacity: 1;
}

.sidebar-footer {
    margin-top: auto;
    flex-shrink: 0;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.8125rem;
}

.sidebar-footer .sidebar-footer-link {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.sidebar-org {
    margin: 0;
}

.org-details {
    margin: 0;
    padding: 12px 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--sidebar-chrome-radius);
}

.org-detail {
    display: grid;
    gap: 4px;
}

.org-detail + .org-detail {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.org-detail dt {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.55);
}

.org-detail dd {
    margin: 0;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.45;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.sidebar-org-mail {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -6px 0;
    padding: 6px 0;
    color: var(--accent-orange-light);
    text-decoration: none;
    font-weight: 500;
}

.sidebar-org-mail:hover,
.sidebar-org-mail:focus-visible {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sidebar-org-mail:focus-visible {
    outline: 2px solid var(--accent-orange-light);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Main Content */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Logged-in admin bar: match sidebar height so sticky footer partners stay in view. */
body.admin-bar .main-content {
    min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
}

/* Sticky footer: short SPA sections and inner pages keep partners + site footer at the bottom. */
body.saje-site-layout .partners-section {
    margin-top: auto;
}

body.saje-site-layout .site-footer {
    margin-top: auto;
}

body.saje-site-layout .partners-section + .site-footer {
    margin-top: 0;
}

/* Breadcrumbs + top bar search */
.breadcrumbs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--white);
    padding: 12px 30px;
    border-bottom: 1px solid var(--gray-border);
    box-sizing: border-box;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-bar {
    background: linear-gradient(180deg, #fff8f0 0%, #fffdfb 100%);
    border-bottom-color: rgba(191, 54, 12, 0.16);
}

body.saje-section-harrastekiekko .breadcrumbs-bar {
    background: linear-gradient(180deg, #eef4fb 0%, #f7fafd 100%);
    border-bottom-color: rgba(21, 101, 192, 0.22);
}

.breadcrumbs-bar .breadcrumbs {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

/* Hidden on desktop; mobile logos align with sidebar sources (.logo-link-main / .logo-link-hk). */
.breadcrumbs-bar__brand {
    display: none;
}

.breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: none;
    margin: 0;
    padding: 0;
}

.breadcrumbs li:not(:last-child)::after {
    content: '/';
    margin-left: 8px;
    color: #333333;
}

.breadcrumbs a {
    color: var(--accent-orange-dark);
    text-decoration: underline;
    text-decoration-color: var(--accent-orange-dark);
    text-underline-offset: 2px;
}

.breadcrumbs a:hover {
    text-decoration-thickness: 2px;
}

.breadcrumbs [aria-current] {
    color: var(--text-dark);
    font-weight: 500;
}

.breadcrumbs-search-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 2px solid var(--accent-orange-dark);
    background: var(--white);
    color: var(--accent-orange-dark);
    text-decoration: none;
    cursor: pointer;
    border-radius: 8px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.breadcrumbs-bar__actions {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.breadcrumbs-text-scale {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.breadcrumbs-text-scale-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    margin: 0;
    padding: 0 8px;
    border: 2px solid transparent;
    background: var(--white);
    color: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.breadcrumbs-text-scale-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* SAJE — level 1 standard: plain black text, no accent border */
html[data-saje-text-scale-level="1"] body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale-btn,
body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale--standard .breadcrumbs-text-scale-btn {
    border-color: transparent;
    background: transparent;
    color: var(--text-dark);
}

html[data-saje-text-scale-level="1"] body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale-btn:hover:not(:disabled),
html[data-saje-text-scale-level="1"] body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale-btn:focus-visible:not(:disabled),
body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale--standard .breadcrumbs-text-scale-btn:hover:not(:disabled),
body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale--standard .breadcrumbs-text-scale-btn:focus-visible:not(:disabled) {
    border-color: transparent;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-dark);
    outline: none;
}

/* SAJE — level 0 min (gray) */
html[data-saje-text-scale-level="0"] body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale-btn,
body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale--min .breadcrumbs-text-scale-btn {
    border-color: #9e9e9e;
    background: var(--gray-light);
    color: #616161;
    opacity: 1;
}

html[data-saje-text-scale-level="0"] body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale-btn:hover:not(:disabled),
html[data-saje-text-scale-level="0"] body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale-btn:focus-visible:not(:disabled),
body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale--min .breadcrumbs-text-scale-btn:hover:not(:disabled),
body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale--min .breadcrumbs-text-scale-btn:focus-visible:not(:disabled) {
    border-color: #757575;
    background: #e0e0e0;
    color: var(--text-dark);
}

html[data-saje-text-scale-level="0"] body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale-btn:disabled,
body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale--min .breadcrumbs-text-scale-btn:disabled {
    opacity: 1;
    border-color: #bdbdbd;
    background: #eeeeee;
    color: #9e9e9e;
}

/* SAJE — level 2 large (light orange) */
html[data-saje-text-scale-level="2"] body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale-btn,
body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale--large .breadcrumbs-text-scale-btn {
    border-color: var(--accent-orange);
    background: #fff3e0;
    color: var(--accent-orange-dark);
    opacity: 1;
}

html[data-saje-text-scale-level="2"] body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale-btn:hover:not(:disabled),
html[data-saje-text-scale-level="2"] body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale-btn:focus-visible:not(:disabled) {
    border-color: var(--accent-orange-darker);
    background: var(--accent-orange-dark);
    color: var(--white);
}

/* SAJE — level 3 max (filled orange) */
html[data-saje-text-scale-level="3"] body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale-btn,
body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale--max .breadcrumbs-text-scale-btn {
    border-color: var(--accent-orange-darker);
    background: var(--accent-orange-dark);
    color: var(--white);
    opacity: 1;
}

html[data-saje-text-scale-level="3"] body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale-btn:hover:not(:disabled),
html[data-saje-text-scale-level="3"] body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale-btn:focus-visible:not(:disabled) {
    border-color: var(--accent-orange-darker);
    background: var(--accent-orange-darker);
    color: var(--white);
}

html[data-saje-text-scale-level="3"] body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale-btn:disabled,
body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs-text-scale--max .breadcrumbs-text-scale-btn:disabled {
    opacity: 1;
    border-color: var(--accent-orange-darker);
    background: var(--accent-orange);
    color: var(--white);
}

/* Harrastekiekko — level 1 standard: plain black text, no accent border */
html[data-saje-text-scale-level="1"] body.saje-section-harrastekiekko .breadcrumbs-text-scale-btn,
body.saje-section-harrastekiekko .breadcrumbs-text-scale--standard .breadcrumbs-text-scale-btn {
    border-color: transparent;
    background: transparent;
    color: var(--text-dark);
    opacity: 1;
}

html[data-saje-text-scale-level="1"] body.saje-section-harrastekiekko .breadcrumbs-text-scale-btn:hover:not(:disabled),
html[data-saje-text-scale-level="1"] body.saje-section-harrastekiekko .breadcrumbs-text-scale-btn:focus-visible:not(:disabled),
body.saje-section-harrastekiekko .breadcrumbs-text-scale--standard .breadcrumbs-text-scale-btn:hover:not(:disabled),
body.saje-section-harrastekiekko .breadcrumbs-text-scale--standard .breadcrumbs-text-scale-btn:focus-visible:not(:disabled) {
    border-color: transparent;
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-dark);
    outline: none;
}

/* Harrastekiekko — level 0 min */
html[data-saje-text-scale-level="0"] body.saje-section-harrastekiekko .breadcrumbs-text-scale-btn,
body.saje-section-harrastekiekko .breadcrumbs-text-scale--min .breadcrumbs-text-scale-btn {
    border-color: #9e9e9e;
    background: var(--gray-light);
    color: #616161;
}

html[data-saje-text-scale-level="0"] body.saje-section-harrastekiekko .breadcrumbs-text-scale-btn:hover:not(:disabled),
html[data-saje-text-scale-level="0"] body.saje-section-harrastekiekko .breadcrumbs-text-scale-btn:focus-visible:not(:disabled) {
    border-color: #757575;
    background: #e0e0e0;
    color: var(--text-dark);
}

html[data-saje-text-scale-level="0"] body.saje-section-harrastekiekko .breadcrumbs-text-scale-btn:disabled,
body.saje-section-harrastekiekko .breadcrumbs-text-scale--min .breadcrumbs-text-scale-btn:disabled {
    opacity: 1;
    border-color: #bdbdbd;
    background: #eeeeee;
    color: #9e9e9e;
}

/* Harrastekiekko — level 2 large */
html[data-saje-text-scale-level="2"] body.saje-section-harrastekiekko .breadcrumbs-text-scale-btn,
body.saje-section-harrastekiekko .breadcrumbs-text-scale--large .breadcrumbs-text-scale-btn {
    border-color: var(--hk-accent);
    background: #e8f0fb;
    color: var(--hk-accent-dark);
    opacity: 1;
}

html[data-saje-text-scale-level="2"] body.saje-section-harrastekiekko .breadcrumbs-text-scale-btn:hover:not(:disabled),
html[data-saje-text-scale-level="2"] body.saje-section-harrastekiekko .breadcrumbs-text-scale-btn:focus-visible:not(:disabled) {
    border-color: var(--hk-accent-dark);
    background: var(--hk-accent);
    color: var(--white);
}

/* Harrastekiekko — level 3 max */
html[data-saje-text-scale-level="3"] body.saje-section-harrastekiekko .breadcrumbs-text-scale-btn,
body.saje-section-harrastekiekko .breadcrumbs-text-scale--max .breadcrumbs-text-scale-btn {
    border-color: var(--hk-accent-dark);
    background: var(--hk-accent);
    color: var(--white);
    opacity: 1;
}

html[data-saje-text-scale-level="3"] body.saje-section-harrastekiekko .breadcrumbs-text-scale-btn:hover:not(:disabled),
html[data-saje-text-scale-level="3"] body.saje-section-harrastekiekko .breadcrumbs-text-scale-btn:focus-visible:not(:disabled) {
    border-color: var(--hk-accent-dark);
    background: var(--hk-accent-dark);
    color: var(--white);
}

html[data-saje-text-scale-level="3"] body.saje-section-harrastekiekko .breadcrumbs-text-scale-btn:disabled,
body.saje-section-harrastekiekko .breadcrumbs-text-scale--max .breadcrumbs-text-scale-btn:disabled {
    opacity: 1;
    border-color: var(--hk-accent-dark);
    background: #42a5f5;
    color: var(--white);
}

body.saje-section-harrastekiekko .breadcrumbs-text-scale-btn:focus-visible {
    outline: 2px solid var(--hk-accent-on-sidebar);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .breadcrumbs-text-scale-btn {
        transition: none;
    }
}

.breadcrumbs-search-btn:hover,
.breadcrumbs-search-btn:focus-visible {
    border-color: var(--accent-orange-darker);
    background: var(--accent-orange-dark);
    color: var(--white);
    outline: none;
}

.breadcrumbs-search-btn .ph-fill {
    font-size: 1.1rem;
    line-height: 1;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 30px;
}

/* Sections */
.section {
    display: none;
    padding: 60px 0;
    position: relative;
}

.section.active {
    display: block;
}

.section-with-bg {
    position: relative;
    overflow: hidden;
}

.section-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.15;
    z-index: 0;
}

.section-background-assignments {
    background-image: var(--saje-hero-image);
}

.section-background-harrastekiekko {
    background-image: var(--saje-harrastekiekko-section-bg, none);
}

.section-with-bg .container {
    position: relative;
    z-index: 1;
}

/*
 * Top spacing under breadcrumbs: one compact band for inner pages and for SPA
 * home (sections are toggled, not scroll-stacked, so 60px + 40px read as excess).
 */
body.saje-site-layout .main-content > .breadcrumbs-bar + .section,
body.saje-site-layout .main-content > .breadcrumbs-bar + article.section {
    padding-top: 20px;
}

body.saje-site-layout .main-content > .breadcrumbs-bar + .section > .container,
body.saje-site-layout .main-content > .breadcrumbs-bar + article.section > .container {
    padding-top: 12px;
}

body.saje-site-layout:has(.main-content > .breadcrumbs-bar ~ .section ~ .section) .main-content .section {
    padding-top: 20px;
}

body.saje-site-layout:has(.main-content > .breadcrumbs-bar ~ .section ~ .section) .main-content .section > .container {
    padding-top: 12px;
}

/* Aloitusopas: main guide sits in .content-card; strip extra top padding so H1 aligns with other inner pages. */
body.saje-site-layout .page-aloitusopas > .container > .entry-content.content-card:not(.guide-intro-notice) {
    padding-top: 0;
}

.section-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 30px;
    letter-spacing: -0.01em;
    line-height: 1.3;
    border-radius: 0;
    background: transparent;
    border-left: none;
    padding-left: 0;
}

.section-intro {
    margin-bottom: 30px;
    color: var(--text-light);
    font-size: 1.05rem;
}

/* Page Header */
.page-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 2px solid var(--gray-border);
}

.header-image-wrapper {
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    /* Reserve hero crop box before paint (CLS); matches .header-image display crop. */
    aspect-ratio: 900 / 400;
    width: 100%;
}

.header-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.page-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-dark);
}

.page-subtitle {
    color: var(--text-light);
    font-size: 1.15rem;
    max-width: 800px;
    margin: 15px auto 0;
    font-weight: 400;
}

/* Stats Dashboard */
.stats-dashboard {
    margin-bottom: 50px;
}

.stats-dashboard .stats-grid {
    margin-bottom: 0;
}

.stats-dashboard .stat-card {
    text-align: center;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    margin-bottom: 60px;
}

.stat-card {
    background: var(--white);
    padding: 30px;
    border: 1px solid var(--gray-border);
    text-align: center;
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-orange);
    transform: scaleX(1);
}

.stat-value {
    font-size: 3rem;
    font-weight: 900;
    color: var(--accent-orange);
    line-height: 1.1;
    margin-bottom: 10px;
}

.stat-label {
    font-size: 0.95rem;
    font-weight: 500;
}

/* Content Grid */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.content-card {
    background: var(--white);
    padding: 30px;
    border: 1px solid var(--gray-border);
    border-radius: 0;
}

.content-card h2,
.content-card h3 {
    margin-bottom: 16px;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-dark);
}

.content-card p {
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 12px;
}

.content-card a {
    text-decoration: underline;
    text-decoration-color: var(--accent-orange);
    text-underline-offset: 2px;
    color: var(--accent-orange-dark);
}

.content-card a:hover {
    text-decoration-thickness: 2px;
}

/* External Link Indicators */
a[target="_blank"]:not(.btn):not(.card-link):not(.partner-link)::after {
    content: '\2197';
    display: inline-block;
    margin-left: 4px;
    font-size: 0.85em;
    opacity: 0.7;
    vertical-align: baseline;
}

a[target="_blank"]:not(.btn):not(.card-link):not(.partner-link):hover::after {
    opacity: 1;
}

/* Service Cards */
.service-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.service-card {
    background: var(--white);
    padding: 30px;
    border: 1px solid var(--gray-border);
}

.service-card h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
    color: var(--text-dark);
    font-weight: 700;
}

.service-card p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* News Section */
.news-section {
    margin-bottom: 50px;
}

.news-section .section-title {
    font-size: 1.8rem;
}

.news-list {
    display: grid;
    gap: 15px;
}

.news-item {
    background: var(--white);
    padding: 20px 25px;
    border: 1px solid var(--gray-border);
}

.news-meta {
    margin-bottom: 8px;
}

.news-meta time {
    color: var(--accent-orange-dark);
    font-size: 0.9rem;
    font-weight: 600;
}

.news-title {
    font-size: 1.1rem;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text-dark);
}

.news-excerpt {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.news-excerpt a {
    color: var(--accent-orange);
    text-decoration: underline;
    text-decoration-color: var(--accent-orange);
    text-underline-offset: 2px;
    font-weight: 600;
}

.news-excerpt a:hover {
    text-decoration-thickness: 2px;
}

/* Tables */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    background: var(--white);
    border: 1px solid var(--gray-border);
    border-radius: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.table-wrapper:focus-visible {
    outline: 3px solid var(--accent-orange);
    outline-offset: 2px;
}

body.saje-site-layout.saje-section-harrastekiekko .table-wrapper:focus-visible {
    outline-color: var(--hk-accent);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
    border-radius: 0;
}

th {
    background: var(--primary-black);
    color: white;
    text-align: left;
    padding: 18px 15px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

td {
    padding: 16px 15px;
    border-bottom: 1px solid var(--gray-border);
    font-size: 0.95rem;
    line-height: 1.6;
}

tr:last-child td {
    border-bottom: none;
}

/* Sortable plugin tables — match global th chrome */
#main-content table.hallinta-sortable thead th.hallinta-sortable-th {
    padding: 0;
    vertical-align: middle;
    background: var(--primary-black);
    color: var(--white);
}

#main-content table.hallinta-sortable .hallinta-sort-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 18px 15px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-align: left;
}

#main-content table.hallinta-sortable .hallinta-sort-btn:hover,
#main-content table.hallinta-sortable .hallinta-sort-btn:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    outline: 2px solid var(--accent-orange);
    outline-offset: -2px;
}

#main-content table.hallinta-sortable th[aria-sort="ascending"] .hallinta-sort-btn,
#main-content table.hallinta-sortable th[aria-sort="descending"] .hallinta-sort-btn {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 -3px 0 var(--accent-orange);
}

#main-content table.hallinta-sortable th[aria-sort="ascending"] .hallinta-sort-btn::after,
#main-content table.hallinta-sortable th[aria-sort="descending"] .hallinta-sort-btn::after {
    display: inline-block;
    font-size: 0.7em;
    opacity: 0.9;
    line-height: 1;
}

#main-content table.hallinta-sortable th[aria-sort="ascending"] .hallinta-sort-btn::after {
    content: "\25B2";
}

#main-content table.hallinta-sortable th[aria-sort="descending"] .hallinta-sort-btn::after {
    content: "\25BC";
}

body.saje-section-harrastekiekko #main-content table.hallinta-sortable thead th.hallinta-sortable-th {
    background: var(--hk-accent-dark);
}

body.saje-section-harrastekiekko #main-content table.hallinta-sortable .hallinta-sort-btn:hover,
body.saje-section-harrastekiekko #main-content table.hallinta-sortable .hallinta-sort-btn:focus-visible {
    outline-color: var(--white);
}

body.saje-section-harrastekiekko #main-content table.hallinta-sortable th[aria-sort="ascending"] .hallinta-sort-btn,
body.saje-section-harrastekiekko #main-content table.hallinta-sortable th[aria-sort="descending"] .hallinta-sort-btn {
    box-shadow: inset 0 -3px 0 var(--white);
}

tr:hover td {
    background: var(--gray-light);
    transition: background-color 0.2s ease;
}

tr:nth-child(even) {
    background: rgba(248, 248, 248, 0.5);
}

tr:nth-child(even):hover td {
    background: var(--gray-light);
}

/* Table Search */
.table-search-group {
    margin-bottom: 25px;
}

.table-search-input {
    width: 100%;
    max-width: 500px;
    padding: 12px 16px;
    font-size: 1rem;
    border: 2px solid var(--gray-border);
    border-radius: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.table-search-input:focus {
    outline: none;
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px rgba(230, 81, 0, 0.1);
}

.table-search-input::placeholder {
    color: #666;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.empty-state {
    background: var(--white);
    padding: 40px;
    text-align: center;
    border: 1px solid var(--gray-border);
    color: var(--text-light);
}

/* Client-side filter: hidden unless JS toggles .assignments-filter-empty (WP may strip inline display:none). */
#assignments-empty-state {
    display: none;
}

#assignments-empty-state.assignments-filter-empty {
    display: block;
}

.empty-state p {
    margin: 0;
    font-size: 1.05rem;
}

/* Plugin shortcode empty states (nimeamiset, etc.) */
.hallinta-empty-state {
    margin: 0;
    text-align: center;
}

.hallinta-empty-state__text {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--text-light);
}

.entry-content .hallinta-nimeamiset-empty {
    padding: 2.5rem 1.5rem;
    background: var(--gray-light);
    border: 1px solid var(--gray-border);
    border-left: 4px solid var(--accent-orange);
}

#tuomarinimeamiset .table-wrapper.assignments-table-empty,
#tuomarinimeamiset .table-wrapper:has(.hallinta-nimeamiset-empty),
#tuomarinimeamiset .table-wrapper:has(.hallinta-turnaus-nimeamiset-empty) {
    overflow: visible;
}

#tuomarinimeamiset .table-wrapper .hallinta-nimeamiset-empty {
    padding: 2.75rem 1.5rem 3rem;
    background: transparent;
    border: 0;
    border-left: 0;
}

#tuomarinimeamiset .nimeamiset-panel .table-wrapper .hallinta-turnaus-nimeamiset-empty {
    padding: 1.15rem 1.25rem 1.25rem;
    background: transparent;
    border: 0;
}

#tuomarinimeamiset .table-wrapper .hallinta-empty-state__text {
    max-width: 26rem;
    margin-inline: auto;
}

#tuomarinimeamiset .table-search-group.assignments-search-hidden {
    display: none;
}

#tuomarinimeamiset .assignments-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
    margin-bottom: 1rem;
}

#tuomarinimeamiset .assignments-toolbar .table-search-input {
    flex: 2 1 14rem;
    min-width: 0;
}

#tuomarinimeamiset .assignments-referee-filter {
    flex: 1 1 11rem;
    min-width: 10rem;
    max-width: 100%;
    font: inherit;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--gray-border);
    border-radius: 4px;
    background: var(--white);
}

#tuomarinimeamiset .nimeamiset-section-intro {
    margin-top: -0.25rem;
    margin-bottom: 1.15rem;
    max-width: 42rem;
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.55;
}

#tuomarinimeamiset .nimeamiset-jump-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
    margin: 0 0 0.85rem;
}

#tuomarinimeamiset .nimeamiset-jump-nav__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-light);
    margin-right: 0.1rem;
}

#tuomarinimeamiset .nimeamiset-jump-nav__label .ph-fill {
    color: var(--accent-orange-dark);
}

#tuomarinimeamiset .nimeamiset-jump-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.8rem;
    border: 1px solid rgba(230, 81, 0, 0.22);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--white);
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

#tuomarinimeamiset .nimeamiset-jump-nav__link .ph-fill {
    color: var(--accent-orange-dark);
    font-size: 1.05em;
}

#tuomarinimeamiset .nimeamiset-jump-nav__link:hover,
#tuomarinimeamiset .nimeamiset-jump-nav__link:focus-visible {
    border-color: var(--accent-orange);
    color: var(--accent-orange-dark);
    outline: none;
}

#tuomarinimeamiset #turnaus-nimeamiset-title,
#tuomarinimeamiset #sarja-nimeamiset-title,
#tuomarinimeamiset #toimitsija-nimeamiset-title {
    scroll-margin-top: 5rem;
}

#tuomarinimeamiset .nimeamiset-panel {
    margin-top: 1.15rem;
    padding: 1.15rem 1.15rem 1.25rem;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(191, 54, 12, 0.2);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

#tuomarinimeamiset .nimeamiset-panel--turnaus {
    border-top: 4px solid var(--accent-orange-dark);
}

#tuomarinimeamiset .nimeamiset-panel--sarja {
    border-top: 4px solid var(--accent-orange);
    margin-top: 1.35rem;
}

#tuomarinimeamiset .hallinta-nimeamiset-toimitsijat-block {
    margin-top: 1.5rem;
    padding-top: 0.25rem;
}

#tuomarinimeamiset .nimeamiset-panel__subtitle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

#tuomarinimeamiset .nimeamiset-panel__subtitle .ph-fill {
    font-size: 1.15em;
    color: var(--accent-orange-dark);
    flex-shrink: 0;
}

#tuomarinimeamiset .table-wrapper--toimitsijat {
    margin-bottom: 0;
}

.hallinta-nimeamiset-toimitsijat-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
}

#tuomarinimeamiset .nimeamiset-panel__title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1rem;
    font-size: clamp(1.2rem, 2vw, 1.45rem);
    font-weight: 800;
    color: var(--text-dark);
    letter-spacing: -0.02em;
    line-height: 1.25;
}

#tuomarinimeamiset .nimeamiset-panel__title .ph-fill {
    font-size: 1.3em;
    color: var(--accent-orange-dark);
    flex-shrink: 0;
}

#tuomarinimeamiset .nimeamiset-panel .table-wrapper {
    margin-bottom: 0;
}

#tuomarinimeamiset .section-subtitle {
    margin: 2rem 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-black);
}

.hallinta-turnaus-nimeamiset-group {
    margin-bottom: 1.5rem;
}

.hallinta-turnaus-nimeamiset-group:last-child {
    margin-bottom: 0;
}

.hallinta-turnaus-nimeamiset-group__title {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 700;
}

/* Wide data tables: horizontal scroll on desktop; harraste tables scroll on mobile too;
   referee/team-contact tables stack as cards under 900px (see media query). */
/* Horizontal scroll regions (tables, membership CF7 wrapper): inset when JS detects overflow. */
#tuomarinimeamiset .table-wrapper.assignments-table-overflow,
#main-content .table-wrapper.saje-h-overflow,
#main-content .saje-h-scroll.saje-h-overflow {
    box-shadow: inset -14px 0 12px -14px rgba(0, 0, 0, 0.07);
}

#main-content .saje-h-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
    min-width: 0;
}

.saje-scroll-hint,
.assignments-scroll-hint {
    margin: 0 0 14px;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-light);
}

.saje-scroll-hint[hidden],
.assignments-scroll-hint[hidden] {
    display: none !important;
}

@media (max-width: 900px) {
    /* Responsive card layout (single source of truth) for wide Hallinta tables that
       read better stacked: referee assignments, turnaus rows, and harraste team
       contacts. Harraste schedule/results/standings use horizontal scroll instead
       (see block below). Plugin emits markup + data-label; theme owns presentation.
       Match brand-frame specificity so card mode is not stuck on overflow:hidden. */
    body.saje-site-layout:not(.saje-section-harrastekiekko) #tuomarinimeamiset .table-wrapper,
    #tuomarinimeamiset .table-wrapper,
    .table-wrapper:has(.hallinta-harraste-joukkueet-table),
    .table-wrapper--turnaus {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    #tuomarinimeamiset .hallinta-nimeamiset-table,
    #tuomarinimeamiset .hallinta-nimeamiset-toimitsijat-table,
    #tuomarinimeamiset .hallinta-turnaus-nimeamiset-table,
    .hallinta-harraste-joukkueet-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
        background: transparent;
        box-shadow: none;
    }

    #tuomarinimeamiset .hallinta-nimeamiset-table thead,
    #tuomarinimeamiset .hallinta-nimeamiset-toimitsijat-table thead,
    #tuomarinimeamiset .hallinta-turnaus-nimeamiset-table thead,
    .hallinta-harraste-joukkueet-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    #tuomarinimeamiset .hallinta-nimeamiset-table tbody,
    #tuomarinimeamiset .hallinta-nimeamiset-toimitsijat-table tbody,
    #tuomarinimeamiset .hallinta-turnaus-nimeamiset-table tbody,
    .hallinta-harraste-joukkueet-table tbody {
        display: block;
    }

    #tuomarinimeamiset .hallinta-nimeamiset-table tbody tr,
    #tuomarinimeamiset .hallinta-nimeamiset-toimitsijat-table tbody tr,
    #tuomarinimeamiset .hallinta-turnaus-nimeamiset-table tbody tr,
    .hallinta-harraste-joukkueet-table tbody tr {
        display: block;
        margin-bottom: 14px;
        border: 1px solid var(--gray-border);
        background: var(--white);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    #tuomarinimeamiset .hallinta-nimeamiset-table tbody tr:last-child,
    #tuomarinimeamiset .hallinta-nimeamiset-toimitsijat-table tbody tr:last-child,
    #tuomarinimeamiset .hallinta-turnaus-nimeamiset-table tbody tr:last-child,
    .hallinta-harraste-joukkueet-table tbody tr:last-child {
        margin-bottom: 0;
    }

    #tuomarinimeamiset .hallinta-nimeamiset-table tbody td,
    #tuomarinimeamiset .hallinta-nimeamiset-toimitsijat-table tbody td,
    #tuomarinimeamiset .hallinta-turnaus-nimeamiset-table tbody td,
    .hallinta-harraste-joukkueet-table tbody td {
        display: grid;
        grid-template-columns: minmax(7.5rem, 36%) 1fr;
        gap: 0.5rem 1rem;
        align-items: start;
        padding: 10px 12px;
        border-bottom: 1px solid var(--gray-border);
        font-size: 0.9375rem;
        line-height: 1.45;
        word-wrap: break-word;
        overflow-wrap: anywhere;
    }

    #tuomarinimeamiset .hallinta-nimeamiset-table tbody td:last-child,
    #tuomarinimeamiset .hallinta-nimeamiset-toimitsijat-table tbody td:last-child,
    #tuomarinimeamiset .hallinta-turnaus-nimeamiset-table tbody td:last-child,
    .hallinta-harraste-joukkueet-table tbody td:last-child {
        border-bottom: none;
    }

    #tuomarinimeamiset .hallinta-nimeamiset-table tbody td::before,
    #tuomarinimeamiset .hallinta-nimeamiset-toimitsijat-table tbody td::before,
    #tuomarinimeamiset .hallinta-turnaus-nimeamiset-table tbody td::before,
    .hallinta-harraste-joukkueet-table tbody td::before {
        content: attr(data-label);
        font-weight: 700;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--primary-black);
    }

    #tuomarinimeamiset .hallinta-nimeamiset-table tbody tr:nth-child(even),
    #tuomarinimeamiset .hallinta-nimeamiset-toimitsijat-table tbody tr:nth-child(even),
    #tuomarinimeamiset .hallinta-turnaus-nimeamiset-table tbody tr:nth-child(even),
    .hallinta-harraste-joukkueet-table tbody tr:nth-child(even) {
        background: var(--white);
    }

    /* Nimeämiset zebra uses PHP --alt (extra tables break nth-child). */
    #tuomarinimeamiset .hallinta-nimeamiset-table tbody tr.hallinta-nimeamiset-match-row--alt td,
    #tuomarinimeamiset .hallinta-nimeamiset-toimitsijat-table tbody tr.hallinta-nimeamiset-match-row--alt td {
        background: rgba(248, 248, 248, 0.65);
    }

    #tuomarinimeamiset .hallinta-turnaus-nimeamiset-table tbody tr:nth-child(even) td,
    .hallinta-harraste-joukkueet-table tbody tr:nth-child(even) td {
        background: rgba(248, 248, 248, 0.65);
    }

    #tuomarinimeamiset .hallinta-nimeamiset-table tbody tr:hover td,
    #tuomarinimeamiset .hallinta-nimeamiset-toimitsijat-table tbody tr:hover td,
    #tuomarinimeamiset .hallinta-turnaus-nimeamiset-table tbody tr:hover td,
    .hallinta-harraste-joukkueet-table tbody tr:hover td {
        background: var(--gray-light);
        transition: background-color 0.15s ease;
    }

    #tuomarinimeamiset .hallinta-nimeamiset-table tbody tr.hallinta-nimeamiset-match-row--alt:hover td,
    #tuomarinimeamiset .hallinta-nimeamiset-toimitsijat-table tbody tr.hallinta-nimeamiset-match-row--alt:hover td,
    #tuomarinimeamiset .hallinta-turnaus-nimeamiset-table tbody tr:nth-child(even):hover td,
    .hallinta-harraste-joukkueet-table tbody tr:nth-child(even):hover td {
        background: var(--gray-light);
    }

    /*
     * Mobile card tables hide thead; carry SAJE orange / HK blue on field labels
     * and a left accent strip so theme colors survive the stacked layout.
     */
    body.saje-site-layout:not(.saje-section-harrastekiekko) #tuomarinimeamiset .hallinta-nimeamiset-table tbody td::before,
    body.saje-site-layout:not(.saje-section-harrastekiekko) #tuomarinimeamiset .hallinta-nimeamiset-toimitsijat-table tbody td::before,
    body.saje-site-layout:not(.saje-section-harrastekiekko) #tuomarinimeamiset .hallinta-turnaus-nimeamiset-table tbody td::before,
    body.saje-site-layout:not(.saje-section-harrastekiekko) .table-wrapper--turnaus .hallinta-turnaus-nimeamiset-table tbody td::before {
        color: var(--accent-orange-dark);
    }

    body.saje-site-layout:not(.saje-section-harrastekiekko) #tuomarinimeamiset .hallinta-nimeamiset-table tbody tr,
    body.saje-site-layout:not(.saje-section-harrastekiekko) #tuomarinimeamiset .hallinta-nimeamiset-toimitsijat-table tbody tr,
    body.saje-site-layout:not(.saje-section-harrastekiekko) #tuomarinimeamiset .hallinta-turnaus-nimeamiset-table tbody tr,
    body.saje-site-layout:not(.saje-section-harrastekiekko) .table-wrapper--turnaus .hallinta-turnaus-nimeamiset-table tbody tr {
        border-left: 3px solid var(--accent-orange);
    }

    body.saje-site-layout.saje-section-harrastekiekko .hallinta-harraste-joukkueet-table tbody td::before {
        color: var(--hk-accent-dark);
    }

    body.saje-site-layout.saje-section-harrastekiekko .hallinta-harraste-joukkueet-table tbody tr {
        border-left: 3px solid var(--hk-accent);
    }

    .hallinta-harraste-joukkueet-table tbody td:empty {
        display: none;
    }

    body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarjaohjelma-sivu .hallinta-harraste-list--fixtures {
        border-top: 0;
    }

    body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarjaohjelma-sivu .hallinta-harraste-list--fixtures .hallinta-harraste-card {
        margin-bottom: 14px;
        padding: 12px 14px;
        border: 1px solid var(--gray-border);
        border-left: 3px solid var(--hk-accent);
        border-radius: 0;
        background: var(--white);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarjaohjelma-sivu .hallinta-harraste-list--fixtures .hallinta-harraste-card:last-child {
        margin-bottom: 0;
    }

    /* Harraste schedule, results, standings: keep tabular rows; scroll sideways on phone. */
    .table-wrapper:has(.hallinta-harraste-table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        border: 1px solid var(--gray-border);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        background: var(--white);
    }

    .hallinta-harraste-table {
        min-width: 34rem;
    }

    .hallinta-harraste-table th,
    .hallinta-harraste-table td {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    #main-content table.hallinta-harraste-table.hallinta-sortable .hallinta-sort-btn {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .hallinta-harraste-card {
        padding-top: 1rem;
        padding-bottom: 1.15rem;
    }

    #harrastekiekko .hallinta-harraste-card {
        padding-top: 1rem;
        padding-bottom: 1.15rem;
    }

    body.saje-section-harrastekiekko #harrastekiekko .harrastekiekko-games .hallinta-harraste-card--fixture .hallinta-harraste-card__meta-item,
    body.saje-section-harrastekiekko #harrastekiekko .harrastekiekko-results .hallinta-harraste-card--result .hallinta-harraste-card__score {
        color: var(--hk-accent-dark);
    }

    #tuomarinimeamiset .table-search-input,
    #tuomarinimeamiset .assignments-referee-filter {
        font-size: 16px;
    }
}

/* Lists */
.check-list {
    list-style: none;
    padding-left: 0;
}

.check-list li {
    margin-bottom: 10px;
    padding-left: 0;
}

.check-list li::before {
    content: "\2713";
    color: var(--accent-orange);
    font-weight: 900;
    margin-right: 12px;
    font-size: 1.1em;
}

.check-list a {
    color: var(--accent-orange);
    text-decoration: underline;
    text-decoration-color: var(--accent-orange);
    text-underline-offset: 2px;
}

.check-list a:hover {
    text-decoration-thickness: 2px;
}

/* Focus styles */
a:focus,
button:focus,
input:focus {
    outline: 2px solid var(--accent-orange);
    outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent-orange);
    outline-offset: 2px;
}

/* Harrastekiekko */
.harrastekiekko-intro {
    margin-bottom: 30px;
    text-align: center;
}

.harrastekiekko-intro p {
    margin-bottom: 15px;
    font-size: 1.05rem;
}

.harrastekiekko-links {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 25px;
}

.harrastekiekko-links .btn {
    padding: 10px 20px;
    font-size: 0.95rem;
}

.harrastekiekko-games,
.harrastekiekko-results {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.game-row,
.result-row {
    padding: 12px 0;
    border-bottom: 1px solid var(--gray-border);
}

.game-row:last-child,
.result-row:last-child {
    border-bottom: none;
}

.game-date {
    font-size: 0.85rem;
    color: var(--accent-orange);
    font-weight: 600;
    margin-bottom: 4px;
}

.game-match {
    font-weight: 500;
    color: var(--text-dark);
}

.result-match {
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.result-score {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-orange);
}

.result-periods {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-light);
}

.card-link {
    display: inline-block;
    margin-top: 15px;
    color: var(--accent-orange);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--accent-orange);
    text-underline-offset: 2px;
}

.card-link:hover {
    text-decoration-thickness: 2px;
}

/* Harrastekiekko: latest Ajankohtaista (harrastekiekko-category news), top of section */
.harrastekiekko-ajankohtaista {
    margin-bottom: 1.25rem;
}

.harrastekiekko-ajankohtaista .hallinta-ajankohtaista {
    gap: 0;
}

.harrastekiekko-ajankohtaista .hallinta-tiedote {
    background: transparent;
    border: 0;
    padding: 0;
}

.harrastekiekko-ajankohtaista .hallinta-tiedote + .hallinta-tiedote {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-border);
}

/* Teams */
.harrastekiekko-teams {
    margin-top: 1.25rem;
}

.harrastekiekko-teams h3,
.harrastekiekko-ajankohtaista > h3 {
    text-align: left;
    margin-bottom: 0;
}

.teams-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.team-badge {
    background: var(--dark-black);
    color: var(--white);
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
}

.team-badge:nth-child(odd) {
    background: var(--accent-orange);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--accent-orange-dark);
    color: var(--white);
}

.btn:hover {
    background: var(--accent-orange-darker);
    color: var(--white);
}

.btn-secondary {
    background: var(--dark-black);
    color: var(--white);
}

.btn-secondary:hover {
    background: var(--primary-black);
    color: var(--white);
}

.btn-outline {
    background: var(--white);
    color: var(--accent-orange-dark);
    border: 2px solid var(--accent-orange);
    box-shadow: none;
}

.btn-outline:hover,
.btn-outline:focus {
    background: #fff8f0;
    color: var(--accent-orange-dark);
    border-color: var(--accent-orange-dark);
}

.btn-neutral {
    background: var(--gray-light);
    color: var(--text-dark);
    border: 2px solid var(--gray-border);
    box-shadow: none;
}

.btn-neutral:hover,
.btn-neutral:focus {
    background: var(--gray-border);
    color: var(--text-dark);
    border-color: var(--text-light);
}

/* Partners row (above footer): [saje_sponsorit] — neutral band, grid of logo cells */
body.admin-bar #sponsorit.partners-section {
    scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 32px) + 3.5rem);
}

.partners-section {
    position: relative;
    background: var(--gray-light);
    color: var(--text-dark);
    padding: 2.5rem 0 2.25rem;
    border-top: 1px solid var(--gray-border);
    text-align: center;
    flex-shrink: 0;
    scroll-margin-top: 5rem;
}

/* Legacy #partners fragment target (alias); section id is #sponsorit */
.partners-section .saje-anchor-alias {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
}

.partners-section .container {
    padding: 0 clamp(1.25rem, 4vw, 2.75rem);
}

.partners-section h2.section-title {
    margin: 0 auto 2rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-light);
    line-height: 1.35;
}

.partners-section .hallinta-sponsorit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    justify-items: stretch;
    align-items: stretch;
    gap: 1rem 1.25rem;
    max-width: 960px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.partners-section .hallinta-sponsori {
    position: relative;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 112px;
    margin: 0;
    padding: 1rem 0.85rem;
    background: var(--white);
    border: 1px solid var(--gray-border);
    border-radius: 0;
    box-shadow: none;
    font-weight: 500;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.partners-section .hallinta-sponsori:hover {
    border-color: var(--accent-orange-dark);
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.partners-section .hallinta-sponsori:focus-within {
    outline: 2px solid var(--accent-orange);
    outline-offset: 2px;
}

.partners-section .hallinta-sponsori__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 88px;
    padding: 0.25rem 1.5rem 0.25rem 0.25rem;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

.partners-section .hallinta-sponsori__label {
    font-size: 0.9375rem;
    line-height: 1.35;
    text-align: center;
    padding: 0 0.5rem;
}

.partners-section .hallinta-sponsori__external {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--text-light);
    opacity: 0.85;
    pointer-events: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.partners-section .hallinta-sponsori:hover .hallinta-sponsori__external,
.partners-section .hallinta-sponsori:focus-within .hallinta-sponsori__external {
    color: var(--accent-orange);
    opacity: 1;
}

.partners-section .hallinta-sponsori img,
.partners-section .hallinta-sponsori__logo {
    display: block;
    max-width: 100%;
    max-height: 72px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.65;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.partners-section .hallinta-sponsori:hover img,
.partners-section .hallinta-sponsori:hover .hallinta-sponsori__logo,
.partners-section .hallinta-sponsori:focus-within img,
.partners-section .hallinta-sponsori:focus-within .hallinta-sponsori__logo {
    filter: grayscale(0%);
    opacity: 1;
}

.partners-section .hallinta-sponsori.hallinta-sponsori--dark-bg {
    background: #171717;
    border-color: #3a3a3a;
}

.partners-section .hallinta-sponsori.hallinta-sponsori--dark-bg:hover {
    border-color: var(--accent-orange-dark);
    background: #1f1f1f;
}

.partners-section .hallinta-sponsori.hallinta-sponsori--dark-bg:focus-within {
    outline-color: var(--accent-orange-light);
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 22px;
    max-width: 1200px;
    margin: 0 auto;
}

.partner-link {
    display: block;
    text-decoration: none;
    border-radius: 8px;
}

.partner-card {
    background: var(--white);
    color: var(--text-dark);
    padding: 24px 22px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 500;
    transition: border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 170px;
    width: 100%;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.partner-card:hover {
    border-color: var(--accent-orange);
}

.partner-card.main-partner {
    background: linear-gradient(140deg, #e65100 0%, #ff8c00 100%);
    color: var(--white);
    border-color: var(--accent-orange);
    font-weight: 700;
}

.partner-card-dark {
    background: rgba(26, 26, 26, 0.92);
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.2);
}

.partner-card-dark:hover {
    border-color: var(--accent-orange);
}

.partner-name {
    font-size: 1rem;
    line-height: 1.35;
}

/* Footer */
footer,
.site-footer {
    background-color: rgba(36, 36, 36, 1);
    color: #e8e8e8;
    padding: 40px 0 0;
    border-top: 4px solid var(--accent-orange);
    flex-shrink: 0;
}

.site-footer .container {
    padding-top: 0;
    padding-bottom: 0;
    max-width: 1200px;
    /* Footer grid responds to main column width (sidebar layout), not only viewport. */
    container-type: inline-size;
    container-name: site-footer;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(0, 1fr));
    gap: 2rem 2rem;
    align-items: start;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-grid > * {
    min-width: 0;
}

.footer-col--brand {
    padding-right: 1rem;
}

.footer-brand-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 14px;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.footer-brand-meta p {
    margin: 6px 0 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.footer-brand-meta a {
    color: var(--accent-orange-light);
    text-decoration: none;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.footer-brand-meta a:hover,
.footer-brand-meta a:focus-visible {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.saje-site-layout .footer-brand-meta a:focus-visible {
    outline: 2px solid var(--accent-orange-light);
    outline-offset: 2px;
}

.footer-nav-heading {
    margin: 0 0 14px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.52);
}

.footer-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-nav-list a {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    padding: 3px 0;
    box-sizing: border-box;
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    line-height: 1.4;
    transition: color 0.15s ease;
    overflow-wrap: anywhere;
}

.footer-nav-list a:hover,
.footer-nav-list a:focus-visible {
    color: var(--accent-orange-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-bottom {
    padding: 20px 0 max(28px, env(safe-area-inset-bottom, 0px));
}

.footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

.footer-bottom-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px 20px;
    min-width: 0;
    flex: 1 1 auto;
}

.footer-credit {
    margin: 0;
    flex: 0 1 auto;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.45);
    overflow-wrap: anywhere;
    text-align: right;
}

.footer-credit a {
    color: rgba(255, 255, 255, 0.62);
    font-weight: 500;
    text-decoration: none;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
    color: var(--accent-orange-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-copyright {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.52);
}

.footer-legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.footer-legal a {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}

.footer-legal a:hover,
.footer-legal a:focus-visible {
    color: var(--accent-orange-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Footer: container queries — layout follows main column width (wide screen + narrow content area). */
@container site-footer (max-width: 900px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem 1.5rem;
    }

    .footer-col--brand {
        grid-column: 1 / -1;
        padding-right: 0;
    }
}

@container site-footer (max-width: 560px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding-bottom: 28px;
    }

    .footer-col--brand {
        grid-column: auto;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-bottom-main {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .footer-credit {
        text-align: left;
        width: 100%;
    }
}

/* Fallback when container queries are not supported (layout uses viewport). */
@supports not (container-type: inline-size) {
    @media (max-width: 960px) {
        .footer-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .footer-col--brand {
            grid-column: 1 / -1;
            padding-right: 0;
        }
    }

    @media (max-width: 600px) {
        .footer-grid {
            grid-template-columns: 1fr;
            gap: 1.75rem;
            padding-bottom: 28px;
        }

        .footer-bottom-inner {
            flex-direction: column;
            align-items: flex-start;
        }

        .footer-bottom-main {
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
        }

        .footer-credit {
            text-align: left;
            width: 100%;
        }
    }
}

@media (max-width: 480px) {
    .footer-nav-heading {
        margin-bottom: 10px;
    }

    .footer-nav-list {
        gap: 4px;
    }

    .footer-nav-list a {
        min-height: 44px;
        padding: 6px 0;
    }
}

/* Back to Top */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--accent-orange);
    color: var(--white);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--accent-orange-dark);
    color: var(--white);
}

.back-to-top i {
    font-size: 1.2rem;
}

/* Mobile Toggle (shown <=768px; lives in .breadcrumbs-bar on small screens) */
.mobile-toggle {
    display: none;
    position: relative;
    flex-shrink: 0;
    background: var(--dark-black);
    color: white;
    border: 2px solid var(--accent-orange);
    padding: 0;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    border-radius: 8px;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color 0.22s ease, border-color 0.22s ease;
}

.mobile-toggle:hover {
    border-color: var(--accent-orange-light);
}

.mobile-toggle:active {
    background: #151515;
}

.mobile-toggle[aria-expanded="true"] {
    background: var(--accent-orange-dark);
    border-color: var(--accent-orange-light);
}

.menu-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--white);
    border-radius: 1px;
    transform-origin: center;
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.mobile-toggle[aria-expanded="true"] .menu-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-toggle[aria-expanded="true"] .menu-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-toggle[aria-expanded="true"] .menu-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-overlay.active {
    display: block;
    opacity: 1;
    cursor: pointer;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .sidebar.sidebar-open {
        transform: translateX(0);
        /* Above sticky .breadcrumbs-bar (1002); drawer was painting underneath. */
        z-index: 1100;
    }

    .mobile-overlay.active {
        /* Between main chrome and open drawer so the sheet and overlay sit above the sticky bar. */
        z-index: 1090;
    }

    body.sidebar-drawer-open {
        overflow: hidden;
        overscroll-behavior: contain;
    }

    .main-content {
        margin-left: 0;
    }

    .breadcrumbs-bar {
        position: sticky;
        top: 0;
        z-index: 1002;
        padding: 10px max(14px, env(safe-area-inset-right, 0px)) 10px max(14px, env(safe-area-inset-left, 0px));
        gap: 10px;
        align-items: center;
        box-shadow: var(--shadow-sm);
    }

    body.admin-bar .breadcrumbs-bar {
        top: var(--wp-admin--admin-bar--height, 32px);
    }

    .mobile-toggle {
        display: flex;
    }

    .breadcrumbs-bar__brand {
        display: flex;
        align-items: center;
        flex-shrink: 1;
        min-width: 0;
        max-width: min(36vw, 130px);
        gap: 4px;
    }

    .breadcrumbs-bar__brand .logo-link-main,
    .breadcrumbs-bar__brand .logo-link-hk {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 100%;
        min-height: 40px;
        max-height: 44px;
        justify-content: center;
        padding: 2px;
        box-sizing: border-box;
    }

    /* Override large intrinsic/HTML dimensions from full-size media. */
    .breadcrumbs-bar__brand img.custom-logo,
    .breadcrumbs-bar__brand img.custom-logo-hk {
        max-height: 28px !important;
        max-width: min(104px, 100%) !important;
        width: auto !important;
        height: auto !important;
        display: block;
        object-fit: contain;
        object-position: left center;
    }

    .breadcrumbs-bar__brand .logo-box,
    .breadcrumbs-bar__brand .logo-box-hk {
        font-size: 0.6rem;
        padding: 5px 7px;
        line-height: 1.2;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @media (max-width: 400px) {
        .breadcrumbs-bar__brand {
            max-width: min(32vw, 108px);
            gap: 2px;
        }

        .breadcrumbs-bar__brand img.custom-logo,
        .breadcrumbs-bar__brand img.custom-logo-hk {
            max-height: 24px !important;
            max-width: min(88px, 100%) !important;
        }
    }

    .container {
        padding: 30px 20px;
    }

    footer,
    .site-footer {
        padding-top: 36px;
    }

    .site-footer .container {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: max(20px, env(safe-area-inset-left, 0px));
        padding-right: max(20px, env(safe-area-inset-right, 0px));
    }

    .footer-bottom {
        padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    }

    .footer-nav-list a {
        min-height: 44px;
        padding: 6px 0;
    }

    .back-to-top {
        bottom: max(16px, env(safe-area-inset-bottom, 0px));
        right: max(16px, env(safe-area-inset-right, 0px));
    }

    .page-header h1 {
        font-size: 1.8rem;
    }

    .page-subtitle {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .stat-card {
        padding: 20px;
    }

    .stat-value {
        font-size: 2.5rem;
    }

    .service-cards {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .service-card {
        padding: 25px;
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .content-card {
        padding: 20px;
    }

    .header-image {
        height: 100%;
    }

    .header-image-wrapper {
        min-height: 0;
    }

    .partners-section {
        padding: 2rem 0 1.75rem;
        scroll-margin-top: 4.5rem;
    }

    .partners-section h2.section-title {
        margin-bottom: 1.25rem;
    }

    .partners-section .hallinta-sponsorit {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem 0.85rem;
        max-width: none;
    }

    .partners-section .hallinta-sponsori {
        min-height: 100px;
        padding: 0.85rem 0.75rem;
    }

    .partners-section .hallinta-sponsori__link {
        min-height: 76px;
        padding-right: 1.35rem;
    }

    .partners-section .hallinta-sponsori img,
    .partners-section .hallinta-sponsori__logo {
        max-height: 60px;
    }

    .partners-grid {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .partner-card {
        width: 100%;
        max-width: 200px;
        min-width: 180px;
    }

    .sidebar-footer {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .org-details {
        padding: 10px 10px;
    }

    .harrastekiekko-links {
        gap: 10px;
    }

    .harrastekiekko-links .btn {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .teams-grid {
        gap: 8px;
    }

    .team-badge {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .table-search-input {
        max-width: 100%;
    }

    table {
        min-width: 600px;
    }

    th,
    td {
        padding: 12px 10px;
        font-size: 0.9rem;
    }

    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 44px;
        height: 44px;
    }
}

/* ==========================================================================
   GeneratePress Parent-theme overrides
   GP applies background/typography rules to .page-header, generic <a>, etc.
   that leak into this layout. Neutralize them here so the child theme wins.
   ========================================================================== */

body.saje-site-layout {
    background-color: var(--gray-light);
    background-image: none;
    color: var(--text-dark);
}

body.saje-site-layout::before {
    content: none;
}

body.saje-site-layout h1.section-title,
body.saje-site-layout h2.section-title,
body.saje-site-layout h3.section-title,
body.saje-site-layout .wp-block-heading.section-title {
    background: transparent !important;
    background-color: transparent !important;
    border-left: none !important;
    border-image: none !important;
    padding-left: 0 !important;
    box-shadow: none !important;
}

body.saje-site-layout .sidebar-header {
    background: unset !important;
    background-color: transparent !important;
}

body.saje-site-layout.separate-containers .page-header,
body.saje-site-layout .page-header {
    background-color: transparent;
    padding: 0 0 30px 0;
    margin: 0 auto 40px;
    border-bottom: 2px solid var(--gray-border);
}

body.saje-site-layout.separate-containers .inside-article,
body.saje-site-layout.separate-containers .comments-area,
body.saje-site-layout.separate-containers .paging-navigation,
body.saje-site-layout .inside-page-header {
    background-color: transparent;
    padding: 0;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content a {
    color: var(--accent-orange-dark);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content a:hover,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content a:focus,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content a:active {
    color: var(--accent-orange);
}

/*
 * Footer is inside .main-content; restore dark-footer link palette over .main-content a orange.
 * (Mirrors the HK footer block below .saje-section-harrastekiekko.)
 */
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-brand-meta a {
    color: var(--accent-orange-light);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-brand-meta a:hover,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-brand-meta a:focus,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-brand-meta a:focus-visible,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-brand-meta a:active {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-nav-list a {
    color: rgba(255, 255, 255, 0.9);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-nav-list a:hover,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-nav-list a:focus,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-nav-list a:focus-visible,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-nav-list a:active {
    color: var(--accent-orange-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-legal a {
    color: rgba(255, 255, 255, 0.72);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-legal a:hover,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-legal a:focus,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-legal a:focus-visible,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-legal a:active {
    color: var(--accent-orange-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-credit a {
    color: rgba(255, 255, 255, 0.62);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-credit a:hover,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-credit a:focus,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .site-footer .footer-credit a:active {
    color: var(--accent-orange-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*
 * Ajankohtaista (.hallinta-tiedote): title links stay dark; dates and "Lue lisää" keep accent.
 * Footer-style restore — .main-content a orange/blue would otherwise paint headline links.
 */
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .hallinta-tiedote h3 a.hallinta-tiedote-title-link {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .hallinta-tiedote h3 a.hallinta-tiedote-title-link:hover,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .hallinta-tiedote h3 a.hallinta-tiedote-title-link:focus-visible {
    color: var(--accent-orange);
    text-decoration: underline;
    text-decoration-color: var(--accent-orange);
    text-underline-offset: 2px;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .hallinta-tiedote h3 small {
    color: var(--accent-orange-dark);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .hallinta-tiedote .hallinta-tiedote-more a,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .hallinta-tiedote .hallinta-tiedote-body a,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .hallinta-tiedote .hallinta-tiedote-excerpt a {
    color: var(--accent-orange-dark);
    text-decoration: underline;
    text-decoration-color: var(--accent-orange-dark);
    text-underline-offset: 2px;
    font-weight: 600;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .hallinta-ajankohtaista-lisaa__link {
    color: var(--accent-orange-dark);
    text-decoration: none;
    font-weight: 600;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .hallinta-ajankohtaista-lisaa__link:hover,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content .hallinta-ajankohtaista-lisaa__link:focus-visible {
    color: var(--accent-orange-dark);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs a,
body.saje-site-layout:not(.saje-section-harrastekiekko) .breadcrumbs a:hover {
    color: var(--accent-orange-dark);
}

body.saje-site-layout .logo,
body.saje-site-layout .logo:hover,
body.saje-site-layout .footer-nav-list a,
body.saje-site-layout .footer-nav-list a:hover,
body.saje-site-layout .footer-legal a,
body.saje-site-layout .footer-legal a:hover,
body.saje-site-layout .footer-credit,
body.saje-site-layout .footer-credit a,
body.saje-site-layout .footer-credit a:hover {
    color: inherit;
}

/* Keep skip-link legible: do not inherit body text color on the orange bar */
body.saje-site-layout .skip-link,
body.saje-site-layout .skip-link:hover,
body.saje-site-layout .skip-link:focus {
    color: var(--white);
}

body.saje-site-layout .back-to-top,
body.saje-site-layout .back-to-top:hover {
    color: var(--white);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .sidebar-org-mail {
    color: var(--accent-orange-light);
}

/* Sponsor logos: dark text on white cards; orange on hover (not sidebar/footer white-link rules). */
body.saje-site-layout .partners-section .hallinta-sponsori__link {
    color: var(--text-dark);
}

body.saje-site-layout .partners-section .hallinta-sponsori__link:hover,
body.saje-site-layout .partners-section .hallinta-sponsori__link:focus,
body.saje-site-layout .partners-section .hallinta-sponsori__link:focus-visible {
    color: var(--accent-orange);
}

body.saje-site-layout .partners-section .hallinta-sponsori.hallinta-sponsori--dark-bg .hallinta-sponsori__link {
    color: rgba(255, 255, 255, 0.92);
}

body.saje-site-layout .partners-section .hallinta-sponsori.hallinta-sponsori--dark-bg .hallinta-sponsori__link:hover,
body.saje-site-layout .partners-section .hallinta-sponsori.hallinta-sponsori--dark-bg .hallinta-sponsori__link:focus,
body.saje-site-layout .partners-section .hallinta-sponsori.hallinta-sponsori--dark-bg .hallinta-sponsori__link:focus-visible {
    color: var(--accent-orange-light);
}

body.saje-site-layout .partners-section .hallinta-sponsori.hallinta-sponsori--dark-bg .hallinta-sponsori__external {
    color: rgba(255, 255, 255, 0.55);
}

body.saje-site-layout .check-list a,
body.saje-site-layout .check-list a:hover,
body.saje-site-layout .news-excerpt a,
body.saje-site-layout .news-excerpt a:hover {
    color: var(--accent-orange);
}

body.saje-site-layout .content-card a,
body.saje-site-layout .content-card a:hover {
    color: var(--accent-orange-dark);
}

body.saje-site-layout .content-card a.btn,
body.saje-site-layout .content-card a.btn:hover,
body.saje-site-layout .content-card a.btn:focus,
body.saje-site-layout .content-card a.btn-secondary,
body.saje-site-layout .content-card a.btn-secondary:hover,
body.saje-site-layout .content-card a.btn-secondary:focus {
    color: var(--white);
    text-decoration: none;
}

body.saje-site-layout .content-card a.btn-outline,
body.saje-site-layout .content-card a.btn-outline:hover,
body.saje-site-layout .content-card a.btn-outline:focus {
    color: var(--accent-orange-dark);
    text-decoration: none;
}

body.saje-site-layout .content-card a.btn-neutral,
body.saje-site-layout .content-card a.btn-neutral:hover,
body.saje-site-layout .content-card a.btn-neutral:focus {
    color: var(--text-dark);
    text-decoration: none;
}

body.saje-site-layout .btn,
body.saje-site-layout .btn:hover,
body.saje-site-layout .btn:focus,
body.saje-site-layout .btn-secondary,
body.saje-site-layout .btn-secondary:hover,
body.saje-site-layout .btn-secondary:focus {
    color: var(--white);
    text-decoration: none;
}

body.saje-site-layout .btn.btn-outline,
body.saje-site-layout .btn.btn-outline:hover,
body.saje-site-layout .btn.btn-outline:focus {
    color: var(--accent-orange-dark);
}

body.saje-site-layout .btn.btn-neutral,
body.saje-site-layout .btn.btn-neutral:hover,
body.saje-site-layout .btn.btn-neutral:focus {
    color: var(--text-dark);
}

body.saje-site-layout .nav-link,
body.saje-site-layout .partner-link,
body.saje-site-layout .partner-link:hover,
body.saje-site-layout .logo,
body.saje-site-layout .breadcrumbs a,
body.saje-site-layout .breadcrumbs-search-btn,
body.saje-site-layout .footer-brand-meta a,
body.saje-site-layout .footer-nav-list a,
body.saje-site-layout .footer-legal a,
body.saje-site-layout .footer-credit a,
body.saje-site-layout .sidebar-org-mail,
body.saje-site-layout .skip-link,
body.saje-site-layout .back-to-top {
    text-decoration: none;
}

/*
 * Primary sidebar navigation: white labels on --sidebar-bg on every route.
 * body.saje-site-layout sets color: var(--text-dark); an earlier GP override
 * used color: inherit on .nav-link, which made inactive rows read as gray
 * body text when body.saje-section-harrastekiekko toggled or on inner pages.
 */
body.saje-site-layout #site-sidebar .nav-link,
body.saje-site-layout #site-sidebar .nav-link:hover,
body.saje-site-layout #site-sidebar .nav-link:focus,
body.saje-site-layout #site-sidebar .nav-link:focus-visible,
body.saje-site-layout #site-sidebar .nav-link.active,
body.saje-site-layout #site-sidebar .sidebar-footer-link,
body.saje-site-layout #site-sidebar .sidebar-footer-link:hover,
body.saje-site-layout #site-sidebar .sidebar-footer-link:focus-visible {
    color: var(--white);
}

body.saje-site-layout #site-sidebar .nav-icon {
    color: currentColor;
}

body.saje-site-layout #site-sidebar .logo-link-main,
body.saje-site-layout #site-sidebar .logo-link-hk {
    color: var(--white);
}


body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content button:not(.breadcrumbs-text-scale-btn),
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content html input[type="button"]:not(.breadcrumbs-text-scale-btn),
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content input[type="reset"],
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content input[type="submit"] {
    /* Match .btn: #e65100 on white text fails WCAG AA; body+button beats .btn specificity. */
    background: var(--accent-orange-dark);
    color: var(--white);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content button:not(.breadcrumbs-text-scale-btn):hover,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content html input[type="button"]:not(.breadcrumbs-text-scale-btn):hover,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content input[type="reset"]:hover,
body.saje-site-layout:not(.saje-section-harrastekiekko) .main-content input[type="submit"]:hover {
    background: var(--accent-orange-darker);
    color: var(--white);
}

body.saje-site-layout .submenu-toggle {
    background: unset;
    color: var(--white);
}

body.saje-site-layout .submenu-toggle:hover,
body.saje-site-layout .submenu-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

body.saje-site-layout .table-search-input {
    background: var(--white);
    color: var(--text-dark);
    border-color: var(--gray-border);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .table-search-input:focus {
    border-color: var(--accent-orange);
    background: var(--white);
}

body.admin-bar .sidebar {
    top: 32px;
    height: calc(100vh - 32px);
}

body.admin-bar .sidebar-desktop-reveal {
    top: 47px;
}

@media (max-width: 782px) {
    body.admin-bar .sidebar {
        top: 46px;
        height: calc(100vh - 46px);
    }
    body.admin-bar .sidebar-desktop-reveal {
        top: 61px;
    }
}

/* ==========================================================================
   SAJE Hallinta plugin shortcode styling
   The plugin owns markup and emits .hallinta-* classes. The theme owns
   appearance, so map those classes onto the existing visual system here.
   ========================================================================== */

/* Hero stats grid */
.hallinta-hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 25px;
    margin-bottom: 60px;
}

.hallinta-hero-stat {
    background: var(--white);
    padding: 30px;
    border: 1px solid var(--gray-border);
    text-align: center;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.hallinta-hero-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-orange);
    transform: scaleX(1);
    transform-origin: left;
}

a.hallinta-hero-stat--harrastekiekko {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

a.hallinta-hero-stat--harrastekiekko::before {
    background: var(--hk-accent);
}

a.hallinta-hero-stat--harrastekiekko .hallinta-hero-value {
    color: var(--hk-accent);
}

a.hallinta-hero-stat--harrastekiekko .hallinta-hero-stat__icon .ph-fill {
    color: var(--hk-accent);
}

a.hallinta-hero-stat--harrastekiekko:hover,
a.hallinta-hero-stat--harrastekiekko:focus-visible {
    border-color: var(--hk-accent);
    box-shadow: var(--shadow-md);
}

a.hallinta-hero-stat--harrastekiekko:hover .hallinta-hero-value,
a.hallinta-hero-stat--harrastekiekko:focus-visible .hallinta-hero-value {
    color: var(--hk-accent-dark);
}

a.hallinta-hero-stat--harrastekiekko:hover .hallinta-hero-stat__icon .ph-fill,
a.hallinta-hero-stat--harrastekiekko:focus-visible .hallinta-hero-stat__icon .ph-fill {
    color: var(--hk-accent-dark);
}

a.hallinta-hero-stat--harrastekiekko:focus-visible {
    outline: 2px solid var(--hk-accent);
    outline-offset: 2px;
}

.hallinta-hero-value {
    font-size: 3rem;
    font-weight: 900;
    color: var(--accent-orange);
    line-height: 1.1;
    margin-bottom: 10px;
    overflow-wrap: anywhere;
}

.hallinta-hero-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a1a1a;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Toiminta nostot (service-card grid) */
.hallinta-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 50px;
}

.hallinta-feature-card {
    background: var(--white);
    padding: 30px;
    border: 1px solid var(--gray-border);
}

.hallinta-feature-card h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
    color: var(--text-dark);
    font-weight: 700;
}

.hallinta-feature-card > div,
.hallinta-feature-card p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

/* Ajankohtaista (news list) */
.hallinta-ajankohtaista-arkisto {
    display: grid;
    gap: 1.5rem;
}

.hallinta-ajankohtaista-arkisto__section {
    scroll-margin-top: 90px;
}

.hallinta-ajankohtaista-arkisto__heading {
    margin-bottom: 1rem;
}

.hallinta-ajankohtaista {
    display: grid;
    gap: 15px;
}

.hallinta-tiedote {
    background: var(--white);
    padding: 26px 32px;
    border: 1px solid var(--gray-border);
}

.hallinta-tiedote h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text-dark);
}

.hallinta-tiedote h3 small {
    display: block;
    color: var(--accent-orange-dark);
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 4px;
}

.hallinta-tiedote h3 a.hallinta-tiedote-title-link {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
}

.hallinta-tiedote h3 a.hallinta-tiedote-title-link:hover,
.hallinta-tiedote h3 a.hallinta-tiedote-title-link:focus-visible {
    color: var(--accent-orange);
    text-decoration: underline;
    text-decoration-color: var(--accent-orange);
    text-underline-offset: 2px;
}

.hallinta-tiedote .hallinta-tiedote-body,
.hallinta-tiedote .hallinta-tiedote-excerpt {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

.hallinta-tiedote-excerpt {
    margin: 10px 0 0;
}

.hallinta-tiedote-more {
    margin: 14px 0 0;
    font-size: 0.95rem;
}

.hallinta-tiedote a {
    color: var(--accent-orange-dark);
    text-decoration: underline;
    text-decoration-color: var(--accent-orange-dark);
    text-underline-offset: 2px;
    font-weight: 600;
}

.hallinta-tiedote a:hover {
    text-decoration-thickness: 2px;
}

/* Linkit list */
.hallinta-linkit {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 12px 30px;
    background: var(--white);
    padding: 30px;
    border: 1px solid var(--gray-border);
    min-width: 0;
}

/* Plugin frontend.css loads after the theme; keep card inset on main content. */
body.saje-site-layout #main-content ul.hallinta-linkit {
    padding: 30px;
}

.hallinta-linkit li {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding-left: 0;
    line-height: 1.4;
}

.hallinta-linkit li::before {
    content: "\2713";
    color: var(--accent-orange);
    font-weight: 900;
    flex-shrink: 0;
    font-size: 1.1em;
    line-height: 1;
}

.hallinta-linkit a {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--accent-orange-dark);
    text-decoration: underline;
    text-decoration-color: var(--accent-orange);
    text-underline-offset: 2px;
}

.hallinta-linkit a:hover {
    text-decoration-thickness: 2px;
}

.hallinta-linkit-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

.hallinta-linkit-group {
    background: var(--white);
    border: 1px solid var(--gray-border);
    padding: 1.25rem 1.5rem 1.5rem;
    min-width: 0;
}

.hallinta-linkit-group__title {
    margin: 0 0 0.75rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-dark);
}

.hallinta-linkit-wrap .hallinta-linkit {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: unset;
    padding: 0;
    border: none;
    background: transparent;
}

.hallinta-linkit-wrap .hallinta-linkit li {
    border-bottom: 1px solid var(--gray-border);
    padding: 0.5rem 0;
}

.hallinta-linkit-wrap .hallinta-linkit li:last-child {
    border-bottom: none;
}

.hallinta-linkit__note {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

body.saje-site-layout #main-content .hallinta-linkit-wrap .hallinta-linkit {
    padding: 0;
}

/* Jäsenyys */
.hallinta-jasenyys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.hallinta-jasenyys-grid > div {
    background: var(--white);
    padding: 30px;
    border: 1px solid var(--gray-border);
}

.hallinta-jasenyys-grid h3 {
    margin-bottom: 16px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-dark);
}

.hallinta-bullet-list {
    list-style: none;
    padding: 0;
}

.hallinta-bullet-list li {
    margin-bottom: 10px;
}

.hallinta-bullet-list li::before {
    content: "\2713";
    color: var(--accent-orange);
    font-weight: 900;
    margin-right: 12px;
    font-size: 1.1em;
}

.hallinta-fees-list {
    list-style: none;
    padding: 0;
}

.hallinta-fees-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--gray-border);
    color: var(--text-light);
}

.hallinta-fees-list li:last-child {
    border-bottom: none;
}

.hallinta-fees-list strong {
    color: var(--accent-orange-dark);
}

.hallinta-jasenyys-cf7 {
    margin-top: 28px;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--white);
    border: 1px solid var(--gray-border);
}

.hallinta-jasenyys-cf7__heading {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
}

.hallinta-jasenyys-cf7 .wpcf7-form label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--text-dark);
}

.hallinta-jasenyys-cf7 .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 1rem;
}

.hallinta-jasenyys-cf7 .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.hallinta-jasenyys-cf7 .wpcf7-form select,
.hallinta-jasenyys-cf7 .wpcf7-form textarea {
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
}

.hallinta-jasenyys-cf7 .wpcf7-response-output {
    margin: 1rem 0 0;
}

#jasenet .hallinta-jasenyys-cf7 {
    scroll-margin-top: 5rem;
}

/* Hallitus + Yhteystiedot (#yhteystiedot) */
#yhteystiedot .content-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: clamp(1.25rem, 3vw, 2rem);
    align-items: stretch;
}

#yhteystiedot .content-grid > .content-card {
    border-radius: 0;
    box-shadow: var(--shadow-sm);
    border-color: #e6e6e6;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.hallinta-hallitus {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.hallinta-hallitus__chair {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--gray-border);
}

.hallinta-hallitus__name {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-dark);
}

.hallinta-hallitus__role {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent-orange-dark);
}

.hallinta-hallitus__list-heading {
    margin: 0 0 0.65rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-light);
}

.hallinta-hallitus__members {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hallinta-hallitus__members li {
    position: relative;
    padding: 0.65rem 0 0.65rem 1rem;
    border-bottom: 1px solid #efefef;
    line-height: 1.45;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.hallinta-hallitus__members li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.95rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-orange);
}

.hallinta-hallitus__members li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.hallinta-hallitus__area {
    margin: 1.25rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--gray-border);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text-light);
}

.hallinta-hallitus__area-label {
    display: block;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hallinta-yhteystiedot {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.hallinta-yhteystiedot__intro {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--gray-border);
}

.hallinta-yhteystiedot__intro h2,
.hallinta-yhteystiedot__intro h3,
.hallinta-yhteystiedot__kerhokouluttaja h3 {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-dark);
}

#kerhokouluttaja {
    scroll-margin-top: 5rem;
}

.hallinta-yhteystiedot__kerhokouluttaja {
    margin-top: 0.25rem;
}

.hallinta-yhteystiedot__intro p,
.hallinta-yhteystiedot__kerhokouluttaja p {
    margin: 0 0 0.65rem;
    line-height: 1.6;
    color: var(--text-light);
    font-size: 0.95rem;
}

.hallinta-yhteystiedot__intro p:last-child,
.hallinta-yhteystiedot__kerhokouluttaja p:last-child {
    margin-bottom: 0;
}

.hallinta-yhteystiedot__intro .table-wrapper,
.hallinta-yhteystiedot__kerhokouluttaja .table-wrapper {
    margin: 0 0 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hallinta-yhteystiedot__intro .hallinta-yhteystiedot-table,
.hallinta-yhteystiedot__kerhokouluttaja .hallinta-yhteystiedot-table {
    width: 100%;
    min-width: 18rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.hallinta-yhteystiedot__intro .hallinta-yhteystiedot-table th,
.hallinta-yhteystiedot__intro .hallinta-yhteystiedot-table td,
.hallinta-yhteystiedot__kerhokouluttaja .hallinta-yhteystiedot-table th,
.hallinta-yhteystiedot__kerhokouluttaja .hallinta-yhteystiedot-table td {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--gray-border);
    text-align: left;
    vertical-align: top;
}

.hallinta-yhteystiedot__intro .hallinta-yhteystiedot-table thead th,
.hallinta-yhteystiedot__kerhokouluttaja .hallinta-yhteystiedot-table thead th {
    background: var(--gray-light);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
}

.hallinta-yhteystiedot__details {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) 1fr;
    column-gap: 1rem;
    row-gap: 0.85rem;
    margin: 0;
}

.hallinta-yhteystiedot__details dt {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-light);
    line-height: 1.4;
}

.hallinta-yhteystiedot__details dd {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-dark);
    word-break: break-word;
}

.hallinta-yhteystiedot__details a {
    color: var(--accent-orange-dark);
    text-decoration: underline;
    text-decoration-color: var(--accent-orange);
    text-underline-offset: 2px;
    font-weight: 600;
}

.hallinta-yhteystiedot__details a:hover {
    text-decoration-thickness: 2px;
}

@media (max-width: 480px) {
    .hallinta-yhteystiedot__details {
        grid-template-columns: 1fr;
        row-gap: 0.15rem;
    }

    .hallinta-yhteystiedot__details dt {
        margin-top: 0.65rem;
    }

    .hallinta-yhteystiedot__details dt:first-child {
        margin-top: 0;
    }

    .hallinta-yhteystiedot__details dd {
        margin-bottom: 0.35rem;
    }
}

/* Legacy: plugin markup without BEM classes (older cached pages) */
.hallinta-hallitus h3:not(.hallinta-hallitus__name),
.hallinta-yhteystiedot h3,
.hallinta-yhteystiedot h2 {
    margin-bottom: 16px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-dark);
}

.hallinta-hallitus h4:not(.hallinta-hallitus__list-heading) {
    margin: 16px 0 8px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-dark);
}

.hallinta-hallitus p:not(.hallinta-hallitus__role):not(.hallinta-hallitus__area),
.hallinta-yhteystiedot p {
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 10px;
}

.hallinta-hallitus a,
.hallinta-yhteystiedot a {
    color: var(--accent-orange-dark);
    text-decoration: underline;
    text-decoration-color: var(--accent-orange);
    text-underline-offset: 2px;
}

/* Harraste games and results (shortcode lists) */
.hallinta-harraste-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--gray-border);
}

.hallinta-harraste-card {
    margin: 0;
    padding: 14px 0 16px;
    border: 0;
    border-bottom: 1px solid var(--gray-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.hallinta-harraste-card:last-child {
    border-bottom: none;
}

.hallinta-harraste-card strong {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    letter-spacing: -0.01em;
    color: var(--text-dark);
    margin: 0 0 6px;
}

.hallinta-harraste-card > div {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-light);
}

/* Inner pages: distinct treatment for results vs fixtures (see --results / --fixtures on list) */
.entry-content .hallinta-harraste-list--results .hallinta-harraste-card > div:nth-of-type(1) {
    font-size: 1.0625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.entry-content .hallinta-harraste-list--results .hallinta-harraste-card > div:nth-of-type(2) {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
}

.entry-content .hallinta-harraste-list--fixtures .hallinta-harraste-card > div:nth-of-type(1) {
    color: var(--text-light);
    margin-bottom: 2px;
}

.entry-content .hallinta-harraste-list--fixtures .hallinta-harraste-card > div:nth-of-type(2) {
    color: var(--text-dark);
}

/* Harraste joukkueet (team badges) */
.hallinta-harraste-joukkueet {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.hallinta-harraste-joukkueet li {
    background: var(--dark-black);
    color: var(--white);
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
}

.hallinta-harraste-joukkueet li:nth-child(odd) {
    background: var(--accent-orange);
}

body.saje-section-harrastekiekko .hallinta-harraste-intro a {
    color: var(--hk-accent);
}

body.saje-section-harrastekiekko .hallinta-harraste-intro a:hover {
    color: var(--hk-accent-dark);
}

body.saje-section-harrastekiekko .entry-content .hallinta-harraste-list--fixtures .hallinta-harraste-card > div:nth-of-type(1) {
    color: var(--hk-accent-dark);
}

body.saje-section-harrastekiekko .hallinta-harraste-joukkueet li:nth-child(odd) {
    background: var(--hk-accent);
}

body.saje-section-harrastekiekko #hk-tulokset-ottelut,
body.saje-section-harrastekiekko #hk-sarjataulukko-heading,
body.saje-section-harrastekiekko #sarjataulukko,
body.saje-section-harrastekiekko [id^="hk-sarjataulukko-"] {
    scroll-margin-top: 6rem;
}

/*
 * Tulokset / Sarjaohjelma bundles inside .entry-content.content-card:
 * season chips, direct-link panel, legend, Lohko headings, schedule heading — align with
 * .content-card / .table-wrapper tokens (HK accent throughout).
 */
body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-sivu,
body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarjaohjelma-sivu,
body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-sivu {
    margin-top: 0;
    margin-bottom: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-sivu > .hallinta-hk-kausi-nav--pills,
body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-toolbar .hallinta-hk-kausi-nav--pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 1.35rem;
    padding: 0 0 1.25rem;
    border-bottom: 1px solid var(--gray-border);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-sivu > .hallinta-hk-kausi-nav--select,
body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-toolbar .hallinta-hk-kausi-nav--select {
    margin: 0 0 1.35rem;
    padding: 0 0 1.25rem;
    border-bottom: 1px solid var(--gray-border);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0 0 1.15rem;
    padding: 0 0 1.15rem;
    border-bottom: 1px solid var(--gray-border);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-toolbar .hallinta-hk-kausi-nav--pills,
body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-toolbar .hallinta-hk-kausi-nav--select {
    margin: 0;
    padding: 0;
    border-bottom: none;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-jump-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.55rem;
    margin: 0.85rem 0 0;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-jump-nav__label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-light);
    margin-right: 0.15rem;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-jump-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.38rem 0.8rem;
    border: 1px solid rgba(21, 101, 192, 0.2);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--white);
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-jump-nav__link:hover,
body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-jump-nav__link:focus-visible {
    border-color: var(--hk-accent);
    color: var(--hk-accent-dark);
    outline: none;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-block--results {
    margin: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-block--standings {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--gray-border);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarjataulukko-controls {
    margin: 0 0 1.15rem;
    padding: 0.85rem 1rem;
    background: var(--gray-light);
    border: 1px solid var(--gray-border);
    border-left: 4px solid var(--hk-accent);
    border-radius: 2px;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarjataulukko-controls .hallinta-hk-kausi-nav--pills,
body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarjataulukko-controls .hallinta-hk-kausi-nav--select {
    margin: 0;
    padding: 0;
    border-bottom: none;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarjataulukko-controls .hallinta-hk-kausi-form {
    margin: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-section-heading {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1rem;
    padding-bottom: 0.4rem;
    border-bottom: 3px solid var(--hk-accent);
    font-size: clamp(1.25rem, 2vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hk-ink);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-section-heading .ph-fill,
body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-lohko-otsikko .ph-fill,
body.saje-site-layout.saje-section-harrastekiekko .entry-content h2.hallinta-hk-tulokset-otsikko .ph-fill {
    font-size: 1.15rem;
    color: var(--hk-accent);
    flex-shrink: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-lohko-otsikko,
body.saje-site-layout.saje-section-harrastekiekko .entry-content h2.hallinta-hk-tulokset-otsikko {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-jump-nav__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-jump-nav__label .ph-fill {
    color: var(--hk-accent-dark);
    font-size: 0.95rem;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-jump-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-jump-nav__link .ph-fill {
    font-size: 0.95rem;
    color: var(--hk-accent);
    flex-shrink: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-select-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-select-label .ph-fill {
    color: var(--hk-accent);
    font-size: 1rem;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-direct__summary {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-direct__summary .ph-fill {
    color: var(--hk-accent);
    flex-shrink: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarja-tauolla {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarja-tauolla .ph-fill {
    font-size: 1.25rem;
    color: var(--hk-accent);
    flex-shrink: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-harraste-joukkueet li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-harraste-joukkueet li .ph-fill {
    color: var(--hk-accent);
    flex-shrink: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-harraste-joukkueet-table td:first-child {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-harraste-joukkueet-table td:first-child .ph-fill {
    color: var(--hk-accent);
    flex-shrink: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .harrastekiekko-subnav {
    margin-bottom: 1.25rem;
    padding: 0;
    overflow: hidden;
}

body.saje-site-layout.saje-section-harrastekiekko .harrastekiekko-subnav .harrastekiekko-legacy-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0.65rem 1rem;
}

body.saje-site-layout.saje-section-harrastekiekko .harrastekiekko-subnav .harrastekiekko-legacy-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid rgba(21, 101, 192, 0.2);
    border-radius: 2px;
    background: var(--gray-light);
    color: var(--hk-ink);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.saje-site-layout.saje-section-harrastekiekko .harrastekiekko-subnav .harrastekiekko-legacy-nav a:hover,
body.saje-site-layout.saje-section-harrastekiekko .harrastekiekko-subnav .harrastekiekko-legacy-nav a:focus-visible {
    background: var(--hk-accent);
    border-color: var(--hk-accent-dark);
    color: var(--white);
}

body.saje-site-layout.saje-section-harrastekiekko .harrastekiekko-subnav .harrastekiekko-legacy-nav a .ph-fill {
    font-size: 1rem;
    color: var(--hk-accent);
    flex-shrink: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .harrastekiekko-subnav .harrastekiekko-legacy-nav a:hover .ph-fill,
body.saje-site-layout.saje-section-harrastekiekko .harrastekiekko-subnav .harrastekiekko-legacy-nav a:focus-visible .ph-fill {
    color: var(--white);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarjataulukko-grid {
    /* One Lohko table per row, each full width (never side by side). */
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarjataulukko-lohko {
    min-width: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarjataulukko-lohko .hallinta-hk-lohko-otsikko {
    margin-top: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-nav--select .hallinta-hk-kausi-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-select-label {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-dark);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-select {
    min-width: min(100%, 18rem);
    max-width: 100%;
    padding: 0.5rem 0.65rem;
    font-size: 0.9rem;
    border: 1px solid var(--gray-border);
    border-radius: 0;
    background: var(--white);
    color: var(--text-dark);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-form__submit {
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid var(--hk-accent);
    background: var(--gray-light);
    color: var(--hk-accent-dark);
    cursor: pointer;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(21, 101, 192, 0.2);
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    font-size: 0.875rem;
    text-decoration: none;
    font-weight: 600;
    color: var(--text-dark);
    background: var(--gray-light);
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-nav__link:hover,
body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-nav__link:focus-visible {
    border-color: var(--hk-accent);
    color: var(--hk-accent-dark);
    outline: none;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-nav__link--active {
    border-color: var(--hk-accent);
    background: var(--hk-accent);
    color: var(--white);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-nav__link--active:hover,
body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-nav__link--active:focus-visible {
    border-color: var(--hk-accent-dark);
    background: var(--hk-accent-dark);
    color: var(--white);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-direct {
    margin: 0 0 1rem;
    padding: 0.65rem 0.9rem;
    background: var(--gray-light);
    border: 1px solid var(--gray-border);
    border-left: 4px solid var(--hk-accent);
    border-radius: 2px;
    font-size: 0.9rem;
    line-height: 1.55;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-direct__summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-dark);
    list-style-position: inside;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-direct__summary:hover,
body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-direct__summary:focus-visible {
    color: var(--hk-accent-dark);
    outline: none;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-direct__body {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-border);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-direct p {
    margin: 0 0 0.7rem;
    color: var(--text-light);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-direct p:last-child {
    margin-bottom: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-direct strong {
    color: var(--text-dark);
    font-weight: 700;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-direct a {
    word-break: break-word;
    overflow-wrap: anywhere;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(21, 101, 192, 0.45);
    text-underline-offset: 2px;
    color: var(--hk-accent);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-direct a:hover,
body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-direct a:focus-visible {
    text-decoration-thickness: 2px;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarja-tauolla {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-dark);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarjaohjelma-sivu .harrastekiekko-legacy-ottelut {
    width: 100%;
    margin: 0 0 1.25rem;
}

/* Harrastekiekko rich-text tabs (Säännöt, Info): last-updated notice from Hallinta (below content). */
.hallinta-content-updated {
    margin: 1.25rem 0 0;
    padding: 0.65rem 0.9rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-light);
    background: var(--gray-light);
    border: 1px solid var(--gray-border);
    border-left: 3px solid var(--gray-border);
}

.hallinta-content-updated time {
    font-weight: 500;
}

.hallinta-content-updated--recent {
    color: var(--text-dark);
    background: #e8f1fb;
    border-color: rgba(21, 101, 192, 0.28);
    border-left-color: var(--hk-accent);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-content-updated--recent {
    background: rgba(21, 101, 192, 0.08);
    border-left-color: var(--hk-accent);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarja-legend {
    margin: 0 0 1.35rem;
    padding: 0.85rem 1rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-light);
    background: var(--white);
    border: 1px solid var(--gray-border);
    border-left: 4px solid var(--hk-accent);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-sarja-legend strong {
    color: var(--text-dark);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-lohko-otsikko {
    margin-top: 1.25rem;
    margin-bottom: 0.65rem;
    padding: 0.5rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--hk-ink);
    color: var(--hk-paper);
    border-bottom: 3px solid var(--hk-accent);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-lohko-otsikko:first-of-type {
    margin-top: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-kausi-sivu > .table-wrapper {
    margin-bottom: 0.25rem;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content h2.hallinta-hk-tulokset-otsikko {
    margin: 1.25rem 0 0.65rem;
    padding: 0.5rem 1rem;
    border-bottom: 3px solid var(--hk-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--hk-ink);
    color: var(--hk-paper);
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content h2.hallinta-hk-tulokset-otsikko:first-of-type {
    margin-top: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .entry-content .hallinta-hk-tulokset-block--results > .table-wrapper {
    margin-bottom: 0;
}

/* Harraste sarjaohjelma + sarjataulukko tables */
.hallinta-harraste-table,
.hallinta-nimeamiset-table,
.hallinta-nimeamiset-toimitsijat-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
}

.hallinta-nimeamiset-match-row--alt td {
    background: rgba(248, 248, 248, 0.35);
}

.hallinta-sponsorit {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

.hallinta-sponsori {
    background: var(--white);
    color: var(--text-dark);
    padding: 20px 30px;
    border: 2px solid var(--gray-border);
    font-weight: 500;
    transition: border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 200px;
    min-height: 160px;
    width: 200px;
}

.hallinta-sponsori:hover {
    border-color: var(--accent-orange);
}

.hallinta-sponsori.hallinta-sponsori--dark-bg {
    background: #171717;
    border-color: #3a3a3a;
    color: rgba(255, 255, 255, 0.92);
}

.hallinta-sponsori.hallinta-sponsori--dark-bg:hover {
    border-color: var(--accent-orange);
}

.hallinta-sponsori a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.hallinta-sponsori img {
    display: block;
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.hallinta-sponsori img.hallinta-sponsori__logo {
    margin-inline: auto;
}

@media (max-width: 768px) {
    .hallinta-sponsorit {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .hallinta-sponsori {
        width: 100%;
        max-width: 200px;
        min-width: 180px;
    }

    .hallinta-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .hallinta-hero-stat {
        padding: 20px;
    }

    .hallinta-hero-value {
        font-size: 2.5rem;
    }

    .hallinta-feature-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .hallinta-feature-card {
        padding: 25px;
    }

    .hallinta-jasenyys-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    body.saje-site-layout #main-content ul.hallinta-linkit {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    body.saje-site-layout #main-content .hallinta-linkit-wrap ul.hallinta-linkit {
        padding: 0;
    }
}

/* ==========================================================================
   Generic article / archive / search / 404 templates
   These templates use the persistent sidebar layout. Wrappers combine
   .section.active with .page-article (or .single-post-article) so the same
   padding and layout rules apply consistently.
   ========================================================================== */

.page-article,
.single-post-article {
    padding-top: 40px;
    padding-bottom: 40px;
}

.page-article .entry-content,
.single-post-article .entry-content {
    margin-top: 24px;
    line-height: 1.8;
}

/* Auto TOC (the_content); label is <p> to avoid an extra heading in the outline */
.saje-toc {
    background: var(--white);
    border: 1px solid var(--gray-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.saje-toc__label {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.saje-toc__list,
.saje-toc__sublist {
    margin: 0;
    padding-left: 1.25rem;
    list-style: decimal;
}

.saje-toc__sublist {
    margin-top: 0.35rem;
    list-style: lower-alpha;
}

.saje-toc__list > li,
.saje-toc__sublist > li {
    margin-top: 0.35rem;
}

.saje-toc a {
    color: var(--accent-orange-dark, #bf360c);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.saje-toc a:hover,
.saje-toc a:focus-visible {
    color: var(--accent-orange-darker, #8c2a09);
}

.page-article .entry-content > * + *,
.single-post-article .entry-content > * + * {
    margin-top: 1em;
}

.page-article .entry-content h2,
.page-article .entry-content h3,
.single-post-article .entry-content h2,
.single-post-article .entry-content h3 {
    margin-top: 1.5em;
    scroll-margin-top: 5rem;
}

.page-article .entry-content img,
.single-post-article .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.page-article .entry-content blockquote,
.single-post-article .entry-content blockquote {
    border: none;
    border-top: 4px solid var(--gray-border);
    padding: 0.5em 1em;
    margin: 1em 0;
    background: var(--gray-light);
    font-style: italic;
}

.page-article .entry-content ul,
.page-article .entry-content ol,
.single-post-article .entry-content ul,
.single-post-article .entry-content ol {
    padding-left: 1.5em;
}

.page-article .entry-content h4,
.page-article .entry-content h5,
.page-article .entry-content h6,
.single-post-article .entry-content h4,
.single-post-article .entry-content h5,
.single-post-article .entry-content h6 {
    margin-top: 1.35em;
    margin-bottom: 0.5em;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.35;
    scroll-margin-top: 5rem;
}

.single-post-article .page-subtitle {
    margin-bottom: 0;
}

.single-post-article .page-subtitle time {
    font-weight: 600;
    color: var(--accent-orange-dark);
    letter-spacing: 0.03em;
}

.single-post-article .header-image-wrapper + .entry-content {
    margin-top: 20px;
}

/* Block editor blocks inside page / single article bodies */
.page-article .entry-content .wp-block-group,
.single-post-article .entry-content .wp-block-group {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.page-article .entry-content .wp-block-image,
.page-article .entry-content .wp-block-embed,
.single-post-article .entry-content .wp-block-image,
.single-post-article .entry-content .wp-block-embed {
    margin: 1.35em 0;
}

.page-article .entry-content .wp-block-image figcaption,
.page-article .entry-content .wp-block-video figcaption,
.page-article .entry-content .wp-block-audio figcaption,
.page-article .entry-content .blocks-gallery-caption,
.single-post-article .entry-content .wp-block-image figcaption,
.single-post-article .entry-content .wp-block-video figcaption,
.single-post-article .entry-content .wp-block-audio figcaption,
.single-post-article .entry-content .blocks-gallery-caption {
    font-size: 0.875rem;
    color: var(--text-light);
    text-align: center;
    margin-top: 0.5em;
    line-height: 1.45;
}

.page-article .entry-content .wp-block-quote,
.page-article .entry-content .wp-block-pullquote,
.single-post-article .entry-content .wp-block-quote,
.single-post-article .entry-content .wp-block-pullquote {
    border: none;
    border-left: 4px solid var(--accent-orange-dark);
    padding: 0.65em 1em 0.65em 1.15em;
    margin: 1.25em 0;
    background: var(--gray-light);
}

.page-article .entry-content .wp-block-pullquote blockquote,
.single-post-article .entry-content .wp-block-pullquote blockquote {
    border: none;
    border-top: none;
    padding: 0;
    margin: 0;
    background: transparent;
    font-style: italic;
}

.page-article .entry-content .wp-block-quote cite,
.page-article .entry-content .wp-block-pullquote cite,
.single-post-article .entry-content .wp-block-quote cite,
.single-post-article .entry-content .wp-block-pullquote cite {
    font-style: normal;
    font-size: 0.9rem;
    color: var(--text-light);
    display: block;
    margin-top: 0.5em;
}

.page-article .entry-content .wp-block-separator,
.single-post-article .entry-content .wp-block-separator {
    border: none;
    border-top: 1px solid var(--gray-border);
    margin: 2em auto;
    max-width: 100px;
}

.page-article .entry-content .wp-block-separator.is-style-wide,
.single-post-article .entry-content .wp-block-separator.is-style-wide {
    max-width: 100%;
}

.page-article .entry-content .wp-block-table,
.single-post-article .entry-content .wp-block-table {
    margin: 1.35em 0;
}

.page-article .entry-content .wp-block-table table,
.single-post-article .entry-content .wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.95rem;
}

.page-article .entry-content .wp-block-table th,
.page-article .entry-content .wp-block-table td,
.single-post-article .entry-content .wp-block-table th,
.single-post-article .entry-content .wp-block-table td {
    border: 1px solid var(--gray-border);
    padding: 10px 12px;
}

.page-article .entry-content .wp-block-table th,
.single-post-article .entry-content .wp-block-table th {
    background: var(--gray-light);
    font-weight: 600;
    text-align: left;
}

.page-article .entry-content .wp-block-code,
.page-article .entry-content pre.wp-block-preformatted,
.single-post-article .entry-content .wp-block-code,
.single-post-article .entry-content pre.wp-block-preformatted {
    margin: 1.15em 0;
    padding: 1em 1.1em;
    background: var(--gray-light);
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    font-size: 0.9rem;
    overflow-x: auto;
    line-height: 1.55;
}

.page-article .entry-content :not(pre) > code,
.single-post-article .entry-content :not(pre) > code {
    padding: 0.12em 0.35em;
    background: var(--gray-light);
    border-radius: 4px;
    font-size: 0.9em;
    border: 1px solid var(--gray-border);
}

.page-article .entry-content .alignwide,
.single-post-article .entry-content .alignwide {
    max-width: min(100%, 1100px);
    margin-left: auto;
    margin-right: auto;
}

.page-article .entry-content .wp-block-columns,
.single-post-article .entry-content .wp-block-columns {
    margin: 1.15em 0;
    gap: 1.25rem;
}

.single-post-article .post-navigation a:focus-visible {
    outline: 2px solid var(--accent-orange);
    outline-offset: 2px;
    border-radius: 2px;
}

.search-term {
    color: var(--accent-orange-dark);
}

.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-border);
    flex-wrap: wrap;
}

.post-navigation a {
    color: var(--accent-orange-dark);
    text-decoration: none;
    font-weight: 500;
}

.post-navigation a:hover {
    color: var(--accent-orange);
    text-decoration: underline;
}

.post-navigation .nav-label {
    display: block;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-light);
    font-weight: 600;
}

.pagination,
.page-links {
    margin-top: 30px;
    text-align: center;
}

.pagination .nav-links,
.page-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.pagination .nav-links a,
.pagination .nav-links .current,
.page-links a,
.page-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border-radius: 6px;
    background: var(--white);
    color: var(--text-dark);
    border: 1px solid var(--gray-border);
    text-decoration: none;
    font-weight: 500;
}

.pagination .nav-links a:hover,
.page-links a:hover {
    background: var(--accent-orange-light);
    color: var(--white);
    border-color: var(--accent-orange-light);
}

.pagination .nav-links .current,
.page-links > span:not(.screen-reader-text) {
    background: var(--accent-orange);
    color: var(--white);
    border-color: var(--accent-orange);
}

.error-404 .btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    background: var(--accent-orange-dark);
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 20px;
}

.error-404 .btn:hover,
.error-404 .btn:focus {
    background: var(--accent-orange-darker);
}

.search-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.search-form .search-field {
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    background: var(--white);
    color: var(--text-dark);
    font-size: 1rem;
}

.search-form .search-field:focus {
    outline: 2px solid var(--accent-orange);
    border-color: var(--accent-orange);
}

.search-form .search-submit {
    padding: 10px 20px;
    border-radius: 6px;
    border: none;
    background: var(--accent-orange);
    color: var(--white);
    cursor: pointer;
    font-weight: 600;
}

.search-form .search-submit:hover {
    background: var(--accent-orange-dark);
}

/* Rich layout when using theme searchform.php (.search-form--site) */
.search-form.search-form--site {
    display: block;
}

.search-form--site .search-form__inner {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
}

.search-form--site .search-form__label {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-dark);
    text-align: left;
}

.search-form--site .search-form__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.search-form--site .search-form__field-wrap {
    flex: 1;
    min-width: min(100%, 240px);
    position: relative;
}

.search-form--site .search-field {
    min-width: min(100%, 240px);
    width: 100%;
}

.saje-live-search__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    background: var(--white);
    color: var(--text-dark);
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    max-height: min(60vh, 320px);
    overflow-y: auto;
}

.saje-live-search__list[hidden] {
    display: none !important;
}

.saje-live-search__option {
    margin: 0;
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--gray-border);
}

.saje-live-search__option:last-child {
    border-bottom: none;
}

.saje-live-search__option:hover,
.saje-live-search__option:focus {
    outline: none;
    background: rgba(230, 126, 34, 0.08);
}

.saje-live-search__option[aria-selected="true"] {
    background: rgba(230, 126, 34, 0.14);
}

.saje-live-search__type {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-light);
    margin-bottom: 0.15rem;
}

.saje-live-search__title {
    display: block;
    font-size: 0.95rem;
    line-height: 1.35;
}

.saje-live-search__meta {
    display: block;
    font-size: 0.78rem;
    color: var(--text-light);
    margin-top: 0.2rem;
}

.search-form--site .search-submit {
    background: var(--accent-orange-dark);
}

.search-form--site .search-submit:hover {
    background: var(--accent-orange-darker);
}

.search-form-card {
    margin-bottom: 1.5rem;
}

.search-form-intro {
    margin: 0 0 1rem;
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.5;
}

.search-results-summary {
    margin: 0 0 1rem;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.9375rem;
}

.search-results .search-results-list {
    margin-top: 0.5rem;
}

.search-page-title-sep {
    font-weight: 400;
    color: var(--text-light);
    margin: 0 0.15em;
}

.search-empty__lead {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
    color: var(--text-dark);
}

.search-empty__hint {
    margin: 0 0 1.25rem;
    color: var(--text-light);
    line-height: 1.55;
}

.search-empty__cta {
    margin: 0;
}

@media (max-width: 480px) {
    .search-form--site .search-form__controls {
        flex-direction: column;
    }

    .search-form--site .search-field {
        width: 100%;
        min-width: 0;
    }

    .search-form--site .search-submit {
        width: 100%;
    }
}

.comments-area {
    margin-top: 40px;
}

.comments-area.content-card {
    border: none;
    box-shadow: none;
}

.comments-area #comments,
.comments-area #comments ol,
.comments-area #comments ul,
.comments-area #comments li.comment,
.comments-area #respond,
.comments-area .comment-respond {
    border: none !important;
    box-shadow: none !important;
}

.comments-area #comments {
    outline: none;
    background: var(--gray-light);
    padding: 14px 16px;
}

.comments-area #comments > * + * {
    margin-top: 1.5rem;
}

.comments-area #comments > .comment-respond:first-child {
    margin-top: 0;
}

.comments-area .comments-title,
.comments-area #reply-title {
    margin: 0 0 0.75rem;
    padding-bottom: 0;
    border: none;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-dark);
}

.comments-area #reply-title {
    margin-bottom: 1rem;
}

.comments-area #reply-title small {
    margin-left: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
}

.comments-area .comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comments-area .comment-list .children {
    list-style: none;
    margin: 12px 0 0 0;
    padding: 0 0 0 16px;
    border: none;
}

@media (min-width: 768px) {
    .comments-area .comment-list .children {
        margin-left: 12px;
        padding-left: 24px;
    }
}

.comments-area .comment-list > .comment,
.comments-area .comment-list .children > .comment {
    margin: 0 0 15px;
}

.comments-area .comment-list > .comment:last-child,
.comments-area .comment-list .children > .comment:last-child {
    margin-bottom: 0;
}

.comments-area .comment-body {
    padding: 20px 0;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.comments-area footer.comment-meta,
.comments-area .comment-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    margin: 0 0 12px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    font-size: 0.9rem;
}

.comments-area #comments footer.comment-meta {
    background-color: transparent !important;
    background-image: none !important;
    border-width: 0 !important;
    border-style: none !important;
    box-shadow: none !important;
}

.comments-area .comment-author {
    font-weight: 700;
    color: var(--text-dark);
}

.comments-area .comment-author .avatar {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    margin-bottom: 0;
    border-radius: 50%;
    border: none;
}

.comments-area .comment-author .fn,
.comments-area .comment-author .fn a {
    color: var(--text-dark);
    text-decoration: none;
    font-style: normal;
}

.comments-area .comment-author .fn a:hover {
    color: var(--accent-orange-dark);
    text-decoration: underline;
}

.comments-area .comment-metadata {
    color: var(--text-light);
    font-size: 0.875rem;
    font-weight: 500;
}

.comments-area .comment-metadata a {
    color: inherit;
}

.comments-area .comment-metadata time {
    color: var(--accent-orange-dark);
    font-weight: 600;
}

.comments-area .comment-metadata .edit-link {
    margin-left: 0.25rem;
}

.comments-area .comment-content {
    clear: both;
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.75;
}

.comments-area .comment-content > *:last-child {
    margin-bottom: 0;
}

.comments-area .comment-content a {
    color: var(--accent-orange-dark);
    font-weight: 600;
}

.comments-area .reply {
    margin-top: 12px;
}

.comments-area .reply a,
.comments-area .comment-form .form-submit input {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    cursor: pointer;
}

.comments-area .reply a {
    border: none;
    color: var(--accent-orange-dark);
    background: transparent;
    text-decoration: underline;
    text-decoration-color: var(--accent-orange);
    text-underline-offset: 2px;
}

.comments-area .reply a:hover,
.comments-area .reply a:focus-visible {
    background: transparent;
    color: var(--accent-orange);
    outline: none;
    text-decoration-thickness: 2px;
}

.comments-area .comment-awaiting-moderation {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-orange-dark);
    background: transparent;
}

.comments-area .no-comments {
    margin: 0;
    padding: 16px 0;
    border: none;
    color: var(--text-light);
    font-size: 0.95rem;
}

.comments-area .comment-navigation,
.comments-area .comments-pagination {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border: none;
}

.comments-area .comment-navigation .nav-links,
.comments-area .comments-pagination .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.comments-area .comment-respond .logged-in-as,
.comments-area .comment-respond .comment-notes,
.comments-area .comment-respond .required-field-message {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.comments-area .comment-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comments-area .comment-form p {
    margin: 0;
}

.comments-area .comment-form label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-dark);
}

.comments-area .comment-form input:not([type="checkbox"]):not([type="submit"]),
.comments-area .comment-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    background: var(--white);
    color: var(--text-dark);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
}

.comments-area .comment-form textarea {
    min-height: 140px;
    resize: vertical;
}

.comments-area .comment-form input:focus,
.comments-area .comment-form textarea:focus {
    outline: 2px solid var(--accent-orange);
    outline-offset: 1px;
    border-color: var(--accent-orange);
}

.comments-area .comment-form .cookies-consent label,
.comments-area .comment-form .comment-form-cookies-consent label {
    display: inline;
    font-weight: 500;
    margin-left: 0.35rem;
}

.comments-area .comment-form .cookies-consent,
.comments-area .comment-form .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
}

.comments-area .comment-form .form-submit {
    margin-top: 0.25rem;
}

.comments-area .comment-form .form-submit input[type="submit"] {
    padding: 10px 22px;
    border: none;
    background: var(--accent-orange-darker);
    color: var(--white);
    font-weight: 600;
}

.comments-area .comment-form .form-submit input[type="submit"]:hover {
    background: var(--accent-orange-dark);
}

.comments-area .comment-form .form-submit input[type="submit"]:focus-visible {
    outline: 2px solid var(--accent-orange);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .post-navigation {
        flex-direction: column;
    }

    .comments-area .comment-list .children {
        margin-left: 0;
        padding-left: 12px;
    }
}


/* Print Styles */
@media print {
    .sidebar,
    .mobile-toggle,
    .mobile-overlay,
    .sidebar-desktop-reveal,
    .breadcrumbs-bar,
    .partners-section {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    body.sidebar-desktop-collapsed .main-content::before {
        display: none !important;
    }

    .section {
        display: block !important;
        page-break-inside: avoid;
    }

    body {
        background: white !important;
    }

    body::before {
        display: none;
    }

    a {
        color: var(--text-dark) !important;
    }
}

/* =====================================================================
   Sub-menu support (sidebar primary nav, depth 2)
   ===================================================================== */

.nav-links .menu-item-has-children {
    position: relative;
}

.submenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 0;
    background: unset;
    border: 0;
    color: var(--white);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sidebar-nav-link-radius);
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.submenu-toggle:hover,
.submenu-toggle:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    outline: 0;
}

.submenu-toggle:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: -2px;
}

.submenu-chevron {
    transition: transform 0.15s ease;
    font-size: 1.05rem;
    line-height: 1;
}

/* Fallback when icon font class fails/missing: draw plain chevron. */
.submenu-toggle .submenu-chevron:empty::before {
    content: "▾";
    display: inline-block;
    font-size: 1rem;
}

.menu-item-has-children.submenu-open > .submenu-toggle .submenu-chevron {
    transform: rotate(180deg);
}

/* The decorative ::after chevron is replaced by the real button. */
.nav-links .menu-item-has-children > .nav-link::after { content: none; }

.nav-sublinks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.2s ease;
}

.menu-item-has-children.submenu-open > .nav-sublinks {
    grid-template-rows: 1fr;
}

.nav-sublinks > .saje-sub-accordion-shell {
    min-height: 0;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-sublinks .saje-sub-accordion-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-item-has-children.submenu-open > .nav-sublinks .saje-sub-accordion-list {
    padding: 2px 0 6px;
}

/* Collapsed branch: submenu links must not capture taps (they overflow the zeroed content box). */
.nav-links .menu-item-has-children:not(.submenu-open) > .nav-sublinks {
    pointer-events: none;
}

.saje-sub-accordion-list > .menu-item + .menu-item {
    margin-top: 2px;
}

/* Submenu expands in normal flow; no extra bottom margin (avoid large dead band). */
.nav-links > .menu-item-has-children.submenu-open {
    margin-bottom: 0;
}

.nav-sublinks .nav-link {
    align-items: center;
    min-height: 38px;
    padding: 5px 10px 5px 18px;
    font-size: 0.8125rem;
    line-height: 1.3;
    font-weight: 500;
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
    border-radius: var(--sidebar-nav-link-radius);
}

.nav-sublinks .nav-icon {
    font-size: 0.95rem;
}

@media (prefers-reduced-motion: reduce) {
    .submenu-chevron { transition: none; }
    .nav-sublinks { transition: none; }
}

/* No transition or animation inside the primary sidebar navigation (Etusivu tree, submenu accordion, icons). */
#site-sidebar nav.sidebar-nav,
#site-sidebar nav.sidebar-nav * {
    transition: none !important;
    animation: none !important;
}


/* =====================================================================
   Logo links (always present), Harrastekiekko alt-logo swap
   ===================================================================== */

.logo-link-main {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.logo-link-hk {
    display: none;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

body.saje-site-layout.saje-section-harrastekiekko .logo-link-main {
    display: none;
}

body.saje-site-layout.saje-section-harrastekiekko .logo-link-hk {
    display: inline-flex;
}

body.saje-site-layout.saje-section-harrastekiekko .sidebar .logo-link-hk {
    color: var(--white);
}

.logo-tagline-hk {
    display: none;
}

body.saje-section-harrastekiekko .logo:has(.logo-tagline-hk) .logo-tagline-main {
    display: none;
}

body.saje-section-harrastekiekko .logo-tagline-hk {
    display: block;
}

.logo .custom-logo.custom-logo-hk,
.logo-link-hk .custom-logo-hk {
    max-width: min(200px, 100%);
    height: auto;
    max-height: 96px;
    display: block;
}
.logo-box-hk { background: var(--hk-accent, #1565c0); }

.logo-link-main:focus-visible,
.logo-link-hk:focus-visible {
    outline: 2px solid var(--accent-orange);
    outline-offset: 4px;
    border-radius: 4px;
}

body.saje-section-harrastekiekko .logo-link-hk:focus-visible {
    outline-color: var(--hk-accent);
}

@media (max-width: 768px) {
    .logo-link-main,
    .logo-link-hk { min-height: 44px; padding: 4px 0; }
}

/* =====================================================================
   Harrastekiekko reskin (active when body.saje-section-harrastekiekko)
   --------------------------------------------------------------------
   Contrast matrix (WCAG 2.1 AA targets):
   - #1565c0 on #fff:                ~6.6:1   pass
   - #fff   on #1565c0:              ~6.6:1   pass
   - #000   on #fff:                  21:1     pass AAA
   - #64705a on #fff (fine print):    4.69:1   pass AA
   - #000   on rgba(255,255,255,.92): ~19:1    pass AAA
   ===================================================================== */

body.saje-section-harrastekiekko {
    --hk-accent: #1565c0;
    --hk-accent-dark: #0d47a1;
    --hk-accent-on-sidebar: #64b5f6;
    --hk-ink: #000;
    --hk-paper: #fff;
    --hk-muted: #64705a;
    --sidebar-scrollbar-thumb: rgba(100, 181, 246, 0.42);
    --sidebar-scrollbar-thumb-hover: rgba(100, 181, 246, 0.85);
    font-family: Arial, Helvetica, sans-serif;
}

/* Main column + chrome: override body.saje-site-layout orange link/button defaults while HK is active. */
body.saje-site-layout.saje-section-harrastekiekko .main-content a {
    color: var(--hk-accent);
}

body.saje-site-layout.saje-section-harrastekiekko .main-content a:hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content a:focus,
body.saje-site-layout.saje-section-harrastekiekko .main-content a:active {
    color: var(--hk-accent-dark);
}

/* Breadcrumb row: blue links and underlines (orange rules only set color on <a>). */
body.saje-site-layout.saje-section-harrastekiekko .main-content .breadcrumbs a {
    color: var(--hk-accent);
    text-decoration-color: var(--hk-accent);
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .breadcrumbs a:hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content .breadcrumbs a:focus,
body.saje-site-layout.saje-section-harrastekiekko .main-content .breadcrumbs a:active {
    color: var(--hk-accent-dark);
    text-decoration-color: var(--hk-accent-dark);
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .breadcrumbs [aria-current] {
    color: var(--hk-ink);
}

/*
 * Footer is rendered inside .main-content; the HK main-column link tint above would paint
 * footer links with --hk-accent on #242424 (~2.7:1). Restore footer palette with equal or
 * higher specificity (body + layout + section + main + footer + component).
 */
body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-brand-meta a {
    color: var(--hk-accent-on-sidebar);
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-brand-meta a:hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-brand-meta a:focus,
body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-brand-meta a:focus-visible,
body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-brand-meta a:active {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-nav-list a {
    color: rgba(255, 255, 255, 0.9);
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-nav-list a:hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-nav-list a:focus,
body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-nav-list a:focus-visible,
body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-nav-list a:active {
    color: var(--hk-accent-on-sidebar);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-legal a {
    color: rgba(255, 255, 255, 0.72);
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-legal a:hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-legal a:focus,
body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-legal a:focus-visible,
body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-legal a:active {
    color: var(--hk-accent-on-sidebar);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-credit a {
    color: rgba(255, 255, 255, 0.62);
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-credit a:hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-credit a:focus,
body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-credit a:focus-visible,
body.saje-site-layout.saje-section-harrastekiekko .main-content .site-footer .footer-credit a:active {
    color: var(--hk-accent-on-sidebar);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/*
 * Ajankohtaista on HK routes: dark headline links, blue dates/more (not global .main-content a).
 */
body.saje-site-layout.saje-section-harrastekiekko .main-content .hallinta-tiedote h3 a.hallinta-tiedote-title-link {
    color: inherit;
    text-decoration: none;
    font-weight: inherit;
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .hallinta-tiedote h3 a.hallinta-tiedote-title-link:hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content .hallinta-tiedote h3 a.hallinta-tiedote-title-link:focus,
body.saje-site-layout.saje-section-harrastekiekko .main-content .hallinta-tiedote h3 a.hallinta-tiedote-title-link:focus-visible,
body.saje-site-layout.saje-section-harrastekiekko .main-content .hallinta-tiedote h3 a.hallinta-tiedote-title-link:active {
    color: var(--hk-accent);
    text-decoration: underline;
    text-decoration-color: var(--hk-accent);
    text-underline-offset: 2px;
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .hallinta-tiedote h3 small,
body.saje-site-layout.saje-section-harrastekiekko .main-content .hallinta-tiedote time {
    color: var(--hk-accent-dark);
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .hallinta-tiedote .hallinta-tiedote-more a,
body.saje-site-layout.saje-section-harrastekiekko .main-content .hallinta-tiedote .hallinta-tiedote-body a,
body.saje-site-layout.saje-section-harrastekiekko .main-content .hallinta-tiedote .hallinta-tiedote-excerpt a {
    color: var(--hk-accent-dark);
    text-decoration: underline;
    text-decoration-color: var(--hk-accent-dark);
    text-underline-offset: 2px;
    font-weight: 600;
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .hallinta-ajankohtaista-lisaa__link {
    color: var(--hk-accent-dark);
    border-color: var(--hk-accent);
    text-decoration: none;
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .hallinta-ajankohtaista-lisaa__link:hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content .hallinta-ajankohtaista-lisaa__link:focus-visible {
    color: var(--hk-accent-dark);
    border-color: var(--hk-accent-dark);
    background: #f0f7ff;
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .btn:not(.btn-secondary):not(.btn-outline):not(.btn-neutral),
body.saje-site-layout.saje-section-harrastekiekko .main-content input[type="submit"],
body.saje-site-layout.saje-section-harrastekiekko .main-content input[type="button"]:not([class*="mce-"]):not(.components-button),
body.saje-site-layout.saje-section-harrastekiekko .main-content input[type="reset"] {
    background: var(--hk-accent);
    color: var(--white);
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .btn:not(.btn-secondary):not(.btn-outline):not(.btn-neutral):hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content .btn:not(.btn-secondary):not(.btn-outline):not(.btn-neutral):focus,
body.saje-site-layout.saje-section-harrastekiekko .main-content input[type="submit"]:hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content input[type="button"]:not([class*="mce-"]):not(.components-button):hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content input[type="reset"]:hover {
    background: var(--hk-accent-dark);
    color: var(--white);
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .btn.btn-neutral,
body.saje-site-layout.saje-section-harrastekiekko .main-content .btn.btn-neutral:hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content .btn.btn-neutral:focus {
    background: var(--gray-light);
    color: var(--text-dark);
    border-color: var(--gray-border);
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .btn.btn-neutral:hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content .btn.btn-neutral:focus {
    background: var(--gray-border);
    border-color: var(--text-light);
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .content-card a.btn-outline,
body.saje-site-layout.saje-section-harrastekiekko .main-content .btn.btn-outline {
    color: var(--hk-accent-dark);
    background: var(--white);
    border-color: var(--hk-accent);
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .content-card a.btn-outline:hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content .content-card a.btn-outline:focus,
body.saje-site-layout.saje-section-harrastekiekko .main-content .btn.btn-outline:hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content .btn.btn-outline:focus {
    color: var(--hk-accent-dark);
    background: #e8f0fb;
    border-color: var(--hk-accent-dark);
}

body.saje-site-layout.saje-section-harrastekiekko .page-header {
    border-bottom-color: rgba(21, 101, 192, 0.35);
}

/* Harrastekiekko inner sub-pages (tulokset, sarjaohjelma, saannot, info) */
body.saje-site-layout.saje-section-harrastekiekko .page-article {
    padding-top: 32px;
    padding-bottom: 32px;
}

body.saje-site-layout.saje-section-harrastekiekko .page-article .page-header {
    text-align: left;
    margin-bottom: 1.25rem;
    padding-bottom: 0;
    border-bottom: none;
}

body.saje-site-layout.saje-section-harrastekiekko .page-article .page-header h1 {
    color: var(--hk-ink, #0f172a);
    font-size: clamp(1.65rem, 2.8vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    padding-bottom: 0.45rem;
    border-bottom: 3px solid var(--hk-accent, #1565c0);
    margin: 0;
}

body.saje-site-layout.saje-section-harrastekiekko .page-article .entry-content.content-card {
    margin-top: 0;
    padding: 1.35rem 1.4rem;
    border: 1px solid #c5ced9;
    border-radius: 2px;
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.75) inset;
    background: var(--white);
}

body.saje-site-layout.saje-section-harrastekiekko .page-article .entry-content.content-card a:not(.btn) {
    color: var(--hk-accent, #1565c0);
    text-decoration-color: rgba(21, 101, 192, 0.45);
}

body.saje-site-layout.saje-section-harrastekiekko .page-article .entry-content.content-card a:not(.btn):hover,
body.saje-site-layout.saje-section-harrastekiekko .page-article .entry-content.content-card a:not(.btn):focus-visible {
    color: var(--hk-accent-dark, #0d47a1);
    text-decoration-color: var(--hk-accent-dark, #0d47a1);
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .entry-content .hallinta-harraste-content a,
body.saje-site-layout.saje-section-harrastekiekko .main-content .entry-content .hallinta-harraste-intro a {
    color: var(--hk-accent, #1565c0);
    text-decoration-color: rgba(21, 101, 192, 0.45);
}

body.saje-site-layout.saje-section-harrastekiekko .main-content .entry-content .hallinta-harraste-content a:hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content .entry-content .hallinta-harraste-content a:focus-visible,
body.saje-site-layout.saje-section-harrastekiekko .main-content .entry-content .hallinta-harraste-intro a:hover,
body.saje-site-layout.saje-section-harrastekiekko .main-content .entry-content .hallinta-harraste-intro a:focus-visible {
    color: var(--hk-accent-dark, #0d47a1);
    text-decoration-color: var(--hk-accent-dark, #0d47a1);
}

body.saje-site-layout.saje-section-harrastekiekko .page-article .saje-toc {
    border-radius: 2px;
    border-color: #c5ced9;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

body.saje-site-layout.saje-section-harrastekiekko .page-article .saje-toc a {
    color: var(--hk-accent, #1565c0);
    text-decoration-color: rgba(21, 101, 192, 0.45);
}

body.saje-site-layout.saje-section-harrastekiekko .page-article .saje-toc a:hover,
body.saje-site-layout.saje-section-harrastekiekko .page-article .saje-toc a:focus-visible {
    color: var(--hk-accent-dark, #0d47a1);
    text-decoration-color: var(--hk-accent-dark, #0d47a1);
}

body.saje-section-harrastekiekko .skip-link {
    background: var(--hk-accent-dark);
}

body.saje-section-harrastekiekko .skip-link:focus {
    outline-color: var(--hk-accent-on-sidebar);
}

body.saje-section-harrastekiekko .mobile-toggle {
    background: var(--white);
    border-color: var(--hk-accent);
}

body.saje-section-harrastekiekko .mobile-toggle .menu-bar {
    background: var(--hk-accent-dark);
}

body.saje-section-harrastekiekko .mobile-toggle:hover {
    border-color: var(--hk-accent-dark);
    background: #e8f0fb;
}

body.saje-section-harrastekiekko .mobile-toggle:active {
    background: #dce8f7;
}

body.saje-section-harrastekiekko .mobile-toggle[aria-expanded="true"] {
    background: var(--hk-accent-dark);
    border-color: var(--hk-accent-on-sidebar);
}

body.saje-section-harrastekiekko .mobile-toggle[aria-expanded="true"] .menu-bar {
    background: var(--white);
}

body.saje-section-harrastekiekko .mobile-toggle:focus-visible {
    outline: 2px solid var(--hk-accent-on-sidebar);
    outline-offset: 2px;
}

/* Breadcrumb row (same control); higher specificity for cascade with .mobile-toggle base rules. */
body.saje-section-harrastekiekko .breadcrumbs-bar .mobile-toggle {
    background: var(--white);
    border-color: var(--hk-accent);
}

body.saje-section-harrastekiekko .breadcrumbs-bar .mobile-toggle .menu-bar {
    background: var(--hk-accent-dark);
}

body.saje-section-harrastekiekko .breadcrumbs-bar .mobile-toggle:hover {
    border-color: var(--hk-accent-dark);
    background: #e8f0fb;
}

body.saje-section-harrastekiekko .breadcrumbs-bar .mobile-toggle:active {
    background: #dce8f7;
}

body.saje-section-harrastekiekko .breadcrumbs-bar .mobile-toggle[aria-expanded="true"] {
    background: var(--hk-accent-dark);
    border-color: var(--hk-accent-on-sidebar);
}

body.saje-section-harrastekiekko .breadcrumbs-bar .mobile-toggle[aria-expanded="true"] .menu-bar {
    background: var(--white);
}

body.saje-section-harrastekiekko .breadcrumbs-bar .mobile-toggle:focus-visible {
    outline: 2px solid var(--hk-accent-on-sidebar);
    outline-offset: 2px;
}

body.saje-section-harrastekiekko .breadcrumbs-search-btn {
    border-color: var(--hk-accent);
    background: var(--white);
    color: var(--hk-accent);
}

body.saje-section-harrastekiekko .breadcrumbs-search-btn:hover {
    border-color: var(--hk-accent-dark);
    background: var(--hk-accent);
    color: var(--white);
}

body.saje-section-harrastekiekko .breadcrumbs-search-btn:focus-visible {
    border-color: var(--hk-accent-dark);
    background: var(--hk-accent);
    color: var(--white);
    outline: 2px solid var(--hk-accent-on-sidebar);
    outline-offset: 2px;
}

body.saje-section-harrastekiekko .back-to-top {
    background: var(--hk-accent);
}

body.saje-section-harrastekiekko .back-to-top:hover,
body.saje-section-harrastekiekko .back-to-top:focus-visible {
    background: var(--hk-accent-dark);
    color: var(--white);
}

body.saje-site-layout.saje-section-harrastekiekko .sidebar-desktop-toggle {
    border-color: var(--hk-accent);
    background: var(--hk-accent);
    color: var(--white);
}

body.saje-site-layout.saje-section-harrastekiekko .sidebar-desktop-toggle:hover {
    border-color: var(--hk-accent-dark);
    background: var(--hk-accent-dark);
}

body.saje-site-layout.saje-section-harrastekiekko .sidebar-desktop-reveal {
    border-color: var(--hk-accent);
    background: var(--sidebar-bg);
    color: var(--white);
}

body.saje-site-layout.saje-section-harrastekiekko .sidebar-desktop-reveal:hover {
    border-color: var(--hk-accent-dark);
    background: #323232;
}

body.saje-site-layout.saje-section-harrastekiekko .table-search-input:focus {
    border-color: var(--hk-accent);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.14);
}

body.saje-section-harrastekiekko footer,
body.saje-section-harrastekiekko .site-footer {
    border-top-color: var(--hk-accent);
}

body.saje-section-harrastekiekko .footer-nav-list a:hover,
body.saje-section-harrastekiekko .footer-nav-list a:focus-visible {
    color: var(--hk-accent-on-sidebar);
}

body.saje-section-harrastekiekko .footer-brand-meta a:hover,
body.saje-section-harrastekiekko .footer-brand-meta a:focus-visible {
    color: var(--hk-accent-on-sidebar);
}

body.saje-section-harrastekiekko .footer-legal a:hover,
body.saje-section-harrastekiekko .footer-legal a:focus-visible {
    color: var(--hk-accent-on-sidebar);
}

body.saje-section-harrastekiekko .footer-credit a:hover,
body.saje-section-harrastekiekko .footer-credit a:focus-visible {
    color: var(--hk-accent-on-sidebar);
}

/*
 * HK inner routes: SAJE primary-nav rows keep orange strip + active/hover;
 * Harrastekiekko branch stays blue ( :has(#harrastekiekko) rules above ).
 */
body.saje-site-layout.saje-section-harrastekiekko #site-sidebar .nav-links > .menu-item:not(.menu-item-has-children) > .nav-link {
    border-left-color: var(--accent-orange);
}

body.saje-site-layout.saje-section-harrastekiekko #site-sidebar .nav-links > .menu-item-has-children:not(:has(> .nav-link[href$="#harrastekiekko"])):not(:has(> .nav-link[href$="/#harrastekiekko"])) > .nav-link {
    border-left-color: var(--accent-orange);
}

body.saje-site-layout.saje-section-harrastekiekko #site-sidebar .nav-links > .menu-item-has-children:not(:has(> .nav-link[href$="#harrastekiekko"])):not(:has(> .nav-link[href$="/#harrastekiekko"])) > .nav-sublinks {
    border-left-color: var(--accent-orange);
}

body.saje-site-layout.saje-section-harrastekiekko #site-sidebar .nav-links > .menu-item:not(.menu-item-has-children) > .nav-link:hover,
body.saje-site-layout.saje-section-harrastekiekko #site-sidebar .nav-links > .menu-item:not(.menu-item-has-children) > .nav-link:focus-visible,
body.saje-site-layout.saje-section-harrastekiekko #site-sidebar .nav-links > .menu-item:not(.menu-item-has-children) > .nav-link.active,
body.saje-site-layout.saje-section-harrastekiekko #site-sidebar .nav-links > .menu-item:not(.menu-item-has-children).current-menu-item > .nav-link,
body.saje-site-layout.saje-section-harrastekiekko #site-sidebar .nav-links > .menu-item:not(.menu-item-has-children).current_page_item > .nav-link,
body.saje-site-layout.saje-section-harrastekiekko #site-sidebar .nav-links > .menu-item:not(.menu-item-has-children).current-menu-parent > .nav-link,
body.saje-site-layout.saje-section-harrastekiekko #site-sidebar .nav-links > .menu-item:not(.menu-item-has-children).current-menu-ancestor > .nav-link {
    background: var(--accent-orange-dark);
    color: var(--white);
}

body.saje-site-layout.saje-section-harrastekiekko .sidebar-org-mail {
    color: var(--hk-accent-on-sidebar);
}

body.saje-section-harrastekiekko .sidebar-org-mail:focus-visible {
    outline-color: var(--hk-accent-on-sidebar);
}

body.saje-section-harrastekiekko {
    background-color: var(--gray-light);
    background-image: none;
}

body.saje-section-harrastekiekko .section-background-harrastekiekko {
    background-image: var(--saje-harrastekiekko-section-bg, none);
}

body.saje-section-harrastekiekko #harrastekiekko .section-title {
    color: var(--hk-ink);
    padding-bottom: 0.45rem;
    border-bottom: 3px solid var(--hk-accent);
    margin-bottom: 1.25rem;
}

body.saje-section-harrastekiekko #harrastekiekko .content-card {
    background: var(--hk-paper);
    border: 1px solid var(--gray-border);
}

body.saje-section-harrastekiekko #harrastekiekko a { color: var(--hk-accent); }
body.saje-section-harrastekiekko #harrastekiekko a:hover { color: var(--hk-accent-dark); }

body.saje-section-harrastekiekko .harrastekiekko-links .btn { background: var(--hk-accent); }
body.saje-section-harrastekiekko .harrastekiekko-links .btn:hover { background: var(--hk-accent-dark); }

body.saje-section-harrastekiekko .harrastekiekko-teams h3,
body.saje-section-harrastekiekko .harrastekiekko-ajankohtaista > h3 {
    background: var(--hk-ink);
    color: var(--hk-paper);
    padding: 6px 12px;
}

body.saje-section-harrastekiekko .harrastekiekko-teams .badge { background: var(--hk-accent); }

body.saje-section-harrastekiekko .harrastekiekko-intro .hk-content-card__title,
body.saje-section-harrastekiekko .harrastekiekko-games .hk-content-card__title,
body.saje-section-harrastekiekko .harrastekiekko-results .hk-content-card__title,
body.saje-section-harrastekiekko .harrastekiekko-games h3,
body.saje-section-harrastekiekko .harrastekiekko-results h3 {
    background: var(--hk-ink);
    color: var(--hk-paper);
    margin: 0;
    padding: 0.65rem 1.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 3px solid var(--hk-accent);
}

body.saje-section-harrastekiekko .game-date {
    color: var(--hk-accent-dark);
}

body.saje-section-harrastekiekko .result-score {
    color: var(--hk-accent);
}

body.saje-section-harrastekiekko .card-link {
    color: var(--hk-accent);
    text-decoration-color: var(--hk-accent);
}

body.saje-section-harrastekiekko .card-link:hover {
    color: var(--hk-accent-dark);
    text-decoration-color: var(--hk-accent-dark);
}

body.saje-section-harrastekiekko .team-badge:nth-child(odd) {
    background: var(--hk-accent);
}

body.saje-section-harrastekiekko .stat-pill strong {
    color: var(--hk-accent-dark);
}

/* Section / page wide banner (Hallinta section_banner_* URL). */
.section .saje-section-banner,
.page-article .saje-section-banner,
.page-article .saje-page-banner {
    margin: 0 0 1.5rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    aspect-ratio: 3 / 1;
}

body.saje-section-harrastekiekko #harrastekiekko .saje-section-banner {
    border: 1px solid rgba(21, 101, 192, 0.25);
    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

.section .saje-section-banner__img,
.page-article .saje-section-banner__img,
.page-article .saje-page-banner__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

body.saje-section-harrastekiekko .page-article .saje-page-banner {
    border: 1px solid rgba(21, 101, 192, 0.25);
    box-shadow:
        0 4px 12px rgba(15, 23, 42, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.35) inset;
}

/* Front-page #harrastekiekko: section rhythm and HK chrome (works in SPA without body.hk class lag) */
#harrastekiekko.section-with-bg .section-background-harrastekiekko {
    opacity: 0.18;
}

#harrastekiekko .section-title {
    color: var(--hk-ink, #0f172a);
    padding-bottom: 0.45rem;
    border-bottom: 3px solid var(--hk-accent, #1565c0);
    margin-bottom: 1rem;
    font-size: clamp(1.65rem, 2.8vw, 2rem);
    letter-spacing: -0.02em;
}

#harrastekiekko .harrastekiekko-ajankohtaista.content-card {
    margin-bottom: 1.15rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid #c5ced9;
    border-radius: 2px;
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.75) inset;
    background: var(--white);
}

#harrastekiekko .harrastekiekko-ajankohtaista > h3,
#harrastekiekko .harrastekiekko-ajankohtaista .hk-content-card__title {
    margin: 0;
    padding: 0.65rem 1.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    background: var(--hk-ink, #0f172a);
    color: var(--hk-paper, #fff);
    border-bottom: 3px solid var(--hk-accent, #1565c0);
}

#harrastekiekko .harrastekiekko-ajankohtaista .hk-content-card__body .hallinta-ajankohtaista,
#harrastekiekko .harrastekiekko-ajankohtaista .hallinta-ajankohtaista {
    padding: 1rem 1.25rem 0.35rem;
}

#harrastekiekko .harrastekiekko-ajankohtaista .hallinta-tiedote time {
    color: var(--hk-accent-dark, #0d47a1);
    font-size: 0.8125rem;
    font-weight: 600;
}

#harrastekiekko .harrastekiekko-ajankohtaista .hallinta-ajankohtaista-lisaa {
    display: none;
}

#harrastekiekko .harrastekiekko-stats {
    margin-bottom: 1.15rem;
    gap: 0.5rem;
}

#harrastekiekko .stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 101, 192, 0.2);
    border-radius: 2px;
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
    line-height: 1.35;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    color: var(--hk-ink, #0f172a);
}

#harrastekiekko .stat-pill .ph-fill {
    font-size: 1.05rem;
    color: var(--hk-accent, #1565c0);
    flex-shrink: 0;
}

#harrastekiekko .stat-pill strong {
    color: var(--hk-accent-dark, #0d47a1);
    font-size: 1rem;
    margin-right: 0.15rem;
}

#harrastekiekko .hk-content-card__head,
#harrastekiekko .harrastekiekko-games h3,
#harrastekiekko .harrastekiekko-results h3 {
    background: var(--hk-ink, #0f172a);
    color: var(--hk-paper, #fff);
    margin: 0;
    padding: 0;
    border-bottom: 3px solid var(--hk-accent, #1565c0);
}

#harrastekiekko .hk-content-card__title,
#harrastekiekko .harrastekiekko-games h3,
#harrastekiekko .harrastekiekko-results h3 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.65rem 1.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hk-paper, #fff);
}

#harrastekiekko .hk-content-card__title .ph-fill,
#harrastekiekko .harrastekiekko-games h3 .ph-fill,
#harrastekiekko .harrastekiekko-results h3 .ph-fill {
    font-size: 1.15rem;
    color: var(--hk-accent-on-sidebar, #64b5f6);
    flex-shrink: 0;
    letter-spacing: 0;
    text-transform: none;
}

#harrastekiekko .content-card a:not(.btn) {
    color: var(--hk-accent, #1565c0);
    text-decoration-color: rgba(21, 101, 192, 0.45);
}

#harrastekiekko .content-card a:not(.btn):hover {
    color: var(--hk-accent-dark, #0d47a1);
    text-decoration-color: var(--hk-accent-dark, #0d47a1);
}

/* #harrastekiekko front grid: intro full width; schedule + results side by side */
#harrastekiekko .content-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

#harrastekiekko .content-grid > .harrastekiekko-intro {
    grid-column: 1 / -1;
}

@media (max-width: 719px) {
    #harrastekiekko .content-grid {
        grid-template-columns: 1fr;
    }
}

#harrastekiekko .content-grid > .content-card,
#harrastekiekko .content-grid > .hk-content-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid #c5ced9;
    border-radius: 2px;
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.75) inset;
    padding: 0;
    overflow: hidden;
    background: var(--white);
}

#harrastekiekko .hk-content-card__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#harrastekiekko .content-grid > .harrastekiekko-intro .hk-content-card__body {
    padding: 1.25rem 1.35rem 1.35rem;
}

#harrastekiekko .content-grid > .harrastekiekko-intro .hallinta-harraste-intro p {
    margin-bottom: 0.65rem;
    font-size: 0.975rem;
    line-height: 1.65;
    color: var(--text-dark);
}

#harrastekiekko .content-grid > .harrastekiekko-intro .hallinta-harraste-intro p:last-child {
    margin-bottom: 0;
}

#harrastekiekko .content-grid .hallinta-harraste-list {
    padding: 0.35rem 1.25rem 1.35rem;
}

#harrastekiekko .content-grid .hallinta-harraste-list--fixtures {
    flex: 1;
    min-height: 0;
    max-height: 26rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

#harrastekiekko .content-grid > .harrastekiekko-results.content-card,
#harrastekiekko .content-grid > .harrastekiekko-results.hk-content-card {
    overflow: visible;
}

#harrastekiekko .harrastekiekko-results .hallinta-harraste-list--results {
    min-height: 12rem;
    max-height: none;
    overflow: visible;
    flex: none;
}

#harrastekiekko .harrastekiekko-results .hallinta-harraste-list--results::before {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.82) 0%,
        rgba(255, 255, 255, 0.93) 45%,
        rgba(248, 250, 252, 0.96) 100%
    );
}

body.saje-section-harrastekiekko #harrastekiekko .harrastekiekko-results .hallinta-harraste-list--results::before {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.78) 0%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(238, 242, 248, 0.95) 100%
    );
}

#harrastekiekko .hallinta-harraste-card {
    padding: 0.85rem 0;
    border-bottom: 1px solid #e6ebf2;
}

#harrastekiekko .hallinta-harraste-card:last-child {
    border-bottom: none;
}

#harrastekiekko .hallinta-harraste-card__match {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

#harrastekiekko .hallinta-harraste-card__match > .ph-fill {
    margin-top: 0.15rem;
    font-size: 1rem;
    color: var(--hk-accent, #1565c0);
    flex-shrink: 0;
}

#harrastekiekko .hallinta-harraste-card__teams {
    display: block;
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: #0f172a;
    margin: 0 0 0.35rem;
}

#harrastekiekko .hallinta-harraste-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.15rem;
}

#harrastekiekko .hallinta-harraste-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-light);
}

#harrastekiekko .hallinta-harraste-card__meta-item .ph-fill {
    font-size: 0.95rem;
    color: var(--hk-accent-dark, #0d47a1);
    flex-shrink: 0;
}

#harrastekiekko .hallinta-harraste-card__score {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.0625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--hk-accent-dark, #0d47a1);
    margin: 0.15rem 0 0.2rem;
}

#harrastekiekko .hallinta-harraste-card__score .ph-fill {
    font-size: 1rem;
    color: var(--hk-accent, #1565c0);
}

/* Legacy card markup (no BEM classes) */
#harrastekiekko .hallinta-harraste-card strong:not(.hallinta-harraste-card__teams) {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: #0f172a;
    margin-bottom: 0.35rem;
}

#harrastekiekko .harrastekiekko-games .hallinta-harraste-card:not(.hallinta-harraste-card--fixture) > div:nth-of-type(1) {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-light);
}

#harrastekiekko .harrastekiekko-games .hallinta-harraste-card:not(.hallinta-harraste-card--fixture) > div:nth-of-type(2) {
    font-size: 0.875rem;
    color: var(--text-dark);
    margin-top: 0.2rem;
}

#harrastekiekko .harrastekiekko-results .hallinta-harraste-card:not(.hallinta-harraste-card--result) > div:nth-of-type(1) {
    font-size: 1.0625rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    color: var(--text-dark);
}

#harrastekiekko .harrastekiekko-results .hallinta-harraste-card:not(.hallinta-harraste-card--result) > div:nth-of-type(2) {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-light);
    margin-top: 0.25rem;
}

#harrastekiekko .hallinta-harraste-empty {
    margin: 0;
    padding: 1rem 1.25rem 1.35rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--hk-muted, #64705a);
}

#harrastekiekko .harrastekiekko-teams.content-card {
    margin-top: 1.25rem;
    border: 1px solid #c5ced9;
    border-radius: 2px;
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.75) inset;
    padding: 0;
    overflow: hidden;
    background: #fff;
    text-align: left;
}

#harrastekiekko .harrastekiekko-teams h3,
#harrastekiekko .harrastekiekko-teams .hk-content-card__title {
    margin: 0;
    padding: 0.65rem 1.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--hk-ink, #000);
    color: var(--hk-paper, #fff);
    border-bottom: 3px solid var(--hk-accent, #1565c0);
}

#harrastekiekko .harrastekiekko-teams .hk-content-card__body {
    padding: 0.35rem 1.25rem 1.35rem;
}

#harrastekiekko .harrastekiekko-teams .hallinta-harraste-joukkueet li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

#harrastekiekko .harrastekiekko-teams .hallinta-harraste-joukkueet li .ph-fill {
    color: var(--hk-accent, #1565c0);
    flex-shrink: 0;
}

#harrastekiekko .harrastekiekko-teams .hallinta-harraste-joukkueet {
    padding: 1.1rem 1.25rem 1.35rem;
    justify-content: flex-start;
    gap: 10px;
}

#harrastekiekko ul.hallinta-harraste-joukkueet {
    vertical-align: middle;
}

/*
 * Legacy harrastekiekko.saje.fi clone (`layout="legacy"` shortcodes / old markup).
 * Section bg only when Hallinta `section_background_harrastekiekko` is set.
 */
#harrastekiekko.harrastekiekko-legacy-section .section-background-harrastekiekko {
    opacity: 1;
    background-image: var(--saje-harrastekiekko-section-bg, none);
    background-size: cover;
    background-position: center;
}

#harrastekiekko .harrastekiekko-legacy {
    max-width: 60em;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
    color: #000;
}

#harrastekiekko .harrastekiekko-legacy-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    min-height: 200px;
    background-image: url('assets/harrastekiekko-legacy/top.jpg');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: auto min(200px, 50vw);
    padding: 12px 0 0;
}

#harrastekiekko .harrastekiekko-legacy-logo img {
    max-width: min(280px, 85vw);
    height: auto;
    display: block;
}

#harrastekiekko .harrastekiekko-legacy-banner {
    flex: 1;
    min-width: 120px;
    min-height: 80px;
}

#harrastekiekko .harrastekiekko-legacy-menu-bar {
    background: url('assets/harrastekiekko-legacy/menu_bg.png') repeat-x;
    min-height: 2.5em;
}

#harrastekiekko .harrastekiekko-legacy-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0.45em 8px;
    font-weight: 700;
    font-size: clamp(14px, 2.4vw, 18px);
}

#harrastekiekko .harrastekiekko-legacy-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #000;
    text-decoration: none;
}

#harrastekiekko .harrastekiekko-legacy-nav a .ph-fill {
    color: var(--hk-accent, #1565c0);
    font-size: 1rem;
}

#harrastekiekko .harrastekiekko-legacy-nav a:hover {
    color: var(--hk-accent, #1565c0);
    text-decoration: underline;
}

#harrastekiekko .harrastekiekko-legacy-sheet {
    background: #fff;
    border: 1px solid #ccc;
    margin-top: 0;
}

#harrastekiekko .harrastekiekko-legacy-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(22em, 100%);
    gap: 1.25rem;
    padding: 1rem 1rem 0;
}

#harrastekiekko .harrastekiekko-legacy-title.section-title {
    font-family: Arial, Helvetica, sans-serif;
    text-transform: none;
    letter-spacing: normal;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

#harrastekiekko .harrastekiekko-legacy-otsikko {
    background: #000;
    color: #fff;
    margin: 0 0 0.5rem;
}

#harrastekiekko .harrastekiekko-legacy-otsikko p {
    margin: 0;
    padding: 0.35em 0.5em;
    font-size: 14px;
    font-weight: 700;
}

#harrastekiekko .harrastekiekko-legacy-tauolla {
    margin: 0.5em 0 1em;
    font-size: 14px;
    padding-left: 2em;
}

#harrastekiekko .harrastekiekko-legacy-tulokset,
#harrastekiekko .harrastekiekko-legacy-ottelut {
    width: 100%;
    border-collapse: collapse;
    margin: 0.5em 0 1em;
    word-wrap: break-word;
}

#harrastekiekko .harrastekiekko-legacy-tulokset {
    font-size: 16px;
    background: url('assets/harrastekiekko-legacy/tulos_bg.jpg');
}

#harrastekiekko .harrastekiekko-legacy-ottelut {
    font-size: 14px;
    background: url('assets/harrastekiekko-legacy/pelit_bg.jpg');
}

#harrastekiekko .harrastekiekko-legacy-tulokset td,
#harrastekiekko .harrastekiekko-legacy-ottelut td {
    padding: 0 0.5em 0 2em;
    vertical-align: top;
}

#harrastekiekko .harrastekiekko-legacy-tulokset td {
    text-align: center;
}

#harrastekiekko .harrastekiekko-legacy-spacer {
    height: 0.5em;
}

#harrastekiekko .harrastekiekko-legacy-ottelu {
    font-weight: 700;
}

#harrastekiekko .harrastekiekko-legacy-meta {
    font-size: 13px;
    color: #333;
}

#harrastekiekko .harrastekiekko-legacy-side::after {
    content: "";
    display: table;
    clear: both;
}

#harrastekiekko .harrastekiekko-legacy-lisaa a {
    display: block;
    margin: 0.5em 0;
    color: var(--hk-accent, #1565c0);
    text-decoration: none;
    font-size: 14px;
    float: right;
}

#harrastekiekko .harrastekiekko-legacy-lisaa a:hover {
    text-decoration: underline;
}

#harrastekiekko .harrastekiekko-legacy-sponsor {
    clear: both;
    border-top: 1px solid #e8e8e8;
}

#harrastekiekko .harrastekiekko-legacy-sponsor-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
}

#harrastekiekko .harrastekiekko-legacy-sponsor-logos a {
    line-height: 0;
}

#harrastekiekko .harrastekiekko-legacy-sponsor-logos img {
    max-height: 52px;
    width: auto;
}

#harrastekiekko .harrastekiekko-legacy-credit {
    text-align: center;
    margin: 0;
    padding: 0.35em 0 1rem;
    font-size: 14px;
}

#harrastekiekko .harrastekiekko-legacy-credit a {
    color: #64705a;
    text-decoration: none;
}

#harrastekiekko .harrastekiekko-legacy-credit a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    #harrastekiekko .harrastekiekko-legacy-grid {
        grid-template-columns: 1fr;
    }
}

/* iOS Safari has known glitches with background-attachment: fixed; the
   same applies for users who opt into reduced motion. Drop to scroll on
   both axes so the page paints predictably. */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
    body { background-attachment: scroll; }
    body.saje-section-harrastekiekko { background-attachment: scroll; }
}

/* =====================================================================
   SAJE ry main site polish (front SPA + inner pages, not Harrastekiekko)
   ---------------------------------------------------------------------
   Mirrors #harrastekiekko card chrome with orange accent tokens.
   Scoped with :not(.saje-section-harrastekiekko) so HK routes stay blue.
   ===================================================================== */

body.saje-site-layout:not(.saje-section-harrastekiekko) #tuomarinimeamiset .section-title,
body.saje-site-layout:not(.saje-section-harrastekiekko) #linkit .section-title,
body.saje-site-layout:not(.saje-section-harrastekiekko) #jasenet .section-title,
body.saje-site-layout:not(.saje-section-harrastekiekko) #yhteystiedot .section-title,
body.saje-site-layout:not(.saje-section-harrastekiekko) #etusivu #news-heading.section-title {
    color: var(--text-dark);
    padding-bottom: 0.45rem;
    border-bottom: 3px solid var(--accent-orange-dark);
    margin-bottom: 1.25rem;
    font-size: clamp(1.65rem, 2.8vw, 2rem);
    letter-spacing: -0.02em;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #tuomarinimeamiset .section-title,
body.saje-site-layout:not(.saje-section-harrastekiekko) #linkit .section-title,
body.saje-site-layout:not(.saje-section-harrastekiekko) #jasenet .section-title,
body.saje-site-layout:not(.saje-section-harrastekiekko) #yhteystiedot .section-title,
body.saje-site-layout:not(.saje-section-harrastekiekko) #etusivu #news-heading.section-title,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__heading.section-title,
body.saje-site-layout:not(.saje-section-harrastekiekko) #sponsorit .section-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #tuomarinimeamiset .section-title .ph-fill,
body.saje-site-layout:not(.saje-section-harrastekiekko) #linkit .section-title .ph-fill,
body.saje-site-layout:not(.saje-section-harrastekiekko) #jasenet .section-title .ph-fill,
body.saje-site-layout:not(.saje-section-harrastekiekko) #yhteystiedot .section-title .ph-fill,
body.saje-site-layout:not(.saje-section-harrastekiekko) #etusivu #news-heading.section-title .ph-fill,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__heading.section-title .ph-fill,
body.saje-site-layout:not(.saje-section-harrastekiekko) #sponsorit .section-title .ph-fill {
    color: var(--accent-orange-dark);
    font-size: 1.15em;
    flex-shrink: 0;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .page-header h1,
body.saje-site-layout:not(.saje-section-harrastekiekko) .page-ukk #faq-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .page-header h1 .ph-fill,
body.saje-site-layout:not(.saje-section-harrastekiekko) .page-ukk #faq-heading .ph-fill {
    color: var(--accent-orange-dark);
    font-size: 1.05em;
    flex-shrink: 0;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #etusivu .hallinta-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #etusivu .hallinta-hero-stat__icon .ph-fill {
    color: var(--accent-orange-dark);
    font-size: 1.35rem;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #etusivu a.hallinta-hero-stat--harrastekiekko .hallinta-hero-stat__icon .ph-fill {
    color: var(--hk-accent);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #etusivu a.hallinta-hero-stat--harrastekiekko:hover .hallinta-hero-stat__icon .ph-fill,
body.saje-site-layout:not(.saje-section-harrastekiekko) #etusivu a.hallinta-hero-stat--harrastekiekko:focus-visible .hallinta-hero-stat__icon .ph-fill {
    color: var(--hk-accent-dark);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-linkit-group__title,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-yhteystiedot__group-title,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-jasenyys__title,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-jasenet-groups__title,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ukk__category,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-jasenyys-cf7__heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-linkit-group__title .ph-fill,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-yhteystiedot__group-title .ph-fill,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-jasenyys__title .ph-fill,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-jasenet-groups__title .ph-fill,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ukk__category .ph-fill,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-jasenyys-cf7__heading .ph-fill {
    color: var(--accent-orange-dark);
    font-size: 1.05em;
    flex-shrink: 0;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-linkit li {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-linkit li .ph-fill {
    color: var(--accent-orange-dark);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-linkit__note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-linkit__note .ph-fill {
    color: var(--accent-orange-dark);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-yhteystiedot-table td .ph-fill {
    color: var(--accent-orange-dark);
    margin-right: 0.25rem;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #etusivu .page-header {
    text-align: center;
    margin-bottom: 1.15rem;
    padding-bottom: 0;
    border-bottom: none;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #etusivu .page-header h1,
body.saje-site-layout:not(.saje-section-harrastekiekko) #etusivu #etusivu-title {
    display: inline-block;
    max-width: 100%;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.15;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--accent-orange-dark);
    margin: 0 auto 0.75rem;
    text-align: center;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #etusivu .hallinta-hero-stats {
    gap: 0.5rem;
    margin-bottom: 1.15rem;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #etusivu .hallinta-hero-stat {
    padding: 0.85rem 1rem;
    border-radius: 2px;
    border: 1px solid rgba(191, 54, 12, 0.2);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #etusivu .hallinta-ajankohtaista {
    gap: 0.75rem;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #etusivu .hallinta-tiedote {
    padding: 1rem 1.25rem;
    border: 1px solid #c5ced9;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #tuomarinimeamiset .table-wrapper,
body.saje-site-layout:not(.saje-section-harrastekiekko) #linkit .hallinta-linkit-wrap,
body.saje-site-layout:not(.saje-section-harrastekiekko) #jasenet .hallinta-jasenyys-grid,
body.saje-site-layout:not(.saje-section-harrastekiekko) #yhteystiedot .hallinta-yhteystiedot {
    border: 1px solid #c5ced9;
    border-radius: 2px;
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.75) inset;
    background: var(--white);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #yhteystiedot .hallinta-yhteystiedot {
    padding: 1.35rem 1.4rem;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #tuomarinimeamiset .table-wrapper {
    padding: 0;
    /* Keep rounded brand frame, but allow wide assignment tables to scroll
       (overflow:hidden here blocked desktop + mobile horizontal scroll). */
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .page-article {
    padding-top: 32px;
    padding-bottom: 32px;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .page-article > .container > .page-header {
    text-align: left;
    margin-bottom: 1.25rem;
    padding-bottom: 0;
    border-bottom: none;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .page-article > .container > .page-header h1 {
    font-size: clamp(1.65rem, 2.8vw, 2rem);
    padding-bottom: 0.45rem;
    border-bottom: 3px solid var(--accent-orange-dark);
    margin: 0;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .page-article .entry-content.content-card {
    margin-top: 0;
    padding: 1.35rem 1.4rem;
    border: 1px solid #c5ced9;
    border-radius: 2px;
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.75) inset;
    background: var(--white);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .page-article .entry-content.content-card .page-header {
    text-align: left;
    margin-bottom: 1.25rem;
    padding-bottom: 0;
    border-bottom: none;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .page-article .entry-content.content-card .page-header h1 {
    font-size: clamp(1.65rem, 2.8vw, 2rem);
    padding-bottom: 0.45rem;
    border-bottom: 3px solid var(--accent-orange-dark);
    margin: 0 0 0.5rem;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .page-article .saje-toc {
    border-radius: 2px;
    border-color: #c5ced9;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .page-article .news-item.content-card,
body.saje-site-layout:not(.saje-section-harrastekiekko) .page-article .empty-state.content-card {
    border: 1px solid #c5ced9;
    border-radius: 2px;
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.75) inset;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__section {
    padding: 1.35rem 1.4rem;
    border: 1px solid #c5ced9;
    border-radius: 2px;
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.75) inset;
    background: var(--white);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__heading.section-title {
    color: var(--text-dark);
    padding-bottom: 0.45rem;
    border-bottom: 3px solid var(--accent-orange-dark);
    margin-bottom: 1rem;
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
    letter-spacing: -0.02em;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__section--harrastekiekko .hallinta-ajankohtaista-arkisto__heading.section-title {
    border-bottom-color: var(--hk-accent);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__section--harrastekiekko .hallinta-ajankohtaista-arkisto__heading.section-title .ph-fill {
    color: var(--hk-accent-dark);
}

/* Ajankohtaista archive: HK section uses blue accents (mirror #harrastekiekko .harrastekiekko-ajankohtaista). */
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__section--harrastekiekko .hallinta-tiedote h3 a.hallinta-tiedote-title-link:hover,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__section--harrastekiekko .hallinta-tiedote h3 a.hallinta-tiedote-title-link:focus-visible {
    color: var(--hk-accent);
    text-decoration-color: var(--hk-accent);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__section--harrastekiekko .hallinta-tiedote h3 small {
    color: var(--hk-accent-dark);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__section--harrastekiekko .hallinta-tiedote .hallinta-tiedote-more a,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__section--harrastekiekko .hallinta-tiedote .hallinta-tiedote-body a,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__section--harrastekiekko .hallinta-tiedote .hallinta-tiedote-excerpt a {
    color: var(--hk-accent-dark);
    text-decoration-color: var(--hk-accent-dark);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__section--harrastekiekko .hallinta-tiedote .hallinta-tiedote-more a:hover,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__section--harrastekiekko .hallinta-tiedote .hallinta-tiedote-more a:focus-visible,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__section--harrastekiekko .hallinta-tiedote .hallinta-tiedote-body a:hover,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__section--harrastekiekko .hallinta-tiedote .hallinta-tiedote-body a:focus-visible,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__section--harrastekiekko .hallinta-tiedote .hallinta-tiedote-excerpt a:hover,
body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto__section--harrastekiekko .hallinta-tiedote .hallinta-tiedote-excerpt a:focus-visible {
    color: var(--hk-accent);
    text-decoration-color: var(--hk-accent);
}

body.saje-site-layout:not(.saje-section-harrastekiekko) .hallinta-ajankohtaista-arkisto .hallinta-tiedote {
    padding: 1rem 1.25rem;
    border: 1px solid #e8e8e8;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

/* Partners (#sponsorit) + site footer — align with main content card chrome */
body.saje-site-layout #sponsorit.partners-section {
    background: var(--white);
    border-top: none;
    border: 1px solid #c5ced9;
    border-radius: 2px;
    box-shadow:
        0 2px 10px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.75) inset;
    padding: 2.75rem 0 2.5rem;
}

body.saje-site-layout #sponsorit.partners-section .container {
    padding: 0 1.75rem;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

body.saje-site-layout:not(.saje-section-harrastekiekko) #sponsorit .section-title {
    display: inline-block;
    margin: 0 auto 1.15rem;
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--text-dark);
    line-height: 1.3;
    padding-bottom: 0.45rem;
    border-bottom: 3px solid var(--accent-orange-dark);
}

body.saje-section-harrastekiekko #sponsorit .section-title {
    color: var(--hk-ink);
    border-bottom-color: var(--hk-accent);
}

body.saje-site-layout #sponsorit .hallinta-sponsorit {
    gap: 0.85rem 1rem;
    max-width: none;
}

body.saje-site-layout #sponsorit .hallinta-sponsori {
    border: 1px solid #c5ced9;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    min-height: 104px;
    padding: 0.85rem 0.75rem;
}

body.saje-site-layout .site-footer {
    border-top: none;
    padding-top: 0;
    background: linear-gradient(180deg, #2a2a2a 0%, #1f1f1f 100%);
}

body.saje-site-layout .site-footer .container {
    padding-top: 0;
    padding-left: clamp(1.25rem, 4vw, 1.875rem);
    padding-right: clamp(1.25rem, 4vw, 1.875rem);
    border-top: 4px solid var(--accent-orange);
}

body.saje-site-layout.saje-section-harrastekiekko .site-footer .container {
    border-top-color: var(--hk-accent);
}

body.saje-site-layout .site-footer .footer-grid {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    gap: 2rem 2.5rem;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.saje-site-layout .site-footer .footer-brand-title {
    font-size: clamp(1.15rem, 2vw, 1.25rem);
    letter-spacing: -0.01em;
    margin-bottom: 0.85rem;
}

body.saje-site-layout .site-footer .footer-nav-heading {
    margin-bottom: 0.75rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid rgba(230, 81, 0, 0.4);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
}

body.saje-site-layout.saje-section-harrastekiekko .site-footer .footer-nav-heading {
    border-bottom-color: rgba(100, 181, 246, 0.45);
}

body.saje-site-layout .site-footer .footer-bottom {
    padding: 1.15rem 0 max(1.5rem, env(safe-area-inset-bottom, 0px));
}

body.saje-site-layout .site-footer .footer-nav-list {
    gap: 0.35rem;
}

/* =====================================================================
   Harrastekiekko stat strip (front-page #harrastekiekko intro)
   ===================================================================== */

.harrastekiekko-stats {
    list-style: none;
    margin: 0 0 1.15rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.stat-pill {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(21, 101, 192, 0.2);
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
    line-height: 1.35;
    border-radius: 2px;
    color: var(--hk-ink, #0f172a);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.stat-pill strong {
    font-size: 1rem;
    margin-right: 0.25rem;
    color: var(--hk-accent-dark, #0d47a1);
}

body.saje-section-harrastekiekko .stat-pill {
    color: var(--hk-ink);
}

@media (max-width: 480px) {
    .harrastekiekko-stats { gap: 6px; }
    .stat-pill { font-size: 0.85rem; padding: 6px 10px; }
}

/* =====================================================================
   Plugin admin: Harrastekiekko tab wrapper (.hallinta-wrap nav-tab-wrapper
   override so the tabs wrap on narrow admin viewports)
   ===================================================================== */

.hallinta-wrap .nav-tab-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid #c3c4c7;
    padding-bottom: 0;
}

@media (max-width: 600px) {
    .hallinta-wrap .nav-tab { font-size: 13px; padding: 6px 10px; }
}

/* =====================================================================
   Mobile toggle :focus-visible parity
   ===================================================================== */

.mobile-toggle:focus-visible {
    outline: 2px solid var(--accent-orange);
    outline-offset: 2px;
}

.sidebar-desktop-toggle:focus-visible,
.sidebar-desktop-reveal:focus-visible {
    outline: 2px solid var(--accent-orange-light);
    outline-offset: 2px;
}

body:not(.saje-section-harrastekiekko) .breadcrumbs-search-btn:focus-visible {
    outline: 2px solid var(--accent-orange-light);
    outline-offset: 2px;
}

body.saje-section-harrastekiekko .sidebar-desktop-toggle:focus-visible,
body.saje-section-harrastekiekko .sidebar-desktop-reveal:focus-visible {
    outline-color: var(--hk-accent-on-sidebar);
}

/* =====================================================================
   LT075-inspired display typography (section titles only)
   ===================================================================== */

:root {
    --saje-display-font: 'Fira Sans Extra Condensed', 'Roboto Condensed', 'Arial Narrow', sans-serif;
}

.section-title,
.page-header h1,
.single-entry h1,
.saje-icon-card__title,
.news-card h3 {
    font-family: var(--saje-display-font);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.05;
}

.section-title,
.page-header h1,
.single-entry h1 {
    font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}

/* Save-Data / reduced-data: system condensed stack (display font CSS skipped in theme-runtime.php when Save-Data is on). */
@media (prefers-reduced-data: reduce) {
    :root {
        --saje-display-font: 'Roboto Condensed', 'Arial Narrow', 'Liberation Sans Narrow', sans-serif;
    }
}

/* =====================================================================
   LT075-inspired icon-box nosto cards ([saje_toiminta_nostot])
   ===================================================================== */

.saje-icon-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.saje-icon-card {
    background: #fff;
    border: 1px solid var(--gray-border);
    border-radius: 4px;
    padding: 1.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.saje-icon-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-orange);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}

body.saje-section-harrastekiekko .saje-icon-card__icon { background: var(--hk-accent); }

.saje-icon-card__title {
    margin: 0;
    color: #111;
    font-size: clamp(0.9rem, 0.82rem + 0.45vw, 1.05rem);
    font-weight: 700;
    line-height: 1.28;
    overflow-wrap: anywhere;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.saje-icon-card__desc {
    color: #333;
    line-height: 1.55;
    min-width: 0;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

.saje-icon-card__cta {
    margin-top: auto;
    color: var(--accent-orange);
    font-weight: 600;
    text-decoration: none;
    min-width: 0;
    overflow-wrap: anywhere;
    word-wrap: break-word;
}

button.saje-icon-card__cta {
    display: inline;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
    text-align: left;
}

.saje-icon-card__cta:hover,
.saje-icon-card__cta:focus-visible { text-decoration: underline; }

.saje-icon-card__cta:focus-visible {
    outline: 2px solid var(--accent-orange);
    outline-offset: 2px;
    border-radius: 2px;
}

body.saje-section-harrastekiekko .saje-icon-card__cta,
body.saje-section-harrastekiekko .saje-icon-card__cta:focus-visible {
    color: var(--hk-accent);
    outline-color: var(--hk-accent);
}

@media (max-width: 480px) {
    .saje-icon-card-grid {
        gap: 1rem;
    }

    .saje-icon-card {
        padding: 1.25rem 1rem;
    }
}

/* --- Aloitusopas (multi-step guide): match .page-header, .content-card, icon cards --- */
.page-aloitusopas {
    --guide-header-from: #1e293b;
    --guide-header-to: #475569;
    --guide-progress-from: #0d47a1;
    --guide-progress-to: #1976d2;
    --guide-done: #2e7d32;
    --guide-done-border: #1b5e20;
    --guide-current: #1565c0;
    --guide-current-border: #0d47a1;
}

/* Matches front-page sections (e.g. #jasenet): .section-title + .section-intro, no centered .page-header band */
.page-aloitusopas .guide-section-head {
    margin-bottom: 30px;
    text-align: left;
}

.page-aloitusopas .guide-section-head .section-title {
    margin-bottom: 15px;
}

.page-aloitusopas .guide-section-intro {
    margin-top: 0;
    margin-bottom: 0;
    max-width: none;
}

.page-aloitusopas .guide-intro-notice {
    margin-bottom: 1.5rem;
}

.page-aloitusopas .guide-progress {
    position: relative;
    margin-top: 1.75rem;
    margin-bottom: 2rem;
    background: var(--white);
    padding: 28px 30px 26px;
    border: none;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.page-aloitusopas .guide-progress .progress-bar {
    width: 100%;
    height: 10px;
    background: var(--gray-light);
    border: 1px solid var(--gray-border);
    border-radius: 0;
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.page-aloitusopas .guide-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--guide-progress-from) 0%, var(--guide-progress-to) 100%);
    width: 0%;
    transition: width 0.25s ease;
}

.page-aloitusopas .guide-progress-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.page-aloitusopas .guide-progress-steps .step {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
    padding: 0.45rem 0.75rem;
    border-radius: 0;
    border: 1px solid var(--gray-border);
    background: var(--gray-light);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    text-align: center;
    min-width: 72px;
}

.page-aloitusopas .guide-progress-steps .step.completed {
    background: var(--guide-done);
    border-color: var(--guide-done-border);
    color: var(--white);
}

.page-aloitusopas .guide-progress-steps .step.active {
    background: var(--guide-current);
    border-color: var(--guide-current-border);
    color: var(--white);
}

.page-aloitusopas .guide-steps {
    margin-bottom: 0;
}

.page-aloitusopas .guide-step {
    display: none;
    background: var(--white);
    border: 1px solid var(--gray-border);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.page-aloitusopas .guide-step.active {
    display: block;
}

.page-aloitusopas .guide-step .step-header {
    background: linear-gradient(140deg, var(--guide-header-from) 0%, var(--guide-header-to) 100%);
    color: var(--white);
    padding: 1.35rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-aloitusopas .guide-step .step-header-icon {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--white);
    opacity: 0.95;
}

.page-aloitusopas .guide-step .step-header h2 {
    font-family: var(--saje-display-font);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
    margin: 0;
    color: var(--white);
    flex: 1;
    min-width: 0;
}

.page-aloitusopas .guide-step .step-number {
    width: 48px;
    height: 48px;
    background: var(--white);
    color: var(--guide-current-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--saje-display-font);
    font-size: 1.35rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.page-aloitusopas .guide-step .step-content {
    padding: 30px;
}

.page-aloitusopas .guide-step .step-content p {
    line-height: 1.8;
    color: var(--text-light);
}

.page-aloitusopas .guide-step .step-content ul {
    margin: 0.75rem 0 0 1.25rem;
    line-height: 1.75;
    color: var(--text-light);
}

.page-aloitusopas .guide-step .step-content > .saje-h-scroll {
    margin-top: 1.5rem;
}

.page-aloitusopas .hallinta-jasenyys-cf7 {
    scroll-margin-top: 5rem;
}

.page-aloitusopas .guide-step .step-actions {
    margin-top: 1.75rem;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.page-aloitusopas .guide-step .step-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.page-aloitusopas .guide-step .step-actions .btn > i {
    font-size: 1.15em;
    line-height: 1;
    flex-shrink: 0;
}

.page-aloitusopas .membership-info,
.page-aloitusopas .training-modules,
.page-aloitusopas .equipment-list,
.page-aloitusopas .game-prep {
    margin: 1.35rem 0;
}

.page-aloitusopas .membership-info ul,
.page-aloitusopas .equipment-list,
.page-aloitusopas .game-prep {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.page-aloitusopas .training-modules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.page-aloitusopas .training-modules .module {
    padding: 1.25rem 1.15rem;
    background: var(--white);
    border: 1px solid var(--gray-border);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}

.page-aloitusopas .training-modules .module h4 {
    margin-bottom: 0.35rem;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 700;
}

.page-aloitusopas .training-modules .module p {
    margin: 0;
    font-size: 0.95rem;
}

.page-aloitusopas .membership-info h3 {
    margin-bottom: 12px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-dark);
}

.page-aloitusopas .membership-info li {
    padding: 1.25rem 1.15rem;
    background: var(--white);
    border: 1px solid var(--gray-border);
    border-radius: 4px;
    box-shadow: none;
    color: var(--text-dark);
}

.page-aloitusopas .equipment-item,
.page-aloitusopas .prep-item {
    padding: 1.25rem 1.15rem;
    background: var(--white);
    border: 1px solid var(--gray-border);
    border-radius: 4px;
    box-shadow: var(--shadow-sm);
}

.page-aloitusopas .equipment-item h4,
.page-aloitusopas .prep-item h4 {
    margin-bottom: 0.35rem;
    color: var(--text-dark);
    font-size: 1rem;
    font-weight: 700;
}

.page-aloitusopas .equipment-item p,
.page-aloitusopas .prep-item p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.65;
}

.page-aloitusopas .step-note,
.page-aloitusopas .equipment-note,
.page-aloitusopas .first-game-note {
    background: var(--gray-light);
    border: 1px solid var(--gray-border);
    padding: 1rem 1.15rem;
    margin: 1.35rem 0;
    color: var(--text-dark);
    line-height: 1.65;
}

.page-aloitusopas .step-note strong,
.page-aloitusopas .equipment-note strong,
.page-aloitusopas .first-game-note strong {
    color: var(--guide-current-border);
}

.page-aloitusopas .congratulations {
    background: linear-gradient(140deg, var(--guide-header-from) 0%, var(--guide-progress-from) 100%);
    color: var(--white);
    padding: 2rem 1.75rem;
    text-align: center;
    margin: 1.75rem 0;
    border: 1px solid var(--guide-current-border);
    box-shadow: var(--shadow-md);
}

.page-aloitusopas .congratulations h3 {
    font-family: var(--saje-display-font);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--white);
    margin-bottom: 0.75rem;
    font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
}

.page-aloitusopas .guide-step .step-content .congratulations p {
    margin: 0;
    color: var(--white);
    line-height: 1.65;
}

@media (max-width: 768px) {
    .page-aloitusopas .guide-step .step-header {
        flex-direction: column;
        text-align: center;
    }

    .page-aloitusopas .guide-step .step-actions {
        flex-direction: column;
    }

    .page-aloitusopas .guide-step .step-actions .btn {
        width: 100%;
        text-align: center;
    }

    .page-aloitusopas .guide-progress-steps {
        flex-direction: column;
        align-items: stretch;
    }

    .page-aloitusopas .guide-progress-steps .step {
        min-width: auto;
        width: 100%;
    }

    .page-aloitusopas .membership-info ul,
    .page-aloitusopas .equipment-list,
    .page-aloitusopas .game-prep,
    .page-aloitusopas .training-modules {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------------------------
   Sanasto (glossary.html) ja UKK (faq.html)
   ------------------------------------------------------------------------- */

.page-sanasto .page-header .page-subtitle,
.page-ukk .page-header .page-subtitle {
    margin: 0;
    margin-top: 0.65rem;
    color: var(--text-light);
    font-size: 1rem;
}

.page-sanasto .glossary-search .search-group label,
.page-ukk .faq-search .search-group label {
    display: block;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.35rem;
}

#glossary-search-input,
#faq-search-input {
    width: 100%;
    max-width: min(560px, 100%);
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1px solid var(--gray-border);
    border-radius: 0;
    font-size: 1rem;
    background: var(--white);
}

#glossary-search-input:focus,
#faq-search-input:focus {
    outline: none;
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 1px var(--accent-orange);
}

.page-sanasto .glossary-search small,
.page-ukk .faq-search small {
    display: block;
    margin-top: 0.4rem;
    color: var(--text-light);
    font-size: 0.875rem;
}

.page-sanasto .glossary-categories,
.page-ukk .faq-categories {
    margin-top: 1.75rem;
}

.page-sanasto .glossary-category,
.page-ukk .faq-category {
    margin-bottom: 2.25rem;
}

.page-sanasto .glossary-category h2,
.page-ukk .faq-category > h2 {
    font-family: var(--saje-display-font, inherit);
    font-size: clamp(1.15rem, 1rem + 0.65vw, 1.35rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 1rem;
    color: var(--text-dark);
}

.page-sanasto .sanasto-definition-list {
    margin: 0;
}

.page-sanasto .sanasto-definition-list .glossary-item {
    padding: 0.95rem 0;
    border-bottom: 1px solid var(--gray-border);
}

.page-sanasto .sanasto-definition-list .glossary-item:last-child {
    border-bottom: none;
}

.page-sanasto .sanasto-definition-list dt {
    font-weight: 700;
    color: var(--accent-orange-dark);
    margin-bottom: 0.35rem;
}

.page-sanasto .sanasto-definition-list dd {
    margin: 0;
    padding: 0;
    color: var(--text-light);
    line-height: 1.7;
}

.page-ukk .faq-item {
    margin-bottom: 0.65rem;
    border: 1px solid var(--gray-border);
    background: var(--white);
}

.page-ukk .faq-q {
    cursor: pointer;
    list-style: none;
    margin: 0;
    padding: 0.9rem 1rem;
    font-weight: 600;
    font-size: 1rem;
    background: var(--gray-light);
    color: var(--text-dark);
    transition: background 0.15s ease, color 0.15s ease;
}

.page-ukk .faq-item[open] .faq-q {
    background: var(--accent-orange);
    color: var(--white);
}

.page-ukk .faq-q:focus-visible {
    outline: 2px solid var(--accent-orange-dark);
    outline-offset: -2px;
}

.page-ukk summary.faq-q::-webkit-details-marker {
    display: none;
}

.page-ukk .faq-answer {
    padding: 1rem 1.15rem;
    border-top: 1px solid var(--gray-border);
}

.page-ukk .faq-answer p {
    margin: 0;
    color: var(--text-light);
    line-height: 1.75;
}

/* Konami easter egg: puck + whistle rain (pointer-events none; reload clears). */
.saje-konami-fall {
    position: fixed;
    inset: 0;
    z-index: 9998;
    overflow: hidden;
    pointer-events: none;
}

.saje-konami-fall__sprite {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    will-change: transform;
    opacity: 0.92;
    user-select: none;
}

@media (prefers-reduced-motion: reduce) {
    .saje-konami-fall {
        display: none;
    }

    .saje-konami-burst__sprite {
        display: none;
    }
}

/* Sidebar collapse easter egg: a few puck/whistle sprites drift from the toggle. */
.saje-konami-burst__sprite {
    position: fixed;
    z-index: 9998;
    display: block;
    pointer-events: none;
    opacity: 0.9;
    user-select: none;
    will-change: transform, opacity;
    animation: saje-konami-burst-drop 1s ease-in forwards;
}

@keyframes saje-konami-burst-drop {
    from {
        transform: translate3d(0, 0, 0) rotate(0deg);
        opacity: 0.92;
    }

    to {
        transform: translate3d(var(--burst-dx, 0), var(--burst-dy, 100px), 0) rotate(var(--burst-rot, 30deg));
        opacity: 0;
    }
}