@import './tokens/fonts.css';
@import './tokens/colors.css';
@import './tokens/typography.css';
@import './tokens/spacing.css';

/* ============================================================
   Site responsive / mobile-adaptive overrides  (parryinc.co)
   Pages use desktop-only inline layout styles; these rules
   collapse them on small screens. !important is required to
   win over inline styles.
   ============================================================ */

/* --- Navigation: hamburger hidden on desktop by default --- */
.nav-mobile { display: none; position: relative; margin-left: auto; flex-shrink: 0; }
.nav-mobile > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--border-default, rgba(255,255,255,0.10));
  border-radius: 10px; color: var(--text-heading, #fff);
}
.nav-mobile > summary::-webkit-details-marker { display: none; }
.nav-burger > span,
.nav-burger > span::before,
.nav-burger > span::after {
  content: ""; display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
}
.nav-burger > span { position: relative; }
.nav-burger > span::before { position: absolute; top: -6px; left: 0; }
.nav-burger > span::after  { position: absolute; top:  6px; left: 0; }
.nav-mobile-panel {
  position: absolute; right: 0; top: 54px; width: min(78vw, 260px);
  background: var(--surface-card, #121E36);
  border: 1px solid var(--border-default, rgba(255,255,255,0.10));
  border-radius: 14px; padding: 10px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
}

/* --- Phones / small tablets --- */
@media (max-width: 768px) {
  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  /* Collapse every multi-column grid to a single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  /* Icon + content + action cards: stack and left-align the icon when collapsed */
  [style*="grid-template-columns: 56px 1fr auto"] { justify-items: start !important; row-gap: 16px !important; }

  /* Fixed / wide blocks shrink to fit the viewport (prevents sideways scroll) */
  [style*="width: 1200px"], [style*="width: 1100px"], [style*="width: 840px"],
  [style*="width: 800px"],  [style*="width: 760px"],  [style*="width: 720px"],
  [style*="width: 640px"],  [style*="width: 560px"],  [style*="width: 520px"],
  [style*="width: 500px"],  [style*="width: 380px"] { max-width: 100% !important; }

  /* Large display headings scale with the viewport */
  h1 { font-size: clamp(30px, 8.2vw, 40px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(23px, 6.2vw, 31px) !important; line-height: 1.18 !important; }

  /* Tame the biggest section padding */
  [style*="padding: 88px"], [style*="padding: 80px"], [style*="padding: 72px"] {
    padding-left: 20px !important; padding-right: 20px !important;
    padding-top: 48px !important; padding-bottom: 48px !important;
  }

  /* Swap desktop nav for hamburger */
  .nav-desktop { display: none !important; }
  .nav-mobile  { display: block !important; }
}

/* --- Tablets: relax dense grids to two columns --- */
@media (min-width: 769px) and (max-width: 1024px) {
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr 1fr !important; }
}