/* =============================================
   Kat Wolfe — Shared Stylesheet (styles.css)
   ============================================= */

/* ===== Design tokens ===== */
:root{
  --bg: #0b1220;          /* page background (dark navy) */
  --panel: #0f172a;       /* elevated panels */
  --muted: #ffffff;       /* subtle text 94a3b8*/
  --fg: #e5e7eb;          /* main text */
  --accent: #38bdf8;      /* cyan */
  --accent-2: #22d3ee;    /* teal */
  --accent-contrast: #0b1220;
  --maxw: 72rem;          /* 1152px */
  --radius: 1rem;
  --shadow: 0 10px 30px rgba(2, 6, 23, 0.35);
  --grid-gap: clamp(1rem, 1vw + .5rem, 2rem);

  --step--1: clamp(.88rem,.86rem + .2vw, .95rem);
  --step-0: 1rem;
  --step-1: clamp(1.15rem, 1rem + .8vw, 1.35rem);
  --step-2: clamp(1.44rem, 1.1rem + 2.2vw, 1.95rem);
  --step-3: clamp(1.85rem, 1.4rem + 3.5vw, 2.75rem);
  --step-4: clamp(2.4rem, 1.8rem + 5vw, 3.5rem);
}

@media (prefers-color-scheme: light){
  :root{ --bg:#f8fafc; --panel:#ffffff; --fg:#0f172a; --muted:#475569; --accent:#0ea5e9; --accent-2:#06b6d4; --accent-contrast:#0f172a; --shadow:0 10px 30px rgba(2,6,23,.08); }
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.6; background: var(--bg); color: var(--fg);
}
img{ max-width:100%; height:auto; display:block; }

/* Links */
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* Helpers */
.container{ max-width: var(--maxw); margin-inline:auto; padding-inline: clamp(1rem, 3vw, 2rem); }
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.muted{ color: var(--muted); }
.section{ padding: clamp(2rem, 3vw + 1rem, 4rem) 0; }

/* ===== Header / Nav ===== */
header{ position: sticky; top:0; z-index:50; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 85%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--muted) 25%, transparent); }
.nav{ display:flex; align-items:center; justify-content:space-between; height: 64px; }
.brand{ display:flex; align-items:center; gap:.75rem; font-weight:700; letter-spacing:.3px; }
.brand .logo{ width:36px; height:36px; border-radius:50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: var(--shadow); }
.brand span{ font-size: 1.05rem; color: var(--fg); }

.nav-links{ display:flex; align-items:center; gap:1.25rem; }
.nav-links a{ color: var(--fg); opacity:.9; font-size: var(--step--1); }
.nav-links a[aria-current="page"]{ color: var(--accent); font-weight:600; }

/* Mobile nav via <details> (no JS) */
details.nav-menu{ display:none; }
@media (max-width: 840px){
  .nav-links{ display:none; }
  details.nav-menu{ display:block; }
  details.nav-menu summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.5rem; font-weight:600; color: var(--fg); }
  details.nav-menu summary::-webkit-details-marker{ display:none; }
  /* hamburger icon */
  details.nav-menu summary .bars{ width:22px; height:14px; position:relative; display:inline-block; }
  .bars::before, .bars::after, .bars i{ content:""; position:absolute; left:0; right:0; height:2px; background: currentColor; border-radius: 2px; }
  .bars::before{ top:0; }
  .bars i{ top:6px; }
  .bars::after{ bottom:0; }
  details.nav-menu[open] summary{ color: var(--accent); }
  details.nav-menu[open] .menu{ animation: fade .15s ease-out; }
  details.nav-menu .menu{ position:absolute; right:1rem; top:64px; background: var(--panel); border:1px solid color-mix(in srgb, var(--muted) 20%, transparent); border-radius: .75rem; padding:.75rem; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:.25rem; min-width: 220px; }
  .menu a{ padding:.6rem .75rem; border-radius:.5rem; color: var(--fg); text-decoration:none; }
  .menu a:hover{ background: color-mix(in srgb, var(--muted) 12%, transparent); }
}

@keyframes fade{ from{ opacity:0; transform: translateY(-4px);} to{ opacity:1; transform: translateY(0);} }

/* ===== Buttons ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.8rem 1rem; border-radius:.8rem; font-weight:700; background: transparent; color: var(--fg); border:1px solid color-mix(in srgb, var(--muted) 25%, transparent); text-decoration:none; transition: transform .12s ease, background-color .12s ease, border-color .12s ease; }
.btn:hover{ transform: translateY(-1px); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.btn--primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-contrast); border-color: transparent; }
.btn--ghost{ background: transparent; }

/* ===== Hero ===== */
.hero{ padding: clamp(2rem, 4vw + 1rem, 5rem) 0; }
.hero .grid{ display:grid; gap: var(--grid-gap); align-items:center; grid-template-columns: 1.2fr .8fr; }
.kicker{ display:inline-block; font-size: var(--step--1); color: var(--accent); font-weight:700; letter-spacing:.12em; text-transform: uppercase; }
h1{ margin:.4rem 0 1rem; font-size: var(--step-4); line-height:1.1; letter-spacing:-.02em; }
.lead{ font-size: var(--step-1); color: var(--muted); max-width: 55ch; }
.hero-actions{ display:flex; gap:.75rem; margin-top:1.25rem; flex-wrap:wrap; }
.hero-portrait{ justify-self:center; }
.portrait{ width: 280px; aspect-ratio: 1/1; border-radius: 50%; overflow:hidden; box-shadow: var(--shadow); border: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); background: radial-gradient(60% 60% at 30% 30%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), color-mix(in srgb, var(--panel) 90%, transparent); display:grid; place-items:center; }
.portrait img{ width:100%; height:100%; object-fit: cover; }
@media (max-width: 960px){
  .hero .grid{ grid-template-columns: 1fr; }
  .hero-portrait{ order:-1; margin-bottom: 1rem; }
  .portrait{ width:220px; }
}

/* ===== Stats ===== */
.section h2{ font-size: var(--step-2); line-height:1.2; margin:0 0 1rem; }
.stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.stat{ background: var(--panel); border:1px solid color-mix(in srgb, var(--muted) 20%, transparent); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.stat .value{ font-size: var(--step-3); font-weight:800; letter-spacing:-.02em; }
.stat .label{ color: var(--muted); font-size: var(--step--1); }
.stat small{ display:block; color: var(--muted); margin-top:.25rem; font-size: .85em; }
@media (max-width: 840px){ .stats{ grid-template-columns: 1fr; } }

/* ===== Services ===== */
.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.card{ background: var(--panel); border:1px solid color-mix(in srgb, var(--muted) 20%, transparent); border-radius: var(--radius); padding: 1.25rem 1.25rem; box-shadow: var(--shadow); transition: transform .12s ease, border-color .12s ease; }
.card:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.card h3{ margin:.25rem 0 .5rem; font-size: var(--step-1); }
.card p{ margin:0; color: var(--muted); }
@media (max-width: 960px){ .cards{ grid-template-columns: 1fr; } }

/* ===== Experience ===== */
.experience-list{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.exp, .sales-method{ padding:1rem 1.25rem; border-radius: var(--radius); background: color-mix(in srgb, var(--panel) 85%, transparent); border:1px dashed color-mix(in srgb, var(--muted) 25%, transparent); }
.exp strong{ display:block; }
@media (max-width: 960px){ .experience-list{ grid-template-columns: 1fr; } }

/* ===== Testimonials grid ===== */
.quotes{ display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); }
@media (max-width: 960px){ .quotes{ grid-template-columns: 1fr; } }

.quote-card{ background: var(--panel); border:1px solid color-mix(in srgb, var(--muted) 20%, transparent); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); display:grid; grid-template-columns: 64px 1fr; gap:1rem; align-items:start; }
.quote-card .avatar{ width:64px; height:64px; border-radius:50%; overflow:hidden; border:2px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--panel) 80%, transparent); }
.quote-card blockquote{ margin:0; }
.quote-card blockquote p{ margin:0 0 .75rem; font-size: var(--step-0); }
.quote-card footer{ color: var(--muted); font-size: .95em; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.quote-card footer .sep{ opacity:.5; }
.pull{ font-size: var(--step-1); font-weight:700; }

/* ===== CTA band ===== */
.cta{ text-align:center; background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 60%, transparent), color-mix(in srgb, var(--accent) 15%, transparent)); border:1px solid color-mix(in srgb, var(--muted) 20%, transparent); border-radius: var(--radius); padding: clamp(1.5rem, 2.5vw + 1rem, 2.25rem); box-shadow: var(--shadow); }
.cta h3{ font-size: var(--step-2); margin:.2rem 0 .5rem; }

/* ===== Form / Contact ===== */
.grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: var(--grid-gap); align-items:start; }
@media (max-width: 960px){ .grid{ grid-template-columns: 1fr; } }

form{ background: var(--panel); border:1px solid color-mix(in srgb, var(--muted) 20%, transparent); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
@media (max-width: 700px){ .form-grid{ grid-template-columns: 1fr; } }

label{ display:block; font-weight:700; margin: .25rem 0 .35rem; }
.hint{ color: var(--muted); font-size: .9em; margin-top:.25rem; }
input, select, textarea{ width:100%; padding:.8rem 1rem; border-radius:.7rem; background: color-mix(in srgb, var(--panel) 85%, transparent); border:1px solid color-mix(in srgb, var(--muted) 25%, transparent); color: var(--fg); line-height:1.4; }
textarea{ min-height: 140px; resize: vertical; }

.actions{ display:flex; gap:.75rem; align-items:center; margin-top:.5rem; flex-wrap:wrap; }
.status{ margin-top: .75rem; font-size: .95em; }
.status[hidden]{ display:none; }
.status.success{ color: #22c55e; }
.status.error{ color: #f43f5e; }

/* honeypot */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ===== Aside card ===== */
.aside{ background: linear-gradient(135deg, color-mix(in srgb, var(--panel) 65%, transparent), color-mix(in srgb, var(--accent) 12%, transparent)); border:1px solid color-mix(in srgb, var(--muted) 20%, transparent); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
.item{ display:flex; gap:.75rem; align-items:flex-start; }
.item + .item{ margin-top:.75rem; }
.item .dot{ width:10px; height:10px; border-radius:999px; background: var(--accent); margin-top:.6rem; flex: 0 0 auto; }

/* ===== Footer ===== */
footer{ margin-top: clamp(2rem, 3vw + 1rem, 4rem); padding: 1.5rem 0 2rem; border-top:1px solid color-mix(in srgb, var(--muted) 20%, transparent); color: var(--muted); }
.footer-grid{ display:grid; gap:1rem; grid-template-columns: 1fr auto; align-items:center; }
@media (max-width: 700px){ .footer-grid{ grid-template-columns: 1fr; text-align:center; } }

/* ===== Accessibility & motion ===== */
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ===== Print basics ===== */
@media print{ header, .hero-portrait, .cta, .nav-menu{ display:none !important; } body{ background:#fff; color:#000; } a{ text-decoration: none; color:#000; } }



/* Fallback first */
.anchor-links a {
  background: #f8fafc;              /* fallback */
  border-color: #cbd5e1;             /* fallback */
}
/* Then the fancy version (browsers that support it will use this) */
.anchor-links a {
  background: color-mix(in srgb, var(--panel) 85%, transparent);
  border-color: color-mix(in srgb, var(--muted) 30%, transparent);
}


:root{
  /* Royal purple → pink gradient for cards */
  --card-grad-start: #5b2a86; /* royal purple */
  --card-grad-end:   #ff2d95; /* pink */
  --card-text:       #ffffff;
}

/* Apply to all card-like blocks */
.card,
.quote-card,
.experience-list .exp,
.sales-method,
.stat {
     position: relative;
  background: linear-gradient(135deg, var(--card-grad-start), var(--card-grad-end));
  color: var(--card-text);
  border: 0; /* remove thin borders that clash with gradient */
}

/* Apply to all sections*/
/*
#experience,
#impact,
#philosophy,
#kratos-highlights,
#education, #methods, #community, #competencies, #leadership, #mentorship, #board, #team-development, #coaching, #project-management, #professional-services {
  position: relative;
  background: linear-gradient(135deg, var(--card-grad-start), var(--card-grad-end));
  color: var(--card-text);
  border: 0;  *//* remove thin borders that clash with gradient */
}



/* Inner text & links readable on gradient */
.card h3, .card p,
.quote-card blockquote, .quote-card cite, .quote-card cite a,
.stat .value, .stat .label,
.experience-list .exp{
  color: var(--card-text);
}

/* Buttons that sit inside cards should stay visible */
.card .btn, .card .btn:visited{
  color: var(--accent-contrast);
}

/* Testimonial tags over gradient */
.tags li{
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
}

/* Avatars over gradient: add a light ring */
.quote-card .avatar{
  border: 2px solid rgba(255,255,255,.65);
}

/* Stat tiles spacing (works with your cols-4 tweaks) */
.stats .stat{ padding: .9rem 1rem; border-radius: .75rem; }

/* Respect print */
@media print{
  .card, .quote-card, .experience-list .exp, .stat{
    background: #fff !important; color: #000 !important; border: 1px solid #ddd !important;
  }
}