/* ==========================================================================
   HALO Sphere site — shared corrections (web-interface-guidelines audit,
   19 Jul 2026).

   HOW THIS HOOKS THE PAGES
   The four pages style everything with inline style="...", so a stylesheet
   rule needs !important to win (an !important declaration beats a
   non-important inline one). What it must NOT do is *identify* elements by
   their inline style text. An earlier version of this file did exactly that
   — selectors like [style*="width: 238px"] — and it was brittle twice over:

     1. Claude Design normalises inline styles at render time (source
        `grid-template-columns:.9fr 1.1fr` renders as `0.9fr 1.1fr`), so a
        selector written against the source silently matches nothing.
     2. Any width or padding nudged in the design editor detaches its own
        responsive rule, with no error — the page just quietly stops
        reflowing on phones.

   Every hook below is now a named class carried by the HTML, or a real
   element (h1, nav, form). Change a pixel value in the editor and the
   behaviour still holds, because the class travels with the element.

   THE HOOK CLASSES — add these when you add a section
     .wrap        max-width container      → tightens gutters on small screens
     .pad-lg      big vertical padding     → reduced to 56px top/bottom
     .stack       multi-column grid        → collapses to one column
     .rule-col    column with a divider    → divider + side padding dropped
     .panel       desktop-padded panel     → padding reduced
     .deco        fixed-width artwork      → hidden on phones
     .deco-caption  caption belonging to a .deco → hidden with it
     .subscribe / .subscribe-input   newsletter form + its fixed-width input
     .navbar      header inner bar (currently styled via header > div)

   Inline styles still carry the visual design; these classes carry only the
   responsive and accessibility behaviour. Moving the visual styling onto
   classes too would be a larger refactor and is not required for this.
   ========================================================================== */

/* ---------- Focus: a visible ring on everything interactive ----------
   The newsletter input sets outline:none inline with no replacement, so a
   keyboard user loses the caret entirely. :focus-visible keeps the ring off
   mouse clicks. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #1f9bd1 !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Skip link (off-screen until focused) ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: #fff;
  color: #0e2236;
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
  font: 600 15px 'Public Sans', system-ui, sans-serif;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ---------- Touch: drop the 300ms double-tap zoom delay ---------- */
a, button, input, select, textarea {
  touch-action: manipulation;
}

/* ---------- Headings shouldn't widow ---------- */
h1, h2, h3, blockquote {
  text-wrap: balance;
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   RESPONSIVE — Home, About and Solutions ship fixed grids with no media
   queries at all, so on a phone they compress into unreadable columns
   instead of reflowing. (Apps is the exception: it already uses clamp() type
   and auto-fit grids, and mainly needs its fixed-width mockups handled.)
   ========================================================================== */

@media (max-width: 1024px) {
  .wrap {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

@media (max-width: 860px) {
  /* Desktop multi-column layouts all want to stack on a phone. */
  .stack {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Gutters and vertical rhythm: 96px section padding is too much here. */
  .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .pad-lg {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  /* Type scale — element selectors, so this holds whatever the inline
     font shorthand says on each page. */
  h1 { font-size: 34px !important; line-height: 1.12 !important; }
  h2 { font-size: 27px !important; line-height: 1.18 !important; }
  h3 { font-size: 19px !important; }
  blockquote { font-size: 22px !important; line-height: 1.35 !important; }

  /* Nav wraps instead of overflowing the viewport. */
  nav {
    flex-wrap: wrap !important;
    gap: 14px !important;
    justify-content: flex-end !important;
  }
  .navbar {
    height: auto !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }

  /* ---- Fixed-width decorative artwork (.deco) ----
     Three rigs are pinned to pixel widths and hang absolutely-positioned
     chips past their own edges; they only survive on desktop because a
     wrapper clips overflow. None carries anything the copy doesn't already
     say, so all three stand down on phones:
       Home       — the orbit diagram
       Solutions  — the integration hub, plus its .deco-caption, which is
                    written to describe a diagram that would no longer be there
       Apps       — the two outer phone mockups; the centre phone is not
                    marked .deco and fits a 375px viewport on its own. */
  .deco,
  .deco-caption { display: none !important; }

  /* Newsletter: the fixed-width input + button overflowed narrow screens. */
  .subscribe { width: 100% !important; flex-wrap: wrap !important; }
  .subscribe-input { width: 100% !important; }

  /* Column dividers read oddly once the columns are stacked. */
  .rule-col {
    border-right: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* CTA / feature panels carrying desktop-sized padding. */
  .panel { padding: 44px 24px !important; }
}