/*********** VARIABLES ************/
html[data-theme="auto"],
html[data-theme="light"],
:root {
    /* Palette URL: http://paletton.com/#uid=62W130knXnP64YpfOypu8f1+d6r */

    /* Main Primary color - greens */
    --color-primary-0: #238B46;
    --color-primary-1: #CAF9DA;
    --color-primary-2: #61C081; /* #99d8c9 nav */
    --color-primary-3: #055821; /* #00441b txt-on-fill */
    --color-primary-4: #00250D;

    /* Main Secondary color (1) - blues */
    --color-secondary-1-0: #303284;
    --color-secondary-1-1: #D0D2F9;
    --color-secondary-1-2: #6A6CB8;
    --color-secondary-1-3: #101253;
    --color-secondary-1-4: #000124;

    /* Main Secondary color (2) - yellows */
    --color-secondary-2-0: #BEBE30;
    --color-secondary-2-1: #FFFFCF;
    --color-secondary-2-2: #FFFF81; /* ticker txt */
    --color-secondary-2-3: #787807;
    --color-secondary-2-4: #333300;

    /* Main Complement color - reds */
    --color-complement-0: #BE4630; /* contact btn */
    --color-complement-1: #FFD6CF;
    --color-complement-2: #FF9581;
    --color-complement-3: #781807;
    --color-complement-4: #330800;

    --color-off-black: #121212;
    --color-off-white: white;
    --color-crt-txt: #5bf870;
    --color-crt-bg: #05321e;

    --bg-fill: var(--color-off-white);
    --bg-ticker: var(--color-primary-4); /* #238b45; */
    --txt-ticker: var(--color-secondary-2-2); /* #00441b;*/
    --bg-nav: var(--color-primary-2); /* #99d8c9; */
    --txt-nav: var(--color-primary-3); /* #00441b; */
    --nav-static-btn: var(--color-primary-3); /*#00441b;*/
    --color-pop: var(--bg-nav);
    --color-pop-hc: var(--color-off-white);
    --box-pop-bg: var(--bg-nav);
    --box-pop-txt: var(--txt-nav);
    --line-color: var(--txt-onfill);
    --line-pop: var(--txt-onfill);
    --button-pop-bg: var(--color-complement-0);
    --button-pop-txt: var(--color-off-white);
    --block-highlight: var(--color-off-black); /*#121212;*/
    --txt-onhighlight: var(--color-off-white); /*white;*/
    --bg-crt: var(--color-crt-bg);
    --txt-onfill: var(--color-primary-3); /*#00441b;*/
    --txt-crt: var(--color-crt-txt);
    --off: var(--color-off-black);
    --footer-bg: var(--color-primary-1);

	--term: "> ";
	--nav-height: 70px;
	--crt-height: 70px;
	--container-margin: 10px;
	--txt-onfill-invert: var(--txt-onfill);
	--ticker-cycle-length: 100s;
}

html[data-theme="dark"] {
    --bg-fill: var(--color-off-black);
    --bg-ticker: var(--color-primary-4); /* #238B46; */
    --txt-ticker: var(--color-secondary-2-2);

    --bg-nav: var(--color-primary-3); /* #99d8c9; */
    --txt-nav: var(--color-off-white); /* #00441b; */

    --nav-static-btn: var(--color-off-white);
    --color-pop: var(--color-secondary-2-2); /*#FFFDBF;*/
    --color-pop-hc: var(--color-pop);
    --box-pop-bg: var(--color-secondary-2-2); /* #FFFDBF;*/
    --box-pop-txt: var(--bg-fill);
    --line-color: var(--txt-onfill);
    --line-pop: var(--color-pop);
    --button-pop-bg: var(--color-complement-0);
    --button-pop-txt: var(--color-off-white);
    --block-highlight: var(--bg-fill);
    --txt-onhighlight: var(--txt-level2);
    --bg-crt: var(--color-crt-bg);
    --txt-onfill: var(--color-primary-1); /* #e5f5f9;*/
    --txt-level2: var(--color-primary-2);
    --txt-crt: var(--color-crt-txt);
    --off: var(--color-off-black); /*#050505; */
    --footer-bg: var(--color-primary-3);

	--term: "> ";
	--nav-height: 70px;
	--crt-height: 70px;
	--container-margin: 10px;
	--txt-onfill-invert: var(--txt-onfill);
}


/* ------------------ Navbar Core ------------------ */
nav {
  font-family: 'JetBrains Mono';
  font-size: 1.3rem;
  margin-bottom: 0px;
  width: 100%;
  text-transform: uppercase;
}

.navbar {
  --bs-navbar-padding-y: 0;
}

ul.navbar-nav {
  gap: 1em;
}

.navbar-nav > li > a,
.navbar-nav > li > a:hover,
.navbar-nav li a.active {
  font-family: 'JetBrains Mono';
  font-weight: 400;
  font-style: normal;
  line-height: 15px;
  color: var(--txt-nav);
}

.navbar-nav li a span {
  position: relative;
  padding-bottom: 0.2rem;
  font-size: 1rem;
}

.navbar-nav li a.active span::after {
  border-bottom: 2px solid var(--txt-nav);
  bottom: 0;
  content: "";
  left: 0;
  width: 100%;
  height: 1px;
  position: absolute;
}

/* ------------------ Navbar Buttons ------------------ */
.navbar-btns-container {
  display: flex;
  gap: 10px;
}

button.navbar-toggler,
button.theme-toggle {
  z-index: 10;
  --bs-btn-hover-bg: transparent;
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-color: var(--txt-nav);
}

.navbar-toggler {
  border: 0;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 0;
}

/* ------------------ Theme Toggle Icons ------------------ */
.theme-toggle svg {
  color: var(--txt-nav);
  display: none;
}

html[data-theme="auto"] .theme-toggle svg.theme-auto,
html[data-theme="light"] .theme-toggle svg.theme-light,
html[data-theme="dark"] .theme-toggle svg.theme-dark {
  display: block !important;
}

button#navbar-toggler svg,
button.theme-toggle svg {
  color: var(--nav-static-btn);
}

/* ------------------ Logo Filter ------------------ */
html[data-theme="light"] .navbar a.navbar-brand > img,
html[data-theme="auto"] .navbar a.navbar-brand > img {
  filter: brightness(0) saturate(100%) invert(15%) sepia(48%) saturate(2549%) hue-rotate(126deg) brightness(98%) contrast(103%);
}

/* ------------------ Responsive Behavior ------------------ */
@media (max-width: 991.98px) {
  .offcanvas-collapse {
    position: fixed;
    top: 56px;
    bottom: 0;
    left: 100%;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    overflow-y: auto;
    visibility: hidden;
    background-color: #343a40;
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
  }

  .offcanvas-collapse.open {
    visibility: visible;
    transform: translateX(-100%);
  }

  html[data-theme="auto"],
  html[data-theme="light"],
  html[data-theme="dark"] {
    --txt-nav: white;
  }
}

@media (min-width: 991.98px) {
  button#navbar-toggler {
    display: none;
  }
}


/* Container background and text color */
#navbar-ticker {
    background: var(--bg-ticker);
    color: var(--txt-ticker);
}

/* Viewport styling for ticker text */
.ticker-view-port {
    overflow: hidden;
    font-family: 'JetBrains Mono';
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
    color: var(--txt-ticker);
}

/* Ticker content blocks */
.ticker-content {
    flex: none;
    flex-shrink: 0;
}

/* Font Awesome icon before/after each ticker item */
div.ticker-content:first-child:before,
div.ticker-content:not(:last-child):after,
div.ticker-content:last-child:after {
    font: var(--fa-font-solid);
    content: "\f2dc"; /* Font Awesome icon */
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    text-align: center;
}

/* Ticker tape animation */
#ticker-tape {
    animation: ticker linear var(--ticker-cycle-length) infinite;
    padding-left: 100%;
    display: inline-flex;
    flex-wrap: nowrap;
    /* -webkit-flex-wrap: nowrap; */
    white-space: nowrap;
}

#ticker-tape:hover {
    animation-play-state: paused;
}

/* Keyframes for scrolling effect */
@keyframes ticker {
    0% { transform: translate3d(0%, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}