/* hmaslowski theme: dark scheme, header, hero, topic tiles, branded cards, footer, article. */
/* ---------- Dark scheme (overrides the theme.json palette) ---------- */
:root[data-scheme="dark"] {
--wp--preset--color--base: #0a0f1c;
--wp--preset--color--surface: #111a2e;
--wp--preset--color--ink: #e6ebf5;
--wp--preset--color--muted: #9aa7bf;
--wp--preset--color--line: #1f2a44;
--wp--preset--color--brand: #6c9cff;
--wp--preset--color--signal: #38d0e8;
--wp--preset--color--chip: #16223d;
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) {
--wp--preset--color--base: #0a0f1c;
--wp--preset--color--surface: #111a2e;
--wp--preset--color--ink: #e6ebf5;
--wp--preset--color--muted: #9aa7bf;
--wp--preset--color--line: #1f2a44;
--wp--preset--color--brand: #6c9cff;
--wp--preset--color--signal: #38d0e8;
--wp--preset--color--chip: #16223d;
color-scheme: dark;
}
}
/* Light buttons on the dark palette need dark text to stay readable. */
:root[data-scheme="dark"] :is(.wp-element-button, .wp-block-search__button, .wp-block-query-pagination .current) { color: #0a1430 !important; }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) :is(.wp-element-button, .wp-block-search__button, .wp-block-query-pagination .current) { color: #0a1430 !important; }
}
:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; }
img { height: auto; }
.screen-reader-text {
border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus { background: #fff; clip: auto !important; clip-path: none; color: #0d1526; display: block; height: auto; left: 5px; padding: 1rem; top: 5px; width: auto; z-index: 100000; }
/* ---------- Header ---------- */
.hm-header { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--on-navy); }
.hm-header__inner { padding-block: 0.85rem; gap: 1rem 1.5rem; }
.hm-header a { color: inherit; text-decoration: none; }
.hm-header a:hover { color: #fff; }
.hm-logo a { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 0.65rem; row-gap: 0.1rem; color: #fff; line-height: 1.1; }
.hm-logo a::after {
content: "Hubert Maslowski"; grid-column: 2; font-family: var(--wp--preset--font-family--body, inherit);
font-size: 0.74rem; font-weight: 500; letter-spacing: 0.03em; color: #8e9bb5;
}
.hm-logo a:hover::after { color: #b8c3d9; }
.hm-logo a::before {
content: "HM"; grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px;
background: linear-gradient(135deg, #2563eb, #22c3e6); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em;
}
/* Header accent: hero-like navy gradient, glowing bottom edge, glowing underline on menu items. */
.hm-header { position: relative; z-index: 10; background: radial-gradient(ellipse 50% 140% at 80% 0%, rgba(60, 110, 255, 0.18), transparent 60%), linear-gradient(180deg, #0a1638 0%, #06123a 100%) !important; }
.hm-header::after {
/* 1.6.6: full-width 3px accent stripe, same gradient as At a glance and the code windows. */
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none;
background: linear-gradient(90deg, #38d0e8, #6c9cff 55%, #5b3fb5);
box-shadow: 0 0 14px 0 rgba(56, 208, 232, 0.35);
}
.hm-logo a::before { box-shadow: 0 0 16px rgba(34, 195, 230, 0.45); }
.hm-header .wp-block-navigation-item__content { position: relative; padding-block: 0.35rem; }
.hm-header .wp-block-navigation-item__content::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
background: linear-gradient(90deg, #38d0e8, #6c9cff); box-shadow: 0 0 10px rgba(56, 208, 232, 0.7);
transform: scaleX(0); transition: transform 0.2s ease;
}
.hm-header .wp-block-navigation-item__content:hover::after,
.hm-header .wp-block-navigation-item__content:focus-visible::after,
.hm-header .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.hm-header .current-menu-item > .wp-block-navigation-item__content { color: #fff; }
@media (prefers-reduced-motion: reduce) { .hm-header .wp-block-navigation-item__content::after { transition: none; } }
.hm-header__end { gap: 1.25rem; }
.hm-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--navy); color: var(--wp--preset--color--on-navy); }
.hm-theme-toggle {
width: 36px; height: 36px; border-radius: 9px; border: 1px solid #2a3a62; background: transparent; color: inherit;
display: grid; place-items: center; cursor: pointer; padding: 0;
}
.hm-theme-toggle:hover { border-color: #4b5f8f; }
.hm-theme-toggle span {
width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor;
background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}
/* ---------- Hero ---------- */
.hm-hero { color: #fff; }
/* Left-align hero content on the 1200px grid instead of centring each block. */
.hm-hero.is-layout-constrained > * { margin-left: max(0px, calc((100% - 1200px) / 2)) !important; margin-right: auto !important; }
.hm-hero h1, .hm-hero .wp-block-heading { color: #fff; max-width: 18ch; text-wrap: balance; }
.hm-hero p { color: #c4d0e8; max-width: 56ch; font-size: 1.125rem; }
.hm-hero .wp-block-search { max-width: 760px; }
.hm-hero .wp-block-search__inside-wrapper {
background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 4px;
}
.hm-hero .wp-block-search__input { background: transparent; border: 0; color: #fff; font-size: 1.05rem; padding: 0.7rem 0.9rem; }
.hm-hero .wp-block-search__input::placeholder { color: #a9b7d3; }
.hm-hero .wp-block-search__button { margin-left: 0; border-radius: 9px; }
/* Home hero art: Higgsfield illustration (poster) with an optional slow looping video, faded into the navy on the left. */
.hm-hero--art { position: relative; overflow: hidden; isolation: isolate; background: #020c2f !important; }
.hm-hero.is-layout-constrained > .hm-hero-media { position: absolute; inset: 0 0 0 auto; width: min(68%, 1300px); margin: 0 !important; z-index: -1; pointer-events: none;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%); mask-image: linear-gradient(to right, transparent 0%, #000 38%); }
.hm-hero-video { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.hm-hero--art .hm-hero-kicker { color: #6fe3ff; font-size: 1.02rem; font-weight: 500; letter-spacing: 0.02em; margin-bottom: 0.4rem; opacity: 0.85; }
.hm-hero--art h1 { margin-top: 0; font-size: clamp(1.8rem, 2.8vw, 2.5rem) !important; line-height: 1.1; max-width: 24ch; }
@media (max-width: 781px) {
.hm-hero.is-layout-constrained > .hm-hero-media { width: 100%; opacity: 0.28; -webkit-mask-image: none; mask-image: none; }
}
.hm-archive-hero h1 { max-width: none; }
.hm-archive-hero .wp-block-term-description { margin: 0.6rem 0 0; max-width: 1200px; }
.hm-archive-hero .wp-block-term-description p { margin: 0; max-width: none; }
/* ---------- Topic tiles ---------- */
.hm-topics > * { margin: 0 !important; }
.hm-topics { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.85rem; }
.hm-topic {
background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 12px;
padding: 1.1rem; position: relative; transition: border-color 0.15s;
}
.hm-topic h3 { font-size: 1.05rem; margin: 0.6rem 0 0.3rem; }
.hm-topic h3 a { color: var(--wp--preset--color--ink); text-decoration: none; }
.hm-topic h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.hm-topic p { margin: 0; color: var(--wp--preset--color--muted); font-size: 0.95rem; line-height: 1.45; }
.hm-topic .hm-topic__mark {
--hm-accent: #22d3ee;
display: grid; place-items: center; width: 46px; height: 46px; border-radius: 10px; margin: 0;
background: #070d1f; color: var(--hm-accent); border: 1px solid color-mix(in srgb, var(--hm-accent) 40%, transparent);
box-shadow: 0 0 18px color-mix(in srgb, var(--hm-accent) 22%, transparent);
}
.hm-topic .hm-topic__mark svg { width: 34px; height: auto; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--hm-accent) 70%, transparent)); }
.hm-topic { overflow: hidden; }
.hm-topic .hm-topic__art { margin: -1.1rem -1.1rem 0 !important; background: #020617; }
.hm-topics .hm-topic { padding: 1.1rem 1.1rem 0.85rem; }
.hm-topics .hm-topic h3 { font-size: 1rem; margin: 0.75rem 0 0; }
.hm-topic .hm-topic__art img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 484; object-fit: cover; }
.hm-topic--security .hm-topic__mark { --hm-accent: #f472b6; }
.hm-topic--intune .hm-topic__mark { --hm-accent: #a78bfa; }
.hm-topic--mobile .hm-topic__mark { --hm-accent: #fbbf24; }
/* Platform chips (Categories block) */
.hm-chips ul, ul.hm-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.hm-chips li {
margin: 0; position: relative; background: var(--wp--preset--color--chip); color: var(--wp--preset--color--muted);
border-radius: 999px; padding: 0.25rem 0.8rem; font-size: 0.9rem;
}
.hm-chips li:hover { background: var(--wp--preset--color--brand); color: #fff; }
.hm-chips a { color: var(--wp--preset--color--ink); font-weight: 600; text-decoration: none; }
.hm-chips a::after { content: ""; position: absolute; inset: 0; border-radius: 999px; }
.hm-chips li:hover a { color: #fff; }
/* ---------- Post cards ---------- */
.hm-grid.wp-block-post-template { gap: 1.25rem; }
.hm-card {
background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 12px;
overflow: hidden; height: 100%; display: flex; flex-direction: column;
}
/* Hover/focus lift: post cards and topic tiles rise slightly with a soft neutral grey shadow (no blue glow; the colourful covers carry the colour). */
.hm-card, .hm-topic { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.hm-card:hover, .hm-card:focus-within, .hm-topic:hover, .hm-topic:focus-within {
transform: translateY(-4px);
box-shadow: 0 16px 32px -12px rgba(15, 23, 42, 0.28), 0 4px 10px -4px rgba(15, 23, 42, 0.12);
}
:root[data-scheme="dark"] :is(.hm-card, .hm-topic):is(:hover, :focus-within) { box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.6), 0 4px 10px -4px rgba(0, 0, 0, 0.4); }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) :is(.hm-card, .hm-topic):is(:hover, :focus-within) { box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.6), 0 4px 10px -4px rgba(0, 0, 0, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
.hm-card, .hm-topic { transition: box-shadow 0.2s ease, border-color 0.2s ease; }
.hm-card:hover, .hm-card:focus-within, .hm-topic:hover, .hm-topic:focus-within { transform: none; }
}
.hm-card__body { padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.hm-card .wp-block-post-title { font-size: 1.05rem; line-height: 1.3; margin: 0; }
.hm-card .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
/* 1.6.7: on hover the title stays dark and the card border turns a light neutral grey (Hubert: coloured border too much, dark grey too strong). */
:root { --hm-card-hover: #c3ccda; }
:root[data-scheme="dark"] { --hm-card-hover: #3a4a6b; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) { --hm-card-hover: #3a4a6b; } }
.hm-card:is(:hover, :focus-within) { border-color: var(--hm-card-hover); outline: 1px solid var(--hm-card-hover); }
.hm-card:hover .wp-block-post-title a { color: var(--wp--preset--color--ink); }
.hm-card .wp-block-post-date { color: var(--wp--preset--color--muted); font-size: 0.875rem; margin-top: auto; }
.hm-terms { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; }
.hm-terms a { color: var(--wp--preset--color--brand); background: var(--wp--preset--color--chip); padding: 0.1rem 0.55rem; border-radius: 999px; text-decoration: none; }
.hm-terms .wp-block-post-terms__separator { display: none; }
/* Branded thumbnail (generated in functions.php): neon line art on a dark grid. */
.hm-thumb {
--hm-accent: #22d3ee; --hm-accent2: #a78bfa;
position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 1200 / 630;
padding: 0.9rem 1rem; color: #fff; text-decoration: none; overflow: hidden; isolation: isolate;
background:
radial-gradient(120% 90% at 85% 100%, color-mix(in srgb, var(--hm-accent) 26%, transparent), transparent 60%),
radial-gradient(80% 70% at 0% 0%, color-mix(in srgb, var(--hm-accent2) 18%, transparent), transparent 60%),
#070d1f;
}
.hm-thumb--ai { --hm-accent: #34d399; --hm-accent2: #22d3ee; }
.hm-thumb--security { --hm-accent: #f472b6; --hm-accent2: #fb7185; }
.hm-thumb::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background-image:
linear-gradient(color-mix(in srgb, var(--hm-accent) 14%, transparent) 1px, transparent 1px),
linear-gradient(90deg, color-mix(in srgb, var(--hm-accent) 14%, transparent) 1px, transparent 1px);
background-size: 22px 22px;
mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}
.hm-thumb > span { position: relative; }
.hm-thumb__top { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.78rem; font-weight: 600; color: #c8d3ea; }
.hm-thumb__top span:first-child { color: var(--hm-accent); }
.hm-thumb__title {
font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1rem; line-height: 1.22;
max-width: 58%; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.hm-thumb__art {
position: absolute !important; right: 0.6rem; bottom: 0.5rem; width: 40%; color: var(--hm-accent);
filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hm-accent) 70%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--hm-accent) 35%, transparent));
}
.hm-thumb__art svg { display: block; width: 100%; height: auto; }
.hm-card .wp-block-post-featured-image { margin: 0; }
.wp-block-query-pagination { gap: 0.5rem; font-weight: 600; }
.wp-block-query-pagination a, .wp-block-query-pagination .current {
padding: 0.3rem 0.7rem; border-radius: 8px; border: 1px solid var(--wp--preset--color--line); text-decoration: none;
}
.wp-block-query-pagination .current { background: var(--wp--preset--color--brand); color: #fff; border-color: transparent; }
/* ---------- Footer ---------- */
.hm-footer { background: var(--wp--preset--color--surface); border-top: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--muted); font-size: 0.95rem; }
.hm-footer h2 { font-size: 0.85rem; text-transform: none; letter-spacing: 0; margin: 0 0 0.6rem; color: var(--wp--preset--color--ink); }
.hm-footer a { color: var(--wp--preset--color--muted); text-decoration: none; }
.hm-footer a:hover { color: var(--wp--preset--color--brand); }
.hm-footer ul:not(.wp-block-social-links) { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.hm-about { gap: 1rem; align-items: flex-start; }
.hm-about img, .hm-about .wp-block-image img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.hm-about .wp-block-image { margin: 0; flex: none; }
.hm-about p { margin: 0 0 0.75rem; max-width: 44ch; }
.hm-about .hm-about__cta a { color: var(--wp--preset--color--brand); font-weight: 600; }
.hm-footer .hm-social { gap: 0.5rem; margin-top: 0.25rem; }
.hm-footer .hm-social .wp-social-link { background: var(--wp--preset--color--chip); color: var(--wp--preset--color--ink); border-radius: 8px; }
.hm-footer .hm-social .wp-social-link a { color: inherit; padding: 0.45rem; }
.hm-footer .hm-social .wp-social-link:hover { background: var(--wp--preset--color--brand); color: #fff; }
.hm-footer__bottom { border-top: 1px solid var(--wp--preset--color--line); font-size: 0.875rem; }
/* Footer in the hero palette: deep navy with a faint grid and a glowing top edge (same in light and dark mode). */
.hm-footer {
position: relative; isolation: isolate; overflow: hidden;
background: radial-gradient(ellipse 60% 120% at 85% 0%, rgba(60, 110, 255, 0.22), transparent 60%), linear-gradient(180deg, #06123a 0%, #020c2f 100%) !important;
border-top: 0; color: #a9b7d3;
}
.hm-footer::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: linear-gradient(rgba(108, 156, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 156, 255, 0.07) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(180deg, transparent, #000 35%, #000 70%, transparent);
}
.hm-footer::after {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
background: linear-gradient(90deg, transparent, #38d0e8 30%, #6c9cff 60%, transparent);
box-shadow: 0 0 18px 1px rgba(56, 208, 232, 0.45);
}
.hm-footer h2 { color: #fff; }
.hm-footer a { color: #a9b7d3; }
.hm-footer a:hover { color: #fff; }
.hm-footer .hm-about__cta a { color: #7fb0ff; }
.hm-footer .hm-about img { box-shadow: 0 0 0 2px rgba(108, 156, 255, 0.5), 0 0 22px rgba(56, 208, 232, 0.25); }
.hm-footer .hm-social .wp-social-link { background: rgba(108, 156, 255, 0.12); color: #e6ebf5; border: 1px solid rgba(108, 156, 255, 0.25); }
.hm-footer .hm-social .wp-social-link:hover { background: var(--wp--preset--color--brand); color: #fff; }
.hm-footer__bottom { border-top-color: rgba(108, 156, 255, 0.18) !important; color: #8e9bb5; }
/* ---------- Article ---------- */
.hm-article .wp-block-post-content { font-size: 1.0625rem; }
.hm-article .wp-block-post-content > * + h2, .hm-article .wp-block-post-content > * + h3 { margin-top: 2.2rem; }
.hm-article .wp-block-post-content img { border-radius: 8px; border: 1px solid var(--wp--preset--color--line); }
.hm-article .wp-block-post-content figure { margin-inline: 0; }
.hm-article .wp-block-post-content pre, .hm-article .wp-block-post-content code {
font-family: var(--wp--preset--font-family--mono); font-size: 0.875em;
}
.hm-article .wp-block-post-content :not(pre) > code { background: var(--wp--preset--color--chip); padding: 0.1em 0.35em; border-radius: 4px; }
.hm-article .wp-block-post-content pre {
background: var(--wp--preset--color--navy); color: #dbe4f5; padding: 1rem 1.15rem; border-radius: 10px; overflow-x: auto;
}
/* Close-up screenshots (1.5.2): narrower, centred; click opens full size (lightbox.js) */
/* Screenshots (1.5.8): max ~720px, centred; full size via lightbox */
.hm-article .wp-block-post-content figure.wp-block-image:not(.is-hm-zoom) { max-width: 720px; margin-inline: auto; }
.hm-article .wp-block-post-content figure.wp-block-image img { width: auto; max-width: 100%; height: auto; display: block; margin-inline: auto; }
.hm-article .wp-block-post-content figure.is-hm-zoom { max-width: 60%; margin-inline: auto; }
@media (max-width: 700px) { .hm-article .wp-block-post-content figure.is-hm-zoom { max-width: 100%; } }
.hm-article .wp-block-post-content img.hm-zoomable { cursor: zoom-in; }
.hm-article .wp-block-post-content img.hm-zoomable:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; }
.hm-lightbox {
position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center;
padding: 3vh 3vw; background: rgba(6, 11, 28, .88); cursor: zoom-out;
}
.hm-lightbox.is-open { display: flex; }
.hm-lightbox img { max-width: 100%; max-height: 94vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); background: #fff; }
.hm-lightbox__close {
position: absolute; top: 14px; right: 18px; width: 40px; height: 40px; border-radius: 50%;
border: 1px solid rgba(255,255,255,.35); background: rgba(15,27,61,.8); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.hm-lightbox__close:focus-visible { outline: 2px solid #38d0e8; outline-offset: 2px; }
html.hm-lightbox-open { overflow: hidden; }
/* Code window (1.5.0): header bar with language label + Copy button, added by code-copy.js */
.hm-article .wp-block-post-content .hm-code {
margin-block: 1.6rem; border: 1px solid #22305a; border-radius: 12px; overflow: hidden;
background: #0b1430; box-shadow: 0 10px 24px -14px rgba(15,23,42,.45);
}
.hm-code__bar {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 0.45rem 0.6rem 0.45rem 1rem; background: #0f1b3d; position: relative;
}
.hm-code__bar::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: linear-gradient(90deg, #38d0e8, #6c9cff 60%, transparent);
opacity: .55;
}
.hm-code__lang { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; color: #b9c7e3; letter-spacing: 0.02em; }
.hm-code__copy {
font: 600 0.78rem/1 var(--wp--preset--font-family--body, inherit); color: #dbe4f5; cursor: pointer;
background: transparent; border: 1px solid #2c3d6b; border-radius: 6px; padding: 0.4rem 0.75rem;
transition: background-color .15s, border-color .15s, color .15s;
}
.hm-code__copy:hover { background: #1a2a55; border-color: #6c9cff; }
.hm-code__copy:focus-visible { outline: 2px solid #38d0e8; outline-offset: 2px; }
.hm-code__copy.is-copied { color: #38d0e8; border-color: #38d0e8; }
.hm-article .wp-block-post-content .hm-code pre.wp-block-code {
margin: 0; border: 0; border-radius: 0; background: transparent; color: #dbe4f5;
padding: 1rem 1.15rem 1.1rem; font-size: 0.86rem; line-height: 1.65; white-space: pre; tab-size: 4; overflow-x: auto;
}
.hm-article .wp-block-post-content pre.wp-block-code code { font-size: inherit; background: none; padding: 0; color: inherit; }
.hm-article .wp-block-post-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.hm-article .wp-block-post-content td, .hm-article .wp-block-post-content th { border: 1px solid var(--wp--preset--color--line); padding: 0.45rem 0.6rem; }
.hm-article .wp-block-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.hm-meta { color: var(--wp--preset--color--muted); font-size: 0.95rem; gap: 0.25rem 1rem; }
.hm-meta > * { margin: 0; }
.hm-post-nav a { text-decoration: none; font-weight: 600; }
/* Previous/next cards under an article: cover thumbnail + label + title; the older post sits left, the newer right. */
.hm-post-nav--cards {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
position: relative; margin-top: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--40);
}
/* Same glowing cyan-blue edge as under the header, thicker, separating the article from the cards. */
.hm-post-nav--cards::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 3px; pointer-events: none;
background: linear-gradient(90deg, transparent, #38d0e8 25%, #6c9cff 75%, transparent);
box-shadow: 0 0 18px 1px rgba(56, 208, 232, 0.45);
}
.hm-navcard {
display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 0.9rem; padding: 0.7rem;
background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 12px;
color: var(--wp--preset--color--ink); text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hm-navcard--next { grid-column: 2; grid-template-columns: minmax(0, 1fr) 128px; text-align: right; }
.hm-navcard--next .hm-thumb { order: 2; }
.hm-navcard .hm-thumb { border-radius: 8px; aspect-ratio: 16 / 9; padding: 0.5rem 0.6rem; }
.hm-navcard .hm-thumb__top, .hm-navcard .hm-thumb__title { display: none; }
.hm-navcard .hm-thumb__art { width: 46%; right: 50%; transform: translateX(50%); bottom: 18%; }
.hm-navcard__text { display: flex; flex-direction: column; gap: 0.3rem; }
.hm-navcard__label { color: var(--wp--preset--color--muted); font-size: 0.85rem; font-weight: 600; }
.hm-navcard__title { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 0.92rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.hm-navcard:hover, .hm-navcard:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 32px -12px rgba(15, 23, 42, 0.28), 0 4px 10px -4px rgba(15, 23, 42, 0.12); }
.hm-navcard:hover .hm-navcard__title, .hm-navcard:focus-visible .hm-navcard__title { color: var(--wp--preset--color--brand); }
@media (prefers-reduced-motion: reduce) { .hm-navcard:hover, .hm-navcard:focus-visible { transform: none; } }
@media (max-width: 700px) {
.hm-post-nav--cards { grid-template-columns: 1fr; }
.hm-navcard, .hm-navcard--next { grid-column: auto; grid-template-columns: 104px minmax(0, 1fr); text-align: left; }
.hm-navcard--next .hm-thumb { order: 0; }
}
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.hm-topics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.hm-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 1.11.47: 7th tile (Copilot) spans the last row instead of sitting alone */
.hm-topics .hm-topic--ai { grid-column: 1 / -1; }
.hm-topics .hm-topic--ai .hm-topic__art img { aspect-ratio: 720 / 400; }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
/* Breadcrumbs */
.hm-crumbs ol { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: 0.85rem; font-weight: 500; }
.hm-crumbs li + li::before { content: "\203A"; margin-right: 0.4rem; opacity: 0.6; }
.hm-crumbs a { color: inherit; text-decoration: none; }
.hm-crumbs a:hover, .hm-crumbs a:focus-visible { text-decoration: underline; }
.hm-hero .hm-crumbs { color: #9fb3d9; }
.hm-hero .hm-crumbs [aria-current] { color: #fff; }
.hm-article .hm-crumbs { color: var(--wp--preset--color--muted, #5b6478); }
.hm-article .hm-crumbs [aria-current] { display: inline-block; max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* About page */
.hm-aboutpage__intro { align-items: flex-start; }
.hm-aboutpage__lead { font-size: 1.25rem; line-height: 1.55; }
.hm-aboutpage__focus li { margin-bottom: 0.4rem; }
.hm-aboutpage__photo { text-align: center; }
.hm-aboutpage__photo .wp-block-image { margin: 0 auto 1rem; max-width: 240px; }
.hm-aboutpage__photo img { width: 240px; height: 240px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 6px var(--wp--preset--color--chip), 0 18px 40px rgba(2, 12, 47, 0.18); }
.hm-aboutpage__name { margin: 0 0 1rem; font-size: 0.95rem; line-height: 1.5; }
.hm-aboutpage__photo .wp-block-buttons { justify-content: center; }
.hm-certs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.hm-certs__group { border: 1px solid var(--wp--preset--color--line, rgba(127, 140, 170, 0.25)); border-radius: 14px; padding: 1.1rem 1.25rem; }
.hm-certs__issuer { margin: 0 0 0.6rem; font-size: 1rem; }
.hm-certs ul { margin: 0; padding-left: 1.1rem; font-size: 0.95rem; }
.hm-certs li { margin-bottom: 0.35rem; }
@media (max-width: 781px) {
.hm-certs { grid-template-columns: 1fr; }
.hm-aboutpage__photo { order: -1; }
}
/* Card cover: the post's unified original cover replaces the neon thumbnail when it has one. */
.hm-thumb--cover { padding: 0; background: #06123a; }
.hm-thumb--cover::before { display: none; }
.hm-thumb--cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: -1; }
.hm-thumb--cover .hm-thumb__top { position: absolute; top: 0.9rem; left: 1rem; right: 1rem; text-shadow: 0 1px 6px rgba(2,12,47,.9); }
/* Prerequisites table (1.5.5; 1.11.34 more compact rows, Hubert 2026-10-22): navy bar like the code window, light blue Area column, white middle, Docs buttons.
Markup: div.hm-prereq > div.hm-prereq__bar (h3.hm-prereq__title + span.hm-prereq__meta) + table.
Area cells: td.hm-pq-area.hm-pq-{licence|role|intune|entra|security|pki|device|vendor|network}; rows that continue a group: td.hm-pq-cont; docs cell: td.hm-pq-docs > a.hm-pq-doc */
:root { --hm-pq-area: #eef3fd; --hm-pq-area-line: #d9e3f7; --hm-pq-intune: #0369a1; --hm-pq-security: #b4233f; --hm-pq-entra: #5b2d91; }
:root[data-scheme="dark"] { --hm-pq-area: #16223d; --hm-pq-area-line: #22305a; --hm-pq-intune: #7dd3fc; --hm-pq-security: #f07a90; --hm-pq-entra: #b9a3f0; }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) { --hm-pq-area: #16223d; --hm-pq-area-line: #22305a; --hm-pq-intune: #7dd3fc; --hm-pq-security: #f07a90; --hm-pq-entra: #b9a3f0; }
}
.hm-article .wp-block-post-content .hm-prereq {
margin-block: 1.6rem; border: 1px solid #22305a; border-radius: 12px; overflow: hidden;
background: var(--wp--preset--color--surface); box-shadow: 0 10px 24px -14px rgba(15,23,42,.45);
}
.hm-prereq__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.45rem 0.8rem; background: #0f1b3d; position: relative; }
.hm-prereq__bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, #38d0e8, #6c9cff 60%, transparent); opacity: .55; }
.hm-article .wp-block-post-content .hm-prereq__title { display: flex; align-items: center; gap: 0.55rem; margin: 0; font: 600 0.95rem/1.2 var(--wp--preset--font-family--display); color: #dbe4f5; }
.hm-prereq__title::before { content: ""; width: 18px; height: 18px; flex: none; background: #38d0e8;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3 8-8M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3 8-8M20 12v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h9'/%3E%3C/svg%3E") center / contain no-repeat; }
.hm-article .wp-block-post-content .hm-prereq__bar p { margin: 0; }
.hm-prereq__meta { font: 500 0.72rem/1 var(--wp--preset--font-family--mono); color: #8fa3c9; letter-spacing: 0.02em; }
.hm-article .wp-block-post-content .hm-prereq table { display: table; width: 100%; border-collapse: collapse; margin: 0; font-size: 0.88rem; line-height: 1.35; overflow: visible; }
.hm-article .wp-block-post-content .hm-prereq th {
background: #0b1430; color: #dde6f6; text-align: left; font: 600 0.68rem/1 var(--wp--preset--font-family--body);
letter-spacing: 0.08em; text-transform: uppercase; padding: 0.32rem 0.7rem; border: 0; border-bottom: 1px solid #22305a;
}
.hm-article .wp-block-post-content .hm-prereq td { padding: 0.3rem 0.7rem; border: 0; border-top: 1px solid var(--wp--preset--color--line); vertical-align: middle; }
.hm-article .wp-block-post-content .hm-prereq tbody tr:first-child td { border-top: 0; }
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-cont { border-top: 1px dashed var(--wp--preset--color--line); }
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-area {
width: 6.4rem; white-space: nowrap; vertical-align: middle; background: var(--hm-pq-area); border-top-color: var(--hm-pq-area-line); border-right: 1px solid var(--hm-pq-area-line);
font: 600 0.8rem/1.2 var(--wp--preset--font-family--display); color: var(--wp--preset--color--muted);
}
.hm-pq-area::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 0.45rem; vertical-align: -2px; background: currentColor;
-webkit-mask: var(--hm-pq-icon) center / contain no-repeat; mask: var(--hm-pq-icon) center / contain no-repeat; }
.hm-pq-licence { --hm-pq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4zM8 9h8M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.hm-pq-role { --hm-pq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-intune { color: var(--hm-pq-intune); --hm-pq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18h10a4 4 0 0 0 .5-7.97A6 6 0 0 0 6 9.5 4.25 4.25 0 0 0 7 18z'/%3E%3C/svg%3E"); }
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-entra { color: var(--hm-pq-entra); --hm-pq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l9 5v10l-9 5-9-5V7zM12 12v10M3 7l9 5 9-5'/%3E%3C/svg%3E"); }
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-security { color: var(--hm-pq-security); --hm-pq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3C/svg%3E"); }
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-pki { color: var(--wp--preset--color--signal); --hm-pq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 10a4 4 0 1 0-1.2 2.8L21 21M17 17l2-2'/%3E%3C/svg%3E"); }
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-device { color: var(--wp--preset--color--signal); --hm-pq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v10H4zM2 19h20'/%3E%3C/svg%3E"); }
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-vendor { color: var(--wp--preset--color--signal); --hm-pq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5zM3 8v8l9 5 9-5V8M12 13v8'/%3E%3C/svg%3E"); }
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-network { color: var(--wp--preset--color--signal); --hm-pq-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM3 12h18M12 3c2.5 3 2.5 15 0 18M12 3c-2.5 3-2.5 15 0 18'/%3E%3C/svg%3E"); }
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-docs { width: 9rem; white-space: nowrap; }
/* 1.6.2: Docs buttons stacked, one per line, so the column stays narrow */
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-docs a.hm-pq-doc { display: flex; width: fit-content; margin: 0 0 0.22rem; }
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-docs a.hm-pq-doc:last-child { margin-bottom: 0; }
.hm-article .wp-block-post-content a.hm-pq-doc {
display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; line-height: 1.35; font-weight: 600; text-decoration: none; color: var(--wp--preset--color--brand);
border: 1px solid var(--hm-pq-area-line); background: var(--wp--preset--color--surface); border-radius: 6px; padding: 0 0.38rem; margin: 0 0.25rem 0.2rem 0;
}
.hm-article .wp-block-post-content a.hm-pq-doc:hover { border-color: var(--wp--preset--color--brand); }
.hm-pq-doc::after { content: ""; width: 11px; height: 11px; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5H5V6h5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5H5V6h5'/%3E%3C/svg%3E") center / contain no-repeat; }
.hm-pq-opt { display: inline-block; margin-left: 0.35rem; font: 600 0.68rem/1.4 var(--wp--preset--font-family--body); letter-spacing: 0.05em; text-transform: uppercase;
color: var(--wp--preset--color--muted); border: 1px solid var(--wp--preset--color--line); border-radius: 4px; padding: 0 0.3rem; vertical-align: 1px; }
@media (max-width: 600px) {
.hm-article .wp-block-post-content .hm-prereq thead { display: none; }
.hm-article .wp-block-post-content .hm-prereq :is(table, tbody, tr, td) { display: block; width: auto; }
.hm-article .wp-block-post-content .hm-prereq td { border-top: 0; border-right: 0; }
.hm-article .wp-block-post-content .hm-prereq tr { border-top: 1px solid var(--wp--preset--color--line); }
.hm-article .wp-block-post-content .hm-prereq tbody tr:first-child { border-top: 0; }
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-area { width: auto; padding: 0.4rem 0.8rem; border-right: 0; }
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-docs { width: auto; padding-top: 0; }
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-docs a.hm-pq-doc { display: inline-flex; margin: 0 0.25rem 0.2rem 0; }
.hm-article .wp-block-post-content .hm-prereq td.hm-pq-cont { border-top: 0; }
}
/* Post opening and guide route (1.5.6): Update box, lead, At a glance, "In this guide" line, numbered sections with a rail.
Markup: aside.hm-upd (p.hm-upd__head, ul, p.hm-upd__foot), p.hm-lead, dl.hm-glance > div > dt + dd (span.hm-chip),
h2.hm-step (main sections), h3.hm-sub (Configuration steps), p.hm-bridge. guide-route.js adds nav.hm-route-nav and wraps the sections in div.hm-route. */
:root { --hm-upd-bg: #e9f7fa; --hm-upd-line: #bfe6ee; --hm-upd-ink: #0b5f72; }
:root[data-scheme="dark"] { --hm-upd-bg: #0f2630; --hm-upd-line: #1d4652; --hm-upd-ink: #7fe0f0; }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) { --hm-upd-bg: #0f2630; --hm-upd-line: #1d4652; --hm-upd-ink: #7fe0f0; }
}
.hm-article .wp-block-post-content .hm-upd { margin-block: 0 1.4rem; padding: 0.85rem 1rem 0.9rem; background: var(--hm-upd-bg); border: 1px solid var(--hm-upd-line); border-radius: 12px; font-size: 0.95rem; line-height: 1.5; }
.hm-article .wp-block-post-content .hm-upd > * { margin-block: 0; }
.hm-article .wp-block-post-content .hm-upd > * + * { margin-top: 0.45rem; }
.hm-article .wp-block-post-content .hm-upd__head { display: flex; align-items: center; gap: 0.5rem; font: 600 0.88rem/1.2 var(--wp--preset--font-family--display); color: var(--hm-upd-ink); }
.hm-upd__head::before { content: ""; width: 17px; height: 17px; flex: none; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7'/%3E%3C/svg%3E") center / contain no-repeat; }
.hm-article .wp-block-post-content .hm-upd ul { padding-left: 1.15rem; display: grid; gap: 0.25rem; }
.hm-article .wp-block-post-content .hm-upd ul li { margin: 0; }
.hm-article .wp-block-post-content .hm-upd__foot { font-size: 0.85rem; color: var(--wp--preset--color--muted); }
.hm-article .wp-block-post-content .hm-lead { margin-block: 0 1.1rem; font-size: 1.16rem; line-height: 1.6; font-weight: 500; color: var(--wp--preset--color--ink, inherit); }
.hm-article .wp-block-post-content .hm-glance { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.9fr); margin: 0; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; background: var(--wp--preset--color--surface); overflow: hidden; box-shadow: 0 8px 22px -16px rgba(15,23,42,.35); }
.hm-article .wp-block-post-content .hm-glance::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, #38d0e8, #6c9cff 55%, #5b3fb5); }
.hm-article .wp-block-post-content .hm-glance.has-nav { border-radius: 12px 12px 0 0; box-shadow: none; }
.hm-article .wp-block-post-content .hm-glance > div { padding: 0.75rem 1rem 0.7rem; display: grid; gap: 0.4rem; align-content: start; min-width: 0; }
.hm-article .wp-block-post-content .hm-glance > div + div { border-left: 1px solid var(--wp--preset--color--line); }
.hm-article .wp-block-post-content .hm-glance dt { display: flex; align-items: center; gap: 0.4rem; font: 600 0.8rem/1 var(--wp--preset--font-family--display); color: var(--wp--preset--color--muted); }
.hm-glance dt::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; opacity: 0.8; -webkit-mask: var(--hm-gl-icon) center / contain no-repeat; mask: var(--hm-gl-icon) center / contain no-repeat; }
.hm-glance > div:nth-child(1) dt { --hm-gl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18v11H3zM8 20h8M12 16v4'/%3E%3C/svg%3E"); }
.hm-glance > div:nth-child(2) dt { --hm-gl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5zM3 8v8l9 5 9-5V8M12 13v8'/%3E%3C/svg%3E"); }
.hm-glance > div:nth-child(3) dt { --hm-gl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.1V12a10 10 0 1 1-5.9-9.1M22 4L12 14l-3-3'/%3E%3C/svg%3E"); color: #0b8f6a; }
.hm-article .wp-block-post-content .hm-glance dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; font-size: 0.95rem; line-height: 1.45; }
.hm-article .wp-block-post-content .hm-glance > div:nth-child(3) dd { font-weight: 600; }
.hm-chip { font: 600 0.76rem/1 var(--wp--preset--font-family--body); padding: 0.3rem 0.5rem; border-radius: 6px; background: var(--hm-pq-area); color: var(--wp--preset--color--brand); box-shadow: inset 0 0 0 1px var(--hm-pq-area-line); }
.hm-chip--intune { color: var(--hm-pq-intune); }
.hm-chip--security { color: var(--hm-pq-security); }
.hm-chip--pki, .hm-chip--vendor { color: var(--wp--preset--color--signal); }
.hm-chip--apple { color: var(--wp--preset--color--ink); }
.hm-article .wp-block-post-content .hm-route-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.35rem; margin: 0 0 2.2rem; padding: 0.45rem 1rem; box-shadow: 0 8px 22px -16px rgba(15,23,42,.35); border: 1px solid var(--wp--preset--color--line); border-top: 0; border-radius: 0 0 12px 12px; background: var(--hm-pq-area); font-size: 0.88rem; }
.hm-article .wp-block-post-content .hm-route-nav b { font: 600 0.78rem/1 var(--wp--preset--font-family--display); color: var(--wp--preset--color--muted); margin-right: 0.3rem; }
.hm-article .wp-block-post-content .hm-route-nav a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.5rem 0.2rem 0.2rem; border-radius: 999px; color: var(--wp--preset--color--ink); font-weight: 600; font-size: 0.86rem; text-decoration: none; }
.hm-article .wp-block-post-content .hm-route-nav a:hover, .hm-article .wp-block-post-content .hm-route-nav a:focus-visible { background: var(--wp--preset--color--surface); }
.hm-article .wp-block-post-content .hm-route-nav a + a::before { content: ""; width: 12px; height: 1px; margin: 0 0.2rem 0 -0.3rem; background: var(--wp--preset--color--muted); opacity: 0.5; }
.hm-article .wp-block-post-content .hm-route-nav .hm-n, .hm-step::before { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; flex: none; border-radius: 50%; background: #0f1b3d; color: #38d0e8; font: 600 0.72rem/1 var(--wp--preset--font-family--mono); }
.hm-article .wp-block-post-content { counter-reset: hm-step; }
.hm-article .wp-block-post-content h2.hm-step { position: relative; counter-increment: hm-step; counter-reset: hm-sub; display: flex; align-items: baseline; gap: 0.6rem; margin-block: 2.2rem 0.9rem; font-size: 1.6rem; scroll-margin-top: 5rem; }
.hm-step::before { content: counter(hm-step); align-self: center; }
.hm-step small { font: 400 0.95rem/1 var(--wp--preset--font-family--body); color: var(--wp--preset--color--muted); }
.hm-article .wp-block-post-content h3.hm-sub { counter-increment: hm-sub; margin-block: 1.8rem 0.7rem; font-size: 1.08rem; color: var(--hm-sub-ink); scroll-margin-top: 5rem; }
.hm-sub::before { content: counter(hm-step) "." counter(hm-sub) "\00a0\00a0"; color: inherit; font-family: var(--wp--preset--font-family--mono); font-size: 1em; }
.hm-article .wp-block-post-content .hm-bridge { color: var(--wp--preset--color--muted); }
/* The rail: guide-route.js wraps everything from the first numbered section in div.hm-route. */
.hm-route { position: relative; padding-left: 2.4rem; }
.hm-route::before { content: ""; position: absolute; left: 0.62rem; top: 2.6rem; bottom: 0.5rem; width: 2px; border-radius: 2px; background: linear-gradient(#38d0e8, #6c9cff 70%, var(--wp--preset--color--line)); opacity: 0.6; }
.hm-route > h2.hm-step:first-child { margin-top: 0; }
.hm-route > h2.hm-step:first-child + * { margin-top: 0; }
.hm-route h2.hm-step::before { position: absolute; left: -2.4rem; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; box-shadow: 0 0 0 5px var(--wp--preset--color--base); }
.hm-route h2.hm-step:first-child { margin-top: 0; }
@media (max-width: 600px) {
.hm-article .wp-block-post-content .hm-glance { grid-template-columns: 1fr; }
.hm-article .wp-block-post-content .hm-glance > div + div { border-left: 0; border-top: 1px solid var(--wp--preset--color--line); }
.hm-route { padding-left: 0; }
.hm-route::before { display: none; }
.hm-route h2.hm-step::before { position: static; transform: none; box-shadow: none; }
}
/* Article title (1.5.6): smaller than the theme's xx-large so long guide titles stay on two or three lines. */
.hm-article .wp-block-post-title { font-size: clamp(1.85rem, 1.25rem + 1.7vw, 2.45rem) !important; line-height: 1.15; letter-spacing: -0.015em; font-weight: 750; text-wrap: balance; }
/* At a glance, variant A "Kontrast" (1.6.0): navy box like the code windows, light "In this guide" bar below. */
:root { --hm-gl-bg: #0a1430; }
:root[data-scheme="dark"] { --hm-gl-bg: #13224a; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) { --hm-gl-bg: #13224a; } }
.hm-article .wp-block-post-content .hm-glance { background: var(--hm-gl-bg); color: #e6ecf8; border-color: var(--hm-gl-bg); grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.9fr); border-radius: 14px; box-shadow: 0 10px 26px -18px rgba(15,23,42,.55); }
.hm-article .wp-block-post-content .hm-glance::before { background: linear-gradient(90deg, #38d0e8, #6c9cff 55%, #8b6cf0); }
.hm-article .wp-block-post-content .hm-glance.has-nav { border-radius: 14px 14px 0 0; }
.hm-article .wp-block-post-content .hm-glance > div { padding: 1rem 1.1rem 0.95rem; gap: 0.55rem; }
.hm-article .wp-block-post-content .hm-glance > div + div { border-left-color: rgba(230,236,248,.12); }
.hm-article .wp-block-post-content .hm-glance dt { color: #38d0e8; font-size: 0.8rem; letter-spacing: 0.02em; }
.hm-article .wp-block-post-content .hm-glance > div:nth-child(3) dt { color: #5fe3b8; }
.hm-article .wp-block-post-content .hm-glance dd { color: #fff; }
.hm-article .wp-block-post-content .hm-glance > div:nth-child(3) dd { font-size: 1.02rem; }
.hm-glance .hm-chip { font-size: 0.8rem; padding: 0.36rem 0.6rem; border-radius: 7px; background: rgba(108,156,255,.18); box-shadow: inset 0 0 0 1px rgba(108,156,255,.5); color: #d6e3ff; }
.hm-glance .hm-chip--intune { background: rgba(56,189,248,.2); box-shadow: inset 0 0 0 1px rgba(56,189,248,.5); color: #d6f1ff; }
.hm-glance .hm-chip--pki, .hm-glance .hm-chip--vendor { background: rgba(56,208,232,.16); box-shadow: inset 0 0 0 1px rgba(56,208,232,.45); color: #bff3fb; }
.hm-glance .hm-chip--security { background: rgba(240,122,144,.18); box-shadow: inset 0 0 0 1px rgba(240,122,144,.5); color: #ffd3dc; }
.hm-glance .hm-chip--apple { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: #fff; }
.hm-article .wp-block-post-content .hm-route-nav { background: var(--wp--preset--color--surface); padding: 0.55rem 1.1rem; border-radius: 0 0 14px 14px; box-shadow: 0 10px 26px -18px rgba(15,23,42,.45); }
.hm-article .wp-block-post-content .hm-route-nav a:hover, .hm-article .wp-block-post-content .hm-route-nav a:focus-visible { background: var(--hm-pq-area); }
@media (max-width: 600px) { .hm-article .wp-block-post-content .hm-glance > div + div { border-top-color: rgba(230,236,248,.12); } }
/* Prerequisites table extras (1.6.1): second line in a row, copyable command, screenshot thumbnail in the Docs column. */
.hm-article .wp-block-post-content .hm-pq-note { display: block; margin-top: 0.3rem; font-size: 0.88rem; color: var(--wp--preset--color--muted); }
.hm-article .wp-block-post-content .hm-pq-note code { font-size: 0.85rem; }
.hm-pq-copy { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-left: 0.3rem; vertical-align: middle; padding: 0; border: 1px solid var(--hm-pq-area-line); border-radius: 6px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--muted); cursor: pointer; }
.hm-pq-copy::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--hm-copy-ic) center / contain no-repeat; mask: var(--hm-copy-ic) center / contain no-repeat;
--hm-copy-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='12' height='12' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E"); }
.hm-pq-copy:hover, .hm-pq-copy:focus-visible { color: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); }
.hm-pq-copy.is-done { color: #0b8f6a; border-color: #0b8f6a; }
.hm-pq-copy.is-done::before { --hm-copy-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
.hm-article .wp-block-post-content a.hm-pq-shot { position: relative; display: block; width: 76px; margin-top: 0.4rem; border-radius: 6px; cursor: zoom-in; }
.hm-article .wp-block-post-content a.hm-pq-shot img { display: block; width: 76px; height: 50px; object-fit: cover; object-position: left top; border-radius: 6px; border: 1px solid var(--hm-pq-area-line); }
.hm-article .wp-block-post-content a.hm-pq-shot::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 50%; background: #0a1430 center / 11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338d0e8' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E"); }
.hm-article .wp-block-post-content a.hm-pq-shot:hover img, .hm-article .wp-block-post-content a.hm-pq-shot:focus-visible img { border-color: var(--wp--preset--color--brand); }
/* 1.6.9: graphite header bar, HM tile in the same gradient as the bottom stripe. */
.hm-header { background: linear-gradient(180deg, #16181d 0%, #0e1013 100%) !important; color: #f1f3f7; }
.hm-header .wp-block-navigation__responsive-container.is-menu-open { background: #121418; color: #f1f3f7; }
.hm-logo a::before { background: linear-gradient(135deg, #38d0e8, #6c9cff 55%, #5b3fb5); box-shadow: 0 0 14px rgba(108, 156, 255, 0.35); }
/* 1.7.0: footer contact row, "Work with me" + LinkedIn text link with a small brand badge (replaces the lone social icon). */
.hm-about .hm-about__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; }
.hm-about__sep { width: 1px; height: 1rem; background: rgba(108, 156, 255, 0.3); }
.hm-about .hm-about__cta a.hm-li { display: inline-flex; align-items: center; gap: 0.45rem; }
.hm-li__badge { width: 22px; height: 22px; border-radius: 5px; flex: none; background: #0a66c2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zM9 9h3.8v1.7h.05c.53-1 1.83-2.05 3.77-2.05C20.6 8.65 21 11.2 21 14.4V21h-4v-5.8c0-1.4-.03-3.2-1.95-3.2-1.95 0-2.25 1.52-2.25 3.1V21H9z'/%3E%3C/svg%3E") center / 13px 13px no-repeat; }
/* 1.7.1: hero Search button in the logo/stripe gradient (deeper cyan start so white text stays readable). */
.hm-hero .wp-block-search.wp-block-search .wp-block-search__button { background: linear-gradient(135deg, #0b86a6, #4f6df5 55%, #5b3fb5) !important; color: #fff !important; border: 0; box-shadow: 0 0 16px rgba(108, 156, 255, 0.35); }
.hm-hero .wp-block-search.wp-block-search .wp-block-search__button:hover { filter: brightness(1.1); }
.hm-hero .wp-block-search.wp-block-search .wp-block-search__button:focus-visible { outline: 2px solid #38d0e8; outline-offset: 2px; }
/* 1.7.3: theme toggle shows where it takes you (moon in light mode, sun in dark mode) plus a tooltip from its aria-label. */
:root { --hm-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4 8 8 0 1 0 20 14.5z'/%3E%3C/svg%3E"); --hm-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); --hm-toggle-icon: var(--hm-moon); }
:root[data-scheme="dark"] { --hm-toggle-icon: var(--hm-sun); }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) { --hm-toggle-icon: var(--hm-sun); } }
.hm-theme-toggle { position: relative; border-color: rgba(241, 243, 247, 0.3); }
.hm-theme-toggle:hover { border-color: rgba(241, 243, 247, 0.6); }
.hm-theme-toggle span { width: 18px; height: 18px; border: 0; border-radius: 0; background: currentColor; -webkit-mask: var(--hm-toggle-icon) center / contain no-repeat; mask: var(--hm-toggle-icon) center / contain no-repeat; }
.hm-theme-toggle::after { content: attr(aria-label); position: absolute; top: calc(100% + 8px); right: 0; white-space: nowrap; background: #f1f3f7; color: #121418; font-size: 0.78rem; font-weight: 600; line-height: 1; padding: 6px 9px; border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; z-index: 20; }
.hm-theme-toggle:hover::after, .hm-theme-toggle:focus-visible::after { opacity: 1; transform: none; }
.hm-theme-toggle:focus-visible { outline: 2px solid #38d0e8; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hm-theme-toggle::after { transition: none; } }
/* 1.7.5 category banner, variant B: topic tile on the right with a glow in the topic colour */
.hm-archive-hero.hm-cat-hero { position: relative; overflow: hidden; background: radial-gradient(ellipse 45% 130% at 88% 50%, color-mix(in srgb, var(--hm-cat) 45%, transparent), transparent 70%), linear-gradient(180deg, #0b1a4a, #071338) !important; }
.hm-cat-hero > :not(.hm-cat-tile) { position: relative; z-index: 1; }
.hm-cat-tile { margin: 0; position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); right: max(var(--wp--preset--spacing--30), calc((100% - 1200px) / 2)); width: 190px; }
.hm-cat-tile img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
@media (min-width: 761px) { .hm-cat-hero > :not(.hm-cat-tile) { padding-right: 230px; box-sizing: border-box; } }
@media (max-width: 760px) { .hm-cat-tile { position: static; transform: none; width: 120px; margin-top: 1rem !important; } }
/* hybrid B + C: title underline in the topic colour */
.hm-cat-hero h1 { padding-bottom: 8px; background: linear-gradient(var(--hm-cat), var(--hm-cat)) left bottom / 56px 3px no-repeat; }
/* 1.7.6: header bar in the same navy as the in-post At a glance / What you need boxes (one dark colour across the blog). */
.hm-header { background: linear-gradient(180deg, #0a1430 0%, #071338 100%) !important; color: #f1f3f7; }
.hm-header .wp-block-navigation__responsive-container.is-menu-open { background: #0a1430; color: #f1f3f7; }
/* 1.7.7: ordinary content tables (figure.wp-block-table), soft navy frame, light blue header, horizontal lines only. */
:root { --hm-tb-edge: #b9c7e3; --hm-tb-head: #eef3fc; --hm-tb-head-ink: #0a1430; }
:root[data-scheme="dark"] { --hm-tb-edge: #2a3b66; --hm-tb-head: #13224a; --hm-tb-head-ink: #dbe4f5; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) { --hm-tb-edge: #2a3b66; --hm-tb-head: #13224a; --hm-tb-head-ink: #dbe4f5; } }
.hm-article .wp-block-post-content figure.wp-block-table { margin-inline: 0; border: 1px solid var(--hm-tb-edge); border-radius: 10px; overflow-x: auto; background: var(--wp--preset--color--surface); }
.hm-article .wp-block-post-content figure.wp-block-table table { display: table; width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.hm-article .wp-block-post-content figure.wp-block-table :is(th, td) { border: 0; border-top: 1px solid var(--wp--preset--color--line); padding: 0.6rem 0.9rem; text-align: left; }
.hm-article .wp-block-post-content figure.wp-block-table thead th { border-top: 0; border-bottom: 1px solid var(--hm-tb-edge); background: var(--hm-tb-head); color: var(--hm-tb-head-ink); font-family: var(--wp--preset--font-family--display, inherit); font-size: 0.92rem; font-weight: 700; }
.hm-article .wp-block-post-content figure.wp-block-table tbody tr:first-child td { border-top: 0; }
.hm-article .wp-block-post-content figure.wp-block-table tbody td:first-child { font-weight: 600; }
.hm-article .wp-block-post-content figure.wp-block-table thead { border: 0; }
/* 1.7.8: category banner starts right under the header stripe (no light gap). */
.wp-site-blocks > .hm-archive-hero.hm-cat-hero { margin-top: 0 !important; }
/* 1.7.9: "Explore by topic" tiles get a 4px bar in the topic colour under the picture (same colours as the category banners). */
.hm-topic--intune { --hm-cat: #4f8cff; } .hm-topic--windows { --hm-cat: #38bdf8; } .hm-topic--macos { --hm-cat: #9fb4d9; } .hm-topic--ios { --hm-cat: #7dd3fc; }
.hm-topic--android { --hm-cat: #3ddc84; } .hm-topic--security { --hm-cat: #f0506e; } .hm-topic--ai { --hm-cat: #a46bff; }
.hm-topics .hm-topic .hm-topic__art { border-bottom: 4px solid var(--hm-cat, transparent); }
/* 1.8.0 */ .hm-topic--intune { --hm-cat: #8b6cf0; }
/* 1.11.47 tiles 2026-10 */ .hm-topic--intune { --hm-cat: #38bdf8; } .hm-topic--windows { --hm-cat: #1e4fd8; } .hm-topic--ios { --hm-cat: #c7ccd4; }
/* 1.8.1 Output window: result of a command, no Copy button, quieter slate tone */
.hm-article .wp-block-post-content .hm-code.hm-code--output { background: #1b2233; border-color: #2e3850; box-shadow: none; }
.hm-code--output .hm-code__bar { background: #222a3d; min-height: 2.3rem; }
.hm-code--output .hm-code__bar::after { background: #3a4560; opacity: 1; }
.hm-code--output .hm-code__lang { color: #b9c7e3; }
.hm-article .wp-block-post-content .hm-code--output pre.wp-block-code { color: #c3cbdb; }
/* 1.8.3: content tables match the compact "What you need" table: navy frame and header, small font, low rows (Hubert 2026-10-16). */
.hm-article .wp-block-post-content figure.wp-block-table { border-color: #22305a; border-radius: 12px; box-shadow: 0 10px 24px -14px rgba(15,23,42,.45); }
.hm-article .wp-block-post-content figure.wp-block-table table { font-size: 0.92rem; line-height: 1.4; }
.hm-article .wp-block-post-content figure.wp-block-table :is(th, td) { padding: 0.38rem 0.8rem; vertical-align: middle; }
.hm-article .wp-block-post-content figure.wp-block-table thead th {
background: #0b1430; color: #dde6f6; border-bottom: 1px solid #22305a;
font: 600 0.68rem/1.25 var(--wp--preset--font-family--body); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 0.8rem;
}
.hm-article .wp-block-post-content figure.wp-block-table tbody td:first-child { font-weight: 500; }
.hm-article .wp-block-post-content figure.wp-block-table tbody td:first-child { background: var(--hm-pq-area); border-right: 1px solid var(--hm-pq-area-line); border-top-color: var(--hm-pq-area-line); font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--muted); font-weight: 600; font-size: 0.88rem; }
.hm-article .wp-block-post-content figure.wp-block-table td[style*="center"] { color: var(--wp--preset--color--brand); font-weight: 700; }
/* 1.8.4: lighter header text in prereq and content tables (Hubert 2026-10-16). */
/* 1.8.5: Windows Registry panel (Hubert 2026-10-16, variant 2): navy bar like the table header with the registry cubes, the key path and Copy; optional value table below. Bar built by code-copy.js from . */
.hm-article .wp-block-post-content .hm-reg {
margin-block: 1.4rem; border: 1px solid #22305a; border-radius: 12px; overflow: hidden;
background: var(--wp--preset--color--surface); box-shadow: 0 8px 20px -16px rgba(15,23,42,.35);
}
.hm-reg__bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem 0.45rem 0.9rem; background: #0b1430; position: relative; }
.hm-reg__bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, #38d0e8, #6c9cff 60%, transparent); opacity: .55; }
.hm-reg__ico { width: 18px; height: 18px; flex: none; }
.hm-reg__key { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-family: var(--wp--preset--font-family--mono); font-size: 0.84rem; line-height: 1.55; color: #e7eefb; }
.hm-reg__hive { color: #7fd9ec; font-weight: 600; }
.hm-reg__sep { color: #8fa3c9; }
.hm-reg__bar .hm-code__copy { flex: none; }
.hm-article .wp-block-post-content .hm-reg > .hm-reg__path { margin: 0; padding: 0.6rem 0.9rem; background: #0b1430; color: #e7eefb; font-family: var(--wp--preset--font-family--mono); font-size: 0.84rem; }
.hm-article .wp-block-post-content .hm-reg > .hm-reg__path code { background: none; color: inherit; padding: 0; border: 0; font-size: inherit; }
.hm-article .wp-block-post-content .hm-reg figure.wp-block-table { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.hm-article .wp-block-post-content .hm-reg figure.wp-block-table td:not(:first-child) { font-family: var(--wp--preset--font-family--mono); font-size: 0.84rem; }
@media (max-width: 600px) { .hm-reg__key { white-space: normal; overflow-wrap: anywhere; } }
/* 1.8.6-1.8.7: registry key path must not inherit the inline-code chip */
.hm-article .wp-block-post-content code.hm-reg__key { background: none; padding: 0; border: 0; border-radius: 0; color: #e7eefb; box-shadow: none; }
@media (max-width: 600px) {
.hm-reg__bar { align-items: flex-start; }
.hm-reg__ico { margin-top: 0.2rem; }
.hm-article .wp-block-post-content .hm-reg figure.wp-block-table td:last-child { overflow-wrap: anywhere; }
.hm-article .wp-block-post-content .hm-reg figure.wp-block-table :is(td,th):not(:last-child) { white-space: nowrap; }
.hm-article .wp-block-post-content .hm-reg figure.wp-block-table :is(td,th) { padding-inline: 0.6rem; }
}
/* 1.8.9: Privacy Policy link in the footer bottom bar */
.hm-footer__sep { margin-inline: 0.7rem; opacity: 0.4; }
.hm-footer__bottom a.hm-footer__legal { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; opacity: 0.85; }
.hm-footer__bottom a.hm-footer__legal:hover { opacity: 1; color: #7fd9ec; }
/* 1.9.0: All guides link (first in menu, divider after it) and /guides/ page */
@media (min-width: 600px) {
.hm-header .hm-nav-all { display: flex; align-items: center; gap: 1.4rem; }
.hm-header .hm-nav-all::after { content: ""; width: 1px; height: 1.2rem; background: rgba(230, 236, 248, 0.3); }
}
.hm-header .hm-nav-all > .wp-block-navigation-item__content { color: #fff; }
.hm-guides-hero .wp-block-post-excerpt { margin: 0.6rem 0 0; }
.hm-guides-hero .wp-block-post-excerpt__excerpt { margin: 0; max-width: none; }
.hm-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--wp--preset--spacing--40); }
.hm-filter { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.85rem; border-radius: 999px; background: var(--wp--preset--color--chip); color: var(--wp--preset--color--brand); font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.hm-filter span { opacity: 0.65; font-weight: 400; }
.hm-filter:hover { background: color-mix(in srgb, var(--wp--preset--color--brand) 14%, var(--wp--preset--color--chip)); }
.hm-filter.is-active { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); }
.hm-filter:focus-visible { outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px; }
/* 1.9.1: layout B (Hubert 2026-10-17): top row All guides | News, second row with topic categories. */
.hm-header .hm-nav-news > .wp-block-navigation-item__content { display: inline-flex; align-items: center; gap: 0.4rem; }
.hm-header .hm-nav-news > .wp-block-navigation-item__content::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7dd3fc; box-shadow: 0 0 8px rgba(125, 211, 252, 0.6); }
.hm-catbar { display: none; }
@media (min-width: 600px) {
.hm-header .hm-nav-cat { display: none; }
.hm-catbar { display: block; border-top: 1px solid rgba(230, 236, 248, 0.12); background: rgba(255, 255, 255, 0.03); margin-top: 0; }
.hm-catbar__inner { max-width: 1200px; margin: 0 auto; box-sizing: border-box; padding: 0.4rem var(--wp--preset--spacing--30) 0.45rem; display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem; font-size: 0.9rem; font-weight: 600; line-height: 1.5; }
.hm-catbar__link { position: relative; padding-block: 0.2rem; color: rgba(230, 236, 248, 0.78); }
.hm-catbar__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #38d0e8, #6c9cff); box-shadow: 0 0 10px rgba(56, 208, 232, 0.7); transform: scaleX(0); transition: transform 0.2s ease; }
.hm-catbar__link:hover, .hm-catbar__link.is-current { color: #fff; }
.hm-catbar__link:hover::after, .hm-catbar__link:focus-visible::after, .hm-catbar__link.is-current::after { transform: scaleX(1); }
.hm-catbar__link:focus-visible { outline: 2px solid #6c9cff; outline-offset: 3px; border-radius: 2px; }
}
@media (prefers-reduced-motion: reduce) { .hm-catbar__link::after { transition: none; } }
.hm-thumb--news { --hm-accent: #7dd3fc; --hm-accent2: #a5b4fc; }
/* 1.9.2: At a glance with 5 items (The blog is back): second row, own icons, last item spans the rest. */
.hm-glance > div:nth-child(4) dt { --hm-gl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }
.hm-glance > div:nth-child(5) dt { --hm-gl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
@media (min-width: 601px) {
.hm-article .wp-block-post-content .hm-glance > div:nth-child(n+4) { border-top: 1px solid rgba(230,236,248,.12); }
.hm-article .wp-block-post-content .hm-glance > div:nth-child(4) { border-left: 0; }
.hm-article .wp-block-post-content .hm-glance > div:nth-child(5):last-child { grid-column: span 2; }
}
/* 1.10.1: vector HM logo (variant B2: gradient tile, navy joined HM), replaces the text "HM" tile. */
.hm-logo a::before {
content: ""; width: 38px; height: 38px; border-radius: 9px;
background: url("../images/logo-hm.svg") center / contain no-repeat;
box-shadow: 0 0 14px rgba(108, 156, 255, 0.3);
}
/* 1.11.0: phones (variant A, Hubert 2026-10-17): no hamburger; the category bar becomes an always-visible chip row that scrolls sideways. */
.hm-catbar__link--lead { display: none; }
@media (max-width: 599px) {
.hm-header .hm-header__end > .wp-block-navigation { display: none; }
.hm-catbar { display: block; border-top: 1px solid rgba(230, 236, 248, 0.1); background: #0c1735; }
.hm-catbar__inner { display: flex; gap: 0.45rem; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0.6rem var(--wp--preset--spacing--30) 0.75rem; scroll-padding-inline: var(--wp--preset--spacing--30); -webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.hm-catbar__inner::-webkit-scrollbar { display: none; }
.hm-catbar__link { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 34px; box-sizing: border-box; padding: 0 0.85rem; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(230, 236, 248, 0.16); color: #d5def0; font-size: 0.88rem; font-weight: 600; white-space: nowrap; text-decoration: none; }
.hm-catbar__link--lead { display: inline-flex; }
/* 1.11.40: All guides is a plain chip like News; only the current page is highlighted. */
.hm-catbar .hm-catbar__link--all.is-current { background: linear-gradient(90deg, #38d0e8, #6c9cff); border-color: transparent; color: #06102a; }
.hm-catbar__link--news::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7dd3fc; box-shadow: 0 0 6px rgba(125, 211, 252, 0.8); }
.hm-catbar__link.is-current { background: linear-gradient(90deg, #38d0e8, #6c9cff); border-color: transparent; color: #06102a; }
.hm-catbar__link--news.is-current::before { background: #06102a; box-shadow: none; }
.hm-catbar__link:focus-visible { outline: 2px solid #6c9cff; outline-offset: 2px; }
}
/* 1.11.2: phones (Hubert 2026-10-17): hero shows only the title and the search; kicker and subtitle stay on desktop. */
@media (max-width: 599px) {
.hm-hero--art > p { display: none; }
.hm-hero--art h1 { font-size: 1.6rem !important; line-height: 1.15; }
.hm-hero--art .wp-block-search { margin-top: var(--wp--preset--spacing--30) !important; }
}
/* 1.11.4: phones (Hubert 2026-10-17): compact footer (smaller bio text and photo); Topics and Platforms side by side, Explore below as one row, no duplicate About Me. */
@media (max-width: 599px) {
.hm-footer .hm-footer__cols { display: grid !important; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--40) 1.25rem !important; }
.hm-footer .hm-footer__cols > .wp-block-column { margin: 0 !important; flex-basis: auto !important; }
.hm-footer .hm-footer__cols > .wp-block-column:first-child, .hm-footer .hm-footer__cols > .wp-block-column:nth-child(4), .hm-footer .hm-footer__cols > .hm-fsub { grid-column: 1 / -1; }
.hm-footer .hm-about p { font-size: 0.9rem; line-height: 1.5; }
.hm-footer .hm-about img { width: 56px !important; height: 56px !important; }
.hm-footer ul:not(.wp-block-social-links) { gap: 0.15rem; }
.hm-footer h2 { margin-bottom: 0.35rem; }
.hm-footer .hm-footer__cols > .wp-block-column:nth-child(4) ul { display: flex; flex-wrap: wrap; gap: 0.15rem 1.25rem; }
.hm-footer .hm-footer__cols > .wp-block-column:nth-child(4) li:has(> a[href="/about/"]) { display: none; }
}
/* 1.11.5: phones (Hubert 2026-10-17): no block gap between the logo row and the category chips. */
@media (max-width: 599px) {
.hm-header > .hm-catbar { margin-block-start: 0 !important; }
.hm-header .hm-header__inner { padding-block: 0.7rem; }
}
/* 1.11.6: phones, topic tile sits to the right of the breadcrumb and title; the description runs full width below. */
@media (max-width: 760px) {
.hm-cat-tile { position: absolute; transform: none; top: var(--wp--preset--spacing--50); right: var(--wp--preset--spacing--30); width: 112px; margin: 0 !important; }
.hm-cat-hero > .hm-crumbs, .hm-cat-hero > h1 { padding-right: 124px; box-sizing: border-box; }
.hm-cat-hero h1 { overflow-wrap: anywhere; }
}
/* 1.11.7: guide headings (Hubert 2026-10-18): bigger h2 sections, h3 steps fully light blue with the number as big as the title;
content tables use the "What you need" first-column font; desktop sticky "current section" card in the left margin (guide-route.js adds aside.hm-here). */
:root { --hm-sub-ink: #3a73d6; }
:root[data-scheme="dark"] { --hm-sub-ink: #7ea6ff; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) { --hm-sub-ink: #7ea6ff; } }
.hm-article .wp-block-post-content figure.wp-block-table tbody td:first-child { font: 600 0.84rem/1.3 var(--wp--preset--font-family--display); }
/* 1.11.8: the card lists all main sections; the current one opens to show its steps (Hubert picked "main sections + current expanded"). */
.hm-here { position: fixed; top: 6.5rem; z-index: 5; max-height: calc(100vh - 8.5rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0.75rem 0.8rem 0.8rem; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; background: var(--wp--preset--color--surface); box-shadow: 0 10px 24px -16px rgba(15,23,42,.45); font-size: 0.84rem; line-height: 1.35; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s; }
.hm-here.is-on { opacity: 1; visibility: visible; transform: none; }
.hm-here__k { display: block; font: 600 0.7rem/1 var(--wp--preset--font-family--body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--muted); }
.hm-here__bar { display: block; height: 3px; margin: 0.55rem 0 0.6rem; border-radius: 3px; background: var(--wp--preset--color--line); overflow: hidden; }
.hm-here__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #38d0e8, #6c9cff 55%, #5b3fb5); transition: width .15s; }
.hm-here ol { list-style: none; margin: 0; padding: 0; }
.hm-here__list > li + li { margin-top: 0.15rem; }
.hm-here a { display: flex; gap: 0.45rem; align-items: baseline; padding: 0.28rem 0.4rem; border-radius: 8px; color: var(--wp--preset--color--muted); text-decoration: none; }
.hm-here a:hover { background: var(--hm-pq-area); color: var(--wp--preset--color--ink); }
.hm-here__h2 { align-items: center !important; font: 600 0.88rem/1.3 var(--wp--preset--font-family--display); }
.hm-here__h2 .hm-n { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: none; border-radius: 50%; background: var(--wp--preset--color--line); color: var(--wp--preset--color--muted); font: 600 0.68rem/1 var(--wp--preset--font-family--mono); }
.hm-here li.is-done > .hm-here__h2 .hm-n { background: #0f1b3d; color: #38d0e8; box-shadow: inset 0 0 0 1px #22305a; }
.hm-here li.is-open > .hm-here__h2 { color: var(--wp--preset--color--ink); font-weight: 700; background: var(--hm-pq-area); }
.hm-here li.is-open > .hm-here__h2 .hm-n { background: #0f1b3d; color: #38d0e8; box-shadow: inset 0 0 0 1px #22305a; }
.hm-here__subs { display: none; margin: 0.15rem 0 0.35rem 1.05rem !important; padding-left: 0.6rem !important; border-left: 2px solid var(--wp--preset--color--line); }
.hm-here li.is-open > .hm-here__subs { display: block; }
.hm-here__subs a { padding: 0.22rem 0.4rem; font-size: 0.8rem; }
.hm-here__subs a span { flex: none; font-family: var(--wp--preset--font-family--mono); font-size: 0.74rem; }
.hm-here__subs li.is-cur a { color: var(--hm-sub-ink); font-weight: 600; background: var(--hm-pq-area); }
.hm-here__subs li.is-cur { margin-left: -0.68rem; padding-left: calc(0.68rem - 2px); border-left: 2px solid var(--hm-sub-ink); }
@media (max-width: 1239px) { .hm-here { display: none; } }
@media (prefers-reduced-motion: reduce) { .hm-here { transition: none; } }
/* 1.11.9: more compact code and output windows (Hubert 2026-10-18). */
.hm-article .wp-block-post-content .hm-code pre.wp-block-code { padding: 0.75rem 1rem 0.85rem; font-size: 0.78rem; line-height: 1.5; }
.hm-article .wp-block-post-content .hm-code { margin-block: 1.3rem; }
.hm-code__bar { padding-block: 0.32rem; }
.hm-code--output .hm-code__bar { min-height: 2rem; }
@media (max-width: 760px) { .hm-article .wp-block-post-content .hm-code pre.wp-block-code { font-size: 0.74rem; padding: 0.7rem 0.85rem 0.8rem; } }
/* 1.11.10: post titles fill the line like body text (pretty, not balance) (Hubert 2026-10-18). */
.hm-article .wp-block-post-title { text-wrap: pretty; }
/* 1.11.11: footer "Follow on X" link next to LinkedIn (Hubert 2026-10-19). */
.hm-x__badge { background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.97 6.82H1.67l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z'/%3E%3C/svg%3E") center / 12px 12px no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
/* 1.11.12: content tables "B navy compact" (Hubert picked option B 2026-10-19): lower rows, soft zebra rows, first column in the body font and ink colour
(no light-blue fill, no grey Sora), one font in the first column of every table (also when it holds ), in other cells stays mono; on phones the first column stays put while the table scrolls sideways.
The Prerequisites table (.hm-prereq) and registry panels (.hm-reg) keep their own look. */
:root { --hm-tb-zebra: #f7f9fd; --hm-tb-code: #1e3a8a; }
:root[data-scheme="dark"] { --hm-tb-zebra: #141f37; --hm-tb-code: #a9c1ff; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) { --hm-tb-zebra: #141f37; --hm-tb-code: #a9c1ff; } }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) { border-radius: 10px; box-shadow: 0 6px 16px -12px rgba(15,23,42,.4); }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) table { font-size: 0.88rem; line-height: 1.35; }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) :is(th, td) { padding: 0.3rem 0.7rem; }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) thead th { padding: 0.55rem 0.7rem; font: 700 0.76rem/1.25 var(--wp--preset--font-family--body); letter-spacing: 0.07em; }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) tbody tr:nth-child(even) td { background: var(--hm-tb-zebra); }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) tbody td:first-child { background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink); font: 600 0.88rem/1.35 var(--wp--preset--font-family--body); border-right: 1px solid var(--wp--preset--color--line); border-top-color: var(--wp--preset--color--line); }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) tbody tr:nth-child(even) td:first-child { background: var(--hm-tb-zebra); }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) td code { font: 500 0.78rem/1.3 var(--wp--preset--font-family--mono); color: var(--hm-tb-code); background: none; border: 0; padding: 0; white-space: nowrap; }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) td:first-child code { font: inherit; color: inherit; white-space: normal; overflow-wrap: anywhere; }
/* second line in a header cell: | In-browser protection(Defender for Cloud Apps) | */
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) thead th small { display: block; margin-top: 0.2rem; font-size: 0.85em; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: 0.8; }
@media (max-width: 600px) {
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) table { font-size: 0.84rem; }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) :is(th, td) { padding-inline: 0.55rem; }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) :is(thead th, tbody td):first-child { position: sticky; left: 0; z-index: 1; }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) tbody td:first-child { box-shadow: 4px 0 6px -4px rgba(15,23,42,.18); }
.hm-article .wp-block-post-content figure.wp-block-table:not(.hm-reg figure) td:not(:first-child) code { white-space: normal; overflow-wrap: anywhere; font-size: 0.72rem; }
}
/* 1.11.12: screenshot cards (div.hm-shot + div.hm-legend, inline styles in posts) stand out from the page background (Hubert picked option 1 "light-blue caption" 2026-10-19):
clearer frame and soft shadow, caption on the light-blue chip colour with a blue label. !important beats the inline styles in post markup. */
:root { --hm-shot-edge: #c3d0ea; --hm-shot-label: #2f5bb3; }
:root[data-scheme="dark"] { --hm-shot-edge: #2b3b6b; --hm-shot-label: #8fb0ff; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) { --hm-shot-edge: #2b3b6b; --hm-shot-label: #8fb0ff; } }
.hm-article .wp-block-post-content .hm-shot { border-color: var(--hm-shot-edge) !important; box-shadow: 0 6px 16px -12px rgba(15,23,42,.4) !important; background: var(--wp--preset--color--surface) !important; }
.hm-article .wp-block-post-content .hm-shot .hm-legend { background: var(--hm-pq-area) !important; border-top-color: var(--hm-pq-area-line) !important; color: var(--wp--preset--color--ink); }
.hm-article .wp-block-post-content .hm-shot .hm-legend > div:first-child { color: var(--hm-shot-label) !important; }
/* 1.11.13: console colours in the "In this guide" card (Hubert picked option B, 2026-10-19). guide-route.js copies the colours of the console chip under each step heading. */
.hm-here__subs li.has-console a span { padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--hm-con-bg); color: var(--hm-con-fg); font-weight: 600; }
.hm-here__subs li.is-cur.has-console a span { box-shadow: 0 0 0 1.5px var(--hm-con-fg); }
.hm-here__legend { display: none; flex-wrap: wrap; gap: 0.3rem; margin: 0.1rem 0 0.4rem 1.05rem; }
.hm-here li.is-open > .hm-here__legend { display: flex; }
.hm-here__legend span { padding: 0.18rem 0.45rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; line-height: 1.2; }
/* 1.11.14: At a glance product chips follow the console colours (Hubert 2026-10-19): Intune blue, Entra purple, Microsoft 365 / Edge for Business green. */
.hm-chip--entra { color: #5b2d91; }
.hm-chip--m365 { color: #11645a; }
.hm-glance .hm-chip--intune { background: rgba(56,189,248,.2); box-shadow: inset 0 0 0 1px rgba(56,189,248,.5); color: #d6f1ff; }
.hm-glance .hm-chip--entra { background: rgba(139,108,240,.22); box-shadow: inset 0 0 0 1px rgba(164,140,240,.5); color: #ded4ff; }
.hm-glance .hm-chip--m365 { background: rgba(60,194,167,.18); box-shadow: inset 0 0 0 1px rgba(60,194,167,.5); color: #c5f2e7; }
/* 1.11.15: 5-item At a glance (The blog is back): three equal columns, so Next ends at the right edge; In this guide in two equal columns. */
@media (min-width: 601px) {
.hm-article .wp-block-post-content .hm-glance:has(> div:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hm-article .wp-block-post-content .hm-glance:has(> div:nth-child(5)) + .hm-route-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1rem; padding: 0.7rem 1.1rem 0.8rem; }
.hm-article .wp-block-post-content .hm-glance:has(> div:nth-child(5)) + .hm-route-nav b { grid-column: 1 / -1; margin: 0 0 0.25rem; }
.hm-article .wp-block-post-content .hm-glance:has(> div:nth-child(5)) + .hm-route-nav a + a::before { display: none; }
}
/* 1.11.16: guides with the "In this guide" card keep a 300px left margin for it, so on narrower screens the empty right margin shrinks first; the card hides only below 1100px. */
@media (min-width: 1100px) {
.hm-article.is-layout-constrained:has(.hm-route) > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { margin-left: max(300px, calc((100% - 890px) / 2)) !important; margin-right: auto !important; }
}
@media (min-width: 1100px) and (max-width: 1239px) { .hm-here { display: block; } }
/* 1.11.17: dark mode for inline-styled post content (Hubert 2026-10-20): screenshot legends and image captions get light text, green/red comparison cells and their legend words get dark tints. Light mode unchanged. */
:root[data-scheme="dark"] .hm-article .wp-block-post-content .hm-shot .hm-legend { color: #dbe4f5 !important; }
:root[data-scheme="dark"] .hm-article .wp-block-post-content figcaption.wp-element-caption { color: #aab6cf !important; }
:root[data-scheme="dark"] .hm-article .wp-block-post-content td[style*="#e3f4e8"], :root[data-scheme="dark"] .hm-article .wp-block-post-content p > span[style*="#e3f4e8"] { background: rgba(60,194,120,.16) !important; color: #8fe0a8 !important; }
:root[data-scheme="dark"] .hm-article .wp-block-post-content td[style*="#fdecea"], :root[data-scheme="dark"] .hm-article .wp-block-post-content p > span[style*="#fdecea"] { background: rgba(240,90,90,.14) !important; color: #ffa3a3 !important; }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) .hm-article .wp-block-post-content .hm-shot .hm-legend { color: #dbe4f5 !important; }
:root:not([data-scheme="light"]) .hm-article .wp-block-post-content figcaption.wp-element-caption { color: #aab6cf !important; }
:root:not([data-scheme="light"]) .hm-article .wp-block-post-content td[style*="#e3f4e8"], :root:not([data-scheme="light"]) .hm-article .wp-block-post-content p > span[style*="#e3f4e8"] { background: rgba(60,194,120,.16) !important; color: #8fe0a8 !important; }
:root:not([data-scheme="light"]) .hm-article .wp-block-post-content td[style*="#fdecea"], :root:not([data-scheme="light"]) .hm-article .wp-block-post-content p > span[style*="#fdecea"] { background: rgba(240,90,90,.14) !important; color: #ffa3a3 !important; }
}
/* 1.11.20: screenshots use the full text column (Hubert: thumbnails too small). */
.hm-article .wp-block-post-content figure.is-hm-zoom { max-width: 100%; }
.hm-article .wp-block-post-content .hm-shot, .hm-article .wp-block-post-content .hm-pair { max-width: 100% !important; }
/* 1.11.22: registry panels as compact as the code windows (Hubert 2026-10-20: key path was body-sized because code.hm-reg__key inherited 0.875em). */
.hm-article .wp-block-post-content code.hm-reg__key { font-size: 0.78rem; line-height: 1.5; }
.hm-article .wp-block-post-content .hm-reg figure.wp-block-table table { font-size: 0.78rem; line-height: 1.4; }
.hm-article .wp-block-post-content .hm-reg figure.wp-block-table thead th { font-size: 0.72rem; padding-block: 0.4rem; }
.hm-article .wp-block-post-content .hm-reg figure.wp-block-table tbody tr td:nth-child(n) { font-size: 0.78rem; padding-block: 0.3rem; }
@media (max-width: 760px) { .hm-article .wp-block-post-content code.hm-reg__key, .hm-article .wp-block-post-content .hm-reg figure.wp-block-table tbody tr td:nth-child(n) { font-size: 0.74rem; } }
/* 1.11.24: code window labels in the registry-hive cyan (Hubert 2026-10-20); Output label stays quieter. */
.hm-code__lang { color: #7fd9ec; font-weight: 600; }
.hm-code--output .hm-code__lang { color: #b9c7e3; font-weight: 400; }
/* 1.11.25: legend VALUE column starts at 50% of the card on desktop (Hubert 2026-10-21). */
@media (min-width: 782px){
.hm-article .wp-block-post-content .hm-legend > div:nth-child(2) > div{display:grid !important;grid-template-columns:1.25rem minmax(0,50%) auto;column-gap:0.6rem;justify-content:start !important;}
.hm-article .wp-block-post-content .hm-legend > div:nth-child(2) > div:not(:has(> span:nth-child(3))) > span:nth-child(2){grid-column:2 / -1;}
.hm-article .wp-block-post-content .hm-legend > div:nth-child(2) > div > span:nth-child(3){margin-left:0 !important;justify-self:start;}
.hm-article .wp-block-post-content .hm-legend > div:first-child{display:grid !important;grid-template-columns:calc(1.25rem + 0.6rem + 50%) auto;justify-content:start !important;column-gap:0.6rem;}
}
/* 1.11.27: Home link first in the category bar, divider after it on desktop (Hubert 2026-10-21, option C). */
.hm-catbar__link--home { display: inline-flex; align-items: center; gap: 0.4rem; }
.hm-catbar__link--home svg { flex: none; }
@media (min-width: 600px) {
.hm-catbar__link--home { padding-right: 1.4rem; margin-right: -0.2rem; }
.hm-catbar__link--home::before { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 1.1em; transform: translateY(-50%); background: rgba(230, 236, 248, 0.28); }
.hm-catbar__link--home::after { right: 1.4rem; }
}
/* 1.11.28: smaller, sharper home hero video and less space above the kicker on desktop (Hubert 2026-10-21). */
@media (min-width: 782px) {
.hm-hero--art.hm-hero--art { padding-top: 40px !important; padding-bottom: 48px !important; }
}
/* 1.11.31: the smaller video only on wide screens; narrower desktop windows keep the large video (Hubert 2026-10-21). 1.11.33: wide = 1400px and up. */
@media (min-width: 1400px) {
.hm-hero.is-layout-constrained > .hm-hero-media { inset: 50% 0 auto auto; transform: translateY(-50%); width: min(56%, 860px); height: auto; aspect-ratio: 1464 / 628;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-composite: source-in;
mask-image: linear-gradient(to right, transparent 0%, #000 30%), linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-composite: intersect; }
}
/* 1.11.29: smaller home hero title on desktop, 34px max (Hubert 2026-10-21). */
@media (min-width: 782px) {
.hm-hero--art h1 { font-size: clamp(1.8rem, 2.3vw, 2.125rem) !important; max-width: 28ch; }
}
/* 1.11.30: home hero title and intro as wide as the search box on wide screens (Hubert 2026-10-21). */
@media (min-width: 1100px) {
.hm-hero--art h1, .hm-hero--art > p:not(.hm-hero-kicker) { max-width: 760px !important; }
}
/* 1.11.32: narrow desktop windows (782-899px) show the hero video as a dimmed background, as on phones (Hubert 2026-10-21). */
@media (min-width: 782px) and (max-width: 899px) {
.hm-hero.is-layout-constrained > .hm-hero-media { width: 100%; opacity: 0.28; -webkit-mask-image: none; mask-image: none; }
}
/* 1.11.38 (Hubert 2026-10-23): glance chips never wrap; in dark mode the light inline-styled pills (console chips, status pills)
and the TOC step badges and legend copied from them get dark tints. Inline styles win, hence !important. */
.hm-article .wp-block-post-content .hm-glance .hm-chip { white-space: nowrap; }
/* The 1.6.0 glance rule came after the phone rule and kept three narrow columns on phones; stack the items again. */
@media (max-width: 600px) { .hm-article .wp-block-post-content .hm-glance { grid-template-columns: 1fr; } }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#e6edf9"], .hm-here__legend span[style*="230, 237, 249"]) { background: rgba(91,140,245,.24) !important; color: #c9d8ff !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="230, 237, 249"] { --hm-con-bg: rgba(91,140,245,.24) !important; --hm-con-fg: #c9d8ff !important; }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#efe8fa"], .hm-here__legend span[style*="239, 232, 250"]) { background: rgba(164,120,240,.26) !important; color: #e2d4ff !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="239, 232, 250"] { --hm-con-bg: rgba(164,120,240,.26) !important; --hm-con-fg: #e2d4ff !important; }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#e3f2f0"], .hm-here__legend span[style*="227, 242, 240"]) { background: rgba(45,190,170,.2) !important; color: #aef0e4 !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="227, 242, 240"] { --hm-con-bg: rgba(45,190,170,.2) !important; --hm-con-fg: #aef0e4 !important; }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#e3f4e8"], .hm-here__legend span[style*="227, 244, 232"]) { background: rgba(60,190,110,.2) !important; color: #b5f0c8 !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="227, 244, 232"] { --hm-con-bg: rgba(60,190,110,.2) !important; --hm-con-fg: #b5f0c8 !important; }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#eceff4"], .hm-here__legend span[style*="236, 239, 244"]) { background: rgba(255,255,255,.1) !important; color: #d5dbe6 !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="236, 239, 244"] { --hm-con-bg: rgba(255,255,255,.1) !important; --hm-con-fg: #d5dbe6 !important; }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#fdecea"], .hm-here__legend span[style*="253, 236, 234"]) { background: rgba(240,100,100,.2) !important; color: #ffc9c4 !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="253, 236, 234"] { --hm-con-bg: rgba(240,100,100,.2) !important; --hm-con-fg: #ffc9c4 !important; }
:root[data-scheme="dark"] :is(.wp-block-post-content span[style*="#fdf0dc"], .hm-here__legend span[style*="253, 240, 220"]) { background: rgba(240,170,60,.2) !important; color: #ffdca3 !important; }
:root[data-scheme="dark"] .hm-here__subs li.has-console[style*="253, 240, 220"] { --hm-con-bg: rgba(240,170,60,.2) !important; --hm-con-fg: #ffdca3 !important; }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#e6edf9"], .hm-here__legend span[style*="230, 237, 249"]) { background: rgba(91,140,245,.24) !important; color: #c9d8ff !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="230, 237, 249"] { --hm-con-bg: rgba(91,140,245,.24) !important; --hm-con-fg: #c9d8ff !important; }
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#efe8fa"], .hm-here__legend span[style*="239, 232, 250"]) { background: rgba(164,120,240,.26) !important; color: #e2d4ff !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="239, 232, 250"] { --hm-con-bg: rgba(164,120,240,.26) !important; --hm-con-fg: #e2d4ff !important; }
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#e3f2f0"], .hm-here__legend span[style*="227, 242, 240"]) { background: rgba(45,190,170,.2) !important; color: #aef0e4 !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="227, 242, 240"] { --hm-con-bg: rgba(45,190,170,.2) !important; --hm-con-fg: #aef0e4 !important; }
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#e3f4e8"], .hm-here__legend span[style*="227, 244, 232"]) { background: rgba(60,190,110,.2) !important; color: #b5f0c8 !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="227, 244, 232"] { --hm-con-bg: rgba(60,190,110,.2) !important; --hm-con-fg: #b5f0c8 !important; }
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#eceff4"], .hm-here__legend span[style*="236, 239, 244"]) { background: rgba(255,255,255,.1) !important; color: #d5dbe6 !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="236, 239, 244"] { --hm-con-bg: rgba(255,255,255,.1) !important; --hm-con-fg: #d5dbe6 !important; }
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#fdecea"], .hm-here__legend span[style*="253, 236, 234"]) { background: rgba(240,100,100,.2) !important; color: #ffc9c4 !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="253, 236, 234"] { --hm-con-bg: rgba(240,100,100,.2) !important; --hm-con-fg: #ffc9c4 !important; }
:root:not([data-scheme="light"]) :is(.wp-block-post-content span[style*="#fdf0dc"], .hm-here__legend span[style*="253, 240, 220"]) { background: rgba(240,170,60,.2) !important; color: #ffdca3 !important; }
:root:not([data-scheme="light"]) .hm-here__subs li.has-console[style*="253, 240, 220"] { --hm-con-bg: rgba(240,170,60,.2) !important; --hm-con-fg: #ffdca3 !important; }
}
/* 1.11.39 (Hubert 2026-10-23): phones show only Home > Category in the post breadcrumb (the title is the H1 right below). */
@media (max-width: 600px) { .hm-article .hm-crumbs li:last-child:not(:first-child) { display: none; } }
/* 1.11.39: intro ("bridge") sentences a little darker in light mode, lighter in dark mode. */
.hm-article .wp-block-post-content .hm-bridge { color: #3f4b63; }
:root[data-scheme="dark"] .hm-article .wp-block-post-content .hm-bridge { color: #bcc7db; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) .hm-article .wp-block-post-content .hm-bridge { color: #bcc7db; } }
/* 1.11.39 (1.11.41: smaller solid circles, no ring): step lists "1)" render as red numbered circles like the screenshot badges (li.hm-num from the the_content filter). */
.wp-block-post-content ol:has(> li.hm-num) { list-style: none; padding-left: 0; }
.wp-block-post-content li.hm-num { list-style: none !important; position: relative; padding-left: 1.8rem; }
.wp-block-post-content li.hm-num + li.hm-num { margin-top: 0.35rem; }
.wp-block-post-content li.hm-num::before { content: attr(data-n); position: absolute; left: 0.1rem; top: 0.25em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: #d62828; color: #fff; font: 700 0.68rem/1.15rem var(--wp--preset--font-family--body, sans-serif); text-align: center; }
/* 1.11.40: "In this guide" line fits six sections on one row on desktop (shorter connectors, slightly smaller labels). */
.hm-article .wp-block-post-content .hm-route-nav { gap: 0.3rem 0.25rem; }
.hm-article .wp-block-post-content .hm-route-nav b { margin-right: 0.15rem; }
.hm-article .wp-block-post-content .hm-route-nav a { gap: 0.35rem; padding-right: 0.4rem; font-size: 0.84rem; }
.hm-article .wp-block-post-content .hm-route-nav a + a::before { width: 7px; margin: 0 0.1rem 0 -0.2rem; }
/* 1.11.40: post cards show categories only as chips under the cover, not again on the image. */
.hm-thumb--cover .hm-thumb__top { display: none; }
/* 1.11.42: long-text tables (figure.hm-stack, e.g. Troubleshooting Symptom/Cause/Fix) become a short list on phones:
first cell bold, the other cells indented with their header as label. Other tables stay tables. */
@media (max-width: 600px) {
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack thead { display: none; }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack :is(table, tbody) { display: block; }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr { display: block; padding: 0.55rem 0.75rem 0.6rem; border-top: 1px solid var(--wp--preset--color--line); }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr:first-child { border-top: 0; }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr td { display: block; position: static; box-shadow: none; border: 0; background: none; padding: 0; font-size: 0.86rem; }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr td:first-child { font-weight: 700; margin-bottom: 0.3rem; background: none; border: 0; box-shadow: none; }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr td:not(:first-child) { margin-top: 0.25rem; padding-left: 0.7rem; border-left: 3px solid var(--hm-tb-edge); }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr td:not(:first-child)::before { content: attr(data-label) ": "; font-weight: 700; color: var(--wp--preset--color--muted); }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr td[data-label=""]::before { content: none; }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr:nth-child(n) td:nth-child(n) { background: none; box-shadow: none; }
.hm-article .wp-block-post-content figure.wp-block-table.hm-stack tbody tr:nth-child(even) { background: var(--hm-tb-zebra); }
}
/* 1.11.46: "Get new guides by email" form in the footer (option A, Hubert 2026-10-25), replaces the in-post box. Desktop: grid so the form sits under Topics-Explore, About Me spans both rows. */
@media (min-width: 782px) {
.hm-footer .hm-footer__cols:has(> .hm-fsub) { display: grid !important; grid-template-columns: 40% repeat(3, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--50) !important; row-gap: 30px; }
.hm-footer .hm-footer__cols:has(> .hm-fsub) > .wp-block-column { margin: 0 !important; min-width: 0; }
.hm-footer .hm-footer__cols:has(> .hm-fsub) > .wp-block-column:first-child { grid-row: 1 / span 2; }
.hm-footer .hm-footer__cols > .hm-fsub { grid-column: 2 / -1; }
}
.hm-footer .hm-fsub__title { margin: 0; font: 700 0.85rem/1.3 var(--wp--preset--font-family--display); color: #fff; }
.hm-footer .hm-fsub__text { margin: 0.3rem 0 0; font-size: 0.8rem; color: #a9b7d3; }
.hm-fsub .wp-block-jetpack-subscriptions { margin: 0.75rem 0 0 !important; }
.hm-fsub .wp-block-jetpack-subscriptions__form-elements { display: flex !important; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.hm-fsub .wp-block-jetpack-subscriptions form p { margin: 0 !important; display: flex; text-align: left; }
.hm-fsub #subscribe-email, .hm-fsub p[id^="subscribe-email"] { flex: 1 1 220px; min-width: 0; }
.hm-fsub input[type="email"] { width: 100% !important; box-sizing: border-box; margin: 0 !important; padding: 8px 12px !important; font: 400 0.95rem/1.3 var(--wp--preset--font-family--body, inherit) !important; border-radius: 8px !important; border: 1px solid rgba(255,255,255,.22) !important; background: rgba(255,255,255,.08) !important; color: #fff !important; }
.hm-fsub input[type="email"]::placeholder { color: #9fb0d6; opacity: 1; }
.hm-fsub input[type="email"]:focus-visible { outline: 2px solid #6c9cff; outline-offset: 2px; }
.hm-fsub button[type="submit"], .hm-fsub .wp-block-button__link { margin: 0 !important; padding: 8px 18px !important; font: 600 0.95rem/1.3 var(--wp--preset--font-family--body, inherit) !important; border: 0 !important; border-radius: 8px !important; background: linear-gradient(135deg, #0b86a6, #4f6df5 55%, #5b3fb5) !important; color: #fff !important; cursor: pointer; white-space: nowrap; }
.hm-fsub button[type="submit"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hm-fsub .wp-block-jetpack-subscriptions__subscount, .hm-fsub .jetpack-memberships-spinner { display: none; }
/* 1.11.45: in a guide whose Configuration steps carry console chips, a step without a console (e.g. "Design decisions") gets the same pill in neutral grey, so its number and title line up with the coloured ones. */
.hm-here__subs:has(li.has-console) li:not(.has-console) a span { padding: 0.05rem 0.4rem; border-radius: 999px; background: #eceff4; color: #334155; font-weight: 600; }
:root[data-scheme="dark"] .hm-here__subs:has(li.has-console) li:not(.has-console) a span { background: rgba(255,255,255,.1); color: #d5dbe6; }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) .hm-here__subs:has(li.has-console) li:not(.has-console) a span { background: rgba(255,255,255,.1); color: #d5dbe6; }
}
/* 1.11.48: category banner background from Higgsfield (set inline as --hm-cat-bg), dark on the left for the text. */
.hm-archive-hero.hm-cat-hero[style*="--hm-cat-bg"] { background: linear-gradient(90deg, rgba(4,8,20,.85) 0%, rgba(4,8,20,.6) 50%, rgba(4,8,20,.45) 100%), var(--hm-cat-bg) center / cover no-repeat !important; }
.hm-cat-hero[style*="--hm-cat-bg"] .hm-cat-tile img { box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 40px rgba(0,0,0,.6); }
@media (max-width: 781px) {
.hm-archive-hero.hm-cat-hero[style*="--hm-cat-bg"] { background: linear-gradient(90deg, rgba(4,8,20,.85), rgba(4,8,20,.6)), var(--hm-cat-bg) 70% center / cover no-repeat !important; }
}
/* 1.11.50: subscribed visitors get no email field; hide its empty wrapper so the Subscribed button sits on the left. */
.hm-fsub p#subscribe-email:not(:has(input[type="email"])) { display: none !important; }
/* 1.11.51: for subscribers Jetpack renders only p#subscribe-submit.is-link (flex, centred) with a link button; align it left under the text. */
.hm-fsub #subscribe-submit.is-link { display: block !important; text-align: left !important; margin: 0 !important; }
.hm-fsub #subscribe-submit.is-link a { margin: 0 !important; display: inline-block; }
/* 1.12.0: category banner = wide Higgsfield scene with the object inside (no tile), compact height.
The scene sits in a ::before box sized to the full image (no crop), right aligned, its left edge faded out. */
.hm-archive-hero.hm-cat-hero--scene { position: relative; overflow: hidden; isolation: isolate; background: #050a18 !important; min-height: 300px; padding-top: 36px !important; padding-bottom: 36px !important; display: flex; flex-direction: column; justify-content: center; }
.hm-cat-hero--scene::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; height: 100%; aspect-ratio: 3 / 1; max-width: 66%; background: var(--hm-scene) right center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%); mask-image: linear-gradient(90deg, transparent 0%, #000 24%); }
.hm-cat-hero--scene .hm-cat-tile { display: none; }
@media (min-width: 761px) {
.hm-cat-hero.hm-cat-hero--scene > :not(.hm-cat-tile) { padding-right: 0; }
.hm-cat-hero--scene .wp-block-term-description, .hm-cat-hero--scene .hm-guides-intro { max-width: 620px !important; }
}
@media (max-width: 760px) {
.hm-archive-hero.hm-cat-hero--scene { min-height: 0; display: block; padding-top: 0 !important; padding-bottom: 28px !important; }
.hm-cat-hero--scene::before { position: relative; display: block; width: auto; max-width: none; margin: 0 -24px 6px; aspect-ratio: 7 / 3; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); background-position: center; }
.hm-cat-hero--scene > .hm-crumbs, .hm-cat-hero--scene > h1 { padding-right: 0 !important; }
}
/* 1.12.6: tablet widths 761-980px, keep the description clear of the scene object. */
@media (min-width: 761px) and (max-width: 980px) {
.hm-cat-hero--scene .wp-block-term-description, .hm-cat-hero--scene .hm-guides-intro { max-width: min(620px, 50vw) !important; }
.hm-cat-hero--scene::before { max-width: 58%; }
}