/* Project-wide responsive + layout tweaks */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  font-family: var(--brand-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  overflow-x: hidden;
  max-width: 100vw;
}

::selection {
  background-color: var(--brand-primary, #111827);
  color: #fff;
}

.site-chrome {
  background-color: var(--brand-primary, #111827);
}

/* Map legacy black chrome / CTAs to the admin brand color */
.bg-black {
  background-color: var(--brand-primary, #111827) !important;
}

.hover\:bg-black:hover,
.hover\:bg-black\/80:hover {
  background-color: var(--brand-primary-hover, #000000) !important;
}

.bg-gray-900 {
  background-color: var(--brand-primary, #111827) !important;
}

.hover\:bg-gray-800:hover,
.hover\:bg-black\/80:hover {
  background-color: var(--brand-primary-hover, #000000) !important;
}

.text-brand-600 {
  color: var(--brand-primary, #111827);
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* Keep long product names / addresses from blowing out layouts */
.break-anywhere {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Tables should scroll horizontally on small screens when needed */
.table-scroll,
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Inputs never force the page wider than the viewport */
input,
select,
textarea,
button {
  max-width: 100%;
}

/* Pre / code blocks wrap on phones */
pre,
code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Leave room for the fixed mobile bottom navigation */
@media (max-width: 767px) {
  .mobile-bottom-nav a:active {
    background-color: rgba(0, 0, 0, 0.03);
  }

  /* Prefer readable type and tighter cards on phones */
  .card {
    padding: 1rem !important;
  }

  .admin-card {
    padding: 1rem !important;
  }

  /* Prevent wide tables / admin panels from causing page-level scroll */
  main,
  .admin-card,
  section {
    max-width: 100%;
  }

  /* Soften large headings on narrow screens */
  h1 {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    line-height: 1.25;
  }

  /* Keep sticky headers from trapping horizontal overflow */
  header,
  footer,
  nav {
    max-width: 100vw;
  }
}

/* Very small phones */
@media (max-width: 379px) {
  .card,
  .admin-card {
    padding: 0.85rem !important;
  }
}