/* ==========================================================================
   CrawlCite — base stylesheet
   Ported from the Claude Design source "CrawlCite Landing.dc.html".

   The design ships every rule as an inline style plus `style-hover=""`
   attributes. Inline styles are kept verbatim in the templates; the hover
   states are re-expressed here as real CSS classes so they work with
   JavaScript disabled and cost no runtime shim.
   ========================================================================== */

/* --- Design source: <helmet> <style> block, verbatim --------------------- */

html { scroll-behavior: smooth; }
body { margin: 0; background: #ffffff; color: #101319; font-family: 'Instrument Sans', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: oklch(0.50 0.15 259); text-decoration: none; }
a:hover { color: oklch(0.42 0.15 259); }
::selection { background: oklch(0.92 0.04 259); }
button { font-family: 'Instrument Sans', sans-serif; }
input, textarea, select { font-family: 'Instrument Sans', sans-serif; }
input:focus, textarea:focus, select:focus { outline: 2px solid oklch(0.50 0.15 259); outline-offset: 1px; }
a:focus-visible, button:focus-visible { outline: 2px solid oklch(0.50 0.15 259); outline-offset: 3px; border-radius: 4px; }

@keyframes cs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cs-dash { to { stroke-dashoffset: -28; } }
@keyframes cs-pulse { 0%,100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } }
@keyframes cs-ring { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes cs-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
}

/* --- Hover states (design `style-hover` attributes) ---------------------- */

.cc-navlink:hover            { color: #101319; }
.cc-btn-dark:hover           { background: oklch(0.50 0.15 259); color: #ffffff; }
.cc-btn-primary:hover        { color: #ffffff; transform: translateY(-2px); box-shadow: 0 14px 30px -8px oklch(0.50 0.15 259 / 0.55); }
.cc-btn-ghost:hover          { border-color: #b9bfcc; background: #f7f8fb; color: #101319; }
.cc-btn-dark-lift:hover      { background: oklch(0.50 0.15 259); color: #ffffff; transform: translateY(-2px); }
.cc-btn-outline:hover        { background: #101319; color: #ffffff; }
.cc-card-value:hover         { border-color: oklch(0.78 0.07 259); box-shadow: 0 12px 32px -16px rgba(23,32,64,0.18); transform: translateY(-3px); }
.cc-card-service:hover       { border-color: oklch(0.78 0.07 259); box-shadow: 0 14px 36px -18px rgba(23,32,64,0.2); transform: translateY(-4px); }
.cc-card-process:hover       { border-color: oklch(0.60 0.13 259); background: rgba(255,255,255,0.05); }
.cc-card-who:hover           { border-color: oklch(0.78 0.07 259); transform: translateY(-3px); }
.cc-chip-quality:hover       { border-color: oklch(0.78 0.07 259); }
.cc-chip-input:hover         { border-color: oklch(0.72 0.09 259); background: oklch(0.97 0.015 259); }
.cc-mail-lg:hover            { color: oklch(0.78 0.10 259); }

/* --- Responsive: the design's `narrow` breakpoint (< 720px) --------------
   The source hides the primary nav below 720px via `<sc-if isDesktop>` and
   flips the two horizontal flow diagrams to vertical. Doing it in CSS rather
   than JS avoids a layout flash and keeps the markup crawlable.
   ------------------------------------------------------------------------ */

.cc-flow        { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 0; width: 100%; }
.cc-flow-item   { display: flex; flex-direction: row; align-items: center; flex: 1 1 0; }
.cc-flow-arrow  { margin: 0 4px; flex-shrink: 0; transform: rotate(0deg); }

@media (max-width: 719px) {
  .cc-nav-main   { display: none !important; }
  .cc-flow       { flex-direction: column; }
  .cc-flow-item  { flex-direction: column; }
  .cc-flow-arrow { margin: 10px 0; transform: rotate(90deg); }

  /* The design carries inline `min-width` floors of 260–320px on the flex
     columns of its two-up desktop sections. Below ~368px those floors exceed
     the available content width (viewport minus 24px of section padding each
     side), so the blocks overhang and `overflow-x: clip` on <main> silently
     cuts them off -- at 320px that sliced 24px off the right of the H1. Every
     one of these blocks is a full-width single column at this breakpoint, so
     the floor has no work to do here. */
  main [style*="min-width"],
  footer [style*="min-width"] { min-width: 0 !important; }
}

/* --- Logo ----------------------------------------------------------------
   The mark alone stands in for the lockup on narrow screens: the wordmark is
   ~88px of the header's width budget, which at 320px there is simply no room
   for once the CTA and menu toggle are in place. The link keeps
   aria-label="CrawlCite — home", so the accessible name never disappears.
   ------------------------------------------------------------------------ */

.cc-logo { text-decoration: none; }
.cc-logo:hover { color: #101319; }

@media (max-width: 479px) {
  .cc-logo-text { display: none; }
}

/* --- Mobile / small-tablet menu -----------------------------------------
   The design hides the nav entirely below 720px and offers no replacement,
   so those sections were unreachable from the header. This is the disclosure
   pattern: a toggle in the header opening a dropdown panel. Not a modal --
   the page behind stays visible and scrollable -- so it takes Escape and
   click-outside, but deliberately no focus trap.
   ------------------------------------------------------------------------ */

.cc-menu-toggle {
  display: none;                 /* shown at <720px, and only when JS is on */
  width: 40px; height: 40px;
  flex: 0 0 auto;
  align-items: center; justify-content: center;
  background: none; border: 1px solid #e4e7ee; border-radius: 9px;
  padding: 0; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.cc-menu-toggle:hover { border-color: #b9bfcc; background: #f7f8fb; }
/* The visible control is 36-40px to sit comfortably in the header, but the
   touch target is padded out to the 44px comfort guideline. */
.cc-menu-toggle { position: relative; }
.cc-menu-toggle::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 44px; height: 44px;
}

/* Burger: the middle bar is the element, the outer two are pseudo-elements.
   On open they rotate into an X. */
.cc-burger, .cc-burger::before, .cc-burger::after {
  display: block; width: 18px; height: 1.5px;
  background: #101319; border-radius: 2px;
  transition: transform .28s ease, opacity .18s ease;
}
.cc-burger { position: relative; }
.cc-burger::before, .cc-burger::after { content: ''; position: absolute; left: 0; }
.cc-burger::before { top: -6px; }
.cc-burger::after  { top: 6px; }

.cc-menu-toggle[aria-expanded="true"] .cc-burger            { background: transparent; }
.cc-menu-toggle[aria-expanded="true"] .cc-burger::before    { transform: translateY(6px) rotate(45deg); }
.cc-menu-toggle[aria-expanded="true"] .cc-burger::after     { transform: translateY(-6px) rotate(-45deg); }

.cc-mobile-nav {
  display: none;                 /* becomes block at <720px with JS */
  position: absolute; top: 100%; left: 0; right: 0;
  /* Fully opaque, unlike the header. A translucent panel + backdrop-filter
     let the hero headline read straight through the menu, and blurred
     backdrops inside an animated overflow:hidden box composite unreliably.
     The header keeps its translucency; the dropdown must stay legible. */
  background: #ffffff;
  border-bottom: 1px solid rgba(16,19,25,0.07);
  box-shadow: 0 18px 40px -24px rgba(23,32,64,0.28);
  overflow: hidden;
  max-height: 0; opacity: 0; visibility: hidden;   /* visibility keeps the links out of the tab order */
  transition: max-height .3s ease, opacity .22s ease, visibility 0s linear .3s;
}
.cc-mobile-nav.cc-open {
  max-height: 420px; opacity: 1; visibility: visible;
  transition: max-height .3s ease, opacity .22s ease, visibility 0s;
}
.cc-mobile-nav nav { display: flex; flex-direction: column; padding: 6px 24px 14px; }
.cc-mobile-nav a {
  font-size: 16px; font-weight: 500; color: #232936;
  padding: 14px 2px;                       /* >=44px tap target */
  border-bottom: 1px solid #eef0f5;
}
.cc-mobile-nav a:last-child { border-bottom: 0; }
.cc-mobile-nav a:hover, .cc-mobile-nav a:focus-visible { color: oklch(0.50 0.15 259); }

@media (max-width: 719px) {
  html.cc-js .cc-menu-toggle { display: flex; }
  html.cc-js .cc-mobile-nav  { display: block; }

  /* Without JS the toggle does nothing, so fall back to showing the links
     inline rather than leaving a dead button and no navigation at all. */
  html:not(.cc-js) .cc-nav-main {
    display: flex !important;
    order: 3; width: 100%; margin-left: 0 !important;
    gap: 14px !important; padding-top: 4px;
  }
  html:not(.cc-js) [data-nav-inner] { flex-wrap: wrap; }

  /* Reclaim header width for the toggle: at 320px the logo + CTA + gap +
     padding already came to 6px MORE than the viewport. */
  [data-nav-inner]  { padding: 14px 16px !important; gap: 14px !important; }
  .cc-header-cta    { font-size: 13px !important; padding: 9px 14px !important; }
}

@media (max-width: 360px) {
  [data-nav-inner] { padding: 12px !important; gap: 8px !important; }
  .cc-header-cta   { font-size: 12px !important; padding: 8px 10px !important; }
  .cc-menu-toggle  { width: 36px; height: 36px; }
  .cc-mobile-nav nav { padding: 6px 16px 12px; }
}

/* Anchor targets must clear the fixed header when jumped to from the menu.
   The header is shorter on mobile since its padding was tightened. */
main > section[id] { scroll-margin-top: 84px; }
@media (max-width: 719px) { main > section[id] { scroll-margin-top: 78px; } }
@media (max-width: 360px) { main > section[id] { scroll-margin-top: 70px; } }

/* Above the nav's 720px reveal point the five links need ~401px on one line.
   `flex-wrap: wrap` breaks them onto three rows when that is not available,
   growing the fixed header from 74px to 98px. Adding the logo mark widened
   the lockup 88px -> 126px, which pushed the wrap point out from ~759px to
   ~797px -- so this band covers 720-815px and tightens the gaps and link size
   to buy back the ~90px needed at the narrow end.
   The !important is required: the design sets `gap` and `font-size` inline,
   and an inline style beats a class rule regardless of media query. */
@media (min-width: 720px) and (max-width: 815px) {
  [data-nav-inner]    { gap: 16px !important; }
  .cc-nav-main        { gap: 13px !important; flex-wrap: nowrap !important; }
  .cc-nav-main a      { font-size: 13.5px !important; white-space: nowrap; }
}

/* Safety net for long unbroken strings (the contact email, URLs a client might
   paste into a page) on very narrow screens. */
@media (max-width: 479px) {
  h1, h2, h3, p, li, a, span { overflow-wrap: break-word; }
}

/* --- Scroll reveals ------------------------------------------------------
   `.cc-anim` is added to <html> by JavaScript, so with JS off (or if the
   IntersectionObserver never fires) every [data-reveal] block stays fully
   visible. Content visibility must never depend on an animation.
   ------------------------------------------------------------------------ */

.cc-anim [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.cc-anim [data-reveal].cc-in {
  opacity: 1;
  transform: translateY(0);
}

/* --- FAQ accordion -------------------------------------------------------
   Answers are in the DOM at all times (crawlable, and matching the FAQPage
   schema); only their height is clipped. Without JS they are all open.
   ------------------------------------------------------------------------ */

.cc-faq        { border: 1px solid #e8eaf1; }
.cc-faq-panel  { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.cc-faq-icon   { transition: transform .3s; transform: rotate(0deg); }
/* The glyph is generated content, not a text node: as a text node it landed in
   every plain-text extraction as "Do you use PBNs? +". */
.cc-faq-icon::after { content: '+'; }
.cc-faq.cc-open .cc-faq-panel { max-height: 400px; }
.cc-faq.cc-open .cc-faq-icon  { transform: rotate(45deg); }
.cc-faq.cc-open               { border-color: oklch(0.72 0.10 259); }

html:not(.cc-js) .cc-faq-panel { max-height: none; }
html:not(.cc-js) .cc-faq-icon  { display: none; }

/* --- WordPress admin bar -------------------------------------------------
   The header is position:fixed at top:0, which the admin bar would overlap.
   ------------------------------------------------------------------------ */

body.admin-bar [data-nav] { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar [data-nav] { top: 46px; }
}

/* --- Generic content pages (page.php / index.php / 404.php) -------------- */

.cc-prose { font-size: 16.5px; line-height: 1.7; color: #3d4351; }
.cc-prose h1, .cc-prose h2, .cc-prose h3, .cc-prose h4 {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15; color: #101319;
  margin: 2em 0 0.6em;
}
.cc-prose h1 { font-size: clamp(32px, 4.4vw, 46px); margin-top: 0; }
.cc-prose h2 { font-size: clamp(24px, 3vw, 32px); }
.cc-prose h3 { font-size: 20px; }
.cc-prose p, .cc-prose ul, .cc-prose ol { margin: 0 0 1.15em; }
.cc-prose ul, .cc-prose ol { padding-left: 1.3em; }
.cc-prose li { margin-bottom: 0.5em; }
.cc-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.cc-prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 20px;
  border-left: 3px solid oklch(0.50 0.15 259); color: #232936;
}
.cc-prose code {
  background: #f4f6fb; border: 1px solid #e8eaf1; border-radius: 5px;
  padding: 1px 6px; font-size: 0.92em;
}
.cc-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.15em; }
.cc-prose th, .cc-prose td { border: 1px solid #e8eaf1; padding: 10px 12px; text-align: left; }

.cc-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #101319; color: #ffffff; padding: 12px 18px;
  border-radius: 0 0 8px 0; font-size: 14px; font-weight: 600;
}
.cc-skip-link:focus { left: 0; color: #ffffff; }