/* Stride | Shared Site Styles */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; }

/* Remove 300ms tap delay on all interactive elements (iOS Safari / Android Chrome) */
a, button, summary, label, [onclick], [role="button"] { touch-action: manipulation; }

/* ── Keyboard focus-visible styles ─────────────────────────────────────────── */
/* Only show focus ring for keyboard users; mouse clicks remain unaffected      */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #5DBE9A;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Mobile nav touch targets ───────────────────────────────────────────────── */
/* Hamburger button: ensure 48px minimum (iOS recommends ≥44px)                */
button[aria-label="Toggle menu"] { padding: 0.75rem; }

/* Mobile top-level nav links: add horizontal padding for larger tap area       */
#mobile-menu > div > a { padding-left: 0.5rem; padding-right: 0.5rem; }
#mobile-menu > div > div > button { padding-left: 0.5rem; padding-right: 0.5rem; }

/* Mobile services sub-menu: bump to ~44px touch target height                  */
#mobile-services a { padding-top: 0.6875rem; padding-bottom: 0.6875rem; padding-left: 0.5rem; }

/* Ensure anchor scroll targets aren't hidden behind the sticky nav */
.scroll-mt-nav { scroll-margin-top: 6rem; }
summary::-webkit-details-marker, summary::marker { display: none; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Marquee animation */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee 30s linear infinite; display: flex; white-space: nowrap; }

/* Fade-up animation */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.6s ease-out both; }

/* Accordion + / - icon toggle via CSS */
details .acc-minus { display: none; }
details[open] .acc-plus  { display: none; }
details[open] .acc-minus { display: flex; }

/* Smooth card hover */
.card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-4px); }

/* ─── Custom brand colour fallbacks ─────────────────────────────────────────
   Explicit CSS classes to ensure brand colours always render, in addition to
   the compiled Tailwind utilities in tailwind.css.
   ─────────────────────────────────────────────────────────────────────────── */

/* Backgrounds */
.bg-charcoal   { background-color: #3A3933; }
.bg-cream      { background-color: #FAF7F2; }
.bg-sand       { background-color: #F5F0E8; }
.bg-green      { background-color: #5DBE9A; }
.bg-green-dark { background-color: #4AA885; }
.bg-coral      { background-color: #F47B6C; }
.bg-coral-dark { background-color: #E66B5C; }
.bg-plum       { background-color: #B77FB8; }
.bg-plum-dark  { background-color: #A56FA6; }

/* Text */
.text-charcoal  { color: #3A3933; }
.text-warm-gray { color: #8B8578; }
.text-green     { color: #5DBE9A; }
.text-green-dark{ color: #4AA885; }
.text-coral     { color: #F47B6C; }
.text-plum      { color: #B77FB8; }

/* Borders */
.border-sand  { border-color: #F5F0E8; }
.border-green { border-color: #5DBE9A; }
.border-coral { border-color: #F47B6C; }
.border-plum  { border-color: #B77FB8; }

/* Opacity variants: backgrounds */
.bg-green\/5  { background-color: rgba(93,190,154,0.05); }
.bg-green\/10 { background-color: rgba(93,190,154,0.10); }
.bg-green\/20 { background-color: rgba(93,190,154,0.20); }
.bg-coral\/5  { background-color: rgba(244,123,108,0.05); }
.bg-coral\/10 { background-color: rgba(244,123,108,0.10); }
.bg-plum\/5   { background-color: rgba(183,127,184,0.05); }
.bg-plum\/10  { background-color: rgba(183,127,184,0.10); }
.bg-white\/5  { background-color: rgba(255,255,255,0.05); }
.bg-white\/10 { background-color: rgba(255,255,255,0.10); }
.bg-white\/20 { background-color: rgba(255,255,255,0.20); }
.bg-white\/30 { background-color: rgba(255,255,255,0.30); }
.bg-white\/95 { background-color: rgba(255,255,255,0.95); }

/* Opacity variants: text */
.text-charcoal\/70 { color: rgba(58,57,51,0.70); }
.text-charcoal\/80 { color: rgba(58,57,51,0.80); }
.text-white\/60    { color: rgba(255,255,255,0.60); }
.text-white\/70    { color: rgba(255,255,255,0.70); }
.text-white\/80    { color: rgba(255,255,255,0.80); }
.text-white\/90    { color: rgba(255,255,255,0.90); }
.text-white\/95    { color: rgba(255,255,255,0.95); }

/* Opacity variants: borders */
.border-white\/10 { border-color: rgba(255,255,255,0.10); }
.border-white\/20 { border-color: rgba(255,255,255,0.20); }
.border-white\/30 { border-color: rgba(255,255,255,0.30); }
.border-green\/20 { border-color: rgba(93,190,154,0.20); }
.border-coral\/20 { border-color: rgba(244,123,108,0.20); }
.border-plum\/20  { border-color: rgba(183,127,184,0.20); }
.border-sand { border-color: #F5F0E8; }

/* Hover states */
.hover\:bg-green-dark:hover  { background-color: #4AA885; }
.hover\:bg-coral-dark:hover  { background-color: #E66B5C; }
.hover\:bg-green\/5:hover    { background-color: rgba(93,190,154,0.05); }
.hover\:bg-green\/20:hover   { background-color: rgba(93,190,154,0.20); }
.hover\:bg-white\/20:hover   { background-color: rgba(255,255,255,0.20); }
.hover\:text-green:hover     { color: #5DBE9A; }
.hover\:text-green-dark:hover{ color: #4AA885; }
.hover\:border-green:hover   { border-color: #5DBE9A; }