/* =========================================================
   Gigglezen — MOBILE + ACCESSIBILITY OVERLAY
   Targeted improvements layered AFTER site-extensions.css.
   This file does NOT redefine the cinematic look — it only
   hardens responsive behavior, touch targets, motion/data
   preferences, focus visibility, and iOS form quirks.
   ========================================================= */

/* =========================================================
   1) GLOBAL OVERFLOW + TAP HIGHLIGHT
   Prevents the well-known iOS horizontal-scrollbar issue
   caused by clamp() + large viewports on a few sections.
   ========================================================= */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

.hero,
.section,
.page-hero,
.contact-sec,
.marquee-wrap,
.cta-strip {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Subtle brand-tinted tap highlight (default blue is jarring on dark theme) */
* {
  -webkit-tap-highlight-color: rgba(194, 16, 43, .15);
}

/* Image rendering hint — leave to browser, just be explicit */
img {
  image-rendering: auto;
}

/* =========================================================
   2) TOUCH TARGETS — minimum 44x44 on touch viewports
   WCAG 2.5.5 recommends 44px minimum. Audit covers nav,
   chips, buttons, social, FAQ summaries.
   ========================================================= */
@media (max-width: 720px) {
  .nav-links a,
  .glass-chip,
  .btn,
  .cta-pill {
    min-height: 44px;
    min-width: 44px;
  }

  /* Bump nav link padding from 8/14 to 12/16 on mobile */
  .nav-links a {
    padding: 12px 16px;
    font-size: 15px;
    display: flex;
    align-items: center;
  }

  /* Social squares: 38 -> 44 */
  .social a {
    width: 44px;
    height: 44px;
  }

  /* FAQ summaries already 22/26 — guarantee 44px tap zone */
  .faq summary {
    min-height: 44px;
  }

  /* Explicit small-button exception */
  .btn-sm {
    min-height: 38px;
  }

  /* T-controls (carousel buttons) already 46x46 — confirm */
  .t-btn {
    min-width: 46px;
    min-height: 46px;
  }

  /* Footer column links — give breathing room */
  .f-col a,
  .footer-bottom a {
    display: inline-block;
    padding: 4px 0;
    min-height: 32px;
  }

  /* Breadcrumbs — slightly larger tap zone for nested links */
  .breadcrumbs a {
    padding: 4px 2px;
    display: inline-block;
  }
}

/* =========================================================
   3) MOBILE MENU — class-driven, no inline styles
   The JS now just toggles .open; everything is CSS.
   Overrides the simpler .nav-links.open rule in extensions.
   ========================================================= */
@media (max-width: 720px) {
  .nav-links {
    display: none;
  }

  .nav-links.open {
    display: flex !important;
    position: fixed;
    inset: 70px 12px auto 12px;
    flex-direction: column;
    background: var(--glass-bg-2);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    padding: 18px;
    border-radius: 22px;
    border: 1px solid var(--glass-bd-2);
    box-shadow: 0 24px 60px -20px rgba(10, 6, 6, .28);
    z-index: 110;
    gap: 6px;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-links.open li {
    width: 100%;
  }

  .nav-links.open a {
    display: block;
    padding: 14px 18px;
    font-size: 15px;
  }

  .nav-links.open .nav-drop > a .caret-down {
    display: none;
  }

  .nav-links.open .drop-menu {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 4px 0 4px 16px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-width: 0;
    display: grid;
  }

  .nav-links.open .drop-menu a {
    padding: 10px 14px;
    font-size: 14px;
  }

  /* Lock page scroll when menu is open */
  body.nav-open {
    overflow: hidden;
  }
}

/* =========================================================
   4) TYPOGRAPHY + SPACING — small-viewport refinements
   Most headings already use clamp(); these add tighter
   tuning at the lower end without breaking desktop.
   ========================================================= */
@media (max-width: 480px) {
  .section {
    padding: 80px 18px 24px;
  }

  .page-hero {
    padding: 130px 18px 50px;
  }

  .hero {
    padding: 130px 18px 40px;
    min-height: auto;
  }

  .hero-title {
    font-size: clamp(38px, 13vw, 80px);
    line-height: .98;
  }

  .section-title {
    font-size: clamp(28px, 9vw, 48px);
  }

  .contact-card {
    padding: 28px 20px;
  }

  .feature,
  .service .svc-inner,
  .price-card,
  .phase {
    padding: 22px 18px;
  }

  .stat-card {
    padding: 18px 16px;
  }

  .stat-card .num {
    font-size: 38px;
  }

  .hero-stats {
    gap: 12px;
  }

  .hero-sub {
    font-size: 15px;
    margin: 24px auto 28px;
  }

  .contact-title {
    font-size: clamp(28px, 8vw, 40px);
  }

  /* Job card meta wraps cleanly */
  .job-card {
    padding: 18px 18px;
  }

  /* Blog card title scales down */
  .blog-card h3 {
    font-size: 17px;
  }

  /* Pricing card amount stays readable */
  .pc-amt {
    font-size: 40px;
  }
}

/* =========================================================
   5) TABLET — 721-1100 transitions
   Some grids switch to 2-up that the base sheet skipped.
   ========================================================= */
@media (min-width: 721px) and (max-width: 1100px) {
  .services-grid,
  .pricing-grid,
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .port-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   6) FOLDABLE / 320px EDGE CASES
   Galaxy Fold, narrow Android browsers in landscape kbd.
   ========================================================= */
@media (max-width: 360px) {
  .hero-eyebrow.glass-chip {
    font-size: 11px;
    padding: 6px 12px;
    gap: 6px;
  }

  .hero-eyebrow .sep,
  .hero-eyebrow .mono {
    display: none;
  }

  .breadcrumbs {
    font-size: 10px;
    gap: 6px;
    flex-wrap: wrap;
  }

  .section,
  .page-hero,
  .hero {
    padding-left: 14px;
    padding-right: 14px;
  }

  .cta-pill {
    padding: 10px 14px;
    font-size: 13px;
  }

  /* Footer columns get tighter */
  .footer-inner {
    padding: 50px 16px 28px;
  }
}

/* =========================================================
   7) ULTRA-WIDE — >1600px
   Cap container, keep hero from getting too gigantic.
   ========================================================= */
@media (min-width: 1600px) {
  :root {
    --container: 1440px;
  }

  .hero-title {
    font-size: clamp(120px, 8vw, 180px);
  }
}

/* =========================================================
   8) REDUCED MOTION
   Stop all transitions, animations, hide decorative chrome.
   ========================================================= */
@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;
  }

  .orb,
  .grain,
  .grid-overlay,
  .spotlight,
  .particles {
    display: none !important;
  }

  .marquee-track {
    animation: none !important;
  }

  .cursor {
    display: none !important;
  }

  body {
    cursor: auto !important;
  }

  /* Disable the chroma text gradient animation */
  .chroma {
    animation: none !important;
  }
}

/* =========================================================
   9) REDUCED DATA
   Save the user's data plan; hide expensive backgrounds.
   ========================================================= */
@media (prefers-reduced-data: reduce) {
  .grain,
  .grid-overlay,
  .spotlight,
  .particles {
    display: none !important;
  }

  .orb {
    opacity: .3;
    filter: blur(60px);
  }
}

/* =========================================================
   10) HIGH CONTRAST
   prefers-contrast: more — bump ink-dim/mute on light theme
   for stronger contrast ratios.
   ========================================================= */
@media (prefers-contrast: more) {
  :root {
    --ink-dim: rgba(10, 6, 6, .92);
    --ink-mute: rgba(10, 6, 6, .75);
    --ink-faint: rgba(10, 6, 6, .55);
  }

  /* Outline focus more obvious */
  :focus-visible {
    outline-width: 3px !important;
  }

  /* Glass borders darker */
  .glass,
  .glass-chip,
  .kicker {
    border-color: rgba(10, 6, 6, .35);
  }
}

/* =========================================================
   11) FOCUS VISIBILITY
   Every interactive element gets a clear focus ring.
   Uses :focus-visible so mouse clicks don't show it.
   ========================================================= */
:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 8px;
}

.btn:focus-visible,
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.cta-pill:focus-visible,
.nav-links a:focus-visible,
.faq summary:focus-visible,
.t-btn:focus-visible,
.menu-btn:focus-visible {
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(194, 16, 43, .18);
}

/* Form inputs get a slightly different visible-focus treatment
   so the existing :focus rule (border-color change) still
   shows but is reinforced by the outline. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.news input:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* Skip link — make it visible when focused (it's hidden by default). */
.skip:focus,
.skip:focus-visible {
  position: fixed !important;
  top: 16px;
  left: 16px;
  z-index: 99999;
  background: var(--red);
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  font-family: var(--font-d);
  font-weight: 600;
  text-decoration: none;
  outline: 2px solid #fff;
  outline-offset: 2px;
  font-size: 14px;
}

/* =========================================================
   12) TOUCH DEVICE CURSOR
   The cinematic theme uses a custom cursor. On touch /
   coarse-pointer devices it MUST be off, with native
   pointer cursors restored.
   ========================================================= */
@media (hover: none),
       (max-width: 720px) {
  body {
    cursor: auto !important;
  }

  .cursor {
    display: none !important;
  }

  a,
  button,
  input,
  select,
  textarea {
    cursor: pointer !important;
  }

  input,
  textarea {
    cursor: text !important;
  }
}

/* =========================================================
   13) iOS FORM ZOOM PREVENTION
   Safari zooms when font-size < 16px on focus. Force >=16
   on touch devices.
   ========================================================= */
@media (hover: none) {
  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* =========================================================
   14) MOTION LAYER (mobile) — disable expensive parallax
   On mobile we never want the parallax / spotlight chrome.
   ========================================================= */
@media (max-width: 720px) {
  [data-parallax] {
    translate: 0 !important;
    transform: none !important;
  }

  /* Disable heavy orbs on very small screens for perf */
  .orb-3,
  .orb-4 {
    display: none;
  }
}

/* =========================================================
   15) FORM CONTROL ERGONOMICS (mobile)
   Make textareas, selects, and large inputs more comfy.
   ========================================================= */
@media (max-width: 720px) {
  .field input,
  .field select,
  .field textarea {
    padding: 14px 14px;
    border-radius: 12px;
  }

  .field textarea {
    min-height: 110px;
  }

  /* News form (footer) — stack input + button */
  .news {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
  }

  .news input {
    min-width: 0;
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
  }

  .news button {
    width: 100%;
    padding: 12px 16px;
    min-height: 44px;
  }
}

/* =========================================================
   16) IMAGES + MEDIA — responsive height
   Catch any element using fixed pixel heights and ensure
   they stay in-bounds.
   ========================================================= */
@media (max-width: 720px) {
  .blog-card .blog-thumb {
    height: 180px;
  }

  .show-card {
    min-height: 220px;
  }
}

/* =========================================================
   17) MARQUEE — pause + dim on touch (perf)
   ========================================================= */
@media (max-width: 480px) {
  .marquee-wrap {
    padding: 20px 0 50px;
  }

  .marquee-track {
    font-size: clamp(18px, 5vw, 28px);
    gap: 24px;
    animation-duration: 60s; /* slower on small viewports */
  }
}

/* =========================================================
   18) FOOTER — tighter mobile layout
   ========================================================= */
@media (max-width: 720px) {
  .footer-inner {
    padding: 50px 20px 32px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    padding: 20px;
    gap: 8px;
  }
}

/* =========================================================
   19) PORTFOLIO + SHOWCASE — touch-friendly tall tiles
   ========================================================= */
@media (max-width: 720px) {
  .port-grid {
    grid-auto-rows: 240px;
  }

  .tall-tile {
    grid-row: span 1;
  }

  .show-card.big h3 {
    font-size: 30px;
  }
}

/* =========================================================
   20) COOKIE BANNER — stack on small viewports
   ========================================================= */
@media (max-width: 480px) {
  .cookie {
    bottom: 12px;
    width: calc(100% - 20px);
    padding: 14px 16px;
    gap: 12px;
  }

  .cookie > div {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   21) PRINT — minimal sanity defaults
   ========================================================= */
@media print {
  .nav-wrap,
  .scroll-progress,
  .cursor,
  .bg-field,
  .loader,
  .cookie,
  .menu-btn {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    cursor: auto !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
}