/*
Theme Name:   K-Free Blog
Theme URI:    https://kfree.app/blog/
Description:  Editorial child theme for GeneratePress, built from the K-Free Brand Book. Poppins + Inter, one brand purple on Tailwind slate neutrals, one gradient per screen, light and dark values for every accent.
Author:       Stone Ventures LLC
Template:     generatepress
Version:      1.0.3
License:      GNU General Public License v2 or later
Text Domain:  kfree-blog
*/

/* =========================================================
   1. TOKENS. Straight from the Brand Book "Token reference".
   Every accent has a light AND a dark value. Never define a
   colour only inside the dark branch.
   ========================================================= */
:root{
  /* brand */
  --kf-brand:         #7C3AED;   /* 600 */
  --kf-brand-pressed: #6D28D9;   /* 700 */
  --kf-brand-tint:    #F3EEFF;
  --kf-on-brand:      #FFFFFF;

  /* purple ramp, for gradients and hairlines only */
  --kf-p300: #C4B5FD;
  --kf-p400: #C084FC;
  --kf-v400: #A78BFA;
  --kf-p500: #8B5CF6;
  --kf-p800: #5B21B6;
  --kf-p950: #2E1065;

  /* surfaces */
  --kf-ground:  #F8F9FF;
  --kf-surface: #FFFFFF;
  --kf-sunk:    #F1F5F9;
  --kf-hairline:#E2E8F0;

  /* text */
  --kf-text:      #1E293B;
  --kf-text-2:    #64748B;
  --kf-text-muted:#94A3B8;  /* decorative and inactive only: 2.56:1 on white,
                               under the 4.5:1 text minimum. Real text uses text-2. */

  /* semantic. Never decorative. */
  --kf-success: #10B981;
  --kf-caution: #D97706;
  --kf-info:    #2563EB;

  --kf-caution-fill: #FFF7ED;
  --kf-caution-line: #FDBA74;
  --kf-info-fill:    #EFF6FF;
  --kf-info-line:    #BFDBFE;
  --kf-success-fill: #ECFDF5;
  --kf-success-line: #6EE7B7;

  /* diagram card surface, so app diagrams can be dropped into a post */
  --kf-diagram-card: #FAF9FD;

  --kf-shadow:    0 1px 2px rgba(30,41,59,.04), 0 10px 28px -12px rgba(30,41,59,.14);
  --kf-shadow-lg: 0 2px 6px rgba(30,41,59,.06), 0 22px 48px -18px rgba(30,41,59,.24);

  /* type */
  --kf-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kf-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* geometry */
  --kf-r-card: 20px;   /* Brand Book: 16 to 24 */
  --kf-r-sm:   12px;
  --kf-r-pill: 999px;
  --kf-gutter: 24px;
  --kf-gap:    24px;
  --kf-max:    1180px;
  --kf-measure:700px;
  --kf-rail:   230px;
}

@media (prefers-color-scheme: dark){
  :root[data-cs="auto"]:not([data-theme="light"]){
    --kf-brand:         #C084FC;  /* 400 on dark, clears 3:1 */
    --kf-brand-pressed: #A78BFA;
    --kf-brand-tint:    rgba(139,92,246,.14);
    --kf-on-brand:      #0F172A;

    --kf-ground:  #0F172A;
    --kf-surface: #1E293B;
    --kf-sunk:    #334155;
    --kf-hairline:#334155;

    --kf-text:      #FFFFFF;
    --kf-text-2:    #CBD5E1;
    --kf-text-muted:#94A3B8;

    --kf-success: #34D399;
    --kf-caution: #FBBF24;
    --kf-info:    #60A5FA;

    --kf-caution-fill: rgba(251,191,36,.10);
    --kf-caution-line: rgba(251,191,36,.34);
    --kf-info-fill:    rgba(96,165,250,.10);
    --kf-info-line:    rgba(96,165,250,.34);
    --kf-success-fill: rgba(52,211,153,.10);
    --kf-success-line: rgba(52,211,153,.34);

    --kf-diagram-card: #241F2D;

    --kf-shadow:    0 1px 2px rgba(0,0,0,.34), 0 10px 28px -12px rgba(0,0,0,.6);
    --kf-shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 22px 48px -18px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --kf-brand:         #C084FC;
  --kf-brand-pressed: #A78BFA;
  --kf-brand-tint:    rgba(139,92,246,.14);
  --kf-on-brand:      #0F172A;

  --kf-ground:  #0F172A;
  --kf-surface: #1E293B;
  --kf-sunk:    #334155;
  --kf-hairline:#334155;

  --kf-text:      #FFFFFF;
  --kf-text-2:    #CBD5E1;
  --kf-text-muted:#94A3B8;

  --kf-success: #34D399;
  --kf-caution: #FBBF24;
  --kf-info:    #60A5FA;

  --kf-caution-fill: rgba(251,191,36,.10);
  --kf-caution-line: rgba(251,191,36,.34);
  --kf-info-fill:    rgba(96,165,250,.10);
  --kf-info-line:    rgba(96,165,250,.34);
  --kf-success-fill: rgba(52,211,153,.10);
  --kf-success-line: rgba(52,211,153,.34);

  --kf-diagram-card: #241F2D;

  --kf-shadow:    0 1px 2px rgba(0,0,0,.34), 0 10px 28px -12px rgba(0,0,0,.6);
  --kf-shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 22px 48px -18px rgba(0,0,0,.7);
}

/* =========================================================
   2. GLOBAL. Scoped to blog pages by the kf-blog body class.
   ========================================================= */
body.kf-blog{
  background: var(--kf-ground);
  color: var(--kf-text);
  font-family: var(--kf-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Poppins names things. Inter does everything else. */
body.kf-blog h1,
body.kf-blog h2,
body.kf-blog h3,
body.kf-blog h4{
  font-family: var(--kf-display);
  font-weight: 700;
  color: var(--kf-text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
/* Default link colour, wrapped in :where() so it contributes ZERO specificity.
   Written as `body.kf-blog a` it measured (0,1,2) and beat every single-class
   component rule, repainting TOC items, pills and button labels brand purple.
   And no global a:hover rule, for the same reason. Components own their colours. */
:where(body.kf-blog) a{ color: var(--kf-brand); text-underline-offset: 2px; }

body.kf-blog .site-content{ background: var(--kf-ground); }
body.kf-blog .site-content .content-area{ float:none; width:100%; padding:0; }
body.kf-blog .site-main{ margin:0; }
body.kf-blog .separate-containers .site-main > *{ margin-bottom:0; }
body.kf-blog .inside-article,
body.kf-blog .separate-containers .inside-article{ background: transparent; padding: 0; box-shadow: none; }

.kf-wrap{ max-width: var(--kf-max); margin: 0 auto; padding: 0 var(--kf-gutter); }
.kf-wrap--narrow{ max-width: 900px; }
.kf-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.kf-tablewrap table{ min-width: 480px; }
.kf-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.kf-icon{ width:16px; height:16px; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* =========================================================
   3. HEADER / NAV
   ========================================================= */
body.kf-blog .site-header{
  background: var(--kf-ground);
  border-bottom: 0;
  padding: 0;
}
body.kf-blog .site-header .inside-header{ padding: 14px var(--kf-gutter); max-width: var(--kf-max); margin:0 auto; }
body.kf-blog .site-logo img, body.kf-blog .header-image{ max-height: 34px; width:auto; }
body.kf-blog .main-title{ font-family: var(--kf-display); font-weight:700; font-size: 19px; letter-spacing:-.02em; }
body.kf-blog .site-header .main-title a{ color: var(--kf-brand); text-decoration:none; }
body.kf-blog .site-header .main-title a:hover{ color: var(--kf-brand-pressed); }
body.kf-blog .main-navigation{ background: transparent; border-bottom: 0; }
body.kf-blog .main-navigation .inside-navigation{ max-width: var(--kf-max); margin:0 auto; padding:0 var(--kf-gutter); }
/* GeneratePress sets line-height on .main-navigation .main-nav ul li a, which
   outranks a plainer selector. Match its depth or the pill text sits on a 60px
   line box inside a 36px pill and drops out the bottom. */
body.kf-blog .main-navigation .main-nav ul li a{
  font-family: var(--kf-body); font-size: 15px; font-weight: 500;
  color: var(--kf-text-2); line-height: 1; height: 52px; padding: 0 16px;
  background: transparent; display: flex; align-items: center;
}
body.kf-blog .main-navigation .main-nav ul li.current-menu-item > a,
body.kf-blog .main-navigation .main-nav ul li a:hover{ color: var(--kf-text); background: transparent; }
body.kf-blog .main-navigation .main-nav ul li{ display: flex; align-items: center; }

body.kf-blog .main-navigation .main-nav ul li.kf-menu-cta > a{
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kf-brand); color: var(--kf-on-brand) !important;
  border-radius: var(--kf-r-pill); height: 38px; line-height: 1;
  margin: 0 0 0 12px; padding: 0 18px; font-weight: 600;
}
body.kf-blog .main-navigation .main-nav ul li.kf-menu-cta > a:hover{
  background: var(--kf-brand-pressed); color: var(--kf-on-brand) !important;
}
body.kf-blog .main-navigation .main-nav ul li.kf-menu-theme{ padding-left: 4px; }

.kf-themetoggle{
  background: transparent; border:1px solid var(--kf-hairline); color: var(--kf-text-2);
  width:34px; height:34px; border-radius:50%; cursor:pointer; margin-left:8px;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.kf-themetoggle:hover{ color: var(--kf-text); border-color: var(--kf-text-2); }
.kf-themetoggle .kf-icon--sun{ display:none; }
:root[data-theme="dark"] .kf-themetoggle .kf-icon--sun{ display:block; }
:root[data-theme="dark"] .kf-themetoggle .kf-icon--moon{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .kf-themetoggle .kf-icon--sun{ display:block; }
  :root:not([data-theme="light"]) .kf-themetoggle .kf-icon--moon{ display:none; }
}

/* =========================================================
   4. ARCHIVE HEADER. On the blog index this is the category
   row and nothing else: the newest post is the top of the page.
   A title still shows on category, tag, author and search.
   ========================================================= */
.kf-masthead{ padding: 32px 0 0; }
.kf-masthead--bare{ padding: 20px 0 0; }
.kf-masthead h1{ font-size: clamp(24px, 3vw, 30px); max-width: 32ch; margin: 0; }
.kf-masthead p{ font-size: 16px; color: var(--kf-text-2); max-width: 62ch; margin: 8px 0 0; line-height:1.55; }
.kf-eyebrow{
  font-family: var(--kf-body); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--kf-brand);
  margin: 0 0 10px;
}

/* Category row. Scrolls sideways on a phone rather than stacking three deep. */
.kf-pills-wrap{ margin: var(--kf-gap) 0 0; }
.kf-masthead--bare .kf-pills-wrap{ margin: 0; }
.kf-pills{ display:flex; gap:8px; padding:0; margin:0; list-style:none; flex-wrap:wrap; }
.kf-pills a{
  display:flex; align-items:center; min-height:40px;
  font-size:14px; font-weight:500; text-decoration:none; white-space:nowrap;
  color: var(--kf-text-2); background: var(--kf-surface);
  border:1px solid var(--kf-hairline); border-radius: var(--kf-r-pill); padding:0 16px;
  transition: all .15s ease;
}
.kf-pills a:hover{ color: var(--kf-text); border-color: var(--kf-text-2); }
.kf-pills .is-active a{ background: var(--kf-brand); border-color: var(--kf-brand); color: var(--kf-on-brand); }
.kf-pills .is-active a:hover{ background: var(--kf-brand-pressed); border-color: var(--kf-brand-pressed); color: var(--kf-on-brand); }

.kf-empty{ color: var(--kf-text-2); font-size:16px; padding: 24px 0 0; }
.kf-tailspace{ height: 72px; }

/* =========================================================
   5. CARDS. White on light, #1E293B on dark, soft shadow.
   Every card carries an explicit button, because a tappable
   card on its own is invisible affordance.
   ========================================================= */
.kf-card{
  display:flex; flex-direction:column;
  background: var(--kf-surface); border-radius: var(--kf-r-card);
  box-shadow: var(--kf-shadow); overflow:hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.kf-card:hover{ box-shadow: var(--kf-shadow-lg); transform: translateY(-2px); }
.kf-card__media{
  position:relative; display:block; width:100%; aspect-ratio: 16/10;
  background: var(--kf-sunk); overflow:hidden;
}
.kf-card__media img{
  position:absolute; inset:0; width:100%; height:100%;
  max-width:none; object-fit:cover; object-position:center; display:block;
}
.kf-card__body{ padding: 18px 20px 20px; display:flex; flex-direction:column; flex:1; }
.kf-card h3{
  font-family: var(--kf-display); font-weight:600;  /* PoppinsSemiBold, the softer heading */
  font-size: 19px; line-height:1.28; margin: 10px 0 0;
}
.kf-card h3 a{ color: var(--kf-text); text-decoration:none; }
.kf-card h3 a:hover{ color: var(--kf-brand); }
.kf-card__excerpt{ color: var(--kf-text-2); font-size: 15px; line-height:1.6; margin: 8px 0 0; }
.kf-card .kf-readmore{ margin-top:auto; padding-top:16px; }

.kf-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

/* hero: same card, wider */
.kf-hero{
  display:grid; grid-template-columns: 1.1fr .9fr; align-items:stretch;
  background: var(--kf-surface); border-radius: var(--kf-r-card);
  box-shadow: var(--kf-shadow); overflow:hidden; margin: var(--kf-gap) 0 0;
}
.kf-hero__media{ position:relative; display:block; background: var(--kf-sunk); min-height:240px; overflow:hidden; }
.kf-hero__media img{
  position:absolute; inset:0; width:100%; height:100%;
  max-width:none; object-fit:cover; object-position:center; display:block;
}
.kf-hero__body{ padding: 34px 36px; display:flex; flex-direction:column; justify-content:center; }
.kf-hero h2{ font-size: clamp(24px, 2.8vw, 32px); margin: 12px 0 0; }
.kf-hero h2 a{ color: var(--kf-text); text-decoration:none; }
.kf-hero h2 a:hover{ color: var(--kf-brand); }
.kf-hero__excerpt{ color: var(--kf-text-2); font-size: 16px; line-height:1.6; margin: 10px 0 0; }
.kf-hero .kf-readmore{ margin-top: 20px; }

/* fallback art. Flat brand tint, never a second gradient. */
.kf-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: var(--kf-brand-tint); color: var(--kf-brand);
}
.kf-fallback span{
  font-family: var(--kf-display); font-weight:600; font-size: 13px;
  letter-spacing:.12em; text-transform:uppercase; text-align:center; padding: 0 14%;
}
.kf-fallback::after{
  content:""; position:absolute; inset:14px; border:1px solid currentColor;
  opacity:.22; border-radius: 12px;
}

/* meta: InterMedium, uppercase, .12em */
.kf-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-family: var(--kf-body); font-size: 11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color: var(--kf-text-2);
}
.kf-meta .kf-dot{ width:3px; height:3px; border-radius:50%; background: var(--kf-text-muted); opacity:.6; }
.kf-tag{
  font-family: var(--kf-body); font-size: 11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color: var(--kf-brand); background: var(--kf-brand-tint);
  border-radius: var(--kf-r-pill); padding: 5px 11px; text-decoration:none;
}
a.kf-tag:hover{ background: var(--kf-brand); color: var(--kf-on-brand); }
.kf-tag--float:hover{ background: var(--kf-surface); color: var(--kf-text); }
.kf-tag--float{
  position:absolute; top:12px; left:12px; z-index:2;
  background: var(--kf-surface); color: var(--kf-text);
  box-shadow: 0 2px 8px rgba(30,41,59,.16);
}

.kf-readmore{
  font-family: var(--kf-body); font-size:14px; font-weight:600; color: var(--kf-brand);
  text-decoration:none; display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
}
.kf-readmore .kf-icon{ transition: transform .2s ease; }
.kf-readmore:hover{ color: var(--kf-brand-pressed); }
.kf-readmore:hover .kf-icon{ transform: translateX(3px); }

.kf-section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding: 48px 0 var(--kf-gap); }
.kf-section-head h2{ font-size: 18px; margin: 0; }          /* Brand Book: section header, PoppinsBold 18 */
.kf-section-head p{ margin: 4px 0 0; }            /* 4px under its header */
.kf-section-head .kf-count{ font-family: var(--kf-body); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color: var(--kf-text-2); }

/* =========================================================
   6. BUTTONS
   ========================================================= */
.kf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family: var(--kf-body); font-size:15px; font-weight:600; text-decoration:none;
  border-radius: var(--kf-r-pill); padding: 14px 26px; border:1px solid transparent;
  transition: all .18s ease; cursor:pointer;
}
.kf-btn.kf-btn--primary{ background: var(--kf-brand); color: var(--kf-on-brand); }
.kf-btn.kf-btn--primary:hover{ background: var(--kf-brand-pressed); color: var(--kf-on-brand); }
.kf-btn.kf-btn--secondary{ background: transparent; border-color: var(--kf-hairline); color: var(--kf-text); }
.kf-btn.kf-btn--secondary:hover{ border-color: var(--kf-text-2); color: var(--kf-text); background: var(--kf-sunk); }
.kf-btn.kf-btn--onbrand{ background:#fff; color: var(--kf-p800); }
.kf-btn.kf-btn--onbrand:hover{ background: var(--kf-brand-tint); color: var(--kf-p800); }

/* =========================================================
   7. END CARD. One quiet card, at the end of an article only.
   No gradient: the blog is not a landing page.
   ========================================================= */
.kf-endcard{
  margin: 40px 0 0; padding: 22px 24px; border-radius: var(--kf-r-card);
  background: var(--kf-surface); border:1px solid var(--kf-hairline);
}
.kf-endcard .kf-eyebrow{ margin-bottom: 6px; }
.kf-endcard__text{ color: var(--kf-text-2); font-size: 15px; line-height:1.6; margin: 0 0 16px; }

/* =========================================================
   8. PAGINATION
   ========================================================= */
.kf-pagination{ padding: 48px 0 0; display:flex; gap:8px; justify-content:center; align-items:center; }
.kf-pagination .page-numbers{
  min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius: var(--kf-r-pill); border:1px solid var(--kf-hairline); background: var(--kf-surface);
  font-size:14px; font-weight:500; color: var(--kf-text-2); text-decoration:none; padding:0 14px;
}
.kf-pagination .page-numbers:hover{ border-color: var(--kf-text-2); color: var(--kf-text); }
.kf-pagination .page-numbers.current{ background: var(--kf-brand); border-color: var(--kf-brand); color: var(--kf-on-brand); }

/* =========================================================
   9. SINGLE POST
   ========================================================= */
.kf-progress{
  position: fixed; top:0; left:0; height:3px; width:0;
  background: var(--kf-brand); z-index: 9999; transition: width .1s linear;
}

.kf-post-head{ padding: 48px 0 0; }
.kf-post-head .kf-tag{ display:inline-flex; }
.kf-post-head h1{ font-size: clamp(26px, 3.6vw, 38px); margin: 14px 0 0; max-width: 22ch; }
.kf-dek{ font-size: 18px; color: var(--kf-text-2); max-width: 62ch; margin: 12px 0 0; line-height:1.55; }
.kf-post-head .kf-meta{ margin-top: 16px; }
/* No crop. The image sits in normal flow at its own proportions and the
   frame takes its height from it, so nothing is clipped. This assumes
   featured images are cropped to a consistent ratio before upload (16:9).
   To go back to a fixed frame: add `aspect-ratio: 21/9` here and
   `position:absolute; inset:0; height:100%; object-fit:cover` to the img. */
.kf-post-hero{
  margin: 32px 0 0; border-radius: var(--kf-r-card); overflow:hidden;
  background: var(--kf-sunk); position:relative; box-shadow: var(--kf-shadow);
  display:block;
}
.kf-post-hero img{
  position:static; width:100%; height:auto; max-width:100%; display:block;
}
/* The generated panel has no intrinsic size, so it still needs a frame. */
.kf-post-hero:has(.kf-fallback){ aspect-ratio: 16/9; }

.kf-post-body{
  display:grid; grid-template-columns: var(--kf-rail) minmax(0, var(--kf-measure)) 1fr;
  gap: 56px; padding: 44px 0 0; align-items:start;
}
/* The list can be longer than the screen. Cap it to the viewport and let it
   scroll on its own, so the current section is always reachable. */
.kf-rail{
  position: sticky; top: 88px;
  max-height: calc(100vh - 112px);
  display: flex; flex-direction: column; min-height: 0;
}
.kf-rail h4{
  font-family: var(--kf-body); font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color: var(--kf-text-2); margin:0 0 12px;
}
.kf-toc{
  list-style:none; margin:0; padding:0;
  border-left:1px solid var(--kf-hairline);
  overflow-y: auto; min-height: 0; flex: 1 1 auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--kf-hairline) transparent;
}
.kf-toc::-webkit-scrollbar{ width: 6px; }
.kf-toc::-webkit-scrollbar-track{ background: transparent; }
.kf-toc::-webkit-scrollbar-thumb{ background: var(--kf-hairline); border-radius: 3px; }
.kf-toc:hover::-webkit-scrollbar-thumb{ background: var(--kf-text-muted); }
/* Fade the cut edges, but only when there is actually more to see. */
.kf-toc.is-scrollable{
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
}
.kf-toc a{
  display:block; padding: 7px 0 7px 16px; margin-left:-1px;
  border-left:2px solid transparent; font-size:14px; line-height:1.4;
  color: var(--kf-text-2); text-decoration:none;
}
.kf-toc a:hover{ color: var(--kf-text); }
.kf-toc .is-current > a{ color: var(--kf-brand); border-left-color: var(--kf-brand); font-weight:500; }
.kf-toc .kf-toc-h3 a{ padding-left:28px; font-size:13px; }

/* Body copy runs at 17px here, above the app's 15 to 16.
   Long-form on a desktop screen is a different reading distance. */
.kf-article{ font-size: 17px; line-height: 1.7; color: var(--kf-text); max-width: var(--kf-measure); }

/* Block rhythm. Explicit bottom margins, NOT a `> * + *` rule: any
   element-level selector inside .kf-article (`.kf-article p`) outranks
   `> * + *` on specificity and silently zeroes it, which is exactly what
   happened. Same reason headings no longer get a blanket `margin: 0`.  */
.kf-article > *{ margin-top: 0; margin-bottom: 1.35em; }
.kf-article > *:first-child{ margin-top: 0; }
.kf-article > *:last-child{ margin-bottom: 0; }

.kf-article h2{ font-size: 24px; margin: 2.2em 0 .55em; scroll-margin-top: 88px; }
.kf-article h3{ font-size: 19px; font-weight:600; margin: 1.8em 0 .45em; scroll-margin-top: 88px; }
.kf-article p{ margin: 0 0 1.35em; }
.kf-article ul, .kf-article ol{ margin: 0 0 1.35em; padding-left: 1.25em; }
.kf-article li + li{ margin-top: .45em; }
.kf-article li > ul, .kf-article li > ol{ margin: .45em 0 0; }
.kf-article blockquote p{ margin: 0; }
.kf-article img{ border-radius: var(--kf-r-sm); display:block; max-width:100%; height:auto; }

/* Images get more room than a normal block sibling. Covers the block editor's
   <figure class="wp-block-image">, the classic editor's <p><img></p>, and a
   bare <img> dropped straight into the content. */
.kf-article figure,
.kf-article .wp-block-image,
.kf-article > img,
.kf-article p:has(> img:only-child){
  margin-top: 2.2em; margin-bottom: 2.2em;
}
.kf-article figure img,
.kf-article .wp-block-image img,
.kf-article p > img{ margin: 0; }
.kf-article figcaption,
.kf-article .wp-block-image figcaption{
  font-size: 14px; line-height:1.5; color: var(--kf-text-2);
  margin: 12px 0 0; text-align: left;
}
.kf-article a{ color: var(--kf-brand); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--kf-brand) 38%, transparent); }
.kf-article a:hover{ text-decoration-color: var(--kf-brand); }
.kf-article .kf-btn{ text-decoration: none; }
.kf-article blockquote{
  margin: 1.8em 0; padding: 2px 0 2px 22px; border-left:3px solid var(--kf-brand);
  font-family: var(--kf-display); font-weight:600; font-size: 20px; line-height:1.45;
  color: var(--kf-text); letter-spacing:-.01em;
}
.kf-article blockquote p{ margin:0; }
.kf-article hr{ border:0; border-top:1px solid var(--kf-hairline); margin: 2.4em 0; }
.kf-article code{ background: var(--kf-sunk); padding: 1px 6px; border-radius:6px; font-size:.9em; }
.kf-article table{ width:100%; border-collapse:collapse; font-size:15px; }
.kf-comments{ padding-top: 56px; }
.kf-article th, .kf-article td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--kf-hairline); }
.kf-article th{ font-family: var(--kf-body); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color: var(--kf-text-2); }

/* Notes. Semantic colour only, never decorative.
   Safety information is visually distinct and never fine print.
   Nothing about the reader's own experience is ever rendered in red. */
.kf-note{
  background: var(--kf-caution-fill); border:1px solid var(--kf-caution-line);
  border-radius: var(--kf-r-sm); padding: 18px 22px; margin: 1.9em 0;
  font-size: 16px; line-height:1.6; color: var(--kf-text);
}
.kf-note strong{ color: var(--kf-caution); }
.kf-note--info{ background: var(--kf-info-fill); border-color: var(--kf-info-line); }
.kf-note--info strong{ color: var(--kf-info); }
.kf-note--success{ background: var(--kf-success-fill); border-color: var(--kf-success-line); }
.kf-note--success strong{ color: var(--kf-success); }

/* Wrapper for an app diagram pasted into a post. Matches ThemedSvg's card. */
.kf-diagram{
  background: var(--kf-diagram-card); border:1px solid var(--kf-hairline);
  border-radius: var(--kf-r-sm); padding: 20px; text-align:center; margin: 1.9em 0;
}
.kf-diagram svg{ max-width:100%; height:auto; }
.kf-diagram figcaption{
  font-size:13px; color: var(--kf-text-2); line-height:1.5; margin-top:12px; text-align:left;
}

.kf-author{
  display:flex; gap:18px; align-items:flex-start; margin: 48px 0 0;
  padding: 22px 24px; border-radius: var(--kf-r-card); background: var(--kf-surface);
  border:1px solid var(--kf-hairline);
}
.kf-author__avatar{
  width:54px; height:54px; border-radius:50%; flex:0 0 54px; overflow:hidden;
  background: var(--kf-brand-tint); display:flex; align-items:center; justify-content:center;
  font-family: var(--kf-display); font-weight:700; font-size:19px; color: var(--kf-brand);
}
.kf-author__avatar img{ width:100%; height:100%; object-fit:cover; }
.kf-author h4{ font-size:16px; margin: 0; }
.kf-author p{ margin:5px 0 0; font-size:15px; color: var(--kf-text-2); line-height:1.6; }

.kf-related{ padding: 64px 0 0; border-top:1px solid var(--kf-hairline); margin-top: 56px; }
.kf-related .kf-grid{ grid-template-columns: repeat(3, 1fr); gap: 22px; }
.kf-related .kf-card h3{ font-size: 17px; }
.kf-related .kf-card__excerpt{ display:none; }

/* =========================================================
   10. FOOTER
   ========================================================= */
body.kf-blog .site-footer{ background: var(--kf-ground); border-top:1px solid var(--kf-hairline); }
body.kf-blog .site-info{
  background: transparent; color: var(--kf-text-2); font-size:14px;
  padding: 32px var(--kf-gutter); max-width: var(--kf-max); margin:0 auto;
}
body.kf-blog .site-info a{ color: var(--kf-text-2); }
body.kf-blog .site-info a:hover{ color: var(--kf-text); }

/* =========================================================
   11. RESPONSIVE. Most of this audience reads on a phone,
   often tired and one-handed, so the phone case is the one
   that has to be right.
   ========================================================= */
@media (max-width: 1180px){
  .kf-post-body{ grid-template-columns: minmax(0, var(--kf-measure)); justify-content:center; }
  .kf-rail, .kf-rail-spacer{ display:none; }
}

@media (max-width: 900px){
  :root{ --kf-gutter: 20px; }

  .kf-hero{ grid-template-columns: 1fr; }
  .kf-hero__media{ min-height:0; aspect-ratio:16/10; }
  .kf-hero__media img{ position:static; }
  .kf-hero__body{ padding: 20px; }
  .kf-hero h2{ font-size: 23px; }
  .kf-hero__excerpt{ font-size: 15px; }

  .kf-grid{ grid-template-columns: 1fr; gap: 20px; }
  .kf-related .kf-grid{ grid-template-columns: 1fr; }

  .kf-masthead{ padding: 28px 0 4px; }
  .kf-section-head{ padding: 36px 0 18px; }

  .kf-post-head{ padding: 28px 0 0; }
  .kf-post-body{ padding: 32px 0 0; }
  .kf-article{ font-size: 17px; line-height: 1.7; }
  .kf-article h2{ font-size: 21px; margin: 2em 0 .5em; }
  .kf-article h3{ font-size: 18px; margin: 1.7em 0 .45em; }
  .kf-article blockquote{ font-size: 18px; padding-left: 18px; }
}

@media (max-width: 640px){
  /* Full-bleed pill row that scrolls instead of stacking three deep. */
  .kf-pills-wrap{
    margin-inline: calc(var(--kf-gutter) * -1);
    padding-inline: var(--kf-gutter);
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .kf-pills-wrap::-webkit-scrollbar{ display:none; }
  .kf-pills{ flex-wrap: nowrap; padding-bottom: 2px; }

  /* Every tap target clears 44px. */
  .kf-pills a{ min-height:44px; }
  .kf-btn{ width:100%; min-height:48px; padding: 14px 22px; }
  .kf-readmore{ min-height:44px; align-items:center; }
  .kf-pagination .page-numbers{ min-width:48px; height:48px; }
  .kf-themetoggle{ width:44px; height:44px; }
  body.kf-blog .main-navigation a{ line-height:48px; height:48px; }

  .kf-masthead h1{ font-size: 24px; }
  .kf-masthead p{ font-size: 15px; }

  .kf-card__body{ padding: 16px 18px 18px; }
  .kf-card h3{ font-size: 18px; }
  .kf-card__excerpt{ font-size: 15px; }

  .kf-post-head h1{ font-size: 26px; line-height:1.22; max-width:none; }
  .kf-dek{ font-size: 16px; }
  .kf-post-hero:has(.kf-fallback){ aspect-ratio: 16/10; }

  .kf-author{ flex-direction:column; gap:14px; }
  .kf-endcard{ padding: 20px; }
  .kf-related{ padding-top: 48px; margin-top: 40px; }
  .kf-tailspace{ height: 48px; }

  /* Nothing ever pushes the page sideways. */
  body.kf-blog{ overflow-x: hidden; }
  .kf-article img, .kf-article iframe, .kf-article video{ max-width:100%; height:auto; }
  .kf-article pre{ overflow-x:auto; }
}

@media (max-width: 380px){
  :root{ --kf-gutter: 16px; }
  .kf-post-head h1{ font-size: 24px; }
  .kf-hero h2{ font-size: 21px; }
}

/* iOS zooms any input under 16px. */
@media (max-width: 900px){
  body.kf-blog input, body.kf-blog textarea, body.kf-blog select{ font-size: 16px; }
}


/* =========================================================
   12. MOBILE MENU
   The toggle matches the hamburger on kfree.app: a 44px
   rounded-square tint with three bars, the middle one short.
   GeneratePress gives us one <span class="gp-icon"> holding
   two SVGs, so the span becomes the middle bar and the
   button's two pseudo-elements become the outer bars.
   ========================================================= */
@media (max-width: 768px){

  body.kf-blog .main-navigation .menu-toggle{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0; margin:0;
    background: var(--kf-brand-tint); border:0; border-radius:12px;
    line-height:0; font-size:0; cursor:pointer;
  }
  body.kf-blog .main-navigation .menu-toggle:hover{ background: var(--kf-sunk); }
  body.kf-blog .main-navigation .menu-toggle .gp-icon svg{ display:none; }
  body.kf-blog .main-navigation .menu-toggle .gp-icon{
    display:block; width:15px; height:2px; margin:0; border-radius:2px;
    background: var(--kf-text); transition: opacity .18s ease;
  }
  body.kf-blog .main-navigation .menu-toggle::before,
  body.kf-blog .main-navigation .menu-toggle::after{
    content:""; display:block; width:21px; height:2px; border-radius:2px;
    background: var(--kf-text); transition: transform .22s ease;
  }
  /* open: the outer bars fold into an X, the middle one drops out */
  body.kf-blog .main-navigation .menu-toggle[aria-expanded="true"] .gp-icon{ opacity:0; }
  body.kf-blog .main-navigation .menu-toggle[aria-expanded="true"]::before{ transform: translateY(7px) rotate(45deg); }
  body.kf-blog .main-navigation .menu-toggle[aria-expanded="true"]::after{ transform: translateY(-7px) rotate(-45deg); }
  /* keyboard users keep a ring, mouse users do not get the blue browser box */
  body.kf-blog .main-navigation .menu-toggle:focus{ outline:none; }
  body.kf-blog .main-navigation .menu-toggle:focus-visible{ outline:2px solid var(--kf-brand); outline-offset:2px; }

  /* ---- the panel ---- */
  body.kf-blog .main-navigation .inside-navigation{ padding:0; }
  body.kf-blog .main-navigation .main-nav > ul{
    background: var(--kf-ground);
    border-top: 1px solid var(--kf-hairline);
    padding: 6px 0 12px;
  }
  /* the desktop rule flexes each li; on a phone they are full-width rows */
  body.kf-blog .main-navigation .main-nav ul li{ display:block; width:100%; }
  body.kf-blog .main-navigation .main-nav ul li a{
    display:flex; align-items:center; height:auto; line-height:1.35;
    padding: 13px var(--kf-gutter); font-size:16px;
  }

  /* CTA: a full-width pill in its own padded row */
  body.kf-blog .main-navigation .main-nav ul li.kf-menu-cta{ padding: 8px var(--kf-gutter) 0; }
  body.kf-blog .main-navigation .main-nav ul li.kf-menu-cta > a{
    width:100%; height:48px; margin:0; padding:0 18px;
    justify-content:center; font-size:16px;
  }

  /* Theme toggle: a labelled row, not an unexplained circle */
  body.kf-blog .main-navigation .main-nav ul li.kf-menu-theme{ padding: 8px var(--kf-gutter) 0; }
  body.kf-blog .kf-menu-theme .kf-themetoggle{
    width:100%; height:46px; margin:0; padding:0 14px;
    border-radius:12px; border:1px solid var(--kf-hairline);
    justify-content:flex-start; gap:10px;
    font-family: var(--kf-body); font-size:15px; font-weight:500; color: var(--kf-text-2);
  }
  body.kf-blog .kf-menu-theme .kf-themetoggle::after{ content:"Switch theme"; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}