/* Site-wide refinements layered on top of lovable.css
   Goal: keep visual system intact, fix scroll/overflow/responsiveness gotchas. */

/* ── Scroll & viewport hygiene ─────────────────────────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* clear the fixed h-16 header + shadow */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  /* `clip` is the modern, non-scrollable counterpart to `hidden`;
     fall back to `hidden` on browsers that don't support it. */
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: none; /* prevent rubber-band on body */
}

/* When the mobile nav drawer is open, freeze the page scroll */
body.nav-open {
  overflow: hidden;
  overflow: clip;
}

/* ── Layout safety nets ────────────────────────────────────── */

/* Flex/grid children must be allowed to shrink below their content,
   otherwise long words / pre-formatted content force horizontal scroll. */
*,
*::before,
*::after {
  min-width: 0;
}

/* Media is responsive by default, never wider than its container. */
img,
svg,
video,
canvas,
iframe,
picture {
  max-width: 100%;
  height: auto;
  display: block;
}

/* SVGs that participate in inline runs (icons inside buttons) need
   `inline-block` not `block` to align with text — Tailwind utility wins
   when present, this is just the safety default. */
button svg,
a svg,
.inline-svg {
  display: inline-block;
}

/* Long unbreakable strings in headings/paragraphs (URLs, em-dashes,
   long product names) should wrap rather than push the page wide. */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt {
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
}

/* `text-balance` keeps long words on the first line even when they
   overflow the parent at narrow widths (Chrome bug). Disable it on
   small screens — natural wrapping is correct. */
@media (max-width: 768px) {
  .text-balance,
  [class*="text-balance"] {
    text-wrap: wrap !important;
  }
}

/* ── Touch & tap targets ───────────────────────────────────── */
@media (pointer: coarse) {
  /* Ensure interactive elements meet the WCAG 44×44 target on touch.
     Only applied to inputs/buttons that don't already set min-height. */
  button,
  a[role="button"],
  input[type="submit"],
  input[type="button"] {
    min-height: 44px;
  }
}

/* ── Focus visibility (consistent across browsers) ────────── */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: 6px;
}

/* ── Form inputs ───────────────────────────────────────────── */
input,
select,
textarea {
  font: inherit;
}

/* Native select needs an explicit chevron once `appearance: none` is applied */
.form-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  appearance: none;
  -webkit-appearance: none;
}

textarea.form-textarea {
  resize: vertical;
  min-height: 8rem;
}

/* iOS auto-zooms on inputs whose font-size < 16px on focus. Force at
   least 16px on small screens so the page doesn't jump. */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* ── Helper text below inputs ──────────────────────────────── */
.form-hint {
  font-size: 0.75rem;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}

/* ── Reduced-motion respect ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print ─────────────────────────────────────────────────── */
@media print {
  header,
  footer,
  #mobile-nav {
    display: none !important;
  }
}