/* ================================================================
   NEXIFY — Advanced Responsive Enhancement System
   css/responsive.css
   Mobile-first · Cross-platform · 2026 Web Standards
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES — Breakpoints & Fluid Scales
   ──────────────────────────────────────────────────────────────── */
:root {
  /* Breakpoint reference (for documentation — CSS variables can't be used in @media) */
  --bp-xs:  320px;
  --bp-sm:  481px;
  --bp-md:  768px;
  --bp-lg:  835px;
  --bp-xl:  1025px;
  --bp-2xl: 1441px;
  --bp-3xl: 2560px;

  /* Fluid spacing scale */
  --space-1: clamp(0.25rem, 0.5vw, 0.375rem);
  --space-2: clamp(0.5rem,  1vw,   0.75rem);
  --space-3: clamp(0.75rem, 1.5vw, 1rem);
  --space-4: clamp(1rem,    2vw,   1.5rem);
  --space-5: clamp(1.25rem, 2.5vw, 2rem);
  --space-6: clamp(1.5rem,  3vw,   2.5rem);
  --space-8: clamp(2rem,    4vw,   3.5rem);
  --space-10: clamp(2.5rem, 5vw,   5rem);
  --space-12: clamp(3rem,   6vw,   6rem);
  --space-16: clamp(4rem,   8vw,   8rem);

  /* Fluid typography scale */
  --text-xs:   clamp(0.75rem,   1.5vw, 0.875rem);
  --text-sm:   clamp(0.875rem,  1.8vw, 1rem);
  --text-base: clamp(1rem,      2vw,   1.125rem);
  --text-lg:   clamp(1.125rem,  2.5vw, 1.25rem);
  --text-xl:   clamp(1.25rem,   3vw,   1.5rem);
  --text-2xl:  clamp(1.5rem,    3.5vw, 2rem);
  --text-3xl:  clamp(2rem,      5vw,   3rem);
  --text-4xl:  clamp(2.5rem,    6vw,   4rem);
  --text-hero: clamp(2.2rem,    7vw,   5rem);

  /* Touch-safe spacing */
  --touch-target: 44px;
  --touch-target-lg: 56px;

  /* Container widths */
  --container-xs:   100%;
  --container-sm:   540px;
  --container-md:   720px;
  --container-lg:   960px;
  --container-xl:   1180px;
  --container-2xl:  1440px;

  /* Safe area insets (iOS/Android notch support) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);

  /* Z-index scale */
  --z-base:    0;
  --z-above:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}

/* ────────────────────────────────────────────────────────────────
   2. BASE RESETS — Mobile-first foundations
   ──────────────────────────────────────────────────────────────── */

/* Improve iOS font rendering */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Prevent layout shift from scrollbar appearance */
@supports (scrollbar-gutter: stable) {
  html { scrollbar-gutter: stable; }
}

/* iOS Safari — prevent input zoom */
input, select, textarea {
  font-size: max(16px, 1rem) !important;
}

/* Touch tap color removal */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Remove default button/input appearance on iOS/Android */
button, input, select, textarea {
  -webkit-appearance: none;
  appearance: none;
}

/* Preserve button appearance where needed */
button.btn, a.btn, [type="button"], [type="submit"] {
  -webkit-appearance: none;
}

/* Safe area support for the body */
body {
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* ────────────────────────────────────────────────────────────────
   3. CONTAINER SYSTEM — Fluid & Responsive
   ──────────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-md);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

.container-wide {
  width: 100%;
  max-width: var(--container-2xl);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 60px);
}

/* 4K optimization */
@media (min-width: 2560px) {
  .container { max-width: 1600px; }
  .container-wide { max-width: 2200px; }
}

/* ────────────────────────────────────────────────────────────────
   4. SECTION SPACING — Fluid padding
   ──────────────────────────────────────────────────────────────── */

.section {
  padding-block: clamp(50px, 8vw, 110px);
}

.section-sm {
  padding-block: clamp(30px, 5vw, 60px);
}

.section-lg {
  padding-block: clamp(70px, 10vw, 140px);
}

/* ────────────────────────────────────────────────────────────────
   5. RESPONSIVE GRID SYSTEM
   ──────────────────────────────────────────────────────────────── */

/* Auto-responsive grid — fills columns intelligently */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 3vw, 32px);
}

.grid-auto-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(12px, 2.5vw, 24px);
}

.grid-auto-lg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(20px, 3.5vw, 40px);
}

/* Named responsive grids — align-items:stretch ensures all cards in a row share equal height */
.grid-2 { display: grid; gap: clamp(16px, 3vw, 32px); grid-template-columns: 1fr; align-items: stretch; }
.grid-3 { display: grid; gap: clamp(16px, 3vw, 32px); grid-template-columns: 1fr; align-items: stretch; }
.grid-4 { display: grid; gap: clamp(16px, 3vw, 32px); grid-template-columns: 1fr; align-items: stretch; }

@media (min-width: 600px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ────────────────────────────────────────────────────────────────
   6. HEADER & NAVIGATION — Full Responsive
   ──────────────────────────────────────────────────────────────── */

/* Safe area support for header */
.site-header {
  padding-top: var(--safe-top);
}

/* Scrolled state (added via JS) */
.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(15, 22, 35, 0.1);
}

/* Nav link minimum touch target */
.main-nav a {
  min-height: var(--touch-target);
  display: inline-flex;
  align-items: center;
}

/* Mobile nav backdrop overlay */
@media (max-width: 1200px) {
  /* Overlay is created by JS — styles here */
  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 22, 35, 0.5);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }

  .nav-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Desktop: mobile nav is always hidden, desktop nav always shown */
@media (min-width: 1201px) {
  .main-nav-desktop {
    display: flex !important;
  }
  .main-nav-mobile {
    display: none !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   7. STICKY BOTTOM CTA BAR — Mobile only
   ──────────────────────────────────────────────────────────────── */

.sticky-cta-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--c-line);
  padding: 12px 16px;
  padding-bottom: max(12px, var(--safe-bottom));
  box-shadow: 0 -8px 32px rgba(15, 22, 35, 0.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

/* Show on mobile */
@media (max-width: 767px) {
  .sticky-cta-bar {
    display: flex;
  }

  .sticky-cta-bar .btn {
    flex: 1;
    justify-content: center;
    padding: 13px 16px;
    font-size: 0.95rem;
  }

  /* Push page content up so sticky bar doesn't cover footer */
  body.has-sticky-cta {
    padding-bottom: calc(74px + var(--safe-bottom));
  }
}

/* ────────────────────────────────────────────────────────────────
   8. HERO SECTION — Responsive
   ──────────────────────────────────────────────────────────────── */

.hero {
  min-height: clamp(500px, 80dvh, 900px);
  display: flex;
  align-items: center;
  padding-block: clamp(60px, 10vw, 110px);
}

.hero-grid {
  grid-template-columns: 1fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}

@media (min-width: 980px) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; }
}

/* Hero CTA buttons — full width on mobile */
@media (max-width: 480px) {
  .hero .btn-row {
    flex-direction: column;
  }
  .hero .btn-row .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Hero stats — flex wrap on small */
.hero-stats {
  gap: clamp(20px, 4vw, 40px);
}

@media (max-width: 480px) {
  .hero-stats {
    gap: 20px;
  }
  .hero-stats .stat .num {
    font-size: 1.8rem;
  }
}

/* Hero visual card — aspect ratio preservation */
.hero-visual {
  aspect-ratio: 4 / 3.5;
}

@media (max-width: 980px) {
  .hero-visual {
    aspect-ratio: 16 / 9;
    max-width: 600px;
    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  .hero-visual {
    aspect-ratio: 4 / 3;
  }
}

/* ────────────────────────────────────────────────────────────────
   9. CARD SYSTEM — Responsive Touch-Friendly
   ──────────────────────────────────────────────────────────────── */

/* Disable hover transforms on touch devices — they persist after tap */
@media (hover: none) and (pointer: coarse) {
  .card:hover,
  .pillar:hover,
  .persona-card:hover,
  .price-card:hover,
  .partner-logo:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
}

/* Cards — touch-optimized padding */
@media (max-width: 480px) {
  .card { padding: 22px 18px; }
  .pillar { padding: 22px 18px; }
  .persona-card { padding: 22px 18px; }
  .price-card { padding: 24px 18px; }
  .cta-box { padding: 28px 20px; }
}

/* ────────────────────────────────────────────────────────────────
   10. TYPOGRAPHY — Fluid & Accessible
   ──────────────────────────────────────────────────────────────── */

/* Responsive body text */
body { font-size: clamp(0.9375rem, 1.8vw, 1rem); }

/* Responsive headings — already using clamp() in style.css, enhanced here */
@media (max-width: 480px) {
  h1 { font-size: clamp(1.75rem, 8vw, 2.2rem); }
  h2 { font-size: clamp(1.4rem,  6vw, 1.8rem); }
  h3 { font-size: clamp(1.1rem,  5vw, 1.3rem); }
}

/* Page header responsive */
.page-header {
  padding-block: clamp(48px, 8vw, 90px);
}

.page-header h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
}

/* ────────────────────────────────────────────────────────────────
   11. FORMS — Mobile-Optimized
   ──────────────────────────────────────────────────────────────── */

/* Form controls — always 16px+ to prevent iOS auto-zoom */
.form-control {
  font-size: max(16px, 1rem);
  padding: clamp(10px, 2vw, 14px) clamp(12px, 2.5vw, 16px);
  border-radius: 10px;
  min-height: var(--touch-target);
}

.form-control:focus {
  /* Improved focus ring for accessibility */
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}

/* Form row: single column on mobile */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 600px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

/* Checkbox pills — larger touch targets */
.checkbox-pill label {
  min-height: var(--touch-target);
  padding: 11px 18px;
}

/* ────────────────────────────────────────────────────────────────
   12. FOOTER — Responsive Grid
   ──────────────────────────────────────────────────────────────── */

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 50px);
}

@media (min-width: 540px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1025px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; }
}

/* Footer bottom: stack on mobile */
.footer-bottom {
  flex-direction: column;
  text-align: center;
  gap: 10px;
}

@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    text-align: left;
  }
}

/* ────────────────────────────────────────────────────────────────
   13. PARTNERS LOGOS — Responsive Grid
   ──────────────────────────────────────────────────────────────── */

.partners-logos {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 3vw, 30px);
}

@media (min-width: 600px) {
  .partners-logos { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1025px) {
  .partners-logos { grid-template-columns: repeat(5, 1fr); }
}

/* Partner logo card — fluid height */
.partner-logo {
  height: clamp(90px, 15vw, 140px);
  padding: clamp(14px, 2.5vw, 24px);
}

/* ────────────────────────────────────────────────────────────────
   14. COOKIE BANNER — Mobile Safe Area
   ──────────────────────────────────────────────────────────────── */

.cookie-banner {
  bottom: max(20px, var(--safe-bottom));
  left: max(12px, var(--safe-left));
  right: max(12px, var(--safe-right));
}

@media (max-width: 767px) {
  .cookie-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .cookie-banner .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ────────────────────────────────────────────────────────────────
   15. BUTTON SYSTEM — Touch & Responsive
   ──────────────────────────────────────────────────────────────── */

/* Ensure all buttons meet touch target minimum — enforces equal height baseline */
.btn {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  /* CTA text is always vertically centered via inline-flex + align-items:center */
}

/* Button rows — wrap and stack on small screens.
   align-items:center keeps mixed btn-sm / btn-lg on the same visual axis */
.btn-row {
  gap: clamp(10px, 2vw, 16px);
  flex-wrap: wrap;
  align-items: center;
}

/* CTA sections: centre-aligned btn-row — buttons share the same horizontal axis */
.btn-row.center {
  justify-content: center;
  align-items: center;
}

@media (max-width: 400px) {
  .btn-row:not(.btn-row-inline) {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-row:not(.btn-row-inline) .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ────────────────────────────────────────────────────────────────
   16. TABLE — Mobile Horizontal Scroll
   ──────────────────────────────────────────────────────────────── */

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
}

.table-responsive .table {
  min-width: 600px;
}

/* Scroll indicator shadow on right */
.table-responsive {
  background:
    linear-gradient(to right, white 30%, rgba(255,255,255,0)) left top,
    linear-gradient(to left, white 30%, rgba(255,255,255,0)) right top;
  background-color: white;
  background-size: 30px 100%, 30px 100%;
  background-attachment: local, scroll;
  background-repeat: no-repeat;
}

/* ────────────────────────────────────────────────────────────────
   17. ACCESSIBILITY
   ──────────────────────────────────────────────────────────────── */

/* Skip to main content */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--c-blue);
  color: white;
  padding: 10px 20px;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  z-index: 9999;
  transition: top 0.2s;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

/* Focus styles — visible and branded */
:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 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;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* High contrast mode */
@media (forced-colors: active) {
  .btn-primary,
  .btn-outline {
    border: 2px solid ButtonText;
  }

  .card,
  .pillar,
  .price-card {
    border: 2px solid ButtonText;
  }
}

/* ────────────────────────────────────────────────────────────────
   18. DARK MODE READINESS
   ──────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  /* Uncomment when dark mode is implemented */
  /*
  :root {
    --c-bg: #0f1623;
    --c-bg-soft: #1a2235;
    --c-bg-card: #1f2a3d;
    --c-text: #e5e7eb;
    --c-ink: #f8fafc;
    --c-line: #2d3a50;
    --c-muted: #9ca3af;
  }
  */
}

/* ────────────────────────────────────────────────────────────────
   19. PRINT STYLES
   ──────────────────────────────────────────────────────────────── */

@media print {
  .site-header,
  .site-footer,
  .sticky-cta-bar,
  .cookie-banner,
  .menu-toggle,
  .nav-overlay,
  .btn-row,
  .hero-visual {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  h1, h2, h3 { page-break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  .container { max-width: 100%; padding: 0; }
  .section { padding: 20pt 0; }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }

  a[href^="#"]::after,
  a[href^="javascript"]::after {
    content: "";
  }
}

/* ────────────────────────────────────────────────────────────────
   20. ORIENTATION — Landscape Mobile
   ──────────────────────────────────────────────────────────────── */

@media (orientation: landscape) and (max-height: 500px) {
  /* Reduce hero padding in landscape mobile */
  .hero {
    min-height: auto;
    padding-block: 40px;
  }

  /* Adjust mobile nav padding for landscape */
  .main-nav-mobile {
    padding-top: 60px;
  }
}

/* ────────────────────────────────────────────────────────────────
   21. RETINA / HIGH DPI IMAGES
   ──────────────────────────────────────────────────────────────── */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Serve @2x assets for retina displays */
  .footer-brand img,
  .brand img {
    /* Image rendering — use auto for browser to decide */
    image-rendering: auto;
  }
}

/* ────────────────────────────────────────────────────────────────
   22. WINDOWS SCROLLBAR — Cross-platform styling
   ──────────────────────────────────────────────────────────────── */

/* Chrome, Edge, Safari */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg-soft); }
::-webkit-scrollbar-thumb { background: var(--c-line-2); border-radius: 5px; border: 2px solid var(--c-bg-soft); }
::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }

/* Firefox */
* {
  scrollbar-color: var(--c-line-2) var(--c-bg-soft);
  scrollbar-width: thin;
}

/* ────────────────────────────────────────────────────────────────
   23. CONTAINER QUERIES (CSS @container — Modern browsers)
   ──────────────────────────────────────────────────────────────── */

/* Card container query — adapts based on card container width, not viewport */
.cards-container {
  container-type: inline-size;
  container-name: cards;
}

@container cards (min-width: 600px) {
  .card-compact {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
  }
}

/* ────────────────────────────────────────────────────────────────
   24. ANIMATION PERFORMANCE
   ──────────────────────────────────────────────────────────────── */

/* Use will-change only during animation */
.animating {
  will-change: transform, opacity;
}

/* Remove will-change after animation to free GPU memory */
.animation-done {
  will-change: auto;
}

/* CSS containment for card grids */
.card, .pillar, .persona-card, .price-card {
  contain: layout paint;
}

/* ────────────────────────────────────────────────────────────────
   25. SPECIFIC DEVICE QUIRKS
   ──────────────────────────────────────────────────────────────── */

/* iOS Safari: fix 100vh */
.full-height {
  height: 100dvh; /* Modern: dynamic viewport height */
  height: 100vh;  /* Fallback */
}

@supports (height: 100dvh) {
  .full-height { height: 100dvh; }
}

/* iOS Safari: momentum scrolling for overflow containers */
.scroll-container {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Samsung Internet: Fix flexbox gap */
@supports not (gap: 1px) {
  .btn-row > * + * { margin-left: 14px; }
  .main-nav > * + * { margin-left: 28px; }
}

/* macOS Safari: backdrop-filter prefix */
@supports (-webkit-backdrop-filter: blur(1px)) and (not (backdrop-filter: blur(1px))) {
  .site-header::before {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: none;
  }
}

/* ────────────────────────────────────────────────────────────────
   26. SEO & PERFORMANCE HELPERS
   ──────────────────────────────────────────────────────────────── */

/* Lazy loading placeholder */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.4s;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* Above-the-fold critical images — no lazy */
img[fetchpriority="high"] {
  opacity: 1;
}

/* ────────────────────────────────────────────────────────────────
   27. UTILITY CLASSES — Responsive show/hide
   ──────────────────────────────────────────────────────────────── */

/* Visibility utilities */
.hide-mobile    { display: none; }
.hide-tablet    { display: block; }
.hide-desktop   { display: block; }
.show-mobile    { display: block; }

@media (min-width: 768px) {
  .hide-mobile  { display: block; }
  .hide-tablet  { display: none; }
  .show-mobile  { display: none; }
}

@media (min-width: 1025px) {
  .hide-tablet  { display: block; }
  .hide-desktop { display: none; }
}

/* Text alignment utilities responsive */
.text-center-mobile { text-align: center; }
@media (min-width: 768px) {
  .text-center-mobile { text-align: left; }
}

/* Stack to row on tablet+ */
.stack-mobile {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 768px) {
  .stack-mobile {
    flex-direction: row;
    align-items: center;
  }
}