/* SP Tax site styles. Most layout lives inline on each element; this file holds the shared basics. */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/geist-400.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/geist-500.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/geist-600.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/geist-700.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #ffffff; overflow-x: hidden; }
img { max-width: 100%; height: auto; }

a { color: #0B57D0; text-decoration: none; }
a:hover { color: #083F99; text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid #0B57D0; outline-offset: 3px; border-radius: 6px; }

/* Keep anchored sections clear of the sticky header */
[id] { scroll-margin-top: 76px; }

/* Tax Compliance dropdown: opens on hover (mouse), on click/tap, and on keyboard focus.
   It closes as soon as the pointer leaves the button and menu. */
.nav-dropdown-menu { display: none; }
.nav-dropdown.open .nav-dropdown-menu,
.nav-dropdown:has(:focus-visible) .nav-dropdown-menu { display: block; }
@media (hover: hover) and (pointer: fine) {
  .nav-dropdown:hover .nav-dropdown-menu { display: block; }
}
.nav-dropdown-menu a:hover { background: #F5F5F7; text-decoration: none; }
.nav-dropdown-toggle { -webkit-tap-highlight-color: transparent; }

/* Phone menu: the full nav collapses into a single Menu button */
.nav-menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -10px; padding: 0;
  background: none; border: 0; border-radius: 10px; color: #111113; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu { padding: 4px 24px 20px; display: flex; flex-direction: column; font-family: 'Geist', -apple-system, 'Helvetica Neue', sans-serif; }
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 0;
  border-top: 1px solid #E8E8ED; color: #111113; font-size: 17px; font-weight: 500; text-decoration: none;
}
.mobile-menu a:hover { text-decoration: none; color: #0B57D0; }
.mobile-menu-sub { font-size: 14px; font-weight: 400; color: #5B5B63; }
.mobile-menu a.mobile-menu-cta {
  margin-top: 12px; border-top: 0; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 20px; border-radius: 999px; background: #0B57D0; color: #ffffff;
}
@media (max-width: 760px) {
  .nav-links { display: none !important; }
  .nav-menu-toggle { display: inline-flex; }
}
@media (min-width: 761px) {
  .mobile-menu { display: none !important; }
}

/* ---------- Responsive layout ----------
   Section padding and gaps scale fluidly (set inline as clamp() values).
   The rules below handle the pieces that need a different arrangement on small screens. */

/* Comfortable tap targets for every menu link */
header nav > a:first-child,
.nav-links > a,
.nav-dropdown-toggle,
.product-bar-links a,
.product-bar-inner > div:first-child a { display: inline-flex; align-items: center; min-height: 44px; }
.product-bar-links a { white-space: nowrap; }
.product-bar-links a:last-child { min-height: 0; } /* the price pill keeps its original size */

/* The mobile menu can scroll if it is taller than the screen (e.g. phone in landscape) */
.mobile-menu { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Long words never push past the screen edge */
h1, h2, h3, h4, p, li { overflow-wrap: break-word; }

/* Form page illustration: keep the fanned pages side by side and scale them to fit */
.form-fan { flex-wrap: nowrap !important; }
@media (max-width: 800px) {
  .fan-card { margin: 0 -40px !important; }
}
@media (max-width: 640px) {
  .fan-card { zoom: 0.78; }
}
@media (max-width: 560px) {
  .fan-card { margin: 0 -60px !important; zoom: 0.62; }
}
@media (max-width: 400px) {
  .fan-card { zoom: 0.54; }
}
@media (max-width: 350px) {
  .fan-card { zoom: 0.47; }
}

/* Tablets */
@media (max-width: 1024px) {
  .product-bar-links { gap: 18px !important; }
}

/* Phones */
@media (max-width: 600px) {
  /* Form page sub-menu: title on one line, links in a single swipeable row */
  .product-bar-inner { display: block !important; padding-top: 4px !important; padding-bottom: 2px !important; }
  .product-bar-inner > div { min-width: 0; }
  .product-bar-links {
    flex-wrap: nowrap !important; overflow-x: auto; gap: 20px !important;
    margin: 0 -24px; padding: 0 24px; scrollbar-width: none;
  }
  .product-bar-links::-webkit-scrollbar { display: none; }
  .product-bar-links a:last-child { flex-shrink: 0; }

  /* At-a-glance stats: two per row */
  .stats > div { gap: 32px 20px !important; }
  .stat { flex: 1 1 calc(50% - 10px) !important; min-width: 0; }
  .stat p:first-child { font-size: 40px !important; }
  .stat p:last-child { font-size: 15px !important; }

  /* Cards fill the width rather than holding a desktop minimum */
  [style*="flex: 1 1 "] { min-width: 0; }
}

@media (max-width: 380px) {
  .stat p:first-child { font-size: 34px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}