/* ===========================================================================
   MKAdvantage design system — Phase 1 foundations
   Loaded from child functions.php at wp_head priority 999, i.e. AFTER the
   Redux dynamic CSS (wp_head 150) and after the theme's inline options CSS.
   Source order is what lets these plain selectors win; do not add !important
   unless you are fighting an !important rule in the theme.

   Ships: self-hosted type, colour tokens, type scale, elevation, buttons,
   forms, focus states. No layout restructuring — that is Phase 3.
   =========================================================================== */

/* ---------- 1. Type ------------------------------------------------------ */

@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/Fraunces-600.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/Inter-400.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/Inter-600.woff2') format('woff2');
}

/* ---------- 2. Tokens ---------------------------------------------------- */

:root{
  /* brand — teal kept from the logo, eco-green retired */
  --mka-teal:#14625C;
  --mka-teal-deep:#0A3F3B;
  --mka-teal-bright:#1F8279;
  --mka-teal-wash:#DEEAE7;

  /* single warm accent */
  --mka-honey:#B9761E;
  --mka-honey-soft:#D89A45;
  --mka-honey-wash:#F7E9D4;

  /* neutrals, biased green so they read chosen rather than inherited */
  --mka-ink:#0C2624;
  --mka-ink-soft:#47605C;
  --mka-ink-mute:#728884;
  --mka-paper:#F3F6F5;
  --mka-surface:#FFFFFF;
  --mka-surface-2:#E9F0ED;
  --mka-line:#D2DFDB;
  --mka-line-soft:#E2EAE7;

  /* elevation */
  --mka-sh-1:0 1px 2px rgba(12,38,36,.06), 0 2px 6px rgba(12,38,36,.05);
  --mka-sh-2:0 2px 4px rgba(12,38,36,.05), 0 8px 20px rgba(12,38,36,.08);
  --mka-sh-3:0 4px 8px rgba(12,38,36,.06), 0 20px 48px rgba(12,38,36,.13);

  /* type */
  --mka-display:'Fraunces',Georgia,'Times New Roman',serif;
  --mka-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --mka-rad:14px;
  --mka-rad-sm:10px;
}

/* ---------- 3. Base typography ------------------------------------------ */

body,
.block-editor-page .editor-styles-wrapper,
p, .lead, small{
  font-family:var(--mka-body);
}

body{
  font-size:17px;
  line-height:1.65;
  color:var(--mka-ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

p, .text-dark p, .text-dark, .text-light .text-dark{
  color:var(--mka-ink-soft);
}

.lead{
  font-size:19px;
  line-height:1.6;
  color:var(--mka-ink-soft);
}

/* Headings. The theme sets these to rgba(0,0,0,.80) in its dynamic CSS;
   equal specificity + later source order wins without !important. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3,
.item-title, a.item-title,
.text-dark h1, .text-dark h2, .text-dark h3, .text-dark h4, .text-dark h5, .text-dark h6{
  font-family:var(--mka-display);
  font-optical-sizing:auto;
  font-weight:600;
  color:var(--mka-ink);
  letter-spacing:-.018em;
  line-height:1.14;
  text-wrap:balance;
}

h1, .h1{font-size:clamp(34px,4.6vw,52px); letter-spacing:-.028em; line-height:1.06}
h2, .h2{font-size:clamp(27px,3.4vw,38px); letter-spacing:-.024em}
h3, .h3{font-size:clamp(22px,2.6vw,30px)}
h4{font-size:22px}
h5{font-size:18px}
h6{font-size:16px; letter-spacing:.01em}

/* Section eyebrows / small caps labels */
.mka-eyebrow{
  font-family:var(--mka-body);
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mka-ink-mute);
}

/* ---------- 4. Brand colour remap --------------------------------------- */
/* The theme's Redux output paints these with the recycling demo green. */

.primary-color,
a.primary-color,
.text-light .primary-color,
.text-dark .primary-color,
.text-light a.primary-color:not(.btn),
.text-dark a.primary-color{
  color:var(--mka-teal-bright);
}

.primary-color-bg,
.primary-hover-bg:hover,
.primary-hover-bg:focus{
  background-color:var(--mka-teal);
}

.secondary-color,
a.secondary-color,
.text-light .secondary-color,
.text-dark .secondary-color{
  color:var(--mka-teal-deep);
}

.secondary-color-bg{background-color:var(--mka-teal-deep);}

.tertiary-color,
a.tertiary-color,
.text-light .tertiary-color,
.text-dark .tertiary-color{
  color:var(--mka-ink-soft);
}

.tertiary-color-bg{background-color:var(--mka-ink);}

a,
.text-dark a:not(.btn):not(:hover){
  color:var(--mka-teal);
  text-underline-offset:3px;
}
a:hover,
a:focus,
.text-dark a:not(.btn):hover{
  color:var(--mka-teal-deep);
}

/* ---------- 5. Buttons --------------------------------------------------- */

.btn,
input[type="submit"],
button[type="submit"],
.wpforms-container .wpforms-form button[type="submit"]{
  font-family:var(--mka-body);
  font-weight:600;
  font-size:17px;
  letter-spacing:-.005em;
  text-transform:none;
  border-radius:var(--mka-rad-sm);
  padding:14px 24px;
  border:1px solid transparent;
  line-height:1.2;
  transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}

.btn-primary,
.btn.btn-primary,
input[type="submit"],
button[type="submit"],
.wpforms-container .wpforms-form button[type="submit"]{
  background-color:var(--mka-teal);
  border-color:var(--mka-teal);
  color:#FFFFFF;
  box-shadow:var(--mka-sh-1);
}
.btn-primary:hover,
.btn.btn-primary:hover,
.btn-primary:focus,
input[type="submit"]:hover,
button[type="submit"]:hover,
.wpforms-container .wpforms-form button[type="submit"]:hover{
  background-color:var(--mka-teal-deep);
  border-color:var(--mka-teal-deep);
  color:#FFFFFF;
  transform:translateY(-1px);
  box-shadow:var(--mka-sh-2);
}

.btn-empty,
.btn.btn-empty{
  background-color:transparent;
  border-color:var(--mka-line);
  color:var(--mka-ink);
}
.btn-empty:hover,
.btn.btn-empty:hover{
  background-color:var(--mka-surface-2);
  border-color:var(--mka-teal);
  color:var(--mka-teal-deep);
}

/* On dark rows the outline button needs a light border, not a grey one. */
.text-light .btn-empty,
.text-light .btn.btn-empty{
  border-color:rgba(255,255,255,.42);
  color:#FFFFFF;
}
.text-light .btn-empty:hover,
.text-light .btn.btn-empty:hover{
  background-color:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.65);
  color:#FFFFFF;
}

/* ---------- 6. Forms ----------------------------------------------------- */

input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.wpforms-container input:not([type="submit"]),
.wpforms-container textarea,
.wpforms-container select{
  font-family:var(--mka-body);
  font-size:16px;
  color:var(--mka-ink);
  background-color:var(--mka-surface);
  border:1px solid var(--mka-line);
  border-radius:var(--mka-rad-sm);
  padding:12px 14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:not([type="submit"]):focus,
textarea:focus,
select:focus{
  border-color:var(--mka-teal);
  box-shadow:0 0 0 3px var(--mka-teal-wash);
  outline:none;
}

.wpforms-container .wpforms-field-label{
  font-family:var(--mka-body);
  font-weight:600;
  font-size:15px;
  color:var(--mka-ink);
}
.wpforms-container .wpforms-field-sublabel,
.wpforms-container .wpforms-field-description{
  color:var(--mka-ink-mute);
}

/* ---------- 7. Accessibility -------------------------------------------- */

a:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--mka-honey);
  outline-offset:3px;
  border-radius:4px;
}

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

/* ---------- 8. Reusable components (for Phase 3) ------------------------ */

.mka-card{
  background:var(--mka-surface);
  border:1px solid var(--mka-line);
  border-radius:var(--mka-rad);
  padding:26px 24px 28px;
  box-shadow:var(--mka-sh-1);
  transition:transform .2s ease, box-shadow .2s ease;
}
.mka-card:hover{transform:translateY(-3px); box-shadow:var(--mka-sh-3);}

.mka-card--lift{
  background:var(--mka-teal);
  border-color:var(--mka-teal-deep);
  color:#EDF7F4;
  box-shadow:var(--mka-sh-3);
}
.mka-card--lift h1,.mka-card--lift h2,.mka-card--lift h3,.mka-card--lift h4{color:#FFFFFF;}
.mka-card--lift p{color:rgba(237,247,244,.86);}

/* the "sill" — a threshold band, used instead of another full-width rectangle */
.mka-sill{
  padding:26px 28px 26px 30px;
  border-radius:var(--mka-rad);
  background:linear-gradient(100deg,var(--mka-honey-wash),transparent 78%);
  border-left:3px solid var(--mka-honey-soft);
}
.mka-sill > :first-child{
  font-family:var(--mka-display);
  font-weight:600;
  font-size:24px;
  letter-spacing:-.018em;
  color:var(--mka-ink);
}

.mka-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:600;
  padding:5px 13px;
  border-radius:999px;
  background:var(--mka-teal-wash);
  color:var(--mka-teal);
  font-variant-numeric:tabular-nums;
}

/* ---------- 9. Comparison table -----------------------------------------
   Kept working until Phase 3 removes the table entirely. Its original rule
   asked for 'Inter' which was never loaded; Inter is now self-hosted above,
   so this stops silently falling back.
   ------------------------------------------------------------------------ */

.mka-comparison-table{
  font-family:var(--mka-body);
  box-shadow:var(--mka-sh-2);
  border-radius:var(--mka-rad);
}
.mka-comparison-table thead th{background-color:var(--mka-ink);}
.mka-comparison-table th.feature-col{background-color:var(--mka-teal-deep);}