/* Technesium brand layer — matches technesium.com
   Measured from the live site (computed styles, not guessed):
     type    Plus Jakarta Sans, weights 300/400/500/600/700/800
     headings extrabold 800, pure black, sentence case, no letter-spacing
     colours navy #111C4E, teal #00AF9A, blue #416BA9, grey #F1F1F1
     layout  coloured full-bleed field with white rounded cards floating on it
   Plus Jakarta Sans is SIL OFL, so this is the real font, self-hosted — no external
   requests. Loaded AFTER technesium.css so it wins. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/jakarta-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/jakarta-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/jakarta-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/jakarta-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/jakarta-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/jakarta-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --tech-navy:  #111C4E;
  --tech-teal:  #00AF9A;
  --tech-blue:  #416BA9;
  --tech-grey:  #F1F1F1;
  --tech-ink:   #1a1a1a;
  --tech-head:  #000000;
  --tech-card:  18px;
  /* Teal #00AF9A is only 2.76:1 on white — fine as a FILL, fails as TEXT on the light
     card. This darker teal keeps the hue and clears 4.5:1 for text on light surfaces. */
  --tech-teal-ink: #00806F;
}

body, button, input, select, textarea,
.entry-content, .entry-title, .main-title, .site-description {
  font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

body { color: var(--tech-ink); }

/* --- the site's signature: white cards floating on a navy field ----------- */
body { background-color: var(--tech-navy); }

.site-content {
  /* GeneratePress never sets a global border-box, so without this max-width caps the
     CONTENT box and the card's real width is 1180 + 2x padding — which made the card
     full-bleed (no navy visible) from ~1265px all the way down to 901px. */
  box-sizing: border-box;
  background: #fff;
  border-radius: var(--tech-card);
  margin: 1.6rem auto 2.4rem;
  padding: 2.2rem 2.4rem 2.6rem;
  max-width: 1180px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.20);
}

/* #page carries .grid-parent (padding 0), so `margin:auto` alone gives no gutter.
   This guarantees a navy margin at every viewport width. */
#page { padding-inline: clamp(0.7rem, 2.5vw, 2rem); }

/* the field should not show through the theme's own wrappers */
#page, .site-main, .content-area { background: transparent; }

@media (max-width: 900px) {
  .site-content {
    margin: 0.9rem 0 1.4rem;
    padding: 1.4rem 1rem 1.8rem;
    border-radius: 14px;
  }
  /* The card already supplies the horizontal inset. The theme pads .inside-article a
     further 30px each side, which stacked to leave only a 239px reading column at 375px. */
  .separate-containers .inside-article { padding-left: 0; padding-right: 0; }
}

/* --- masthead: the site's navy band ------------------------------------- */
.site-header { background-color: var(--tech-navy) !important; }
.site-header .main-title a,
.site-header .main-title a:hover { color: #fff !important; }
.site-header .site-description { color: #9fb0d8 !important; }
.main-title { font-weight: 600; letter-spacing: 0.02em; }

/* --- nav: navy with a teal active/hover rail ---------------------------- */
.main-navigation,
.main-navigation ul ul { background-color: #0c1540 !important; }
.main-navigation .main-nav ul li a { font-weight: 500; letter-spacing: 0.02em; }
.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  background-color: var(--tech-teal) !important;
  color: #08231f !important;
}

/* --- links ---------------------------------------------------------------
   Text hovers on the light card use the darker teal (4.5:1+); the bright teal is kept
   for hovers that sit on the navy field, where it reads at 5.85:1. */
a { color: var(--tech-blue); }
a:visited { color: var(--tech-blue); }
a:hover, a:focus, a:active { color: var(--tech-teal-ink); }
.site-info a:hover, .site-info a:focus,
.site-header a:hover, .site-header a:focus { color: var(--tech-teal); }

/* the theme sets `outline:none` on several focus states — restore a visible,
   high-contrast focus ring (navy on white is 16:1) for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--tech-navy);
  outline-offset: 2px;
}
.site-header a:focus-visible,
.site-info a:focus-visible { outline-color: #fff; }

/* byline / category / tag links: the theme's INLINE style block outranks a bare `a`,
   so these have to be named explicitly or they keep the old grey-and-blue */
.entry-meta a { color: #55606e; }
.entry-meta a:hover, .entry-meta a:focus { color: var(--tech-teal-ink); }

/* homepage pick-lists: technesium.css's (0,2,2) rule outranks a bare a:hover */
.pick-list li a:hover, .pick-list li a:focus { color: var(--tech-teal-ink); }

/* --- headings ------------------------------------------------------------
   technesium.com sets every heading in Plus Jakarta Sans ExtraBold, pure black,
   sentence case, no letter-spacing, with tight leading on the large sizes. */
h1, h2, h3, h4, h5, h6,
.entry-title, .home-hero h1, .art-topic h2, .topic-name, .latest-title {
  font-family: "Plus Jakarta Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 800;
  color: var(--tech-head);
  letter-spacing: normal;
  text-transform: none;
}
h1, .home-hero h1 { line-height: 1.05; }
h2 { line-height: 1.15; }
h3, h4, h5, h6 { line-height: 1.25; }

.entry-content h2, .entry-content h3 { font-weight: 800; color: var(--tech-head); }

/* headings that sit on a dark field stay white */
.site-header h1, .site-header .main-title,
.site-info h1, .site-info h2, .site-info h3 { color: #fff; }

/* article titles are links — keep them black, teal on hover, like the site's black type */
.entry-title a { color: var(--tech-head); }
.entry-title a:hover, .entry-title a:focus { color: var(--tech-teal-ink); }

/* Section headings carry their own classes, which outrank a bare h2. The site sets
   these in ExtraBold; small UI labels (counts, badges, card titles) stay at 700,
   which mirrors technesium.com's own hierarchy. */
.home-h, .art-topic h2, .subscribe h2, .home-hero h1 {
  font-weight: 800;
  color: var(--tech-head);
  letter-spacing: normal;
}

/* the site sets body copy in black, not grey — bring the leads in line */
.home-hero p, .subscribe > p { color: #33383f; }

/* --- landing page accents ------------------------------------------------*/
.start-n            { background: var(--tech-navy); }
.start-list a:hover { border-color: var(--tech-teal); background: #f2fbf9; }
.topic-tile         { border-left-color: var(--tech-teal); }
.topic-tile:hover   { background: var(--tech-navy); border-color: var(--tech-navy); }
.topic-name         { color: var(--tech-navy); }
/* shorthand FIRST — the other order silently reset the teal rail to pale mint */
.browse-all         { background: #f2fbf9; border-color: #bfe9e2; border-left-color: var(--tech-teal); }
.home-more          { border-top-color: var(--tech-teal); }

.art-topic h2       { border-bottom-color: var(--tech-teal); }
.art-jump a         { color: var(--tech-navy); }
.art-jump a:hover   { background: var(--tech-teal); border-color: var(--tech-teal); color: #08231f; }
/* the count badge was a translucent WHITE wash tuned for the old blue hover; on teal it
   dropped to 2.17:1, so flip it to the dark-on-teal scheme the pill now uses */
.art-jump a:hover span { background: rgba(8,35,31,0.16); color: #08231f; }
/* `.art-filter` is (0,1,0) and loses to the theme's `input[type="search"]` (0,1,1) */
input.art-filter {
  background: #fff; color: var(--tech-ink);
  border: 2px solid #cfd6de; border-radius: 6px;
}
input.art-filter:focus { border-color: var(--tech-teal); box-shadow: 0 0 0 3px rgba(0,175,154,0.18); }

.badge-new          { background: var(--tech-teal); color: #08231f; }
/* inherited #6b7280 on the #eef1f5 count pills was 4.27:1 — just under AA */
.art-jump a span, .topic-n, .art-count { color: #5a6472; }
.home-cadence       { color: #08231f; background: #e2f7f3; border-color: #a8e5db; }
.home-cadence .dot  { background: var(--tech-teal); box-shadow: 0 0 0 3px rgba(0,175,154,0.22); }

.sub-card           { border-left-color: var(--tech-teal); }
.sub-card:hover     { border-color: var(--tech-teal); background: #f2fbf9; }
.sub-card strong    { color: var(--tech-navy); }

/* --- contact form --------------------------------------------------------*/
.tech-contact button { background: var(--tech-teal); color: #08231f; font-weight: 600; }
.tech-contact button:hover, .tech-contact button:focus { background: #00998a; }
.tech-contact input:focus, .tech-contact textarea:focus {
  border-color: var(--tech-teal); box-shadow: 0 0 0 3px rgba(0,175,154,0.16);
}

/* --- buttons + footer ----------------------------------------------------*/
.read-more.button, a.button, button, input[type="submit"] {
  background-color: var(--tech-teal); color: #08231f; font-weight: 600;
}
.read-more.button:hover, a.button:hover, button:hover, input[type="submit"]:hover {
  background-color: #00998a; color: #08231f;
}
.site-info { background-color: var(--tech-navy); }
.site-info a:hover { color: var(--tech-teal); }

/* --- hero: what's new, right at the top ---------------------------------- */
.latest-strip {
  margin: 1.4em 0 0;
  padding: 1em 1.2em;
  background: #f4fbfa;
  border: 1px solid #bfe9e2;
  border-left: 5px solid var(--tech-teal);
  border-radius: 10px;
}
.latest-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #06695d;
}
.latest-flag .dot {
  width: 0.5em; height: 0.5em;
  background: var(--tech-teal);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0,175,154,0.22);
}
.latest-link {
  display: flex;
  align-items: baseline;
  gap: 0.65em;
  margin-top: 0.5em;
  text-decoration: none;
}
.latest-label {
  flex: 0 0 auto;
  padding: 0.12em 0.55em;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #08231f;
  background: var(--tech-teal);
  border-radius: 999px;
}
.latest-title {
  font-size: 1.22em;
  font-weight: 800;
  line-height: 1.25;
  color: var(--tech-head);
}
.latest-link:hover .latest-title { color: var(--tech-teal-ink); text-decoration: underline; }
.latest-next {
  margin: 0.6em 0 0;
  padding-top: 0.6em;
  border-top: 1px dashed #bfe9e2;
  font-size: 0.92em;
  color: #55606e;
}
.latest-next span {
  font-weight: 700;
  color: #06695d;
  margin-right: 0.35em;
}
@media (max-width: 560px) {
  .latest-link { flex-direction: column; gap: 0.3em; }
  .latest-title { font-size: 1.08em; }
}

/* --- header: one navy bar, logo left, nav right (matches technesium.com) --- */
.site-header { padding: 0 !important; }
.site-header .inside-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2em;
  flex-wrap: wrap;
  padding: 1.1em 2em !important;
  max-width: 1180px;
  margin: 0 auto;
}
/* .inside-header carries the theme's .grid-container, whose clearfix ::before/::after
   become FLEX ITEMS once this is display:flex — space-between then split the free space
   three ways and the logo never sat flush left (on mobile it was pushed hard right). */
.site-header .inside-header::before,
.site-header .inside-header::after { content: none; }
.site-branding { display: flex; flex-direction: column; gap: 0.15em; }
.main-title { margin: 0 !important; line-height: 1; }
.site-logo {
  display: block;
  height: 46px;
  width: auto;
  max-width: 100%;
}
.site-header .site-description {
  margin: 0 !important;
  font-size: 0.82em;
  letter-spacing: 0.02em;
  color: #8fa4d2 !important;
}

/* the nav now lives inside the header bar */
.site-header .main-navigation,
.site-header .main-navigation ul,
.site-header .main-navigation ul ul { background: transparent !important; }
.site-header .main-navigation { flex: 0 1 auto; }
.site-header .inside-navigation { padding: 0 !important; }
.site-header .main-navigation .main-nav ul { display: flex; gap: 0.2em; }
.site-header .main-navigation .main-nav ul li a {
  padding: 0.55em 1em;
  font-size: 0.94em;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #dbe4f7 !important;
  border-radius: 999px;
}
.site-header .main-navigation .main-nav ul li:hover > a,
.site-header .main-navigation .main-nav ul li[class*="current-menu-"] > a {
  background: var(--tech-teal) !important;
  color: #08231f !important;
}

@media (max-width: 900px) {
  /* stack: logo flush left on its own row, links wrapped underneath — matches how
     technesium.com puts the mark top-left on the navy field */
  .site-header .inside-header {
    padding: 0.9em 1.1em !important;
    gap: 0.55em;
    justify-content: flex-start;
  }
  .site-branding, .site-header .main-navigation { flex: 1 0 100%; }
  .site-logo { height: 34px; }
  .site-header .main-navigation .main-nav ul { flex-wrap: wrap; justify-content: flex-start; gap: 0.15em; }
  /* the theme hard-sets line-height:60px on nav links, which left a huge gap between
     wrapped rows and pushed the header to 239px before any content */
  .site-header .main-navigation .main-nav ul li a {
    padding: 0.4em 0.6em; font-size: 0.82em; line-height: 1.6;
  }
  .site-header .site-description { display: none; }
  /* brand.css deliberately keeps the nav visible and wrapped, so the theme's
     hamburger is redundant — and it is a no-op here anyway (no theme JS ships). */
  .site-header .main-navigation .menu-toggle { display: none !important; }
}