/* Pilgrim's Path — Temperature/Precipitation Chart (scoped, generic)
   Scope: styles only apply inside [data-pilgrim="chart"]
   Fonts + 5-color palette + minimal components; safe to load alongside other site CSS.
*/
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Poppins:wght@400;500;600&display=swap");

/* ---------- Theme tokens (override on the wrapper if needed) ---------- */
[data-pilgrim="chart"]{
  /* Fonts */
  --pilgrim-font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pilgrim-font-body:    "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Brand 5-color swatch */
  --pilgrim-color-1: #FFFFFF; /* white */
  --pilgrim-color-2: #E8DED6; /* warm light */
  --pilgrim-color-3: #4A7496; /* slate blue */
  --pilgrim-color-4: #214B6B; /* deep navy */
  --pilgrim-color-5: #2E353C; /* charcoal */

  /* Neutral ramps (derived / defaults) */
  --pilgrim-neutral-900: #2E353C;
  --pilgrim-neutral-500: #666A70;
  --pilgrim-neutral-300: #E5E7EB;

  /* Seasonal band tints (monochrome) */
  --pilgrim-band-wet: rgba(74,116,150,0.10);
  --pilgrim-band-dry: rgba(33,75,107,0.06);

  /* Logo */
  --pilgrim-logo-url: url("https://aarondsmith.github.io/pilgrims-path-assets/logo.png");
  --pilgrim-logo-opacity: 0.5;

  color: var(--pilgrim-neutral-900);
  font-family: var(--pilgrim-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Responsive logo sizing tokens (used by JS when embedding inside SVG) */
@media (max-width: 768px){ [data-pilgrim="chart"]{ --pilgrim-logo-size: 50px; } }
@media (max-width: 480px){ [data-pilgrim="chart"]{ --pilgrim-logo-size: 45px; } }
[data-pilgrim="chart"]{ --pilgrim-logo-size: 55px; } /* default */

/* ---------- Components (namespaced with .pilgrim-*) ---------- */
[data-pilgrim="chart"] .pilgrim-card{ background:#fff; border:1px solid var(--pilgrim-neutral-300); border-radius:.8rem; overflow:hidden; }
[data-pilgrim="chart"] .pilgrim-head{ padding:1rem 1.25rem .25rem; background:transparent; }
[data-pilgrim="chart"] .pilgrim-head h2{ margin:0; font-family:var(--pilgrim-font-heading); font-weight:700; letter-spacing:.2px; background:transparent !important; }
[data-pilgrim="chart"] .pilgrim-sub{ color:var(--pilgrim-neutral-500); margin:.35rem 0 .75rem; }

[data-pilgrim="chart"] .pilgrim-controls{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; padding:.75rem 1.25rem; border-bottom:1px solid var(--pilgrim-neutral-300); }
[data-pilgrim="chart"] .pilgrim-unit{ display:flex; gap:.6rem; align-items:center; }
[data-pilgrim="chart"] .pilgrim-unit input{ accent-color: var(--pilgrim-color-4); }

[data-pilgrim="chart"] .pilgrim-tabs{ display:flex; gap:.5rem; border-bottom:1px solid var(--pilgrim-neutral-300); padding:.6rem 1.25rem 0; }
[data-pilgrim="chart"] .pilgrim-tab{
  appearance:none; border:1px solid var(--pilgrim-neutral-300); border-bottom:none; background:#F7F7F7;
  padding:.6rem .9rem; border-top-left-radius:.6rem; border-top-right-radius:.6rem; cursor:pointer;
  font-family:var(--pilgrim-font-body); color:var(--pilgrim-neutral-900);
}
[data-pilgrim="chart"] .pilgrim-tab[aria-selected="true"]{ background:#fff; font-weight:600; }
[data-pilgrim="chart"] .pilgrim-tab:focus{ outline:none; }
[data-pilgrim="chart"] .pilgrim-tab:focus-visible{ outline:2px solid var(--pilgrim-color-3); outline-offset:2px; }

[data-pilgrim="chart"] .pilgrim-panel{ display:none; padding:1rem 1.25rem 1.25rem; }
[data-pilgrim="chart"] .pilgrim-panel.active{ display:block; }
[data-pilgrim="chart"] .pilgrim-chart-wrap{ width:100%; max-width:960px; margin:auto; position:relative; }

/* Horizontal scroll shell for mobile */
[data-pilgrim="chart"] .pilgrim-chart-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; position:relative; }
[data-pilgrim="chart"] .pilgrim-chart-scroll.scrollable::before,
[data-pilgrim="chart"] .pilgrim-chart-scroll.scrollable::after{
  content:""; position:sticky; top:0; width:18px; height:100%;
  pointer-events:none; z-index:2;
}
[data-pilgrim="chart"] .pilgrim-chart-scroll.scrollable::before{ left:0;  background:linear-gradient(to right, #fff 0%, rgba(255,255,255,0) 100%); }
[data-pilgrim="chart"] .pilgrim-chart-scroll.scrollable::after { right:0; background:linear-gradient(to left,  #fff 0%, rgba(255,255,255,0) 100%); }
[data-pilgrim="chart"] .pilgrim-svg-wide{ display:block; } /* width set by JS */
[data-pilgrim="chart"] .pilgrim-snap-track{ display:flex; }
[data-pilgrim="chart"] .pilgrim-snap{ flex:0 0 auto; height:1px; } /* width set by JS */
[data-pilgrim="chart"] .pilgrim-chart-scroll{ scroll-snap-type:x mandatory; }
[data-pilgrim="chart"] .pilgrim-snap{ scroll-snap-align:start; }

[data-pilgrim="chart"] figure{ margin:0; }
[data-pilgrim="chart"] figcaption{ color:var(--pilgrim-neutral-500); font-size:.92rem; margin-top:.5rem; }
[data-pilgrim="chart"] .pilgrim-legend{ display:flex; gap:1rem; flex-wrap:wrap; font-size:.9rem; margin:.5rem 0 0; color:var(--pilgrim-neutral-500); }
[data-pilgrim="chart"] .pilgrim-legend .sw{ width:16px; height:3px; display:inline-block; border-radius:2px; }

/* Tooltip */
[data-pilgrim="chart"] .pilgrim-tt{
  position:fixed; z-index:5; pointer-events:none; background:#111; color:#fff; font-size:.82rem;
  padding:.3rem .45rem; border-radius:.35rem; opacity:0; transform:translateY(-2px);
  transition:opacity .12s ease, transform .12s ease; max-width:240px; line-height:1.25;
}
[data-pilgrim="chart"] .pilgrim-tt.show{ opacity:1; transform:none; }

/* SVG baseline */
[data-pilgrim="chart"] svg{ width:100%; height:auto; display:block; }

/* Print */
@media print{
  [data-pilgrim="chart"] .pilgrim-tabs,
  [data-pilgrim="chart"] .pilgrim-controls,
  [data-pilgrim="chart"] .pilgrim-tt{ display:none !important; }
  [data-pilgrim="chart"] .pilgrim-panel{ display:block !important; }
  [data-pilgrim="chart"] .pilgrim-card{ border:none; }
}

/* Mobile polish */
@media (max-width: 768px){
  [data-pilgrim="chart"] .pilgrim-tabs{ gap:.4rem; }
  [data-pilgrim="chart"] .pilgrim-tab{ flex:1 1 50%; text-align:center; }
  [data-pilgrim="chart"] .pilgrim-legend{ justify-content:flex-start; }
}