/*
Theme Name: Jantec 2026 v9
Theme URI: https://jantecsolutions.co.za
Author: Jantec Solutions Group
Description: Custom hand-authored theme for jantecsolutions.co.za -- no page builder. v9: light/dark mode follows OS preference and remembers manual choice; darkened light-mode logo for readability.
Version: 9.0
Text Domain: jantec2026
*/

/* Jantec Solutions Group — site styles */

:root {
    --bg: #0B0C0E; --bg-rgb: 11,12,14; --bg-deep: #08090B;
    --surface: #101215; --surface-rgb: 16,18,21;
    --card: #0E1013; --card-hover: #12151A; --card-alt: #14171C;
    --ink: #F4F2EE; --ink2: #E7E4DE;
    --muted: #A9ADB4; --muted2: #8B9099; --muted3: #9CA1A9; --muted4: #6C727A; --faint: #4E545C;
    --fg-rgb: 255,255,255; --header-bg: rgba(0,0,0,0.92);
    --gold: #D9B558; --gold-2: #F0DC9A; --gold-3: #C99A3C; --gold-4: #8A5F2B; --on-gold: #14100A;
    --photo-op: 0.17; --footer-bg: #000000;
  }

html[data-theme="light"] [data-logo="dark"] { display: none !important; }

html[data-theme="light"] [data-logo="light"] { display: block !important; }

html[data-theme="light"] {
    --bg: #EAE6DC; --bg-rgb: 234,230,220; --bg-deep: #E0DACD;
    --surface: #E3DED3; --surface-rgb: 227,222,211;
    --card: #F2EFE7; --card-hover: #ECE8DE; --card-alt: #E6E1D6;
    --ink: #14161A; --ink2: #23272C;
    --muted: #565F69; --muted2: #6A737D; --muted3: #5E666F; --muted4: #7A828B; --faint: #A3AAB2;
    --fg-rgb: 0,0,0; --header-bg: rgba(234,230,220,0.93);
    --gold: #8A5F2B; --gold-2: #B98A2E; --gold-3: #8A5F2B; --gold-4: #6E4818; --on-gold: #14100A;
    --photo-op: 0.1; --footer-bg: #DED8CB;
  }

/* ---- responsive ---- */
  @media (max-width: 1080px) {
    [style*="max-width: 1240px"] { padding-left: 24px !important; padding-right: 24px !important; }
  }

@media (max-width: 960px) {
    [style*="grid-template-columns: 0.95fr 1.05fr"],
    [style*="grid-template-columns: 0.9fr 1.1fr"],
    [style*="grid-template-columns: 0.85fr 1.15fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns: 1.5fr 0.7fr 1fr 0.8fr"],
    [style*="grid-template-columns: 92px 64px 1fr 1.2fr"] {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 32px !important;
    }
    [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    [style*="gap: 1px"][style*="display: grid"] { gap: 1px !important; }
    [style*="grid-template-columns: 56px 1fr 1.3fr"] { grid-template-columns: 44px minmax(0, 1fr) !important; column-gap: 18px !important; row-gap: 10px !important; }
    [style*="grid-template-columns: 56px 1fr 1.3fr"] > p { grid-column: 2 !important; }
    [style*="grid-template-columns: 84px minmax(0, 48%)"],
    [style*="grid-template-columns: 84px minmax(0px, 48%)"] { grid-template-columns: 56px minmax(0, 1fr) !important; column-gap: 20px !important; padding: 26px 24px !important; }
    [style*="padding: 130px 40px"], [style*="padding: 120px 40px"], [style*="padding: 116px 40px"],
    [style*="padding: 104px 40px"], [style*="padding: 100px 40px"], [style*="padding: 96px 40px"],
    [style*="padding: 78px 40px 40px"] { padding-top: 68px !important; padding-bottom: 68px !important; }
    header [style*="max-width: 1240px"] { flex-wrap: wrap !important; row-gap: 12px !important; gap: 16px !important; }
    header nav { flex-wrap: wrap !important; }
    header nav a { padding-top: 11px !important; padding-bottom: 11px !important; }
  }

@media (max-width: 700px) {
    header [style*="max-width: 1240px"] { padding-top: 8px !important; padding-bottom: 8px !important; padding-left: 18px !important; padding-right: 18px !important; gap: 10px !important; row-gap: 6px !important; }
    header img[data-logo] { height: 26px !important; }
    header nav { gap: 1px !important; font-size: 13px !important; justify-content: flex-start !important; row-gap: 6px !important; }
    header nav a { padding: 8px 9px !important; white-space: nowrap !important; }
    header nav a[style*="linear-gradient(100deg"] { margin-left: 4px !important; padding: 9px 15px !important; font-size: 13px !important; }
    header nav button { width: 32px !important; height: 32px !important; margin-left: 5px !important; }
    [style*="mask-image: linear-gradient(to right"] { display: none !important; }
    [style*="grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr)"],
    [style*="grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr)"] { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
    [style*="font-size: 70px"] { font-size: 40px !important; }
    [style*="font-size: 62px"], [style*="font-size: 60px"], [style*="font-size: 58px"] { font-size: 36px !important; }
    [style*="font-size: 48px"], [style*="font-size: 46px"], [style*="font-size: 44px"], [style*="font-size: 42px"], [style*="font-size: 40px"] { font-size: 30px !important; }
    [style*="font-size: 38px"], [style*="font-size: 32px"], [style*="font-size: 30px"] { font-size: 26px !important; }
    [style*="grid-template-columns: 84px minmax(0, 48%)"],
    [style*="grid-template-columns: 84px minmax(0px, 48%)"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 14px !important; }
    [style*="grid-template-columns: 84px minmax(0, 48%)"] > [style*="grid-column: 2"],
    [style*="grid-template-columns: 84px minmax(0px, 48%)"] > [style*="grid-column: 2"] { grid-column: 1 !important; }
    a[style*="padding: 15px 30px"], a[style*="padding: 16px 34px"] { display: inline-block !important; padding: 16px 26px !important; }
  }

@media (hover: none) {
    [data-card-cluster] article { transform: none !important; opacity: 1 !important; }
  }

html[data-theme="light"] {
    --bg: #EAE6DC; --bg-rgb: 234,230,220; --bg-deep: #E0DACD;
    --surface: #E3DED3; --surface-rgb: 227,222,211;
    --card: #F2EFE7; --card-hover: #ECE8DE; --card-alt: #E6E1D6;
    --ink: #14161A; --ink2: #23272C;
    --muted: #565F69; --muted2: #6A737D; --muted3: #5E666F; --muted4: #7A828B; --faint: #A3AAB2;
    --fg-rgb: 0,0,0; --header-bg: rgba(234,230,220,0.93);
    --gold: var(--gold-4); --gold-2: #B98A2E; --gold-3: var(--gold-4); --gold-4: #6E4818; --on-gold: #14100A;
    --photo-op: 0.1; --footer-bg: #DED8CB;
  }

html, body { margin: 0; padding: 0; background: var(--bg); }

* { box-sizing: border-box; }

body { -webkit-font-smoothing: antialiased; }

a { color: var(--gold); text-decoration: none; }

a:hover { color: var(--gold-2); }

@keyframes jt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

html[data-theme="light"] img[src*="Proven-Expertise.png"],
  html[data-theme="light"] img[src*="Customized-Approach.png"],
  html[data-theme="light"] img[src*="Certified-Partnership.png"],
  html[data-theme="light"] img[src*="Comprehensive-Support.png"],
  html[data-theme="light"] img[src*="Security-First.png"],
  html[data-theme="light"] img[src*="Automate.png"],
  html[data-theme="light"] img[src*="Connect.png"],
  html[data-theme="light"] img[src*="Monitor.png"],
  html[data-theme="light"] img[src*="Prevent.png"],
  html[data-theme="light"] img[src*="Secure.png"],
  html[data-theme="light"] img[src*="Cloud-Services.png"],
  html[data-theme="light"] img[src*="IT-Analytics.png"],
  html[data-theme="light"] img[src*="IT-Automation.png"],
  html[data-theme="light"] img[src*="Information-Management.png"],
  html[data-theme="light"] img[src*="Digital-Transformation.png"],
  html[data-theme="light"] img[src*="Security-Compliance.png"] { filter: invert(1) brightness(0.28); }

html[data-theme="light"] img[style*="object-fit: cover"][style*="position: absolute"] { opacity: 0.78 !important; filter: contrast(1.12) saturate(1.18) brightness(0.98) !important; }

html[data-theme="light"] div[aria-hidden="true"][style*="background-image"] { opacity: 0.85 !important; filter: contrast(1.12) saturate(1.18) !important; }

html[data-theme="light"] div[aria-hidden="true"][style*="linear-gradient"] { opacity: 0.7 !important; }

html[data-theme="light"] section:has(> div[aria-hidden="true"][style*="background-image"]) > div[style*="position: relative"] {
    background: linear-gradient(90deg, rgba(234,230,220,0.96) 0%, rgba(234,230,220,0.92) 55%, rgba(234,230,220,0.74) 100%);
    backdrop-filter: blur(3px);
    border-radius: 20px;
    max-width: 1160px !important;
    margin: 34px auto !important;
  }


/* ---- marquee: auto-scroll, pause + hand-scroll on touch/hover ---- */
[data-marquee-viewport] { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; cursor: grab; }
[data-marquee-viewport]::-webkit-scrollbar { display: none; }
[data-marquee-viewport] img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
[data-marquee-viewport] { touch-action: pan-x; }
[data-marquee-viewport]:hover > div,
[data-marquee-viewport].jsg-marquee-hold > div { animation-play-state: paused !important; }

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

[data-burger] { display: none; }

@media (min-width: 701px) { [data-mobile-sheet] { display: none !important; } }

@media (max-width: 700px) {
    [data-burger] { display: flex !important; width: 44px !important; height: 44px !important; margin-left: 8px !important; }
    header nav > a:not([style*="linear-gradient(100deg"]) { display: none !important; }
    header nav > button[aria-label="Switch colour theme"] { display: none !important; }
    header [style*="max-width: 1240px"] { flex-wrap: nowrap !important; row-gap: 0 !important; }
    header nav { gap: 0 !important; flex-wrap: nowrap !important; }
  }

@media (max-width: 960px) {
    [data-partner-grid] > div:last-child { grid-column: 1 / -1 !important; }
  }

@media (max-width: 700px) {
    [data-tech-grid] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    [data-tech-grid] img { width: 100% !important; height: 62px !important; padding: 6px 10px !important; }
    header [style*="max-width: 1240px"] { padding-top: 8px !important; padding-bottom: 8px !important; padding-left: 18px !important; padding-right: 18px !important; gap: 10px !important; row-gap: 6px !important; }
    header img[data-logo] { height: 26px !important; }
    header nav { gap: 1px !important; font-size: 13px !important; justify-content: flex-start !important; row-gap: 6px !important; }
    header nav a { padding: 8px 9px !important; white-space: nowrap !important; }
    header nav a[style*="linear-gradient(100deg"] { margin-left: 4px !important; padding: 9px 15px !important; font-size: 13px !important; }
    header nav button { width: 32px !important; height: 32px !important; margin-left: 5px !important; }
    [style*="mask-image: linear-gradient(to right"] { display: none !important; }
    [style*="grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr)"],
    [style*="grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr)"] { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
    [style*="font-size: 70px"] { font-size: 40px !important; }
    [style*="font-size: 62px"], [style*="font-size: 60px"], [style*="font-size: 58px"] { font-size: 36px !important; }
    [style*="font-size: 48px"], [style*="font-size: 46px"], [style*="font-size: 44px"], [style*="font-size: 42px"], [style*="font-size: 40px"] { font-size: 30px !important; }
    [style*="font-size: 38px"], [style*="font-size: 32px"], [style*="font-size: 30px"] { font-size: 26px !important; }
    [style*="grid-template-columns: 84px minmax(0, 48%)"],
    [style*="grid-template-columns: 84px minmax(0px, 48%)"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 14px !important; }
    [style*="grid-template-columns: 84px minmax(0, 48%)"] > [style*="grid-column: 2"],
    [style*="grid-template-columns: 84px minmax(0px, 48%)"] > [style*="grid-column: 2"] { grid-column: 1 !important; }
    a[style*="padding: 15px 30px"], a[style*="padding: 16px 34px"] { display: inline-block !important; padding: 16px 26px !important; }
  }

@media (max-width: 960px) {
    [style*="grid-template-columns: 0.95fr 1.05fr"],
    [style*="grid-template-columns: 0.9fr 1.1fr"],
    [style*="grid-template-columns: 0.85fr 1.15fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns: 1.5fr 0.7fr 1fr 0.8fr"],
    [style*="grid-template-columns: 92px 64px 1fr 1.2fr"] {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 32px !important;
    }
    [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    [style*="gap: 1px"][style*="display: grid"] { gap: 1px !important; }
    [style*="grid-template-columns: 56px 1fr 1.3fr"] { grid-template-columns: 44px minmax(0, 1fr) !important; column-gap: 18px !important; row-gap: 10px !important; }
    [style*="grid-template-columns: 56px 1fr 1.3fr"] > p { grid-column: 2 !important; }
    [style*="grid-template-columns: 84px minmax(0, 40%)"],
    [style*="grid-template-columns: 84px minmax(0px, 48%)"] { grid-template-columns: 56px minmax(0, 1fr) !important; column-gap: 20px !important; padding: 26px 24px !important; }
    [style*="padding: 130px 40px"], [style*="padding: 120px 40px"], [style*="padding: 116px 40px"],
    [style*="padding: 104px 40px"], [style*="padding: 100px 40px"], [style*="padding: 96px 40px"],
    [style*="padding: 78px 40px 40px"] { padding-top: 68px !important; padding-bottom: 68px !important; }
    header [style*="max-width: 1240px"] { flex-wrap: wrap !important; row-gap: 12px !important; gap: 16px !important; }
    header nav { flex-wrap: wrap !important; }
    header nav a { padding-top: 11px !important; padding-bottom: 11px !important; }
  }

@media (max-width: 700px) {
    [style*="grid-template-columns: 84px minmax(0, 40%)"],
    [style*="grid-template-columns: 84px minmax(0px, 40%)"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 16px !important; padding: 26px 22px !important; min-height: 0 !important; }
    [style*="grid-template-columns: 84px minmax(0, 40%)"] > [style*="grid-column: 2"],
    [style*="grid-template-columns: 84px minmax(0px, 40%)"] > [style*="grid-column: 2"] { grid-column: 1 !important; }
    [style*="grid-template-columns: 84px minmax(0, 40%)"] > img,
    [style*="grid-template-columns: 84px minmax(0px, 40%)"] > img { height: 44px !important; }
    [style*="grid-template-columns: 84px minmax(0, 40%)"] p,
    [style*="grid-template-columns: 84px minmax(0px, 40%)"] p { max-width: none !important; }
    [style*="grid-template-columns: 84px minmax(0, 40%)"] [style*="width: 50%"],
    [style*="grid-template-columns: 84px minmax(0px, 40%)"] [style*="width: 50%"] { width: 100% !important; opacity: 0.28 !important; }
    [style*="flex-wrap: nowrap"] { flex-wrap: wrap !important; }
    header [style*="max-width: 1240px"] { padding-top: 8px !important; padding-bottom: 8px !important; padding-left: 18px !important; padding-right: 18px !important; gap: 10px !important; row-gap: 6px !important; }
    header img[data-logo] { height: 26px !important; }
    header nav { gap: 1px !important; font-size: 13px !important; justify-content: flex-start !important; row-gap: 6px !important; }
    header nav a { padding: 8px 9px !important; white-space: nowrap !important; }
    header nav a[style*="linear-gradient(100deg"] { margin-left: 4px !important; padding: 9px 15px !important; font-size: 13px !important; }
    header nav button { width: 32px !important; height: 32px !important; margin-left: 5px !important; }
    [style*="mask-image: linear-gradient(to right"] { display: none !important; }
    [style*="grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr)"],
    [style*="grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr)"] { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
    [style*="font-size: 70px"] { font-size: 40px !important; }
    [style*="font-size: 62px"], [style*="font-size: 60px"], [style*="font-size: 58px"] { font-size: 36px !important; }
    [style*="font-size: 48px"], [style*="font-size: 46px"], [style*="font-size: 44px"], [style*="font-size: 42px"], [style*="font-size: 40px"] { font-size: 30px !important; }
    [style*="font-size: 38px"], [style*="font-size: 32px"], [style*="font-size: 30px"] { font-size: 26px !important; }
    [style*="grid-template-columns: 84px minmax(0, 40%)"],
    [style*="grid-template-columns: 84px minmax(0px, 48%)"] { grid-template-columns: minmax(0, 1fr) !important; row-gap: 14px !important; }
    [style*="grid-template-columns: 84px minmax(0, 40%)"] > [style*="grid-column: 2"],
    [style*="grid-template-columns: 84px minmax(0px, 48%)"] > [style*="grid-column: 2"] { grid-column: 1 !important; }
    a[style*="padding: 15px 30px"], a[style*="padding: 16px 34px"] { display: inline-block !important; padding: 16px 26px !important; }
  }

input, textarea { font-family: Geist, Helvetica, Arial, sans-serif; }

input::placeholder, textarea::placeholder { color: var(--muted4); }

input:focus, textarea:focus { outline: none; border-color: var(--gold); }

/* ---- mobile sheet state ---- */
[data-mobile-sheet] { display: none; }
body.jsg-menu-open [data-mobile-sheet] { display: block; }

/* ---- hover states ---- */
.jh-1:hover { color: var(--ink); }
.jh-2:hover { color: var(--gold-2); border-color: var(--gold); background: rgba(217,181,88,0.1); }
.jh-3:hover { background: rgba(var(--fg-rgb), 0.07); color: var(--ink); }
.jh-4:hover { filter: brightness(1.12); color: var(--bg); }
.jh-5:hover { background: rgba(var(--fg-rgb), 0.12); border-color: rgba(var(--fg-rgb), 0.28); }
.jh-6:hover { color: var(--gold-2); border-bottom-color: var(--gold-2); }
.jh-7:hover { background: var(--surface); border: 1px solid rgba(217,181,88,0.4); }
.jh-8:hover { color: var(--gold-2); }
.jh-9:hover { background: var(--card-hover); }
.jh-10:hover { border-color: var(--gold); color: var(--gold-2); background: rgba(217,181,88,0.1); box-shadow: 0 0 0 3px rgba(217,181,88,0.12); }
.jh-11:hover { background: var(--card-alt); box-shadow: inset 0 0 0 1px rgba(217,181,88,0.32), 0 0 44px rgba(217,181,88,0.07); }
.jh-12:hover { border-color: var(--gold); color: var(--gold-2); }
.jh-13:hover { filter: brightness(1.12); }

/* ---- tech chips: clearer press affordance ---- */
.jh-10 { cursor: pointer; -webkit-tap-highlight-color: transparent; border-color: rgba(217,181,88,0.32) !important; }
.jh-10:hover { border-color: var(--gold) !important; color: var(--gold-2) !important; background: rgba(217,181,88,0.12) !important; }
.jh-10:focus-visible,
.jh-10:active,
.jh-10.jsg-chip-lit { border-color: var(--gold) !important; color: var(--gold-2) !important; background: rgba(217,181,88,0.18) !important; box-shadow: 0 0 0 3px rgba(217,181,88,0.2) !important; outline: none; }
.jh-10:active { transform: translateY(1px); }
@media (hover: none) {
  .jh-10 { border-color: rgba(217,181,88,0.42) !important; box-shadow: inset 0 0 0 1px rgba(217,181,88,0.1); }
}

/* ---- service cards: hover + tap-to-focus reading state ---- */
.jh-11 { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.25s ease, box-shadow 0.3s ease, transform 0.25s ease; }
.jh-11 > img { transition: transform 0.3s ease, filter 0.3s ease; }
.jh-11:hover > img { transform: translateY(-2px) scale(1.06); }
.jh-11:hover { background: var(--card-alt) !important; box-shadow: inset 0 0 0 1px rgba(217,181,88,0.32), 0 0 44px rgba(217,181,88,0.07) !important; }
.jh-11:active { transform: scale(0.995); }
.jh-11.jsg-card-lit { background: var(--card-alt) !important; box-shadow: inset 0 0 0 1px rgba(217,181,88,0.55), 0 0 60px rgba(217,181,88,0.14) !important; }
.jh-11.jsg-card-lit > img { transform: translateY(-2px) scale(1.08); filter: drop-shadow(0 0 10px rgba(217,181,88,0.35)); }
.jh-11.jsg-card-lit h3 { color: var(--gold-2) !important; }
@media (hover: none) {
  .jh-11 { box-shadow: inset 0 0 0 1px rgba(217,181,88,0.1); }
}