/* Responsive fixes for ventok.eu — supplements the Next.js build CSS */

/* ===== GLOBAL: prevent horizontal scroll ===== */
body {
  max-width: 100vw;
}
/* Only clip overflow on mobile where it's needed — desktop stays clean for sticky */
@media (max-width: 1023px) {
  html, body { overflow-x: clip; }
}


/* ===== MOBILE NAV: hide desktop nav below lg ===== */
@media (max-width: 1023px) {
  header nav[aria-label="Main navigation"],
  header nav.flex.items-center.gap-8,
  header .flex.items-center.justify-between > nav {
    display: none !important;
  }
  header, header > div {
    overflow: hidden;
  }
}

@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
}

/* ===== MOBILE GLOBAL SPACING ===== */
@media (max-width: 639px) {

  /* --- ALL sections: tighten vertical padding --- */
  main > section {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* --- Hero (first section): fill viewport, content pushed down so CTAs sit at bottom --- */
  main > section:first-child {
    padding-top: 0 !important;
    padding-bottom: 2.5rem !important;
    min-height: calc(100svh - 65px);
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }
  main > section:first-child > .absolute {
    top: -300px !important;
  }
  main > section:first-child h1 {
    margin-top: 0.75rem !important;
  }
  main > section:first-child .mt-12 {
    margin-top: 1.5rem !important;
  }

  /* --- Headings: reduce all large headings on mobile --- */
  h1, h2, .text-\[clamp\(44px\,5\.5vw\,76px\)\] {
    font-size: 32px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
  }
  /* Section headings like "What we believe", "Common questions", etc */
  h2[class*="text-[28px]"],
  h2[class*="text-[26px]"],
  p[class*="text-[28px]"],
  p[aria-hidden="true"][class*="font-extrabold"] {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }
  /* Big statement text like "We don't just build software" */
  p[class*="text-[28px]"][class*="font-extrabold"],
  p[class*="text-[clamp"] {
    font-size: 24px !important;
    line-height: 1.15 !important;
  }

  /* --- Section label + heading gap --- */
  .mb-16 { margin-bottom: 2rem !important; }
  .mb-14 { margin-bottom: 2rem !important; }
  .mb-28 { margin-bottom: 2rem !important; }
  .mt-12 { margin-top: 1.5rem !important; }
  .mt-10 { margin-top: 1.25rem !important; }

  /* --- Grid gaps: tighten on mobile --- */
  .gap-5 { gap: 0.75rem !important; }
  .gap-12 { gap: 1.5rem !important; }

  /* --- Card padding: compact --- */
  .p-7 { padding: 1.25rem !important; }

  /* --- Notification pill: center on mobile --- */
  [aria-label="Contact prompt"] {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 48px);
    max-width: 400px;
  }

  /* --- CTA buttons: stack vertically --- */
  section .flex.items-center.justify-center.gap-5 {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }
  section .flex.items-center.justify-center.gap-5 > a,
  section .flex.items-center.justify-center.gap-5 > button {
    width: 100%;
    justify-content: center;
  }

  /* --- Step numbers (01, 02...): smaller --- */
  .text-\[56px\] { font-size: 40px !important; }
}

/* ===== SERVICE DETAIL CARDS (services page): mobile optimization ===== */
@media (max-width: 639px) {
  /* Main service cards — reduce padding from p-10 */
  #audit .rounded-3xl,
  #workflow .rounded-3xl,
  #tools .rounded-3xl,
  #ai .rounded-3xl,
  #web .rounded-3xl {
    padding: 1.5rem !important;
    border-radius: 1.25rem !important;
  }

  /* Inner grids: stack and tighten */
  #audit .grid,
  #workflow .grid,
  #tools .grid,
  #ai .grid,
  #web .grid {
    gap: 0.75rem !important;
  }

  /* Inner stat cards */
  #audit .rounded-2xl,
  #workflow .rounded-2xl,
  #tools .rounded-2xl,
  #ai .rounded-2xl {
    padding: 1rem !important;
  }

  /* Stat numbers smaller on mobile */
  .text-\[32px\] {
    font-size: 24px !important;
  }

  /* Service heading sizes */
  #audit h2, #workflow h2, #tools h2, #ai h2, #web h2 {
    font-size: 28px !important;
  }

  /* Internal spacing between grid sections */
  #audit .mt-20,
  #workflow .mt-20,
  #tools .mt-20,
  #ai .mt-20,
  #web .mt-20 {
    margin-top: 1.5rem !important;
  }

  /* 2-col stat grids: keep 2 cols but tighter */
  .grid.grid-cols-2 {
    gap: 0.5rem !important;
  }

  /* CTA row at bottom of each card: stack on mobile */
  #audit .flex-col.sm\:flex-row,
  #workflow .flex-col.sm\:flex-row,
  #tools .flex-col.sm\:flex-row,
  #ai .flex-col.sm\:flex-row,
  #web .flex-col.sm\:flex-row {
    gap: 1rem !important;
  }

  /* CTA buttons: stack and full width */
  .shrink-0.flex.items-center.gap-4 {
    flex-direction: column !important;
    width: 100% !important;
  }
  .shrink-0.flex.items-center.gap-4 > a,
  .shrink-0.flex.items-center.gap-4 > button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Section bottom padding between cards — reduce from pb-28 */
  #audit, #workflow, #tools, #ai, #web {
    padding-bottom: 0.75rem !important;
  }
  /* But keep some padding on the parent sections */
  main > section[id] {
    padding-bottom: 0.75rem !important;
  }

  /* Tech tag pills: tighter */
  .flex.flex-wrap.gap-3 {
    gap: 0.375rem !important;
  }
  .flex.flex-wrap.gap-3 > span {
    padding: 0.375rem 0.625rem !important;
    font-size: 11px !important;
  }

  /* Tools section: stack the "100% your code" + tech stack row */
  .flex.items-center.gap-10 {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: flex-start !important;
  }
  .flex.items-center.gap-10 > .w-px {
    display: none !important;
  }
}

/* ===== PREMIUM: dark sections → soft gray-blue ===== */
/* Testimonials & any dark sections in main content */
main section.bg-text-primary {
  background: #eef1f6 !important;
}
main section.bg-text-primary h2,
main section.bg-text-primary p[class*="font-extrabold"] {
  color: #1a1a2e !important;
}
main section.bg-text-primary blockquote p {
  color: #1a1a2e !important;
}
main section.bg-text-primary p,
main section.bg-text-primary span {
  color: #4a5568 !important;
}
main section.bg-text-primary figcaption p:first-child {
  color: #1a1a2e !important;
}
main section.bg-text-primary figcaption p:last-child {
  color: #718096 !important;
}
/* Avatar circles */
main section.bg-text-primary div[aria-hidden="true"] {
  background: #d4dae4 !important;
  color: #4a5568 !important;
}
/* Section label dot stays accent */
main section.bg-text-primary .bg-accent {
  background: var(--accent, #4f46e5) !important;
}
/* Section label text */
main section.bg-text-primary span[class*="tracking-"] {
  color: #718096 !important;
}
/* Divider line */
main section.bg-text-primary .bg-white\/\[0\.08\],
main section.bg-text-primary .h-px {
  background: #d4dae4 !important;
}

/* Footer: premium gray-blue — scoped to the specific dark footer */
footer.border-t.bg-\[\#18181B\] {
  background: #eef1f6 !important;
  color: #1a1a2e !important;
}
footer.border-t.bg-\[\#18181B\] .text-white,
footer.border-t.bg-\[\#18181B\] p,
footer.border-t.bg-\[\#18181B\] a,
footer.border-t.bg-\[\#18181B\] button,
footer.border-t.bg-\[\#18181B\] span {
  color: #4a5568 !important;
}
footer.border-t.bg-\[\#18181B\] h4 {
  color: #718096 !important;
}
footer.border-t.bg-\[\#18181B\] a:hover,
footer.border-t.bg-\[\#18181B\] button:hover {
  color: #1a1a2e !important;
}
footer.border-t.bg-\[\#18181B\] .text-accent,
footer.border-t.bg-\[\#18181B\] a.text-accent {
  color: var(--accent, #4f46e5) !important;
}
footer.border-t.bg-\[\#18181B\] .bg-zinc-700,
footer.border-t.bg-\[\#18181B\] .h-px {
  background: #d4dae4 !important;
}

/* Homepage AI Integration card (bento grid) — light purple gradient */
main a.bg-text-primary {
  background: linear-gradient(135deg, #f3f0ff 0%, #ede9fe 40%, #e8e0fd 100%) !important;
}
main a.bg-text-primary h3 {
  color: #1a1a2e !important;
}
main a.bg-text-primary p {
  color: #4a5568 !important;
}
main a.bg-text-primary .text-white\/60,
main a.bg-text-primary span[class*="text-white"] {
  color: #7c3aed !important;
}
main a.bg-text-primary svg {
  color: #c4b5fd !important;
}

/* Services page: AI Integration section — light purple like homepage */
#ai .rounded-3xl.bg-text-primary {
  background: linear-gradient(135deg, #f3f0ff 0%, #ede9fe 40%, #e8e0fd 100%) !important;
}
#ai .rounded-3xl.bg-text-primary h2,
#ai .rounded-3xl.bg-text-primary span[class*="font-bold"] {
  color: #1a1a2e !important;
}
#ai .rounded-3xl.bg-text-primary p,
#ai .rounded-3xl.bg-text-primary span[class*="text-zinc"],
#ai .rounded-3xl.bg-text-primary span[class*="text-white"] {
  color: #4a5568 !important;
}
#ai .rounded-3xl.bg-text-primary span[class*="font-mono"] {
  color: #9ca3af !important;
}
/* Inner feature cards */
#ai .rounded-2xl.bg-white\/\[0\.04\] {
  background: rgba(255,255,255,0.7) !important;
  border-color: #d4dae4 !important;
}
#ai .rounded-2xl span[class*="font-bold"] {
  color: #1a1a2e !important;
}
#ai .rounded-2xl span[class*="text-zinc"] {
  color: #718096 !important;
}
/* Tech pills */
#ai span[class*="text-white\/60"] {
  color: #7c3aed !important;
  background: rgba(139,92,246,0.08) !important;
  border-color: rgba(139,92,246,0.15) !important;
}
/* Privacy text */
#ai span[class*="font-bold"].text-white {
  color: #1a1a2e !important;
}
#ai .w-px {
  background: #d4dae4 !important;
}
/* CTA buttons */
#ai a[class*="border-white"] {
  border-color: #d4dae4 !important;
  color: #1a1a2e !important;
}
#ai a[class*="border-white"]:hover {
  border-color: #9ca3af !important;
  background: rgba(0,0,0,0.03) !important;
}
#ai button.bg-accent.text-white {
  background: rgba(124,58,237,0.12) !important;
  border: 1.5px solid rgba(124,58,237,0.25) !important;
  color: #7c3aed !important;
}
#ai button.bg-accent.text-white:hover {
  background: rgba(124,58,237,0.2) !important;
}
/* Background blobs */
#ai .bg-purple-500\/10,
#ai .bg-blue-500\/8 {
  opacity: 0.4 !important;
}

/* ===== Internal Tools: light pastel blue to match other cards ===== */
/* Homepage bento card */
main a.bg-accent {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 40%, #dbeafe 100%) !important;
}
main a.bg-accent h3 {
  color: #1a1a2e !important;
}
main a.bg-accent p {
  color: #4a5568 !important;
}
main a.bg-accent span[class*="text-white"] {
  color: #4f46e5 !important;
}
main a.bg-accent svg {
  color: #a5b4fc !important;
}

/* Services page #tools section */
#tools .rounded-3xl.bg-accent {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 40%, #dbeafe 100%) !important;
}
#tools .rounded-3xl.bg-accent h2,
#tools .rounded-3xl.bg-accent span[class*="font-bold"] {
  color: #1a1a2e !important;
}
#tools .rounded-3xl.bg-accent p,
#tools .rounded-3xl.bg-accent span[class*="text-white"] {
  color: #4a5568 !important;
}
#tools .rounded-3xl.bg-accent span[class*="font-mono"] {
  color: #9ca3af !important;
}
/* Inner feature cards */
#tools .rounded-2xl.bg-white\/\[0\.08\] {
  background: rgba(255,255,255,0.7) !important;
}
#tools .rounded-2xl span[class*="text-white"] {
  color: #1a1a2e !important;
}
#tools .rounded-2xl span[class*="text-white\/50"] {
  color: #718096 !important;
}
/* Stat + tech pills */
#tools span[class*="text-white\/60"],
#tools span.text-white {
  color: #1a1a2e !important;
}
#tools span[class*="text-white\/50"] {
  color: #718096 !important;
}
#tools .bg-white\/\[0\.06\] {
  background: rgba(79,70,229,0.08) !important;
  border-color: rgba(79,70,229,0.15) !important;
}
#tools .bg-white\/\[0\.06\] span {
  color: #4f46e5 !important;
}
#tools .w-px.bg-white\/10 {
  background: #d4dae4 !important;
}
/* Internal Tools CTA: white text -> accent on light bg */
#tools .rounded-3xl.bg-accent .text-white\/80 {
  color: var(--accent, #4f46e5) !important;
}

/* CTA buttons */
#tools a[class*="border-white"] {
  border-color: #d4dae4 !important;
  color: #1a1a2e !important;
}
#tools button.bg-accent {
  background: rgba(79,70,229,0.12) !important;
  border: 1.5px solid rgba(79,70,229,0.25) !important;
  color: #4f46e5 !important;
}
#tools button.bg-accent:hover {
  background: rgba(79,70,229,0.2) !important;
}

/* ===== SERVICE NAV PILLS: mobile-friendly ===== */
@media (max-width: 639px) {
  /* The sticky service nav bar */
  nav[aria-label="Jump to service"] > div {
    justify-content: flex-start !important;
    gap: 0.375rem !important;
    padding: 0.5rem 1rem !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  nav[aria-label="Jump to service"] > div::-webkit-scrollbar {
    display: none;
  }
  /* Smaller, tighter pills */
  nav[aria-label="Jump to service"] a {
    font-size: 12px !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 8px !important;
  }
}

/* ===== TABLET (< 768px) ===== */
@media (max-width: 767px) {
  /* Service cards: full width */
  .grid.grid-cols-1.md\:grid-cols-6 > * {
    grid-column: span 1 !important;
  }
  .md\:col-span-4,
  .md\:col-span-3,
  .md\:col-span-2 {
    grid-column: span 1 !important;
  }
  .grid.grid-cols-1.md\:grid-cols-6 > * {
    min-height: 200px !important;
  }
  .md\:row-span-2 {
    grid-row: span 1 !important;
  }

  /* Service page: horizontal scroll tabs */
  .flex.flex-wrap.gap-2.justify-center {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    padding-bottom: 4px;
  }
  .flex.flex-wrap.gap-2.justify-center::-webkit-scrollbar {
    display: none;
  }
}

/* ===== SERVICE PAGE: anchor nav transparent ===== */
nav[aria-label="Jump to service"] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* ===== DESKTOP NAV: services dropdown hover fix ===== */
@media (min-width: 1024px) {
  /* Make dropdown visible on parent hover via CSS */
  header nav .relative:hover > div[role="menu"] {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
    pointer-events: auto !important;
  }
  /* Bridge the gap between button and dropdown so mouse doesn't lose hover */
  header nav .relative > div[role="menu"] {
    padding-top: 8px !important;
    margin-top: -4px !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
  }
  /* Keep dropdown open briefly when leaving (prevents flicker) */
  header nav .relative {
    position: relative;
  }
  header nav .relative::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px;
  }
}

/* ===== BASE OVERRIDES ===== */
.tracking-\[-1\.5px\] { letter-spacing: -1.5px; }

/* sm: breakpoint (640px) */
@media (min-width: 640px) {
  .sm\:pt-32 { padding-top: 8rem; }
  .sm\:pb-24 { padding-bottom: 6rem; }
  .sm\:text-\[36px\] { font-size: 36px; }
  .sm\:text-\[34px\] { font-size: 34px; }
  .sm\:left-auto { left: auto; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:tracking-\[-2px\] { letter-spacing: -2px; }
}

/* md: breakpoint (768px) */
@media (min-width: 768px) {
  .md\:py-20 { padding-top: 5rem; padding-bottom: 5rem; }
  .md\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
  .md\:mt-16 { margin-top: 4rem; }
  .md\:gap-16 { gap: 4rem; }
  .md\:mb-20 { margin-bottom: 5rem; }
  .md\:p-8 { padding: 2rem; }
}


/* ============================================================
   AUDIT ROUND 2 FIXES
   ============================================================ */

/* --- 1. Contact form modal: scroll indicator + tighter layout --- */
[role="dialog"][aria-modal="true"] .overflow-y-auto {
  scroll-behavior: smooth;
  position: relative;
}
/* Subtle gradient fade at bottom to hint scrollable content */
[role="dialog"][aria-modal="true"] .overflow-y-auto::after {
  content: '';
  position: sticky;
  bottom: 0;
  display: block;
  height: 32px;
  background: linear-gradient(transparent, rgba(255,255,255,0.95));
  pointer-events: none;
  margin-top: -32px;
  z-index: 1;
}
/* Tighter form on short viewports */
@media (max-height: 750px) {
  [role="dialog"][aria-modal="true"] .overflow-y-auto {
    padding-top: 1.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  [role="dialog"][aria-modal="true"] h2 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  [role="dialog"][aria-modal="true"] .mt-3 {
    margin-top: 0.375rem !important;
  }
  [role="dialog"][aria-modal="true"] .grid {
    gap: 0.375rem !important;
  }
  [role="dialog"][aria-modal="true"] .mt-5,
  [role="dialog"][aria-modal="true"] .mt-6 {
    margin-top: 0.75rem !important;
  }
  [role="dialog"][aria-modal="true"] textarea {
    min-height: 60px !important;
  }
}

/* --- 2/3. Services tab nav: horizontal scroll on mobile --- */
/* Overview page: nav[aria-label="Jump to service"] */
@media (max-width: 639px) {
  nav[aria-label="Jump to service"] {
    overflow: visible !important;
  }
  nav[aria-label="Jump to service"] > div {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start !important;
    padding-left: 1rem !important;
    padding-right: 2rem !important;
    gap: 0.375rem !important;
    mask-image: linear-gradient(to right, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent);
  }
  nav[aria-label="Jump to service"] > div::-webkit-scrollbar { display: none; }
  nav[aria-label="Jump to service"] a {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 8px !important;
  }

  /* Individual service pages: section[aria-label="Service navigation"] */
  section[aria-label="Service navigation"] .flex-wrap {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start !important;
    padding-left: 1rem !important;
    padding-right: 2rem !important;
    gap: 0.375rem !important;
    mask-image: linear-gradient(to right, black 85%, transparent);
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent);
  }
  section[aria-label="Service navigation"] .flex-wrap::-webkit-scrollbar { display: none; }
  section[aria-label="Service navigation"] .flex-wrap a {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 0.375rem 0.75rem !important;
  }
  /* Hide vertical dividers on mobile */
  section[aria-label="Service navigation"] .flex-wrap span.w-px {
    display: none !important;
  }
}

/* --- 4. Hero: reduce excessive bottom whitespace --- */
main > section:first-child {
  padding-bottom: 5rem !important;
}
@media (max-width: 639px) {
  main > section:first-child {
    padding-bottom: 3rem !important;
  }
}

/* --- 5. Eyebrow label contrast: #a1a1aa → #71717a (4.56:1 on white) --- */
/* Target non-input elements with text-muted */
span.text-text-muted,
p.text-text-muted,
div.text-text-muted,
label.text-text-muted {
  color: #71717a !important;
}
  color: #71717a !important;
}

/* --- 6. Sticky banner: prevent obscuring footer on mobile --- */
footer.border-t {
  padding-bottom: 5rem !important;
}
@media (min-width: 768px) {
  footer.border-t {
    padding-bottom: 2.5rem !important;
  }
}