/* ============================================================================
   components.css — Global component layer for webworkskc.com
   ----------------------------------------------------------------------------
   Reusable primitives extracted from the homepage + service + blog CSS (Phase B).
   Loaded AFTER style.css (so it inherits all :root tokens) and BEFORE any
   per-page stylesheet (so a page can still override a component locally).

   These are NEW class names. The approved homepage references none of them, so
   adding this file cannot change the homepage. New/interior pages assemble from
   these instead of re-styling from scratch.

   Recolor any component through one custom property:  style="--accent:var(--rb-green)"
   ============================================================================ */

/* Design tokens (including --accent, --tint-blue, --tint-orange) live in tokens.css,
   which loads before this file. Recolor any component with:  style="--accent:var(--rb-green)" */

/* ============================================================
   CARD  —  one surface object; compose with the modifiers below.
   Padding stays with the page/use-context (it varies by design),
   so .card only owns surface + border + radius + accent + shadow + hover.
   ============================================================ */
.card{
  position:relative;
  background:var(--card-bg, var(--white));
  border:1px solid var(--border-lt);
  border-radius:var(--card-radius, var(--rad-md));
  transition:var(--trans);
  color:inherit;
}
/* surface */
.card--tint{ --card-bg:var(--bg); }
.card--ghost{ --card-bg:var(--blue-ghost); border-color:var(--border); }
/* radius */
.card--sm{ --card-radius:var(--rad-sm); }
.card--lg{ --card-radius:var(--rad-lg); }
.card--xl{ --card-radius:var(--rad-xl); }
/* top accent (uses --accent; default blue). accent-bar = hero-style gradient */
.card--accent-top{ border-top:3px solid var(--accent); }
.card--accent-bar{ overflow:hidden; }
.card--accent-bar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--blue-lt),var(--orange));
}
/* shadow */
.card--shadow{ box-shadow:var(--shadow-sm); }
.card--raise{ box-shadow:var(--shadow-lg); }
/* hover lift */
.card--lift:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card--lift-border:hover{ border-color:var(--blue); }
.card--hover-white:hover{ background:var(--white); }   /* tinted card → white on hover */
.card--hover-raise:hover{ box-shadow:var(--shadow-md); } /* grow shadow without lifting */

/* ============================================================
   BADGE / PILL  —  small uppercase label
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--badge-bg, var(--blue));color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 12px;border-radius:var(--rad-full);width:fit-content;
}
.badge--orange{ --badge-bg:var(--orange); }
.badge--soft{
  background:var(--tint-blue);border:1px solid rgba(0,147,203,.28);
  color:var(--blue);font-weight:700;font-size:11.5px;letter-spacing:.08em;
  padding:6px 16px 6px 10px;
}

/* ============================================================
   CHIP / TAG  —  interactive soft chip (e.g. provider-login tags)
   ============================================================ */
.chip{
  display:inline-block;background:var(--blue-ghost);border:1px solid var(--border);
  border-radius:var(--rad-sm);padding:4px 12px;font-size:12.5px;font-weight:600;
  color:var(--blue);text-decoration:none;white-space:nowrap;transition:var(--trans);
}
a.chip:hover{ background:var(--blue);color:#fff;border-color:var(--blue); }
.chip--static{ background:var(--bg-alt);border-color:var(--border-lt);color:var(--text-lt); }

/* TAG LIST — a labeled wrap of chips (provider logins, account-access lists).
   .tag-label = the small uppercase caption above a .tags row of .chip items. */
.tag-label{ display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-lt);margin:14px 0 8px; }
.tags{ display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0; }

/* ============================================================
   PROVIDER CARD  —  reusable "account I'll need access to" card
   (provider-logins partial). Surface = compose with
   .card .card--sm .card--accent-top in markup; this owns padding + text.
   ============================================================ */
.provider-card{ padding:18px 20px;margin-bottom:16px; }
.provider-card:last-child{ margin-bottom:0; }
.provider-title{ font-size:16px;font-weight:700;color:var(--text);margin:0 0 8px; }
.provider-intro{ font-size:14px;line-height:1.65;color:var(--text-md);margin:0 0 10px; }
.provider-intro code{ background:var(--blue-ghost);padding:1px 6px;border-radius:4px;font-size:12.5px;color:var(--blue-dk); }

/* ============================================================
   PILL  —  bordered "icon + label" tile (industries, feature/capability
   lists). Bigger and blockier than a .chip; hover lifts + tints blue.
   Lay them out with your own grid (e.g. .ind-grid).
   ============================================================ */
.pill{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--border);border-radius:var(--rad-md);
  padding:16px 18px;font-size:14px;font-weight:600;color:var(--text-md);
  transition:var(--trans);cursor:default;
}
.pill:hover{ border-color:var(--blue);color:var(--blue);background:var(--blue-ghost);transform:translateY(-2px); }
.pill__ico{ font-size:20px;flex-shrink:0; }
.pill--link{ cursor:pointer;text-decoration:none; }   /* industries/capability pills that link to a page */

/* ============================================================
   CALLOUT  —  accent-border message box
   ============================================================ */
.callout{
  background:var(--callout-bg, var(--blue-ghost));
  border-left:4px solid var(--callout-accent, var(--blue));
  padding:20px 24px;margin-bottom:32px;border-radius:var(--rad-sm);
  font-size:16px;line-height:1.7;color:var(--text-md);
}
.callout strong{ color:var(--callout-accent, var(--blue)); }
.callout a{ color:var(--blue);font-weight:600; }
.callout--orange{
  --callout-bg:var(--orange-pale); --callout-accent:var(--orange);
  border-left-width:3px;border-radius:0 var(--rad-sm) var(--rad-sm) 0;
  padding:10px 14px;margin:10px 0;font-size:13px;line-height:1.6;
}
.callout--orange strong{ color:var(--orange-dk); }
.callout--note{
  border-left:none;border:1px solid rgba(250,163,0,.3);
  background:var(--orange-pale);color:var(--orange-dk);
  text-align:center;font-weight:700;font-size:13px;
  padding:13px 16px;border-radius:var(--rad-md);margin:0;
}

/* ============================================================
   LEAD  —  intro paragraph under a heading
   ============================================================ */
.lead{ font-size:17px;line-height:1.75;color:var(--text-md);max-width:600px; }
.lead--muted{ color:var(--text-lt); }
.lead--on-dark{ color:rgba(255,255,255,.75); }

/* ============================================================
   PAGE PROSE  —  in-content text primitives for interior pages
   (.page-section spacing, .page-intro body copy, .page-note caption,
   .page-prompt question lead). Generic; any page/layout can use them.
   ============================================================ */
.page-section{ margin-bottom:40px; }
.page-section:last-child{ margin-bottom:0; }
.page-intro{ font-size:14.5px;color:var(--text-md);line-height:1.7;margin:0 0 18px; }
.page-intro a,.page-note a{ color:var(--blue);font-weight:600; }
.page-note{ font-size:13.5px;color:var(--text-md);line-height:1.65;margin:12px 0 0; }
.page-prompt{ font-size:13.5px;font-weight:700;color:var(--text);margin:0 0 12px; }

/* ============================================================
   CHECKLIST  —  a list with checkbox markers that recolour through
   --accent (so inside a .rainbow/[data-rainbow] scope each marker
   picks up that scope's colour; outside one it falls back to the
   global --accent default = blue). Default is the compact, in-flow
   style (onboarding accordion bodies). Add .checklist--ruled for the
   roomier, row-divided variant (the website-repair "quick questions").
   ============================================================ */
.checklist{ list-style:none;padding:0;margin:10px 0 0;font-size:13px;color:var(--text-md);line-height:1.7; }
.checklist li{ position:relative;padding:5px 0 5px 26px; }
.checklist li::before{
  content:'';position:absolute;left:0;top:8px;width:15px;height:15px;
  border:1.5px solid var(--accent);border-radius:3px;background:var(--white);
}
.checklist em{ color:var(--text-md); }
/* ruled variant — larger text + a divider under each row */
.checklist--ruled{ margin:0;font-size:14px;line-height:1.5; }
.checklist--ruled li{ padding:9px 0 9px 28px;border-bottom:1px solid var(--border-lt); }
.checklist--ruled li:last-child{ border-bottom:none; }
.checklist--ruled li::before{ top:11px; }

/* ============================================================
   HEADING HELPERS  —  highlight spans + interior-page heading levels
   ============================================================ */
/* highlight one word in a heading. Use via pageHeader's headingHighlight +
   highlightColor, or write <span class="hl-green">word</span> in any heading.
   All seven trace to the single rainbow source (--rb-1…--rb-7). */
.hl-red{ color:var(--rb-red); }
.hl-orange{ color:var(--rb-orange); }
.hl-yellow{ color:var(--rb-yellow); }
.hl-green{ color:var(--rb-green); }
.hl-blue{ color:var(--rb-blue); }
.hl-indigo{ color:var(--rb-indigo); }
.hl-violet{ color:var(--rb-violet); }

/* interior page title (h1) */
.page-h1{
  font-family:var(--font-head);font-weight:800;
  font-size:clamp(30px,4vw,46px);line-height:1.08;letter-spacing:-.025em;
  color:var(--text);margin:0 0 16px;max-width:780px;
}
/* in-content section heading (blue, underlined rule) */
.content-h2{
  font-family:var(--font-head);font-size:21px;font-weight:700;color:var(--blue);
  margin:0 0 16px;padding-bottom:10px;border-bottom:2px solid var(--blue-pale);
}

/* ============================================================
   ICON BOX  —  centered icon in a sized rounded shape
   ============================================================ */
.icon-box{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:var(--ibox-size,44px);height:var(--ibox-size,44px);
  border-radius:var(--ibox-radius,9px);
  background:var(--ibox-bg,var(--blue-pale));color:var(--ibox-fg,var(--blue));
  font-size:var(--ibox-fs,18px);
}
.icon-box--circle{ --ibox-radius:50%; }
.icon-box--sm{ --ibox-size:28px; --ibox-fs:14px; }
.icon-box--lg{ --ibox-size:60px; --ibox-fs:24px; }

/* ============================================================
   FIELD  —  form label + input/textarea/select with focus ring
   ============================================================ */
.field{ display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--text); }
.field-opt{ font-weight:500;color:var(--text-lt); }
.field input,.field textarea,.field select{
  font-family:var(--font-body);font-size:14.5px;font-weight:400;color:var(--text);
  background:var(--white);border:1px solid var(--border);border-radius:var(--rad-sm);
  padding:10px 12px;transition:var(--trans);width:100%;
}
.field textarea{ resize:vertical;min-height:110px; }
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,147,203,.12);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--text-xlt); }

/* ============================================================
   CRUMBS  —  breadcrumb trail for interior pages
   ============================================================ */
.crumbs{ font-size:12.5px;color:var(--text-lt);margin-bottom:16px;display:flex;flex-wrap:wrap;align-items:center;gap:4px; }
.crumbs a{ color:var(--text-lt);font-weight:600;transition:var(--trans); }
.crumbs a:hover{ color:var(--blue); }
.crumbs [aria-current]{ color:var(--text-md);font-weight:700; }
.crumb-sep{ color:var(--text-xlt);margin:0 2px; }

/* ============================================================
   TRUST  —  row of "✓ label" trust signals
   ============================================================ */
.trust{ display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:24px;align-items:center; }
.trust--center{ justify-content:center;margin-top:0; }
.trust-item{ display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-md); }
.trust-item::before{
  content:'✓';display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--blue);color:#fff;
  font-size:11px;font-weight:800;flex-shrink:0;
}

/* ============================================================
   DIVIDER  —  labeled horizontal rule ("— Step One —").
   Reusable in main content or a sidebar:
   <div class="divider"><span>Label</span></div>
   ============================================================ */
.divider{ display:flex;align-items:center;gap:10px;margin:16px 0; }
.divider::before,.divider::after{ content:'';flex:1;height:1px;background:var(--border); }
.divider span{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);white-space:nowrap;
}

/* ============================================================
   SIDEBAR  —  sticky right-rail primitives for service-layout pages
   (website-repair, onboarding, future). The card shell composes with
   .card .card--ghost .card--accent-top in markup; .sidebar-card only
   adds the padding. .sidebar-phone-card is the "not constantly
   monitored" phone note. The sticky behavior lives on .page-rail.
   ============================================================ */
.sidebar-card{ padding:22px; }
.sidebar-phone-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--rad-sm);
  padding:14px;text-align:center;font-size:14px;color:var(--text-md);line-height:1.55;
}
.sidebar-phone-num{
  display:block;font-family:var(--font-head);font-size:20px;font-weight:800;
  color:var(--blue);text-decoration:none;margin-top:4px;
}
.sidebar-phone-note{ font-size:11.5px;color:var(--text-lt);margin:8px 0 0;line-height:1.55; }

/* ============================================================
   ACCORDION  —  shared disclosure skin for BOTH native <details> and
   JS-toggled accordions. Surface = compose with .card in markup. The
   open-state hook is either [open] (native <details>) or .open (JS class).
   .acc__toggle rotates 45° when open and recolours through --accent;
   add .acc__toggle--circle for the bordered-circle treatment (the FAQ).
   Bodies stay page-specific (native <details> auto-hides; a JS accordion
   toggles display itself), so only the summary row + toggle live here —
   that's the part both implementations duplicated.
   ============================================================ */
.acc__summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:14px 18px;text-align:left;background:transparent;
  cursor:pointer;user-select:none;list-style:none;
}
.acc__summary::-webkit-details-marker,.acc__summary::marker{ display:none; }
.acc__toggle{
  flex-shrink:0;line-height:1;font-weight:300;font-size:22px;
  color:var(--accent,var(--blue));transition:var(--trans);
}
.acc[open] .acc__toggle,.acc.open .acc__toggle{ transform:rotate(45deg); }
.acc__toggle--circle{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;border:1.5px solid var(--border);font-size:18px;
}
.acc.open .acc__toggle--circle{ background:var(--accent,var(--blue));border-color:var(--accent,var(--blue));color:#fff; }

/* Accordion ITEM (content variant) — a native <details> disclosure. Surface =
   compose with .card in markup; the open-state toggle comes from the .acc skin
   above. These add the item spacing + the title/body/intro/note content styles,
   so any page can build a content accordion (the homepage FAQ is a separate
   variant that uses .faq-* and is unaffected by these classes). The body
   recolours through --accent, so inside a rainbow scope each item is tinted. */
.acc-item{ margin-bottom:10px; }
.acc__title{ font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--text);margin:0; }
.acc__body{ padding:0 18px 14px;border-top:1px solid var(--border-lt); }
.acc__intro{ font-size:13.5px;color:var(--text-md);line-height:1.65;margin:10px 0; }
.acc__intro code{ background:var(--blue-ghost);padding:1px 6px;border-radius:4px;font-size:12.5px;color:var(--blue-dk); }
.acc__intro a{ color:var(--blue);font-weight:700; }
.acc__note{ font-size:12px;color:var(--text-lt);line-height:1.5;margin:8px 0 0; }

/* ============================================================
   RAINBOW  —  rotate --accent through the ROYGBIV ramp.
   Put `.rainbow` on a container and its DIRECT children each get an
   --accent in order (red→…→violet, repeating every 7). Because every
   component recolors through --accent, this tints cards, callouts,
   accordions, even <li> bullets with no per-item work.

   These nth rules are the no-JS fallback (each container restarts at red).
   The rainbow script in main.js upgrades any element marked `data-rainbow`
   to a single PAGE-CONTINUOUS counter, so a later rainbow block picks up
   where the previous one left off. For scopes whose items aren't direct
   children (e.g. accordions amongst prose), skip `.rainbow` and use
   `data-rainbow data-rainbow-item=".selector"` — that path is JS-only.
   Add `data-rainbow-reset` to restart the rotation at red from that scope.
   ============================================================ */
.rainbow > *{ --accent:var(--rb-1); }
.rainbow > *:nth-child(7n+2){ --accent:var(--rb-2); }
.rainbow > *:nth-child(7n+3){ --accent:var(--rb-3); }
.rainbow > *:nth-child(7n+4){ --accent:var(--rb-4); }
.rainbow > *:nth-child(7n+5){ --accent:var(--rb-5); }
.rainbow > *:nth-child(7n+6){ --accent:var(--rb-6); }
.rainbow > *:nth-child(7n+7){ --accent:var(--rb-7); }

/* ============================================================
   BUTTON modifier  —  full-width (compose with .btn .btn-blue etc.)
   ============================================================ */
.btn-block{ width:100%;justify-content:center; }