/* =========================
   Dyslexie Font (TTF)
   ========================= */
@font-face{
  font-family: "Dyslexie";
  src: url("../nc_assets/fonts/Dyslexie_Regular_173026.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Dyslexie";
  src: url("../nc_assets/fonts/Dyslexie_Bold_173026.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Dyslexie";
  src: url("../nc_assets/fonts/Dyslexie_Italic_173026.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face{
  font-family: "Dyslexie";
  src: url("../nc_assets/fonts/Dyslexie_Bold_Italic_173026.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* =========================
   Global / Base
   ========================= */
:root{
  --jamit-purple: #82008F;
  --jamit-dark-gray: #4A4D55;
  --jamit-green: #96F447;
  --jamit-teal: #00DAC8;
  --jamit-pink: #FF009F;

  --jamit-light-gray: #B0B0B0;

  --a11y-track-off: #B0B0B0;
  --a11y-thumb-off: #4A4D55;

  --a11y-track-on: var(--jamit-purple);
  --a11y-thumb-on: var(--jamit-green);
}

html{
  scroll-padding-top: var(--nav-h, 74px);
}

body{
  font-family: "Poppins", "Montserrat", "Roboto", Arial, sans-serif;
  color: #111;
  background: #fff;

  /* Push page content down under fixed navbar */
  padding-top: var(--nav-h, 74px);
}

/* Page header shift (not index) */
body:not(.index-page) main > header{
  padding-top:30px;
}

/* Dyslexia mode: font only */
body.dyslexie-font,
body.dyslexie-font *{
  font-family: "Dyslexie", "Poppins", "Montserrat", "Roboto", Arial, sans-serif !important;
}

/* =========================
   Utilities (existing site classes)
   ========================= */
.background-color-pure-white { background-color: #fff; }
.bottom-border-gray { border-bottom: 1px solid #d0d0d0; }
.right-margin-xl { margin-right: 18px; }
.right-margin-xl-5 { margin-right: 24px; }

.color-pure-white { color: #FFF !important; }
.color-pure-black { color: #000 !important; }
/* Matrix mode: override "pure black" links so they are readable */
body.matrix-mode a.color-pure-black {
  color: #00ff66 !important;
}

.border-circle { border-radius: 50%; }

.all-margin-no { margin: 0 !important; }
.all-padding-no { padding: 0 !important; }

.left-margin-lg { margin-left: 15px; }
.top-padding-xl-5 { padding-top: 30px; }
.bottom-margin-lg { margin-bottom: 25px; }

.font-size-15 { font-size: 15px; }

/* =========================
   Navbar
   ========================= */
.navbar{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
  min-height: 74px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.navbar .navbar-brand{
  display: flex;
  align-items: center;
}

.navbar .navbar-brand img{
  max-height: 200px;
  height: auto;
}

/* Ensure hamburger icon visible */
.navbar-toggler{
  border: 1px solid rgba(0,0,0,0.15);
}

.navbar-toggler-icon{
  background-image: var(--bs-navbar-toggler-icon-bg);
}

/* Your spacing trims (kept) */
.navbar .navbar-brand{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* =========================
   NAV LINKS
========================= */

/* =========================
   GLOBAL LINK COLORS (match navbar)
   ========================= */

/* Default (light theme) */
a:not([class*="color-"]):not(.btn){
  color: var(--jamit-dark-gray);
  text-decoration: underline;
}

a:not([class*="color-"]):not(.btn):visited{
  color: var(--jamit-dark-gray);
}

a:not([class*="color-"]):not(.btn):hover,
a:not([class*="color-"]):not(.btn):active,
a:not([class*="color-"]):not(.btn):focus{
  color: var(--jamit-purple);
  text-decoration: underline;
}

/* Dark theme: mirror navbar (white links) */
body.dark-theme a{
  color: #fff;
}
body.dark-theme a:visited{
  color: #fff;
}
body.dark-theme a:hover,
body.dark-theme a:active,
body.dark-theme a:focus{
  color: var(--jamit-purple);
}

/* Matrix mode: mirror navbar (green, no underline) */
body.matrix-mode a,
body.matrix-mode a:visited,
body.matrix-mode a:hover,
body.matrix-mode a:active,
body.matrix-mode a:focus{
  color: #00ff66;
  text-decoration: none;
}


/* Default links */
.navbar .nav-link{
  font-size: 20px;
  color: var(--jamit-dark-gray);
  text-decoration: underline;
  font-weight: 500;
}

/* Hover */
.navbar .nav-link:hover{
  color: var(--jamit-purple);
  text-decoration: underline;
}

/* Active page */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"]{
  color: var(--jamit-purple) !important;
  font-weight: 800;
  text-decoration: underline;
}

.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"]{
  color: var(--jamit-purple) !important;
  font-weight: 800;
  text-decoration: underline;
}

/* In Matrix Mode, nav links should not look like normal links */
body.matrix-mode .navbar .nav-link,
body.matrix-mode .navbar .nav-link:hover,
body.matrix-mode .navbar .nav-link.active,
body.matrix-mode .navbar .nav-link[aria-current="page"]{
  color: #00ff66 !important;
  text-decoration: none !important;
}

/* Right controls container (if used) */
.nav-right-controls{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* =========================
   Accessibility button + menu
   ========================= */
.a11y-wrap{
  position: relative;
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
}

.a11y-btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  color: #111;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.a11y-btn:hover{
  background: rgba(0,0,0,0.04);
}

.a11y-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 260px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
  border-radius: 14px;
  padding: 12px 12px;
  z-index: 9999;
  display: none;
}

.a11y-menu.open{
  display: block;
}

.a11y-menu-title{
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 8px;
}

.a11y-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
}

.a11y-label{
  font-size: 14px;
  font-weight: 700;
  color: #111;
}

.a11y-label-dyslexie{
  font-family: "Dyslexie", sans-serif !important;
}

.a11y-label-normal{
  font-family: inherit !important;
}

/* Switch */
.a11y-switch{
  position: relative;
  display: inline-flex;
  width: 56px;
  height: 30px;
  align-items: center;
}

.a11y-switch input{
  opacity: 0;
  width: 0;
  height: 0;
}

.a11y-slider{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--a11y-track-off);
  transition: 0.2s ease;
  cursor: pointer;
}

.a11y-slider:before{
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 3px;
  top: 3px;
  border-radius: 999px;
  background: var(--a11y-thumb-off);
  transition: 0.2s ease;
}

.a11y-switch input:checked + .a11y-slider{
  background: var(--a11y-track-on);
}

.a11y-switch input:checked + .a11y-slider:before{
  transform: translateX(26px);
  background: var(--a11y-thumb-on);
}

/* =========================
   Dark mode (site)
   ========================= */
body.dark-theme{
  background: #0f1114;
  color: #f2f2f2;
}

body.dark-theme .navbar{
  background: linear-gradient(180deg, #3f424a 0%, #1e2026 100%);
}

body.dark-theme .navbar .nav-link,
body.dark-theme .navbar .navbar-brand,
body.dark-theme .navbar .navbar-brand span{
  color: #fff !important;
}

body.dark-theme .a11y-btn{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  color: #fff;
}

body.dark-theme .a11y-menu{
  background: #11151a;
  border-color: rgba(255,255,255,0.14);
  color: #fff;
}

body.dark-theme .a11y-label{
  color: #fff;
}

/* =========================
   Matrix mode
   ========================= */
body.matrix-mode{
  background: #000;
  color: #00ff66;
}

body.matrix-mode .navbar,
body.matrix-mode .navbar *{
  background: #000 !important;
  border-bottom: 1px solid rgba(0,255,102,0.35);
}

body.matrix-mode .a11y-menu{
  background: rgba(0,0,0,0.92);
  border-color: rgba(0,255,102,0.35);
  box-shadow: 0 0 30px rgba(0,255,102,0.20);
}

body.matrix-mode .a11y-btn{
  background: rgba(0,0,0,0.75);
  border-color: rgba(0,255,102,0.35);
}

/* Dyslexia overrides matrix font (font only) */
body.matrix-mode.dyslexie-font,
body.matrix-mode.dyslexie-font *{
  font-family: "Dyslexie", "Poppins", Arial, sans-serif !important;
}

/* =========================
   Blue Pill UI
   ========================= */
.blue-pill-wrap{
  margin-left: 10px;
  display: inline-flex;
  align-items: center;
}

.blue-pill-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 22px;
  border-radius: 999px; /* pill shape */
  border: 1px solid rgba(255,255,255,0.25);

  color: #ffffff; /* never green */
  font-weight: 700;
  letter-spacing: 0.2px;

  background: linear-gradient(180deg,
    #7fb6ff 0%,
    #2f7bff 45%,
    #0f45d8 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -8px 14px rgba(0,0,0,0.25),
    0 10px 24px rgba(0,0,0,0.35);

  cursor: pointer;
  user-select: none;
  text-decoration: none;
}

.blue-pill-btn:hover{
  filter: brightness(1.05);
}

/* Quote overlay */
#blue-pill-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

#blue-pill-overlay.open{
  display: flex;
}

#blue-pill-quote{
  font-size: 22px;
  font-weight: 700;
  color: #fff !important;
  text-align: center;
  max-width: 820px;
  padding: 24px;
}

/* =========================
   Matrix confirm overlay
   ========================= */
#matrixConfirmOverlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.88);
  z-index: 99998;
  display: none;
  align-items: center;
  justify-content: center;
}

#matrixConfirmOverlay.open{
  display: flex;
}

.matrix-confirm-box{
  background:#000;
  border:1px solid #00ff66;
  border-radius:0;
  box-shadow:none;
  padding:20px;
  font-family: "Courier New", monospace;
}

.matrix-confirm-title,
.matrix-confirm-text{
  color:#00ff66;
}

.matrix-confirm-actions button{
  background:#000;
  color:#00ff66;
  border:1px solid #00ff66;
  font-family:"Courier New", monospace;
}

.matrix-confirm-actions button:hover{
  background:#003300;
}


.matrix-yes-btn{
  background: transparent;
  color: #00ff66;
  border: 2px solid #00ff66;
  border-radius: 4px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}
.matrix-yes-btn:hover{
  background: rgba(0,255,102,0.12);
}

.matrix-no-btn{
  background: transparent;
  color: rgba(0,255,102,0.8);
  border: 2px solid rgba(0,255,102,0.5);
  border-radius: 4px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
}
.matrix-no-btn:hover{
  background: rgba(0,255,102,0.06);
}

/* =========================
   Social icon baseline + footer alignment (Fix #4)
   ========================= */
.social{
  background: transparent !important;
}

/* Vertically center the footer columns like the JAM-IT logo column */
footer.container-fluid .row.d-flex{
  align-items: center;
}

footer.container-fluid .row.d-flex > div{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Right/footer-icons column: center contents horizontally */
footer.container-fluid .row.d-flex > div:last-child{
  align-items: center;
}

/* Footer social icons: always side-by-side */
.footer-social{
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
}

.footer-social a{
  display: inline-flex;
}


/* =========================
   Hero text on dark/photo backgrounds (Fix #5)
   - any top-level main header that starts with bg-* will render white text
   ========================= */
/* Only force white text on contact page hero */
body.contact-page main > header{
  color:#fff;
}


main > header[class^="bg-"] *,
main > header[class*=" bg-"] *{
  color: inherit;
}

/* =========================================================
   Mobile navbar stacking (portrait phones)
   Desired order:
   1) Hamburger (right)
   2) Accessibility (center, below hamburger)
   3) Blue Pill (center, below accessibility) - ABOUT US only, Matrix Mode only
========================================================= */
@media (max-width: 575.98px){

  .navbar .container-fluid{
    display:flex;
    flex-wrap:wrap;
  }

  .navbar .navbar-toggler{
    order:1;
    margin-left:auto;
  }

  .navbar .a11y-wrap{
    order:2;
    flex:0 0 100%;
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:8px;
  }

  #bluePillWrap{
    order:3;
    flex:0 0 100%;
    width:100%;
    display:none;
    justify-content:center;
    margin-top:8px;
  }

  body.matrix-mode #bluePillWrap{
    display:flex;
  }

  .navbar .navbar-collapse{
    order:4;
    flex:0 0 100%;
  }
}

.blue-pill-btn{
  color:#ffffff !important;
}

/* Matrix mode: keep the Blue Pill BLUE (navbar global background rule is very aggressive) */
body.matrix-mode .blue-pill-btn{
  background: linear-gradient(180deg,
    #7fb6ff 0%,
    #2f7bff 45%,
    #0f45d8 100%
  ) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
}

footer .row{
  align-items:center;
}

body.matrix-mode footer,
body.matrix-mode footer a,
body.matrix-mode footer p,
body.matrix-mode footer h3{
  color:#00ff66 !important;
}
body.matrix-mode #a11yMenu,
body.matrix-mode #a11yMenu *{
  color:#00ff66 !important;
}

/* slider when ON */
body.matrix-mode .a11y-switch input:checked + .a11y-slider{
  background:#008f3a !important;
  box-shadow:0 0 6px rgba(0,255,102,0.6);
}