/* ============================================================
   China Web Search — Fluid theme overrides
   ------------------------------------------------------------
   Purpose: strip the "personal blog" chrome that Fluid applies
   by default, and raise the whole site to a B2B agency standard.

   Loaded via _config.fluid.yml -> custom_css
   Landing-page-specific styles live in /css/landing.css
   ============================================================ */

:root {
  --cws-brand: #D32F2F;
  --cws-brand-600: #B71C1C;
  --cws-ink: #0F172A;
  --cws-body: #334155;
  --cws-muted: #64748B;
  --cws-line: #E2E8F0;
  --cws-surface-2: #F8FAFC;
}

html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color: var(--cws-body);
}

h1, h2, h3, h4, h5, h6,
.post-title, .index-info .h2 {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.015em;
}

/* anchor offset so #contact / #services don't hide under the navbar */
[id] { scroll-margin-top: 84px; }

/* ============================================================
   1. LANDING PAGE — break out of Fluid's blog container
   ------------------------------------------------------------
   Fluid renders:
     <div id="banner">…typewriter + default.png…</div>
     <div class="container nopadding-x-md">
       <div id="board">            <- white boxed card w/ shadow
         <div class="container"><div class="row">
           <div class="col-12 col-md-10 m-auto">   <- 10/12 width
   All three layers must be neutralised for a full-bleed page.
   ============================================================ */

/* kill the default hero banner (typewriter subtitle + stock image) */
body.cws-home #banner { display: none !important; }

/* Fluid wraps BOTH the navbar and #banner in
   <div class="header-inner" style="height: 60vh"> (see
   layout/_partials/header.ejs, driven by index.banner_img_height).
   Hiding #banner alone leaves that 60vh shell behind, which pushes
   the real page content ~600px down into dead space.
   The inline style wins on height, so it needs !important.
   Collapsing it is safe because the navbar is position:fixed and
   every marketing section clears it with its own padding-top. */
body.cws-home header .header-inner { height: auto !important; }

/* make every wrapper full-bleed and remove the "card" look */
body.cws-home main > .container,
body.cws-home main > .container > #board,
body.cws-home #board > .container,
body.cws-home #board .row {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* the 10-column content well becomes full width */
body.cws-home #board .row > [class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Fluid injects prose styles into .markdown-body / .page-content —
   neutralise them so landing.css is the single source of truth */
body.cws-home .page-content,
body.cws-home .markdown-body {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  padding: 0 !important;
  margin: 0 !important;
}
body.cws-home .markdown-body > *:first-child { margin-top: 0 !important; }

/* Fluid adds heading anchor links (#) — unwanted on a landing page */
body.cws-home .markdown-body .anchor,
body.cws-home .markdown-body h1 a.headerlink,
body.cws-home .markdown-body h2 a.headerlink,
body.cws-home .markdown-body h3 a.headerlink { display: none !important; }

/* no TOC / footer share widgets on the landing page */
body.cws-home #toc,
body.cws-home .board-tags,
body.cws-home .post-copyright { display: none !important; }

/* ============================================================
   2. SITE-WIDE DE-BLOGGING
   ============================================================ */

/* --- navbar: solid, professional, no glassy blog feel --- */
#navbar {
  border-bottom: 1px solid var(--cws-line);
  box-shadow: none;
}
#navbar.top-nav-collapse,
#navbar.navbar-col-show {
  background-color: rgba(255, 255, 255, .96) !important;
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
#navbar .navbar-brand,
#navbar .blog-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cws-ink) !important;
}
/* --- brand mark: the CWS logo beside the wordmark (markup: scripts/brand.js)
   Two variants ship: navy C for the white bar, white C for the transparent
   bar over dark pageheads. The toggle tracks the exact same state the text
   colour uses (`.top-nav-collapse` = scrolled = white bar;
   `.navbar-col-show` = the mobile menu overlay, also white). --- */
#navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
#navbar .cws-brand-mark {
  height: 30px;
  width: auto;
  display: block;
}
#navbar .cws-brand-mark--light { display: none; }
body.cws-dark-top #navbar:not(.top-nav-collapse):not(.navbar-col-show) .cws-brand-mark { display: none; }
body.cws-dark-top #navbar:not(.top-nav-collapse):not(.navbar-col-show) .cws-brand-mark--light { display: block; }
#navbar .nav-link {
  font-family: "Figtree", sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--cws-body) !important;
  transition: color .2s ease;
}
#navbar .nav-link:hover,
#navbar .nav-item.active .nav-link {
  color: var(--cws-brand) !important;
}
/* --- pages that OPEN on a dark section only (cws-dark-top):
       invert the nav while the page is at scroll-top. Fluid drops
       .top-nav-collapse until you scroll, at which point the bar
       turns white and normal colours take over.
       Kept separate from cws-home so light-opening marketing
       pages do not get white nav text on a white background. --- */
body.cws-dark-top #navbar:not(.top-nav-collapse) {
  border-bottom-color: rgba(255, 255, 255, .10);
}
body.cws-dark-top #navbar:not(.top-nav-collapse) .navbar-brand,
body.cws-dark-top #navbar:not(.top-nav-collapse) .blog-title,
body.cws-dark-top #navbar:not(.top-nav-collapse) .nav-link,
body.cws-dark-top #navbar:not(.top-nav-collapse) .navbar-toggler {
  color: rgba(255, 255, 255, .92) !important;
}
body.cws-dark-top #navbar:not(.top-nav-collapse) .nav-link:hover,
body.cws-dark-top #navbar:not(.top-nav-collapse) .nav-item.active .nav-link {
  color: #fff !important;
}
body.cws-dark-top #navbar:not(.top-nav-collapse) .nav-item::after {
  background: #fff;
}
body.cws-dark-top #navbar:not(.top-nav-collapse) .navbar-toggler-icon {
  filter: invert(1) brightness(2);
}

/* underline indicator instead of the blog-style colour swap.

   ⚠️ This MUST hang off `.nav-item`, NOT `.nav-link`. "Services" is also
   Bootstrap's `.dropdown-toggle`, and its caret lives on the very same
   `::after` pseudo-element. Bootstrap 4.6.1 (loaded from the baomitu CDN —
   it is NOT in the theme, which is why grepping node_modules finds
   nothing) declares:
       .dropdown-toggle::after { width:0; height:0; border-top:.3em solid;
                                 border-left:.3em solid transparent;
                                 border-right:.3em solid transparent }
   Our old rule had higher specificity, so it won on
   position/left/right/bottom/height/background — but the *borders* survived.
   The zero-width box therefore still had real size, and the item rendered a
   ~16x8px red blob under "Services", pushed 5px off-centre by the caret's
   own `margin-left`. Not an element, not an intent — two designs fighting
   over one pseudo-element. Measured before the fix (getComputedStyle on the
   pseudo): every other item `w=0px h=2px border:0`, Services
   `w=8px h=4px border-top:4px solid border-right/left:4px solid`.
   Off `.nav-item`, the caret stays Bootstrap's and the underline stays ours. */
#navbar .nav-item { position: relative; }
#navbar .nav-item::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 2px;
  height: 2px;
  background: var(--cws-brand);
  border-radius: 2px;
  pointer-events: none;
  transition: left .22s ease, right .22s ease;
}
#navbar .nav-item:hover::after,
#navbar .nav-item.active::after { left: 14%; right: 14%; }

/* --- Services dropdown (Fluid `submenu`)
   Fluid's shipped style is `background-color: rgba(0,0,0,.3)` with
   `color: var(--navbar-text-color)` (= #fff). That composites to a
   MID-GREY panel once the navbar turns white on scroll -> white text on
   grey, unreadable. This site's nav is white with dark text in its
   dominant (scrolled) state, so the panel is rebuilt as a light card.
   The panel is opaque, so it also reads fine over the dark hero. --- */
#navbar .dropdown-menu {
  background-color: #fff;
  border: 1px solid var(--cws-line);
  border-radius: 12px;
  box-shadow: 0 14px 36px -10px rgba(16, 24, 40, .18);
  padding: 7px;
  min-width: 15.5rem;
}
#navbar .dropdown-item {
  color: var(--cws-body);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: "Figtree", sans-serif;
  font-size: 15px;
  font-weight: 500;
  white-space: normal;
  transition: background-color .18s ease, color .18s ease;
}
#navbar .dropdown-item:hover,
#navbar .dropdown-item:focus {
  color: var(--cws-brand);
  background-color: rgba(211, 47, 47, .07);
}
/* the caret is now the SOLE tenant of `.dropdown-toggle::after` (the red
   underline indicator moved to `.nav-item::after` above). Keep it aligned
   with the other nav items, and legible on the dark-opening pages where
   the nav is still transparent. */
#navbar .dropdown-toggle::after { margin-left: 5px; vertical-align: 1px; }
body.cws-dark-top #navbar:not(.top-nav-collapse) .dropdown-toggle,
body.cws-dark-top #navbar:not(.top-nav-collapse) .dropdown-toggle:hover {
  color: rgba(255, 255, 255, .92) !important;
}
/* on mobile the theme swaps the whole navbar for a grid overlay and
   renders each submenu as a group header + cells — nudge those to match */
.mobile-grid-group-header {
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
}

/* --- content pages: card with a border, not a drop shadow --- */
#board {
  border: 1px solid var(--cws-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* --- blog index cards: flatten Fluid's heavy shadow, add lift --- */
.index-card,
.index-img,
.index-info {
  border-radius: 12px;
}
.index-card {
  border: 1px solid var(--cws-line);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1),
              box-shadow .22s cubic-bezier(.4, 0, .2, 1),
              border-color .22s cubic-bezier(.4, 0, .2, 1);
}
.index-card:hover {
  transform: translateY(-3px);
  border-color: #D5DDE7;
  box-shadow: 0 10px 28px -8px rgba(16, 24, 40, .12);
}
.index-info .index-header a { color: var(--cws-ink) !important; }
.index-info .index-header a:hover { color: var(--cws-brand) !important; }

/* --- links --- */
.markdown-body a:not(.headerlink) {
  color: var(--cws-brand);
  text-decoration: none;
  border-bottom: 1px solid rgba(211, 47, 47, .28);
  transition: border-color .2s ease, color .2s ease;
}
.markdown-body a:not(.headerlink):hover {
  color: var(--cws-brand-600);
  border-bottom-color: var(--cws-brand-600);
}

/* --- article typography --- */
.markdown-body { color: var(--cws-body); }
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 { color: var(--cws-ink); }
.markdown-body h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--cws-line);
}
.markdown-body blockquote {
  border-left: 3px solid var(--cws-brand);
  background: var(--cws-surface-2);
  color: var(--cws-body);
  border-radius: 0 8px 8px 0;
}
.markdown-body img { border-radius: 8px; }
.markdown-body table { border-radius: 8px; overflow: hidden; }
.markdown-body table th { background: var(--cws-surface-2); }

/* --- reading progress + scrolltop in brand colour --- */
#scroll-top-button {
  border-radius: 10px;
  background-color: var(--cws-brand) !important;
}
#scroll-top-button i { color: #fff !important; }

/* --- footer: quiet and corporate --- */
#footer {
  border-top: 1px solid var(--cws-line);
  background: var(--cws-surface-2);
}
#footer .footer-inner { color: var(--cws-muted); font-size: 14px; }
.footer-custom p { margin: 4px 0; }
.footer-custom p:first-child { color: var(--cws-body); font-weight: 500; }

/* --- mobile navbar polish --- */
@media (max-width: 991px) {
  #navbar .navbar-collapse {
    background: #fff;
    border-top: 1px solid var(--cws-line);
    padding: 8px 0 12px;
  }
  #navbar .nav-item::after { display: none; }
  #navbar .nav-link { padding: 11px 4px !important; font-size: 16px; }
}