/* Circuits DIY — "Datasheet Hub look" overrides (loaded after app.css and home.css).
   Wide, left-aligned content in a 1600px container with a 16px gutter (Customizer:
   Layout → Page width), Inter at 15px (Typography → Base text size), 700-weight
   headings, a 14px medium-weight menu and a 150px logo — the values Datasheet Hub uses. */

/* Container gutter: 16px like Datasheet Hub (was 20–32px). */
.cd4 .max-w-site { padding-left: 16px !important; padding-right: 16px !important; }
@media (min-width: 1024px) { .cd4 .max-w-site { padding-left: 20px !important; padding-right: 20px !important; } }

/* Header: logo 150px wide, menu 14px / 500. */
.cd4 .hx-header .hx-logo { max-width: 150px; max-height: 40px; width: auto; height: auto; }
.cd4 .hx-nav { margin-left: 20px; }
.cd4 .hx-nav > .bh-menu { gap: 2px; }
.cd4 .hx-nav > .bh-menu > .bh-menu__item > .bh-menu__link { font-size: 14px; font-weight: 500; padding: 10px 12px; letter-spacing: 0; }
.cd4 .hx-nav .bh-submenu .bh-menu__link { font-size: 14px; font-weight: 400; }
@media (min-width: 1024px) and (max-width: 1180px) { .cd4 .hx-nav > .bh-menu > .bh-menu__item > .bh-menu__link { padding: 10px 8px; } }
.cd4 .hx-dnav .bh-menu__link { font-size: 15px; font-weight: 500; }

/* Headings: Inter 700, no stretched or extra-bold display type. */
.cd4 h1, .cd4 h2, .cd4 h3, .cd4 h4 { font-stretch: normal !important; letter-spacing: -0.01em; }
.cd4 .font-extrabold, .cd4 .font-black { font-weight: 700 !important; }
.cd4 .hx-t-post, .cd4 .hx-t-band { font-size: clamp(24px, 4vw, 34px) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; }
.cd4 .hx-t-hero { font-weight: 700 !important; letter-spacing: -0.02em !important; }
.cd4 .hx-t-section { font-size: clamp(20px, 2.2vw, 24px) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; }
.cd4 .hx-t-discussion { font-size: 22px !important; font-weight: 700 !important; }

/* Article and page text: 15px, 1.7 line height, full width of the container. */
.cd4 .cd-prose { font-size: 15px !important; line-height: 1.7 !important; max-width: none; }
.cd4 .cd-prose h2 { font-size: 1.4em !important; font-weight: 700 !important; letter-spacing: -0.01em !important; }
.cd4 .cd-prose h3 { font-size: 1.15em !important; font-weight: 700 !important; }
.cd4 .cd-prose h4 { font-size: 1.02em !important; font-weight: 700 !important; }
.cd4 .cd-prose table { font-size: 14px !important; }
.cd4 .cd-prose pre { font-size: 13px !important; }
.cd4 .cd-lede { font-size: 16px !important; line-height: 1.6 !important; }

/* Cards and lists follow the smaller base size. */
.cd4 .hx-card h3, .cd4 .cd5-card h3 { font-weight: 600 !important; }

/* ── Category icons (inc/cat-icons.php) ── */
.cd4 .cd-cico { width: 18px; height: 18px; flex: none; color: var(--cd-primary-ink); }
.cd4 .cd5-chip { gap: 6px; }
.cd4 .cd5-chip .cd-cico, .cd4 .hx-chip .cd-cico { width: 15px; height: 15px; }
.cd4 .hx-chip { gap: 6px; display: inline-flex; align-items: center; }
.cd4 .cd5-hub__list a { align-items: center; justify-content: flex-start; }
.cd4 .cd5-hub__list a .cd-cico { width: 17px; height: 17px; }
.cd4 .cd5-hub__list a span { flex: 1; }
.cd4 .cd5-index--cards { columns: auto !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.cd4 .cd5-index--cards a { align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 14px 10px 10px; border: 1px solid rgb(var(--cd-line)); border-radius: 12px; background: rgb(var(--cd-raised)); color: rgb(var(--cd-ink)); font-size: 14px; font-weight: 600; transition: border-color .15s, box-shadow .15s, transform .15s; }
.cd4 .cd5-index--cards a:hover { border-color: var(--cd-primary); color: var(--cd-primary-ink); box-shadow: 0 12px 26px -20px rgba(15, 23, 42, .5); transform: translateY(-1px); }
.cd4 .cd5-index--cards a span { flex: 1; white-space: normal; line-height: 1.3; }
.cd4 .cd5-index--cards .cd-cico { width: 22px; height: 22px; padding: 9px; box-sizing: content-box; border-radius: 10px; background: var(--cd-primary-soft); box-shadow: inset 0 0 0 1px rgba(10, 100, 220, .14); }
.cd4 .cd5-index--cards em { font-weight: 500; }
.cd4 .cd-cathead__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--cd-primary-soft); box-shadow: inset 0 0 0 1px rgba(10, 100, 220, .14); }
.cd4 .cd-cathead__ico .cd-cico { width: 28px; height: 28px; }
@media (max-width: 639.98px) { .cd4 .cd5-index--cards { grid-template-columns: 1fr; } .cd4 .cd-cathead__ico { width: 44px; height: 44px; } .cd4 .cd-cathead__ico .cd-cico { width: 24px; height: 24px; } }

/* ── Image caps on the wide layout, remaining 800-weight titles ── */
.cd4 .hx-article > figure.mb-8, .cd4 article.w-full > figure.mb-8 { max-width: 960px; }
.cd4 .cd-prose img { max-width: min(100%, 960px); height: auto; }
.cd4 .cd-prose figure.wp-block-image, .cd4 .cd-prose .wp-block-image { max-width: 960px; margin-left: auto; margin-right: auto; }
.cd4 .cd-prose .wp-block-table, .cd4 .cd-prose table, .cd4 .cd-prose pre { max-width: 1100px; }
.cd4 .cd-lede { max-width: 80ch; }
.cd4 .cd5-hero__title { font-weight: 700 !important; letter-spacing: -0.02em !important; }
.cd4 .cd5-head__title, .cd4 .cd5-hub__title, .cd4 .cd5-list__title { font-weight: 700 !important; }

/* ── Post title card + heading tabs (inc/post-card.php) ── */
.cd4 .cd-pcard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 4px; padding: 24px; border: 1px solid rgb(var(--cd-line)); border-radius: 18px; background: rgb(var(--cd-raised)); box-shadow: 0 10px 30px -24px rgba(15, 23, 42, .35); }
@container cdpcard (min-width: 700px) { .cd4 .cd-pcard { grid-template-columns: minmax(0, 1fr) minmax(240px, 40%); gap: 28px; padding: 28px 30px; align-items: center; } .cd4 .cd-pcard--noimg { grid-template-columns: minmax(0, 1fr); } }
.cd4 .cd-pcard__main { min-width: 0; }
.cd4 .cd-pcard__cat { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; color: rgb(var(--cd-ink-2)); text-decoration: none; }
.cd4 .cd-pcard__cat:hover { color: var(--cd-primary-ink); }
.cd4 .cd-pcard__cat .cd-cico { width: 17px; height: 17px; }
.cd4 .cd-pcard__title { margin: 10px 0 0; font-size: clamp(24px, 3.4vw, 34px) !important; line-height: 1.2 !important; text-wrap: balance; }
.cd4 .cd-pcard__lede { margin: 12px 0 0; max-width: 75ch; font-size: 16px; line-height: 1.6; color: rgb(var(--cd-ink-2)); }
.cd4 .cd-pcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; font-size: 14px; color: rgb(var(--cd-muted)); }
.cd4 .cd-pcard__author { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.cd4 .cd-pcard__author:hover span { color: var(--cd-primary-ink); }
.cd4 .cd-pcard__m { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.cd4 a.cd-pcard__m:hover { color: var(--cd-primary-ink); }
.cd4 .cd-pcard__report { width: 100%; }
@media (min-width: 640px) { .cd4 .cd-pcard__report { width: auto; } }
.cd4 .cd-pcard__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cd4 .cd-pcard__media { margin: 0; display: grid; place-items: center; padding: 12px; border: 1px solid rgb(var(--cd-line)); border-radius: 14px; background: #fff; overflow: hidden; }
.cd4 .cd-pcard__media img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; border-radius: 8px; }
@container cdpcard (max-width: 699.98px) { .cd4 .cd-pcard { padding: 18px; } .cd4 .cd-pcard__media img { max-height: 280px; } }
.cd4 .cd-ptabs { display: flex; gap: 8px; margin-top: 16px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.cd4 .cd-ptabs::-webkit-scrollbar { display: none; }
@container cdpcard (min-width: 700px) { .cd4 .cd-ptabs { flex-wrap: wrap; overflow: visible; } }
.cd4 .cd-ptab { flex: none; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1px solid rgb(var(--cd-line)); border-radius: 999px; background: rgb(var(--cd-raised)); color: rgb(var(--cd-ink-2)); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.cd4 .cd-ptab:hover { border-color: var(--cd-primary); color: var(--cd-primary-ink); background: var(--cd-primary-soft); }
.dark .cd4 .cd-pcard__media, .cd4.dark .cd-pcard__media, .dark .cd-pcard__media { background: #fff; }
.cd4 .cd-pcard__author > :first-child { flex: none; width: 32px !important; height: 32px !important; border-radius: 999px; overflow: hidden; display: inline-grid; place-items: center; font-size: 12px; }
.cd4 .cd-pcard__author img { width: 32px !important; height: 32px !important; object-fit: cover; border-radius: 999px; }

/* Card in the middle column (between the sidebars); the band above it is left for ads. */
.cd4 .cd-pcard-wrap { container: cdpcard / inline-size; }
.cd4 .cd-phead { margin-bottom: 28px; min-width: 0; }
.cd4 .cd-phead nav[aria-label] { margin-bottom: 10px; }
.cd4 .cd-pcard__title { font-size: clamp(22px, 3vw, 30px) !important; }
.cd4 .cd-pcard__dates { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgb(var(--cd-line)); font-size: 14px; color: rgb(var(--cd-ink)); }
.cd4 .cd-pcard__date { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 600; }
.cd4 .cd-pcard__dl { font-weight: 400; color: rgb(var(--cd-muted)); }
.cd4 .cd-ptop .cd-widget { margin: 0; }

/* v3: wider title line, bigger image (no frame), full-width article, YouTube preview fill. */
.cd4 .cd-pcard__title { text-wrap: pretty; }
@container cdpcard (min-width: 700px) { .cd4 .cd-pcard { grid-template-columns: minmax(0, 1fr) minmax(220px, 42%); gap: 24px; padding: 24px; } }
.cd4 .cd-pcard__media { padding: 0; border: 0; background: none; border-radius: 12px; }
.dark .cd-pcard__media { background: none !important; }
.cd4 .cd-pcard__media img { max-height: 360px; border-radius: 12px; }
.cd4 .cd-article--wide { max-width: none; }
.cd4 .cd-prose .hx-yt img, .cd4 .hx-yt img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; margin: 0 !important; }
.cd4 .cd-prose .wp-block-embed, .cd4 .cd-prose .hx-yt { max-width: 960px; }

/* ── Footer, Datasheet Hub style: logo, about line, round social icons ── */
.cd4 .cd-foot__brand .hx-logo { max-width: 260px !important; max-height: none !important; width: 260px; height: auto; }
.cd4 .cd-foot__about { margin: 14px 0 0; max-width: 42ch; color: #94a3b8; font-size: 15px; line-height: 1.6; }
.cd4 .cd-foot__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cd4 .cd-foot__social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #cbd5e1; transition: background .15s, color .15s, transform .15s; }
.cd4 .cd-foot__social a:hover { background: var(--cd-primary); color: #fff; transform: translateY(-1px); }
.cd4 .cd-foot__social svg { width: 18px; height: 18px; }

/* ── Back to top, Datasheet Hub style: round brand-blue button ── */
.cd-totop { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: var(--cd-primary); box-shadow: 0 10px 24px -10px rgba(15, 23, 42, .55), 0 0 0 1px rgba(255, 255, 255, .25) inset; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s, background .15s; }
.cd-totop[data-show="true"] { opacity: 1; transform: none; pointer-events: auto; }
.cd-totop:hover { background: var(--cd-primary-hover, var(--cd-primary)); filter: brightness(.92); }
.cd-totop:focus-visible { outline: 3px solid var(--cd-primary-soft); outline-offset: 2px; }
.cd-totop svg { width: 20px; height: 20px; }
@media (max-width: 639.98px) { .cd-totop { right: 12px; width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .cd-totop { transition: none; } }
@media print { .cd-totop { display: none !important; } }

/* ── Home page: one grey dotted background, white cards on top ── */
body.is-home #hx-main { background-color: rgb(var(--cd-surface)); background-image: radial-gradient(rgb(var(--cd-line-2) / .55) 1px, transparent 1.3px); background-size: 18px 18px; }
body.is-home .cd5-hero, body.is-home .cd5-sec, body.is-home .cd5-sec--tint { background: transparent !important; }
body.is-home .cd5-hero::before { display: none; }
body.is-home .cd5-sec--tint, body.is-home .cd5-sec--line { border-top-color: transparent; border-bottom-color: transparent; }
body.is-home .cd5-hero { border-bottom-color: transparent; }