/*
Theme Name: Kakobuy Spreadsheet Hub
Theme URI: https://sheetfinds.com/
Author: SheetFinds
Author URI: https://sheetfinds.com/
Description: A bright, friendly SEO-optimized WordPress theme dedicated to the Kakobuy Spreadsheet. Ships with 11 shopping categories linked to sheetfinds.com, twin call-to-action buttons on every page, a dual dropdown navigation (Categories + Guide), 12 hand-written original SEO articles targeting the Kakobuy Spreadsheet keyword cluster, Article + WebSite schema, Open Graph tags, mobile-first responsive layout, and a light, airy Western pastel palette optimized for shopping discovery.
Version: 3.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kakobuy-hub
Tags: blog, one-column, two-columns, right-sidebar, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks
*/

/* =============================================================
   Kakobuy Spreadsheet Hub — v3.0
   Palette: cream · coral · mint · sky · lavender · sunshine
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:root {
    /* Base tones */
    --c-bg:        #FFFCF5;
    --c-bg-alt:    #FFF3E4;
    --c-surface:   #FFFFFF;
    --c-ink:       #1E2749;
    --c-ink-soft:  #4B5578;
    --c-muted:     #8B93AC;
    --c-line:      #EFE7D8;

    /* Accent palette (cycle across 11 category cards) */
    --c-coral:     #FFC7BE;   --c-coral-ink:  #C33A22;
    --c-mint:      #BFEED8;   --c-mint-ink:   #0E7A55;
    --c-sky:       #C7E1FF;   --c-sky-ink:    #1957C6;
    --c-lav:       #DED2FF;   --c-lav-ink:    #6733CA;
    --c-sun:       #FFE599;   --c-sun-ink:    #8A6300;
    --c-peach:     #FFD5B0;   --c-peach-ink:  #B24500;
    --c-rose:      #FFD1DE;   --c-rose-ink:   #B01D65;
    --c-lemon:     #EFF2A2;   --c-lemon-ink:  #656A00;
    --c-aqua:      #C1EEE8;   --c-aqua-ink:   #086B62;
    --c-blush:     #FFDBDD;   --c-blush-ink:  #B01F3A;
    --c-lilac:     #DFE3FF;   --c-lilac-ink:  #3F49B8;

    /* Interactive */
    --c-btn:       #FF6F5C;
    --c-btn-hov:   #F0523F;
    --c-btn-ink:   #FFFFFF;
    --c-btn2:      #1E2749;
    --c-btn2-hov:  #101731;

    /* Radii, shadows, transitions */
    --r-sm:  10px;
    --r-md:  16px;
    --r-lg:  22px;
    --r-xl:  30px;
    --sh-1:  0 2px 8px rgba(30, 39, 73, .06);
    --sh-2:  0 8px 24px rgba(30, 39, 73, .08);
    --sh-3:  0 14px 36px rgba(30, 39, 73, .12);
    --tr:    .22s ease;

    --ff-head: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --w-container: 1180px;
}

body {
    font-family: var(--ff-body);
    color: var(--c-ink);
    background-color: var(--c-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320' fill='none' stroke='%23FF8B72' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.22'><g transform='translate(30 40)'><rect x='0' y='16' width='38' height='42' rx='2'/><path d='M9 16 L9 8 A10 10 0 0 1 29 8 L29 16'/></g><g transform='translate(220 42)'><rect x='0' y='10' width='38' height='32' rx='2'/><path d='M0 20 L38 20 M19 10 L19 42'/><path d='M19 10 C13 3 3 5 5 12 C7 17 15 15 19 10 Z'/><path d='M19 10 C25 3 35 5 33 12 C31 17 23 15 19 10 Z'/></g><g transform='translate(140 140)'><path d='M18 30 C18 30 0 16 0 7 C0 -1 10 -1 18 6 C26 -1 36 -1 36 7 C36 16 18 30 18 30 Z'/></g><g transform='translate(30 210)'><path d='M0 15 L28 0 L46 22 L18 37 Z'/><circle cx='12' cy='15' r='2.5'/></g><g transform='translate(238 220)' stroke-width='2'><path d='M14 0 L14 28 M0 14 L28 14'/><path d='M6 6 L22 22 M6 22 L22 6' opacity='0.55'/></g><circle cx='195' cy='260' r='3.5' fill='%23FF8B72' stroke='none' opacity='0.6'/><circle cx='90' cy='120' r='3' fill='%23FF8B72' stroke='none' opacity='0.6'/><circle cx='285' cy='155' r='2.5' fill='%23FF8B72' stroke='none' opacity='0.6'/></svg>");
    background-repeat: repeat;
    line-height: 1.65;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-head);
    color: var(--c-ink);
    margin: 0 0 .5em;
    line-height: 1.22;
    letter-spacing: -.01em;
    font-weight: 700;
}
h1 { font-size: clamp(2rem, 4vw + .5rem, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.55rem, 2vw + .8rem, 2.3rem); }
h3 { font-size: clamp(1.25rem, 1vw + .8rem, 1.55rem); }
p  { margin: 0 0 1.1em; }
strong { color: var(--c-ink); font-weight: 700; }

.container {
    width: 100%;
    max-width: var(--w-container);
    margin: 0 auto;
    padding: 0 22px;
}

/* =========== BUTTONS =========== */
.btn {
    display: inline-flex; align-items: center; gap: .55em;
    padding: .82em 1.55em;
    border-radius: 999px;
    border: 2px solid transparent;
    font-weight: 600; font-family: var(--ff-head);
    font-size: .98rem; letter-spacing: .01em;
    transition: transform var(--tr), background var(--tr), box-shadow var(--tr), border-color var(--tr);
    text-align: center; white-space: nowrap; cursor: pointer;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn-primary   { background: var(--c-btn);  color: var(--c-btn-ink); }
.btn-primary:hover  { background: var(--c-btn-hov); color: #fff; }
.btn-secondary { background: var(--c-btn2); color: #fff; }
.btn-secondary:hover { background: var(--c-btn2-hov); color: #fff; }
.btn-ghost     { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.btn-ghost:hover { background: var(--c-surface); border-color: var(--c-ink); }
.btn-lg        { padding: 1em 2em; font-size: 1.06rem; }
.btn-sm        { padding: .55em 1.05em; font-size: .88rem; }
.btn svg       { width: 18px; height: 18px; }

/* =========== HEADER =========== */
.site-header {
    position: sticky; top: 0; z-index: 90;
    background: rgba(255, 252, 245, .92);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--c-line);
}
.header-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; padding: 14px 0;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
    width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg, var(--c-btn) 0%, #FF9E7A 60%, var(--c-sun) 100%);
    display: grid; place-items: center; color: #fff; font-weight: 800;
    font-family: var(--ff-head); font-size: 1.1rem; box-shadow: var(--sh-1);
}
.brand-name {
    font-family: var(--ff-head); font-weight: 800; font-size: 1.18rem;
    color: var(--c-ink); letter-spacing: -.01em;
}
.brand-name span { color: var(--c-btn); font-weight: 700; }

.main-nav { display: flex; align-items: center; gap: 6px; }
.main-nav > a, .main-nav .dropdown-toggle {
    padding: .55em .95em; border-radius: 10px;
    color: var(--c-ink-soft); font-weight: 600; font-family: var(--ff-head);
    font-size: .95rem;
    background: transparent; border: 0;
    display: inline-flex; align-items: center; gap: .3em;
    transition: color var(--tr), background var(--tr);
}
.main-nav > a:hover, .main-nav .dropdown-toggle:hover {
    color: var(--c-ink); background: var(--c-bg-alt);
}
.has-dropdown { position: relative; }
.dropdown-toggle svg { width: 14px; height: 14px; transition: transform var(--tr); }
.has-dropdown.open .dropdown-toggle svg,
.has-dropdown:hover .dropdown-toggle svg { transform: rotate(180deg); }

.dropdown-menu {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    padding: 10px;
    box-shadow: var(--sh-3);
    min-width: 260px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--tr), transform var(--tr), visibility var(--tr);
    display: grid; gap: 2px;
    z-index: 100;
}
.dropdown-menu.wide { min-width: 380px; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.has-dropdown:hover .dropdown-menu,
.has-dropdown.open .dropdown-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.dropdown-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    color: var(--c-ink-soft); font-size: .93rem; font-weight: 500;
    transition: background var(--tr), color var(--tr);
}
.dropdown-menu a:hover { background: var(--c-bg-alt); color: var(--c-ink); }
.dropdown-menu a .em { font-size: 1.1rem; line-height: 1; }

.header-cta { display: flex; gap: 8px; }
.nav-toggle {
    display: none;
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--c-bg-alt); border: 1px solid var(--c-line);
    color: var(--c-ink); align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* =========== HERO =========== */
.hero {
    position: relative; overflow: hidden;
    padding: 90px 0 100px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='800' viewBox='0 0 1440 800' fill='none' preserveAspectRatio='xMidYMid slice'><g transform='translate(60 380)' opacity='0.55'><rect x='0' y='60' width='180' height='220' rx='10' fill='%23FFCFBB'/><rect x='0' y='60' width='180' height='220' rx='10' fill='none' stroke='%23E88E70' stroke-width='2.5'/><path d='M40 60 L40 30 A50 50 0 0 1 140 30 L140 60' fill='none' stroke='%23E88E70' stroke-width='2.5'/><rect x='30' y='140' width='120' height='16' rx='2' fill='%23E88E70' opacity='0.4'/><rect x='30' y='170' width='90' height='10' rx='2' fill='%23E88E70' opacity='0.25'/></g><g transform='translate(1160 380)' opacity='0.55'><rect x='0' y='60' width='200' height='200' rx='6' fill='%23BFEED8'/><rect x='0' y='60' width='200' height='200' rx='6' fill='none' stroke='%2372BE9C' stroke-width='2.5'/><rect x='0' y='140' width='200' height='30' fill='%2372BE9C' opacity='0.32'/><rect x='90' y='60' width='20' height='200' fill='%2372BE9C' opacity='0.32'/><path d='M100 60 C 60 20 20 40 45 70 C 65 88 100 68 100 60 Z' fill='%23FFCFBB' stroke='%23E88E70' stroke-width='2'/><path d='M100 60 C 140 20 180 40 155 70 C 135 88 100 68 100 60 Z' fill='%23FFCFBB' stroke='%23E88E70' stroke-width='2'/></g><g transform='translate(340 500)' opacity='0.4'><rect x='0' y='40' width='120' height='140' rx='6' fill='%23C7E1FF'/><path d='M25 40 L25 20 A35 35 0 0 1 95 20 L95 40' fill='none' stroke='%236B9BE0' stroke-width='2'/></g><g transform='translate(920 560)' opacity='0.5'><path d='M0 30 L60 0 L88 40 L28 70 Z' fill='%23DED2FF' stroke='%238B71D0' stroke-width='2'/><circle cx='18' cy='30' r='6' fill='%23FFFCF5' stroke='%238B71D0' stroke-width='2'/></g><g transform='translate(700 100)' opacity='0.5'><path d='M22 36 C22 36 0 20 0 8 C0 -2 12 -4 22 6 C32 -4 44 -2 44 8 C44 20 22 36 22 36 Z' fill='%23FFB4C4'/></g><g stroke='%23FFB84D' stroke-width='3' stroke-linecap='round' fill='none' opacity='0.65'><path d='M450 260 L450 300 M430 280 L470 280'/><path d='M1050 200 L1050 232 M1034 216 L1066 216'/><path d='M280 320 L280 344 M268 332 L292 332'/></g><g opacity='0.55'><circle cx='360' cy='260' r='6' fill='%23FFB4C4'/><circle cx='1100' cy='340' r='5' fill='%23C7E1FF'/><circle cx='820' cy='700' r='6' fill='%23BFEED8'/><circle cx='560' cy='680' r='4' fill='%23FFCFBB'/><circle cx='1240' cy='620' r='5' fill='%23DED2FF'/><circle cx='180' cy='560' r='4' fill='%23FFB4C4'/></g></svg>") no-repeat center center / cover,
        radial-gradient(circle at 15% 15%, #FFE9DE 0%, transparent 55%),
        radial-gradient(circle at 88% 20%, #D9F1FF 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, #E7FBEB 0%, transparent 60%),
        var(--c-bg);
}
.hero-blob {
    position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5;
    pointer-events: none;
}
.hero-blob.b1 { width: 340px; height: 340px; background: var(--c-coral); top: -80px; left: -80px; }
.hero-blob.b2 { width: 300px; height: 300px; background: var(--c-mint);  bottom: -80px; right: -60px; }
.hero-blob.b3 { width: 260px; height: 260px; background: var(--c-sky);   top: 40%; left: 60%; opacity: .35; }

.hero-inner { position: relative; text-align: center; max-width: 820px; margin: 0 auto; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px; border-radius: 999px;
    background: #fff; border: 1px solid var(--c-line);
    font-family: var(--ff-head); font-weight: 600; font-size: .85rem;
    color: var(--c-ink-soft); box-shadow: var(--sh-1);
    margin-bottom: 22px;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-btn); box-shadow: 0 0 0 4px rgba(255,111,92,.18); }
.hero h1 { margin-bottom: 20px; }
.hero h1 .grad {
    background: linear-gradient(120deg, var(--c-btn) 0%, #FF9C74 40%, var(--c-lav-ink) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { color: var(--c-ink-soft); font-size: 1.15rem; margin-bottom: 34px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.hero-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    max-width: 600px; margin: 46px auto 0;
}
.hero-stat {
    background: rgba(255,255,255,.7);
    border: 1px solid var(--c-line); backdrop-filter: blur(6px);
    border-radius: var(--r-md); padding: 16px 12px; text-align: center;
}
.hero-stat .num {
    display: block; font-family: var(--ff-head); font-weight: 800; font-size: 1.6rem;
    color: var(--c-btn);
}
.hero-stat .lbl { font-size: .82rem; color: var(--c-muted); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }

/* =========== FEATURE STRIP =========== */
.feature-strip { padding: 40px 0; background: var(--c-surface); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.feature-strip-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.fs-item { display: flex; align-items: center; gap: 14px; }
.fs-icon {
    width: 46px; height: 46px; border-radius: 14px;
    background: var(--c-bg-alt); display: grid; place-items: center; font-size: 1.35rem;
    flex-shrink: 0;
}
.fs-item .t { display: block; font-family: var(--ff-head); font-weight: 700; font-size: .98rem; color: var(--c-ink); }
.fs-item .s { display: block; font-size: .82rem; color: var(--c-muted); }

/* =========== SECTIONS =========== */
.section { padding: 90px 0; }
.section-alt {
    background-color: var(--c-bg-alt);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320' fill='none' stroke='%230E9C68' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.16'><g transform='translate(60 60)'><rect x='0' y='16' width='38' height='42' rx='2'/><path d='M9 16 L9 8 A10 10 0 0 1 29 8 L29 16'/></g><g transform='translate(210 220)'><rect x='0' y='10' width='38' height='32' rx='2'/><path d='M0 20 L38 20 M19 10 L19 42'/><path d='M19 10 C13 3 3 5 5 12 C7 17 15 15 19 10 Z'/><path d='M19 10 C25 3 35 5 33 12 C31 17 23 15 19 10 Z'/></g><g transform='translate(230 60)'><path d='M18 30 C18 30 0 16 0 7 C0 -1 10 -1 18 6 C26 -1 36 -1 36 7 C36 16 18 30 18 30 Z'/></g><g transform='translate(50 220)'><path d='M0 15 L28 0 L46 22 L18 37 Z'/><circle cx='12' cy='15' r='2.5'/></g><g transform='translate(148 160)' stroke-width='2'><path d='M12 0 L12 24 M0 12 L24 12'/></g></svg>");
    background-repeat: repeat;
}
.hero-blob { opacity: .32; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 50px; }
.section-head .eyebrow { margin-bottom: 14px; }
.section-head h2 { margin-bottom: 14px; }
.section-head p { color: var(--c-ink-soft); font-size: 1.05rem; }

/* =========== CATEGORY GRID (11 cards) =========== */
.category-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.cat-card {
    display: block; padding: 26px 22px;
    border-radius: var(--r-lg);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    box-shadow: var(--sh-1);
    position: relative; overflow: hidden;
    transition: transform var(--tr), box-shadow var(--tr);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.cat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 84px;
    z-index: 0;
}
.cat-icon {
    position: relative; z-index: 1;
    width: 62px; height: 62px; border-radius: 18px;
    background: var(--c-surface); box-shadow: var(--sh-1);
    display: grid; place-items: center; font-size: 1.8rem;
    margin: 8px 0 18px;
}
.cat-card h3 { position: relative; z-index: 1; font-size: 1.1rem; margin-bottom: 6px; }
.cat-card p  { position: relative; z-index: 1; color: var(--c-ink-soft); font-size: .88rem; margin: 0 0 16px; }
.cat-card .cat-link {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 600; font-family: var(--ff-head); font-size: .88rem; color: var(--c-btn);
}
.cat-card .cat-link svg { width: 14px; height: 14px; transition: transform var(--tr); }
.cat-card:hover .cat-link svg { transform: translateX(4px); }

/* Cycle category colors */
.cat-c1::before  { background: var(--c-coral); }
.cat-c2::before  { background: var(--c-mint); }
.cat-c3::before  { background: var(--c-sky); }
.cat-c4::before  { background: var(--c-lav); }
.cat-c5::before  { background: var(--c-sun); }
.cat-c6::before  { background: var(--c-peach); }
.cat-c7::before  { background: var(--c-rose); }
.cat-c8::before  { background: var(--c-lemon); }
.cat-c9::before  { background: var(--c-aqua); }
.cat-c10::before { background: var(--c-blush); }
.cat-c11::before { background: var(--c-lilac); }

/* =========== ARTICLE GRID (12 cards) =========== */
.article-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.article-card {
    display: flex; flex-direction: column;
    background: var(--c-surface);
    border-radius: var(--r-lg);
    border: 1px solid var(--c-line);
    box-shadow: var(--sh-1);
    overflow: hidden;
    transition: transform var(--tr), box-shadow var(--tr);
}
.article-card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.article-thumb {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden;
    display: grid; place-items: center;
    font-family: var(--ff-head); font-weight: 800; color: rgba(255,255,255,.9);
    font-size: 1.35rem; letter-spacing: -.02em; text-align: center;
    padding: 20px;
}
.article-thumb.a1  { background: linear-gradient(135deg, #FF7A6A 0%, #FFB48A 100%); }
.article-thumb.a2  { background: linear-gradient(135deg, #7EE0BB 0%, #B7EEDA 100%); }
.article-thumb.a3  { background: linear-gradient(135deg, #8BC9FF 0%, #BDDEFF 100%); }
.article-thumb.a4  { background: linear-gradient(135deg, #B8A5FF 0%, #DED2FF 100%); }
.article-thumb.a5  { background: linear-gradient(135deg, #FFD873 0%, #FFE7A3 100%); color: #6b4b00; }
.article-thumb.a6  { background: linear-gradient(135deg, #FFB58A 0%, #FFD3B4 100%); }
.article-thumb.a7  { background: linear-gradient(135deg, #FF9EB8 0%, #FFCFDE 100%); }
.article-thumb.a8  { background: linear-gradient(135deg, #D6E162 0%, #EFF2A2 100%); color: #4a4b00; }
.article-thumb.a9  { background: linear-gradient(135deg, #6CD4C7 0%, #B4E8E2 100%); }
.article-thumb.a10 { background: linear-gradient(135deg, #FF9AA6 0%, #FFCDD4 100%); }
.article-thumb.a11 { background: linear-gradient(135deg, #A8B4FF 0%, #DFE3FF 100%); }
.article-thumb.a12 { background: linear-gradient(135deg, #FF7A6A 0%, #B8A5FF 100%); }

.article-body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.article-tag {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: var(--c-bg-alt); color: var(--c-btn); font-weight: 600; font-size: .74rem;
    letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px;
    align-self: flex-start;
}
.article-card h3 { font-size: 1.12rem; line-height: 1.35; margin-bottom: 10px; }
.article-card p  { color: var(--c-ink-soft); font-size: .93rem; margin: 0 0 16px; flex: 1; }
.article-card .art-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--ff-head); font-weight: 600; color: var(--c-btn); font-size: .9rem;
}
.article-card .art-link svg { width: 14px; height: 14px; transition: transform var(--tr); }
.article-card:hover .art-link svg { transform: translateX(4px); }

/* =========== CTA BANNER =========== */
.cta-banner {
    background: linear-gradient(135deg, #FF6F5C 0%, #FF9E7A 40%, #FFD873 100%);
    padding: 70px 0; text-align: center; color: #fff;
    border-radius: var(--r-xl);
    margin: 0 22px;
}
.cta-banner h2 { color: #fff; font-size: clamp(1.6rem, 2vw + .8rem, 2.5rem); }
.cta-banner p { color: rgba(255,255,255,.92); max-width: 620px; margin: 0 auto 26px; font-size: 1.06rem; }
.cta-banner .btn-primary { background: #fff; color: var(--c-btn); }
.cta-banner .btn-primary:hover { background: #fff5f3; color: var(--c-btn-hov); }
.cta-banner .btn-secondary { background: rgba(255,255,255,.15); border: 2px solid #fff; }
.cta-banner .btn-secondary:hover { background: #fff; color: var(--c-ink); }
.cta-inner { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* =========== ABOUT SECTION =========== */
.about-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.about-visual {
    aspect-ratio: 4/3; border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--c-coral) 0%, var(--c-sun) 100%);
    position: relative; overflow: hidden; padding: 30px;
    display: grid; place-items: center;
}
.about-visual .sheet-mock {
    background: #fff; border-radius: 14px; box-shadow: var(--sh-3);
    padding: 20px; width: 100%; max-width: 340px;
    font-family: 'Inter', monospace; font-size: .78rem;
}
.about-visual .sheet-mock .row {
    display: grid; grid-template-columns: 1.4fr 1fr .7fr; gap: 10px;
    padding: 8px 0; border-bottom: 1px dashed var(--c-line);
    color: var(--c-ink-soft);
}
.about-visual .sheet-mock .row:first-child { color: var(--c-ink); font-weight: 700; }
.about-visual .sheet-mock .row:last-child { border-bottom: 0; }
.about-visual .sheet-mock .row .tag { padding: 1px 6px; border-radius: 6px; background: var(--c-mint); color: var(--c-mint-ink); font-weight: 700; text-align: center; }

.about h2 { margin-bottom: 18px; }
.about p { color: var(--c-ink-soft); font-size: 1.02rem; }
.about ul { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
.about ul li { display: flex; align-items: flex-start; gap: 12px; color: var(--c-ink-soft); }
.about ul li::before {
    content: '✓'; width: 24px; height: 24px; flex-shrink: 0;
    border-radius: 50%; background: var(--c-mint); color: var(--c-mint-ink);
    display: grid; place-items: center; font-weight: 800; font-size: .9rem;
    margin-top: 2px;
}

/* =========== SINGLE POST =========== */
.post-hero {
    background: radial-gradient(circle at 20% 20%, #FFE9DE 0%, transparent 50%),
                radial-gradient(circle at 80% 30%, #D9F1FF 0%, transparent 50%),
                var(--c-bg);
    padding: 70px 0 40px;
    border-bottom: 1px solid var(--c-line);
}
.post-hero .breadcrumb {
    font-size: .85rem; color: var(--c-muted); margin-bottom: 18px;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.post-hero .breadcrumb a { color: var(--c-ink-soft); }
.post-hero .breadcrumb a:hover { color: var(--c-btn); }
.post-hero .breadcrumb span { color: var(--c-muted); }
.post-hero h1 { max-width: 820px; margin-bottom: 16px; }
.post-hero .lede { max-width: 720px; color: var(--c-ink-soft); font-size: 1.1rem; }
.post-hero .meta {
    display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px;
    color: var(--c-muted); font-size: .88rem; font-weight: 500;
}
.post-hero .meta span { display: inline-flex; align-items: center; gap: 6px; }

.post-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: 60px; padding: 60px 0 90px;
}
.post-content { min-width: 0; }
.post-content h2 { margin-top: 2em; padding-top: .2em; }
.post-content h3 { margin-top: 1.6em; }
.post-content p, .post-content ul, .post-content ol { font-size: 1.02rem; color: var(--c-ink-soft); }
.post-content ul, .post-content ol { padding-left: 22px; margin-bottom: 1.2em; }
.post-content ul li, .post-content ol li { margin-bottom: .5em; }
.post-content a { color: var(--c-btn); font-weight: 600; border-bottom: 1px dashed rgba(255,111,92,.5); transition: color var(--tr), border-color var(--tr); }
.post-content a:hover { color: var(--c-btn-hov); border-bottom-color: var(--c-btn-hov); }
.post-content blockquote {
    margin: 1.4em 0; padding: 20px 24px; border-left: 4px solid var(--c-btn);
    background: var(--c-bg-alt); border-radius: 0 var(--r-md) var(--r-md) 0;
    color: var(--c-ink); font-style: italic;
}
.post-content .callout {
    padding: 20px 24px; border-radius: var(--r-md);
    background: linear-gradient(135deg, #FFF0EA 0%, #FFF6E0 100%);
    border: 1px solid #FFD8C7; margin: 1.4em 0;
}
.post-content .callout p:last-child { margin-bottom: 0; }
.post-content .callout strong { color: var(--c-coral-ink); }

.internal-links {
    margin: 2.5em 0;
    background: var(--c-bg-alt); border-radius: var(--r-md);
    padding: 24px 26px; border: 1px solid var(--c-line);
}
.internal-links h4 { margin-bottom: 12px; font-size: 1.05rem; }
.internal-links ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.internal-links ul li a { color: var(--c-ink); font-weight: 500; }
.internal-links ul li::before { content: '→ '; color: var(--c-btn); font-weight: 700; }

.sidebar {
    align-self: start; position: sticky; top: 100px;
    display: grid; gap: 24px;
}
.side-card {
    background: var(--c-surface); border: 1px solid var(--c-line);
    border-radius: var(--r-md); padding: 22px 22px 24px; box-shadow: var(--sh-1);
}
.side-card h4 { font-size: 1rem; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); }
.side-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.side-card ul li a {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 8px; font-size: .9rem; color: var(--c-ink-soft);
    transition: background var(--tr), color var(--tr);
}
.side-card ul li a:hover { background: var(--c-bg-alt); color: var(--c-ink); }
.side-card ul li a .em { font-size: 1.1rem; }
.side-cta {
    background: linear-gradient(135deg, var(--c-btn) 0%, #FF9E7A 100%); color: #fff;
    padding: 28px 22px; text-align: center;
}
.side-cta h4 { color: #fff; border-color: rgba(255,255,255,.3); }
.side-cta p { color: rgba(255,255,255,.9); font-size: .92rem; }
.side-cta .btn { margin-top: 8px; }
.side-cta .btn-primary { background: #fff; color: var(--c-btn); }
.side-cta .btn-primary:hover { background: #fff5f3; }

.prev-next {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--c-line);
}
.prev-next a {
    padding: 20px 22px; border-radius: var(--r-md); background: var(--c-bg-alt);
    border: 1px solid var(--c-line); transition: background var(--tr), border-color var(--tr);
}
.prev-next a:hover { background: var(--c-surface); border-color: var(--c-btn); }
.prev-next a.next { text-align: right; }
.prev-next .label { display: block; font-size: .78rem; color: var(--c-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-bottom: 6px; }
.prev-next .title { font-family: var(--ff-head); font-weight: 700; color: var(--c-ink); font-size: 1rem; }

/* =========== FOOTER =========== */
.site-footer {
    background: #1E2749; color: rgba(255,255,255,.75);
    padding: 70px 0 30px;
    margin-top: 60px;
}
.site-footer a { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: #fff; }
.footer-grid {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
    margin-bottom: 40px;
}
.footer-brand p { max-width: 320px; font-size: .92rem; color: rgba(255,255,255,.65); }
.footer-brand .brand { color: #fff; margin-bottom: 16px; }
.footer-brand .brand-name { color: #fff; }
.footer-col h5 {
    color: #fff; font-family: var(--ff-head); font-weight: 700;
    font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col ul li a { font-size: .93rem; }
.footer-bottom {
    padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
    font-size: .85rem; color: rgba(255,255,255,.55);
}

/* =========== 404 =========== */
.err-404 {
    text-align: center; padding: 120px 22px;
}
.err-404 .code {
    font-family: var(--ff-head); font-weight: 800;
    font-size: clamp(4rem, 12vw, 8rem); line-height: 1;
    background: linear-gradient(135deg, var(--c-btn) 0%, var(--c-lav-ink) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    margin-bottom: 20px;
}
.err-404 h1 { margin-bottom: 14px; }
.err-404 p { color: var(--c-ink-soft); max-width: 500px; margin: 0 auto 30px; }

/* =========== RESPONSIVE =========== */
@media (max-width: 1024px) {
    .category-grid { grid-template-columns: repeat(3, 1fr); }
    .article-grid { grid-template-columns: repeat(2, 1fr); }
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .feature-strip-grid { grid-template-columns: repeat(2, 1fr); }
    .post-layout { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
    .nav-toggle { display: inline-flex; }
    .main-nav {
        position: fixed; inset: 60px 0 0 0;
        background: var(--c-bg); border-top: 1px solid var(--c-line);
        flex-direction: column; align-items: stretch;
        padding: 20px; gap: 4px;
        transform: translateX(100%); transition: transform var(--tr);
        overflow-y: auto;
    }
    .main-nav.open { transform: translateX(0); }
    .main-nav > a, .main-nav .dropdown-toggle { justify-content: space-between; padding: 14px 16px; font-size: 1rem; }
    .has-dropdown { display: block; }
    .dropdown-menu {
        position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
        box-shadow: none; border: 0; background: var(--c-bg-alt);
        margin: 0 0 8px; padding: 6px; min-width: 0;
        max-height: 0; overflow: hidden; transition: max-height var(--tr);
    }
    .has-dropdown.open .dropdown-menu { max-height: 700px; }
    .dropdown-menu.wide { grid-template-columns: 1fr; }
    .header-cta { display: none; }
    .hero { padding: 60px 0 70px; }
    .hero-stats { grid-template-columns: 1fr; max-width: 320px; }
    .category-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .article-grid { grid-template-columns: 1fr; }
    .cta-banner { border-radius: var(--r-lg); padding: 50px 22px; margin: 0 12px; }
    .section { padding: 60px 0; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .prev-next { grid-template-columns: 1fr; }
    .feature-strip-grid { grid-template-columns: 1fr; }
}

/* WP core alignments & block styles */
.alignwide, .alignfull { max-width: 100%; }
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { margin-bottom: 1.5em; }
.wp-caption-text, .screen-reader-text { color: var(--c-muted); font-size: .85rem; text-align: center; }
.screen-reader-text {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
}
.sticky, .gallery-caption, .bypostauthor { }