/* Omni AltAmana: UX patch layer (10 Oct 2026). Loaded after styles.css.
   Only rules checked against the live styles.css. */

:root {
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-6: 48px; --s-8: 64px; --s-10: 80px; --s-15: 120px;
  --section-y: clamp(48px, 6.4vw + 24px, 120px);
  --measure: 65ch;
  --orange-text: #F26A46;   /* 4.77:1 on #1E2B35 cards */
  --on-accent: #15191C;     /* charcoal on orange: 4.76:1, hover 5.83:1 */
}

/* Text wrapping: balanced headings, no orphans, no overflow */
h1, h2, h3, h4 { text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
p, li, dd, figcaption { text-wrap: pretty; overflow-wrap: break-word; }
.lead, .sec-head p, .prose p, .prose li { max-width: var(--measure); }
.sku, a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Section rhythm: 48px on phones, up to 120px on wide screens */
.section { padding-block: var(--section-y); }

/* Contrast: primary buttons were white on orange (3.72:1) */
.btn-primary, .btn-primary:hover, .btn-primary:focus-visible { color: var(--on-accent); font-weight: 600; }
.card .eyebrow, .form-card .eyebrow, .drawer-panel .eyebrow { color: var(--orange-text); }
:focus-visible { outline: 3px solid var(--orange-text); outline-offset: 3px; }

/* Touch targets: 48px minimum */
.btn-sm, .cookie .btn, .mbar .btn, .chip, .qadd, .seg button {
  min-height: 48px;
}
.qadd, .chip { display: inline-flex; align-items: center; justify-content: center; }
.burger { width: 48px; height: 48px; }

/* Layout shift: reserve the injected header's height */
#site-header { min-height: var(--header-h, 76px); }

/* Images keep their aspect ratio from width/height attributes */
img { height: auto; }
.card .media img, .gallery-grid img, .hero > img, .page-hero > img { height: 100%; }

/* Malformed keyframe in styles.css ("-200%0") */
@keyframes sk { to { background-position: -200% 0; } }

/* Tables scroll inside their own box, never the page */
.tbl-wrap, .dtable-wrap { overflow-x: auto; max-width: 100%; }

@media (max-width: 480px) {
  .hero .btn-row .btn, .page-hero .btn-row .btn, .cta-band .btn-row .btn { flex: 1 1 100%; justify-content: center; }
}