/* mgrb.in — Global header + category styling
   Migrated from Custom HTML widget (custom_html-2, Footer sidebar) to WP Admin Additional CSS.
   Paste this into: WP Admin > Appearance > Customize > Additional CSS
   Then remove the two <style> blocks from the custom_html-2 widget (keep the widget only if it
   still holds other non-CSS content — as of 2026-07-09 it holds nothing else, so it can be emptied
   or the widget deleted once this is confirmed live). See BL-105 for background. */

/* Hide the theme's generic page-title block ("Home" / "About") on both pages.
   hide-homepage-title body class does NOT actually suppress it - every theme rule tied to that
   class also requires .home.hide-homepage-header, which neither page carries, so the plain
   centered H1 (with its decorative hairline before/after and up to 96px of margin/rule space)
   was rendering directly above the custom-built hero on both pages. Two H1s per page, dead
   space, visual mismatch with the hero below it. Added 2026-07-11 layout/typography pass. */
.page-id-5 .entry-header,
.page-id-8 .entry-header{display:none!important}

/* Theme's decorative title hairlines - found 2026-07-12 (Mike: "the white horizontal bar.. i
   dont want any post or page to have that white border for the article title"). h1.page-title
   (category archives) and h1.entry-title (single posts) both carry theme-default ::before/::after
   pseudo-elements: 1px tall, hardcoded background-color:#FFFFFF, ~750px wide - genuinely separate
   from anything targeted by color/border rules on the title itself, so every earlier fix left
   them untouched. Confirmed via getComputedStyle(el, '::before') on both a category archive and a
   single post. Removed outright rather than recoloured - Mike wants them gone, not restyled. */
h1.page-title::before,
h1.page-title::after,
h1.entry-title::before,
h1.entry-title::after{display:none!important}

/* Root cause found 2026-07-12: WordPress/Hever's own Customizer "Colors" panel injects a
   separate colour-preset system (body carries a "custom-colors" class; a <style id="custom-colors-css">
   block sets --wp--preset--color--background: #eef4f7, a pale theme-default blue-grey). Confirmed
   via computed-style check (Playwright): #masthead was fixable with a direct override, but plain
   body{} was still resolving to rgb(238,244,247) = #eef4f7 - the theme's own default, never
   touched by any of this file's earlier rules (the only prior body{} override was inside the dark
   media query). Wherever that raw body background shows through (section seams/margins), it
   didn't match anything in the real palette. Fixed here rather than by touching the Customizer
   panel itself - same override approach already used everywhere else in this file. */
body{background:#FFFFFF!important}
#masthead{background:#FFFFFF!important;grid-template-areas:'site-logo site-title main-navigation'!important;grid-template-columns:auto 1fr auto!important;grid-template-rows:auto!important;align-items:center!important;column-gap:16px!important}
#masthead .site-logo{margin-bottom:0!important}
#masthead p.site-title{position:static!important;clip-path:none!important;overflow:visible!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;margin-block-start:0!important;margin-block-end:0!important;align-self:center!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important;font-size:1rem!important;font-weight:800!important;line-height:1.2!important}
/* Phase 2 (2026-07-12 CSS/theme rollout): site-title recoloured to the real Canva-derived
   palette. Black replaces navy for primary text (guidelines: "Primary dark: Black - Headings,
   navigation"); burgundy replaces gold for hover (guidelines: "Primary brand: Deep burgundy -
   Main CTAs, highlights" — also avoids the gold-on-white contrast failure the guidelines flag);
   taupe replaces the old slate for the tagline ("Mid neutral: Taupe - Secondary text"). */
#masthead p.site-title a{color:#010101!important;text-decoration:none!important}
#masthead p.site-title a:hover{color:#4D040A!important}
#masthead p.site-title::after{content:'perspective matters..';display:block;font-size:0.7rem;font-weight:400;color:#8D7B6F;font-style:normal;line-height:1.3;margin:0;padding:0}
#masthead p.site-description{display:none!important}

/* -- mgrb.in category colours: bg + 6px masthead stripe + title colours --
   Phase 3 (2026-07-12 CSS/theme rollout): full rewrite for the real Canva-derived palette + the
   new taxonomy (BL-149). Was 4 categories on the old placeholder navy/gold palette; now 8 - adds
   AI/Architecture/D365/Power Platform, Latest Thinking's new children, which had no accent CSS
   of their own until this session. Two hue families for the 4 children rather than 4 arbitrary
   colours: burgundy (AI/Architecture - strategic/analytical thinking) and navy (D365/Power
   Platform - hands-on platform work). Background tints deliberately deepened and kept distinct
   from each other and from white (BL-138 fix 4's lesson, repeated here for the new palette - see
   spec doc's Round 2 fix for the same mistake caught in the local prototype first). Full
   reasoning and the accent-assignment table: 00.1 Projects/mgrb.in/00. Reference/
   2026-07-12_css-theme-rollout-spec.md. */
/* Archive pages:  body.category-xxx  (body carries category class on archive) */
/* Single posts:   body.single:has(article.category-xxx)  (article carries it; body does not) */

/* Latest Thinking (parent/fallback - only shows when a post carries no child category) - burgundy */
body.category-latest-thinking,
body.single:has(article.category-latest-thinking){background-color:#F3ECD0!important}
body.category-latest-thinking #masthead,
body.single:has(article.category-latest-thinking) #masthead{background-color:#F3ECD0!important;padding-bottom:8px!important;border-bottom:6px solid #4D040A!important}
body.category-latest-thinking h1.page-title{color:#4D040A!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important}
body.category-latest-thinking .entry-title a:hover{color:#4D040A!important}
article.category-latest-thinking h1.entry-title{color:#4D040A!important}

/* AI - burgundy (deep) - flagship child of Latest Thinking */
body.category-ai,
body.single:has(article.category-ai){background-color:#F2D9DC!important}
body.category-ai #masthead,
body.single:has(article.category-ai) #masthead{background-color:#F2D9DC!important;padding-bottom:8px!important;border-bottom:6px solid #4D040A!important}
body.category-ai h1.page-title{color:#4D040A!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important}
body.category-ai .entry-title a:hover{color:#4D040A!important}
article.category-ai h1.entry-title{color:#4D040A!important}

/* Architecture - burgundy (tint), sibling to AI */
body.category-architecture,
body.single:has(article.category-architecture){background-color:#EDE0E2!important}
body.category-architecture #masthead,
body.single:has(article.category-architecture) #masthead{background-color:#EDE0E2!important;padding-bottom:8px!important;border-bottom:6px solid #8B4550!important}
body.category-architecture h1.page-title{color:#8B4550!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important}
body.category-architecture .entry-title a:hover{color:#8B4550!important}
article.category-architecture h1.entry-title{color:#8B4550!important}

/* D365 - navy (deep) */
body.category-d365,
body.single:has(article.category-d365){background-color:#DADCE8!important}
body.category-d365 #masthead,
body.single:has(article.category-d365) #masthead{background-color:#DADCE8!important;padding-bottom:8px!important;border-bottom:6px solid #1A1A3C!important}
body.category-d365 h1.page-title{color:#1A1A3C!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important}
body.category-d365 .entry-title a:hover{color:#1A1A3C!important}
article.category-d365 h1.entry-title{color:#1A1A3C!important}

/* Power Platform - navy (tint), sibling to D365 */
body.category-power-platform,
body.single:has(article.category-power-platform){background-color:#E4E5F0!important}
body.category-power-platform #masthead,
body.single:has(article.category-power-platform) #masthead{background-color:#E4E5F0!important;padding-bottom:8px!important;border-bottom:6px solid #4A4E7A!important}
body.category-power-platform h1.page-title{color:#4A4E7A!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important}
body.category-power-platform .entry-title a:hover{color:#4A4E7A!important}
article.category-power-platform h1.entry-title{color:#4A4E7A!important}

/* The Vault - gold, flagship/durable reference material. Title colour uses the darker bronze
   shade, not raw gold - gold fails contrast as text on a light background (see theme guidelines).
   2026-07-12 (Phase 10.5): the original background #E8D5A0 (a saturated khaki-tan) was the one
   category background noticeably heavier/muddier than the airy pastel tints every other category
   uses, and its accompanying dot-grid texture didn't fix that. Mike also flagged it read too
   close to Asides once toned down - confirmed via RGB distance (11 units vs Asides on a ~441
   max scale, i.e. near-indistinguishable). Replaced with #EEDDA0 - pulled further into gold/amber
   territory (RGB distance to Asides now ~45), same lighter visual weight as the other 7 category
   tints, dot-grid texture dropped (flat, matching every other category's flat tint). */
body.category-the-vault,
body.single:has(article.category-the-vault){background-color:#EEDDA0!important}
body.category-the-vault #masthead,
body.single:has(article.category-the-vault) #masthead{background-color:#EEDDA0!important;padding-bottom:8px!important;border-bottom:6px solid #EED888!important}
body.category-the-vault h1.page-title{color:#8a6d1a!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important}
body.category-the-vault .entry-title a:hover{color:#8a6d1a!important}
article.category-the-vault h1.entry-title{color:#8a6d1a!important}

/* Asides - taupe, quiet/casual/human, deliberately not competing with the technical categories */
body.category-asides,
body.single:has(article.category-asides){background-color:#E3D9CC!important}
body.category-asides #masthead,
body.single:has(article.category-asides) #masthead{background-color:#E3D9CC!important;padding-bottom:8px!important;border-bottom:6px solid #8D7B6F!important}
body.category-asides h1.page-title{color:#8D7B6F!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important}
body.category-asides .entry-title a:hover{color:#8D7B6F!important}
article.category-asides h1.entry-title{color:#8D7B6F!important}

/* Stories - coral, creative spark. Used sparingly across the whole site - this category is its
   one deliberate outlet, per the "small high-attention accents only" rule. */
body.category-stories,
body.single:has(article.category-stories){background-color:#F5D2C9!important}
body.category-stories #masthead,
body.single:has(article.category-stories) #masthead{background-color:#F5D2C9!important;padding-bottom:8px!important;border-bottom:6px solid #F64839!important}
body.category-stories h1.page-title{color:#F64839!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important}
body.category-stories .entry-title a:hover{color:#F64839!important}
article.category-stories h1.entry-title{color:#F64839!important}

/* BL-140 (2026-07-11 Playwright review): the theme's default green (rgb(53,132,93)) still leaks
   through in two places nothing else touched - the active nav-item text colour, and the mobile
   hamburger menu button/label. Both confirmed via computed styles.
   Phase 2 (2026-07-12): recoloured to the real palette rather than the old placeholder navy -
   black for the nav text (matches site-title), navy for the hamburger button's solid fill
   (guidelines: "Secondary - Supporting panels, hover states, footer" - a filled block reads
   better as navy than black). */
.main-navigation a{color:#010101!important}
.main-navigation .current-menu-item>a,
.main-navigation .current_page_item>a{color:#010101!important;font-weight:800!important}
#toggle-menu.button{background-color:#1A1A3C!important;color:#fff!important}
/* Privacy & Cookies bar (Jetpack EU Cookie Law widget, eu_cookie_law_widget-3, Footer sidebar) -
   2026-07-12. Not visible via normal DOM/Playwright search since the widget hides itself after
   30s or for 180 days once accepted (its own JS/cookie logic) - found instead via
   wp-json/wp/v2/widgets, which returned its exact rendered markup (#eu-cookie-law wrapper, .accept
   submit button). Kept as a permanent navy/gold treatment regardless of light/dark mode - it's
   utility chrome, not page content, same precedent as the Hero/Certifications band staying
   permanently dark. */
#eu-cookie-law{background:#1A1A3C!important;color:#F3ECD0!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important;font-size:0.85rem!important;line-height:1.6!important;padding:16px 20px!important;box-sizing:border-box!important}
#eu-cookie-law a{color:#EED888!important;text-decoration:underline!important}
/* Radius bumped 6px→8px 2026-07-12 (design batch, item 2 - rounded edges sitewide scale). */
#eu-cookie-law .accept{background:#EED888!important;color:#010101!important;border:none!important;border-radius:8px!important;padding:10px 20px!important;font-weight:700!important;font-size:0.8rem!important;cursor:pointer!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important}
#eu-cookie-law .accept:hover{background:#f5e4a3!important}

/* Mobile menu overlay (2026-07-12, found via Playwright mobile-viewport check): the expanded
   mobile nav lives in its own fixed-position .main-menu-container panel, entirely separate from
   #masthead/body - neither of those overrides ever reached it, so opening the hamburger menu
   revealed the theme's own Customizer preset colour (#eef4f7) filling most of the screen behind
   the nav links. Same root-cause pattern as the body/masthead mismatch bugs earlier this session -
   a genuinely separate element the general rules never targeted.
   Round 2 (same day): a flat #FFFFFF fixed that on Home/plain pages but broke on every category
   archive/single page - Mike: "the background behind the menu items has a colour not matching
   the page background" (confirmed live via Playwright: white overlay on top of Vault's gold
   #EEDDA0 body). Fixed properly with transparent - .main-menu-container is a position:fixed
   overlay with no content of its own behind the nav links, so transparent lets the real body
   background (whatever it is - plain white, or any of the 8 category tints) show through
   automatically. No per-category duplication needed; nav link text colours (#010101 light /
   #F3ECD0 dark) already have safe contrast against every category tint in both modes. */
.main-menu-container{background-color:transparent!important}

/* 2026-07-12 (design batch, item 1 - feature images): consistent size + rounded corners sitewide.
   Covers single-post header images and category/archive listing thumbnails - both use the
   theme's native .post-thumbnail markup. Scoped as `article .post-thumbnail` (specificity 0,1,1),
   deliberately lower specificity than Home's own `.wpnbha .post-thumbnail` rule (0,2,0, defined in
   home.html) so the two rules never fight - Home's grid already got the same aspect-ratio/
   object-fit treatment in that file, this just extends it to everywhere else. */
article .post-thumbnail{aspect-ratio:16/9;overflow:hidden;border-radius:12px!important}
article .post-thumbnail img{width:100%!important;height:100%!important;object-fit:cover!important}

/* ============================================================================
   DARK MODE (2026-07-12) - @media prefers-color-scheme, matches OS setting automatically.
   No manual toggle (see spec doc's WordPress feasibility section for why - a toggle needs JS
   controlling the shared header/footer, which has no reliable delivery channel on this classic
   theme). Full coverage this time: masthead + page canvas + all 4 Home sections + cards + all 8
   category archive/single pages + About's hero/stat-tiles/cross-links - deliberately not
   repeating BL-113's mistake (that attempt only covered two page files, not the surrounding
   theme chrome). Hero and the Certifications band stay permanently dark in BOTH modes - no
   change needed for those two zones. Values match the local prototype
   (00. Outputs/mgrb.in/2026-07-12_css-theme-prototype.html), already visually verified there.
   REVERT: if this looks wrong, paste
   98. Backups/mgrb.in/2026-07-12_14-00_KNOWN-GOOD_additional-css-migration_light-mode-only.css
   into Additional CSS instead - that is the confirmed-working light-mode-only state. */
@media (prefers-color-scheme: dark){

  /* Page canvas + masthead. Both now match the hero's darkest gradient stop (#0a0a1a) exactly -
     same fix as light mode's body/masthead mismatch (Playwright computed-style check found body
     was still #14181f, a third, different dark shade, while masthead+hero were already aligned
     at #0a0a1a - same class of bug, same fix: one flat, consistent value instead of two close-but-
     different tones bleeding through in section gaps/margins). */
  body{background:#0a0a1a!important;color:#F3ECD0!important}
  #masthead{background:#0a0a1a!important}
  #masthead p.site-title a{color:#F3ECD0!important}
  #masthead p.site-title a:hover{color:#e0656f!important}
  #masthead p.site-title::after{color:#b3a89a!important}
  .main-navigation a{color:#F3ECD0!important}
  .main-navigation .current-menu-item>a,
  .main-navigation .current_page_item>a{color:#e0656f!important}
  /* Mobile menu overlay - same fix as light mode above, dark equivalent. Round 2: transparent,
     same rationale as the light-mode rule (lets each category's actual dark tint show through
     instead of a flat #0a0a1a that clashed with e.g. Vault's #332912). */
  .main-menu-container{background-color:transparent!important}

  /* Home - mini-profile strip. 2026-07-12 (design batch, item 3 redesign, Option A): updated to
     match the new integrated-bar markup - #mini-profile-card no longer has its own background
     (transparent, inherits #mini-profile's), so this block must explicitly force it transparent
     too, not just leave it unset - otherwise this file's own now-stale rule would keep darkening
     the inner card even when the manual JS toggle (home.html) is set to light, since this
     @media(prefers-color-scheme:dark) rule fires purely off the OS setting, independent of the
     toggle. This was a real bug Mike hit: toggle showed "light" (sun icon) but the card stayed
     dark because this file's old #mini-profile-card background rule was never updated when the
     card's own background was removed in the redesign. */
 /* #mini-profile{background:#1c212b!important}*/
  #mini-profile{background:transparent!important}
  #mini-profile-card{background:transparent!important}
  #mini-profile-card > div > div:first-child{color:#F3ECD0!important}
  #mini-profile-card > div > div:nth-child(2){color:#b3a89a!important}
  #mini-profile .mgrb-name{color:#F3ECD0!important}
  #mini-profile-card a{color:#e0656f!important;border-color:#e0656f!important}
  #mini-profile .mgrb-mono{color:#f2dfa0!important;background:rgba(242,223,160,.14)!important}

  /* Home - 4 grid sections: background + heading/icon/link colour + eyebrow text */
  #latest{background-color:#1d2230!important}
  #latest h2,#latest h2 svg,#latest a{color:#e0656f!important;stroke:#e0656f!important;border-color:#e0656f!important}
  #latest span{color:#b3a89a!important}

  /* 2026-07-12 (Phase 10.5): background pulled from #241f14 to #332912, same rationale as the
     light-mode Vault fix above - more distinctly gold, less neutral-brown/close-to-Asides-dark,
     dot-grid dropped to match every other category's flat tint. */
  #vault-grid{background-color:#332912!important}
  #vault-grid h2,#vault-grid h2 svg,#vault-grid a{color:#f2dfa0!important;stroke:#f2dfa0!important;border-color:#f2dfa0!important}
  #vault-grid span{color:#b3a89a!important}

  #asides-grid{background-color:#211d1a!important}
  #asides-grid h2,#asides-grid h2 svg,#asides-grid a{color:#b3a08e!important;stroke:#b3a08e!important;border-color:#b3a08e!important}
  #asides-grid span{color:#b3a89a!important}

  #stories-grid{background-color:#241a1a!important}
  #stories-grid h2,#stories-grid h2 svg,#stories-grid a{color:#ff7a6b!important;stroke:#ff7a6b!important;border-color:#ff7a6b!important}
  #stories-grid span{color:#b3a89a!important}

  /* Post cards inside the grids */
  .wpnbha article.type-post{background:#1c212b!important;border-color:#33302a!important}
  .wpnbha .entry-title a{color:#F3ECD0!important}

  /* About - hero, stat tiles, cross-links */
  #about-top,#about-bottom{color:#F3ECD0!important}
  #about-top p,#about-bottom p{color:#ded7c8!important}
  #about-hero h2{color:#F3ECD0!important}
  /* "Read What I Write About" label has its own inline color:#010101 - not reached by the
     #about-bottom wrapper override above (inline colour beats inherited colour). Found via
     Playwright dark-mode screenshot - was unreadable, near-black text on the dark canvas. */
  #about-bottom h2{color:#F3ECD0!important}
  #stat-tiles > div:nth-child(1),
  #stat-tiles > div:nth-child(3){background:#1c212b!important;border-color:#33302a!important}
  #stat-tiles > div:nth-child(1) .mgrb-mono,
  #stat-tiles > div:nth-child(3) .mgrb-mono{color:#F3ECD0!important}
  #stat-tiles > div:nth-child(1) > div:nth-child(2),
  #stat-tiles > div:nth-child(3) > div:nth-child(2){color:#b3a89a!important}
  #cross-links a{background:#1c212b!important;border-color:#33302a!important}
  #cross-links a span:last-child{color:#b3a89a!important}

  /* Category archive/single pages - all 8, background + masthead stripe + title colour
     brightened for readability on dark surfaces (same technique as About's on-dark provider
     labels - Microsoft/TOGAF/AWS badges). */
  body.category-latest-thinking,
  body.single:has(article.category-latest-thinking){background-color:#1d2230!important}
  body.category-latest-thinking #masthead,
  body.single:has(article.category-latest-thinking) #masthead{background-color:#1d2230!important;border-bottom-color:#e0656f!important}
  body.category-latest-thinking h1.page-title,
  article.category-latest-thinking h1.entry-title{color:#e0656f!important}

  body.category-ai,
  body.single:has(article.category-ai){background-color:#2a1418!important}
  body.category-ai #masthead,
  body.single:has(article.category-ai) #masthead{background-color:#2a1418!important;border-bottom-color:#e0656f!important}
  body.category-ai h1.page-title,
  article.category-ai h1.entry-title{color:#e0656f!important}

  body.category-architecture,
  body.single:has(article.category-architecture){background-color:#241a1c!important}
  body.category-architecture #masthead,
  body.single:has(article.category-architecture) #masthead{background-color:#241a1c!important;border-bottom-color:#c98089!important}
  body.category-architecture h1.page-title,
  article.category-architecture h1.entry-title{color:#c98089!important}

  body.category-d365,
  body.single:has(article.category-d365){background-color:#161a2c!important}
  body.category-d365 #masthead,
  body.single:has(article.category-d365) #masthead{background-color:#161a2c!important;border-bottom-color:#7d84c2!important}
  body.category-d365 h1.page-title,
  article.category-d365 h1.entry-title{color:#7d84c2!important}

  body.category-power-platform,
  body.single:has(article.category-power-platform){background-color:#1c2036!important}
  body.category-power-platform #masthead,
  body.single:has(article.category-power-platform) #masthead{background-color:#1c2036!important;border-bottom-color:#a7addc!important}
  body.category-power-platform h1.page-title,
  article.category-power-platform h1.entry-title{color:#a7addc!important}

  /* 2026-07-12 (Phase 10.5): same fix as the light-mode Vault block above - background pulled
     from #241f14 to #332912, dot-grid dropped, more distinctly gold and further from Asides'
     dark tone (#211d1a). */
  body.category-the-vault,
  body.single:has(article.category-the-vault){background-color:#332912!important}
  body.category-the-vault #masthead,
  body.single:has(article.category-the-vault) #masthead{background-color:#332912!important;border-bottom-color:#f2dfa0!important}
  body.category-the-vault h1.page-title,
  article.category-the-vault h1.entry-title{color:#f2dfa0!important}

  body.category-asides,
  body.single:has(article.category-asides){background-color:#211d1a!important}
  body.category-asides #masthead,
  body.single:has(article.category-asides) #masthead{background-color:#211d1a!important;border-bottom-color:#b3a08e!important}
  body.category-asides h1.page-title,
  article.category-asides h1.entry-title{color:#b3a08e!important}

  body.category-stories,
  body.single:has(article.category-stories){background-color:#241a1a!important}
  body.category-stories #masthead,
  body.single:has(article.category-stories) #masthead{background-color:#241a1a!important;border-bottom-color:#ff7a6b!important}
  body.category-stories h1.page-title,
  article.category-stories h1.entry-title{color:#ff7a6b!important}

  #toggle-menu.button{background-color:#0d1016!important}
}