/* ==========================================================================
   CB NOVA TECH — BASE
   Modern reset, typography, layout primitives, accessibility defaults.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;   /* stop iOS inflating text in landscape */
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor links must not land underneath the sticky header. */
  scroll-padding-top: calc(var(--cb-header-h) + var(--cb-sp-5));
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  margin: 0;
  font-family: var(--cb-font-body);
  font-size: var(--cb-fs-base);
  line-height: var(--cb-lh-body);
  letter-spacing: var(--cb-ls-body);
  color: var(--cb-ink);
  background-color: var(--cb-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
  /* Belt-and-braces against horizontal overflow anywhere on the site. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

/* Media defaults — the single most effective overflow prevention there is. */
img, picture, video, canvas, svg, iframe {
  display: block;
  max-width: 100%;
}
img, video { height: auto; }
img { border-style: none; background-repeat: no-repeat; background-size: cover; }
svg { fill: currentColor; }

input, button, textarea, select { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
textarea { resize: vertical; }

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--cb-border);
  margin: var(--cb-sp-7) 0;
}

/* --- Typography ----------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--cb-font-display);
  font-weight: var(--cb-fw-bold);
  line-height: var(--cb-lh-heading);
  letter-spacing: var(--cb-ls-heading);
  color: var(--cb-ink);
  /* Prevent long product names / URLs from blowing out narrow viewports. */
  overflow-wrap: break-word;
  text-wrap: balance;
}

h1 { font-size: var(--cb-fs-h1); line-height: var(--cb-lh-tight); letter-spacing: var(--cb-ls-hero); font-weight: var(--cb-fw-extra); }
h2 { font-size: var(--cb-fs-h2); font-weight: var(--cb-fw-bold); }
h3 { font-size: var(--cb-fs-h3); font-weight: var(--cb-fw-bold); }
h4 { font-size: var(--cb-fs-h4); font-weight: var(--cb-fw-semibold); line-height: var(--cb-lh-snug); }
h5 { font-size: var(--cb-fs-lg);  font-weight: var(--cb-fw-semibold); line-height: var(--cb-lh-snug); }
h6 { font-size: var(--cb-fs-base);font-weight: var(--cb-fw-semibold); line-height: var(--cb-lh-snug); }

p { overflow-wrap: break-word; text-wrap: pretty; }
p + p { margin-top: var(--cb-sp-4); }

strong, b { font-weight: var(--cb-fw-semibold); }
small { font-size: var(--cb-fs-sm); }
code, kbd, samp, pre { font-family: var(--cb-font-mono); font-size: 0.9em; }
code {
  background: var(--cb-mist-deep);
  padding: 0.15em 0.4em;
  border-radius: var(--cb-r-sm);
  color: var(--cb-navy-700);
}
pre {
  background: var(--cb-navy-900);
  color: var(--cb-on-dark);
  padding: var(--cb-sp-5);
  border-radius: var(--cb-r-lg);
  overflow-x: auto;   /* code scrolls in its own box — page never does */
  max-width: 100%;
}
pre code { background: none; color: inherit; padding: 0; }

blockquote {
  border-left: 3px solid var(--cb-cyan-500);
  padding-left: var(--cb-sp-5);
  font-size: var(--cb-fs-lg);
  line-height: var(--cb-lh-snug);
  color: var(--cb-ink);
}

a {
  color: var(--cb-blue-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--cb-dur-fast) var(--cb-ease);
}
a:hover { color: var(--cb-blue-700); }

/* --- Focus ---------------------------------------------------------------
   Visible, consistent, and never removed. :focus-visible keeps it off mouse
   users while guaranteeing it for keyboard users. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cb-focus);
  outline-offset: 3px;
  border-radius: var(--cb-r-sm);
}
/* On dark surfaces the cyan ring needs a light halo to stay visible. */
.cb-section--dark :where(a, button, [tabindex]):focus-visible {
  outline-color: var(--cb-cyan-300);
  box-shadow: 0 0 0 6px rgba(111, 220, 255, 0.18);
}

::selection { background: var(--cb-blue-600); color: #fff; }

/* --- Skip link ------------------------------------------------------------ */

.cb-skip-link {
  position: absolute;
  top: var(--cb-sp-3);
  left: var(--cb-sp-3);
  z-index: var(--cb-z-skiplink);
  padding: var(--cb-sp-3) var(--cb-sp-5);
  background: var(--cb-navy-800);
  color: #fff;
  font-weight: var(--cb-fw-semibold);
  border-radius: var(--cb-r-md);
  box-shadow: var(--cb-shadow-lg);
  transform: translateY(-160%);
  transition: transform var(--cb-dur-base) var(--cb-ease-out);
}
.cb-skip-link:focus { transform: translateY(0); color: #fff; }

/* --- Screen-reader-only --------------------------------------------------- */

.cb-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.cb-sr-only-focusable:focus,
.cb-sr-only-focusable:active {
  position: static !important;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  white-space: normal;
}

/* --- Layout primitives ---------------------------------------------------- */

.cb-container {
  width: 100%;
  max-width: var(--cb-container);
  margin-inline: auto;
  padding-inline: var(--cb-gutter);
}
.cb-container--wide { max-width: var(--cb-container-wide); }
.cb-container--text { max-width: var(--cb-container-text); }

.cb-section {
  position: relative;
  padding-block: var(--cb-section-y);
}
.cb-section--lg    { padding-block: var(--cb-section-y-lg); }
.cb-section--tight { padding-block: var(--cb-section-y-tight); }
.cb-section--flush-top    { padding-top: 0; }
.cb-section--flush-bottom { padding-bottom: 0; }

/* Section surface variants — drives the alternating rhythm required by the
   brief (white → mist → navy) without any per-page styling. */
.cb-section--light { background: var(--cb-surface); }
.cb-section--mist  { background: var(--cb-surface-alt); }
.cb-section--fade  { background: var(--cb-grad-fade); }

.cb-section--dark {
  background: var(--cb-grad-navy);
  color: var(--cb-on-dark);
  color-scheme: dark;   /* native form controls / scrollbars follow suit */
}
/* --------------------------------------------------------------------------
   Dark-surface text defaults.

   `.cb-on-dark` is applied to EVERY dark surface — the hero, inner page heroes,
   the CTA band and any .cb-section--dark. Grouping them means a new dark
   section can never be added without inheriting correct contrast, which is
   exactly the mistake that leaves brand-blue eyebrows sitting on navy at 1.7:1.
   -------------------------------------------------------------------------- */

.cb-section--dark,
.cb-hero,
.cb-pagehero,
.cb-cta,
.cb-footer { --cb-is-dark: 1; }

.cb-section--dark :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.cb-section--dark :where(p, li) { color: var(--cb-on-dark-muted); }

/* Links on dark. `:not(.cb-btn)` is essential: without it this rule wins over
   the button's own --btn-fg and paints light buttons cyan-on-white (1.57:1). */
.cb-section--dark a:not(.cb-btn),
.cb-hero a:not(.cb-btn),
.cb-pagehero a:not(.cb-btn),
.cb-cta a:not(.cb-btn) { color: var(--cb-cyan-300); }

.cb-section--dark a:not(.cb-btn):hover,
.cb-hero a:not(.cb-btn):hover,
.cb-pagehero a:not(.cb-btn):hover,
.cb-cta a:not(.cb-btn):hover { color: #fff; }

/* Hairline separators between same-coloured sections. */
.cb-section--edge-top    { border-top: 1px solid var(--cb-border); }
.cb-section--edge-bottom { border-bottom: 1px solid var(--cb-border); }
.cb-section--dark.cb-section--edge-top { border-top-color: var(--cb-border-dark); }

/* --- Grid ----------------------------------------------------------------
   auto-fit + minmax means cards reflow at ANY viewport width with no media
   queries and no possibility of overflow. min() guards the 320px case. */

.cb-grid { display: grid; gap: var(--cb-grid-gap); }
.cb-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.cb-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cb-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* Fixed-count grids where reflow order matters (e.g. numbered process). */
@media (min-width: 768px) {
  .cb-grid--2\@md { grid-template-columns: repeat(2, 1fr); }
  .cb-grid--3\@md { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .cb-grid--3\@lg { grid-template-columns: repeat(3, 1fr); }
  .cb-grid--4\@lg { grid-template-columns: repeat(4, 1fr); }
  .cb-grid--5\@lg { grid-template-columns: repeat(5, 1fr); }
}

/* Split layout: content + visual. Collapses to a single column below 960px. */
.cb-split {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 960px) {
  .cb-split { grid-template-columns: 1fr 1fr; }
  .cb-split--wide-left  { grid-template-columns: 1.15fr 0.85fr; }
  .cb-split--wide-right { grid-template-columns: 0.85fr 1.15fr; }
  /* Visually swap columns without changing DOM order (keeps reading order
     correct for screen readers and mobile). */
  .cb-split__media--first { order: -1; }
}

.cb-stack > * + * { margin-top: var(--cb-sp-4); }
.cb-stack--lg > * + * { margin-top: var(--cb-sp-6); }

.cb-flow > * + * { margin-top: var(--cb-sp-5); }

/* --- Utilities ------------------------------------------------------------ */

.cb-text-center { text-align: center; }
.cb-text-center .cb-section-head { margin-inline: auto; }
.cb-mx-auto { margin-inline: auto; }
.cb-measure { max-width: 62ch; }
.cb-measure--sm { max-width: 48ch; }
.cb-no-wrap { white-space: nowrap; }

.cb-hide { display: none !important; }
@media (max-width: 767px)  { .cb-hide\@sm { display: none !important; } }
@media (min-width: 768px)  { .cb-show\@sm-only { display: none !important; } }
@media (max-width: 1023px) { .cb-hide\@md { display: none !important; } }

/* --- WordPress core alignment / caption classes --------------------------- */

.alignleft  { float: left;  margin: 0 var(--cb-sp-5) var(--cb-sp-4) 0; }
.alignright { float: right; margin: 0 0 var(--cb-sp-4) var(--cb-sp-5); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption {
  font-size: var(--cb-fs-sm);
  color: var(--cb-ink-faint);
  margin-top: var(--cb-sp-2);
}
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sticky, .gallery-caption, .bypostauthor { /* required by WP theme review */ }

/* --- Print ---------------------------------------------------------------- */

@media print {
  .cb-header, .cb-footer, .cb-announce, .cb-mobile-cta, .cb-drawer,
  .cb-btn, .cb-section--cta { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .cb-section { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}