/* Custom styles for NYC to Montreal Bike Tour Webpage */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --primary: #0284c7;
  --primary-dark: #0369a1;
  --secondary: #0f172a;
  --accent: #10b981;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1e293b;
  background-color: #f8fafc;
}

.currency-banner {
  background: #fffbeb;
  border-bottom: 1px solid #fde68a;
  color: #78350f;
  font-size: 0.8125rem;
  line-height: 1.45;
  padding: 0.6rem 1rem;
  text-align: center;
}

.currency-banner-pointer { margin-top: 0.25rem; }

.currency-banner-pointer a { font-weight: 700; text-decoration: underline; }

/* Guide tabs (Route & Days / Weather / Advisories / Bike Shops & Gear) */
.guide-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 0.375rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.guide-tab {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #475569;
  padding: 0.55rem 0.9rem;
  border-radius: 0.75rem;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s;
}

.guide-tab:hover { background: #f1f5f9; color: #0f172a; }

.guide-tab.is-active { background: #0f172a; color: #fff; }

.guide-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

#map {
  height: 520px;
  width: 100%;
  border-radius: 1rem;
  z-index: 10;
}

@media (max-width: 768px) {
  #map {
    height: 380px;
  }
}

/* Custom Marker Styling */
.custom-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  font-size: 13px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  border: 2px solid white;
}

.pin-hotel {
  background-color: #4f46e5; /* Indigo */
}

.pin-lunch {
  background-color: #ea580c; /* Orange */
}

.pin-bike {
  background-color: #dc2626; /* Red */
}

.pin-bailout {
  background-color: #0284c7; /* Sky */
}

.pin-border {
  background-color: #059669; /* Emerald */
}

.badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Print Stylesheet */
@page {
  size: letter portrait;
  margin: 0.35in;
}

@media print {
  header, nav, footer, #map-controls, .no-print, .interactive-toggle, button {
    display: none !important;
  }

  /* print every guide tab, not just the one on screen */
  .guide-panel[hidden] {
    display: block !important;
  }
  
  #map {
    height: 350px !important;
    page-break-after: avoid;
  }
  
  body {
    background: white !important;
    color: black !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .card, .day-card {
    page-break-inside: avoid;
    border: 1px solid #cbd5e1 !important;
    box-shadow: none !important;
    margin-bottom: 1.5rem !important;
  }

  /* Linear Strip Map Stage Card (Fits exactly 1 page per stage) */
  .mta-stage-block {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    page-break-after: always !important;
    break-after: page !important;
    border: 2px solid #000000 !important;
    box-shadow: none !important;
    margin: 0 0 1rem 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .mta-stage-block:last-child {
    page-break-after: auto !important;
    break-after: auto !important;
  }

  /* Two-column layout: Map on Left (40%), Cue Sheet on Right (60%) */
  .mta-stage-grid {
    display: grid !important;
    grid-template-columns: 40% 60% !important;
    gap: 0 !important;
  }

  .mta-stage-map-col {
    display: flex !important;
    border-right: 1.5px solid #cbd5e1 !important;
    border-bottom: none !important;
    padding: 3px !important;
    background-color: #fafafa !important;
  }

  .mta-stage-cue-col {
    display: block !important;
    padding: 3px 6px !important;
  }

  /* Cue Sheet Table Typography for Single-Page Printing */
  .mta-cue-table {
    width: 100% !important;
    font-size: 7.5pt !important;
    line-height: 1.15 !important;
    border-collapse: collapse !important;
  }

  .mta-cue-table th {
    padding: 1.5pt 2pt !important;
    font-size: 7pt !important;
    border-bottom: 1.5pt solid #0f172a !important;
  }

  .mta-cue-table td {
    padding: 1pt 2pt !important;
    border-top: 0.5pt solid #f1f5f9 !important;
  }

  .mta-cue-table.dense-cue-table {
    font-size: 6.5pt !important;
    line-height: 1.08 !important;
  }

  .mta-cue-table.dense-cue-table th {
    padding: 1pt 1.5pt !important;
    font-size: 6.5pt !important;
  }

  .mta-cue-table.dense-cue-table td {
    padding: 0.5pt 1.5pt !important;
  }

  .mta-stage-masthead {
    padding: 4px 8px !important;
    background: #000000 !important;
    color: #ffffff !important;
  }

  .mta-stage-subbar {
    padding: 2px 8px !important;
    font-size: 7pt !important;
    background: #f1f5f9 !important;
  }

  .mta-elev-bar {
    padding: 2px 6px !important;
    border-top: 1px solid #e2e8f0 !important;
  }

  .mta-elev-bar span {
    font-size: 6pt !important;
  }
}