/**
 * SSC GROUP — responsive refinements (mobile + desktop)
 * A minified copy is appended to the end of assets/app.css so the browser loads one CSS file.
 * After editing this file, append the minified rules to app.css again (or rebuild app.css and re-append).
 */

:root {
  --ssc-safe-top: env(safe-area-inset-top, 0px);
  --ssc-safe-right: env(safe-area-inset-right, 0px);
  --ssc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ssc-safe-left: env(safe-area-inset-left, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Floating controls: respect iOS home indicator / notches */
.floating-call {
  bottom: max(1rem, var(--ssc-safe-bottom)) !important;
  right: max(1rem, var(--ssc-safe-right)) !important;
}

.back-to-top {
  bottom: max(1rem, var(--ssc-safe-bottom)) !important;
  left: max(1rem, var(--ssc-safe-left)) !important;
}

.floating-wa {
  bottom: max(1rem, var(--ssc-safe-bottom)) !important;
  right: max(1rem, var(--ssc-safe-right)) !important;
}

/* Compositor-friendly floating controls */
.back-to-top,
.floating-call,
.floating-wa {
  contain: layout paint style;
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Hero: horizontal safe padding on edge-to-edge phones */
#home .max-w-7xl.mx-auto.px-4 {
  padding-left: max(1rem, var(--ssc-safe-left));
  padding-right: max(1rem, var(--ssc-safe-right));
}

/* Contact / services subpages */
.contact-page main .max-w-7xl.mx-auto.px-4,
.services-page .max-w-7xl.mx-auto.px-4 {
  padding-left: max(1rem, var(--ssc-safe-left));
  padding-right: max(1rem, var(--ssc-safe-right));
}

/* Service cards: shorter viewports (mobile) */
@media (max-width: 767px) {
  .service-card[class*="380px"] {
    height: min(380px, 72svh) !important;
  }

  .service-card[class*="500px"] {
    height: min(500px, 78svh) !important;
  }

  .service-card .absolute.inset-0.p-8 {
    padding: 1.25rem !important;
  }
}

/* Mobile nav drawers: scroll when content is tall */
@media (max-width: 767px) {
  [id$="-mobile-nav"] {
    max-height: min(70vh, calc(100dvh - 4.5rem));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  #index-mobile-nav {
    max-height: min(75vh, calc(100dvh - 5rem));
  }
}

/* Cookie consent text: scroll on small screens */
@media (max-width: 767px) {
  #cookie-banner-title {
    max-height: min(38vh, 14rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Form controls: comfortable touch targets (main content only) */
main input:not([type="hidden"]),
main select,
main textarea {
  min-height: 2.75rem;
}

main button[type="submit"] {
  min-height: 2.75rem;
}

/* iOS: 16px+ inputs avoid focus zoom */
@media (max-width: 767px) {
  main input[type="text"],
  main input[type="tel"],
  main input[type="email"],
  main textarea {
    font-size: 16px;
  }
}

/* Mobile nav: min tap targets (WCAG 2.5.5) */
@media (max-width: 767px) {
  [id$="-mobile-nav"] a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Large desktop: keep horizontal breathing room at viewport edges */
@media (min-width: 1280px) {
  .max-w-7xl {
    padding-left: max(1rem, var(--ssc-safe-left));
    padding-right: max(1rem, var(--ssc-safe-right));
  }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .reveal.active {
    opacity: 1 !important;
    transform: none !important;
  }

  .service-card:hover,
  .service-card {
    transform: none !important;
  }
}