/* ============================================================
   MAC4 ELECTRONICS - site-wide reskin
   Applies the Apple neutral ladder plus the MAC4 logo blue to
   every page, without touching page content or the menu.
   The --k-olive / --k-sand token names are historical; both now
   hold blues (primary #1256b8, light #7db4ec).

   Strategy: the parent theme drives almost everything from CSS
   custom properties, so we retarget those first and only then
   patch the components that hard-code their own colours.

   The KINEGIS front page is scoped under .kinegis-home and is
   deliberately excluded from most of this.
   ============================================================ */

:root{
  /* --- KINEGIS brand --- */
  --k-sand:#7db4ec;
  --k-sand-hi:#a8cef7;
  --k-olive:#1256b8;
  --k-olive-deep:#0b3f8f;
  --k-ink:#1d1d1f;
  --k-ink-2:#6e6e73;
  --k-paper:#fbfbfd;
  --k-paper-2:#f5f5f7;
  --k-hair:rgba(0,0,0,.10);
  --k-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif;

  /* --- retarget the parent theme's own variables --- */
  --bg:#fbfbfd;
  --bg-2:#f5f5f7;
  --panel:#ffffff;
  --panel-2:#f5f5f7;
  --text:#1d1d1f;
  --muted:#6e6e73;
  --line:rgba(0,0,0,.10);
  --accent:#1256b8;
  --accent-2:#7db4ec;
  --accent-deep:#0b3f8f;
  --shadow:0 20px 60px rgba(0,0,0,.08);
}

/* The parent paints a dark gradient directly on body. */
body{
  background:var(--k-paper) !important;
  color:var(--k-ink);
  font-family:var(--k-display);
  -webkit-font-smoothing:antialiased;
}

/* ---------- typography ---------- */
body:not(.kinegis-page) .elementor-heading-title,
body:not(.kinegis-page) h1,
body:not(.kinegis-page) h2,
body:not(.kinegis-page) h3,
body:not(.kinegis-page) h4{
  font-family:var(--k-display);
  letter-spacing:-.026em;
  line-height:1.08;
  font-weight:700;
  text-wrap:balance;
  /* Colour is deliberately NOT forced here. Many sections are still dark
     with light text; mac4-site.js measures the real contrast per element
     and only repairs the ones that actually fail. */
}

body:not(.kinegis-page) h1,
body:not(.kinegis-page) h1.elementor-heading-title{
  font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:-.035em;
}
body:not(.kinegis-page) h2,
body:not(.kinegis-page) h2.elementor-heading-title{
  font-size:clamp(1.9rem,4.2vw,3rem);
}
body:not(.kinegis-page) h3,
body:not(.kinegis-page) h3.elementor-heading-title{
  font-size:clamp(1.25rem,2.2vw,1.65rem);letter-spacing:-.02em;
}

body:not(.kinegis-page) .elementor-widget-text-editor,
body:not(.kinegis-page) .elementor-widget-text-editor p,
body:not(.kinegis-page) p{
  font-family:var(--k-display);
  font-size:1.0625rem;
  line-height:1.58;
  letter-spacing:-.005em;
}

/* Link colour is left to the palette remapper, which only touches the
   old blues. Blanket-recolouring every <a> also hit the drawer buttons. */
body:not(.kinegis-page) a:hover{opacity:.82;}

/* eyebrow / kicker labels used across the site */
body:not(.kinegis-page) .mini-label,
body:not(.kinegis-page) .eyebrow{
  font-size:.74rem !important;
  font-weight:600 !important;
  letter-spacing:.2em !important;
  text-transform:uppercase;
  color:var(--k-olive) !important;
  background:none !important;
  border:0 !important;
  padding:0 !important;
}


/* ---------- heading override ----------
   Elementor writes font-family and font-size per element into post-N.css
   with selectors like `.elementor-9 .elementor-element-abc123 .elementor-
   heading-title`, which outranks anything reasonable we can write. The
   parent theme also sets Orbitron on bare h1-h4. Matching that weight is
   the only way to land the Apple type scale, so these carry !important
   deliberately rather than by laziness. */
body:not(.kinegis-page) h1,
body:not(.kinegis-page) h2,
body:not(.kinegis-page) h3,
body:not(.kinegis-page) h4,
body:not(.kinegis-page) h5,
body:not(.kinegis-page) .elementor-heading-title{
  font-family:var(--k-display) !important;
  letter-spacing:-.026em !important;
  line-height:1.09 !important;
}
body:not(.kinegis-page) h1,
body:not(.kinegis-page) h1.elementor-heading-title{
  font-size:clamp(2.6rem,6vw,4.4rem) !important;letter-spacing:-.035em !important;
}
body:not(.kinegis-page) h2,
body:not(.kinegis-page) h2.elementor-heading-title{
  font-size:clamp(1.9rem,4.2vw,3rem) !important;
}
body:not(.kinegis-page) h3,
body:not(.kinegis-page) h3.elementor-heading-title{
  font-size:clamp(1.25rem,2.2vw,1.65rem) !important;letter-spacing:-.02em !important;
}
body:not(.kinegis-page) .elementor-widget-text-editor,
body:not(.kinegis-page) .elementor-widget-text-editor p,
body:not(.kinegis-page) .elementor-widget-text-editor li{
  font-family:var(--k-display) !important;
  font-size:1.0625rem !important;
  line-height:1.58 !important;
}

/* ---------- section rhythm ---------- */
body:not(.kinegis-page) .e-con.e-parent{
  padding-block:clamp(56px,8vh,110px);
}
body:not(.kinegis-page) .e-con-inner,
body:not(.kinegis-page) .e-con-boxed > .e-con-inner{
  max-width:1080px;
}

/* ---------- cards ---------- */
body:not(.kinegis-page) .glass-card,
body:not(.kinegis-page) .mac4-news-card,
body:not(.kinegis-page) .depth-1{
  background:#fff !important;
  border:1px solid var(--k-hair) !important;
  border-radius:18px !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:var(--k-ink);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body:not(.kinegis-page) .glass-card:hover,
body:not(.kinegis-page) .mac4-news-card:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 44px rgba(0,0,0,.09) !important;
  border-color:rgba(18,86,184,.32) !important;
}
body:not(.kinegis-page) .glass-card h1,
body:not(.kinegis-page) .glass-card h2,
body:not(.kinegis-page) .glass-card h3,
body:not(.kinegis-page) .mac4-news-card h3{color:var(--k-ink);}
body:not(.kinegis-page) .glass-card p,
body:not(.kinegis-page) .mac4-news-card p{color:var(--k-ink-2);}

/* ---------- buttons ---------- */
body:not(.kinegis-page) .button,
body:not(.kinegis-page) .elementor-button,
body:not(.kinegis-page) .wpforms-submit,
body:not(.kinegis-page) button[type=submit],
body:not(.kinegis-page) input[type=submit]{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--k-olive) !important;
  color:#fff !important;
  border:1px solid transparent !important;
  border-radius:980px !important;
  padding:13px 28px !important;
  font-family:var(--k-display);
  font-size:1rem !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:-.01em;
  text-transform:none !important;
  text-shadow:none !important;
  box-shadow:none !important;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
body:not(.kinegis-page) .button:hover,
body:not(.kinegis-page) .elementor-button:hover,
body:not(.kinegis-page) .wpforms-submit:hover,
body:not(.kinegis-page) button[type=submit]:hover,
body:not(.kinegis-page) input[type=submit]:hover{
  background:var(--k-olive-deep) !important;color:#fff !important;
}

body:not(.kinegis-page) .button-secondary,
body:not(.kinegis-page) .button-ghost{
  background:transparent !important;
  color:var(--k-olive) !important;
  border-color:rgba(18,86,184,.45) !important;
}
body:not(.kinegis-page) .button-secondary:hover,
body:not(.kinegis-page) .button-ghost:hover{
  background:rgba(18,86,184,.08) !important;
  color:var(--k-olive-deep) !important;
}

/* ---------- header ---------- */
.site-header{
  background:rgba(251,251,253,.82) !important;
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--k-hair) !important;
  box-shadow:none !important;
}
.site-header.is-scrolled{background:rgba(251,251,253,.95) !important;}
.brand-text strong{font-family:var(--k-display) !important;color:var(--k-ink) !important;letter-spacing:-.01em !important;}
.brand-text small{color:var(--k-ink-2) !important;}

.site-nav a,.mobile-nav a{
  font-family:var(--k-display);
  font-size:.84rem !important;
  font-weight:500 !important;
  letter-spacing:.02em !important;
  text-transform:none !important;
  color:var(--k-ink) !important;
}
.site-nav a::after{background:var(--k-olive) !important;}
.site-nav a:hover,.site-nav .current-menu-item > a{color:var(--k-olive) !important;}

/* ---------- footer ---------- */
.site-footer{
  background:var(--k-paper-2) !important;
  border-top:1px solid var(--k-hair) !important;
  color:var(--k-ink-2) !important;
}
.site-footer a{color:var(--k-ink-2) !important;}
.site-footer a:hover{color:var(--k-olive) !important;}
.site-footer h3,.site-footer h4,.site-footer strong{color:var(--k-ink) !important;}

/* ---------- forms (WPForms on /contact/) ---------- */
body:not(.kinegis-page) .wpforms-field-label{
  font-family:var(--k-display);
  font-size:.85rem !important;font-weight:600 !important;
}
body:not(.kinegis-page) .wpforms-container input[type=text],
body:not(.kinegis-page) .wpforms-container input[type=email],
body:not(.kinegis-page) .wpforms-container input[type=tel],
body:not(.kinegis-page) .wpforms-container select,
body:not(.kinegis-page) .wpforms-container textarea{
  font-family:var(--k-display) !important;
  font-size:1rem !important;
  color:var(--k-ink) !important;
  background:var(--k-paper-2) !important;
  border:1px solid var(--k-hair) !important;
  border-radius:11px !important;
  padding:12px 14px !important;
  box-shadow:none !important;
}
body:not(.kinegis-page) .wpforms-container input:focus,
body:not(.kinegis-page) .wpforms-container select:focus,
body:not(.kinegis-page) .wpforms-container textarea:focus{
  outline:none !important;background:#fff !important;
  border-color:var(--k-olive) !important;
  box-shadow:0 0 0 3px rgba(18,86,184,.16) !important;
}

/* ---------- misc parent-theme bits that hard-code dark ---------- */
body:not(.kinegis-page) .two-up,
body:not(.kinegis-page) .panel{background:transparent !important;}
body:not(.kinegis-page) hr{border-color:var(--k-hair) !important;}

::-webkit-scrollbar-track{background:var(--k-paper-2) !important;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--k-olive),var(--k-olive-deep)) !important;
  border-color:var(--k-paper-2) !important;
}

/* ============================================================
   Sliding funding panel (left edge, every page)
   ============================================================ */
.k-drawer{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:9990;
  font-family:var(--k-display);pointer-events:none;}
.k-drawer *{box-sizing:border-box;pointer-events:auto;}

/* the always-visible tab */
.k-drawer .k-drawer__tab{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--k-olive);color:#fff;border:0;cursor:pointer;
  padding:18px 9px;border-radius:0 14px 14px 0;
  box-shadow:0 10px 34px rgba(0,0,0,.20);
  transition:background .22s ease,padding .22s ease;
}
.k-drawer .k-drawer__tab:hover{background:var(--k-olive-deep);padding-left:13px;}
.k-drawer__tab:focus-visible{outline:3px solid var(--k-sand);outline-offset:2px;}
.k-drawer__tab-label{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.76rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;
}
.k-drawer__tab-pct{
  font-size:.72rem;font-weight:700;letter-spacing:.02em;
  background:rgba(255,255,255,.22);border-radius:980px;padding:3px 7px;
}
.k-drawer.is-open .k-drawer__tab{opacity:0;pointer-events:none;}

/* the panel */
.k-drawer__panel{
  width:min(360px,calc(100vw - 32px));
  background:#fff;border:1px solid var(--k-hair);border-left:0;
  border-radius:0 20px 20px 0;padding:28px 26px 24px;
  box-shadow:0 30px 90px rgba(0,0,0,.20);
  transform:translateX(-102%);opacity:0;
  transition:transform .42s cubic-bezier(.22,.61,.36,1),opacity .28s ease;
  max-height:min(88vh,720px);overflow-y:auto;position:relative;
}
.k-drawer.is-open .k-drawer__panel{transform:translateX(0);opacity:1;}
.k-drawer__panel[hidden]{display:none;}

.k-drawer__close{
  position:absolute;top:12px;right:14px;background:none;border:0;cursor:pointer;
  font-size:1.6rem;line-height:1;color:var(--k-ink-2);padding:4px 8px;border-radius:8px;
}
.k-drawer__close:hover{color:var(--k-ink);background:var(--k-paper-2);}

.k-drawer__eyebrow{
  font-size:.7rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--k-olive);margin:0 0 .45rem;
}
.k-drawer__title{
  font-size:1.5rem;font-weight:700;letter-spacing:-.026em;line-height:1.1;
  margin:0 0 .6rem;color:var(--k-ink);
}
.k-drawer__text{font-size:.92rem;line-height:1.55;color:var(--k-ink-2);margin:0 0 1.3rem;}

.k-drawer__figures{display:flex;align-items:baseline;gap:.45rem;margin-bottom:.6rem;}
.k-drawer__raised{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;color:var(--k-ink);}
.k-drawer__figures span{font-size:.85rem;color:var(--k-ink-2);}
.k-drawer__track{height:9px;border-radius:980px;background:rgba(0,0,0,.09);overflow:hidden;}
.k-drawer__bar{
  height:100%;width:0;border-radius:980px;
  background:linear-gradient(90deg,var(--k-olive),var(--k-sand));
  transition:width 1.2s cubic-bezier(.22,.61,.36,1);
}

.k-drawer__actions{display:flex;flex-direction:column;gap:9px;margin-top:1.5rem;}
.k-drawer__btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 20px;border-radius:980px;border:1px solid transparent;
  font-size:.95rem;font-weight:500;line-height:1;text-decoration:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
/* Scoped one level deeper so these beat `body:not(.kinegis-page) a`,
   which is specificity (0,1,2) and would otherwise repaint the filled
   button labels olive-on-olive, i.e. invisible. */
.k-drawer .k-drawer__btn--fill{background:var(--k-olive);color:#fff;}
.k-drawer .k-drawer__btn--fill:hover{background:var(--k-olive-deep);color:#fff;}
.k-drawer .k-drawer__btn--out{background:transparent;color:var(--k-olive);border-color:rgba(18,86,184,.45);}
.k-drawer .k-drawer__btn--out:hover{background:rgba(18,86,184,.08);color:var(--k-olive-deep);}
.k-drawer__soon{
  font-size:.85rem;color:var(--k-ink-2);margin:0;padding:11px 14px;
  background:var(--k-paper-2);border-radius:11px;text-align:center;
}
.k-drawer__fine{font-size:.72rem;line-height:1.55;color:#86868b;margin:1.1rem 0 0;}

@media (max-width:560px){
  .k-drawer{top:auto;bottom:0;transform:none;width:100%;}
  /* These must match the desktop rules' specificity (.k-drawer .k-drawer__tab),
     otherwise the desktop absolute positioning wins even inside this query
     and the tab hangs off the bottom of the screen. */
  .k-drawer .k-drawer__tab{position:static;transform:none;flex-direction:row;
    justify-content:center;width:100%;border-radius:0;padding:13px 16px;}
  .k-drawer .k-drawer__tab:hover{padding-left:16px;}
  .k-drawer .k-drawer__tab-label{writing-mode:horizontal-tb;transform:none;}
  .k-drawer__panel{
    width:100vw;border-radius:20px 20px 0 0;border-left:1px solid var(--k-hair);
    transform:translateY(102%);max-height:82vh;
  }
  .k-drawer.is-open .k-drawer__panel{transform:translateY(0);}
}

@media (prefers-reduced-motion:reduce){
  .k-drawer__panel,.k-drawer__bar,.k-drawer__tab{transition:none !important;}
}

/* ============================================================
   MAC4 logo blue — sampled from the official logo artwork
   (dominant hue ~216 deg, #022a6a). Used for FUNDING elements
   only: the funding CTA, the meter fill and the sliding panel.
   KINEGIS keeps olive/sand as its product identity, so the two
   read as distinct — corporate funding vs product brand.
   ============================================================ */
:root{
  --k-blue:#1256b8;        /* same primary as the rest of the theme */
  --k-blue-deep:#022a6a;   /* the logo navy itself - hover, and meter gradient start */
  --k-blue-hi:#7db4ec;     /* light blue - highlight end of the meter gradient */
}

/* --- funding meter fill --- */
.k-fund__bar{
  background:linear-gradient(90deg,var(--k-blue-deep),var(--k-blue-hi)) !important;
}

/* --- funding call-to-action buttons --- */
#mac4-funding .k-btn--fill,
#kinegis-funding .k-btn--fill{
  background:var(--k-blue) !important;
  color:#fff !important;
}
#mac4-funding .k-btn--fill:hover,
#kinegis-funding .k-btn--fill:hover{
  background:var(--k-blue-deep) !important;
  color:#fff !important;
}
#mac4-funding .k-btn--out,
#kinegis-funding .k-btn--out{
  color:var(--k-blue-hi) !important;
  border-color:rgba(61,123,217,.5) !important;
}
#mac4-funding .k-btn--out:hover,
#kinegis-funding .k-btn--out:hover{
  background:rgba(61,123,217,.12) !important;
  color:#fff !important;
}

/* --- sliding funding panel --- */
.k-drawer .k-drawer__tab{background:var(--k-blue);}
.k-drawer .k-drawer__tab:hover{background:var(--k-blue-deep);}
.k-drawer__bar{background:linear-gradient(90deg,var(--k-blue-deep),var(--k-blue-hi)) !important;}
.k-drawer__eyebrow{color:var(--k-blue) !important;}
.k-drawer .k-drawer__btn--fill{background:var(--k-blue);color:#fff;}
.k-drawer .k-drawer__btn--fill:hover{background:var(--k-blue-deep);color:#fff;}
.k-drawer .k-drawer__btn--out{color:var(--k-blue);border-color:rgba(11,63,143,.45);}
.k-drawer .k-drawer__btn--out:hover{background:rgba(11,63,143,.08);color:var(--k-blue-deep);}
.k-drawer__close:focus-visible,
.k-drawer .k-drawer__tab:focus-visible{outline:3px solid var(--k-blue-hi);outline-offset:2px;}

/* ============================================================
   Mobile touch targets
   Measured on the live site at 375px: slider dots were 38x4px,
   card links 27px tall and the menu toggle 37px — all below the
   44px minimum, so they were hard to hit accurately.
   Hit areas are enlarged with padding; the visible dot keeps its
   original size so the design does not change.
   ============================================================ */
@media (max-width:900px){
  /* dots now carry their own 44px hit area - see mac4-components.css */
  .mh-hero__dots{gap:4px;}

  /* card links and inline chevron links */
  .kinegis-home .k-link{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }

  /* header controls */
  .nav-toggle{min-height:44px;display:inline-flex;align-items:center;}
  .header-portal-link{min-height:44px;display:inline-flex;align-items:center;}

  /* slider arrows need a real target too */
  .mh-hero__arrow{min-width:44px;min-height:44px;}

  /* footer link lists were 21px row height */
  .site-footer a{
    display:inline-block;
    padding-block:9px;
    line-height:1.3;
  }
}

/* ============================================================
   Mobile header — logo only
   With the wordmark removed the lockup no longer collides with
   the Investor Portal button. Give the logo a sensible cap and
   let the actions sit beside it.
   ============================================================ */
.brand{gap:0;}
.brand-logo{width:clamp(120px,32vw,160px);height:auto;}

@media (max-width:560px){
  .header-shell{gap:10px;min-height:64px;}
  .brand-logo{width:clamp(104px,30vw,130px);}
  .header-portal-link{padding-inline:14px;font-size:.82rem;}
}

/* Very narrow phones: keep the Investor Portal CTA visible - it is the
   primary investor entry point and hiding it behind the menu costs more
   than the space it saves. It only looked wrong because it wrapped onto
   two lines, which made the header 60px tall. Stop the wrap instead.
   !important is needed here: the theme sets display on .header-actions
   .button at higher specificity than a plain class selector. */
@media (max-width:480px){
  .header-actions .header-portal-link{
    white-space:nowrap !important;
    padding-inline:13px !important;
    font-size:.78rem !important;
    letter-spacing:0 !important;
    min-height:40px !important;
  }
}
@media (max-width:360px){
  .header-actions .header-portal-link{
    font-size:.72rem !important;
    padding-inline:10px !important;
  }
  .brand-logo{width:96px;}
}

/* ============================================================
   Enterprise page — tighter vertical rhythm
   Eight stacked containers each carried 72px top AND bottom
   padding, so every row sat 144px from the next. Four of those
   rows are only ~277px tall, which made the gaps read as empty
   space rather than rhythm. Halved for this page only; the rest
   of the site keeps the roomier spacing.
   ============================================================ */
body.page-id-31 .e-con.e-parent{
  padding-block:clamp(24px,3.4vh,48px) !important;
}
/* the opening hero keeps a little more air than the rows below it */
body.page-id-31 .e-con.e-parent:first-of-type{
  padding-block:clamp(44px,6vh,84px) !important;
}