/* ==========================================================================
   cc-hardening.css — opus-cc QA layer for Newspaper-child (cybercommand.ca)
   SoT: design/DIRECTION-CARD-SOL-OPUS.md (2026-09-30 ~19:58 PT)

   Scope: tokens + magazine-chrome kills + hero ambient video + proof strip.
   Sol's style.css owns component styling (.cc-card, .cc-btn, ...). This file
   is meant to be merged into the END of child style.css or enqueued after it.

   LOAD ORDER WARNING (verified on live 2026-09-30): td_legacy_main.css,
   td_standard_pack_main.css and tdb_main.css load AFTER child style.css.
   Equal-specificity child rules lose. Kills below therefore use `body`
   prefix + !important. Preferred fix: enqueue this file in functions.php
   with deps ['td-theme','td-legacy-framework-front-style','tdb_style_cloud_templates_front']
   (verify handle names in WP admin before relying on them).
   ========================================================================== */

/* Fonts — Syne (display) / Outfit (body) / IBM Plex Mono (chips/metrics).
   Better: enqueue + preconnect in functions.php, and set Theme Panel fonts
   to "none" so Newspaper stops loading Open Sans + Roboto. */
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@600;700&family=Outfit:wght@400;500&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ---------- 1. Tokens (exact DIRECTION-CARD values) ---------- */
:root {
  --cc-bg: #0B0D0C;
  --cc-bg-elev: #141614;
  --cc-bg-card: #181B18;
  --cc-border: #2A2F2A;
  --cc-text: #F2F4F2;
  --cc-muted: #9AA39A;          /* 6.7:1 on card, 7.5:1 on bg — AA body OK */
  --cc-accent: #C8F542;         /* CTAs + sparse chips only; never small body */
  --cc-accent-ink: #0B0D0C;
  --cc-danger: #FF6B6B;         /* Refuse card only */
  --cc-max: 1120px;
  --cc-radius: 10px;
  --cc-gap-section: clamp(72px, 9vw, 96px);
  --cc-gap-grid: 18px;
  --cc-pad-card: 22px;
  --cc-font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
  --cc-font-body: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cc-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cc-header-h: 64px;

  /* Legacy aliases — live child style.css (ver 12.7.9c) uses these names.
     Keep until Sol's style.css replaces it, then delete. */
  --cc-bg-2: var(--cc-bg-elev);
  --cc-ink: var(--cc-text);
  --cc-line: var(--cc-border);
}

/* ---------- 2. Global surface ---------- */
html body,
body .td-theme-wrap,
body .td-main-content-wrap,
body .td-container-wrap,
body .tdc-content-wrap {
  background: var(--cc-bg) !important;
  color: var(--cc-text);
}
body { overflow-x: clip; font-family: var(--cc-font-body); font-size: 16.5px; line-height: 1.55; }
body, body p, body li, body .tagdiv-type, body .td-page-content { font-family: var(--cc-font-body); color: var(--cc-text); }
body h1, body h2, body h3, body h4,
body .tagdiv-type h1, body .tagdiv-type h2, body .tagdiv-type h3,
body .td-module-title, body .entry-title {
  font-family: var(--cc-font-display);
  color: var(--cc-text);
  letter-spacing: -0.02em;
}
body .tagdiv-type h1 { font-size: clamp(40px, 5vw, 48px); font-weight: 700; line-height: 1.08; }
body .tagdiv-type h2 { font-size: clamp(28px, 3.2vw, 32px); font-weight: 600; line-height: 1.15; }
body .tagdiv-type h3 { font-size: 19px; font-weight: 600; line-height: 1.25; }

/* Links: muted by default, lime on hover (live currently paints ALL links lime — fixed here). */
body a, body .tagdiv-type a { color: var(--cc-muted); text-decoration: none; }
body a:hover, body .tagdiv-type a:hover { color: var(--cc-accent); }
body :focus-visible { outline: 2px solid var(--cc-accent) !important; outline-offset: 2px; }
::selection { background: var(--cc-accent); color: var(--cc-accent-ink); }

/* tagDiv accent remap (pinks/blues → tokens) */
body .td-theme-wrap .block-title > *,
body .td-theme-wrap .td-block-title > * { background-color: transparent !important; color: var(--cc-muted) !important; }
body .td-theme-wrap .block-title,
body .td-theme-wrap .td-block-title { border-color: var(--cc-border) !important; }

/* ---------- 3. KILL LIST (magazine / Gadgets-PRO chrome) ---------- */
/* Top bar · date · weather · ticker · Sign in/Join · login modal · search · socials */
body .td-header-top-menu-full,
body .td-header-top-menu,
body .top-bar-style-1,
body .td-header-sp-top-menu,
body .td-header-sp-top-widget,
body .top-header-menu,
body .td_ul_login,
body .td-login-modal-js,
body .td-login-wrap,
body #login-form,
body .td-menu-login-section,
body .td-guest-wrap,
body .td-register-section,
body .td_data_time,
body .tdb_header_date,
body .tdb_header_weather,
body .td-weather-top-widget,
body .td-trending-now-wrapper,
body .tdb_trending_now,
body .td-search-wrapper,
body .td-search-form,
body .td-head-form-search-wrap,
body .td-drop-down-search,
body .td-search-wrap-mob,
body .td-search-background,
body .td-header-search-wrap,
body .tdb_header_search,
body .tdb-head-search-btn,
body .tdb_header_user,
body .tdb-head-usr-wrap,
body .td-menu-socials-wrap,
body .td-social-icon-wrap,
body .tdm-social-wrapper,
/* Header ad / banner / logo mega-header */
body .td-banner-wrap-full,
body .td-header-sp-recs,
body .td-header-sp-logo,
body .td-header-gradient,
/* Mega menus */
body .td-mega-menu,
body .td_block_mega_menu,
body .tdb_header_mega_menu,
/* Category pills / review stars / post meta furniture */
body .td-post-category,
body .tdb-category,
body .tdb_single_categories,
body .td-category,
body .td-review,
body .td-review-stars,
body .entry-review-stars,
body .td-review-final-score,
body .td-review-summary,
body .tdc-review-wrap,
body .td-module-meta-info .td-post-author-name,
body .td-post-views,
body .td-post-comments,
body .td-module-comments,
body .td-post-sharing,
body .td-post-source-tags,
body .td-post-next-prev,
body .td-author-box,
body .author-box-wrap,
/* Ads */
body .td-a-rec,
body .td-a-ad,
body .td-adspot-title,
body .tdm-ad,
body .tdb_ad,
/* Sidebars / related / trending / widgets */
body .td-main-sidebar,
body .td-ss-main-sidebar,
body .td_block_related_posts,
body .td-related-title,
body .td_block_popular_categories,
body .tdn_block_newsletter_subscribe,
/* Page-title duplication + breadcrumbs (live renders H1 "Home" above hero H1) */
body .td-crumb-container,
body .entry-crumbs,
body.page .td-page-header,
/* Default footer widget columns (EDITOR PICKS / POPULAR CATEGORY) */
body .td-footer-wrapper .td_block_wrap,
/* Misc furniture */
body .td-scroll-up {
  display: none !important;
}

/* Sidebar removed → content spans full container (live is 8/4 split = 2/3 width). */
body .td-main-content-wrap .td-pb-span8.td-main-content { width: 100% !important; float: none; padding: 0; }
body .td-main-content-wrap > .td-container,
body .tdc-content-wrap { max-width: var(--cc-max); width: auto; padding-left: 16px; padding-right: 16px; }
body .td-page-content { padding: 0; }

/* wpautop debris in Composer/text blocks (<br> between buttons, stray <p>) */
body .cc-actions > br,
body .cc-card br { display: none; }
body .cc-card > p:empty, body .cc-wrap > p:empty { display: none; }

/* ---------- 4. Slim sticky header (CSS fallback until Cloud header template) ---------- */
body .td-header-wrap {
  position: sticky; top: 0; z-index: 999;
  background: color-mix(in srgb, var(--cc-bg) 90%, transparent) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cc-border);
}
body .td-header-menu-wrap-full,
body .td-header-menu-wrap,
body .td-header-main-menu { background: transparent !important; min-height: var(--cc-header-h); }
body #td-header-menu .sf-menu > li > a,
body .td-header-main-menu .sf-menu > li > a {
  font-family: var(--cc-font-body); font-size: 14px; font-weight: 500;
  text-transform: none; letter-spacing: 0; color: var(--cc-muted);
  line-height: var(--cc-header-h);
}
body #td-header-menu .sf-menu > li > a:hover,
body #td-header-menu .sf-menu > .current-menu-item > a { color: var(--cc-text); }
body #td-header-menu .sf-menu > .current-menu-item > a::after,
body #td-header-menu .sf-menu > li > a:hover::after { background: var(--cc-accent) !important; height: 2px; }
/* "Book a call" CTA: add menu item with CSS class `cc-nav-cta` (Appearance → Menus → CSS Classes). */
body #td-header-menu .sf-menu > li.cc-nav-cta > a {
  background: var(--cc-accent); color: var(--cc-accent-ink) !important;
  border-radius: 8px; line-height: 36px; padding: 0 16px; margin: 14px 0 0 12px; font-weight: 600;
}
body #td-header-menu .sf-menu > li.cc-nav-cta > a::after { display: none; }
body .td-header-wrap .td-icon-mobile { color: var(--cc-text); }
body #td-mobile-nav, body .td-menu-background { background: var(--cc-bg) !important; }
body #td-mobile-nav .td-mobile-content a { color: var(--cc-text); font-family: var(--cc-font-body); }

/* ---------- 5. Hero — ambient video is PRIMARY ----------
   Markup contract = Sol's design/markup/home.html (cc-hero › cc-hero__media
   [video.cc-hero__video + .cc-hero__scrim] › cc-shell.cc-hero__content).
   NO product UI / product reel in this section (Stavros lock).
   Asset dir is /wp-content/themes/Newspaper-child/ (capital N, case-sensitive). */
body .cc-hero {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw);
  /* Stavros/Infra 2026-09-30: stunning full-viewport ambient warfare hero */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; align-items: center;
  background: var(--cc-bg);
}
@media (max-width: 767px) {
  body .cc-hero {
    min-height: 100svh;
    min-height: 100dvh;
  }
}
body .cc-hero__content {
  padding-top: max(96px, calc(var(--cc-header-h, 64px) + 48px));
  padding-bottom: 96px;
}
body .cc-hero__media { position: absolute; inset: 0; z-index: -1; }
body .cc-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .38;                               /* brief: 25–40% under scrim; full-vh bump */
  filter: saturate(.85) contrast(1.05);
}
body .cc-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--cc-bg) 0%, rgba(11,13,12,.82) 45%, rgba(11,13,12,.45) 100%),
    linear-gradient(0deg, var(--cc-bg) 0%, rgba(11,13,12,0) 30%);
}
body .cc-hero__content { position: relative; width: 100%; max-width: var(--cc-max); margin: 0 auto; padding-left: 16px; padding-right: 16px; }
body .cc-kicker { font-family: var(--cc-font-mono); font-size: 12.5px; color: var(--cc-muted); letter-spacing: .06em; text-transform: uppercase; }
body .cc-hero__lede { color: var(--cc-muted); max-width: 56ch; font-size: 17px; }
@media (prefers-reduced-motion: reduce) {
  /* <video poster> still paints the poster when not playing; hide video only if
     the poster is also set as --cc-hero-poster on .cc-hero__media. */
  body .cc-hero__video { display: none; }
  /* Poster on ::before so it matches the video's .32 opacity; scrim (later sibling) still paints over it. */
  body .cc-hero__media::before {
    content: ""; position: absolute; inset: 0;
    background: var(--cc-hero-poster, none) center / cover no-repeat;
    opacity: .32;
  }
}

/* ---------- 6. Proof — landed real-stills strip, SECONDARY ---------- */
body .cc-proof__stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--cc-border); border-radius: var(--cc-radius);
  background: var(--cc-bg-elev);
}
body .cc-proof__fallback,
body .cc-proof__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top left;
  filter: saturate(.7) brightness(.92);
}
body .cc-proof__fallback { z-index: 0; }
body .cc-proof__video { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  body .cc-proof__video { display: none; }
}

/* ---------- 7. Tile media (real stills) — figure sits after body per Sol's anatomy ---------- */
body .cc-card__media {
  aspect-ratio: 16 / 10; overflow: hidden; margin: 16px 0;
  border: 1px solid var(--cc-border); border-radius: calc(var(--cc-radius) - 4px);
}
body .cc-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top left; filter: saturate(.7); transition: transform .6s ease; }
body .cc-card:hover .cc-card__media img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { body .cc-card:hover .cc-card__media img { transform: none; } }

/* ---------- 8. Footer — slim ---------- */
body .td-footer-wrapper,
body .td-sub-footer-container {
  background: var(--cc-bg) !important;
  border-top: 1px solid var(--cc-border);
  padding: 20px 0;
}
body .td-footer-wrapper:empty, body .td-footer-wrapper .td-pb-row:empty { display: none; }
body .td-sub-footer-container, body .td-sub-footer-container a { color: var(--cc-muted); font-size: 13px; font-family: var(--cc-font-body); }


/* ==========================================================================
   cc-parallax + brochure chrome (2026-09-30 live paste)
   Layered scroll depth on hero / systems / proof / consulting.
   Respects prefers-reduced-motion. Depth, not gimmick.
   ========================================================================== */

/* Hide Newspaper page-title H1 chrome on brochure pages (bare "Home" etc.) */
body.home .td-page-header,
body.home .td-page-title,
body.home header .entry-title,
body.page-id-5 .td-page-header,
body.page-id-5 .td-page-title,
body.page-id-5 header.td-page-header,
body.page-id-6 .td-page-header .entry-title,
body.page-id-6 .td-page-title,
body.page-id-7 .td-page-header .entry-title,
body.page-id-7 .td-page-title,
body.page-id-8 .td-page-header .entry-title,
body.page-id-9 .td-page-header .entry-title,
body.page-id-9 .td-page-title,
body.blog .td-ss-main-sidebar,
body.page-id-8 .td-ss-main-sidebar,
body.home .td-ss-main-sidebar,
body.page-template-default .td-related-title,
body .td-pb-span4 .td_block_popular_categories,
body.home .td_block_popular_categories,
body.page .td_block_popular_categories,
body.home .td-pb-border-top,
body.page-id-5 .td_block_13,
body.page-id-5 .td_block_14,
body.page-id-5 .td_block_15,
body.page-id-8 .td_block_13,
body.page-id-8 .td_block_14,
body.page-id-8 .td_block_15 {
  display: none !important;
}

/* Full-bleed hero: kill theme container gutters on home front */
body.home .td-main-content-wrap > .td-container,
body.home .tdc-content-wrap > .td-container,
body.home .td-page-content > .td-container,
body.home .td-main-page-wrap .td-container {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.home .td-page-content,
body.home .tagdiv-type {
  padding: 0 !important;
  margin: 0 !important;
}

/* Hero media scales slightly for parallax travel room */
body .cc-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
body .cc-hero__media {
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1.12);
  transform-origin: center center;
}
body .cc-hero__content {
  will-change: transform;
  padding: clamp(96px, 14vh, 160px) 16px clamp(56px, 8vh, 96px);
  z-index: 1;
}
body .cc-hero__sub {
  color: var(--cc-muted);
  font-size: 14px;
  margin-top: 0.75rem;
  max-width: 48ch;
}
body .cc-parallax-section {
  position: relative;
  isolation: isolate;
}
body .cc-parallax-section [data-cc-parallax-layer] {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}
body .cc-proof__stage {
  will-change: transform;
}
body .cc-muted { color: var(--cc-muted); }

/* consulting badge chips stay muted outline (already in style); ensure refuse list spacing */
body .cc-consult-detail ul { margin: 0.75rem 0 1.25rem; padding-left: 1.25rem; color: var(--cc-muted); }
body .cc-consult-detail li { margin-bottom: 0.4rem; }
body .cc-consult-detail h2 { margin-top: 2rem; }

@media (prefers-reduced-motion: reduce) {
  body .cc-hero__media,
  body .cc-hero__content,
  body .cc-parallax-section [data-cc-parallax-layer],
  body .cc-proof__stage {
    transform: none !important;
    will-change: auto !important;
  }
}


/* Stronger bare page-title H1 kill (Newspaper entry-title on brochure) */
body.home h1.entry-title,
body.page h1.entry-title,
body.home .td-page-title,
body.page .td-page-title,
body .td-main-content-wrap > .td-container > .td-pb-row > .td-pb-span12 > header .entry-title,
body.home .td-page-header,
body.page-id-5 .td-page-header,
body.page-id-6 .td-page-header,
body.page-id-7 .td-page-header,
body.page-id-9 .td-page-header,
body.blog .td-page-header .entry-title {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}