/* ============================================================
   SummitCite — Brand-Specific Styles (SaasLauncher Child Theme)
   Only CSS that the parent theme (SaasLauncher) doesn't cover.
   Colors/fonts/spacing/buttons/cards → handled by theme.json + blocks.css
   ============================================================ */

/* === Smooth scroll for anchor navigation === */
/* scroll-padding-top tracks the sticky header: 20px pad + 40px mark + 20px
   pad = 80px, rounded up. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

/* === Logo color split: "Nexa" teal + "Cite" amber === */
/* Applied via JS in functions.php — wraps the site title's <a> in spans. */
.nexacite-logo .nexa {
  color: var(--wp--preset--color--primary);
}
.nexacite-logo .cite {
  color: var(--wp--preset--color--secondary);
}
/* Footer variant. Teal on the footer's #0F172A is unreadable, so the
   two-tone DNA flips there: "Nexa" takes the light colour, "Cite" keeps
   the amber. */
.nexacite-logo--inverse .nexa {
  color: var(--wp--preset--color--light-color);
}

/* === Brand lockup: N monogram + wordmark ================================
   The mark lives inline in parts/header.html (a wp:html block) rather than
   as a wp:site-logo image, for three reasons:
     1. It is vector — crisp at every DPR, and 0 extra HTTP requests.
   2. Its single tone binds to the theme palette through the preset custom
      property, so a palette change in theme.json recolours the mark
      automatically. The fill is set here (not as an SVG presentation
      attribute) because `fill="var(...)"` in a presentation attribute is
      not supported by WebKit — the CSS property is.
   3. WordPress blocks SVG uploads by default, so a media-library logo
      would have needed the mime type whitelisted first.
   Geometry is the 2026-10-14 (v3.2) mark — the "double C + chevron" trial:
   two concentric annular C's with BOTH openings at ±38° (the inner C was
   widened to match the outer C's mouth angle at the client's request, so
   both end faces sit on the same radial lines) with the brand forward
   chevron sitting in the inner C's mouth where the source logo (green
   double-C, supplied as a raster) had a four-petal flower.
   Ring weights: outer 12, inner 9.5 at the ORIGINAL outer diameter (D=81),
   i.e. thinned inwards; chevron keeps its own geometry, thickened
   (arm 8 -> 11) and placed at x+33 from the ring centre (the outermost
   offset that still clears the outer C's jaw ends). No TM.
   Fills are classes, not presentation attributes (WebKit ignores
   fill="var(...)"). Colour: brand palette — the two concentric C rings are
   teal (--primary), the forward chevron is amber (--secondary), so the mark
   shares the same two-tone DNA as the "Nexa/Cite" wordmark beside it.
   (Was the source logo's own green #2EBD5F during the trial.)
   ====================================================================== */
.nexacite-mark svg .nexacite-mark-ring {
  fill: var(--wp--preset--color--primary);
}
.nexacite-mark svg .nexacite-mark-chev {
  fill: var(--wp--preset--color--secondary);
}

/* The lockup is a flex row and the mark is its first flex child (verified in
   the rendered DOM — the html block does not add a wrapper). */
.nexacite-mark {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 0;
  text-decoration: none;
}

.nexacite-mark svg {
  display: block;
  width: auto;
  /* Wordmark is 36px → cap 25.8px (Arial cap = 0.716em). 40px ≈ 1.55× cap —
     stepped down from the reference's exact 1.81× because the user judged
     that ratio too heavy in the header context ("图标太大"). */
  height: 40px;
}

/* Wordmark — typeface identified 2026-10-13 (final pass, metric+glyph):
   the reference's 'a' is double-story with a HUGE round bowl, a thin top
   hook and a 1.059 width/height aspect — the Google-Sans-style look. No
   neo-grotesque (Arial/Inter) has it; among 15 tested geometric families
   **Red Hat Text 700** matches best: its 'a' aspect is 1.056 (vs ref 1.059)
   and the round-bowl/flat-bar-'e'/geometric-'s' set agrees glyph for glyph.
   (Quicksand hit the word-width metric exactly but its 'a' is single-story
   — disqualified by structure.) Variable TTF self-hosted, no CDN. */
@font-face {
  font-family: "Red Hat Text";
  src: url("../fonts/RedHatText-var.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* The identification history: pass 1 said Inter Bold (cap overcounted by the
   JPEG's AA halo → 4.82), pass 2 said Arial (metric match at clean cap, but
   the 'a' shape disproves it). Quicksand is confirmed by BOTH metrics and
   glyph structure.
   - font-size is pinned here on purpose. The block's own fontSize attribute
     is run through WordPress' fluid typography, which rewrites 30px into
     clamp(18.96px, 1.185rem + ((1vw - 3.2px) * 0.673), 30px) — about 26px
     at 1280px, i.e. the requested enlargement never actually happened. A
     declared size on the anchor overrides both the clamp (inline style on
     the h1) and the block's `:where(a) { font-size: inherit }`.
   - margin-bottom is killed because the theme's global styles set
     `h1 { margin-bottom: var(--wp--preset--spacing--small) }`, which was
     silently pushing the lockup off the nav's optical centre.
   - margin-left tops up the lockup group's own 8px flex gap to the
     reference's mark→text gap (0.55 × cap height ≈ 14px). */
.nexacite-header .wp-block-site-title {
  margin: 0;
  line-height: 1;
}
.nexacite-header .wp-block-site-title a {
  display: inline-block;
  margin-left: 4px;
  font-family: "Red Hat Text", "Trebuchet MS", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  letter-spacing: 0;
}

/* Brand wordmark font everywhere else too (footer lockup). */
.wp-block-site-title a {
  font-family: "Red Hat Text", "Trebuchet MS", sans-serif;
}

@media (max-width: 600px) {
  /* Below 600 the nav collapses to a hamburger, so the row is
     logo + hamburger + CTA. Measured, that row cannot hold all three with a
     wordmark worth reading: the theme's `is-style-button-with-uparrow-icon`
     forces padding-right:45px !important plus an 18px ::after arrow (~190px
     button), the theme's 24px flex column-gap costs another 48px, and the
     flex shrinker's answer was to squeeze the button into 2-3 lines with
     mid-word breaks ("Get / Starte / d Free").
     Every alternative that keeps the button costs ~20px of wordmark — at
     375px that means 25px -> 21px type. So the CTA steps out of the bar; the
     hamburger menu and the hero CTA directly below the header carry it. */
  .nexacite-header .wp-block-buttons {
    display: none;
  }

  /* Room this frees up goes to the wordmark, not to whitespace. Same
     stepped-down mark ratio as desktop: text 27px → cap 18.9px (Quicksand
     cap = 0.701em) → mark 30px ≈ 1.59× cap. */
  .nexacite-mark svg {
    height: 30px;
  }
  .nexacite-header .wp-block-site-title a {
    font-size: 27px;
    letter-spacing: 0;
    margin-left: 0;     /* group's 8px gap alone ≈ 0.55 × mobile cap */
  }
}

/* === FAQ: wp:details enhancement === */
/* Remove default browser marker, add brand-colored +/- indicator */
.wp-block-details > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  color: var(--wp--preset--color--heading-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 8px;
}
.wp-block-details > summary::-webkit-details-marker {
  display: none;
}
.wp-block-details > summary::after {
  content: '+';
  font-size: 22px;
  font-weight: 300;
  color: var(--wp--preset--color--primary);
  transition: transform 0.2s ease;
  line-height: 1;
}
.wp-block-details[open] > summary::after {
  content: '\2212';
  transform: rotate(180deg);
}

/* === Dashboard mockup: responsive === */
/* The wp:html block uses inline styles with a 3-col grid */
.nexacite-dashboard-mockup > div[style*="grid-template-columns"] {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 768px) {
  .nexacite-dashboard-mockup > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* === Header: sticky on scroll === */
.nexacite-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--wp--preset--color--background);
}

/* === Header: Features dropdown ============================================
   The nav block carries the parent theme's registered style
   `is-style-saaslauncher-navigation`, which styles the dropdown in
   saaslauncher/style.css:359-386 (12px panel radius, 5px panel padding,
   220px min-width, 8px item radius, primary-fill hover, slide-down anim).
   The theme deliberately sets `border: 0` and no shadow, which leaves the
   white panel edgeless on our white header/page — so we add the elevation
   only. Scoped to .nexacite-nav; the theme's own mobile rule
   (max-width 600px, box-shadow: none) still wins there, which is correct.
   ========================================================================= */
.nexacite-nav .wp-block-navigation__submenu-container {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

/* === Header: hamburger breakpoint lifted 600 → 1024 ======================
   The three header pieces need ~1020px of row width together (measured at
   desktop: logo 221px + nav 534px + CTA 192px + row padding 80px). WP core
   hardcodes the navigation overlay breakpoint at min-width:600px, so in the
   601–1023 gap the nav stayed inline and flex crushed the row: at 601px the
   CTA collapsed into a vertical letter stack and the nav wrapped to 3 lines
   (header 366px tall); at 900px the nav still wrapped and the CTA broke in
   two (header 173px). Scoped to .nexacite-header, this presents the nav's
   own hamburger button below 1024. Row there = logo 221 + hamburger ~40 +
   CTA 192 ≈ 453px — fits even at 601px, so the CTA survives on tablets. */
@media (max-width: 1023px) {
  .nexacite-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
  .nexacite-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  /* space-between would strand the hamburger mid-row; pin nav + CTA to the
     right edge as a pair instead. NOTE: core copies the nav's classes onto
     the inner <ul.wp-block-navigation__container> too (it carries both
     wp-block-navigation and nexacite-nav), so the element selector is
     load-bearing — a plain class selector would also give the UL the auto
     margin and push the whole open-menu list to the right edge. */
  .nexacite-header nav.wp-block-navigation {
    margin-left: auto;
    margin-right: 12px;
  }
  /* The nav block is justified center, which the core open-menu overlay
     inherits into align-items:center — but the item list ends up stranded
     right-of-center (measured: item right edge sits at vw−152px at every
     width, pre-existing below 600 too). Left-align the open menu instead:
     standard mobile-menu reading position. */
  .nexacite-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  .nexacite-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
  .nexacite-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    align-items: flex-start;
    text-align: left;
  }
  .nexacite-header .wp-block-navigation__responsive-container.is-menu-open .has-child .wp-block-navigation__submenu-container {
    width: 100%;
  }
  /* core's open-menu padding is clamp(1rem, var(--wp--style--root--padding-*), 20rem);
     this theme never defines the root padding vars, so the clamp is invalid
     and the menu sat flush against the screen edge. */
  .nexacite-header .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
    padding: 24px;
  }
  /* a parent item's li is a row flex: its label and the (now static) submenu
     panel sat side-by-side, which is what stranded "Features" and its panel
     on the right. Stack them instead. */
  .nexacite-header .wp-block-navigation__responsive-container.is-menu-open .has-child {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* The CTA is a fixed-size pill — flex must never crush it into wrapped
   text (that was the "G/e/t/S/t/a/r/t/e/d" vertical stack at 601px). */
.nexacite-header .wp-block-buttons {
  flex-shrink: 0;
}
.nexacite-header .wp-block-button__link {
  white-space: nowrap;
}

/* === Footer: depth + rhythm =============================================
   The footer is a hand-built block group (the theme ships no footer CSS of
   its own; its three footer *patterns* lean entirely on cover+gradients).
   Two deliberate additions here:
   1. Two soft radial glows on the dark surface — same technique as the dark
      marketing page cover (.nexacite-fp-pagehead), so the footer reads as
      the closing bookend of that language instead of a flat black slab.
   2. Item rhythm for the sitemap lists (block gap is otherwise 0, which
      stacks the links flush).
   Link colours/hover come from the block attributes in parts/footer.html,
   not from here. ==================================================================== */
.nexacite-footer {
  background-image:
    radial-gradient(68% 120% at 6% 118%, rgba(15, 110, 86, 0.42) 0%, rgba(15, 23, 42, 0) 58%),
    radial-gradient(56% 110% at 102% -8%, rgba(186, 117, 23, 0.22) 0%, rgba(15, 23, 42, 0) 55%);
}

.nexacite-footer .wp-block-list li + li {
  margin-top: 12px;
}

/* "A PressRoost product" = lockup subtitle under the SummitCite wordmark.
   Measured on the rendered PNG (ink, not boxes): the wordmark sits 17px above
   the subtitle and the subtitle 36.5px above the body copy — far looser than
   the 6px box margin suggests, because (a) "SummitCite" has no descenders, so
   the whole descent band under the baseline is empty, and (b) the paragraph's
   1.6 line-height adds ~4px of half-leading above and below its ink.
   So: pull the subtitle up (negative margin) and collapse its line box, then
   tighten the gap to the body copy (24px default → 10px). */
.nexacite-footer .nexacite-footer-parent {
  margin-top: -2px;
  line-height: 1;
}

.nexacite-footer .nexacite-footer-parent + .wp-block-paragraph {
  margin-top: 10px;
}

/* === Footer bottom bar: hairline divider ================================
   Mirrors beamtrace.com's footer bottom bar. Their rule (from the live
   stylesheet, .footer__bottom-inner):
       border-top: 1px solid color-mix(in srgb, var(--color-fg-inverse) 10%, transparent);
       padding-top: 24px; padding-bottom: 24px;
   i.e. a 1px hairline in the inverse foreground at ~10% alpha, hugging the
   copyright strip. On our dark surface that resolves to 10% white.
   Done as a border (not a wp:separator block) so it sits flush with the
   strip instead of inheriting the block's own margins. =================== */
.nexacite-footer .nexacite-footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* === Scroll-to-top button ==============================================
   The parent theme ships a complete scroll-to-top component:
     CSS  saaslauncher/style.css:599-636 — 50x50 fixed circle, bottom-right,
          opacity/visibility:0, revealed by a `.show` class, arrow via a
          white mask (assets/images/up-arrow.svg)
     JS   assets/js/saaslauncher-scripts.js:171-179 — jQuery; adds `.show`
          once scrollTop > 100, animates back to 0 over 600ms
   We wire it up in parts/footer.html. Two things must be fixed on our side:
   1. The reveal rule in the theme is a *nested* one (`&.show { ... }`).
      Current browsers do support native CSS nesting, but if it were ever
      dropped the button would stay invisible forever — so the reveal is
      restated here, unnested, as a hard guarantee.
   2. The theme's own markup requests `tertiary` / `foregound-alt`, neither
      of which exists in the parent OR child palette (and one is misspelt),
      so its button would render with no background at all. We use the real
      `primary` slug instead (see the button markup in parts/footer.html).
   `box-sizing` + `overflow` keep the 50x50 circle exact and clip the
   text-indent:-5000px label the theme uses to hide the text.
   ========================================================================== */
.wp-block-button.saaslauncher-scrollto-top .wp-block-button__link {
  box-sizing: border-box;
  overflow: hidden;
}
.wp-block-button.saaslauncher-scrollto-top .wp-block-button__link.show {
  opacity: 1;
  visibility: visible;
}