/**
 * HubsKit Universal Responsive Design System
 * Engineered for seamless multi-device fidelity across all screen sizes:
 * - Mobile Compact (320px - 480px)
 * - Mobile Standard (481px - 768px)
 * - Tablets & Small Laptops (769px - 1024px)
 * - Desktop (1025px - 1440px)
 * - Ultrawide / 4K (1441px+)
 *
 * Implements Modern Web Guidance:
 * - Fluid typography via clamp()
 * - Touch targets >= 44px (WCAG 2.1 AAA)
 * - Responsive table containers with native touch momentum
 * - Zero horizontal layout shifts (CLS = 0)
 * - Dynamic Viewport Units (dvh / dvw)
 */

/* ── 1. GLOBAL FLUID RESETS & OVERFLOW SAFEGUARDS ── */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  max-width: 100vw;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Ensure container wraps adapt gracefully */
.wrap {
  width: 100% !important;
  max-width: 1240px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(16px, 4vw, 32px) !important;
  padding-right: clamp(16px, 4vw, 32px) !important;
  box-sizing: border-box !important;
}

/* ── 2. FLUID RESPONSIVE TYPOGRAPHY (NO TEXT OVERFLOW) ── */
h1, .hero-title, .post-title, .page-title {
  font-size: clamp(1.85rem, 1.1rem + 3.2vw, 3.2rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto;
}

h2 {
  font-size: clamp(1.4rem, 0.95rem + 1.8vw, 2.1rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  margin-top: clamp(28px, 5vw, 48px) !important;
  margin-bottom: 16px !important;
}

h3 {
  font-size: clamp(1.15rem, 0.9rem + 1vw, 1.45rem) !important;
  line-height: 1.35 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

p, li {
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.05rem);
  line-height: 1.78;
  overflow-wrap: break-word;
}

/* ── 3. RESPONSIVE NAVIGATION SYSTEM ── */
nav {
  width: 100vw !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.nav-inner {
  width: 100% !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 clamp(12px, 3vw, 24px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

/* Tablets and below: Hide sprawling links to prevent squishing */
@media (max-width: 1024px) {
  .nav-links {
    display: none !important;
  }
  .btn-reseller-nav {
    display: none !important;
  }
}

/* Mobile Screens: Compact Header Touch targets */
@media (max-width: 640px) {
  nav {
    height: 60px !important;
  }
  .logo {
    font-size: 17px !important;
    gap: 8px !important;
  }
  .logo-mark {
    width: 22px !important;
    height: 22px !important;
  }
  .btn-login-nav {
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
  .theme-toggle-btn {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
  }
}

/* ── 4. RESPONSIVE ARTICLE & SIDEBAR GRID LAYOUT ── */
.grid-layout {
  display: grid !important;
  gap: clamp(20px, 3.5vw, 44px) !important;
  width: 100% !important;
}

@media (min-width: 1025px) {
  .grid-layout {
    grid-template-columns: 1fr 340px !important;
    align-items: start !important;
  }
}

@media (max-width: 1024px) {
  .grid-layout {
    grid-template-columns: 1fr !important;
  }
  .sidebar, aside {
    width: 100% !important;
    margin-top: 32px !important;
  }
}

/* ── 5. RESPONSIVE HERO & HEADER SECTIONS ── */
.hero-post, .page-header, .hero, .post-header {
  padding-top: clamp(84px, 12vw, 130px) !important;
  padding-bottom: clamp(24px, 5vw, 48px) !important;
  width: 100% !important;
}

/* ── 6. RESPONSIVE REGION & CURRENCY SWITCHER BAR ── */
.region-currency-bar {
  margin: clamp(16px, 3vw, 24px) auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

@media (max-width: 768px) {
  .region-currency-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    padding: 14px 16px !important;
  }
  .region-currency-bar > div:first-child {
    width: 100% !important;
  }
  .region-tabs {
    width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
  }
  .region-tab-btn {
    flex: 1 !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 9px 12px !important;
    font-size: 12.5px !important;
  }
}

/* ── 7. RESPONSIVE MEMBER PROOF OF ACCESS CARDS ── */
.member-proof-card {
  margin: clamp(20px, 4vw, 32px) 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 640px) {
  .member-proof-card > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 10px 14px !important;
  }
  .member-proof-card > div:first-child > div:first-child {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
  }
  .member-proof-card > div:first-child span[style*="monospace"] {
    max-width: calc(100vw - 110px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: inline-block !important;
  }
  .member-proof-card figcaption {
    padding: 12px 14px !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
  }
}

/* ── 8. RESPONSIVE DATA & COMPARISON TABLES ── */
/* Modern Web Guidance: Momentum scroll, touch-friendly, legible cells */
.table-responsive,
.comp-table-wrap,
[style*="overflow-x:auto"],
[style*="overflow-x: auto"] {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
  margin: clamp(18px, 3.5vw, 32px) 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  scrollbar-width: thin;
}

table {
  width: 100% !important;
  min-width: 540px !important;
  border-collapse: collapse !important;
}

table th, table td {
  padding: clamp(10px, 2vw, 14px) clamp(12px, 2.5vw, 18px) !important;
  font-size: clamp(12.5px, 0.8rem + 0.25vw, 14px) !important;
  line-height: 1.55 !important;
}

@media (max-width: 480px) {
  table {
    min-width: 480px !important;
  }
  table th, table td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
}

/* ── 9. RESPONSIVE PRICING & FEATURE GRIDS ── */
.pricing-grid, .pricing-matrix, .role-grid, .tools-grid, .features-grid {
  display: grid !important;
  gap: clamp(16px, 3vw, 24px) !important;
  width: 100% !important;
}

@media (max-width: 860px) {
  .pricing-grid, .pricing-matrix, .role-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 861px) and (max-width: 1140px) {
  .pricing-grid, .pricing-matrix {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── 10. RESPONSIVE CALLOUTS, AEO BOXES, FAQ CARDS ── */
.callout-card, .aeo-box, .direct-answer-box, .faq-card, .cta-card {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  word-wrap: break-word !important;
  border-radius: 12px !important;
}

@media (max-width: 640px) {
  .callout-card, .aeo-box, .direct-answer-box {
    padding: 16px 18px !important;
    margin: 20px 0 !important;
  }
  .faq-card {
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
  }
  .cta-card {
    padding: 24px 18px !important;
  }
  .cta-price {
    font-size: 32px !important;
  }
}

/* ── 11. ACCESSIBLE TOUCH TARGETS (WCAG 2.1 COMPLIANT) ── */
button,
a.btn-cta-main,
a.btn-reseller-nav,
a.btn-login-nav,
.region-tab-btn,
.btn-plan,
.btn-primary,
.btn-secondary {
  min-height: 44px !important;
  touch-action: manipulation;
}

@media (max-width: 640px) {
  .btn-cta-main {
    width: 100% !important;
    padding: 14px 20px !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ── 12. ULTRAWIDE & LARGE DISPLAY OPTIMIZATION (1600px+) ── */
@media (min-width: 1600px) {
  body {
    font-size: 16.5px;
  }
  .wrap {
    max-width: 1320px !important;
  }
  .hero-title, .post-title {
    font-size: 3.4rem !important;
  }
}