/* ════════════════════════════════════════════════════════════════════
   KnowTheCheese — Unified Stylesheet
   ktc-unified.css

   Replaces ktc-css-patch.css. Enqueue via functions.php.
   Inline <style> blocks in header.php, footer.php, single.php are
   authoritative for those templates. This file provides:

     1.  CSS custom properties (design tokens)
     2.  Global resets + base typography
     3.  Accessibility utilities
     4.  Homepage sections (hero, category grid, article cards,
         trust block, newsletter)
     5.  Shared component utilities (badges, view-all, section wrappers)
     6.  Article card + compact card images (shared across pages)
     7.  Plugin overrides: Easy Table of Contents, Genesis search form
     8.  Bare table fallback (entry-content)
     9.  Genesis / Brunch Pro layout overrides
    10.  Print styles

   Fonts loaded via functions.php:
     Google Fonts: Literata (400,600,700) + DM Sans (300,400,500,600,700)
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   §1  DESIGN TOKENS
   ════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Colour palette ── */
    --ktc-char:    #2b2522;   /* dark charcoal — primary text, header, footer */
    --ktc-cream:   #faf7f2;   /* warm cream — section backgrounds, card tints */
    --ktc-milk:    #fff;      /* white — card surfaces, body */
    --ktc-honey:   #c8902e;   /* gold/honey — accents, CTAs, active states */
    --ktc-honey-l: #d9a040;   /* light honey — hover on honey elements */
    --ktc-slate:   #5a524d;   /* medium gray-brown — secondary text */
    --ktc-stone:   #8c8480;   /* light gray-brown — muted text, dividers */

    /* ── Semantic colours ── */
    --ktc-border:  rgba(43, 37, 34, 0.08);   /* universal subtle border */
    --ktc-shadow:  rgba(43, 37, 34, 0.08);   /* card shadow tint */

    /* ── Border radii ── */
    --ktc-rs: 6px;    /* small — buttons, badges, inputs */
    --ktc-rl: 10px;   /* large — cards, modals, images */

    /* ── Typography ── */
    --ktc-font-d: 'Literata', Georgia, serif;         /* display / headings */
    --ktc-font-b: 'DM Sans', system-ui, sans-serif;   /* body / UI */

    /* ── Layout ── */
    --ktc-header-h: 64px;
    --ktc-max-w: 1200px;
    --ktc-content-w: 800px;
}


/* ════════════════════════════════════════════════════════════════════
   §2  GLOBAL RESET + BASE
   ════════════════════════════════════════════════════════════════════ */

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

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

body {
    margin: 0;
    font-family: var(--ktc-font-b);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ktc-char);
    background: var(--ktc-milk);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Remove Genesis default margins on images */
.entry-content img {
    margin: 0;
}

a {
    color: inherit;
}

button {
    font-family: var(--ktc-font-b);
}

/* ── Base headings — Literata for h1–h3, DM Sans for h4–h6 ── */

h1, h2, h3 {
    font-family: var(--ktc-font-d);
    font-weight: 700;
    line-height: 1.25;
    color: var(--ktc-char);
    margin: 0;
}

h4, h5, h6 {
    font-family: var(--ktc-font-b);
    font-weight: 600;
    color: var(--ktc-char);
    margin: 0;
}


/* ════════════════════════════════════════════════════════════════════
   §3  ACCESSIBILITY UTILITIES
   ════════════════════════════════════════════════════════════════════ */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Skip link — visible on focus for keyboard users */
.screen-reader-text:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 9999;
    width: auto;
    height: auto;
    clip: auto;
    clip-path: none;
    padding: 10px 18px;
    background: var(--ktc-honey);
    color: #fff;
    font-family: var(--ktc-font-b);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--ktc-rs);
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

:focus-visible {
    outline: 2px solid var(--ktc-honey);
    outline-offset: 2px;
}

/* Suppress outline for mouse users while preserving keyboard access */
:focus:not(:focus-visible) {
    outline: none;
}


/* ════════════════════════════════════════════════════════════════════
   §4  GENESIS / BRUNCH PRO LAYOUT OVERRIDES
   Full-width content on custom templates; remove sidebar on all CPTs.

   Brunch Pro style.css sets:
     .site-inner, .wrap       { max-width: 1140px }
     .site-inner              { margin: 24px auto; padding: 24px 37px }
     .content                 { float: right; width: 720px }
   We must beat all of these with !important to get true full-width.
   ════════════════════════════════════════════════════════════════════ */

/* ── Strip all Genesis/Brunch Pro container constraints ── */

.site-inner,
.wrap {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.content-sidebar-wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

/* Genesis floats .content to 720px — kill the float and restore full width */
.content {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Also target the full-width-content variant explicitly */
.full-width-content .content,
.full-width-slim .content {
    float: none !important;
    width: 100% !important;
}

.entry-content {
    padding: 0;
    max-width: 100%;
}

/* Remove Genesis default h2 before entry (Brunch Pro sometimes shows site title) */
.site-title,
.site-description {
    display: none;
}

/* Kill any Brunch Pro clearfix pseudo-elements that add unwanted spacing */
.site-inner::before,
.site-inner::after,
.content-sidebar-wrap::before,
.content-sidebar-wrap::after {
    display: none !important;
}


/* ════════════════════════════════════════════════════════════════════
   §5  SECTION WRAPPER UTILITY
   Used by front-page.php sections and any future hub pages.
   ════════════════════════════════════════════════════════════════════ */

.ktc-section {
    padding: 64px 0;
}

.ktc-section__inner {
    max-width: var(--ktc-max-w);
    margin: 0 auto;
    padding: 0 24px;
}

.ktc-section__title {
    font-family: var(--ktc-font-d);
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    color: var(--ktc-char);
    margin: 0 0 32px;
}

/* Alternate cream background variant */
.ktc-section--cream {
    background: var(--ktc-cream);
}

/* ── View-all link (used after card grids) ── */

.ktc-view-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
    font-family: var(--ktc-font-b);
    font-size: 14px;
    font-weight: 600;
    color: var(--ktc-honey);
    text-decoration: none;
    transition: color 0.15s;
}

.ktc-view-all:hover {
    color: var(--ktc-honey-l);
    text-decoration: underline;
}


/* ════════════════════════════════════════════════════════════════════
   §6  HERO SECTION
   Homepage: dark background, large Literata heading, centered search.
   ════════════════════════════════════════════════════════════════════ */

.ktc-hero {
    background: var(--ktc-char);
    padding: 80px 0 72px;
    text-align: center;
    position: relative;
    /* F38: No ::after gradient divider — explicitly suppressed */
}

/* F38 compliance — belt-and-suspenders from ktc-css-patch.css */
.ktc-hero::after {
    display: none !important;
}

.ktc-hero__inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}

.ktc-hero__eyebrow {
    display: inline-block;
    font-family: var(--ktc-font-b);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ktc-honey);
    margin-bottom: 18px;
}

.ktc-hero__title {
    font-family: var(--ktc-font-d);
    font-size: clamp(32px, 5.5vw, 52px);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

.ktc-hero__subtitle {
    font-family: var(--ktc-font-b);
    font-size: 16px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 36px;
}

/* ── Hero search bar ── */

.ktc-hero__search {
    max-width: 520px;
    margin: 0 auto 40px;
}

/* Override Genesis search form inside hero */
.ktc-hero__search .search-form,
.ktc-hero__search form {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.ktc-hero__search input[type="search"],
.ktc-hero__search .search-form-input,
.ktc-hero__search .search-field {
    flex: 1;
    height: 50px;
    padding: 0 20px;
    font-family: var(--ktc-font-b);
    font-size: 15px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    outline: none;
    transition: background 0.15s, box-shadow 0.15s;
}

.ktc-hero__search input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.ktc-hero__search input[type="search"]:focus {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 2px var(--ktc-honey);
}

.ktc-hero__search button[type="submit"],
.ktc-hero__search .search-form-submit {
    height: 50px;
    padding: 0 28px;
    font-family: var(--ktc-font-b);
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    background: var(--ktc-honey);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}

.ktc-hero__search button[type="submit"]:hover {
    background: var(--ktc-honey-l);
}

/* ── Hero stats strip ── */

.ktc-hero__stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.ktc-stat {
    font-family: var(--ktc-font-b);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.ktc-stat strong {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    font-family: var(--ktc-font-d);
}

@media (max-width: 480px) {
    .ktc-hero {
        padding: 56px 0 48px;
    }

    .ktc-hero__search .search-form,
    .ktc-hero__search form {
        flex-direction: column;
    }

    .ktc-hero__search input[type="search"],
    .ktc-hero__search .search-field {
        border-radius: 999px;
    }

    .ktc-hero__stats {
        gap: 20px;
    }
}


/* ════════════════════════════════════════════════════════════════════
   §7  CATEGORY GRID (7 silo tiles)
   7 tiles on homepage: 4 cols desktop → 3 cols tablet → 2 mobile
   ════════════════════════════════════════════════════════════════════ */

.ktc-category-grid {
    background: var(--ktc-cream);
}

.ktc-tile-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.ktc-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 28px 16px 24px;
    background: var(--ktc-milk);
    border: 1px solid var(--ktc-border);
    border-radius: var(--ktc-rl);
    text-decoration: none;
    color: var(--ktc-char);
    gap: 10px;
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}

.ktc-tile:hover {
    border-color: var(--ktc-honey);
    box-shadow: 0 4px 20px rgba(200, 144, 46, 0.12);
    transform: translateY(-2px);
}

/* Phosphor icon — set via class ph ph-{icon} */
.ktc-tile i,
.ktc-tile [class^="ph "],
.ktc-tile [class*=" ph "] {
    font-size: 32px;
    color: var(--ktc-honey);
    line-height: 1;
    display: block;
}

.ktc-tile h3 {
    font-family: var(--ktc-font-b);
    font-size: 14px;
    font-weight: 600;
    color: var(--ktc-char);
    margin: 0;
    line-height: 1.3;
}

.ktc-tile__count {
    font-family: var(--ktc-font-b);
    font-size: 12px;
    font-weight: 400;
    color: var(--ktc-stone);
    display: block;
}

/* If Phosphor icon script not loaded — SVG fallback shows same size */
.ktc-tile svg {
    width: 32px;
    height: 32px;
    color: var(--ktc-honey);
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .ktc-tile-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

@media (max-width: 640px) {
    .ktc-tile-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 360px) {
    .ktc-tile-grid {
        grid-template-columns: 1fr;
    }
}


/* ════════════════════════════════════════════════════════════════════
   §8  ARTICLE CARDS + CARD GRID
   Used on homepage sections and archive pages.
   F37: images use aspect-ratio, not fixed height.
   ════════════════════════════════════════════════════════════════════ */

/* ── Card grid layout ── */

.ktc-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* 4-up variant (Popular Comparisons, Latest Guides) */
.ktc-card-grid--four {
    grid-template-columns: repeat(4, 1fr);
}

/* Horizontal scroll variant (Best Cheese For... strip) */
.ktc-card-grid--horizontal-scroll {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    grid-template-columns: none;
}

.ktc-card-grid--horizontal-scroll::-webkit-scrollbar {
    height: 4px;
}

.ktc-card-grid--horizontal-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.ktc-card-grid--horizontal-scroll::-webkit-scrollbar-thumb {
    background: var(--ktc-stone);
    border-radius: 2px;
}

.ktc-card-grid--horizontal-scroll .ktc-article-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
}

/* ── Article card ── */

.ktc-article-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--ktc-milk);
    border: 1px solid var(--ktc-border);
    border-radius: var(--ktc-rl);
    overflow: hidden;
    transition: box-shadow 0.18s, transform 0.18s;
    color: var(--ktc-char);
}

.ktc-article-card:hover {
    box-shadow: 0 6px 24px rgba(43, 37, 34, 0.1);
    transform: translateY(-3px);
}

/* F37: aspect-ratio, not fixed height */
.ktc-article-card__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--ktc-cream);
    flex-shrink: 0;
}

.ktc-article-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.3s ease;
}

.ktc-article-card:hover .ktc-article-card__image img {
    transform: scale(1.03);
}

.ktc-article-card__content {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.ktc-article-card__badge {
    display: inline-block;
    padding: 3px 9px;
    font-family: var(--ktc-font-b);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-radius: 999px;
    background: rgba(200, 144, 46, 0.1);
    color: var(--ktc-honey);
    align-self: flex-start;
}

.ktc-article-card__title {
    font-family: var(--ktc-font-d);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ktc-char);
    margin: 0;
}

.ktc-article-card__excerpt {
    font-family: var(--ktc-font-b);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ktc-slate);
    margin: 0;
}

/* ── Compact card — horizontal scroll strips ── */

.ktc-compact-card__image {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--ktc-rs);
    background: var(--ktc-cream);
}

.ktc-compact-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ── Card grid responsive behaviour ── */

@media (max-width: 1024px) {
    .ktc-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .ktc-card-grid--four {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ktc-card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ktc-card-grid--four {
        grid-template-columns: 1fr;
    }

    /* Keep horizontal scroll as-is on mobile — just narrower cards */
    .ktc-card-grid--horizontal-scroll .ktc-article-card {
        flex: 0 0 240px;
    }
}


/* ════════════════════════════════════════════════════════════════════
   §9  BADGE COLOUR VARIANTS
   Applied as ktc-badge--{post-type} alongside ktc-article-card__badge
   or ktc-article-badge on single posts.
   ════════════════════════════════════════════════════════════════════ */

/* Default: honey (cheese) */
.ktc-badge--cheese {
    background: rgba(200, 144, 46, 0.1);
    color: var(--ktc-honey);
}

/* Substitute — teal */
.ktc-badge--substitute {
    background: rgba(0, 120, 115, 0.1);
    color: #007873;
}

/* Compare — slate blue */
.ktc-badge--compare {
    background: rgba(59, 91, 152, 0.1);
    color: #3b5b98;
}

/* Pairing — burgundy */
.ktc-badge--pairing {
    background: rgba(140, 63, 50, 0.12);
    color: #8C3F32;
}

/* Best For — forest green */
.ktc-badge--best_for {
    background: rgba(22, 101, 52, 0.1);
    color: #166534;
}

/* Guide — amber */
.ktc-badge--guide {
    background: rgba(180, 83, 9, 0.1);
    color: #b45309;
}

/* Region — teal-blue */
.ktc-badge--region {
    background: rgba(42, 143, 160, 0.12);
    color: #2A8FA0;
}

/* Generic article/page fallback */
.ktc-badge--post,
.ktc-badge--page {
    background: rgba(43, 37, 34, 0.08);
    color: var(--ktc-char);
}


/* ════════════════════════════════════════════════════════════════════
   §10  TRUST BLOCK
   ════════════════════════════════════════════════════════════════════ */

.ktc-trust-block {
    background: var(--ktc-cream);
    text-align: center;
}

.ktc-trust-block .ktc-section__inner {
    max-width: 640px;
}

.ktc-trust-block h2 {
    font-family: var(--ktc-font-d);
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 700;
    color: var(--ktc-char);
    margin: 0 0 14px;
}

.ktc-trust-block p {
    font-family: var(--ktc-font-b);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ktc-slate);
    margin: 0 0 24px;
}

.ktc-trust-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    font-family: var(--ktc-font-b);
    font-size: 14px;
    font-weight: 600;
    color: var(--ktc-honey);
    border: 1.5px solid var(--ktc-honey);
    border-radius: 999px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.ktc-trust-link:hover {
    background: var(--ktc-honey);
    color: #fff;
}


/* ════════════════════════════════════════════════════════════════════
   §11  NEWSLETTER SECTION (homepage mid-page)
   ════════════════════════════════════════════════════════════════════ */

.ktc-newsletter {
    background: var(--ktc-char);
    text-align: center;
}

.ktc-newsletter .ktc-section__inner {
    max-width: 560px;
}

.ktc-newsletter h2 {
    font-family: var(--ktc-font-d);
    font-size: clamp(22px, 3.5vw, 30px);
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
}

.ktc-newsletter p {
    font-family: var(--ktc-font-b);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 28px;
}

/* ── Newsletter form ── */

.ktc-newsletter__form {
    /* wrapper div — no layout of its own */
}

.ktc-newsletter__form-inner {
    display: flex;
    gap: 8px;
    max-width: 480px;
    margin: 0 auto;
}

.ktc-newsletter__input {
    flex: 1;
    height: 48px;
    padding: 0 18px;
    font-family: var(--ktc-font-b);
    font-size: 15px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ktc-newsletter__input::placeholder {
    color: rgba(255, 255, 255, 0.38);
}

.ktc-newsletter__input:focus {
    border-color: var(--ktc-honey);
    box-shadow: 0 0 0 3px rgba(200, 144, 46, 0.2);
}

.ktc-newsletter__button {
    height: 48px;
    padding: 0 26px;
    font-family: var(--ktc-font-b);
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    background: var(--ktc-honey);
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;
}

.ktc-newsletter__button:hover {
    background: var(--ktc-honey-l);
}

.ktc-newsletter__trust {
    font-family: var(--ktc-font-b);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.38);
    text-align: center;
    margin: 10px 0 0;
}

@media (max-width: 480px) {
    .ktc-newsletter__form-inner {
        flex-direction: column;
    }

    .ktc-newsletter__input,
    .ktc-newsletter__button {
        width: 100%;
    }
}


/* ════════════════════════════════════════════════════════════════════
   §12  PLUGIN OVERRIDES
   ════════════════════════════════════════════════════════════════════ */

/* ── §12a  Easy Table of Contents ──
   Counter: none. Bar markers. Transparent header.
   (F17 from friction log) */

#ez-toc-container {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 0 32px !important;
}

#ez-toc-container .ez-toc-title-container {
    background: transparent;
    border-bottom: 1px solid rgba(43, 37, 34, 0.15);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

#ez-toc-container .ez-toc-title {
    font-family: var(--ktc-font-d);
    font-size: 16px;
    font-weight: 600;
    color: var(--ktc-char);
}

#ez-toc-container ul {
    list-style: none !important;
    counter-reset: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

#ez-toc-container ul li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 6px;
}

#ez-toc-container ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: 14px;
    background: var(--ktc-honey);
    border-radius: 2px;
}

#ez-toc-container ul li a {
    font-family: var(--ktc-font-b);
    font-size: 14px;
    color: var(--ktc-slate);
    text-decoration: none;
    line-height: 1.5;
}

#ez-toc-container ul li a:hover {
    color: var(--ktc-honey);
}

/* Hide H3 sub-items — keep TOC compact */
#ez-toc-container ul ul {
    display: none;
}


/* ── §12b  Genesis Search Form ──
   Targets both Genesis (.search-form-input) and WP native (.search-field).
   (F15 from friction log) */

body .search-form input[type="search"],
body .search-form .search-form-input,
body .search-form .search-field {
    font-family: var(--ktc-font-b);
    font-size: 15px;
    padding: 10px 16px;
    border: 1px solid rgba(43, 37, 34, 0.15);
    border-radius: var(--ktc-rs);
    background: var(--ktc-milk);
    color: var(--ktc-char);
    width: 100%;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

body .search-form input[type="search"]:focus,
body .search-form .search-form-input:focus,
body .search-form .search-field:focus {
    border-color: var(--ktc-honey);
    box-shadow: 0 0 0 3px rgba(200, 144, 46, 0.1);
}

/* Submit button baseline */
body .search-form button[type="submit"],
body .search-form .search-form-submit {
    padding: 10px 20px;
    font-family: var(--ktc-font-b);
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: var(--ktc-rs);
    background: var(--ktc-honey);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

body .search-form button[type="submit"]:hover,
body .search-form .search-form-submit:hover {
    background: var(--ktc-honey-l);
}

/* ── §12c  Rank Math breadcrumbs ──
   If Rank Math renders its breadcrumb anywhere outside single.php
   we ensure it inherits brand styles. */

.rank-math-breadcrumb {
    font-family: var(--ktc-font-b);
    font-size: 13px;
    color: var(--ktc-stone);
}

.rank-math-breadcrumb a {
    color: var(--ktc-slate);
    text-decoration: none;
}

.rank-math-breadcrumb a:hover {
    color: var(--ktc-honey);
}


/* ════════════════════════════════════════════════════════════════════
   §13  BARE TABLE FALLBACK
   Catches <table> inside .entry-content without a ktc- wrapper.
   (F37 from friction log)
   ════════════════════════════════════════════════════════════════════ */

body .entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    font-size: 14px;
    font-family: var(--ktc-font-b);
    border: 1px solid rgba(43, 37, 34, 0.1);
    border-radius: var(--ktc-rl);
    overflow: hidden;
}

body .entry-content table thead th,
body .entry-content table th {
    background: var(--ktc-char);
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 11px 16px;
    text-align: left;
}

body .entry-content table tbody td,
body .entry-content table td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(43, 37, 34, 0.07);
    color: var(--ktc-char);
    line-height: 1.5;
}

body .entry-content table tbody tr:nth-child(even) {
    background: var(--ktc-cream);
}

body .entry-content table tbody tr:nth-child(odd) {
    background: var(--ktc-milk);
}

body .entry-content table tbody tr:last-child td {
    border-bottom: none;
}

@media (max-width: 768px) {
    body .entry-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ════════════════════════════════════════════════════════════════════
   §14  SHARED SINGLE-POST CLASSES
   The bulk of single-post styling lives in single.php inline <style>.
   This section provides anything that needs to be available at
   stylesheet load time (before single.php parses) or is shared with
   other templates (e.g. article card badges).
   ════════════════════════════════════════════════════════════════════ */

/* ── §14a  Article hero header offset (sticky header compensation) ── */

.ktc-article-hero {
    padding-top: calc(var(--ktc-header-h) + 24px);
}

/* Override: single.php sets padding-top: 40px on .ktc-article-hero
   — let the inline style win on single pages. The generic rule above
   targets any other context where .ktc-article-hero might appear. */

/* ── §14b  Entry content body typography ──
   Applied to .ktc-article-body.entry-content inside single.php.
   Augments the inline single.php styles with any overrides needed
   for Brunch Pro / Genesis resets. */

.ktc-article-body.entry-content,
.entry-content.ktc-article-body {
    max-width: none; /* parent .ktc-single already constrains width */
}

/* Ensure Brunch Pro doesn't override our link color inside articles */
.ktc-article-body a {
    color: var(--ktc-honey) !important;
}

.ktc-article-body a:hover {
    color: var(--ktc-honey-l) !important;
}

/* ── §14c  Term link pills — also used on archive/category pages ── */

.ktc-term-link {
    display: inline-block;
    padding: 4px 12px;
    font-family: var(--ktc-font-b);
    font-size: 12px;
    font-weight: 500;
    color: var(--ktc-slate);
    background: var(--ktc-cream);
    border: 1px solid rgba(43, 37, 34, 0.1);
    border-radius: 999px;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.ktc-term-link:hover {
    color: var(--ktc-honey);
    border-color: var(--ktc-honey);
}
body.single .ktc-article {
    padding-bottom: 72px;
}

body.single .ktc-article-header {
    padding: clamp(40px, 6vw, 64px) 24px 32px;
    border-bottom: 1px solid var(--ktc-border);
}

body.single .ktc-article-header-inner {
    max-width: 760px;
    margin: 0 auto;
}

body.single .ktc-article-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    margin-bottom: 16px;
    border-radius: 999px;
    font-family: var(--ktc-font-b);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

body.single .ktc-article-header h1 {
    margin: 0;
    font-size: clamp(36px, 4.2vw, 52px);
    line-height: 1.14;
    letter-spacing: -0.03em;
    max-width: none;
    text-wrap: balance;
}

body.single .ktc-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 16px;
    font-family: var(--ktc-font-b);
    font-size: 14px;
    color: var(--ktc-slate);
}

body.single .ktc-article-meta-sep {
    color: var(--ktc-stone);
}

body.single .ktc-article-content {
    max-width: calc(var(--ktc-content-w) + 48px);
    margin: 0 auto;
    padding: 36px 24px 0;
}

body.single .ktc-article-hero {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 32px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--ktc-cream);
}

body.single .ktc-hero-img {
    width: 100%;
    height: auto;
    display: block;
}

body.single .ktc-article-content > :first-child {
    margin-top: 0;
}

body.single .ktc-article-content > :last-child {
    margin-bottom: 0;
}

body.single .ktc-article-content > .ktc-keyfacts,
body.single .ktc-article-content > .ktc-table,
body.single .ktc-article-content > #ez-toc-container {
    width: 100%;
}

body.single .ktc-related-strip {
    max-width: calc(var(--ktc-max-w) - 96px);
    margin: 64px auto 0;
    padding: 0 24px;
}

body.single .ktc-related-strip h3 {
    margin: 0 0 24px;
    font-size: clamp(24px, 3vw, 32px);
}

body.single .ktc-grid.ktc-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

body.single .ktc-related-strip .ktc-article-card {
    min-height: 100%;
}

body.single .ktc-article-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

body.single .ktc-article-card-body h4 {
    font-family: var(--ktc-font-d);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0;
}

body.single .ktc-article-card-body p {
    margin: 0;
    font-family: var(--ktc-font-b);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ktc-slate);
}


/* ════════════════════════════════════════════════════════════════════
   §15  GLOBAL INTERACTIVE STATES
   Transition timing used consistently across all components.
   ════════════════════════════════════════════════════════════════════ */

/* All interactive elements share the same easing */
a,
button {
    transition-timing-function: ease;
}

/* Honey CTA buttons — reusable utility class */
.ktc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 24px;
    font-family: var(--ktc-font-b);
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 999px;
    background: var(--ktc-honey);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}

.ktc-btn:hover {
    background: var(--ktc-honey-l);
    color: #fff;
}

.ktc-btn--outline {
    background: transparent;
    color: var(--ktc-honey);
    border: 1.5px solid var(--ktc-honey);
}

.ktc-btn--outline:hover {
    background: var(--ktc-honey);
    color: #fff;
}


/* ════════════════════════════════════════════════════════════════════
   §16  HEADER UTILITIES
   The full header stylesheet lives in header.php inline <style>.
   These rules provide supplementary overrides that the inline block
   cannot safely reach (e.g. body-level sticky offset).
   ════════════════════════════════════════════════════════════════════ */

/* Prevent content from hiding under sticky header on anchor navigation */
[id]:target {
    scroll-margin-top: calc(var(--ktc-header-h) + 16px);
}

/* Sticky header creates a stacking context — ensure Rank Math notices */
.ktc-site-header {
    z-index: 1000;
}

/* ── ktc-header-h custom property availability ──
   Defined again here so page templates that load this CSS before
   header.php parses still have the variable. */
.ktc-header-h {
    height: var(--ktc-header-h);
}


/* ════════════════════════════════════════════════════════════════════
   §17  FOOTER UTILITIES
   Full footer stylesheet lives in footer.php inline <style>.
   This section catches any footer classes used in other contexts,
   e.g. the newsletter form class used on the homepage.
   ════════════════════════════════════════════════════════════════════ */

/* Footer email anchor (used in footer bottom bar) */
.ktc-footer-email {
    color: var(--ktc-honey);
    text-decoration: none;
    font-family: var(--ktc-font-b);
    font-size: 13px;
}

.ktc-footer-email:hover {
    color: var(--ktc-honey-l);
    text-decoration: underline;
}


/* ════════════════════════════════════════════════════════════════════
   §18  RESPONSIVE HELPERS
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ktc-section {
        padding: 48px 0;
    }

    .ktc-section__title {
        margin-bottom: 24px;
    }

    body.single .ktc-article-header {
        padding: 36px 20px 28px;
    }

    body.single .ktc-article-content {
        padding: 28px 20px 0;
    }

    body.single .ktc-related-strip {
        margin-top: 48px;
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .ktc-section {
        padding: 36px 0;
    }

    .ktc-section__inner {
        padding: 0 16px;
    }

    body.single .ktc-article-header h1 {
        font-size: clamp(30px, 10vw, 40px);
    }

    body.single .ktc-article-meta {
        gap: 6px 10px;
        font-size: 13px;
    }

    body.single .ktc-grid.ktc-grid-3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Hide on mobile */
@media (max-width: 768px) {
    .ktc-hide-mobile {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 769px) {
    .ktc-hide-desktop {
        display: none !important;
    }
}


/* ════════════════════════════════════════════════════════════════════
   §19  PRINT
   ════════════════════════════════════════════════════════════════════ */

@media print {
    .ktc-site-header,
    .ktc-site-footer,
    .ktc-hero__search,
    .ktc-newsletter,
    .ktc-crosssilo,
    .ktc-related,
    #ez-toc-container {
        display: none !important;
    }

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

    .ktc-article-title {
        font-size: 22pt;
    }

    .ktc-article-body {
        font-size: 11pt;
        line-height: 1.6;
    }

    a {
        color: #000;
        text-decoration: underline;
    }

    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 9pt;
        color: #555;
    }

    /* Don't print href for internal nav links */
    .ktc-article-breadcrumb a[href]::after,
    .ktc-term-link[href]::after {
        content: none;
    }
}