/*
 * Cross-browser + cross-device optimisation layer.
 * Loaded after site.css so it can correct the exported Adobe Express styles
 * without touching the original rules.
 */

/* ---------- Global robustness ---------- */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-height) + 1rem);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Never let long words / URLs blow out narrow viewports (Safari + Firefox) */
h1, h2, h3, h4, p, li, blockquote, a, span {
  overflow-wrap: anywhere;
  word-break: normal;
}

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

/* Older Safari needs the prefix for object-fit sizing on fixed-ratio media */
img[style*="object-fit"], .pt-profile-img {
  -o-object-fit: cover;
  object-fit: cover;
}

/* The exported page repeats the nav links in a banner that sits behind the
   fixed navigation bar. Hide it: the nav (desktop + mobile drawer) covers it. */
.banner {
  display: none !important;
}

/* ---------- Fluid typography (no more clipped headings on small screens) ---------- */

:root {
  --text-display: clamp(2.25rem, 7vw, 3.5rem);
  --text-4xl: clamp(1.875rem, 5vw, 2.25rem);
  --text-3xl: clamp(1.625rem, 4.2vw, 1.875rem);
  --text-2xl: clamp(1.375rem, 3.4vw, 1.5rem);
  --text-xl: clamp(1.125rem, 2.6vw, 1.25rem);
}

/* ---------- Layout safety on every breakpoint ---------- */

.container {
  padding-inline: max(1.25rem, env(safe-area-inset-left));
  padding-inline: clamp(1.25rem, 5vw, 4rem);
}

@supports (padding: env(safe-area-inset-left)) {
  .container,
  .nav-inner {
    padding-left: max(clamp(1.25rem, 5vw, 4rem), env(safe-area-inset-left));
    padding-right: max(clamp(1.25rem, 5vw, 4rem), env(safe-area-inset-right));
  }
}

/* Any grid in the page collapses to one column on phones, whatever its
   original column definition was. */
@media (max-width: 640px) {
  [class*="-grid"],
  .hero-inner,
  .about-inner,
  .about-values,
  .services-grid,
  .testimonials-content,
  .contact-inner,
  .footer-inner {
    grid-template-columns: 1fr !important;
  }

  .container {
    padding-inline: 1.25rem;
  }
}

/* Tablet / small laptop: never more than two columns */
@media (min-width: 641px) and (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Grid & flex children must be allowed to shrink (Firefox/Safari overflow fix) */
.hero-inner > *,
.about-inner > *,
.services-grid > *,
.testimonials-content > *,
.contact-inner > *,
.footer-inner > *,
.nav-inner > * {
  min-width: 0;
}

/* ---------- Navigation ---------- */

nav {
  padding-top: env(safe-area-inset-top);
}

.nav-drawer {
  max-height: calc(100dvh - var(--nav-height));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Comfortable touch targets on coarse pointers */
@media (pointer: coarse) {
  a, button, summary, label {
    min-height: 44px;
  }

  .nav-drawer a {
    display: flex;
    align-items: center;
  }
}

/* Disable hover-only affordances on touch devices (avoids sticky hover states) */
@media (hover: none) {
  a:hover,
  .nav-cta:hover,
  .tc-arrow:hover {
    transform: none;
  }
}

/* ---------- Testimonial carousel (CSS-only, keyboard + touch friendly) ---------- */

.tc-slides {
  -webkit-overflow-scrolling: touch;
}

.tc-track {
  will-change: transform;
}

@media (max-width: 480px) {
  .tc-controls {
    gap: 1rem;
    flex-wrap: wrap;
  }
}

/* ---------- Colour-function fallbacks for older browsers ---------- */

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .footer-legal p {
    color: rgba(245, 245, 245, 0.6);
  }
}

/* ---------- Print ---------- */

@media print {
  nav,
  .tc-controls {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ---------- Mobile navigation (inline styles from the export beat the
   original media query, so these need !important) ---------- */

@media (max-width: 767px) {
  .nav-desktop {
    display: none !important;
  }

  details.nav-mobile {
    display: block !important;
  }

  .nav-inner {
    gap: 0.75rem;
  }

  .nav-logo {
    font-size: 1rem !important;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }
}

@media (min-width: 768px) {
  details.nav-mobile {
    display: none !important;
  }
}

/* ---------- Nav links: keep About / Services / Testimonials white in every
   state (Chrome would otherwise reveal the grey inline color on click). */
.nav-desktop a:not(.nav-cta),
.nav-desktop a:not(.nav-cta):link,
.nav-desktop a:not(.nav-cta):visited,
.nav-desktop a:not(.nav-cta):hover,
.nav-desktop a:not(.nav-cta):active,
.nav-desktop a:not(.nav-cta):focus,
.nav-desktop a:not(.nav-cta):focus-visible {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}