@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 entries are peers: current-page and hover states must not move them.
   Override the theme's negative margin, active font enlargement, and persistent
   active background. Only hover or keyboard focus highlights an entry. */
body header .navnav > ul > li > ul > li > a,
body header .navnav > ul > li > ul > li.active > a {
  margin-left: 0;
  padding: 0.3rem 2rem 0.3rem calc(2rem + 1ch);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.80rem;
  font-weight: 400;
  letter-spacing: 0.3px;
  color: #475569 !important;
  background-color: transparent !important;
}

body.mobilemenu header .navnav > ul > li > ul > li > a,
body.mobilemenu header .navnav > ul > li > ul > li.active > a {
  padding: 0.5rem 2rem 0.5rem calc(5rem + 1ch);
  font-size: 1.15rem;
  font-weight: 400;
  color: white !important;
}

body header .navnav > ul > li > ul > li > a:hover,
body header .navnav > ul > li > ul > li.active > a:hover,
body header .navnav > ul > li > ul > li > a:focus-visible,
body header .navnav > ul > li > ul > li.active > a:focus-visible,
body.mobilemenu header .navnav > ul > li > ul > li > a:hover,
body.mobilemenu header .navnav > ul > li > ul > li.active > a:hover,
body.mobilemenu header .navnav > ul > li > ul > li > a:focus-visible,
body.mobilemenu header .navnav > ul > li > ul > li.active > a:focus-visible {
  color: #0284c7 !important;
  background-color: #eff6ff !important;
}

/* Use the existing left padding for the current-page check without shifting text. */
body header .navnav > ul > li > ul > li > a {
  position: relative;
}

header .nav-current-marker {
  position: absolute;
  left: 0.25rem;
  width: 1rem;
  text-align: center;
  font-weight: 600;
}

body.mobilemenu header .nav-current-marker {
  left: 3.25rem;
}

/* 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 ------------------------*/