/*
Theme Name: Ken Contract Minimal
Theme URI: https://kenmillermedia.com/
Author: Ken Miller Media
Author URI: https://kenmillermedia.com/
Description: Ultra-lightweight theme with a header style contract (transparent/solid + on-scroll behavior), mobile hamburger, and an AI design contract (ai-contract.json).
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ken-contract-min
Tags: custom-colors, custom-logo, full-width-template
*/

:root{
  --km-solid-bg:#06142e;
  --km-solid-text:#ffffff;
  --km-trans-text:#ffffff;
  --km-accent:#ffd95b;
  --km-max:1180px;
  --km-radius:16px;
  --km-shadow:0 14px 38px rgba(2,6,23,.14);
  --km-header-h:80px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica,Arial,sans-serif;line-height:1.6;color:#0b1220;background:#ffffff}
img,video,iframe{max-width:100%;height:auto}
a{color:inherit;text-decoration:underline;text-underline-offset:3px}
a:hover{opacity:.92}

.km-wrap{max-width:var(--km-max);margin:0 auto;padding:0 18px}
.km-main{min-height:55vh}
.km-skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.km-skip:focus{left:14px;top:14px;width:auto;height:auto;background:#fff;padding:10px 12px;border-radius:10px;z-index:99999}

/* ===== HEADER SYSTEM ===== */
.km-header{
  width:100%;
  z-index:9990;
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.km-header.km-sticky{position:fixed;top:0;left:0}
.km-header .km-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0}
.km-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.km-brand:hover{opacity:1}
.km-logo img{display:block;max-height:54px;width:auto}
.km-site-title{font-weight:800;letter-spacing:.2px;text-decoration:none}
.km-nav{display:flex;align-items:center;gap:18px}
.km-nav a{text-decoration:none;font-weight:650;padding:8px 10px;border-radius:10px}
.km-nav a:hover{background:rgba(255,255,255,.12)}

.km-header--transparent{background:transparent;color:var(--km-trans-text)}
.km-header--solid{background:var(--km-solid-bg);color:var(--km-solid-text)}
.km-header--solid .km-nav a:hover{background:rgba(255,255,255,.10)}
.km-header--transparent .km-nav a:hover{background:rgba(255,255,255,.14)}

/* On-scroll state */
.km-header.is-scrolled{box-shadow:0 10px 28px rgba(2,6,23,.12)}
.km-header.is-scrolled.km-scroll-solid{background:var(--km-solid-bg);color:var(--km-solid-text)}
.km-header.is-scrolled.km-scroll-transparent{background:transparent;color:var(--km-trans-text);box-shadow:none}

/* Content offset when sticky (default) */
body.km-has-sticky{padding-top:var(--km-header-h)}
/* Overlay hero mode: transparent header should sit over hero */
body.km-overlay-hero{padding-top:0}

/* ===== MOBILE MENU (STACKED) ===== */
.km-burger{
  display:none;
  appearance:none;border:0;background:transparent;color:inherit;
  width:46px;height:46px;border-radius:12px;cursor:pointer;
  align-items:center;justify-content:center;
}
.km-burger:focus{outline:2px solid var(--km-accent);outline-offset:2px}
.km-burger .km-burger-lines{display:flex;flex-direction:column;gap:6px;width:22px}
.km-burger span{display:block;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .16s ease, opacity .16s ease}

body.km-nav-open .km-burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.km-nav-open .km-burger span:nth-child(2){opacity:0}
body.km-nav-open .km-burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.km-drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(2,6,23,.55);z-index:9980}
.km-drawer{display:none;position:fixed;right:12px;left:12px;top:calc(var(--km-header-h) + 10px);background:#ffffff;color:#0b1220;border-radius:18px;box-shadow:var(--km-shadow);z-index:9991;padding:12px}
.km-drawer a{display:block;padding:12px 12px;border-radius:12px;text-decoration:none;font-weight:800}
.km-drawer a:hover{background:#f1f5f9}

body.km-nav-open .km-drawer-backdrop{display:block}
body.km-nav-open .km-drawer{display:block}

@media (max-width: 960px){
  .km-nav{display:none}
  .km-burger{display:inline-flex}
}

/* ===== UTILITY CLASSES FOR AI PAGES (CONTRACT) ===== */
.km-hero{padding:96px 0 70px}
/* If header overlays hero, add header height to hero top padding */
body.km-overlay-hero .km-hero{padding-top:calc(96px + var(--km-header-h))}

.km-hero.km-hero-dark{background:linear-gradient(180deg, rgba(6,20,46,.92), rgba(10,30,63,.92));color:#e8f2ff}
.km-hero .km-eyebrow{color:var(--km-accent);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.km-hero h1{margin:10px 0 12px;font-size:40px;line-height:1.15}
.km-hero p{max-width:860px;margin:0 0 18px;color:rgba(232,242,255,.92)}

.km-section{padding:56px 0}
.km-section.km-light{background:#f3f5fa}
.km-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.km-col-7{grid-column:span 7}
.km-col-5{grid-column:span 5}
.km-col-12{grid-column:span 12}
@media(max-width:960px){.km-col-7,.km-col-5{grid-column:span 12}}

.km-card{background:#ffffff;border:1px solid rgba(2,6,23,.10);border-radius:18px;box-shadow:0 1px 0 rgba(2,6,23,.05);padding:18px}
.km-card.km-card-dark{background:#0b1a33;color:#e8f2ff;border-color:rgba(255,255,255,.10)}

.km-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.18);text-decoration:none;font-weight:900;letter-spacing:.2px}
.km-btn-primary{background:var(--km-accent);color:#06142e;border-color:rgba(6,20,46,.0)}
.km-btn-ghost{background:transparent;color:#e8f2ff}
.km-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.km-chip{display:inline-flex;align-items:center;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.10);text-decoration:none;font-weight:800;font-size:13px}
.km-chip:hover{background:rgba(255,255,255,.16)}

/* Footer */
.km-footer{padding:34px 0;background:#0b1220;color:#e8f2ff}
.km-footer a{color:#e8f2ff}
