/*
 * BlogSite — Theme Core
 * Modern layout system, CSS custom properties, fluid typography,
 * responsive images, alignwide/alignfull, ultrawide support.
 *
 * Load order: after style.css (overrides) → before responsive.css
 * @package blogsite
 * @version 2.0.0
 */

/* ══════════════════════════════════════════════
   1. DESIGN TOKENS (CSS CUSTOM PROPERTIES)
   ══════════════════════════════════════════════ */

:root {
    /* ── Color palette ── */
    --clr-white:          #ffffff;
    --clr-bg:             #f3f4f5;
    --clr-surface:        #ffffff;
    --clr-surface-alt:    #f8f9fa;
    --clr-text:           #1a1a2e;
    --clr-text-muted:     #6b7280;
    --clr-text-light:     #9ca3af;
    --clr-accent:         #2563eb;
    --clr-accent-hover:   #1d4ed8;
    --clr-accent-light:   #eff6ff;
    --clr-border:         #e5e7eb;
    --clr-border-light:   #f3f4f6;

    /* ── Header / Footer ── */
    --clr-header-bg:      #0f172a;
    --clr-header-text:    #f1f5f9;
    --clr-header-muted:   #94a3b8;
    --clr-footer-bg:      #0f172a;
    --clr-footer-border:  #1e293b;
    --clr-footer-text:    #94a3b8;

    /* ── Category tags ── */
    --clr-tag-bg:         #2563eb;
    --clr-tag-text:       #ffffff;

    /* ── Layout ── */
    --container-max:      1320px;
    --container-pad:      clamp(16px, 4vw, 48px);
    --content-max:        860px;
    --sidebar-width:      300px;
    --gap:                clamp(20px, 2.5vw, 40px);
    --header-h:           70px;

    /* ── Typography ── */
    --font-sans:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono:   ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* Fluid type scale */
    --text-xs:    clamp(11px, 0.75vw + 9px, 13px);
    --text-sm:    clamp(13px, 0.5vw + 11px, 14px);
    --text-base:  clamp(15px, 0.5vw + 13px, 17px);
    --text-lg:    clamp(17px, 0.8vw + 14px, 20px);
    --text-xl:    clamp(20px, 1.5vw + 15px, 26px);
    --text-2xl:   clamp(24px, 2vw + 18px, 34px);
    --text-3xl:   clamp(28px, 3vw + 20px, 48px);
    --text-4xl:   clamp(34px, 4vw + 22px, 60px);

    /* ── Spacing ── */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;

    /* ── Borders & radius ── */
    --radius-sm: 4px;
    --radius:    8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --border:    1px solid var(--clr-border);

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
    --shadow-sm: 0 1px 4px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
    --shadow:    0 4px 10px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
    --shadow-md: 0 8px 24px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.05);
    --shadow-lg: 0 20px 40px rgba(0,0,0,.09), 0 8px 16px rgba(0,0,0,.05);

    /* ── Motion ── */
    --ease:         cubic-bezier(.4,0,.2,1);
    --duration-fast: 120ms;
    --duration:      220ms;
    --duration-slow: 360ms;
}

/* ── Dark mode placeholder (can be extended) ── */
@media (prefers-color-scheme: dark) {
    :root {
        --clr-bg:       #0f172a;
        --clr-surface:  #1e293b;
        --clr-text:     #e2e8f0;
        --clr-text-muted: #94a3b8;
        --clr-border:   #334155;
    }
}

/* ══════════════════════════════════════════════
   2. GLOBAL RESET ADDITIONS
   ══════════════════════════════════════════════ */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--clr-text);
    background: var(--clr-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ── Responsive images — global ── */
img,
svg,
video,
embed,
iframe,
object {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Inline images stay inline */
p img,
li img,
td img { display: inline; }

/* ══════════════════════════════════════════════
   3. FLUID CONTAINER SYSTEM
   ══════════════════════════════════════════════ */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left:  var(--container-pad);
    padding-right: var(--container-pad);
}

/* Narrow container for single post reading comfort */
.container--narrow {
    max-width: calc(var(--content-max) + var(--container-pad) * 2);
}

/* ══════════════════════════════════════════════
   4. SITE LAYOUT — FLEXBOX + GRID
   ══════════════════════════════════════════════ */

#page.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Site content: sidebar + main ── */
#content.site-content {
    flex: 1;
    padding: var(--sp-8) 0;
    display: flex;
    align-items: flex-start;
    gap: var(--gap);
}

/* Full-width: no sidebar */
#content.site-content.is_full_width {
    display: block;
}

/* Main content area */
#primary {
    flex: 1;
    min-width: 0;               /* prevent flex overflow */
    float: none !important;
    width: auto !important;
}

/* Sidebar */
#secondary,
.sidebar {
    flex: 0 0 var(--sidebar-width);
    width: var(--sidebar-width) !important;
    float: none !important;
    min-width: 0;
}

/* When no sidebar — main fills full width */
#content.site-content.is_full_width #primary {
    max-width: 100%;
}

/* ── Site main card ── */
.site-main {
    background: var(--clr-surface);
    border-radius: var(--radius);
    padding: var(--sp-6) !important;
    box-shadow: var(--shadow-sm);
}

/* ══════════════════════════════════════════════
   5. FLUID TYPOGRAPHY
   ══════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1.25;
    color: var(--clr-text);
    letter-spacing: -0.01em;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); font-weight: 600; }
h6 { font-size: var(--text-sm);   font-weight: 600; }

p, li, td {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--clr-text);
}

.entry-content p,
.entry-content li {
    margin-bottom: 1.1em;
}

/* ══════════════════════════════════════════════
   6. SITE HEADER
   Strategy: keep existing float/line-height nav layout.
   We only override COLORS and add the dark background.
   DO NOT change display/flex/float on .container or sf-menu.
   ══════════════════════════════════════════════ */

/* Sticky dark header — stays in normal flow, sticks to top on scroll */
.site-header {
    background: var(--clr-header-bg) !important;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

/* Shift sticky top down to clear the WordPress admin bar (logged-in users) */
.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

/* header-space: not needed for sticky; zero it */
.header-space {
    height: 0 !important;
    display: block;
}

/* ── Branding colors ── */
.site-branding {
    /* keep existing float positioning; just fix text colors */
}

#logo img,
.custom-logo {
    max-height: 55px;
    width: auto !important;
}

.site-title h1 a,
.site-title h1 a:visited {
    color: var(--clr-header-text) !important;
    text-decoration: none;
}

.site-title h1 a:hover { color: rgba(255,255,255,.75) !important; }

.site-description { color: var(--clr-header-muted); }

/* ── sf-menu: color-only overrides for dark header ──
   The existing layout (float:left + line-height:75px + .menu-text spans) works.
   We must NOT touch display, float, or line-height here.
── */
.site-header .sf-menu > li > a {
    color: var(--clr-header-text) !important;
}

/* The inner .menu-text span is what the user sees */
.site-header .sf-menu > li > a .menu-text {
    color: var(--clr-header-text) !important;
    transition: background var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}

.site-header .sf-menu > li > a:hover .menu-text,
.site-header .sf-menu > li.current-menu-item > a .menu-text,
.site-header .sf-menu > li.current-menu-ancestor > a .menu-text {
    background-color: rgba(255,255,255,.15) !important;
    color: var(--clr-white) !important;
}

/* Submenu: keep white background, dark text (existing behavior is correct) */
.site-header .sf-menu ul {
    background: #fff;
}

.site-header .sf-menu li li a,
.site-header .sf-menu li li a .menu-text {
    color: #333 !important;
}

.site-header .sf-menu li li a:hover .menu-text {
    color: var(--clr-accent) !important;
    background: transparent !important;
}

/* ── Header search: dark header styling ── */
.site-header .header-search {
    /* existing positioning kept; override form look */
}

.site-header #searchform .search-input,
.site-header .header-search .search-input {
    background: rgba(255,255,255,.1) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: var(--radius-sm);
    color: var(--clr-header-text) !important;
    height: 36px;
    line-height: 36px;
}

.site-header #searchform .search-input::placeholder,
.site-header .header-search .search-input::placeholder {
    color: var(--clr-header-muted);
}

.site-header #searchform .search-submit,
.site-header .header-search .search-submit {
    background: none !important;
    border: none;
    color: var(--clr-header-muted) !important;
}

.site-header #searchform .search-submit:hover,
.site-header .header-search .search-submit:hover {
    color: var(--clr-header-text) !important;
}

/* ── Mobile toggle — THE CRITICAL FIX ──
   style.css has: button.toggle { color: #666; }
   .header-toggles .toggle-icon svg { fill: #333; }
   Both are INVISIBLE on dark header. We fix with higher specificity.
── */
.header-toggles {
    /* keep existing: position: absolute; top: 17px; right: 5px from style.css */
}

/* Mobile hamburger — dark pill, visible on any background */
.header-toggles button.toggle,
.header-toggles .nav-toggle {
    color: #f1f5f9 !important;
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    border-radius: 6px;
    padding: 6px 14px;
    min-height: 40px;
    min-width: 44px;
    cursor: pointer;
    font-weight: 600;
}

.header-toggles button.toggle:hover,
.header-toggles .nav-toggle:hover {
    background: #0f172a !important;
    border-color: #475569 !important;
}

/* SVG ellipsis icon */
.header-toggles .toggle-icon svg {
    fill: #f1f5f9 !important;
    height: 0.75rem !important;
}

/* "Menu" label */
.header-toggles .toggle-text {
    color: #f1f5f9 !important;
    font-size: 13px;
}

/* ══════════════════════════════════════════════
   7. MOBILE MENU MODAL
   ══════════════════════════════════════════════ */

/* Hide sticky header while mobile menu is open so it can't cover the modal */
body.showing-menu-modal .site-header {
    display: none !important;
}

/* Mobile menu modal — above ALL plugins (including notification bars, z-index wars) */
.menu-modal {
    z-index: 2147483647 !important;
}

.menu-modal,
.menu-modal-inner {
    background: #0f172a !important;
}

/* Fix: prevent menu-wrapper from stretching to full viewport (causes giant empty space below menu items) */
.menu-wrapper {
    align-self: flex-start !important;
    width: 100% !important;
    justify-content: flex-start !important;
}

/* Push modal content below admin bar when visible */
body.admin-bar .menu-modal .menu-top {
    padding-top: 4px;
}

.menu-modal .modal-menu li {
    border-color: rgba(255,255,255,.12) !important;
}

/* Menu links: light text on dark background */
.menu-modal .modal-menu li a,
.menu-modal .modal-menu a {
    color: #e2e8f0 !important;
    transition: background 120ms ease;
    display: block;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

.menu-modal .modal-menu li a:hover,
.menu-modal .modal-menu a:hover {
    background: rgba(255,255,255,.08) !important;
    color: #ffffff !important;
}

/* Active / current page link */
.menu-modal .modal-menu li.current-menu-item > .ancestor-wrapper > a,
.menu-modal .modal-menu li.current_page_ancestor > .ancestor-wrapper > a {
    color: #93c5fd !important;
}

/* Sub-menu expand/collapse toggle arrow */
.menu-modal button.sub-menu-toggle {
    color: #e2e8f0 !important;
    border-left-color: rgba(255,255,255,.15) !important;
}

.menu-modal button.sub-menu-toggle svg {
    fill: #e2e8f0 !important;
}

/* Close button */
button.close-nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    color: #e2e8f0 !important;
    background: rgba(255,255,255,.10) !important;
    border-bottom: 2px solid rgba(255,255,255,.15) !important;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    min-height: 52px;
}

button.close-nav-toggle:hover {
    background: rgba(255,255,255,.18) !important;
}

button.close-nav-toggle svg {
    fill: #e2e8f0 !important;
    flex-shrink: 0;
}

button.close-nav-toggle .toggle-text {
    color: #e2e8f0 !important;
}

/* Mobile search inside modal */
.mobile-search-form {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.mobile-search-form form {
    display: flex;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.mobile-search-form .search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    padding: 11px 14px;
    color: var(--clr-header-text);
    font-size: 15px;
}

.mobile-search-form .search-input::placeholder {
    color: var(--clr-header-muted);
}

.mobile-search-form .search-submit {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--clr-header-muted);
    padding: 11px 14px;
}

.mobile-search-form .search-submit:hover {
    color: var(--clr-header-text);
}

/* ══════════════════════════════════════════════
   8. POST CARDS & CONTENT LOOP
   ══════════════════════════════════════════════ */

/* ── Grid container ── */
.content-loop {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
    margin-bottom: 0;
    align-items: start;
}

/* ── Card ── */
.content-loop .hentry {
    display: flex;
    flex-direction: column;
    background: var(--clr-surface);
    border-radius: var(--radius);
    border: var(--border);
    overflow: hidden;
    float: none !important;      /* kill old theme float */
    margin-bottom: 0 !important; /* grid handles spacing */
    padding-bottom: 0 !important;
    transition: box-shadow var(--duration) var(--ease),
                transform var(--duration) var(--ease);
}

.content-loop .hentry:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

/* Kill the rainbow nth-of-type badge colors from style.css */
.content-loop .hentry:nth-of-type(n) .entry-category a {
    background-color: var(--clr-tag-bg) !important;
}

/* ── Card image ── */
.content-loop .thumbnail-link {
    display: block;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    flex-shrink: 0;
    overflow: hidden;
}

.content-loop .thumbnail-wrap {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.content-loop .thumbnail-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    transition: transform var(--duration-slow) var(--ease);
}

.content-loop .hentry:hover .thumbnail-link img {
    transform: scale(1.04);
}

/* ── Card body ── */
.card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--sp-5);
    gap: var(--sp-2);
}

/* ── Category badge ── */
.entry-category a {
    background: var(--clr-tag-bg) !important;
    color: var(--clr-tag-text) !important;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs) !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 10px !important;
    text-decoration: none;
    display: inline-block;
    transition: background var(--duration-fast) var(--ease);
}

.entry-category a:hover {
    background: var(--clr-accent-hover) !important;
    color: var(--clr-tag-text) !important;
}

/* ── Entry header ── */
.entry-header {
    padding-bottom: var(--sp-4);
}

/* ── Title ── */
.entry-title {
    font-size: var(--text-xl) !important;
    line-height: 1.3;
    margin-bottom: 0;
}

.entry-title a {
    color: var(--clr-text);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease);
}

.entry-title a:hover { color: var(--clr-accent); }

.content-loop .entry-title {
    font-size: var(--text-lg) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Entry meta ── */
.entry-meta {
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
}

.content-loop .entry-meta {
    margin-bottom: 0;
}

/* ── Post thumbnail (single / non-loop) ── */
.thumbnail-link img,
.wp-post-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius) var(--radius) 0 0;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease);
}

.thumbnail-link:hover img { transform: scale(1.03); }
.thumbnail-wrap { overflow: hidden; }

/* ── Entry summary ── */
.entry-summary {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.content-loop .entry-summary {
    flex: 1;       /* push read-more to bottom of card */
    margin-bottom: 0;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    clear: none;   /* remove old float clearfix */
}

/* ── Card read-more link ── */
.card-read-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: var(--sp-1);
    color: var(--clr-accent);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: gap var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}

.card-read-more:hover {
    gap: 10px;
    color: var(--clr-accent-hover);
}

/* ── Inline read-more (WP more tag) ── */
.read-more-button,
.more-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding: 9px 20px;
    background: var(--clr-accent);
    color: var(--clr-white) !important;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease),
                transform var(--duration-fast) var(--ease);
}

.read-more-button:hover,
.more-link:hover {
    background: var(--clr-accent-hover);
    transform: translateX(2px);
}

/* ══════════════════════════════════════════════
   9. SINGLE POST
   ══════════════════════════════════════════════ */

.single .entry-header,
.page .entry-header {
    margin-bottom: var(--sp-8);
    padding-bottom: var(--sp-6);
    border-bottom: var(--border);
}

.single h1.entry-title,
.page h1.entry-title {
    font-size: var(--text-3xl) !important;
    line-height: 1.2;
    margin-bottom: var(--sp-4);
}

/* ── Single post body typography ── */
.entry-content {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--clr-text);
}

.entry-content h2 { font-size: var(--text-2xl); margin: 1.8em 0 0.6em; }
.entry-content h3 { font-size: var(--text-xl);  margin: 1.6em 0 0.5em; }
.entry-content h4 { font-size: var(--text-lg);  margin: 1.4em 0 0.4em; }

.entry-content p { margin-bottom: 1.4em; }

.entry-content a {
    color: var(--clr-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--duration-fast) var(--ease);
}

.entry-content a:hover {
    text-decoration-color: var(--clr-accent);
}

/* ── Blockquote ── */
.entry-content blockquote {
    border-left: 4px solid var(--clr-accent);
    background: var(--clr-accent-light);
    margin: var(--sp-6) 0;
    padding: var(--sp-5) var(--sp-6);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
    color: var(--clr-text-muted);
}

.entry-content blockquote p:last-child { margin-bottom: 0; }

/* ── Lists ── */
.entry-content ul,
.entry-content ol {
    padding-left: 1.6em;
    margin-bottom: 1.4em;
}

.entry-content li { margin-bottom: 0.4em; }

/* ── Tables ── */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--sp-6);
    font-size: var(--text-sm);
    overflow-x: auto;
    display: block;
}

.entry-content th {
    background: var(--clr-surface-alt);
    font-weight: 600;
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 2px solid var(--clr-border);
    white-space: nowrap;
}

.entry-content td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: var(--border);
}

.entry-content tr:hover td { background: var(--clr-surface-alt); }

/* ── HR ── */
.entry-content hr {
    border: 0;
    border-top: 2px solid var(--clr-border);
    margin: var(--sp-8) 0;
}

/* ══════════════════════════════════════════════
   10. SIDEBAR
   ══════════════════════════════════════════════ */

.sidebar .widget {
    background: var(--clr-surface);
    border-radius: var(--radius);
    padding: var(--sp-5) !important;
    margin-bottom: var(--sp-5);
    box-shadow: var(--shadow-xs);
    border: var(--border);
}

.sidebar .widget:last-child { margin-bottom: 0; }

.sidebar .widget-title,
.sidebar .widget h2 {
    font-size: var(--text-base) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--clr-text);
    margin-bottom: var(--sp-4) !important;
    padding-bottom: var(--sp-3);
    border-bottom: 2px solid var(--clr-accent);
    display: inline-block;
}

/* ══════════════════════════════════════════════
   11. FOOTER
   ══════════════════════════════════════════════ */

.site-footer {
    background: var(--clr-footer-bg);
    color: var(--clr-footer-text);
    margin-top: auto;
}

.footer-columns {
    padding: var(--sp-12) 0 var(--sp-8);
    border-bottom: 1px solid var(--clr-footer-border);
}

.footer-columns .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--sp-8);
}

.footer-columns .widget-title,
.footer-columns .widget h2 {
    color: var(--clr-white);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-columns .widget a { color: var(--clr-footer-text); }
.footer-columns .widget a:hover { color: var(--clr-white); }

/* Footer bar */
#site-bottom {
    padding: var(--sp-5) 0;
}

#site-bottom .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}

.site-info {
    font-size: var(--text-sm);
    color: var(--clr-footer-text);
}

.site-info a {
    color: var(--clr-footer-text);
    transition: color var(--duration-fast) var(--ease);
}

.site-info a:hover { color: var(--clr-white); }

/* Credits bar — spans full width below the copyright/nav row */
.site-credits {
    width: 100%;
    margin: var(--sp-3) 0 0;
    font-size: var(--text-xs);
    color: var(--clr-footer-text);
    line-height: 1.9;
    text-align: center;
    border-top: 1px solid var(--clr-footer-border);
    padding-top: var(--sp-3);
}

.site-credits a {
    color: var(--clr-footer-text);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease);
}

.site-credits a:hover { color: var(--clr-white); }

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav li a {
    color: var(--clr-footer-text);
    font-size: var(--text-sm);
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-sm);
    transition: color var(--duration-fast) var(--ease);
}

.footer-nav li a:hover { color: var(--clr-white); }

/* ══════════════════════════════════════════════
   12. PAGINATION
   ══════════════════════════════════════════════ */

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    justify-content: center;
    padding: var(--sp-8) 0 var(--sp-4);
}

.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 var(--sp-3);
    border: var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--clr-text);
    background: var(--clr-surface);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}

.pagination .page-numbers:hover,
.pagination .current {
    background: var(--clr-accent);
    border-color: var(--clr-accent);
    color: var(--clr-white);
}

/* ══════════════════════════════════════════════
   13. BREADCRUMBS
   ══════════════════════════════════════════════ */

.breadcrumbs {
    background: var(--clr-surface) !important;
    padding: var(--sp-3) 0 !important;
    border-bottom: var(--border) !important;
    margin-bottom: var(--sp-5) !important;
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
}

.breadcrumbs a { color: var(--clr-accent); }

/* ══════════════════════════════════════════════
   14. BUTTONS & FORM ELEMENTS
   ══════════════════════════════════════════════ */

button,
input[type="submit"],
input[type="button"],
.button {
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    transition: background var(--duration-fast) var(--ease),
                border-color var(--duration-fast) var(--ease);
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    border: var(--border);
    border-radius: var(--radius-sm);
    background: var(--clr-surface);
    color: var(--clr-text);
    padding: 9px 12px;
    max-width: 100%;
    width: 100%;
    transition: border-color var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* ── Comment form ── */
#commentform .comment-form-author,
#commentform .comment-form-email,
#commentform .comment-form-url {
    float: none !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: var(--sp-4);
}

/* ══════════════════════════════════════════════
   15. GUTENBERG: ALIGNWIDE & ALIGNFULL
   ══════════════════════════════════════════════ */

.entry-content .alignwide {
    width: calc(100% + clamp(40px, 6vw, 120px));
    max-width: 1100px;
    margin-left: calc(-1 * clamp(20px, 3vw, 60px));
    margin-right: calc(-1 * clamp(20px, 3vw, 60px));
}

.entry-content .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.entry-content .alignleft {
    float: left;
    margin: 0.5em var(--sp-5) var(--sp-4) 0;
    max-width: 50%;
}

.entry-content .alignright {
    float: right;
    margin: 0.5em 0 var(--sp-4) var(--sp-5);
    max-width: 50%;
}

.entry-content .aligncenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ── Gutenberg block spacing ── */
.entry-content .wp-block-image {
    margin-bottom: var(--sp-6);
}

.entry-content .wp-block-image figcaption {
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    text-align: center;
    margin-top: var(--sp-2);
    font-style: italic;
}

.entry-content .wp-block-separator {
    border: 0;
    border-top: 2px solid var(--clr-border);
    margin: var(--sp-8) 0;
}

/* ── Gutenberg columns ── */
.entry-content .wp-block-columns {
    gap: var(--gap);
}

/* ══════════════════════════════════════════════
   16. SKIP LINK / ACCESSIBILITY
   ══════════════════════════════════════════════ */

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--sp-4);
    z-index: 9999;
    background: var(--clr-accent);
    color: var(--clr-white);
    padding: var(--sp-3) var(--sp-5);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    transition: top var(--duration-fast) var(--ease);
}

.skip-link:focus { top: 0; }

/* Focus visible — keyboard navigation */
:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Remove focus ring from mouse clicks */
:focus:not(:focus-visible) { outline: none; }

/* ══════════════════════════════════════════════
   17. BACK TO TOP
   ══════════════════════════════════════════════ */

#back-top {
    position: fixed;
    bottom: var(--sp-6);
    right: var(--sp-6);
    z-index: 900;
}

#back-top a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--clr-accent);
    color: var(--clr-white);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    transition: background var(--duration-fast) var(--ease),
                transform var(--duration-fast) var(--ease);
    text-decoration: none;
}

#back-top a:hover {
    background: var(--clr-accent-hover);
    transform: translateY(-3px);
}

/* ══════════════════════════════════════════════
   18. ULTRAWIDE DISPLAY SUPPORT (1440px+)
   ══════════════════════════════════════════════ */

@media (min-width: 1440px) {
    :root {
        --container-max: 1400px;
        --sidebar-width: 320px;
    }
}

@media (min-width: 1600px) {
    :root {
        --container-max: 1520px;
        --sidebar-width: 340px;
    }
}

@media (min-width: 1920px) {
    :root {
        --container-max: 1680px;
        --container-pad: 60px;
    }
}

/* Never stretch content beyond reading comfort */
.single #primary .entry-content,
.page #primary .entry-content {
    max-width: var(--content-max);
}

/* ══════════════════════════════════════════════
   19. HIGH-DPI / RETINA DISPLAY SUPPORT
   ══════════════════════════════════════════════ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .site-header {
        -webkit-font-smoothing: antialiased;
    }
}

/* ══════════════════════════════════════════════
   20. PRINT STYLES
   ══════════════════════════════════════════════ */

@media print {
    .site-header,
    .sidebar,
    #secondary,
    #back-top,
    .entry-share,
    .comment-form,
    .header-toggles,
    .footer-columns {
        display: none !important;
    }

    #primary,
    #content.site-content {
        width: 100% !important;
        display: block !important;
        float: none !important;
    }

    body { font-size: 12pt; color: #000; background: #fff; }

    a::after {
        content: ' (' attr(href) ')';
        font-size: 10pt;
    }

    .entry-content pre {
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }
}

/* ══════════════════════════════════════════════
   21. REDUCED MOTION
   ══════════════════════════════════════════════ */

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