/* Shared with the finished CooliceHost site: type, contrast, surfaces and motion. */
:root {
  color-scheme: dark;
  --ch-font-sans: 'Manrope Variable', 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ch-font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  --ch-radius-card: .85rem;
  --ch-radius-control: 999px;
  --ch-bg: #02070c;
  --ch-surface: #07131b;
  --ch-surface-raised: #0c1c28;
  --ch-surface-strong: #102633;
  --ch-text: #edf7fc;
  --ch-heading: #edf7fc;
  --ch-text-muted: #e2ebf1;
  --ch-muted: var(--ch-text-muted);
  --ch-link: #7fcdf5;
  --ch-accent: #7fcdf5;
  --ch-accent-strong: #0877b5;
  --ch-border: #253e4e;
  --ch-border-strong: #45687e;
  --ch-focus: #36baff;
  --ch-shadow-card: none;
}
html[data-theme="light"] {
  color-scheme: light;
  --ch-bg: #f4f8fb;
  --ch-surface: #fff;
  --ch-surface-raised: #edf4f8;
  --ch-surface-strong: #e1edf4;
  --ch-text: #0b2637;
  --ch-heading: #0b2637;
  --ch-text-muted: #344d5d;
  --ch-link: #086a9f;
  --ch-accent: #086a9f;
  --ch-accent-strong: #0877b5;
  --ch-border: #cadbe5;
  --ch-border-strong: #8eabbc;
  --ch-focus: #086a9f;
  --ch-shadow-card: none;
}
body.ch-blog-redesign {
  background-color: var(--ch-bg) !important;
  color: var(--ch-text) !important;
  font-family: var(--ch-font-sans) !important;
  font-size: 16px;
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.ch-blog-redesign .btPageWrap,
body.ch-blog-redesign .btContentWrap,
body.ch-blog-redesign .btContentHolder { background-color: var(--ch-bg); color: var(--ch-text); }
body.ch-blog-redesign :where(h1,h2,h3,h4,h5,h6,.header,.btText,.btArticleContent,.btArticleBody,.btSinglePostContent,.btBtn,.btBox,.widget,input,textarea,select,button) { font-family: var(--ch-font-sans); }
/* Keep the parent's icon font families on sIcon, btIco, etc. */
body.ch-blog-redesign :where(h1,h2,h3,h4,h5,h6) { color: var(--ch-heading); letter-spacing: -.035em; font-weight: 580; }
body.ch-blog-redesign :where(h1) { font-weight: 560; }
body.ch-blog-redesign :where(h2) { font-weight: 520; }
body.ch-blog-redesign :where(a) { color: var(--ch-link); }
body.ch-blog-redesign :where(a,button,input,select,textarea) { -webkit-tap-highlight-color: rgb(127 205 245 / 16%); }
body.ch-blog-redesign :where(a,button,input,select,textarea,[tabindex]):focus-visible { outline: 2px solid var(--ch-focus) !important; outline-offset: 4px; }
body.ch-blog-redesign ::selection { color: #fff; background: #0877b5; }
html[data-theme="light"] body.ch-blog-redesign ::selection { color: #082c42; background: #b9e7fc; }
body.ch-blog-redesign :where(img,video) { max-width: 100%; }
body.ch-blog-redesign .ch-skip-link { position: fixed; top: 8px; left: 12px; z-index: 1000001; padding: 10px 18px; color: #fff; background: #0877b5; border-radius: 8px; transform: translateY(-180%); }
body.ch-blog-redesign .ch-skip-link:focus { transform: none; }
body.ch-blog-redesign #ch-main-content { scroll-margin-top: 120px; }

/* Builder sections keep their columns, editorial order and authored media. */
body.ch-blog-redesign .btContent .boldSection.btLightSkin {
  color: var(--ch-text);
  background-color: var(--ch-bg);
}
body.ch-blog-redesign .btContent section.boldSection[style*="#F5F6FA" i] {
  color: var(--ch-text);
  /* The historical builder background-color is inline !important. */
  background-image: linear-gradient(var(--ch-surface-raised), var(--ch-surface-raised)) !important;
  box-shadow: none !important;
  border-block: 0;
}
body.ch-blog-redesign .btContent .header :is(h1,h2,h3,h4,h5,h6),
body.ch-blog-redesign .btPageHeadline .header :is(h1,h2,h3,h4,h5,h6) {
  color: var(--ch-heading);
  font-family: var(--ch-font-sans);
  font-weight: 580;
  line-height: 1.25;
  letter-spacing: -.035em;
}
body.ch-blog-redesign .btContent .header h1,
body.ch-blog-redesign .btPageHeadline .header h1 { font-weight: 560; }
body.ch-blog-redesign .btContent .header h2,
body.ch-blog-redesign .btPageHeadline .header h2 { font-weight: 520; }
body.ch-blog-redesign .btContent .header .btSubTitle {
  color: var(--ch-text-muted);
  font-family: var(--ch-font-sans);
  font-weight: 400;
  line-height: 1.75;
}
body.ch-blog-redesign .btContent .header .btSuperTitle {
  color: var(--ch-accent);
  font: 500 .75rem/1.7 var(--ch-font-mono);
  letter-spacing: .12em;
}
body.ch-blog-redesign .btContent .header .dash::after { border-color: var(--ch-accent); }
body.ch-blog-redesign .btPageHeadline {
  color: var(--ch-text);
  background-color: var(--ch-surface-raised);
  border-bottom: 0;
}
body.ch-blog-redesign .btPageHeadline .header h1 {
  font-size: clamp(2rem, 1.4rem + 2.7vw, 4rem);
  overflow-wrap: anywhere;
}
body.ch-blog-redesign .btPageHeadline :is(.btSubTitle,.btBreadCrumbs) {
  color: var(--ch-text-muted);
  font: 450 .8125rem/1.8 var(--ch-font-sans);
}
body.ch-blog-redesign .btPageHeadline a { color: var(--ch-link); }
/* Photographic article headers remain a dark island in either appearance. */
body.ch-blog-redesign .btPageHeadline.wBackground.btBackgroundOverlay {
  --ch-heading: #f5fafc;
  --ch-text: #edf7fc;
  --ch-text-muted: #becfda;
  --ch-link: #7fcdf5;
  --ch-accent: #7fcdf5;
  --ch-focus: #80d9ff;
  color: var(--ch-text);
  background-color: #02070c;
}
body.ch-blog-redesign .btAboutAuthor .aaTxt a[style*="#0800ff" i] { color: var(--ch-link) !important; }
body.ch-blog-redesign .btContent .header-box {
  --ch-bg: #02070c;
  --ch-surface: #07131b;
  --ch-surface-raised: #0c1c27;
  --ch-text: #edf7fc;
  --ch-heading: #f5fafc;
  --ch-text-muted: #becfda;
  --ch-link: #7fcdf5;
  --ch-accent: #7fcdf5;
  --ch-border: #253e4e;
  --ch-focus: #80d9ff;
  /* The same atmospheric gradient as the main site's secondary heroes. */
  background-color: #02070b;
  background-image:
    linear-gradient(180deg, transparent 0%, rgb(2 7 11 / 12%) 28%, rgb(2 7 11 / 76%) 72%, #02070b 100%),
    radial-gradient(ellipse 20rem 7rem at 50% -1.5rem, rgb(233 253 255 / 70%) 0%, rgb(149 223 233 / 28%) 45%, transparent 100%),
    radial-gradient(ellipse 80% 110% at 52% -35%, #347b82 0%, #1a4956 48%, transparent 82%),
    linear-gradient(105deg, #192823 0%, #112c3b 50%, #152624 100%);
  border-bottom: 0;
  padding-bottom: clamp(2rem,4vw,4rem);
}
body.ch-blog-redesign .btContent .header-box .home-main-slider {
  color: var(--ch-text);
  background: var(--ch-surface);
}
body.ch-blog-redesign .btContent .btText {
  color: var(--ch-text);
  font-family: var(--ch-font-sans);
  line-height: 1.8;
}
body.ch-blog-redesign .btContent .btBtn {
  border-radius: var(--ch-radius-control) !important;
  font-family: var(--ch-font-sans);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
body.ch-blog-redesign .btContent .btBtn :is(a,.btnInnerText) {
  font-family: var(--ch-font-sans);
  font-size: .9375rem !important;
  line-height: 1.5;
  font-weight: 600;
  text-transform: none;
}
body.ch-blog-redesign .btContent .btBtn.btnFilledStyle {
  color: #fff !important;
  background: #0877b5 !important;
  border: 2px solid #0877b5 !important;
}
body.ch-blog-redesign .btContent .btBtn.btnFilledStyle a { color: inherit !important; }
body.ch-blog-redesign .btContent .btBtn.btnFilledStyle:is(:hover, :focus-within) { background: #066493 !important; border-color: #066493 !important; }
body.ch-blog-redesign .btContent .btBtn.btnOutlineStyle {
  color: var(--ch-link) !important;
  background: transparent !important;
  border: 2px solid var(--ch-border-strong) !important;
}
body.ch-blog-redesign .btContent .btBtn.btnOutlineStyle a { color: inherit !important; }
body.ch-blog-redesign .btContent .btBtn.btnOutlineStyle:is(:hover, :focus-within) { color: #fff !important; background: #0877b5 !important; border-color: #0877b5 !important; }
body.ch-blog-redesign .btContent .btBtn a { transition: color .18s ease, background-color .18s ease; }
body.ch-blog-redesign :where(input[type="checkbox"],input[type="radio"]) { accent-color: #0877b5; }

/* Existing migration popup: retain its image, links and trigger settings. */
body.ch-blog-redesign #pum-4922 .pum-container {
  border: 1px solid var(--ch-border);
  border-radius: var(--ch-radius-card);
  background-color: var(--ch-surface);
  color: var(--ch-text);
  box-shadow: var(--ch-shadow-card);
}
body.ch-blog-redesign #pum-4922 .pum-close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: 1px solid #0877b5;
  border-radius: 50%;
  background: #0877b5;
  color: #fff;
  box-shadow: none;
  font: 500 24px/1 var(--ch-font-sans);
  text-shadow: none;
}
body.ch-blog-redesign #pum-4922 .pum-close:hover { background: #066493; border-color: #066493; }

/* No new whole-page opacity gate; the content does not wait on fonts or scripts. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  body.ch-blog-redesign *, body.ch-blog-redesign *::before, body.ch-blog-redesign *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
  body.ch-blog-redesign { color: #182d3c !important; background: #fff !important; }
  body.ch-blog-redesign :where(.ch-header-controls,.ch-back-to-top,.ch-skip-link) { display: none !important; }
  body.ch-blog-redesign .btArticleBody { color: #182d3c !important; }
}
