@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDarker: #1e282d;
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: rgba(38, 50, 56, 0.7);
    --borderMedium: rgba(38, 50, 56, 0.2);
    --borderLight: rgba(38, 50, 56, 0.075);
    --accent: #f4b500;
    --accentDarker: #e6ac00;
    --light: rgba(38, 50, 56, 0.035);
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {filter: contrast(0.11) sepia(1) hue-rotate(340deg) contrast(13)!important;}


/*------------------------ CSS overrides below ------------------------*/

/* _9394 */
.center-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.center-table {
  margin-left: auto;
  margin-right: auto;
  width: /* set a width other than 100% for this to work effectively */;
}

table {
  border-collapse: collapse;
  width: 100%; /* Optional, for full width tables */
}

th, td {
  border: 1px solid #ccc; /* Sets a 1px solid border with a light gray color */
  padding: 8px; /* Optional, adds spacing within cells */
  text-align: left; /* Optional, aligns text to the left */
}


/* _9394 */
.mybtn {
	padding: 5px 10px;
	font-weight: 700;
  font-size: small;
	color: #fff !important;
	white-space: pre-line;
	background: #2a2a2a;
}

/* _9394 */
.mybtn:hover {
	color: #fff;
	background: red;
}

/* _9394 */
.mybtn {
	transition: background-color .25s ease-out;
}

/*------------------------ nav redesign — remove block to revert ------------------------*/

/* Top-level links: monospace uppercase for tech-brand feel */
header .navnav > ul > li > a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-weight: 500;
  color: #0f172a;
}

/* Remove underlines from all nav items (active/hover) */
header .navnav > ul > li::after {
  display: none;
}

/* Blue chevron arrow on items with dropdown */
header .navnav > ul > li.haschildren > a::after {
  border-color: #0284c7;
}

/* Dropdown panel: slim blue top border, square top corners */
header .navnav > ul > li > ul {
  border-top: 2px solid #0284c7;
  border-radius: 0 0 6px 6px;
}

/* Dropdown item text: monospace, muted slate */
header .navnav > ul > li > ul li a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.80rem;
  letter-spacing: 0.3px;
  color: #475569;
}

/* Dropdown hover: blue text on light-blue bg — replaces orange */
header .navnav > ul > li > ul li a:hover,
header .navnav > ul > li > ul li.active a {
  color: #0284c7 !important;
  background-color: #eff6ff !important;
}

/* Keep the current Support item visually at the same hierarchy as its siblings.
   The theme otherwise enlarges any active item, which makes the next entry look
   like a child of the active one even though the HTML structure is correct. */
header .navnav > ul > li > ul > li.active > a {
  font-size: 0.80rem;
  font-weight: 600;
}

body.mobilemenu header .navnav > ul > li > ul > li.active > a {
  padding: 0.5rem 2rem 0.5rem 5rem;
  font-size: 1.15rem;
  font-weight: 600;
}

/* Logo tagline: prevent wrapping to two lines */
a.logo .has_subtitle span:last-child {
  white-space: nowrap;
}

/* Reserve the logo's full width, then begin the desktop menu beyond it. */
body:not(.mobilemenu) header > .container > div:first-child {
  flex: 0 0 18rem;
}

body:not(.mobilemenu) header > .container > div.nav {
  flex: 1 1 auto;
  margin-left: 5.5rem !important;
}

body:not(.mobilemenu) header > .container > div:last-child {
  flex: 0 0 0;
}

html { scroll-behavior: smooth; }
#meet-the-toolbox, #tools, #updates { scroll-margin-top: 110px; }

@media (max-width: 1100px) {
  header > .container > div.nav { margin-left: 0 !important; }
}

/*------------------------ end nav redesign ------------------------*/