/*
 Theme Name: Alakylän Metsästysseura
 Theme URI: https://alakylanmetsastysseura.net
 Description: Kauhavan Alakylän Metsästysseura ry — Heritage & Hearth design system
 Author: Skycode.fi
 Template: generatepress
 Version: 1.0.0
 Text Domain: alakylanms
*/

/* ==========================================================================
   1. DESIGN TOKENS (Stitch "Heritage & Hearth")
   ========================================================================== */

:root {
    /* Primary palette */
    --ams-primary: #173317;
    --ams-primary-container: #2d4a2b;
    --ams-on-primary: #ffffff;
    --ams-on-primary-container: #98b991;

    /* Secondary palette */
    --ams-secondary: #934b19;
    --ams-secondary-container: #ffa26a;
    --ams-on-secondary: #ffffff;

    /* Tertiary palette */
    --ams-tertiary: #3d2a00;
    --ams-tertiary-container: #593f00;

    /* Surface system (tonal layering) */
    --ams-surface: #fcf9f1;
    --ams-surface-dim: #dcdad2;
    --ams-surface-container-lowest: #ffffff;
    --ams-surface-container-low: #f6f3eb;
    --ams-surface-container: #f1eee6;
    --ams-surface-container-high: #ebe8e0;
    --ams-surface-container-highest: #e5e2da;

    /* On-surface */
    --ams-on-surface: #1c1c17;
    --ams-on-surface-variant: #434840;

    /* Outline */
    --ams-outline: #737970;
    --ams-outline-variant: #c3c8be;

    /* Error */
    --ams-error: #ba1a1a;
    --ams-error-container: #ffdad6;

    /* Inverse */
    --ams-inverse-surface: #31312b;
    --ams-inverse-on-surface: #f3f1e9;
    --ams-on-primary-muted: #d6d3d1;

    /* Typography */
    --ams-font-headline: 'Newsreader', Georgia, 'Times New Roman', serif;
    --ams-font-body: 'Public Sans', system-ui, -apple-system, sans-serif;
    --ams-font-label: 'Public Sans', system-ui, -apple-system, sans-serif;

    /* Spacing */
    --ams-section-padding: 96px;
    --ams-section-padding-mobile: 48px;
    --ams-container-max: 1280px;
    --ams-container-padding: 32px;

    /* Mobiilidrawerin fallback-header-korkeus (JS asettaa live-arvon
       --ams-mobile-header-h:n kautta, tämä on turva jos JS ei ehdi) */
    --ams-header-h-fallback: 76px;
}

/* ==========================================================================
   2. GLOBAL RESETS & BASE STYLES
   ========================================================================== */

body {
    font-family: var(--ams-font-body);
    background-color: var(--ams-surface);
    color: var(--ams-on-surface);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Form controls >=16px on mobile so iOS Safari does not trigger
   auto-zoom on focus. Scoped to mobile to avoid desktop regression. */
@media (max-width: 767px) {
    input, select, textarea {
        font-size: 16px;
    }
}

/* Section padding: Stitch design uses 96px (py-24) */

/* Reduce WP default block margins */
.entry-content > * + * { margin-top: 1.25em; }
.wp-block-heading { margin-top: 1em; margin-bottom: 0.5em; }
.wp-block-columns { margin-bottom: 0 !important; }
.wp-block-group + .wp-block-group { margin-top: 0; }

/* Nollaa inter-block marginaalit laatikoiden sisällä (Stitch-tiheys) */
.wp-block-group .wp-block-group__inner-container > * + * {
    margin-top: 0;
}
.wp-block-group .wp-block-group__inner-container > .wp-block-heading {
    margin-top: 0;
    margin-bottom: 0;
}

/* Alasivujen ylätasoisten sectionien väliin ei ylimääräistä marginaalia */
body:not(.ams-front-page) .entry-content > .wp-block-group + .wp-block-group,
body:not(.ams-front-page) .entry-content > .wp-block-cover + .wp-block-group,
body:not(.ams-front-page) .entry-content > .wp-block-group + .wp-block-cover,
body:not(.ams-front-page) .entry-content > .wp-block-cover + .wp-block-cover,
body:not(.ams-front-page) .entry-content > .wp-block-columns + .wp-block-group,
body:not(.ams-front-page) .entry-content > .wp-block-group + .wp-block-columns,
body:not(.ams-front-page) .entry-content > .wp-block-columns + .wp-block-columns {
    margin-top: 0;
}

/* WP is-layout-flow oletusmarginaali pois laatikoista */
.is-layout-flow > * + * {
    margin-block-start: 0;
}

/* Kompakti group: poista GP:n oletus-40px inner padding (käytä .ams-compact luokkaa) */
.ams-compact > .wp-block-group__inner-container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Constrained layout: pienempi root-padding (WP/GP oletus 40px → 32px Stitch px-8) */
.wp-block-group__inner-container.is-layout-constrained {
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* Full-width columns: ei side-paddingia (palstat reunasta reunaan) */
.ams-full-columns > .wp-block-group__inner-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Poista WP block gap margin-bottom kaikista top-level sectioneista */
body:not(.ams-front-page) .entry-content > .wp-block-group,
body:not(.ams-front-page) .entry-content > .wp-block-cover,
body:not(.ams-front-page) .entry-content > .wp-block-columns,
body:not(.ams-front-page) .entry-content > .wp-block-spacer {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* GP specific: reduce article padding */
.inside-article { padding: 0 !important; }
.entry-content { padding-bottom: 0 !important; }

/* 0px border-radius on design system elements (not universal) */
.ams-section, .ams-card, .ams-btn, .ams-contact-card,
.ams-ledger-table, .ams-update-notice,
.wp-block-button__link, .wp-block-cover,
.wp-block-image img, .wp-block-columns,
.inside-article, .site-header, .site-footer,
.wp-block-group, .wp-block-column {
    border-radius: 0 !important;
}

/* Headlines: Newsreader serif */
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
    font-family: var(--ams-font-headline);
    color: var(--ams-on-surface);
    letter-spacing: -0.05em;
    line-height: 1.1;
}

h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }
h4 { font-size: 1.25rem; font-weight: 600; }

/* Links */
a {
    color: var(--ams-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover {
    color: var(--ams-secondary);
}

/* Screen-reader only (WCAG heading hierarchy) */
.screen-reader-only {
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    width: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
}

/* Selection */
::selection {
    background: var(--ams-secondary);
    color: var(--ams-on-primary);
}

/* Focus visible for keyboard navigation (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
.ams-btn:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--ams-secondary);
    outline-offset: 2px;
}

/* ==========================================================================
   3. GENERATEPRESS OVERRIDES
   ========================================================================== */

/* Site header */
.site-header {
    background-color: var(--ams-surface) !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

.main-navigation {
    font-family: var(--ams-font-headline);
}

.main-navigation a {
    color: var(--ams-on-surface) !important;
    font-size: 1.125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    opacity: 0.8;
    transition: color 0.3s, opacity 0.3s;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    color: var(--ams-primary) !important;
    opacity: 1;
}

.main-navigation .current-menu-item > a {
    border-bottom: 2px solid var(--ams-primary);
    padding-bottom: 2px;
    font-weight: 700;
}

/* Site branding — single line like Stitch "Heritage & Hearth" */
.site-branding {
    flex-shrink: 0;
}
.site-title {
    margin: 0 !important;
    line-height: 1 !important;
}
/* Korjaa site title selector: .main-title (GP:n luokka) */
.main-title a,
.site-title a {
    font-family: var(--ams-font-headline) !important;
    color: var(--ams-primary) !important;
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.05em !important;
    white-space: nowrap;
}
.site-description {
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    width: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
}

/* Header layout: sticky, max-width centered */
.site-header {
    position: sticky !important;
    top: 0;
    z-index: 40;
}

.inside-header {
    max-width: var(--ams-container-max) !important;
    margin: 0 auto;
    padding: 24px 32px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Nav items: compact, serif uppercase, single line — DESKTOP ONLY.
   Breakpoint-pari: 768 = desktop min / 767 = mobile max. */
@media (min-width: 768px) {
    .main-navigation .main-nav > ul > li > a {
        padding: 10px 16px !important;
        font-size: 1.125rem !important;
        line-height: 1.5 !important;
    }
    .main-navigation .main-nav > ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
    }
    .main-navigation {
        flex-grow: 1;
        display: flex;
        justify-content: flex-end;
    }
}

/* Dropdown submenu styling */
.main-navigation .sub-menu {
    background-color: var(--ams-surface) !important;
    box-shadow: 0 8px 32px rgba(28, 28, 23, 0.08) !important;
}
.main-navigation .sub-menu a {
    font-size: 1rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 12px 24px !important;
}

/* Inside article / page content */
.inside-article {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.entry-content {
    max-width: var(--ams-container-max);
    margin: 0 auto;
}

/* Remove GP default content padding on front page */
.ams-front-page .inside-article,
.ams-front-page .entry-content {
    max-width: 100%;
    padding: 0;
}

/* Footer */
.site-footer {
    background-color: var(--ams-primary) !important;
    color: var(--ams-on-primary) !important;
    padding: 0 !important;
}

.footer-widgets-container,
.inside-footer-widgets {
    background-color: var(--ams-primary) !important;
    max-width: var(--ams-container-max);
    margin: 0 auto;
    padding: 24px 32px 16px !important;
}
/* GP inner-padding on footer widgets adds unwanted space */
.site-footer .inner-padding {
    padding: 0 !important;
}
.site-footer .grid-container {
    max-width: var(--ams-container-max) !important;
}
#footer-widgets {
    padding: 0 !important;
}

/* All footer text defaults to light color */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer h4,
.site-footer h5 {
    color: var(--ams-on-primary-muted) !important;
}

.site-footer h4,
.site-footer h5 {
    color: white !important;
    font-family: var(--ams-font-label);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    margin-bottom: 8px;
}

.site-footer a {
    color: var(--ams-on-primary-muted) !important;
    font-size: 0.75rem;
}
.site-footer a:hover {
    color: var(--ams-secondary) !important;
}

.site-footer .widget {
    margin-bottom: 0 !important;
}

/* Footer lists: no bullets, no padding */
.site-footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.site-footer li {
    margin-bottom: 8px !important;
    font-size: 0.75rem;
    text-transform: uppercase;
}

/* Copyright */
.site-info {
    background-color: var(--ams-primary) !important;
    color: var(--ams-on-primary-muted) !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-align: center;
    padding: 16px 32px !important;
}
.site-info a {
    color: var(--ams-on-primary-muted) !important;
}
.ams-copyright {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* Map grayscale effect (Stitch-style hover-to-color) */
.ams-map-grayscale .wp-block-cover__image-background {
    filter: grayscale(1);
    opacity: 0.8;
    transition: filter 0.7s, opacity 0.7s;
}
.ams-map-grayscale:hover .wp-block-cover__image-background {
    filter: grayscale(0);
    opacity: 1;
}

/* ==========================================================================
   4. SECTION SYSTEM (tonal layering, no borders)
   ========================================================================== */

.ams-section {
    padding: var(--ams-section-padding) var(--ams-container-padding);
}

.ams-section--surface { background-color: var(--ams-surface); }
.ams-section--surface-low { background-color: var(--ams-surface-container-low); }
.ams-section--surface-container { background-color: var(--ams-surface-container); }
.ams-section--surface-high { background-color: var(--ams-surface-container-high); }
.ams-section--primary {
    background-color: var(--ams-primary);
    color: var(--ams-on-primary);
}
.ams-section--primary h1,
.ams-section--primary h2,
.ams-section--primary h3,
.ams-section--primary p {
    color: var(--ams-on-primary);
}
.ams-section--primary-gradient {
    background: linear-gradient(135deg, var(--ams-primary), var(--ams-primary-container));
    color: var(--ams-on-primary);
}

.ams-container {
    max-width: var(--ams-container-max);
    margin: 0 auto;
}

/* ==========================================================================
   5. GRAIN TEXTURE OVERLAY
   ========================================================================== */

.ams-grain-overlay {
    position: relative;
}
.ams-grain-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   6. COMPONENT: BUTTONS
   ========================================================================== */

.ams-btn {
    display: inline-block;
    padding: 16px 32px;
    font-family: var(--ams-font-label);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border: none;
    cursor: pointer;
    transition: filter 0.3s ease;
}
.ams-btn:hover { filter: brightness(1.1); }

.ams-btn--primary {
    background-color: var(--ams-primary);
    color: var(--ams-on-primary);
}
.ams-btn--secondary {
    background-color: var(--ams-secondary);
    color: white;
}
.ams-btn--tertiary {
    background: none;
    color: var(--ams-primary);
    padding: 0;
    border-bottom: 2px solid var(--ams-primary);
    letter-spacing: 0.15em;
}

/* WP buttons override */
.wp-block-button__link {
    font-family: var(--ams-font-label) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    padding: 16px 32px !important;
    font-size: 0.75rem !important;
}

/* ==========================================================================
   7. COMPONENT: CARDS
   ========================================================================== */

.ams-card {
    background-color: var(--ams-surface);
    padding: 32px;
    transition: background-color 0.3s ease;
}
.ams-card:hover {
    background-color: var(--ams-surface-container-low);
}

.ams-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background-color: var(--ams-surface-dim);
}

.ams-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ams-card-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================================================
   8. COMPONENT: LEDGER TABLE
   ========================================================================== */

.ams-ledger-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ams-font-body);
}
.ams-ledger-table th {
    text-align: left;
    font-family: var(--ams-font-label);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 24px 32px;
    background-color: var(--ams-surface-container-high);
    color: var(--ams-primary);
    border: none;
    border-bottom: 2px solid var(--ams-primary);
}
.ams-ledger-table td {
    padding: 24px 32px;
    border: none;
    color: var(--ams-on-surface);
}
/* First column: Newsreader bold like Stitch */
.ams-ledger-table td:first-child {
    font-family: var(--ams-font-headline);
    font-size: 1.25rem;
    font-weight: 700;
}
/* Third column: smaller, muted */
.ams-ledger-table td:last-child {
    font-size: 0.875rem;
    opacity: 0.8;
}
.ams-ledger-table tr:nth-child(even) td {
    background-color: var(--ams-surface-container-low);
}
.ams-ledger-table tr:nth-child(odd) td {
    background-color: var(--ams-surface);
}

/* WP table override */
.wp-block-table table {
    border: none !important;
}
.wp-block-table td,
.wp-block-table th {
    border: none !important;
}

/* ==========================================================================
   9. COMPONENT: CONTACT CARD
   ========================================================================== */

.ams-contact-card {
    background-color: var(--ams-surface-container-low);
    padding: 32px;
}
.ams-contact-card h3 {
    font-family: var(--ams-font-label);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    color: var(--ams-secondary);
    margin-bottom: 8px;
}

/* ==========================================================================
   10. COMPONENT: UPDATE NOTICE
   ========================================================================== */

.ams-update-notice {
    background-color: var(--ams-surface-container-high);
    padding: 16px 24px;
    margin-bottom: 32px;
    font-family: var(--ams-font-body);
    font-size: 0.875rem;
    color: var(--ams-on-surface-variant);
}
.ams-update-notice strong {
    color: var(--ams-secondary);
}

/* ==========================================================================
   11. COMPONENT: CATEGORY LABEL
   ========================================================================== */

.ams-category-label {
    font-family: var(--ams-font-label);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ams-secondary);
}

/* ==========================================================================
   12. COMPONENT: PULL QUOTE
   ========================================================================== */

.wp-block-pullquote {
    border: none !important;
    padding: 40px 0 !important;
}
.wp-block-pullquote blockquote {
    border: none !important;
}
.wp-block-pullquote blockquote p {
    font-family: var(--ams-font-headline) !important;
    font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
    font-style: italic !important;
    color: var(--ams-primary) !important;
    line-height: 1.4 !important;
}
.wp-block-pullquote cite {
    font-family: var(--ams-font-label) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: var(--ams-secondary) !important;
    font-style: normal !important;
}

/* ==========================================================================
   13. MATERIAL ICONS HELPER
   ========================================================================== */

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
    .ams-card-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .ams-card-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    :root {
        --ams-section-padding: 32px;
        --ams-container-padding: 16px;
    }

    /* Pitkät otsikot (Yhteystiedot, Ajankohtaista, Metsästysalueet)
       tavutetaan automaattisesti jotta sanat eivät vuoda ulos
       iPhone SE:n 320 px viewportista. */
    .entry-content h1,
    .wp-block-cover h1,
    .ams-archive-header__title {
        hyphens: auto;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* ==== Vaihe 6: Single-post hero-header + back-link ====
       Single-postit GP:n oletusheader-layoutilla ilman back-linkkiä.
       Lisätään korostettu hero-header ja paluulinkki ylös. */
    body.single-post .entry-header {
        background: var(--ams-surface-container-low, #f1eee6);
        padding: 32px 20px 24px !important;
        margin: 0 0 24px 0 !important;
        border-bottom: 3px solid var(--ams-secondary, #8a6a2a);
    }
    body.single-post .entry-title {
        font-size: clamp(1.5rem, 7vw, 2.25rem) !important;
        line-height: 1.1 !important;
        margin: 0 0 8px 0 !important;
        letter-spacing: -0.02em !important;
    }
    body.single-post .entry-header .entry-meta {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        color: var(--ams-on-surface-variant, #6b6b5b) !important;
    }
    .ams-back-link {
        display: inline-block;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--ams-secondary, #8a6a2a);
        text-decoration: none;
        padding: 12px 0;
        margin: 0 0 4px 0;
        min-height: 48px;
        line-height: 20px;
    }
    .ams-back-link:hover,
    .ams-back-link:focus {
        text-decoration: underline;
    }

    /* ==== Vaihe 5: Ajankohtaista-arkiston postikortit ====
       Blog-loop renderöi 3 postausta plain-border-erotetulla listalla.
       Mobiilissa tarvitaan selkeä kortti-visuaalinen + "Lue lisää" -cue. */
    .blog .inside-article,
    .archive .inside-article {
        background: var(--ams-surface-container-low, #f1eee6) !important;
        border-left: 3px solid var(--ams-secondary, #8a6a2a) !important;
        padding: 24px 20px !important;
        margin-bottom: 16px !important;
        border-radius: 2px;
        border-top: none !important;
    }
    .blog .inside-article + .inside-article,
    .archive .inside-article + .inside-article {
        margin-top: 16px !important;
    }
    .blog .inside-article .entry-title,
    .archive .inside-article .entry-title {
        font-size: 1.25rem !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }
    .blog .inside-article .entry-title a,
    .archive .inside-article .entry-title a {
        color: var(--ams-on-surface, #1c1c17) !important;
        text-decoration: none !important;
    }
    .blog .inside-article .entry-meta,
    .archive .inside-article .entry-meta {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.08em !important;
        text-transform: uppercase !important;
        color: var(--ams-on-surface-variant, #6b6b5b) !important;
        margin-bottom: 8px !important;
    }
    .blog .inside-article .entry-summary,
    .archive .inside-article .entry-summary {
        margin-top: 8px;
    }
    .blog .inside-article .entry-summary p::after,
    .archive .inside-article .entry-summary p::after {
        content: " →";
        color: var(--ams-secondary, #8a6a2a);
        font-weight: 700;
    }

    /* ==== Vaihe 4: Etusivun kortit mobiilissa selkeämmäksi ====
       Stitch-ohjeistuksen grayscale(1) + opacity 0.4 tekee korteista
       haaleita placeholdereita 375 px näytöllä. Mobiilissa
       vähemmän filteröintiä + isompi kortti + full-width. */
    .ams-front-page .wp-block-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .ams-front-page .wp-block-columns .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .ams-front-page .wp-block-columns .wp-block-column .wp-block-cover {
        min-height: 260px !important;
        width: 100% !important;
        padding: 32px 24px !important;
    }
    /* Icon-kappale (Material Symbols) ja otsikko reilusti isommaksi
       mobiilissa — desktopin 2.5rem/1.5rem tuntuu pieneltä kun kortti on
       full-width. */
    .ams-front-page .wp-block-columns .wp-block-column .wp-block-cover .wp-block-cover__inner-container p[style*="font-size:2.5rem"] {
        font-size: 3rem !important;
        line-height: 1 !important;
        margin-bottom: 12px !important;
    }
    .ams-front-page .wp-block-columns .wp-block-column .wp-block-cover .wp-block-cover__inner-container h3 {
        font-size: 2rem !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em !important;
    }
    /* Etusivun group-inner-container eats 32px × 2 padding joka ahdistaa
       korteilta. Pudotetaan mobiilissa 16px. */
    .ams-front-page .wp-block-group > .wp-block-group__inner-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Etusivun alignfull-group ulompi padding 0 mobiilissa, inner hoitaa. */
    .ams-front-page .wp-block-group.alignfull {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Etusivun kortti-column ei tarvitse omaa padding-overriddia — cover hoitaa */
    .ams-front-page .wp-block-columns > .wp-block-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .ams-front-page .wp-block-columns .wp-block-column .wp-block-cover .wp-block-cover__image-background {
        filter: grayscale(0) !important;
        opacity: 1 !important;
    }
    /* Overlay 0.82 = sama kuin desktopin dimRatio 80, jotta tumma teksti
       (#173317) pysyy luettavana kirkkaan kuvan päällä. Aiempi 0.35 teki
       korteista mobiilissa lukukelvottomia — Jussin palautepisteen
       2026-04-12 mukaan. */
    .ams-front-page .wp-block-columns .wp-block-column .wp-block-cover > .wp-block-cover__background {
        opacity: 0.82 !important;
    }
    /* Hero H1 kapeampi — "Kauhavan Alakylän Metsästysseura Ry" ei mahdu
       yhdelle riville 375 px viewportissa. Sallitaan 3 riviä hallitusti. */
    .ams-hero-cover h1,
    .ams-front-page > .entry-content > .wp-block-cover:first-child h1 {
        font-size: clamp(1.75rem, 8vw, 2.75rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.02em !important;
    }

    /* ==== Vaihe 3: Piilota kommentit + roikkuvat metatiedot + tyhjä sidebar ====
       Kommentointia ei käytetä (seurasivusto). Piilotetaan lomakkeet
       varmuuden vuoksi CSS:llä — PHP comments_open __return_false
       ehkäisee renderöinnin mutta GP saattaa silti upottaa rakenteita. */
    #comments,
    .comment-respond,
    .no-comments,
    form#commentform {
        display: none !important;
    }
    /* Entry-meta -elementit, jotka roikkuvat sisällöttöminä:
       - .byline ("12.3.2024 by") ilman author-nimeä
       - .cat-links ("Yleinen") oletuskategoria
       - .comments-link "Leave a comment" englanniksi */
    .entry-meta .byline,
    .entry-meta .cat-links,
    .entry-meta .comments-link {
        display: none !important;
    }
    /* Sidebar piilotetaan tyystin mobiilissa — ei widgettejä jäljellä. */
    .widget-area,
    #secondary.widget-area,
    .sidebar {
        display: none !important;
    }

    /* ==== Vaihe 2: Otsikkojen mobiili-clamp (inline-style-override) ====
       Sisällön inline-tyylit asettavat H1–H3 jopa 40–72 px:iin, mikä
       ei mahdu iPhone SE:n 320 px -näytölle. Pakotetaan clampeilla
       mobiilissa. !important koska inline-style-specificity on
       korkeampi kuin class-selektori. */
    .entry-content h1,
    article h1.entry-title {
        font-size: clamp(1.625rem, 7vw, 2.25rem) !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em !important;
    }
    /* Hero-cover H1: isompi clamp koska se on koko viewportin levyinen
       eikä rajoitu sisällön padding-laatikkoon. 9vw oli liian iso
       iPhone 17 Prolla (402 px) ja pakotti "Kauhavan Alakylän Metsästys-
       seura Ry." tavuttumaan rivinvaihdossa kiusallisesti. 7vw mahduttaa
       tekstin kahdelle siistille riville ilman tavutusta. */
    .entry-content .wp-block-cover h1 {
        font-size: clamp(1.875rem, 7vw, 2.75rem) !important;
        hyphens: none !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }
    /* Archive-header (ajankohtaista) */
    .ams-archive-header__title {
        font-size: clamp(2rem, 8vw, 2.75rem) !important;
    }
    .entry-content h2 {
        font-size: clamp(1.25rem, 5.5vw, 1.75rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.01em !important;
    }
    .entry-content h3 {
        font-size: clamp(1rem, 4.5vw, 1.375rem) !important;
        line-height: 1.2 !important;
    }
    /* Uppercase-otsikoiden letter-spacing kapeammaksi — inline-tyylin
       4.5 px / 2.8 px on liian laaja 320 px -näytölle. */
    .entry-content h1[style*="uppercase"],
    .entry-content h2[style*="uppercase"],
    .entry-content h3[style*="uppercase"],
    .entry-content h1[style*="letter-spacing"],
    .entry-content h2[style*="letter-spacing"],
    .entry-content h3[style*="letter-spacing"] {
        letter-spacing: 0.04em !important;
    }
    /* Paragrafit, joissa on inline-style font-size (yleensä Yhteystiedot
       "Kauhavan Alakylän Metsästysseura Ry" 28 px inline), clampataan
       16–20 px:iin mobiilissa. */
    .entry-content p[style*="font-size"] {
        font-size: clamp(1rem, 4.5vw, 1.25rem) !important;
        line-height: 1.5 !important;
    }

    /* ==== Vaihe 1: Column/Group inline-padding clamp ====
       Johtokunta + Yhteystiedot -sivujen henkilökorteissa wp-block-column
       sisältää inline-tyylin padding:48px kaikille reunoille. Stacking
       mobiilissa kasvattaa vertikaalit välit ~120 px tyhjäksi tilaksi.
       Rajoitetaan mobiilissa clampilla ja pidetään horisontaali-sisennys
       maltillisena (24 px). !important koska inline-style voittaa muuten. */
    .entry-content .wp-block-column[style*="padding"] {
        padding-top: clamp(18px, 5vw, 24px) !important;
        padding-bottom: clamp(18px, 5vw, 24px) !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .entry-content .wp-block-group[style*="padding"] {
        padding-top: clamp(24px, 6vw, 32px) !important;
        padding-bottom: clamp(24px, 6vw, 32px) !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    /* Column-stackin gap tiiviimmäksi jotta peräkkäiset kortit eivät
       tarvitse myös ulkoista gappia 48 px:n lisäksi. */
    .entry-content .wp-block-columns {
        gap: 16px !important;
    }

    /* Inline-border-right ei ole mielekäs kun kolumnit stackautuvat
       pystysuuntaan — synnyttää hämmentävän pysty-linjan kortin oikealle
       reunalle. Border-bottom sen sijaan jää, koska se toimii selkeänä
       kortti-separaattorina stackattuna. */
    .entry-content .wp-block-column[style*="border-right"] {
        border-right: none !important;
    }

    /* Hairline-borderit eivät näy 1 px:llä #dcdad2 → #fcf9f1 pohjalla.
       Korvataan stackauksessa näkyvällä tausta-erottelulla: jokainen
       stackattu kortti saa surface-container-tason taustan ja pienen
       border-radius-pehmennyksen. Desktopia ei kosketa — tämä on
       sisällä mobile media queryssä. */
    .entry-content .wp-block-column[style*="border-bottom"],
    .entry-content .wp-block-column[style*="border-right"] {
        border-bottom: none !important;
        background-color: var(--ams-surface-container-low) !important;
        border-radius: 8px;
    }
    /* Kun inline-tausta #fcf9f1 on samoissa kortissa, ylikirjoita se
       näkyvämmällä (surface-container-low = #f6f3eb). */
    .entry-content .wp-block-columns > .wp-block-column[style*="background-color:#fcf9f1"] {
        background-color: var(--ams-surface-container-low) !important;
    }
    /* Pitää tehdä sarja-columneille kunnon gap mobiilissa jotta kortit
       erottuvat toisistaan. 1 px inline block-gap ei riitä tausta-kortti
       -lähestymistavassa. */
    .entry-content .wp-block-columns:has(> .wp-block-column[style*="padding"]) {
        gap: 12px !important;
        row-gap: 12px !important;
    }

    /* Pankkiyhteystiedot: inline border-left 4px + padding-left 32px
       luovat ekstra-indentin "SAAJA"-riville suhteessa muuhun kortin
       sisältöön mobiilissa. Pienennä indent niin että border-accent
       säilyy mutta sisältö on samalla linjalla kuin PANKKI/TILINUMERO. */
    .entry-content .wp-block-group[style*="border-left"][style*="padding-left"] {
        padding-left: 16px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        margin-left: 0 !important;
    }

    /* Hero-coverit käyttävät 60svh (small viewport height) jos selain
       tukee — iOS Safarin dynaaminen toolbar ei aiheuta hyppyjä. */
    .ams-hero-cover,
    .ams-front-page > .entry-content > .wp-block-cover:first-child {
        min-height: 60svh !important;
    }

    .ams-card-grid,
    .ams-card-grid--3,
    .ams-card-grid--4 {
        grid-template-columns: 1fr;
    }

    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.5rem; }

    /* .ams-section-sääntö on jo §4:ssä — muuttujat päivittyvät tämän
       media-queryn root-override:n kautta, joten duplicate-sääntö poistettu. */

    /* Mobile header: enemmän padding vasempaan, jotta logo hengittää
       reunasta. Flex-container keskittaa site-brandingin ja menu-togglen
       pystysuunnassa automaattisesti (align-items:center GP:n oletus). */
    .inside-header {
        padding: 14px 20px 14px 22px !important;
        gap: 12px;
        align-items: center !important;
    }
    /* Site title: isompi ja selvästi näkyvä. Ellipsis hoitaa kapeat
       viewportit jos nimi ei mahdu. Line-height 1 + min-height 48 pitää
       tekstin ja hampurilaisen samalla baselinella. */
    .main-title,
    .site-title {
        display: flex !important;
        align-items: center;
        line-height: 1 !important;
    }
    .main-title a,
    .site-title a {
        white-space: nowrap !important;
        overflow: hidden;
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
        min-height: 48px;
        font-size: 1.5rem !important;
        line-height: 1 !important;
        word-break: keep-all;
    }

    /* Hero korkeus: max 60vh, ei peitä koko mobiilinäyttöä */
    .ams-hero-cover,
    .ams-front-page > .entry-content > .wp-block-cover:first-child {
        min-height: 60vh !important;
    }
    /* Hero H1: kapeampi clamp jotta sanat mahtuvat.
       hyphens:auto + suomen pitkät yhdyssanat johtivat kiusallisiin
       katkoihin "Alaky-län Metsästys-seura" iPhone 17 Prolla (Jussin
       palaute). Käytetään sen sijaan word-break:keep-all joka katkaisee
       vain välilyönneistä, + overflow-wrap:normal jotta selain ei tee
       merkkikohtaisia katkoja. Clamp kevennetty (7vw) jotta 17 Pron
       402 px leveydellä "Kauhavan Alakylän" ja "Metsästysseura Ry."
       mahtuvat kumpikin omille riveilleen. */
    .ams-hero-cover h1,
    .wp-block-cover h1 {
        font-size: clamp(1.875rem, 7vw, 2.75rem) !important;
        line-height: 1.05 !important;
        max-width: 100% !important;
        padding: 0 8px;
        hyphens: none !important;
        word-break: keep-all;
        overflow-wrap: normal;
    }
    /* Hero CTA -nappi: pienempi padding, salli 2-rivinen teksti */
    .ams-hero-cover .wp-block-button__link {
        font-size: 0.8125rem !important;
        padding: 16px 24px !important;
        white-space: normal;
        line-height: 1.3;
    }
    .ams-hero-cover .wp-block-buttons {
        margin-top: 32px !important;
    }

    /* ==== Cross-cutting tap-target korjaukset (WCAG 2.5.5) ====
       Tavoite: kaikki klikattavat elementit ≥44×44 px mobiilissa.

       Card-heading-linkit (h3 > a Stitch-korttien sisällä): koko otsikko
       klikkialueena, paddingilla. */
    .entry-content .wp-block-cover h3 > a,
    .entry-content .wp-block-column h3 > a,
    .entry-content .wp-block-column h4 > a {
        display: inline-block;
        min-height: 48px;
        padding: 10px 0;
        line-height: 1.15;
    }

    /* Entry-content sisältölistat: ul/ol > li > a -linkit ≥44px.
       Ei kohdista nappeihin, menun linkkeihin tai footer-linkkeihin. */
    .entry-content ul:not(.wp-block-buttons):not(.wp-block-navigation) > li > a,
    .entry-content ol > li > a {
        display: inline-block;
        min-height: 48px;
        padding: 10px 4px;
        line-height: 1.4;
    }

    /* Inline "Lue lisää", "Kaikki uutiset" yms. linkit kappaleissa:
       tehdään inline-block + padding että ne saavat riittävän tap-targetin
       ilman että kappale-layout hajoaa. */
    .entry-content p > a:only-child,
    .entry-content p.has-text-align-center > a,
    .entry-content .wp-block-group p > a[href]:where(:only-child) {
        display: inline-block;
        min-height: 48px;
        padding: 10px 12px;
        line-height: 1.4;
    }

    /* Tel/mailto -linkit (yhteystiedot, johtokunta, metsola) — inline
       tekstissä mutta tarvitsevat 48 px tap-targetin. inline-flex +
       align-items center keskittää tekstin pystyyn 48 px:iin — jolloin
       sen tekstin visuaalinen keskilinja täsmää flex-siskoelementtien
       (puhelin-ikoni, email-ikoni) kanssa. */
    .entry-content a[href^="tel:"],
    .entry-content a[href^="mailto:"] {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
        padding: 0 8px;
        line-height: 1.2;
        vertical-align: middle;
    }
    /* Jos samassa kappaleessa on icon-span + tel/mailto-linkki, inline-
       blockin (48 px min-height) baseline ei yhdy inline-spanin
       vertical-align:middle-kanssa → numero näyttää "putoavan" icon-
       viivalta. Korjaus: teemme kappaleesta flex-containerin jotta
       molemmat lapset keskitetään samalle linjalle. :has() hyvin
       tuettu 2025+ selaimissa (Safari 15.4+, Chrome 105+). */
    .entry-content p:has(> a[href^="tel:"]),
    .entry-content p:has(> a[href^="mailto:"]) {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    /* Ikoni-span: sama 48 px-kontti kuin linkki, jotta molempien sisäinen
       centrointi tapahtuu samalla laatikko-mitalla ja perceptuaalinen
       keskikohta täsmää. Muuten Material Symbols -glyfin visuaalinen
       massa (alas-oikealle) aiheuttaa 8-10 px optisen offsetin isoihin
       48 px tap-target-kontteihin verrattuna. */
    .entry-content p:has(> a[href^="tel:"]) > .material-symbols-outlined,
    .entry-content p:has(> a[href^="mailto:"]) > .material-symbols-outlined {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        min-width: 24px;
        line-height: 1 !important;
        margin-right: 0 !important;
        vertical-align: middle;
        font-size: 1.125rem !important;
    }

    /* Kaikki wp-block-columns stackautuvat yhteen sarakkeeseen mobiilissa.
       GP-oletus stackaa vain flex-basis %:n perusteella, mutta inline-tyylit
       (flex-basis:33.33% yms.) estävät sen. Pakotetaan column + 100% leveys
       border-box-laskennalla ettei inline-paddingit puske yli 320 px:n. */
    .entry-content .wp-block-columns {
        flex-direction: column !important;
        gap: 16px !important;
    }
    .entry-content .wp-block-columns > .wp-block-column {
        box-sizing: border-box;
        flex-basis: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }
    /* Kolumnien inline-paddingit kevennetään mobiilissa (48 px → 20 px)
       jotta sisältö mahtuu 320 px:n näytölle. */
    .entry-content .wp-block-column[style*="padding"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* ==== KRIITTINEN: Entry-content juuripadding ====
       GeneratePress-lapsiteema ei lisää automaattisesti vaakapaddingia
       .entry-content-juuritason lapsille, joilla ei ole omaa wrapperiä.
       Tämä kattaa "paljaat" <p>, <h2>, <ul> -blokit jotka ovat suoraan
       .entry-content:in alla ilman ryhmä/column-pakettia. */
    .entry-content > p,
    .entry-content > h1,
    .entry-content > h2,
    .entry-content > h3,
    .entry-content > h4,
    .entry-content > ul,
    .entry-content > ol,
    .entry-content > blockquote,
    .entry-content > figure:not(.wp-block-cover):not(.alignfull):not(.alignwide),
    .entry-content > .wp-block-image:not(.alignfull):not(.alignwide),
    .entry-content > .wp-block-table {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Alignfull-ryhmien sisällä olevat "paljaat" blokit saavat myös
       vaakapaddingin (historia, metsolan-varaus, ym.). */
    .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container > p,
    .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container > h1,
    .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container > h2,
    .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container > h3,
    .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container > h4,
    .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container > ul,
    .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container > ol,
    .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container > blockquote,
    .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container > .wp-block-table {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Kaikille wp-block-column-blokeille fallback-padding 20 px, jotta
       stackattu sisältö (Vaihe 1 column-stack) ei ole kiinni ruudun
       reunassa kun column-blockilla ei ole inline-paddingia. Inline-padding
       -sääntö yllä ylikirjoittaa tämän 20 px:llä kun se on paikallaan. */
    .entry-content .wp-block-columns > .wp-block-column:not([style*="padding"]) {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* GP .entry-header (page-otsikot): sisältää H1.entry-title-otsikon,
       joka on .inside-article:in suora lapsi ennen .entry-contentiä.
       Oma padding koska yllä olevat .entry-content > -säännöt eivät osu. */
    .entry-header {
        padding-left: 20px;
        padding-right: 20px;
    }
    .entry-header .entry-title {
        margin-top: 0;
        line-height: 1.15;
    }
    .entry-meta {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Blog-loop (ajankohtaista-archive + kategoria-archivet): GP renderöi
       postaukset .inside-article > .entry-header + .entry-summary/.entry-content.
       .entry-header saa paddingin yllä. .entry-summary > p + .entry-content > p
       tarvitsee myös padding-override koska entry-content on eri DOM-kontekstissa
       kuin sivun-pääsisältö. */
    .blog .inside-article .entry-summary,
    .archive .inside-article .entry-summary {
        padding-left: 20px;
        padding-right: 20px;
    }
    .blog .inside-article .entry-title,
    .archive .inside-article .entry-title {
        font-size: 1.625rem;
        line-height: 1.2;
        margin-top: 0;
    }
    /* Postausten erotus arkistolistalla */
    .blog .inside-article + .inside-article,
    .archive .inside-article + .inside-article {
        border-top: 1px solid var(--ams-surface-container-high);
        padding-top: 32px;
        margin-top: 32px;
    }
    /* Blog-archive "read-more" + kategoria-linkit entry-meta-rivillä */
    .blog .inside-article .entry-meta a,
    .archive .inside-article .entry-meta a {
        display: inline-block;
        min-height: 48px;
        padding: 10px 4px;
    }

    /* Gutenberg-flex-grupit joissa nowrap + monta lasta (esim. Metsola
       4-tilasto-ikoni-rivi) on mobiilissa pakotettava wrappaamaan tai
       stackautumaan, muuten ne vuotavat 320 px viewportin yli. */
    .entry-content .wp-block-group.is-layout-flex {
        flex-wrap: wrap !important;
    }
    .entry-content .wp-block-group.is-layout-flex > * {
        flex: 1 1 auto;
        min-width: 0;
    }
    /* Inline-paddingit .wp-block-groupille myös kevennetään */
    .entry-content .wp-block-group[style*="padding-left"],
    .entry-content .wp-block-group[style*="padding-right"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Footer-linkit: blokkitason, 48 px tap target, tiiviimpi */
    .site-footer a {
        display: inline-flex;
        align-items: center;
        padding: 4px 0;
        min-height: 48px;
        font-size: 1rem !important;
        line-height: 1.3;
    }
    .site-footer li {
        margin-bottom: 0 !important;
    }

    /* Footer widget spacing: lisää padding ja luo visuaalinen
       separaattori (hairline border-top) mobiilissa, koska 4 widgetiä
       stackautuvat peräkkäin ilman muuta visuaalista erottelua. Ensim-
       mäisessä widgetissä ei border-top jotta brand-blokki jää puhtaaksi. */
    .site-footer .footer-widgets-container,
    .site-footer .inside-footer-widgets {
        padding: 32px 24px 16px !important;
    }
    .site-footer .widget {
        padding-top: 24px !important;
        padding-bottom: 8px !important;
        margin-top: 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    .site-footer .footer-widget-1 .widget,
    .site-footer #footer-widgets > .widget:first-child,
    .site-footer div[class*="footer-widget-1"] .widget {
        border-top: none;
        padding-top: 0 !important;
    }

    /* Otsikot PIKALINKIT/YHTEYSTIEDOT/SIJAINTI: isommat + selvemmät */
    .site-footer h4,
    .site-footer h5 {
        font-size: 0.8125rem !important;
        letter-spacing: 0.18em !important;
        margin-bottom: 12px !important;
        color: var(--ams-on-primary) !important;
    }

    /* Inline footer-tekstin leipätekstit (Yhteystiedot-widget: Sihteeri,
       Puheenjohtaja, sähköposti) selvästi luettavaksi 15 px:iin. */
    .site-footer p {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }
    /* "AVAA KARTTALLA →" CTA: korosta selvemmäksi — border-bottom
       accent jotta se erottuu footer-listoista ja näyttää napilta. */
    .site-footer a[href*="maps"],
    .site-footer a[href*="map"] {
        padding: 10px 0 !important;
        border-bottom: 2px solid var(--ams-on-primary-container);
        align-self: flex-start;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* Interactive contact links footerissa: kirkas accent-sävy +
       alleviivaus jotta erottuvat pelkästä tekstistä. Scoped to mobile
       only to avoid desktop baseline regression. */
    .site-footer a[href^="tel:"],
    .site-footer a[href^="mailto:"] {
        color: var(--ams-secondary-container) !important;
        text-decoration: underline;
        text-decoration-color: rgba(255, 162, 106, 0.4);
        text-underline-offset: 3px;
    }
}

@media (max-width: 400px) {
    .main-title a,
    .site-title a {
        font-size: 1.3125rem !important;
    }
    .inside-header {
        padding: 14px 16px 14px 18px !important;
    }
}

@media (max-width: 600px) {
    /* .ams-ledger-table (johtokunta-toimikunnat): horisontaali scroll ei
       toimi intuitiivisesti mobiilissa — muunnetaan korttiriveiksi, joissa
       1. sarake on otsikko, 2. sarake metadata, 3. sarake kuvaus. */
    .ams-ledger-table {
        overflow-x: visible !important;
        display: block;
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
    .ams-ledger-table table,
    .ams-ledger-table tbody {
        display: block;
        width: 100%;
    }
    .ams-ledger-table thead { display: none; }
    .ams-ledger-table tr {
        display: block;
        padding: 16px 20px;
        margin: 0 0 12px 0;
        background: var(--ams-surface-container-low);
        border-radius: 2px;
        border-left: 3px solid var(--ams-secondary);
    }
    .ams-ledger-table td {
        display: block;
        padding: 0 !important;
        border: none !important;
    }
    .ams-ledger-table td:nth-child(1) {
        font-family: var(--ams-font-headline);
        font-size: 1.25rem;
        font-weight: 900;
        line-height: 1.15;
        color: var(--ams-primary);
        margin-bottom: 6px;
    }
    .ams-ledger-table td:nth-child(2) {
        font-size: 0.6875rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--ams-on-surface-variant);
        margin-bottom: 10px;
    }
    .ams-ledger-table td:nth-child(3) {
        font-size: 0.9375rem;
        line-height: 1.5;
        color: var(--ams-on-surface);
    }

    /* Yleiset Gutenberg-taulukot (esim. saaliskiintiöt): luettavat paddingit,
       zebra-rivit, kompakti font ilman reflowia (2-sarakkeiset mahtuvat
       320 px:iin). */
    .entry-content .wp-block-table:not(.ams-ledger-table) table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9375rem;
    }
    .entry-content .wp-block-table:not(.ams-ledger-table) th {
        background: var(--ams-surface-container);
        text-align: left;
        padding: 12px 10px !important;
        font-family: var(--ams-font-headline);
        font-size: 0.875rem;
        color: var(--ams-primary);
        border-bottom: 2px solid var(--ams-surface-container-high);
    }
    .entry-content .wp-block-table:not(.ams-ledger-table) td {
        padding: 12px 10px !important;
        border-bottom: 1px solid var(--ams-surface-container-high);
        vertical-align: top;
    }
    .entry-content .wp-block-table:not(.ams-ledger-table) tbody tr:nth-child(even) {
        background: var(--ams-surface-container-low);
    }
    /* Yhteystieto-kortit */
    .ams-contact-card {
        padding: 20px !important;
    }
    /* Metsola-gallerian sarakkeet: poista inline-korkeus mobiilissa */
    body .wp-block-column[style*="height"] {
        height: auto !important;
        max-height: 240px;
    }
    /* Sisältösivujen wp-block-cover paddingit kompaktimmiksi */
    .wp-block-cover:not(.ams-hero-cover) {
        padding: 32px 16px !important;
    }
}

/* ==========================================================================
   15. WP COVER BLOCK (Hero sections)
   ========================================================================== */

/* Only hero covers get 70vh, not all covers */
.ams-hero-cover {
    min-height: 70vh !important;
}

.wp-block-cover .wp-block-cover__inner-container {
    max-width: var(--ams-container-max);
    margin: 0 auto;
    padding: 0 var(--ams-container-padding);
    position: relative;
    z-index: 2;
}

/* Poista GP:n oletus side-padding cover-blokeista (inner-container hoitaa) */
body:not(.ams-front-page) .wp-block-cover.alignfull {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.ams-hero-cover h1,
.wp-block-cover h1 {
    font-family: var(--ams-font-headline) !important;
    color: white !important;
    font-weight: 900 !important;
    font-size: clamp(3rem, 7.5vw, 6rem) !important;
    letter-spacing: -0.05em !important;
    line-height: 1.0 !important;
    max-width: 56rem !important;
    margin-bottom: 16px !important;
}

/* Cover text: respect inline color, don't override with green */
.wp-block-cover p:not(.has-text-color) {
    font-family: var(--ams-font-body);
    color: var(--ams-on-primary-container);
}

/* ==========================================================================
   16. WP COLUMNS (override for card grids)
   ========================================================================== */

.wp-block-columns.ams-card-grid,
.wp-block-columns.ams-card-grid--3,
.wp-block-columns.ams-card-grid--4 {
    gap: 1px !important;
    background-color: var(--ams-surface-dim);
}

/* ==========================================================================
   17. IMAGES
   ========================================================================== */

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

/* Safer global overflow containment.
   `clip` (vs hidden) doesn't create a scroll container and works reliably
   on iOS Safari for body/html without breaking position:sticky children. */
html, body {
    overflow-x: clip;
}

.wp-block-image img {
    display: block;
}

/* Grayscale hover effect (like Stitch feature cards) */
.ams-img-hover img {
    filter: grayscale(1);
    opacity: 0.2;
    transition: all 0.5s ease;
}
.ams-img-hover:hover img {
    filter: grayscale(0);
    opacity: 0.4;
}

/* ==========================================================================
   18. FRONT PAGE SPECIFIC
   ========================================================================== */

/* Hide default page title on front page */
.ams-front-page .entry-header,
.ams-front-page .page-header {
    display: none !important;
}

/* Hero cover: match Stitch (dark green bg, image 60% opacity, gradient from bottom) */
.ams-hero-cover {
    min-height: 870px !important;
    margin-top: -20px;
}
.ams-hero-cover .wp-block-cover__background {
    background-color: var(--ams-primary) !important;
    opacity: 0.45 !important;
}
/* Hero CTA button */
.ams-hero-cover .wp-block-button__link {
    font-size: 0.875rem !important;
    padding: 20px 40px !important;
}
.ams-hero-cover .wp-block-buttons {
    margin-top: 48px !important;
}
/* Add gradient overlay from bottom (like Stitch bg-gradient-to-t from-primary) */
.ams-hero-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--ams-primary) 0%, transparent 60%);
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
}
.ams-hero-cover .wp-block-cover__inner-container {
    position: relative;
    z-index: 2;
}

/* Feature cards: grayscale images like Stitch (opacity-40) */
/* Only target covers INSIDE columns (feature cards), not the hero cover */
.ams-front-page .wp-block-column .wp-block-cover .wp-block-cover__image-background {
    filter: grayscale(1);
    opacity: 0.40 !important;
}
.ams-front-page .wp-block-column .wp-block-cover:hover .wp-block-cover__image-background {
    filter: grayscale(0);
    opacity: 0.50 !important;
    transition: all 0.5s ease;
}

/* Feature card covers: surface bg for the overlay */
.ams-front-page .wp-block-column .wp-block-cover .wp-block-cover__background {
    background-color: var(--ams-surface) !important;
    opacity: 0.60 !important;
}

/* Feature cards section: gap 4px like Stitch */
.ams-front-page .wp-block-group:nth-child(2) .wp-block-columns {
    gap: 4px !important;
}

/* Only first cover (hero) gets full height */
.ams-front-page > .entry-content > .wp-block-cover:first-child {
    min-height: 870px !important;
}
/* Feature card covers: square, border-bottom hover like Stitch */
.ams-front-page .wp-block-column .wp-block-cover {
    min-height: 320px !important;
    border-bottom: 4px solid transparent !important;
    transition: border-color 0.3s ease;
}
.ams-front-page .wp-block-column .wp-block-cover:hover {
    border-bottom-color: var(--ams-secondary) !important;
}

/* Feature cards: equal height on desktop */
@media (min-width: 768px) {
    .ams-front-page .wp-block-columns .wp-block-column {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
}

/* News section links inherit secondary color */
.ams-front-page .wp-block-column a {
    color: var(--ams-secondary);
}

/* Contact bar icons alignment */
.ams-front-page .material-symbols-outlined {
    vertical-align: middle;
    margin-right: 8px;
}

/* Uutisosion sarakkeet: 0 gap + border */
.ams-front-page .entry-content > .wp-block-group:nth-of-type(3) .wp-block-columns:last-of-type {
    gap: 0 !important;
}
.ams-front-page .entry-content > .wp-block-group:nth-of-type(3) .wp-block-columns:last-of-type .wp-block-column:not(:last-child) {
    border-right: 1px solid var(--ams-surface-dim) !important;
}

/* Poista kaikki inter-section marginaalit etusivulta */
.ams-front-page .entry-content > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.ams-front-page .entry-content > .ams-hero-cover {
    margin-top: -20px !important;
}

/* Eliminate gap between last content block (green CTA) and footer */
.ams-front-page .inside-article,
.ams-front-page article,
.ams-front-page .site-main,
.ams-front-page main,
.ams-front-page .site-content {
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* GP separate-containers adds 40px padding to inside-article — kill it on front page */
.ams-front-page.separate-containers .inside-article {
    padding: 0 !important;
}
/* GP separate-containers adds 20px margin to site-main */
.ams-front-page.separate-containers .site-main {
    margin: 0 !important;
}
/* Keep footer in normal flow after the last front-page content section. */
.ams-front-page .site-footer {
    margin-top: 0 !important;
}

/* (Footer styles consolidated in section 3 above) */

/* ==========================================================================
   20. INNER PAGES (non-front-page)
   ========================================================================== */

/* Content pages: hide entry title if using cover hero */
.ams-hide-title .entry-header {
    display: none !important;
}

/* All inner pages: proper content width and spacing */
body:not(.ams-front-page) .inside-article {
    padding-top: 48px !important;
}

body:not(.ams-front-page) .entry-content {
    padding: 0;
}

/* Single posts created by editors are usually simple title + paragraph
   articles. Keep that layout readable and away from the viewport edge. */
body.single-post .inside-article {
    box-sizing: border-box;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 40px) clamp(64px, 8vw, 96px) !important;
}

body.single-post .entry-header {
    margin-bottom: 32px;
}

body.single-post .ams-back-link {
    display: inline-block;
    margin-bottom: 16px;
}

body.single-post .entry-title {
    font-size: clamp(2.75rem, 8vw, 5.5rem) !important;
    line-height: 0.98 !important;
    margin: 0 0 16px !important;
    overflow-wrap: anywhere;
}

body.single-post .entry-header .entry-meta {
    margin-top: 0;
}

body.single-post .entry-content > p,
body.single-post .entry-content > h2,
body.single-post .entry-content > h3,
body.single-post .entry-content > h4,
body.single-post .entry-content > ul,
body.single-post .entry-content > ol,
body.single-post .entry-content > blockquote,
body.single-post .entry-content > figure:not(.alignfull):not(.alignwide),
body.single-post .entry-content > .wp-block-image:not(.alignfull):not(.alignwide),
body.single-post .entry-content > .wp-block-table {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Alternating section backgrounds for long content */
.ams-chapter:nth-child(odd) {
    background-color: var(--ams-surface);
    padding: 64px 0;
}
.ams-chapter:nth-child(even) {
    background-color: var(--ams-surface-container-low);
    padding: 64px 0;
}

/* ==========================================================================
   21. STITCH PARITY FIXES (Round 2)
   ========================================================================== */

/* 1.1 Piilota GP:n dropdown-nuolet navigaatiosta */
.main-navigation .dropdown-menu-toggle {
    display: none !important;
}

/* 1.2 Alasivujen inter-section marginaalien poisto */
body:not(.ams-front-page) .entry-content > .alignfull + .alignfull {
    margin-top: 0 !important;
}
body:not(.ams-front-page) .entry-content > .wp-block-cover + .wp-block-group.alignfull {
    margin-top: 0 !important;
}

/* 1.3 Cover-hero ja alignfull-sivujen padding/width-korjaus */
body.ams-hide-title .inside-article {
    padding-top: 0 !important;
}
/* Sivut joiden sisältö on kokonaan alignfull-lohkoja (historia, metsola) */
body:not(.ams-front-page) .entry-content > .wp-block-cover:first-child {
    margin-top: -48px !important;
}
/* Korjaa GP:n alignfull leveys full-width-content sivuilla */
body.full-width-content {
    overflow-x: hidden;
}
.full-width-content .site.grid-container {
    max-width: 100% !important;
}
body.full-width-content .inside-article {
    padding: 0 !important;
}
/* Estä GP:n vw-pohjainen alignfull, käytä 100% tilalla */
body.full-width-content .entry-content .alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
/* Alignfull myös separate-containers sivuilla (johtokunta ym.) */
.separate-containers .entry-content .alignfull {
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    max-width: 100vw !important;
    width: 100vw !important;
}
/* Inner pages: add spacing between last content block and footer */
body:not(.ams-front-page) .site-footer {
    margin-top: 0 !important;
}

/* Front page latest posts: keep the section dynamic via Query Loop while
   preserving the old three-card editorial layout. */
.ams-front-page .ams-latest-posts .wp-block-post-template {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 !important;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ams-front-page .ams-latest-posts .wp-block-post {
    margin: 0;
}

.ams-front-page .ams-latest-posts__card {
    box-sizing: border-box;
    height: 100%;
}

.ams-front-page .ams-latest-posts .wp-block-post:nth-child(even) .ams-latest-posts__card {
    background-color: #ebe8e0 !important;
}

.ams-front-page .ams-latest-posts .wp-block-post:not(:last-child) .ams-latest-posts__card {
    border-right: 1px solid #dcdad2;
}

.ams-front-page .ams-latest-posts .wp-block-post-title a {
    color: #173317;
    text-decoration: none;
}

.ams-front-page .ams-latest-posts .wp-block-post-title a:hover,
.ams-front-page .ams-latest-posts .wp-block-post-title a:focus {
    text-decoration: underline;
}

.ams-front-page .ams-latest-posts .wp-block-post-excerpt__excerpt {
    margin-bottom: 32px;
}

.ams-front-page .ams-latest-posts .wp-block-post-excerpt__more-link {
    color: #934b19;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-decoration: none;
    text-transform: uppercase;
}

.ams-front-page .ams-latest-posts .wp-block-post-excerpt__more-link::after {
    content: " \2192";
}

@media (max-width: 768px) {
    .ams-front-page .ams-latest-posts .wp-block-post-template {
        grid-template-columns: 1fr;
    }

    .ams-front-page .ams-latest-posts .wp-block-post:not(:last-child) .ams-latest-posts__card {
        border-right: 0;
        border-bottom: 1px solid #dcdad2;
    }
}

/* Content safety padding for imported Gutenberg blocks. Some pages have
   full-width content wrappers but direct text blocks with no horizontal inset. */
body:not(.ams-front-page) .entry-content > p,
body:not(.ams-front-page) .entry-content > h1,
body:not(.ams-front-page) .entry-content > h2,
body:not(.ams-front-page) .entry-content > h3,
body:not(.ams-front-page) .entry-content > h4,
body:not(.ams-front-page) .entry-content > ul,
body:not(.ams-front-page) .entry-content > ol,
body:not(.ams-front-page) .entry-content > blockquote,
body:not(.ams-front-page) .entry-content > figure:not(.wp-block-cover):not(.alignfull):not(.alignwide),
body:not(.ams-front-page) .entry-content > .wp-block-image:not(.alignfull):not(.alignwide),
body:not(.ams-front-page) .entry-content > .wp-block-table,
body:not(.ams-front-page) .entry-content > .wp-block-group.alignfull.has-background > p,
body:not(.ams-front-page) .entry-content > .wp-block-group.alignfull.has-background > h1,
body:not(.ams-front-page) .entry-content > .wp-block-group.alignfull.has-background > h2,
body:not(.ams-front-page) .entry-content > .wp-block-group.alignfull.has-background > h3,
body:not(.ams-front-page) .entry-content > .wp-block-group.alignfull.has-background > h4,
body:not(.ams-front-page) .entry-content > .wp-block-group.alignfull.has-background > ul,
body:not(.ams-front-page) .entry-content > .wp-block-group.alignfull.has-background > ol,
body:not(.ams-front-page) .entry-content > .wp-block-group.alignfull.has-background > blockquote,
body:not(.ams-front-page) .entry-content > .wp-block-group.alignfull.has-background > .wp-block-table {
    padding-left: clamp(20px, 4vw, 40px) !important;
    padding-right: clamp(20px, 4vw, 40px) !important;
    box-sizing: border-box;
}

body:not(.ams-front-page) .entry-content > .wp-block-group.alignfull > .wp-block-columns > .wp-block-column:not([style*="padding"]),
body:not(.ams-front-page) .entry-content > .wp-block-columns.alignfull > .wp-block-column:not([style*="padding"]) {
    padding-left: clamp(20px, 4vw, 40px) !important;
    padding-right: clamp(20px, 4vw, 40px) !important;
    box-sizing: border-box;
}

/* Some imported page sections have inline padding-top:0 even when the first
   visible block is a heading. Restore section breathing room from the theme. */
.entry-content > .wp-block-group.alignfull.has-background:has(> .wp-block-heading:first-child),
.entry-content > .wp-block-group.alignfull.has-background:has(> .wp-block-columns:first-child h2.wp-block-heading) {
    padding-top: clamp(48px, 6vw, 80px) !important;
}
.entry-content > .wp-block-group.alignfull.has-background:has(> .wp-block-heading:first-child) > .wp-block-heading:first-child {
    margin-top: 0 !important;
}

/* 1.3 Ajankohtaista-arkiston H1-header (is_home, page_for_posts=19) */
.ams-archive-header {
    position: relative;
    background-color: #173317;
    background-image:
        linear-gradient(to bottom, rgba(23, 51, 23, 0.55), rgba(23, 51, 23, 0.85)),
        url('assets/img/hero/nuoriso-talvinuotio.jpg');
    background-size: cover;
    background-position: center;
    padding: 96px 32px 80px;
    margin: 0 0 32px;
    min-height: 320px;
    display: flex;
    align-items: center;
}
.ams-archive-header__inner {
    max-width: var(--ams-container-max);
    margin: 0 auto;
    width: 100%;
}
.ams-archive-header__eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #d4c896;
    margin: 0 0 8px 0;
}
.ams-archive-header__title {
    font-family: var(--ams-font-headline);
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: #ffffff;
    margin: 0;
}
.ams-archive-header__desc {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.88);
    margin: 16px 0 0 0;
    max-width: 720px;
}
@media (max-width: 767px) {
    .ams-archive-header {
        padding: 64px 20px 48px;
        min-height: 240px;
    }
    .ams-archive-header__desc {
        font-size: 1rem;
    }
}

/* 1.4 Galleria-kuvien grayscale-efekti.
   Vain hover-kykyisissä selaimissa (desktop) — kosketusnäytöillä
   :hover ei toimi, joten kuvat olisivat pysyvästi 30% grayscale. */
@media (hover: hover) and (pointer: fine) {
    .ams-galleria .wp-block-image img {
        filter: grayscale(0.3);
        transition: filter 0.7s ease;
    }
    .ams-galleria .wp-block-image:hover img {
        filter: grayscale(0);
    }
}

/* A8: Galleria-thumbnaileille content-visibility:auto. Ohjaa selaimen
   skippaamaan off-screen rendauksen (ja sitä myöten kuvien latauksen).
   Chrome loading="lazy" preloadaa ~3000 px viewportin ulkopuolelta, mikä
   lataa kymmenia ylimaaraisia thumbnaileja pitkalla galleria-sivulla.
   contain-intrinsic-size sailyttaa layout-koon scroll-positiota varten. */
.ams-kuvagalleria.wp-block-gallery.has-nested-images .wp-block-image {
    content-visibility: auto;
    contain-intrinsic-size: 200px 150px;
}

/* A8 (jatko): Estä leftover-rivin orphan-itemin venyminen.
   WP block gallery käyttää flex-grow:1 → kun viimeisellä rivillä on
   1 tai 2 leftover-itemiä (esim. 43 kuvaa = 14×3 + 1), nämä venyvät
   täyttämään tilan jättäen yhden kuvan kokonaisuudessaan koon 278×362.
   Targetoidaan vain orphan-itemit nth-child-selektoreilla, jolloin
   muu galleria säilyy WP-defaultin mukaisena. */
.ams-kuvagalleria.wp-block-gallery.has-nested-images .wp-block-image:last-child:nth-child(3n+1),
.ams-kuvagalleria.wp-block-gallery.has-nested-images .wp-block-image:last-child:nth-child(3n+2),
.ams-kuvagalleria.wp-block-gallery.has-nested-images .wp-block-image:nth-last-child(2):nth-child(3n+1) {
    flex-grow: 0 !important;
    max-width: calc(33.333% - 8px) !important;
}

/* 1.5 JÄSENKIRJAUDU CTA-nappi navigaatiossa */
.main-navigation .ams-nav-cta > a {
    background-color: var(--ams-primary) !important;
    color: var(--ams-on-primary) !important;
    padding: 12px 24px !important;
    font-family: var(--ams-font-label) !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    opacity: 1 !important;
    border-bottom: none !important;
}
.main-navigation .ams-nav-cta > a:hover {
    background-color: var(--ams-primary-container) !important;
}

/* ==========================================================================
   22. METSASTYSALUEET PAGE — Stitch parity
   ========================================================================== */

/* Hero map: grayscale + contrast like Stitch */
.ams-hero-map {
    position: relative;
    overflow: hidden;
}
/* WP wrappaa group-blokin ympärille .wp-block-group__inner-container -divin
   joka saa 40 px paddingin → kuva supistuu 1200px:iin 1280px:n wrapin
   sisällä, ja ::after gradientti jää näkyviin 40 px reunoille ilman kuvaa
   alla. Nolllataan padding jotta kuva täyttää wrapin reunasta reunaan. */
.ams-hero-map > .wp-block-group__inner-container {
    padding: 0 !important;
    max-width: none !important;
}
.ams-hero-map img {
    filter: grayscale(1) contrast(1.25) !important;
    opacity: 0.9 !important;
    transition: transform 0.7s ease;
}
.ams-hero-map:hover img {
    transform: scale(1.05);
}
/* Gradient overlay from bottom */
.ams-hero-map::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(23, 51, 23, 0.4) 0%, transparent 60%);
    pointer-events: none;
    z-index: 1;
}

/* Map location badge (bottom-left on hero map) */
.ams-hero-map .ams-map-location-badge,
.ams-map-location-badge {
    position: absolute !important;
    bottom: 32px !important;
    left: 32px !important;
    z-index: 3 !important;
    background-color: var(--ams-surface) !important;
    padding: 24px !important;
    max-width: 320px;
}
/* GP adds inner-container wrapper — neutralize it */
.ams-map-location-badge > .wp-block-group__inner-container {
    padding: 0 !important;
}
.ams-map-location-badge h3 {
    font-family: var(--ams-font-headline) !important;
    font-size: 1.5rem !important;
    color: var(--ams-primary) !important;
    margin-bottom: 8px !important;
    margin-top: 0 !important;
}
.ams-map-location-badge p {
    font-family: var(--ams-font-label) !important;
    font-size: 0.625rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    color: var(--ams-on-surface-variant) !important;
    margin: 0 !important;
}

/* Map detail badge (top-right corner) */
.ams-map-detail-badge {
    position: relative;
}
.ams-map-detail-badge::after {
    content: 'Detalji';
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--ams-primary);
    color: var(--ams-on-primary);
    font-family: var(--ams-font-label);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 12px 16px;
    z-index: 2;
}

/* Icon container for rauhoitusalueet cards */
.ams-icon-container {
    width: 64px !important;
    height: 64px !important;
    background-color: var(--ams-surface) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 24px !important;
    padding: 0 !important;
}
.ams-icon-container p {
    margin: 0 !important;
    line-height: 1 !important;
}

/* Narrow separator (Stitch uses 96px centered bar) */
.ams-narrow-separator .wp-block-separator,
.wp-block-separator.ams-narrow {
    max-width: 96px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 3px !important;
    border: none !important;
}

/* Karttamerkkien selitteet legend section */
.ams-legend-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 1px !important;
    background-color: var(--ams-surface-dim) !important;
}
.ams-legend-item {
    background-color: var(--ams-surface) !important;
    padding: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}
.ams-legend-item .ams-legend-line {
    height: 4px;
    width: 100%;
}
.ams-legend-item span {
    font-family: var(--ams-font-label) !important;
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.15em !important;
    font-weight: 700 !important;
}

@media (max-width: 1024px) {
    .ams-legend-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 600px) {
    .ams-legend-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .ams-map-location-badge {
        bottom: 16px;
        left: 16px;
        padding: 16px !important;
    }
}

/* ==========================================================================
   19. MOBILE HAMBURGER MENU — "LEDGER DRAWER" (Stitch Heritage & Hearth)
   ==========================================================================
   Mobiilissa .main-navigation on .inside-header-flex-rivin lapsi ja saa
   oletuksena kapean sarakkeen. Kun toggled, .main-nav breikkaa ulos
   absolute-positioidulla drawer-paneelilla .site-headerin pohjaan (sticky =
   relative positioning context). GP:n oma menu-toggle JS hoitaa .toggled-
   luokan. Ei custom-JS:ää. */
/* Scroll-lock kun drawer on auki (sovelletaan kaikilla leveyksillä, koska
   JS lisää luokan vain drawer-avauksen yhteydessä mobiilissa).
   Luokka html:lla varmistaa että myös document element lukkiutuu
   (pelkkä body ei riitä kun scrollaava elementti on <html>). */
html.ams-menu-open,
html.ams-menu-open body.ams-menu-open {
    overflow: hidden !important;
    touch-action: none;
}

@media (max-width: 767px) {
    /* overflow-x hoidettu globaalisti html,body{overflow-x:clip} kautta
       (osa 17 IMAGES). Tämä lohko jätetty merkiksi aiemmasta hidden-
       overriddesta. */

    /* Body-teksti isompi mobiilissa: GP-oletus (14-15px) on liian pieni
       ulkokäyttöön ja vanhempille lukijoille. 17px + väljempi line-height
       on tutkitusti mobiiliselle luettavuudelle paras kompromissi. */
    body,
    .entry-content p,
    .entry-content li {
        font-size: 17px;
        line-height: 1.65;
    }

    /* Otsikoille riittava breathing-room mobiilissa — erottaa osiot
       visuaalisesti tekstisisällössä (esim. metsastysalueet, jasenyys,
       toiminta joissa on paljon alaotsikoita peräkkäin). */
    .entry-content h2.wp-block-heading,
    .entry-content > h2 {
        margin-top: 2.25em;
        margin-bottom: 0.6em;
    }
    .entry-content h3.wp-block-heading,
    .entry-content > h3 {
        margin-top: 1.6em;
        margin-bottom: 0.45em;
    }
    .entry-content h2 + h3,
    .entry-content h2 + p + h3 {
        margin-top: 0.8em;
    }

    /* Header-rivi: kompakti ja flex-row (title + toggle) */
    .inside-header {
        padding: 16px !important;
        gap: 12px;
        flex-wrap: nowrap;
        align-items: center;
    }
    .site-branding { flex: 1 1 auto; min-width: 0; }
    .main-navigation {
        flex: 0 0 auto;
        position: static;
        width: auto !important;
        background: transparent !important;
    }

    /* Menu-toggle: typografinen nappi, Newsreader, primary, uppercase */
    .main-navigation .menu-toggle {
        display: flex !important;
        align-items: center;
        gap: 8px;
        height: 48px !important;
        min-height: 48px !important;
        min-width: 48px;
        padding: 0 14px !important;
        background: transparent !important;
        border: none !important;
        color: var(--ams-primary) !important;
        font-family: var(--ams-font-headline) !important;
        font-weight: 900 !important;
        font-size: 0.875rem !important;
        line-height: 1 !important;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        cursor: pointer;
    }
    .main-navigation .menu-toggle .gp-icon { color: var(--ams-primary); }
    .main-navigation .menu-toggle .gp-icon svg { width: 22px; height: 22px; fill: currentColor; }
    .main-navigation.toggled .menu-toggle {
        background: var(--ams-primary) !important;
        color: var(--ams-on-primary) !important;
    }
    .main-navigation.toggled .menu-toggle .gp-icon { color: var(--ams-on-primary); }

    /* .main-nav piilossa oletuksena */
    .main-navigation .main-nav {
        display: none !important;
    }

    /* Avattu drawer: fixed full-width overlay viewportiin, GP:n sticky
       headerin alle. Fixed eliminoi flex-containerin vaikutuksen leveyteen.
       Solid surface-bg — ei läpikuultavuutta (scrim aiheuttaisi olive-cast).
       border-bottom korvaa entisen box-shadowin tonaalisena "lift"-rajana. */
    .main-navigation.toggled .main-nav {
        display: block !important;
        position: fixed !important;
        top: var(--ams-mobile-header-h, var(--ams-header-h-fallback, 76px));
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: calc(100vh - var(--ams-mobile-header-h, var(--ams-header-h-fallback, 76px)));
        max-height: calc(100dvh - var(--ams-mobile-header-h, var(--ams-header-h-fallback, 76px)));
        overflow-y: auto;
        background: var(--ams-surface) !important;
        background-color: var(--ams-surface) !important;
        padding: 8px 0 64px 0;
        z-index: 99;
        border-bottom: 4px solid var(--ams-surface-container-high);
        -webkit-overflow-scrolling: touch;
    }
    .main-navigation.toggled .main-nav > ul {
        display: block !important;
        list-style: none;
        padding: 0 !important;
        margin: 0 !important;
        width: 100%;
    }

    /* Parent-item: "ledger section" — serif headline-rivi, tonaali blokki.
       Design-system adherence: ei 1px-borderia, vaan vuorottelevat
       surface-tasot tonaaliseksi erotukseksi. */
    .main-navigation.toggled .main-nav > ul > li {
        display: block;
        position: static;
        width: 100%;
        margin: 0 !important;
        padding: 0;
        background: transparent;
        border: none;
    }
    .main-navigation.toggled .main-nav > ul > li:nth-child(even) {
        background: var(--ams-surface-container-low);
    }

    .main-navigation.toggled .main-nav > ul > li > a {
        display: block !important;
        font-family: var(--ams-font-headline) !important;
        font-size: 1.625rem !important;
        font-weight: 900 !important;
        text-transform: uppercase !important;
        letter-spacing: -0.035em !important;
        line-height: 1.05 !important;
        color: var(--ams-primary) !important;
        opacity: 1 !important;
        padding: 28px 24px 14px 24px !important;
        min-height: 48px;
        border-bottom: none !important;
        background: transparent !important;
        text-decoration: none;
    }
    .main-navigation.toggled .main-nav > ul > li.current-menu-item > a,
    .main-navigation.toggled .main-nav > ul > li.current-menu-parent > a,
    .main-navigation.toggled .main-nav > ul > li.current-menu-ancestor > a {
        background: var(--ams-surface-container-low) !important;
        box-shadow: inset 4px 0 0 var(--ams-secondary);
    }
    /* Parent ilman alavalikkoa saa saman padding-mitan mutta vähemmän top-paddingia */
    .main-navigation.toggled .main-nav > ul > li:not(.menu-item-has-children) > a {
        padding-bottom: 28px !important;
    }

    /* Sub-menu: kaikki alavalikot auto-expanded (ei JS-accordionia).
       Yksi selkeä selector — ei duplicate listaa. .main-nav on piilossa
       oletuksena, joten sub-menu näkyy vain toggled-tilassa.

       KRIITTINEN: GP parent theme asettaa .main-navigation ul ul
       { pointer-events: none; } dropdown-hover-logiikkaan. Ilman
       override:a alavalikkolinkit eivät ole klikattavissa mobiilissa. */
    .main-navigation.toggled .main-nav .sub-menu {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        max-width: 100% !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 24px 20px 24px !important;
        list-style: none;
        pointer-events: auto !important;
    }
    .main-navigation.toggled .main-nav .sub-menu,
    .main-navigation.toggled .main-nav .sub-menu > li,
    .main-navigation.toggled .main-nav .sub-menu > li > a {
        pointer-events: auto !important;
    }
    .main-navigation.toggled .main-nav .sub-menu > li {
        display: block;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }
    .main-navigation.toggled .main-nav .sub-menu > li > a {
        display: flex !important;
        align-items: center;
        font-family: var(--ams-font-body) !important;
        font-size: 0.9375rem !important;
        font-weight: 500 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: var(--ams-on-surface) !important;
        opacity: 0.82;
        padding: 12px 0 12px 16px !important;
        min-height: 48px !important;
        line-height: 1.35 !important;
        border: none !important;
        border-left: 2px solid var(--ams-outline-variant) !important;
        background: transparent !important;
        text-decoration: none;
    }
    .main-navigation.toggled .main-nav .sub-menu > li > a::before {
        content: '';
        display: inline-block;
        width: 14px;
        height: 1px;
        background: var(--ams-secondary);
        margin-right: 14px;
        flex-shrink: 0;
    }
    .main-navigation.toggled .main-nav .sub-menu > li.current-menu-item > a,
    .main-navigation.toggled .main-nav .sub-menu > li > a:hover {
        color: var(--ams-primary) !important;
        opacity: 1;
        border-left-color: var(--ams-primary) !important;
    }

    /* Piilota dropdown-arrow -span (ei klikattavuutta <a>:n sisällä) */
    .main-navigation .dropdown-menu-toggle {
        display: none !important;
    }

    /* Drawerin sisäänliuku: animoi lapsi <ul>, koska .main-nav on
       display:none oletuksena eikä transitio toimi display-vaihdossa.
       Lapsi-animaatio fiirasutuu kerran kun .toggled lisätään. */
    .main-navigation.toggled .main-nav > ul {
        animation: ams-drawer-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
}

@keyframes ams-drawer-in {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Kunnioita käyttäjän reduced-motion -asetusta */
@media (prefers-reduced-motion: reduce) {
    .main-navigation.toggled .main-nav > ul {
        animation: none !important;
    }
}

/* Alle 380 px (iPhone SE ja kapeammat): tiiviimmät section-paddingit
   jotta sisältö saa enemmän tilaa. */
@media (max-width: 379px) {
    :root {
        --ams-section-padding: 24px;
        --ams-container-padding: 12px;
    }
    /* H1 pienempi iPhone SE:lle — alle 380 px viewportilla "Yhteystiedot"
       (12 char) ei mahdu yhdellä rivillä 30 px fontilla, kun kontti on
       rajatusti ~216 px. Clampataan matalammin. */
    .entry-content h1,
    article h1.entry-title {
        font-size: clamp(1.375rem, 6vw, 1.75rem) !important;
    }
    .entry-content h2 {
        font-size: clamp(1.125rem, 5vw, 1.5rem) !important;
    }
    .entry-content h3 {
        font-size: clamp(1rem, 4vw, 1.25rem) !important;
    }
    /* Column-padding tiiviimmin <380 px, jotta otsikot saavat tilaa.
       A8 vaatii ≥16 px jotta teksti ei osu viewport-reunaan. */
    .entry-content .wp-block-column[style*="padding"] {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Alle 420px: piilota "Menu"-teksti visuaalisesti mutta säilytä SR:lle
   (accessible name; axe vaatii button-name). Omana ylätason media-querynä
   luettavuuden vuoksi. */
@media (max-width: 419px) {
    .main-navigation .menu-toggle:not(:has(.gp-icon))::before {
        content: "☰";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        font-family: var(--ams-font-body);
        font-size: 1.45rem;
        line-height: 1;
        color: currentColor;
    }
    .main-navigation.toggled .menu-toggle:not(:has(.gp-icon))::before {
        content: "×";
        font-size: 1.7rem;
    }
    .main-navigation .menu-toggle .mobile-menu,
    .main-navigation .menu-toggle > span:not(.gp-icon):not(.screen-reader-text) {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    .main-navigation .menu-toggle {
        padding: 0 10px !important;
        gap: 0;
    }
}

/* ==========================================================================
   20. EDITOR UTILITIES + SETTINGS FOOTER
   ========================================================================== */

.ams-card {
    background: var(--ams-surface-container-low);
    border-radius: 8px;
    padding: 24px;
}

.ams-label {
    color: var(--ams-secondary);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ams-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
}

.ams-callout {
    background: var(--ams-surface-container);
    border-left: 4px solid var(--ams-secondary);
    padding: 24px;
}

.ams-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    border-radius: 4px;
    padding: 12px 18px;
    background: var(--ams-primary);
    color: var(--ams-on-primary);
    font-weight: 800;
    text-decoration: none;
}

.ams-footer .footer-widgets-container {
    padding: 48px 24px;
}

.ams-footer {
    clear: both;
}

.ams-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin: 0;
}

.ams-footer__section h4,
.ams-footer__section h5 {
    color: var(--ams-on-primary);
    font-family: var(--ams-font-headline);
    font-weight: 800;
    margin-bottom: 10px;
}

.ams-footer__section h4 {
    font-size: 1.25rem;
}

.ams-footer__section h5 {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ams-footer__section p,
.ams-footer__section li {
    color: var(--ams-on-primary-muted);
    font-size: 0.8125rem;
    line-height: 1.8;
    margin-bottom: 0;
}

.ams-footer__section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ams-footer__section li {
    margin-bottom: 8px;
}

.ams-footer__section a {
    color: var(--ams-on-primary-muted);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.ams-footer__section a[href^="tel:"] {
    color: var(--ams-secondary);
    text-decoration: none;
}

@media (max-width: 900px) {
    .ams-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .ams-footer__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .ams-footer .footer-widgets-container {
        padding: 36px 20px;
    }
}