/*
Theme Name: Kee Communications
Theme URI: https://keecommunications.com
Description: Kee Communications — business phone systems. Built to WCAG 2.2 AA.
Author: WeManage.Tech
Version: 1.0.0
*/

/* ==========================================================================
   1. TOKENS  — every ratio measured with the WCAG relative-luminance formula
   ========================================================================== */

:root {
  /* Surfaces */
  --ink:          #0d1117;   /* near-black, faint blue cast */
  --ink-2:        #161b22;   /* raised dark surface */
  --surface:      #ffffff;
  --surface-alt:  #f6f8fa;
  --surface-sunk: #eaeef2;

  /* Text on light */
  --text-1:       #0d1117;   /* 18.9:1 on white */
  --text-2:       #3d4652;   /* 9.4:1  */
  --text-3:       #5b6673;   /* 6.1:1  */

  /* Accent */
  --accent:       #8a5a00;   /* 5.9:1 on white — amber ink; yellow itself is 1.5:1 and cannot be text */
  --accent-dark:  #6b4600;   /* 8.4:1 — hover */
  --accent-glow:  #FFCC4D;   /* 12.6:1 on --ink — the nerd-face yellow, dark surfaces only */

  /* Text on dark */
  --on-ink:       #ffffff;   /* 18.9:1 */
  --on-ink-2:     #c9d3de;   /* 11.4:1 */
  --on-ink-3:     #8b98a8;   /* 6.0:1  */

  /* Status */
  --danger:       #a4161a;   /* 7.6:1 on white */
  --danger-bg:    #fef2f2;
  --success:      #0f5132;   /* 9.4:1 */
  --success-bg:   #f0fdf4;

  /* Borders — >= 3:1 on their surface (SC 1.4.11) */
  --bd:           #cbd3dc;
  --bd-strong:    #5b6673;
  --bd-dark:      rgba(255,255,255,.14);

  /* Focus — two-tone, so one band always contrasts any background.
     glow vs ink = 10.2:1 · ink vs white = 18.9:1 · band-to-band = 10.2:1 */
  --focus-a:      #FFCC4D;
  --focus-b:      #0d1117;

  /* Type */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --s--1: clamp(.875rem, .85rem + .12vw, .9375rem);
  --s-0:  clamp(1rem, .97rem + .16vw, 1.0625rem);
  --s-1:  clamp(1.125rem, 1.07rem + .28vw, 1.25rem);
  --s-2:  clamp(1.35rem, 1.24rem + .55vw, 1.7rem);
  --s-3:  clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
  --s-4:  clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);

  /* Space */
  --sp1:.25rem; --sp2:.5rem;  --sp3:.75rem; --sp4:1rem;
  --sp5:1.5rem; --sp6:2rem;   --sp7:3rem;   --sp8:4.5rem; --sp9:6.5rem;

  --radius: 10px;
  --radius-sm: 6px;
  --max-w: 76rem;
  --measure: 62ch;

  --header-h: 4.5rem;   /* kept current by js/nav.js */
  --transition: 160ms cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

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

html {
  font-size: 100%;                 /* never px — respects the user's own setting */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h, 4.5rem) + 1rem);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-1);
  font-family: var(--font);
  font-size: var(--s-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 {
  margin: 0 0 var(--sp4);
  line-height: 1.15;
  letter-spacing: -.022em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--s-4); }
h2 { font-size: var(--s-3); }
h3 { font-size: var(--s-1); }

p, ul, ol { margin: 0 0 var(--sp4); }
p { max-width: var(--measure); }
li { margin-bottom: var(--sp2); }
address { font-style: normal; }

a { color: var(--accent); text-underline-offset: .17em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-dark); text-decoration-thickness: 2px; }

img, svg, video { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--bd); margin: var(--sp7) 0; }

:target, #main { scroll-margin-top: calc(var(--header-h, 4.5rem) + 1rem); }

/* Focus — never remove the outline anywhere in this file */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--focus-a);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-b);
  border-radius: var(--radius-sm);
}
@supports not selector(:focus-visible) {
  :where(a,button,input,select,textarea,summary,[tabindex]):focus {
    outline: 3px solid var(--focus-a); outline-offset: 2px; box-shadow: 0 0 0 6px var(--focus-b);
  }
}

.skip-link { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.skip-link:focus {
  position:fixed; top:0; left:0; z-index:9999; width:auto; height:auto;
  padding: var(--sp3) var(--sp5); background: var(--ink); color:#fff;
  font-weight:700; text-decoration:none;
}
.sr-only {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.site { display:flex; flex-direction:column; min-height:100vh; }
main { flex:1 0 auto; }
main:focus { outline:none; }

.wrap { max-width: var(--max-w); margin-inline:auto; padding-inline: var(--sp4); }
@media (min-width:48em){ .wrap { padding-inline: var(--sp6); } }

.section { padding-block: var(--sp8); }
@media (min-width:48em){ .section { padding-block: var(--sp9); } }
.section-alt { background: var(--surface-alt); }
.section-ink { background: var(--ink); color: var(--on-ink-2); }
.section-ink h2, .section-ink h3 { color: var(--on-ink); }
.section-ink a { color: var(--accent-glow); }

.lede { font-size: var(--s-1); color: var(--text-2); max-width: 52ch; }
.section-ink .lede { color: var(--on-ink-2); }

.eyebrow {
  font-size: .8125rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp3);
}
/* .hero is a dark surface too, but it is not .section-ink — it must get the
   same treatment or dark-teal text lands on near-black at 2.57:1. */
.section-ink .eyebrow,
.hero .eyebrow { color: var(--accent-glow); }   /* 7.6:1 over the hero glow */

/* ==========================================================================
   4. HEADER / NAV
   ========================================================================== */

.hdr { position: sticky; top:0; z-index:100; background: rgba(255,255,255,.92);
       backdrop-filter: saturate(140%) blur(8px); border-bottom:1px solid var(--bd); }
.hdr-inner { max-width: var(--max-w); margin-inline:auto; padding: var(--sp3) var(--sp4);
             display:flex; align-items:center; justify-content:space-between; gap: var(--sp4); }
@media (min-width:48em){ .hdr-inner { padding-inline: var(--sp6); } }

.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color: var(--text-1); font-weight:800; letter-spacing:-.02em; font-size:1.0625rem; }
/* The mark is the nerd-face SVG itself — no plate behind it, the yellow circle
   is the shape. Works on both the light header and the dark footer. */
.brand-mark { width:2rem; height:2rem; flex:none; display:block; }
.brand-mark svg { display:block; width:100%; height:100%; }
.brand em { font-style:normal; color: var(--accent); }

.nav-toggle {
  display:inline-flex; align-items:center; gap:.45rem; min-height:2.75rem;
  padding:.5rem .8rem; font:inherit; font-size:var(--s--1); font-weight:600;
  background:var(--surface); color:var(--text-1); border:1px solid var(--bd-strong);
  border-radius: var(--radius-sm); cursor:pointer;
}
.nav-toggle:hover { background: var(--surface-alt); }
.nav-toggle .x { display:none; }
.nav-toggle[aria-expanded="true"] .bars { display:none; }
.nav-toggle[aria-expanded="true"] .x { display:inline; }

.nav ul { list-style:none; margin:0; padding:0; }
.nav li { margin:0; }
.nav a {
  display:block; padding:.6rem .1rem; color: var(--text-2); text-decoration:none;
  font-size: var(--s--1); font-weight:600; border-bottom:1px solid var(--bd);
}
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--accent); }

/* The CTA menu item renders as a button. `.nav a` (0,0,1,1) out-specifies
   `.btn-primary` (0,0,1,0), which left the button dark-on-teal at 1.74:1.
   Match the specificity so the button keeps its own colours. */
.nav a.btn { border-bottom: 0; }
.nav a.btn-primary,
.nav a.btn-primary:hover { color: #fff; }        /* 5.5:1 on --accent */
.nav a.btn-primary:hover { background: var(--accent-dark); }

@media (max-width: 61.99em){
  .nav { display:none; border-top:1px solid var(--bd); }
  .nav.open { display:block; }
  .nav ul { padding: var(--sp3) var(--sp4) var(--sp5); }
  .nav .cta { margin-top: var(--sp3); }
  .nav .cta a { border:0; }
}
@media (min-width: 62em){
  .nav-toggle { display:none; }
  .nav { display:block; }
  .nav ul { display:flex; align-items:center; gap: var(--sp5); }
  .nav a { border-bottom:2px solid transparent; padding:.35rem 0; }
  .nav a:hover { border-bottom-color: var(--bd-strong); }
  .nav a[aria-current="page"] { border-bottom-color: var(--accent); }
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:3rem; padding:.8rem 1.4rem; border:2px solid transparent;
  border-radius: var(--radius-sm); font:inherit; font-size:var(--s--1); font-weight:700;
  text-decoration:none; cursor:pointer; transition: background var(--transition), border-color var(--transition);
}
.btn-primary { background: var(--accent); color:#fff; }          /* 5.5:1 */
.btn-primary:hover { background: var(--accent-dark); color:#fff; }
.btn-ghost { background:transparent; color: var(--accent); border-color: var(--bd-strong); }
.btn-ghost:hover { background: var(--surface-alt); color: var(--accent-dark); }
.section-ink .btn-primary { background: var(--accent-glow); color: var(--ink); }  /* 10.2:1 */
.section-ink .btn-primary:hover { background:#ffdb7a; color: var(--ink); }
/* Ghost button on any dark surface. --bd-dark is fine for hairline dividers but
   only reaches 2.4:1 here; a control's boundary needs 3:1 (SC 1.4.11). */
.section-ink .btn-ghost,
.hero .btn-ghost { color: var(--on-ink); border-color: rgba(255,255,255,.45); }  /* 4.1:1 */
.section-ink .btn-ghost:hover,
.hero .btn-ghost:hover { background: var(--ink-2); color: var(--on-ink); }

.btn-row { display:flex; flex-wrap:wrap; gap: var(--sp3); margin-top: var(--sp5); }

/* ==========================================================================
   6. HERO
   ========================================================================== */

.hero { background: var(--ink); color: var(--on-ink-2); padding-block: var(--sp8); position:relative; overflow:hidden; }
@media (min-width:48em){ .hero { padding-block: var(--sp9); } }
.hero::after {
  content:""; position:absolute; inset:auto -10% -55% 45%; height:70%;
  background: radial-gradient(closest-side, rgba(255,204,77,.14), transparent 70%);
  pointer-events:none;
}
.hero h1 { color: var(--on-ink); max-width: 18ch; }
.hero .lede { color: var(--on-ink-2); font-size: var(--s-1); }
.hero-note { margin-top: var(--sp5); font-size: var(--s--1); color: var(--on-ink-3); }

/* ==========================================================================
   7. CARDS / GRIDS
   ========================================================================== */

.grid { display:grid; gap: var(--sp5); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

.card {
  background: var(--surface); border:1px solid var(--bd); border-radius: var(--radius);
  padding: var(--sp5);
}
.section-alt .card { background: var(--surface); }
.section-ink .card { background: var(--ink-2); border-color: var(--bd-dark); }
.card h3 { margin-bottom: var(--sp2); font-size: var(--s-1); }
.card p { font-size: var(--s--1); color: var(--text-2); margin-bottom:0; }
.section-ink .card p { color: var(--on-ink-2); }
.card-icon {
  width:2.5rem; height:2.5rem; border-radius:8px; display:grid; place-items:center;
  background: var(--surface-sunk); color: var(--accent); margin-bottom: var(--sp4);
}
.section-ink .card-icon { background: rgba(255,204,77,.14); color: var(--accent-glow); }

/* service list with a rule, used on the services page */
.svc { border-top:1px solid var(--bd); padding-block: var(--sp6); }
.svc:last-child { border-bottom:1px solid var(--bd); }
.svc-grid { display:grid; gap: var(--sp4); }
@media (min-width:52em){ .svc-grid { grid-template-columns: 16rem 1fr; gap: var(--sp7); } }
.svc h3 { margin:0; }
.svc ul { margin-bottom:0; }

/* stat / proof strip — numbers must be REAL before this is used */
.stats { display:grid; gap: var(--sp5); grid-template-columns: repeat(auto-fit, minmax(min(100%,11rem),1fr)); }
.stat dt { font-size: var(--s--1); color: var(--on-ink-3); order:2; }
.stat dd { margin:0; font-size: var(--s-3); font-weight:800; color: var(--on-ink); letter-spacing:-.03em; }
.stat { display:flex; flex-direction:column; }

.checks { list-style:none; padding:0; }
.checks li { position:relative; padding-left:1.9rem; }
.checks li::before {
  content:""; position:absolute; left:0; top:.55em; width:1.1rem; height:.55rem;
  border-left:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent);
  transform: rotate(-45deg);
}
.section-ink .checks li::before { border-color: var(--accent-glow); }

/* ==========================================================================
   8. PAGE HEAD / CONTENT
   ========================================================================== */

.page-head { background: var(--surface-alt); border-bottom:1px solid var(--bd); padding-block: var(--sp7); }
.page-head h1 { margin-bottom: var(--sp3); }
.prose { max-width: 46rem; }
.prose h2 { margin-top: var(--sp7); }
.prose h3 { margin-top: var(--sp5); }
.prose > :first-child { margin-top:0; }

/* ==========================================================================
   9. FORMS
   ========================================================================== */

.form { max-width: 38rem; }
.field { margin-bottom: var(--sp5); }
.field label { display:block; font-weight:700; margin-bottom: var(--sp2); }
.req { font-weight:400; color: var(--text-2); }
.hint { color: var(--text-3); font-size: var(--s--1); margin:0 0 var(--sp2); }
.field input, .field textarea, .field select {
  width:100%; min-height:3rem; padding:.75rem .85rem; font:inherit; color: var(--text-1);
  background: var(--surface); border:2px solid var(--bd-strong); border-radius: var(--radius-sm);
}
.field textarea { min-height:9rem; resize:vertical; }
.field.err input, .field.err textarea, .field.err select { border-color: var(--danger); }
.field-err { color: var(--danger); font-weight:700; font-size: var(--s--1); margin:0 0 var(--sp2); }
.hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.alert { padding: var(--sp4) var(--sp5); border:2px solid; border-radius: var(--radius); margin-bottom: var(--sp5); }
.alert h2 { font-size: var(--s-1); margin:0 0 var(--sp2); }
.alert-err { background: var(--danger-bg); border-color: var(--danger); }
.alert-err h2 { color: var(--danger); }
.alert-ok { background: var(--success-bg); border-color: var(--success); }
.alert-ok h2 { color: var(--success); }
.alert ul { margin:0; padding-left: var(--sp5); }
.alert-err a { color: var(--danger); font-weight:700; }
.form-status:focus { outline:none; }

.searchform { display:flex; gap: var(--sp2); flex-wrap:wrap; max-width:32rem; }
.searchform label { width:100%; font-weight:700; margin-bottom: var(--sp2); }
.searchform input[type=search] { flex:1 1 14rem; min-height:3rem; padding:.7rem .8rem; font:inherit; border:2px solid var(--bd-strong); border-radius: var(--radius-sm); }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.ftr { background: var(--ink); color: var(--on-ink-2); }
.ftr a { color: var(--on-ink-2); text-decoration:none; }
.ftr a:hover { color: var(--accent-glow); text-decoration:underline; }
.ftr-top { display:grid; gap: var(--sp6); padding-block: var(--sp8) var(--sp6); }
@media (min-width:40em){ .ftr-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.ftr h2 { font-size: var(--s--1); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--on-ink); margin:0 0 var(--sp3); }
.ftr ul { list-style:none; padding:0; margin:0; }
.ftr li { margin-bottom: var(--sp2); font-size: var(--s--1); }
.ftr-desc { font-size: var(--s--1); color: var(--on-ink-3); max-width: 34ch; }
.ftr-brand { display:flex; align-items:center; gap:.6rem; font-weight:800; color: var(--on-ink); margin-bottom: var(--sp3); }
.ftr-bottom {
  border-top:1px solid var(--bd-dark); padding-block: var(--sp4);
  display:flex; flex-wrap:wrap; gap: var(--sp3) var(--sp5); justify-content:space-between;
  font-size:.8125rem; color: var(--on-ink-3);
}
.ftr-bottom p { margin:0; max-width:none; }
.ftr-bottom ul { display:flex; flex-wrap:wrap; gap: var(--sp4); }

/* ==========================================================================
   11. PRINT
   ========================================================================== */

@media print {
  .hdr,.nav,.nav-toggle,.skip-link,.hero::after { display:none !important; }
  body { background:#fff; color:#000; font-size:12pt; }
  .hero,.section-ink,.ftr { background:none !important; color:#000 !important; }
  .hero h1,.section-ink h2 { color:#000 !important; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:10pt; word-break:break-all; }
}