/*
Theme Name: Kenya Money Guide
Theme URI: https://example-kenyafinance.com
Author: Kenya Money Guide
Author URI: https://example-kenyafinance.com
Description: A fast, mobile-friendly, AdSense-ready editorial theme built for personal finance publishing in Kenya. Includes clear navigation, featured-image support, ad-ready widget areas, an about/contact-friendly page template, and automatic linking to a Privacy Policy page. Designed for readability with an editorial serif article style.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kmg
*/

/* ==========================================================================
   0. Design tokens
   ========================================================================== */
:root{
  --kmg-navy: #0b2545;
  --kmg-navy-light: #13335c;
  --kmg-teal: #0f766e;
  --kmg-teal-light: #14b8a6;
  --kmg-gold: #c99a3b;
  --kmg-text: #1f2937;
  --kmg-muted: #6b7280;
  --kmg-border: #e5e7eb;
  --kmg-bg: #ffffff;
  --kmg-bg-alt: #f7f7f5;
  --kmg-max: 1120px;
  --kmg-read-max: 760px;
  --kmg-radius: 10px;
  --kmg-font-serif: Georgia, 'Times New Roman', Times, serif;
  --kmg-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --kmg-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* ==========================================================================
   1. Reset / base
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--kmg-font-serif);
  color: var(--kmg-text);
  background: var(--kmg-bg);
  line-height: 1.65;
  font-size: 18px;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--kmg-teal); text-decoration: none; }
a:hover{ text-decoration: underline; }
h1,h2,h3,h4{ font-family: var(--kmg-font-sans); line-height:1.25; color:#111; margin: 0 0 .5em; }
ul,ol{ padding-left: 1.2em; }
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; border:0; padding:0; margin:-1px;
}
.skip-link{
  position:absolute; left:-9999px; top:0; background:#fff; color:#111; padding:10px 16px; z-index:10000;
}
.skip-link:focus{ left: 10px; top: 10px; }

/* ==========================================================================
   2. Layout helpers
   ========================================================================== */
.kmg-container{ max-width: var(--kmg-max); margin: 0 auto; padding: 0 20px; }
.kmg-read{ max-width: var(--kmg-read-max); margin: 0 auto; }
.kmg-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
}
.kmg-layout{
  display:grid; grid-template-columns: minmax(0,1fr) 300px; gap: 40px; align-items:start;
}
@media (max-width: 900px){
  .kmg-grid{ grid-template-columns: repeat(2,1fr); }
  .kmg-layout{ grid-template-columns: 1fr; }
}
@media (max-width: 600px){
  .kmg-grid{ grid-template-columns: 1fr; }
  body{ font-size: 17px; }
}

/* ==========================================================================
   3. Header
   ========================================================================== */
.kmg-topbar{
  background: var(--kmg-navy);
  color: #fff;
}
.kmg-topbar .kmg-container{
  display:flex; align-items:center; justify-content:space-between; min-height: 76px;
}
.kmg-logo{
  font-family: var(--kmg-font-serif); font-weight:bold; font-size: 24px; color:#fff; letter-spacing: .2px;
}
.kmg-logo:hover{ text-decoration:none; color: var(--kmg-teal-light); }
.kmg-logo img{ max-height: 48px; }
.kmg-tagline{ font-family: var(--kmg-font-mono); font-size: 12px; color: #9fb3c8; letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; }

.kmg-menu-toggle{
  display:none; background:none; border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:6px;
  padding:8px 12px; font-size:16px; cursor:pointer;
}
.kmg-primary-nav ul{
  list-style:none; display:flex; gap: 26px; margin:0; padding:0; font-family: var(--kmg-font-sans);
}
.kmg-primary-nav a{
  color:#e7edf4; font-size:15px; font-weight:600; letter-spacing:.01em;
}
.kmg-primary-nav a:hover{ color: var(--kmg-teal-light); text-decoration:none; }
.kmg-primary-nav ul ul{
  display:none; position:absolute; background: var(--kmg-navy); flex-direction:column; padding: 10px 0;
  min-width:200px; box-shadow: 0 10px 24px rgba(0,0,0,.2); border-radius:6px; margin-top:12px;
}
.kmg-primary-nav li{ position:relative; }
.kmg-primary-nav li:hover > ul{ display:flex; }
.kmg-primary-nav ul ul a{ padding: 8px 18px; display:block; }

@media (max-width: 900px){
  .kmg-menu-toggle{ display:inline-block; }
  .kmg-primary-nav{
    display:none; width:100%; background: var(--kmg-navy-light);
  }
  .kmg-primary-nav.is-open{ display:block; }
  .kmg-primary-nav ul{ flex-direction:column; gap:0; padding: 10px 0; }
  .kmg-primary-nav ul ul{ position:static; box-shadow:none; margin:0; background: rgba(0,0,0,.15); }
  .kmg-primary-nav a{ display:block; padding: 12px 20px; border-top:1px solid rgba(255,255,255,.08); }
  .kmg-topbar .kmg-container{ flex-wrap:wrap; }
}

/* ==========================================================================
   4. Ad slots (empty by default — add AdSense code via widgets after approval)
   ========================================================================== */
.kmg-ad-slot{
  background: var(--kmg-bg-alt);
  border: 1px dashed var(--kmg-border);
  border-radius: var(--kmg-radius);
  text-align:center;
  color: var(--kmg-muted);
  font-family: var(--kmg-font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 18px;
  margin: 28px 0;
}
.kmg-ad-slot.has-content{ border-style:solid; padding:0; background:transparent; }
.kmg-ad-label{ display:block; margin-bottom:6px; }

/* ==========================================================================
   5. Hero / featured block (front page)
   ========================================================================== */
.kmg-hero{
  background: var(--kmg-bg-alt);
  padding: 40px 0 44px;
  border-bottom: 1px solid var(--kmg-border);
}
.kmg-hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:34px; align-items:center; }
@media (max-width: 800px){ .kmg-hero-grid{ grid-template-columns:1fr; } }
.kmg-eyebrow{
  font-family: var(--kmg-font-mono); text-transform:uppercase; letter-spacing:.08em; font-size:12px;
  color: var(--kmg-teal); font-weight:bold; margin-bottom:10px; display:inline-block;
}
.kmg-hero h1{ font-family: var(--kmg-font-serif); font-size: 38px; line-height:1.15; margin: 6px 0 14px; }
.kmg-hero p.kmg-sub{ color: var(--kmg-muted); font-family: var(--kmg-font-sans); font-size:16px; }
.kmg-hero img{ border-radius: var(--kmg-radius); }
.kmg-hero-grid.no-image{ grid-template-columns: 1fr; max-width: var(--kmg-read-max); }

/* ==========================================================================
   6. Post cards (archive / front page grid)
   ========================================================================== */
.kmg-section-title{
  font-family: var(--kmg-font-sans); font-size: 13px; text-transform:uppercase; letter-spacing:.08em;
  color: var(--kmg-muted); border-bottom:2px solid var(--kmg-border); padding-bottom:10px; margin: 36px 0 20px;
}
.kmg-card{ margin-bottom: 8px; }
.kmg-card a.kmg-card-thumb{ display:block; border-radius: var(--kmg-radius); overflow:hidden; margin-bottom:12px; background:var(--kmg-bg-alt); aspect-ratio: 1200/630; }
.kmg-card a.kmg-card-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .25s ease; }
.kmg-card a.kmg-card-thumb:hover img{ transform: scale(1.03); }
.kmg-card-category{
  font-family: var(--kmg-font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color: var(--kmg-teal); font-weight:bold; display:inline-block; margin-bottom:6px;
}
.kmg-card h3{ font-family: var(--kmg-font-serif); font-size: 21px; margin: 0 0 8px; line-height:1.3; }
.kmg-card h3 a{ color:#111; }
.kmg-card h3 a:hover{ color: var(--kmg-teal); text-decoration:none; }
.kmg-card p{ color: var(--kmg-muted); font-family: var(--kmg-font-sans); font-size:14.5px; margin:0 0 8px; }
.kmg-card .kmg-meta{ font-family: var(--kmg-font-sans); font-size:12.5px; color:#9ca3af; }

/* ==========================================================================
   7. Single article
   ========================================================================== */
.kmg-article-header{ padding: 36px 0 10px; }
.kmg-article-header .kmg-card-category{ font-size:12px; }
.kmg-article-header h1{
  font-family: var(--kmg-font-serif); font-size: 36px; line-height:1.2; margin: 10px 0 14px;
}
.kmg-article-meta{
  font-family: var(--kmg-font-sans); font-size: 14px; color: var(--kmg-muted); padding-bottom: 18px;
  border-bottom: 1px solid var(--kmg-border); margin-bottom: 26px; display:flex; gap:16px; flex-wrap:wrap;
}
.kmg-article-featured{ border-radius: var(--kmg-radius); margin-bottom: 28px; }
.kmg-article-body p{ margin: 0 0 20px; }
.kmg-article-body h2, .kmg-article-body h3{ font-family: var(--kmg-font-sans); margin-top: 34px; }
.kmg-article-body h3{ font-size: 21px; }
.kmg-article-body blockquote{
  border-left: 4px solid var(--kmg-teal); margin: 24px 0; padding: 4px 0 4px 20px; color: var(--kmg-muted); font-style: italic;
}
.kmg-article-body img{ border-radius: 8px; margin: 10px 0; }
.kmg-tags{ margin: 30px 0; font-family: var(--kmg-font-sans); font-size:13px; }
.kmg-tags a{
  display:inline-block; background: var(--kmg-bg-alt); color: var(--kmg-text); padding:6px 12px;
  border-radius: 20px; margin: 0 8px 8px 0; font-size:12.5px;
}
.kmg-tags a:hover{ background: var(--kmg-teal); color:#fff; text-decoration:none; }
.kmg-author-box{
  display:flex; gap:16px; align-items:flex-start; background: var(--kmg-bg-alt); border-radius: var(--kmg-radius);
  padding: 20px; margin: 30px 0; font-family: var(--kmg-font-sans);
}
.kmg-author-box .kmg-initial{
  flex:none; width:56px; height:56px; border-radius:50%; background: var(--kmg-teal); color:#fff;
  display:flex; align-items:center; justify-content:center; font: bold 22px var(--kmg-font-sans);
}
.kmg-author-box h4{ margin: 0 0 4px; font-size:15px; }
.kmg-author-box p{ margin:0; color: var(--kmg-muted); font-size:14px; }
.kmg-disclaimer{
  font-family: var(--kmg-font-sans); font-size:13px; color: var(--kmg-muted); background: var(--kmg-bg-alt);
  border-radius: var(--kmg-radius); padding:16px 20px; margin: 30px 0;
}

/* Related posts */
.kmg-related{ margin-top: 50px; }
.kmg-related .kmg-grid{ grid-template-columns: repeat(3,1fr); }
@media (max-width: 800px){ .kmg-related .kmg-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   8. Sidebar & widgets
   ========================================================================== */
.kmg-sidebar .widget{
  margin-bottom: 32px; font-family: var(--kmg-font-sans);
}
.kmg-sidebar .widget-title{
  font-family: var(--kmg-font-sans); font-size:13px; text-transform:uppercase; letter-spacing:.08em;
  color: var(--kmg-muted); border-bottom:2px solid var(--kmg-border); padding-bottom:10px; margin-bottom:16px;
}
.kmg-sidebar ul{ list-style:none; padding:0; margin:0; }
.kmg-sidebar li{ margin-bottom: 12px; font-size: 14.5px; }
.kmg-sidebar .kmg-search-form{ display:flex; }
.kmg-sidebar .kmg-search-form input[type="search"]{
  flex:1; padding: 10px 12px; border:1px solid var(--kmg-border); border-radius: 6px 0 0 6px; font-size:14px;
}
.kmg-sidebar .kmg-search-form button{
  background: var(--kmg-teal); color:#fff; border:none; padding: 0 16px; border-radius:0 6px 6px 0; cursor:pointer;
}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.kmg-footer{ background: var(--kmg-navy); color: #cfd9e3; margin-top: 60px; font-family: var(--kmg-font-sans); }
.kmg-footer-widgets{
  padding: 46px 0 20px; display:grid; grid-template-columns: repeat(3,1fr); gap: 34px;
}
@media (max-width: 800px){ .kmg-footer-widgets{ grid-template-columns:1fr; } }
.kmg-footer .widget-title{ color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.07em; margin-bottom:14px; }
.kmg-footer a{ color:#cfd9e3; }
.kmg-footer a:hover{ color:#fff; }
.kmg-footer ul{ list-style:none; padding:0; margin:0; }
.kmg-footer li{ margin-bottom:10px; font-size:14px; }
.kmg-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12); padding: 18px 0 30px; font-size: 13px; display:flex;
  justify-content:space-between; flex-wrap:wrap; gap:10px; color:#9fb3c8;
}
.kmg-footer-bottom nav ul{ display:flex; gap:18px; list-style:none; padding:0; margin:0; flex-wrap:wrap; }

/* ==========================================================================
   10. Pagination, search, 404, misc pages
   ========================================================================== */
.kmg-pagination{ display:flex; gap:10px; margin: 40px 0; font-family: var(--kmg-font-sans); font-size:14px; }
.kmg-pagination a, .kmg-pagination span{
  padding: 8px 14px; border:1px solid var(--kmg-border); border-radius:6px; color: var(--kmg-text);
}
.kmg-pagination .current{ background: var(--kmg-navy); color:#fff; border-color: var(--kmg-navy); }
.kmg-pagination a:hover{ text-decoration:none; border-color: var(--kmg-teal); color: var(--kmg-teal); }

.kmg-page-header{ padding: 36px 0 20px; }
.kmg-page-header h1{ font-family: var(--kmg-font-serif); font-size: 34px; }

.kmg-404{ text-align:center; padding: 80px 20px; font-family: var(--kmg-font-sans); }
.kmg-404 h1{ font-size: 64px; font-family: var(--kmg-font-serif); color: var(--kmg-teal); margin-bottom:10px;}

.kmg-breadcrumb{ font-family: var(--kmg-font-sans); font-size:13px; color: var(--kmg-muted); padding: 18px 0 0; }
.kmg-breadcrumb a{ color: var(--kmg-muted); }

/* Page template (About/Contact/Privacy) */
.kmg-page-content{ padding: 10px 0 60px; }
.kmg-contact-card{
  background: var(--kmg-bg-alt); border-radius: var(--kmg-radius); padding: 26px; margin: 24px 0;
  font-family: var(--kmg-font-sans);
}
.kmg-contact-card h3{ margin-top:0; }
.kmg-contact-email{
  display:inline-block; background: var(--kmg-teal); color:#fff; padding: 12px 22px; border-radius: 8px;
  font-family: var(--kmg-font-sans); font-weight:bold; margin-top:10px;
}
.kmg-contact-email:hover{ background: var(--kmg-navy); color:#fff; text-decoration:none; }

/* Comments disabled by this theme by default; see functions.php */