/**
 * ====================================
 * UI POLISH - TILLERSTEAD 2026
 * ====================================
 * Global interaction quality improvements:
 * focus rings, selection, scrolling, micro-interactions.
 * Loaded last — takes precedence over component files.
 */

/* ====================================
   SMOOTH SCROLL
   ==================================== */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ====================================
   TEXT SELECTION
   ==================================== */

::selection {
  background: rgb(0 163 92 / 25%);
  color: inherit;
}

/* ====================================
   GLOBAL FOCUS RING STANDARD
   Uses a two-layer ring: white + green glow.
   Works on both dark and light backgrounds.
   ==================================== */

:focus-visible {
  outline: 2px solid var(--primary-400, #00c46c);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgb(0 163 92 / 20%);
  border-radius: 4px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Override for specific contexts that need heavier rings */
.ts-nav__link:focus-visible,
.ts-nav__trigger:focus-visible,
.ts-nav-toggle:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  box-shadow:
    0 0 0 2px rgb(0 0 0 / 20%),
    0 0 0 5px rgb(255 255 255 / 50%);
  border-radius: var(--radius-md, 8px);
}

.ts-drawer__link:focus-visible,
.ts-drawer__accordion-trigger:focus-visible,
.ts-drawer__close:focus-visible {
  outline: 2px solid var(--primary-500, #00a35c);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgb(0 163 92 / 20%);
  border-radius: var(--radius-sm, 6px);
}

.ts-nav__dropdown a:focus-visible {
  outline: 2px solid var(--primary-500, #00a35c);
  outline-offset: -2px;
  box-shadow: none;
  background: var(--primary-50, #f0fdf8);
  color: var(--primary-700, #00703e);
}

/* Buttons on green/dark background */
.ts-header .btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgb(255 255 255 / 30%);
}

/* ====================================
   SMOOTH SCROLLBAR ON OVERFLOW CONTAINERS
   ==================================== */

.ts-drawer,
.ts-nav__dropdown {
  scrollbar-width: thin;
  scrollbar-color: rgb(0 163 92 / 40%) transparent;
}

.ts-drawer::-webkit-scrollbar {
  width: 4px;
}

.ts-drawer::-webkit-scrollbar-track {
  background: transparent;
}

.ts-drawer::-webkit-scrollbar-thumb {
  background: rgb(0 163 92 / 40%);
  border-radius: 4px;
}

/* ====================================
   HEADER ACTION BUTTONS (nav context)
   Tighter, crisper Call Now + Get Estimate
   ==================================== */

.ts-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.75vw, 0.75rem);
  flex-shrink: 0;
}

.ts-header__actions .btn--ghost {
  border-color: rgb(255 255 255 / 55%);
  font-size: clamp(0.8125rem, 0.85vw, 0.875rem);
  padding: 0.4375rem 1rem;
}

.ts-header__actions .btn--primary {
  font-size: clamp(0.8125rem, 0.85vw, 0.875rem);
  padding: 0.4375rem 1rem;
  box-shadow: 0 2px 10px rgb(0 163 92 / 35%);
}

.ts-header__actions .btn--primary:hover {
  box-shadow: 0 4px 18px rgb(0 163 92 / 45%);
}

/* ====================================
   NAV DROPDOWN ITEM FOCUS RING
   (inset outline so it doesn't escape rounded corners)
   ==================================== */

.ts-nav__dropdown a:focus-visible {
  outline-offset: -2px;
}

/* ====================================
   CTA BUTTON NAV ITEM LIFT
   ==================================== */

.ts-nav__item--cta .ts-nav__link:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.08s;
}

/* ====================================
   ACCORDION TRIGGER CHEVRON SMOOTHNESS
   ==================================== */

.ts-drawer__chevron {
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  margin-left: auto;
}

.ts-drawer__accordion-trigger[aria-expanded='true'] .ts-drawer__chevron {
  transform: rotate(180deg);
}

/* ====================================
   DRAWER CLOSE BUTTON IMPROVEMENTS
   ==================================== */

.ts-drawer__close {
  transition:
    background-color 0.2s ease,
    transform 0.2s ease,
    color 0.2s ease;
}

.ts-drawer__close:hover {
  transform: rotate(90deg);
}

.ts-drawer__close:active {
  transform: rotate(90deg) scale(0.9);
  transition-duration: 0.08s;
}

/* ====================================
   PLACEHOLDER COLOR
   ==================================== */

input::placeholder,
textarea::placeholder {
  color: rgb(107 114 128 / 80%);
  transition: color 0.2s ease;
}

input:focus::placeholder,
textarea:focus::placeholder {
  color: rgb(107 114 128 / 45%);
}

/* ====================================
   LINK DEFAULT TRANSITIONS
   ==================================== */

a {
  transition: color 0.18s ease;
}

/* ====================================
   REDUCED MOTION OVERRIDES
   ==================================== */

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

  .ts-drawer__close:hover {
    transform: none;
  }
}

/* ====================================
   PRINT: hide nav chrome
   ==================================== */

@media print {
  .ts-header,
  .ts-drawer,
  .ts-nav-toggle {
    display: none !important;
  }
}