/*
 * Base rules for the SmarTuna theme.
 *
 * The page markup carries its own inline styles, faithfully to the Claude
 * Design source. This file only holds what inline styles cannot express:
 * hover and focus states, the nav dropdowns, the scroll-reveal gate, and the
 * responsive collapses the static design never declared.
 */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg-page, #ffffff);
  color: var(--color-text-primary, #111111);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: #00b6ff; text-decoration: none; font-weight: 800; }
a:hover { color: #0092d6; }
nav a, header a, footer a { font-weight: inherit; text-decoration: none; }

/* Top-menu and footer links underline on hover. Two opt-outs: the header CTA is
   a button, and the logo links wrap an image with no text to underline. */
header a:not(.st-btn):hover,
footer a:hover { text-decoration: underline; }

/* Each dropdown link contains its label AND the caret glyph, so the rule above
   drew the underline under the arrow too. text-decoration propagates to in-flow
   children and cannot be cancelled on the child, so the anchor takes none and
   the label span carries the underline instead. The plain top-level link
   (About Us) has the same span, so it still underlines - it just has no caret. */
header .st-nav__group > a:not(.st-btn):hover { text-decoration: none; }
.st-nav__group > a:hover .st-nav__label { text-decoration: underline; }

header a:has(img):hover,
footer a:has(img):hover { text-decoration: none; }

img { max-width: 100%; }

/* Headings keep the weights the design pushed through its own overrides. */
h1, h2 { font-weight: 800; }
h3, h4 { font-weight: 800; }

/* ---- Buttons -------------------------------------------------------------
   Ported from the design system's Button component so the markup can use a
   class instead of repeating twenty inline declarations per button.        */

.st-btn {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: background 200ms cubic-bezier(.4, 0, .2, 1), border-color 200ms cubic-bezier(.4, 0, .2, 1), color 200ms cubic-bezier(.4, 0, .2, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}

.st-btn--sm { padding: 8px 16px; font-size: 0.875rem; }
.st-btn--md { padding: 12px 24px 13px; font-size: 1rem; }
.st-btn--lg { padding: 16px 32px; font-size: 1.125rem; }

.st-btn--primary { background: #00abff; color: #ffffff; border-color: #00abff; }
.st-btn--secondary { background: transparent; color: #060f32; border-color: #060f32; }
.st-btn--inverse { background: transparent; color: #ffffff; border-color: #ffffff; }
.st-btn--accent { background: transparent; color: #00d9ff; border-color: #00d9ff; }

/* Hover for the design-system buttons.
   The canvas drove these through React state, so the flattened markup carries
   only the resting look - as inline styles, which beat any normal rule. These
   therefore have to be !important, exactly as the canvas's own generated hover
   classes were. Buttons never take the link underline. */

.st-btn--primary:hover,
.st-btn--secondary:hover,
.st-btn--inverse:hover,
.st-btn--accent:hover { text-decoration: none !important; }

.st-btn--primary:hover {
  background: #00b6ff !important;
  border-color: #00b6ff !important;
  color: #ffffff !important;
}

.st-btn--secondary:hover {
  background: rgba(6, 15, 50, 0.06) !important;
  color: #060f32 !important;
}

.st-btn--inverse:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

.st-btn--accent:hover {
  background: rgba(0, 217, 255, 0.12) !important;
  color: #00d9ff !important;
}

/* A CTA is a link wrapping a styled span, so give the whole thing the pointer
   and keep it from ever picking up an underline. */
a:has(> .st-btn--primary),
a:has(> .st-btn--secondary),
a:has(> .st-btn--inverse),
a:has(> .st-btn--accent) { text-decoration: none; cursor: pointer; }

span[class^="st-btn--"] { cursor: pointer; }

/* Buttons are semibold. The tagged buttons carry this inline, so this is the
   fallback for any that lose their inline weight. */
[class^="st-btn--"] { font-weight: 600; }

/* ---- Homepage solution rows ----------------------------------------------
   Numbers and the hover fill are stripped at build time (see
   restyle_solution_rows / drop_hover_fill in _tools/build_theme.py). What is
   left is the hover itself: black at 1.25% across the row.

   A neutral darkening rather than a colour: it reads the same wherever the
   row sits over the pale network artwork, and does not compete with the
   accent used by the arrow. The row's 24px of side padding keeps the text
   off the edge of that highlight. */

.st-solrow:hover { background: rgba(0, 0, 0, 0.0125); }
.st-solrow:focus-visible { outline: 3px solid #00abff; outline-offset: 2px; }

/* In-body link that should not shout: white, undecorated, inheriting the
   surrounding weight rather than the 800 that `a` carries site-wide, and
   picking up the on-dark accent only on hover. A class rather than inline
   styles because :hover has no inline equivalent - and it outranks the bare
   `a` rules on specificity, so the weight and colour there do not apply.
   text-decoration is stated on both states rather than left to `a`, so no
   later rule can reintroduce an underline on hover. */

.st-inline-link {
  color: #ffffff;
  font-weight: inherit;
  text-decoration: none;
  transition: color 160ms ease;
}

.st-inline-link:hover { color: #00d9ff; text-decoration: none; }

/* FAQ sidebar links pick up the accent, matching the design's hover. */
.st-faq__navlink:hover { color: #00b6ff; border-left-color: #00b6ff; }

@media (max-width: 900px) {
  .st-faq__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .st-faq__side { position: static !important; }
}

/* Contact form fields. */
.st-field:focus {
  outline: none;
  border-color: #00abff !important;
  box-shadow: 0 0 0 3px rgba(0, 171, 255, 0.14);
}

.st-faq__q:focus-visible,
.st-field:focus-visible { outline: 3px solid #00abff; outline-offset: 2px; }

@media (max-width: 720px) {
  .st-form__row { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Readiness Check answer options. */
.st-quiz-option:hover { border-color: #00abff !important; background: #f6fcff !important; }
.st-quiz-option:hover > span:first-child { border-color: #00abff !important; }
.st-quiz-option:focus-visible { outline: 3px solid #00abff; outline-offset: 2px; }

/* ---- Header nav ----------------------------------------------------------
   The design computed dropdown position in JS and only mounted the open panel.
   Here every panel is in the DOM and revealed on hover or keyboard focus, so
   the menu works without JavaScript and is crawlable.                       */

.st-nav__panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}

.st-nav__group { position: static; }
.st-nav__group:hover > .st-nav__panel,
.st-nav__group:focus-within > .st-nav__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
}

/* Panels align to their own group's left edge, under their trigger.

   `--end` right-aligns a panel so it cannot overflow the header. It applied to
   Resources while that was the last nav item; now About Us sits to its right,
   so Resources aligns like the rest and the class is applied to nothing. It is
   kept for whenever a dropdown does end up hard against the right edge. */
.st-nav__group { position: relative; }
.st-nav__panel { left: 0; }
.st-nav__group--end .st-nav__panel { left: auto; right: 0; }

.st-nav__group > a:hover { color: #00d9ff; }
.st-nav__item:hover { color: #00d9ff; padding-left: 28px; }
.st-footer__link:hover { color: #00d9ff; }

/* ---- Scroll reveal -------------------------------------------------------
   Hidden only once JS has confirmed it is running, so no-JS renders visible. */

.st-js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(.22, .61, .36, 1), transform 700ms cubic-bezier(.22, .61, .36, 1);
}

.st-js [data-reveal][data-st-in] { opacity: 1; transform: none; }
.st-js [data-reveal][data-reveal-fade] { transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .st-js [data-reveal] { opacity: 1; transform: none; }
}

/* ---- Responsive ----------------------------------------------------------
   The design is a fixed desktop composition and never declared its collapses,
   so they are defined here rather than left to chance.                      */

@media (max-width: 1024px) {
  .st-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px !important; }
}

/* ---- Mobile menu ---------------------------------------------------------
   The design is a desktop composition and never declared a small-screen
   header, so every dropdown rendered inline and the header ran ~1480px tall
   before the hero came into view. Below 860px the nav collapses behind a
   toggle and each group becomes an accordion.

   Gated on .st-js: without JavaScript nothing can open the menu, so the nav
   and the header actions stay visible and the site remains fully navigable.

   The header's inline styles set display:flex on both the nav and the actions
   block, and inline beats a normal rule - hence !important on every display
   and layout declaration that has to win here.                              */

.st-nav__toggle,
.st-nav__expand { display: none; }

@media (max-width: 860px) {
  .st-header { flex-wrap: wrap; gap: 16px !important; }
  .st-header > a:first-child { order: 1; }

  /* --- toggle button --- */
  .st-nav__toggle {
    order: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease;
  }

  .st-nav__toggle:hover { border-color: #00d9ff; color: #00d9ff; }
  .st-nav__toggle:focus-visible { outline: 3px solid #00d9ff; outline-offset: 2px; }

  .st-nav__bars { position: relative; }

  .st-nav__bars,
  .st-nav__bars::before,
  .st-nav__bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    transition: transform 200ms ease, background-color 160ms ease;
  }

  .st-nav__bars::before,
  .st-nav__bars::after { content: ''; position: absolute; left: 0; }
  .st-nav__bars::before { top: -6px; }
  .st-nav__bars::after { top: 6px; }

  .st-nav__toggle[aria-expanded="true"] .st-nav__bars { background: transparent; }
  .st-nav__toggle[aria-expanded="true"] .st-nav__bars::before { transform: translateY(6px) rotate(45deg); }
  .st-nav__toggle[aria-expanded="true"] .st-nav__bars::after { transform: translateY(-6px) rotate(-45deg); }

  /* --- collapsed by default, once JS can open it again --- */
  .st-js .st-nav,
  .st-js .st-header__actions { display: none !important; }

  .st-js .st-header[data-st-menu="open"] .st-nav,
  .st-js .st-header[data-st-menu="open"] .st-header__actions { display: flex !important; }

  /* --- the open menu --- */
  .st-nav {
    order: 3;
    width: 100%;
    flex-direction: column !important;
    align-items: stretch !important;
    white-space: normal !important;
    gap: 0 !important;
  }

  .st-nav__group {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .st-nav__group > a { flex: 1 1 auto; padding: 15px 0; }
  .st-nav__caret { display: none; }

  .st-nav__expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: #ffffff;
    font-family: inherit;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: color 160ms ease;
  }

  .st-nav__expand::after { content: '+'; }
  .st-nav__expand[aria-expanded="true"]::after { content: '−'; }
  .st-nav__expand:hover,
  .st-nav__expand[aria-expanded="true"] { color: #00d9ff; }
  .st-nav__expand:focus-visible { outline: 3px solid #00d9ff; outline-offset: 2px; }

  .st-nav__panel {
    flex: 0 0 100%;
    position: static !important;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding-top: 0;
    padding-bottom: 10px;
  }

  /* Each group starts closed. Hovering a group must not open it on a touch
     device, so the desktop hover rule is overridden here too. */
  .st-js .st-nav__panel,
  .st-js .st-nav__group:hover > .st-nav__panel,
  .st-js .st-nav__group:focus-within > .st-nav__panel { display: none; }

  .st-js .st-nav__group[data-st-open] > .st-nav__panel { display: block; }

  .st-nav__panel > div { min-width: 0 !important; box-shadow: none !important; background: transparent !important; border-top: 0 !important; }
  .st-nav__item { padding: 8px 0 !important; border-bottom: 0 !important; }
  .st-nav__item:hover { padding-left: 0 !important; }

  .st-header__actions {
    order: 4;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    white-space: normal !important;
    padding-top: 4px;
  }

  /* Grids.
     The design is a fixed desktop composition, so every grid carries explicit
     desktop tracks inline. The previous rule only reached grids that were a
     DIRECT child of a section, plus the three `repeat(N,...)` spellings - which
     left 188 of the site's 239 grids at desktop widths on a phone. Nested ones
     crushed their text column to nothing: `64px minmax(0,240px) minmax(0,1fr)`
     resolved to 64/199/0 at 375px, and `minmax(0,280px) minmax(0,1fr)` to
     280/11, so paragraphs rendered one character wide and hundreds of pixels
     tall.

     So: collapse every inline-tracked grid at any depth, then exempt the two
     that are genuinely correct two-up on a phone. `:not()` contributes its
     argument's specificity, so the exemptions must match or beat (0,3,0) - the
     reason they carry the same `:not()` and an element/class of their own. */

  .st-root [style*="grid-template-columns:"]:not(.st-footer__grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Homepage solution rows: text plus a 20px arrow. Exempted by class, not by
     template - `minmax(0,1fr) auto` is also used for text-beside-a-button bands
     where the button squeezes the copy to zero, and those must collapse. */
  .st-root a.st-solrow:not(.st-footer__grid) {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  /* Numbered rows on the Industries pages: 48px index + 259px of text still
     reads at 375px, so the number stays beside its line rather than above it. */
  .st-root [style*="grid-template-columns: 48px"]:not(.st-footer__grid) {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .st-footer__grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---- Article body --------------------------------------------------------
   The editor produces ordinary HTML; these rules give it the measure, leading
   and pull-quote treatment the design's article blocks specify.            */

.st-article > * { margin: 0 0 30px; }
.st-article > *:last-child { margin-bottom: 0; }

.st-article p {
  font-size: 1.125rem;
  line-height: 1.85;
  color: #454e5c;
  text-wrap: pretty;
}

.st-article h2,
.st-article h3 {
  font-family: 'Manrope', sans-serif;
  line-height: 1.24;
  letter-spacing: -0.022em;
  font-weight: 800;
  color: #111111;
  text-wrap: balance;
  margin-top: 52px;
}

.st-article h2 { font-size: clamp(1.375rem, 2.1vw, 1.75rem); }
.st-article h3 { font-size: 1.375rem; }

.st-article blockquote {
  margin: 12px 0;
  padding: 0 0 0 32px;
  border: 0;
  border-left: 2px solid #00b6ff;
  font-family: 'Manrope', sans-serif;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -0.018em;
  font-weight: 600;
  color: #111111;
}

.st-article blockquote p { font: inherit; color: inherit; margin: 0; }

.st-article ul,
.st-article ol { padding-left: 22px; }

.st-article li {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: #454e5c;
  margin-bottom: 14px;
}

.st-article ol { list-style: decimal; }
.st-article ol li::marker { color: #00b6ff; font-weight: 500; font-size: 0.875rem; }

.st-article img { height: auto; border-radius: 8px; }
.st-article a { font-weight: 800; color: #00b6ff; }

.st-post-title:hover { color: #00b6ff; }

/* Knowledge Hub list: article links underline on hover, matching the nav and
   footer rather than sitting permanently underlined. */
[data-st-post] a { text-decoration: none; }

[data-st-post] a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* Pagination, which the static design never needed. */
.pagination { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 8px; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 9px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #454e5c;
  transition: border-color 160ms ease, color 160ms ease;
}
.pagination .page-numbers:hover { border-color: #00b6ff; color: #00b6ff; }
.pagination .page-numbers.current { background: #00abff; border-color: #00abff; color: #ffffff; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}