/*
Theme Name:   Fluenzkraft
Theme URI:    https://fluenzkraft.com
Description:  Editorial child theme for Fluenzkraft, Swiss Modernism 2.0, Newsreader + Roboto, editorial-pink accent. Built on Kadence.
Author:       Fluenzkraft
Version:      1.0.0
Template:     kadence
Text Domain:  fluenzkraft-child
*/

/* ==========================================================================
   FONTS — Newsreader (display/serif headings) + Roboto (body)
   Loaded via <link> in head (functions.php) for non-blocking parallel fetch.
   Fallback metrics matched here to eliminate FOUT layout shift.
   ========================================================================== */
@font-face {
    font-family: 'Newsreader Fallback';
    src: local('Georgia');
    size-adjust: 99%;
    ascent-override: 95%;
    descent-override: 22%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Roboto Fallback';
    src: local('Arial');
    size-adjust: 100%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%;
}

/* ==========================================================================
   DESIGN TOKENS — Swiss Modernism 2.0, editorial palette
   ========================================================================== */
:root {
    /* Color tokens */
    --bsmm-bg:           #FAFAFA;
    --bsmm-bg-elev:      #FFFFFF;
    --bsmm-fg:           #09090B;
    --bsmm-fg-soft:      #18181B;
    --bsmm-fg-muted:     #52525B;
    --bsmm-fg-subtle:    #71717A;
    --bsmm-border:       #E4E4E7;
    --bsmm-border-soft:  #F4F4F5;
    --bsmm-muted:        #E8ECF0;
    --bsmm-accent:       #EC4899;       /* editorial pink */
    --bsmm-accent-hover: #DB2777;
    --bsmm-accent-soft:  #FCE7F3;
    --bsmm-destructive:  #DC2626;
    --bsmm-ring:         #18181B;

    /* Type tokens — fallback fonts use overrides above for zero layout shift */
    --bsmm-font-serif:   'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
    --bsmm-font-sans:    'Roboto', 'Roboto Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --bsmm-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Layout tokens */
    --bsmm-content-width: 720px;
    --bsmm-grid-width:    1200px;
    --bsmm-radius-sm:     4px;
    --bsmm-radius-md:     6px;
    --bsmm-radius-lg:     8px;

    /* Motion */
    --bsmm-ease:         cubic-bezier(0.22, 1, 0.36, 1);
    --bsmm-dur-fast:     150ms;
    --bsmm-dur-base:     220ms;
}

/* ==========================================================================
   BASE — body, anchors, focus
   ========================================================================== */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
body.wp-singular,
.site,
.entry-content {
    background-color: var(--bsmm-bg) !important;
    color: var(--bsmm-fg) !important;
    font-family: var(--bsmm-font-sans) !important;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: -0.005em;
}

/* Selection */
::selection {
    background: var(--bsmm-fg);
    color: var(--bsmm-bg);
}

/* Focus rings — visible, accessible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--bsmm-ring);
    outline-offset: 2px;
    border-radius: var(--bsmm-radius-sm);
}

/* ==========================================================================
   TYPOGRAPHY — editorial headings, comfortable reading body
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.wp-block-heading,
.kadence-title,
.site-title {
    font-family: var(--bsmm-font-serif) !important;
    font-weight: 600 !important;
    color: var(--bsmm-fg) !important;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}

/* Font sizes use fixed rem + media queries (no vw units) to avoid iOS Safari
   first-paint zoom flash: vw-based clamp evaluates against the conceptual
   980px viewport before viewport meta is fully applied, making headings paint
   at their max size and then snap down. Fixed rems are stable on first paint. */
h1, .entry-title, .page-title { font-size: 3.4rem; font-weight: 700 !important; line-height: 1.08; letter-spacing: -0.025em; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.65rem; }
h4 { font-size: 1.2rem; }

@media (max-width: 1200px) {
    h1, .entry-title, .page-title { font-size: 2.8rem; }
    h2 { font-size: 1.95rem; }
    h3 { font-size: 1.5rem; }
}
@media (max-width: 900px) {
    h1, .entry-title, .page-title { font-size: 2.4rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.4rem; }
}
@media (max-width: 600px) {
    h1, .entry-title, .page-title { font-size: 2.05rem; line-height: 1.12; }
    h2 { font-size: 1.55rem; }
    h3 { font-size: 1.3rem; }
    h4 { font-size: 1.1rem; }
}
@media (max-width: 400px) {
    h1, .entry-title, .page-title { font-size: 1.85rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.2rem; }
}

/* Body paragraphs */
.entry-content p,
.entry-content li {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--bsmm-fg-soft);
    margin: 1.2em 0;
}

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

/* Lead paragraph (first paragraph after H1) */
.single .entry-content > .wp-block-paragraph:first-of-type,
.single .entry-content > p:first-of-type {
    font-size: 1.25rem;
    line-height: 1.55;
    color: var(--bsmm-fg);
    font-weight: 400;
    letter-spacing: -0.005em;
}

/* Strong / em */
.entry-content strong, .entry-content b { color: var(--bsmm-fg); font-weight: 600; }
.entry-content em { font-style: italic; color: var(--bsmm-fg-soft); }

/* ==========================================================================
   LINKS — editorial pink, refined
   ========================================================================== */
a {
    color: var(--bsmm-accent);
    text-decoration: none;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--bsmm-dur-fast) var(--bsmm-ease),
                text-decoration-color var(--bsmm-dur-fast) var(--bsmm-ease);
}
a:hover {
    color: var(--bsmm-accent-hover);
    text-decoration: underline;
    text-decoration-color: var(--bsmm-accent-hover);
}

.entry-content a {
    text-decoration: underline;
    text-decoration-color: var(--bsmm-border);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}
.entry-content a:hover {
    text-decoration-color: var(--bsmm-accent);
    color: var(--bsmm-accent-hover);
}

/* ==========================================================================
   HEADER — minimal, editorial, STICKY (force sticky regardless of Kadence customizer)
   ========================================================================== */
#masthead {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
}
.site-header,
.kadence-header,
#masthead,
.site-header-row-container-inner {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid var(--bsmm-border) !important;
    box-shadow: none !important;
}
/* Solidify on scroll (handled by class, optional) */
#masthead.is-scrolled .site-header-row-container-inner {
    background: var(--bsmm-bg-elev) !important;
    box-shadow: 0 1px 0 var(--bsmm-border);
}

.site-branding .site-title,
.site-branding .site-title a {
    font-family: var(--bsmm-font-serif) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    color: var(--bsmm-fg) !important;
    letter-spacing: -0.02em !important;
    text-decoration: none !important;
}
.site-branding .site-description {
    font-family: var(--bsmm-font-sans) !important;
    font-size: 0.8rem !important;
    color: var(--bsmm-fg-muted) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

/* Primary nav */
.header-navigation .menu > li > a,
.site-main-header .menu-item > a {
    font-family: var(--bsmm-font-sans) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: var(--bsmm-fg-soft) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 0.5rem 0.9rem !important;
    transition: color var(--bsmm-dur-fast) var(--bsmm-ease);
}
.header-navigation .menu > li > a:hover,
.site-main-header .menu-item > a:hover {
    color: var(--bsmm-accent) !important;
}

/* ==========================================================================
   HEADER — hide site title (logo image only)
   ========================================================================== */
.site-branding .site-title,
.site-branding .site-description,
.site-header-inline-wrap .site-title,
.site-header-inline-wrap .site-description {
    display: none !important;
}
.site-branding img.custom-logo,
.site-branding .custom-logo-link img {
    max-height: 56px !important;
    width: auto !important;
    height: auto !important;
}

/* ==========================================================================
   MAGAZINE HOMEPAGE — hero + 5-card grid (Onedio-density × editorial polish)
   Kadence wraps posts in: ul#archive-container.kadence-posts-list > li.entry-list-item > article.loop-entry
   ========================================================================== */

/* Container — wider on archive/home for magazine feel */
.home .content-container,
.archive .content-container,
.blog .content-container {
    max-width: var(--bsmm-grid-width);
    padding: 2.5rem 1.5rem 4rem;
    margin: 0 auto;
}

/* Override Kadence's default flex/grid with our magazine grid */
ul#archive-container.kadence-posts-list,
.archive ul#archive-container,
.blog ul#archive-container,
.home ul#archive-container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 1.75rem !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* List items — let articles fill them */
ul#archive-container > li.entry-list-item {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: flex !important;
    width: 100% !important;
}

/* Hero post: first child spans 4 columns × 2 rows */
ul#archive-container > li.entry-list-item:nth-child(1) {
    grid-column: span 4 !important;
    grid-row: span 2 !important;
}

/* Posts 2 + 3: 2-column wide right side of hero */
ul#archive-container > li.entry-list-item:nth-child(2),
ul#archive-container > li.entry-list-item:nth-child(3) {
    grid-column: span 2 !important;
}

/* Posts 4+: thirds (3-column row) */
ul#archive-container > li.entry-list-item:nth-child(n+4) {
    grid-column: span 2 !important;
}

/* Card base */
.loop-entry,
article.entry,
.post-loop-feed article {
    background: var(--bsmm-bg-elev) !important;
    border: 1px solid var(--bsmm-border) !important;
    border-radius: var(--bsmm-radius-lg) !important;
    box-shadow: none !important;
    transition: border-color var(--bsmm-dur-base) var(--bsmm-ease),
                transform var(--bsmm-dur-base) var(--bsmm-ease);
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
}
.loop-entry:hover,
article.entry:hover {
    border-color: var(--bsmm-fg) !important;
    transform: translateY(-3px);
}

/* Featured image — 16:9 cover */
.loop-entry .post-thumbnail,
.loop-entry .post-thumbnail-wrap,
article.entry .post-thumbnail {
    margin: 0 !important;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--bsmm-muted);
}
.loop-entry .post-thumbnail img,
article.entry .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
    border: 0 !important;
    transition: transform 600ms var(--bsmm-ease);
}
.loop-entry:hover .post-thumbnail img {
    transform: scale(1.04);
}

/* Hero card: bigger image */
.home .loop-entry:nth-child(1) .post-thumbnail,
.archive .loop-entry:nth-child(1) .post-thumbnail,
.blog .loop-entry:nth-child(1) .post-thumbnail {
    aspect-ratio: 21 / 11;
}

/* Card body */
.loop-entry .entry-content-wrap,
.loop-entry > .entry-wrap,
article.entry .entry-content-wrap {
    padding: 1.4rem 1.5rem 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    flex: 1 !important;
}

/* Hero card body — more breathing room */
.home .loop-entry:nth-child(1) .entry-content-wrap,
.archive .loop-entry:nth-child(1) .entry-content-wrap,
.blog .loop-entry:nth-child(1) .entry-content-wrap {
    padding: 2rem 2.25rem 2.25rem !important;
}

/* Title */
.loop-entry .entry-title,
article.entry .entry-title {
    font-family: var(--bsmm-font-serif) !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.015em !important;
    margin: 0 !important;
    color: var(--bsmm-fg) !important;
}
.home .loop-entry:nth-child(1) .entry-title,
.archive .loop-entry:nth-child(1) .entry-title,
.blog .loop-entry:nth-child(1) .entry-title {
    font-size: 2.4rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
}
@media (max-width: 1024px) {
    .home .loop-entry:nth-child(1) .entry-title,
    .archive .loop-entry:nth-child(1) .entry-title,
    .blog .loop-entry:nth-child(1) .entry-title {
        font-size: 2rem !important;
    }
}
@media (max-width: 600px) {
    .home .loop-entry:nth-child(1) .entry-title,
    .archive .loop-entry:nth-child(1) .entry-title,
    .blog .loop-entry:nth-child(1) .entry-title {
        font-size: 1.65rem !important;
    }
}
.loop-entry .entry-title a {
    color: var(--bsmm-fg) !important;
    text-decoration: none !important;
}
.loop-entry .entry-title a:hover {
    color: var(--bsmm-accent) !important;
}

/* Category badge — top of card */
.loop-entry .entry-taxonomies,
.loop-entry .post-categories {
    order: -1 !important;
    margin: 0 0 0.25rem !important;
    list-style: none !important;
    padding: 0 !important;
    display: flex !important;
    gap: 0.5rem !important;
}
.loop-entry .entry-taxonomies a,
.loop-entry .post-categories a,
.loop-entry .category-style-pill a {
    font-family: var(--bsmm-font-sans) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: var(--bsmm-accent) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    text-decoration: none !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Excerpt */
.loop-entry .entry-summary,
.loop-entry .entry-content-wrap > p,
article.entry .entry-summary {
    font-family: var(--bsmm-font-sans) !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    color: var(--bsmm-fg-muted) !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.home .loop-entry:nth-child(1) .entry-summary,
.archive .loop-entry:nth-child(1) .entry-summary,
.blog .loop-entry:nth-child(1) .entry-summary {
    font-size: 1.1rem !important;
    line-height: 1.55 !important;
    -webkit-line-clamp: 4;
}

/* Meta — bottom of card */
.loop-entry .entry-meta,
.entry-header-meta,
article.entry .entry-meta {
    font-family: var(--bsmm-font-sans) !important;
    font-size: 0.74rem !important;
    color: var(--bsmm-fg-subtle) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 500 !important;
    margin-top: auto !important;
    padding-top: 0.5rem !important;
}
.entry-meta a { color: var(--bsmm-fg-muted) !important; text-decoration: none !important; }
.entry-meta a:hover { color: var(--bsmm-accent) !important; }

/* Read more link — hide it (clicking the card title is the action) */
.loop-entry .more-link {
    display: none !important;
}

/* ==========================================================================
   Magazine grid responsive
   Targets the actual Kadence container: ul#archive-container.kadence-posts-list
   ========================================================================== */
@media (max-width: 1024px) {
    .home .content-container,
    .archive .content-container,
    .blog .content-container {
        padding: 2rem 1.25rem 3rem;
    }
    ul#archive-container.kadence-posts-list,
    .archive ul#archive-container,
    .blog ul#archive-container,
    .home ul#archive-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
    ul#archive-container > li.entry-list-item:nth-child(1),
    ul#archive-container > li.entry-list-item:nth-child(2),
    ul#archive-container > li.entry-list-item:nth-child(3),
    ul#archive-container > li.entry-list-item:nth-child(n+4) {
        grid-column: span 1 !important;
        grid-row: auto !important;
    }
    /* Hero on tablet: full width, single row */
    ul#archive-container > li.entry-list-item:nth-child(1) {
        grid-column: span 2 !important;
    }
    .home .loop-entry:nth-child(1) .post-thumbnail,
    .archive .loop-entry:nth-child(1) .post-thumbnail,
    .blog .loop-entry:nth-child(1) .post-thumbnail {
        aspect-ratio: 16 / 9;
    }
    .home .loop-entry:nth-child(1) .entry-content-wrap,
    .archive .loop-entry:nth-child(1) .entry-content-wrap,
    .blog .loop-entry:nth-child(1) .entry-content-wrap {
        padding: 1.5rem 1.75rem 1.75rem !important;
    }
}

@media (max-width: 640px) {
    .home .content-container,
    .archive .content-container,
    .blog .content-container {
        padding: 1.25rem 1rem 2.5rem;
    }
    ul#archive-container.kadence-posts-list,
    .archive ul#archive-container,
    .blog ul#archive-container,
    .home ul#archive-container {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    ul#archive-container > li.entry-list-item,
    ul#archive-container > li.entry-list-item:nth-child(1),
    ul#archive-container > li.entry-list-item:nth-child(2),
    ul#archive-container > li.entry-list-item:nth-child(3),
    ul#archive-container > li.entry-list-item:nth-child(n+4) {
        grid-column: span 1 !important;
        grid-row: auto !important;
    }
    .loop-entry .entry-content-wrap,
    .loop-entry > .entry-wrap,
    article.entry .entry-content-wrap {
        padding: 1.1rem 1.15rem 1.25rem !important;
    }
    .home .loop-entry:nth-child(1) .entry-content-wrap,
    .archive .loop-entry:nth-child(1) .entry-content-wrap,
    .blog .loop-entry:nth-child(1) .entry-content-wrap {
        padding: 1.25rem 1.25rem 1.5rem !important;
    }
    .home .loop-entry:nth-child(1) .entry-title,
    .archive .loop-entry:nth-child(1) .entry-title,
    .blog .loop-entry:nth-child(1) .entry-title {
        font-size: 1.5rem !important;
    }
    .home .loop-entry:nth-child(1) .entry-summary,
    .archive .loop-entry:nth-child(1) .entry-summary,
    .blog .loop-entry:nth-child(1) .entry-summary {
        font-size: 0.98rem !important;
        -webkit-line-clamp: 3;
    }
}

/* ==========================================================================
   SINGLE POST — generous reading layout
   ========================================================================== */
.single .entry-header,
.entry-hero {
    background: transparent !important;
    border-bottom: 1px solid var(--bsmm-border);
    padding: 4rem 1.5rem 3rem !important;
    margin-bottom: 2.5rem !important;
}
.single .entry-header .entry-title,
.entry-hero .entry-title {
    max-width: var(--bsmm-content-width);
    margin: 0 auto 1rem !important;
    text-align: left !important;
}
.single .entry-header .entry-meta {
    max-width: var(--bsmm-content-width);
    margin: 0 auto !important;
    text-align: left !important;
}

/* Block quotes — editorial pull quote style */
.entry-content blockquote,
.wp-block-quote {
    border-left: 4px solid var(--bsmm-accent) !important;
    padding: 0.5rem 0 0.5rem 1.5rem !important;
    margin: 2rem 0 !important;
    font-family: var(--bsmm-font-serif) !important;
    font-size: 1.35rem !important;
    line-height: 1.5 !important;
    font-style: italic !important;
    color: var(--bsmm-fg) !important;
    background: transparent !important;
}
.wp-block-quote cite {
    display: block;
    margin-top: 0.75rem;
    font-style: normal;
    font-family: var(--bsmm-font-sans) !important;
    font-size: 0.85rem;
    color: var(--bsmm-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Code — tasteful mono */
.entry-content code,
code {
    font-family: var(--bsmm-font-mono) !important;
    font-size: 0.9em !important;
    background: var(--bsmm-muted) !important;
    color: var(--bsmm-fg) !important;
    padding: 0.15em 0.4em !important;
    border-radius: var(--bsmm-radius-sm) !important;
    border: none !important;
}
.entry-content pre,
.wp-block-code {
    background: var(--bsmm-fg) !important;
    color: var(--bsmm-bg) !important;
    border-radius: var(--bsmm-radius-md) !important;
    padding: 1.25rem 1.5rem !important;
    overflow-x: auto !important;
    line-height: 1.55 !important;
    font-size: 0.9rem !important;
}
.entry-content pre code {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
}

/* Horizontal rule */
.entry-content hr,
.wp-block-separator {
    border: 0 !important;
    border-top: 1px solid var(--bsmm-border) !important;
    margin: 2.5rem auto !important;
    max-width: 6rem !important;
}

/* Images */
.entry-content img,
.wp-block-image img {
    border-radius: var(--bsmm-radius-md) !important;
    border: 1px solid var(--bsmm-border-soft) !important;
}

/* Lists */
.entry-content ul, .entry-content ol {
    padding-left: 1.5rem;
    margin: 1.2em 0;
}
.entry-content li {
    margin: 0.5em 0;
}
.entry-content ul li::marker {
    color: var(--bsmm-accent);
}

/* ==========================================================================
   BUTTONS — Swiss Modernism 2.0, restrained
   ========================================================================== */
.button,
button.wp-block-button__link,
.wp-block-button__link,
.kadence-button,
input[type="submit"],
.button-primary {
    background: var(--bsmm-fg) !important;
    color: var(--bsmm-bg) !important;
    border: 1px solid var(--bsmm-fg) !important;
    border-radius: var(--bsmm-radius-md) !important;
    padding: 0.7rem 1.4rem !important;
    font-family: var(--bsmm-font-sans) !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: background-color var(--bsmm-dur-fast) var(--bsmm-ease),
                transform var(--bsmm-dur-fast) var(--bsmm-ease);
}
.button:hover,
button.wp-block-button__link:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover {
    background: var(--bsmm-accent) !important;
    border-color: var(--bsmm-accent) !important;
    transform: translateY(-1px);
}

/* Outline / secondary button */
.is-style-outline .wp-block-button__link {
    background: transparent !important;
    color: var(--bsmm-fg) !important;
    border: 1px solid var(--bsmm-border) !important;
}
.is-style-outline .wp-block-button__link:hover {
    background: var(--bsmm-fg) !important;
    color: var(--bsmm-bg) !important;
    border-color: var(--bsmm-fg) !important;
}

/* ==========================================================================
   FOOTER — minimal, all-text
   ========================================================================== */
.site-footer,
.site-bottom-footer-wrap {
    background: var(--bsmm-bg-elev) !important;
    border-top: 1px solid var(--bsmm-border) !important;
    color: var(--bsmm-fg-muted) !important;
    padding: 3rem 1.5rem !important;
    font-size: 0.85rem !important;
    margin-top: 5rem !important;
}
.site-footer a {
    color: var(--bsmm-fg-soft) !important;
    text-decoration: none !important;
}
.site-footer a:hover {
    color: var(--bsmm-accent) !important;
}

/* ==========================================================================
   FORMS — comments, search, newsletter
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea {
    background: var(--bsmm-bg-elev) !important;
    border: 1px solid var(--bsmm-border) !important;
    border-radius: var(--bsmm-radius-md) !important;
    padding: 0.7rem 0.9rem !important;
    font-family: var(--bsmm-font-sans) !important;
    font-size: 0.95rem !important;
    color: var(--bsmm-fg) !important;
    transition: border-color var(--bsmm-dur-fast) var(--bsmm-ease);
}
input:focus, textarea:focus {
    border-color: var(--bsmm-fg) !important;
    outline: none !important;
}

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pagination .page-numbers {
    font-family: var(--bsmm-font-sans);
    font-size: 0.9rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--bsmm-border);
    border-radius: var(--bsmm-radius-sm);
    color: var(--bsmm-fg-soft);
    text-decoration: none;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    background: var(--bsmm-fg);
    color: var(--bsmm-bg);
    border-color: var(--bsmm-fg);
}

/* ==========================================================================
   RESPONSIVE — global
   ========================================================================== */

/* Prevent horizontal scroll from any rogue full-bleed element */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Long titles / URLs shouldn't blow out the layout on narrow screens */
h1, h2, h3, h4, h5, h6,
.entry-title,
.loop-entry .entry-title,
.entry-content a {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Media must scale down */
img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    body { font-size: 16px; }
    .entry-content { padding-left: 1rem; padding-right: 1rem; }
    .entry-content p, .entry-content li { font-size: 1rem; line-height: 1.7; }
    .single .entry-header,
    .entry-hero {
        padding: 2.25rem 1.25rem 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    /* Heading sizes for ≤768 are already set by the global no-vw scale above. */

    /* Pull-quote scaling */
    .entry-content blockquote,
    .wp-block-quote {
        font-size: 1.15rem !important;
        padding: 0.4rem 0 0.4rem 1rem !important;
        margin: 1.5rem 0 !important;
    }

    /* Code blocks: smaller padding */
    .entry-content pre,
    .wp-block-code {
        padding: 1rem 1.1rem !important;
        font-size: 0.85rem !important;
    }

    /* Lead paragraph */
    .single .entry-content > .wp-block-paragraph:first-of-type,
    .single .entry-content > p:first-of-type {
        font-size: 1.1rem;
    }

    /* Footer padding */
    .site-footer,
    .site-bottom-footer-wrap {
        padding: 2rem 1rem !important;
    }
}

@media (max-width: 480px) {
    .bsmm-post-badges { gap: 0.4rem; margin: 0 0 1.5rem 0; }
    .bsmm-badge { font-size: 0.7rem; padding: 0.3rem 0.6rem; }
    .bsmm-methodology-notice { font-size: 0.9rem; padding: 0.85rem 1rem; }
    .pagination .page-numbers { padding: 0.4rem 0.7rem; font-size: 0.85rem; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   UTILITIES — light tweaks for Kadence overrides
   ========================================================================== */
.has-kadence-radius-sm,
.kadence-card,
.entry { box-shadow: none !important; }

/* Remove Kadence's default hero area background gradient */
.entry-hero-container-inner { background: transparent !important; }

/* Tagline in hero */
.entry-hero .entry-meta {
    margin-bottom: 1.5rem !important;
}

/* Subtle drop cap on first paragraph of articles (optional editorial flourish) */
.single .entry-content > .wp-block-paragraph:first-of-type::first-letter,
.single .entry-content > p:first-of-type::first-letter {
    /* off by default — keep clean; uncomment to enable */
    /* font-family: var(--bsmm-font-serif);
    font-size: 4em;
    float: left;
    line-height: 0.85;
    margin: 0.05em 0.1em 0 0;
    color: var(--bsmm-accent);
    font-weight: 700; */
}

/* ==========================================================================
   SEARCH — floating top-right button + reveal form (theme-agnostic)
   ========================================================================== */
.bsmm-header-search {
    position: absolute;
    top: 18px;
    right: 1rem;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;
}
.bsmm-search-toggle {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--bsmm-border);
    background: var(--bsmm-bg-elev);
    color: var(--bsmm-fg-soft);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    transition: color var(--bsmm-dur-fast) var(--bsmm-ease),
                background var(--bsmm-dur-fast) var(--bsmm-ease),
                border-color var(--bsmm-dur-fast) var(--bsmm-ease);
}
.bsmm-search-toggle:hover {
    color: var(--bsmm-bg);
    background: var(--bsmm-fg);
    border-color: var(--bsmm-fg);
}
.bsmm-search-form {
    display: flex;
    align-items: center;
    background: var(--bsmm-bg-elev);
    border: 1px solid var(--bsmm-border);
    border-radius: var(--bsmm-radius-md);
    padding: 0.25rem 0.35rem 0.25rem 0.6rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.bsmm-search-form[hidden] { display: none; }
.bsmm-search-form input[type="search"] {
    border: 0 !important;
    background: transparent !important;
    padding: 0.4rem 0.5rem !important;
    font-family: var(--bsmm-font-sans) !important;
    font-size: 0.9rem !important;
    color: var(--bsmm-fg) !important;
    width: 220px;
    outline: none !important;
}
.bsmm-search-form input[type="search"]::placeholder { color: var(--bsmm-fg-subtle); }
.bsmm-search-form button {
    background: transparent !important;
    border: 0 !important;
    color: var(--bsmm-fg-muted) !important;
    padding: 0.3rem 0.45rem !important;
    cursor: pointer;
    box-shadow: none !important;
}
.bsmm-search-form button:hover { color: var(--bsmm-accent) !important; transform: none !important; }
.bsmm-search-close { font-size: 1.4rem; line-height: 1; }
@media (max-width: 600px) {
    /* Mobile: FAB at bottom-right, stacks above #bsmm-to-top */
    .bsmm-header-search {
        position: fixed;
        top: auto;
        bottom: calc(0.85rem + 40px + 0.5rem);
        right: 0.85rem;
        z-index: 10000;
        flex-direction: row-reverse;  /* form expands to LEFT of button */
    }
    .bsmm-search-toggle {
        width: 44px; height: 44px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        background: var(--bsmm-fg);
        color: var(--bsmm-bg);
        border-color: var(--bsmm-fg);
    }
    .bsmm-search-form input[type="search"] { width: 180px; font-size: 0.85rem !important; }
}

/* ==========================================================================
   BACK-TO-TOP button
   ========================================================================== */
#bsmm-to-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 90;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--bsmm-border);
    background: var(--bsmm-bg-elev);
    color: var(--bsmm-fg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: transform var(--bsmm-dur-fast) var(--bsmm-ease),
                background var(--bsmm-dur-fast) var(--bsmm-ease),
                color var(--bsmm-dur-fast) var(--bsmm-ease),
                border-color var(--bsmm-dur-fast) var(--bsmm-ease);
}
#bsmm-to-top:hover {
    background: var(--bsmm-fg);
    color: var(--bsmm-bg);
    border-color: var(--bsmm-fg);
    transform: translateY(-2px);
}
#bsmm-to-top[hidden] { display: none !important; }
@media (max-width: 600px) {
    #bsmm-to-top { right: 0.85rem; bottom: 0.85rem; width: 40px; height: 40px; }
}

/* ==========================================================================
   LOGO sizing — keep responsive, prevent oversize on desktop
   ========================================================================== */
.site-branding img.custom-logo,
.site-branding .custom-logo-link img {
    max-height: 160px !important;
    width: auto !important;
    height: auto !important;
}
@media (max-width: 900px) {
    .site-branding img.custom-logo,
    .site-branding .custom-logo-link img { max-height: 120px !important; }
}
@media (max-width: 600px) {
    .site-branding img.custom-logo,
    .site-branding .custom-logo-link img { max-height: 80px !important; }
}
@media (max-width: 380px) {
    .site-branding img.custom-logo,
    .site-branding .custom-logo-link img { max-height: 64px !important; }
}

/* ==========================================================================
   BREADCRUMBS — minimal, editorial
   ========================================================================== */
.bsmm-breadcrumbs {
    max-width: var(--bsmm-content-width);
    margin: 0 auto 1rem;
    padding: 1.5rem 1.5rem 0;
    font-family: var(--bsmm-font-sans);
    font-size: 0.78rem;
    color: var(--bsmm-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}
.bsmm-breadcrumbs a {
    color: var(--bsmm-fg-muted);
    text-decoration: none;
    transition: color var(--bsmm-dur-fast) var(--bsmm-ease);
}
.bsmm-breadcrumbs a:hover { color: var(--bsmm-accent); }
.bsmm-breadcrumbs .separator { color: var(--bsmm-fg-subtle); margin: 0 0.5em; }
.bsmm-breadcrumbs .last { color: var(--bsmm-fg); }

/* ==========================================================================
   RELATED POSTS — 3-card editorial grid at end of articles
   ========================================================================== */
.bsmm-related {
    max-width: var(--bsmm-grid-width);
    margin: 4rem auto 2rem;
    padding: 0 1.5rem;
}
.bsmm-related-title {
    font-family: var(--bsmm-font-serif) !important;
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em;
    color: var(--bsmm-fg) !important;
    margin: 0 0 1.5rem 0 !important;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bsmm-border);
}
.bsmm-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}
.bsmm-related-card {
    display: flex;
    flex-direction: column;
    background: var(--bsmm-bg-elev);
    border: 1px solid var(--bsmm-border);
    border-radius: var(--bsmm-radius-lg);
    overflow: hidden;
    text-decoration: none !important;
    transition: border-color var(--bsmm-dur-base) var(--bsmm-ease),
                transform var(--bsmm-dur-base) var(--bsmm-ease);
}
.bsmm-related-card:hover {
    border-color: var(--bsmm-fg);
    transform: translateY(-3px);
}
.bsmm-related-thumb { aspect-ratio: 16/9; background: var(--bsmm-muted); overflow: hidden; }
.bsmm-related-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; border: 0 !important; }
.bsmm-related-body { padding: 1.1rem 1.25rem 1.4rem; }
.bsmm-related-cat {
    display: block;
    font-family: var(--bsmm-font-sans);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bsmm-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
}
.bsmm-related-h {
    font-family: var(--bsmm-font-serif) !important;
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    color: var(--bsmm-fg) !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
}
@media (max-width: 1024px) {
    .bsmm-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .bsmm-related-grid { grid-template-columns: 1fr; }
    .bsmm-related { margin: 2.5rem auto 1.5rem; padding: 0 1rem; }
}

/* ==========================================================================
   TABLE OF CONTENTS (Easy Table of Contents) — editorial, sticky-friendly
   ========================================================================== */
.ez-toc-v2_0_75, div#ez-toc-container, #ez-toc-container {
    background: var(--bsmm-bg-elev) !important;
    border: 1px solid var(--bsmm-border) !important;
    border-radius: var(--bsmm-radius-md) !important;
    padding: 1.25rem 1.5rem !important;
    margin: 0 0 2rem 0 !important;
    font-family: var(--bsmm-font-sans) !important;
    box-shadow: none !important;
}
.ez-toc-title-container .ez-toc-title,
#ez-toc-container .ez-toc-title {
    font-family: var(--bsmm-font-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--bsmm-fg) !important;
}
#ez-toc-container ul, #ez-toc-container ol {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    padding-left: 1.25rem !important;
}
#ez-toc-container a {
    color: var(--bsmm-fg-soft) !important;
    text-decoration: none !important;
}
#ez-toc-container a:hover { color: var(--bsmm-accent) !important; }

/* ==========================================================================
   POST BADGES — Last updated, Published, Reading time, Methodology notice
   ========================================================================== */
.bsmm-post-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 2rem 0;
}
.bsmm-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--bsmm-border);
    border-radius: var(--bsmm-radius-sm);
    font-family: var(--bsmm-font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--bsmm-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--bsmm-bg-elev);
}
.bsmm-badge-updated {
    color: var(--bsmm-accent);
    border-color: var(--bsmm-accent);
}
.bsmm-methodology-notice {
    background: var(--bsmm-muted);
    border-left: 3px solid var(--bsmm-accent);
    padding: 1rem 1.25rem;
    margin: 0 0 2rem 0;
    border-radius: var(--bsmm-radius-md);
    font-family: var(--bsmm-font-sans);
    font-size: 0.95rem;
    color: var(--bsmm-fg-soft);
    line-height: 1.5;
}
.bsmm-methodology-notice a {
    color: var(--bsmm-accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--bsmm-accent);
}

/* ==========================================================================
   RTL — Arabic right-to-left support
   ========================================================================== */
html[dir="rtl"] body,
html[lang="ar"] body {
    direction: rtl;
    text-align: right;
}
html[dir="rtl"] .entry-content,
html[lang="ar"] .entry-content {
    text-align: right;
}
html[dir="rtl"] blockquote,
html[lang="ar"] blockquote {
    border-left: 0 !important;
    border-right: 4px solid var(--bsmm-accent) !important;
    padding: 0.5rem 1.5rem 0.5rem 0 !important;
}
html[dir="rtl"] .bsmm-methodology-notice,
html[lang="ar"] .bsmm-methodology-notice {
    border-left: 0;
    border-right: 3px solid var(--bsmm-accent);
}
html[dir="rtl"] .entry-content ul,
html[dir="rtl"] .entry-content ol,
html[lang="ar"] .entry-content ul,
html[lang="ar"] .entry-content ol {
    padding-right: 1.5rem;
    padding-left: 0;
}

/* Language switcher (Polylang) — minimal, header-friendly */
.lang-switcher,
ul.pll-language-switcher {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
}
.lang-switcher a,
ul.pll-language-switcher a {
    font-family: var(--bsmm-font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bsmm-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.5rem;
    border-radius: var(--bsmm-radius-sm);
    text-decoration: none;
}
.lang-switcher a:hover,
ul.pll-language-switcher a:hover {
    color: var(--bsmm-accent);
    background: var(--bsmm-muted);
}
ul.pll-language-switcher .current-lang a {
    color: var(--bsmm-fg);
    background: var(--bsmm-muted);
}

/* ==========================================================================
   FOOTER — 4-column grid (Kadence native + bsmm-footer-top hook)
   ========================================================================== */
.bsmm-footer-top {
    background: var(--bsmm-bg-elev) !important;
    border-top: 1px solid var(--bsmm-border) !important;
    padding: 4rem 1.5rem 2rem !important;
    margin-top: 5rem;
}
.bsmm-footer-grid {
    max-width: var(--bsmm-grid-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
}
.bsmm-footer-col {
    color: var(--bsmm-fg-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}
.bsmm-footer-col h2,
.bsmm-footer-col h3,
.bsmm-footer-col .widget-title,
.bsmm-footer-col .widgettitle {
    font-family: var(--bsmm-font-sans) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: var(--bsmm-fg) !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}
.bsmm-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bsmm-footer-col ul li {
    margin: 0 0 0.5rem 0;
    padding: 0;
    border: none;
}
.bsmm-footer-col a {
    color: var(--bsmm-fg-soft);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color var(--bsmm-dur-fast) var(--bsmm-ease);
}
.bsmm-footer-col a:hover {
    color: var(--bsmm-accent);
}
.bsmm-footer-col p {
    color: var(--bsmm-fg-muted);
    line-height: 1.6;
    margin: 0 0 0.75rem 0;
    font-size: 0.85rem;
}

/* Bottom row Kadence-native (© line) */
.site-bottom-footer-wrap {
    background: var(--bsmm-bg-elev) !important;
    border-top: 1px solid var(--bsmm-border) !important;
    padding: 1rem 0 !important;
    color: var(--bsmm-fg-subtle) !important;
    font-size: 0.78rem !important;
}
.site-bottom-footer-wrap a {
    color: var(--bsmm-fg-muted) !important;
}
.footer-html-inner p {
    margin: 0;
    color: var(--bsmm-fg-subtle);
    font-size: 0.78rem;
}

/* Footer responsive */
@media (max-width: 1024px) {
    .bsmm-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}
@media (max-width: 640px) {
    .bsmm-footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .bsmm-footer-top { padding: 2.5rem 1.25rem 1.5rem !important; }
}