/* DFW MTB Trail Hub - Visual Enhancement Overrides v2 */

/* ============================================
   1. TRAIL CARD: Fix name overlap with badge
   ============================================ */

/* Reduce badge max-width so it doesn't eat into trail names */
[data-testid^="card-trail-"] .absolute.top-2.right-2 {
  max-width: 38% !important;
}

/* Trail name: allow wrapping instead of being cut off by truncate */
[data-testid^="card-trail-"] h3 {
  word-break: break-word;
  overflow-wrap: break-word;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow: visible !important;
  line-height: 1.3;
}

/* ============================================
   2. SHOPS PAGE: 3-column layout sooner
   ============================================ */

/* Force 3 columns at 768px+ for the shop card grid */
@media (min-width: 768px) {
  /* Target the grid container holding shop cards */
  .grid:has(> [data-testid^="shop-"]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Fallback for browsers without :has() - target by parent structure */
@supports not (selector(:has(*))) {
  @media (min-width: 768px) {
    .mx-auto.max-w-7xl .grid.md\:grid-cols-2.lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }
}

/* ============================================
   3. LARGE RESOLUTION ENHANCEMENTS (1440px+)
   ============================================ */

/* Widen the max content area on ultra-wide screens */
@media (min-width: 1440px) {
  .max-w-7xl {
    max-width: 88rem;
  }
}

@media (min-width: 1920px) {
  .max-w-7xl {
    max-width: 96rem;
  }
}

/* ============================================
   4. TABLET IMPROVEMENTS (768px - 1023px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  /* Trail cards: Ensure status badges don't crowd trail names on tablet */
  [data-testid^="card-trail-"] .absolute.top-2.right-2 {
    max-width: 34% !important;
    font-size: 0.5625rem;
  }
}

/* ============================================
   5. MOBILE IMPROVEMENTS (< 640px)
   ============================================ */

@media (max-width: 639px) {
  /* Trail cards: Stack badge below the name on mobile instead of overlay */
  [data-testid^="card-trail-"] .absolute.top-2.right-2 {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    max-width: 100% !important;
    margin-bottom: 0.5rem;
  }

  /* More compact sort/filter controls on mobile */
  [data-testid="input-search-shops"] {
    width: 100%;
  }
}

/* ============================================
   6. SHOP CARDS: Better visual hierarchy
   ============================================ */

/* Normalize shop card borders — no sponsor highlight glow */
[data-testid^="shop-"] {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  border-color: hsl(var(--border) / 0.5) !important;
  outline: none !important;
  box-shadow: none;
}

[data-testid^="shop-"]:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  border-color: hsl(var(--border)) !important;
}

/* Prevent focus rings from highlighting shop card links */
[data-testid^="shop-"] a:focus-visible,
[data-testid^="shop-"] a:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Specialty tags: slightly larger for readability */
[data-testid^="shop-"] .bg-sky-500\/10 {
  padding: 0.1875rem 0.5rem;
}

/* ============================================
   7. GENERAL POLISH
   ============================================ */

/* Smoother scrolling */
html {
  scroll-behavior: smooth;
}

/* Better focus styles for accessibility */
input:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid hsl(var(--primary) / 0.5);
  outline-offset: 2px;
}

/* Trail "ride early" tag: improved visibility */
.text-purple-400\/70 {
  background-color: rgba(139, 92, 246, 0.1);
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
}

/* Condition key bar: slightly tighter on desktop */
@media (min-width: 1024px) {
  [class*="CONDITION"] {
    font-size: 0.6875rem;
  }
}

/* ============================================
   8. PRINT STYLES
   ============================================ */

@media print {
  nav, footer, .leaflet-container {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  [data-testid^="card-trail-"] > div {
    break-inside: avoid;
    border: 1px solid #ccc !important;
    background: white !important;
    color: black !important;
  }
}

/* ============================================
   9. READABILITY: FONT SIZE UPGRADES v4
   ============================================ */

/* Bump all arbitrary tiny sizes */
[class*="text-[9px]"]    { font-size: 13px !important; line-height: 1.5 !important; }
[class*="text-[10px]"]   { font-size: 14px !important; line-height: 1.5 !important; }
[class*="text-[11px]"]   { font-size: 14px !important; line-height: 1.5 !important; }
[class*="text-[0.8rem]"] { font-size: 14px !important; }

/* Section headings: TRAIL ALERTS, MAINTAINED BY, TODAY'S TRAIL FEEL,
   7-DAY RAINFALL, 7-DAY FORECAST, AUTO-CLOSURE CONFIDENCE, 
   RECENT RAIN EVENTS — all use text-xs font-mono uppercase tracking-wider */
.text-xs.font-mono.uppercase.tracking-wider {
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
}

/* text-xs everywhere else */
.text-xs { font-size: 13px !important; }

/* Injected wind/humidity rows */
[data-dfwmtb-injected] { font-size: 13px !important; }
[data-dfwmtb-injected] span { font-size: 13px !important; }

/* ============================================
   10. 7-DAY RAINFALL: SVG DATE LABELS
   SVG text renders visually smaller than HTML
   at the same px — needs bigger values.
   ============================================ */

.recharts-cartesian-axis-tick text {
  font-size: 13px !important;
}
/* Also target via fill attribute which recharts uses */
.recharts-text.recharts-cartesian-axis-tick-value {
  font-size: 13px !important;
}

/* ============================================
   11. 7-DAY FORECAST: SCROLLABLE ON MOBILE
   ============================================ */

@media (max-width: 767px) {
  .grid-cols-7 {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .grid-cols-7::-webkit-scrollbar { display: none; }
  .grid-cols-7 > * {
    min-width: 90px !important;
    flex-shrink: 0 !important;
  }
}

/* ============================================
   12. SIDE-BY-SIDE: EQUAL HEIGHT via CSS
   ============================================ */

/* Wrapper: stretch children to equal height */
[data-dfwmtb-pair] {
  align-items: stretch !important;
}

/* Each column wrapper fills the row height */
[data-dfwmtb-pair] > * {
  height: 100% !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
}

/* The inner bg-card fills its column wrapper */
[data-dfwmtb-pair] > * > .bg-card,
[data-dfwmtb-pair] > .bg-card {
  height: 100% !important;
  flex: 1 1 auto;
  box-sizing: border-box;
}

/* Mobile: stack vertically */
@media (max-width: 859px) {
  [data-dfwmtb-pair] { display: block !important; }
  [data-dfwmtb-pair] > * {
    height: auto !important;
    display: block !important;
    margin-bottom: 16px !important;
  }
  [data-dfwmtb-pair] > * > .bg-card,
  [data-dfwmtb-pair] > .bg-card { height: auto !important; }
}