/* Extracted from templates/base.html to keep shared layout and behavior centralized. */
    html {
      translate: no !important;
    }
    body, * {
      translate: no !important;
    }

:root {
  /* =========================
     Brand (keep identity)
     ========================= */

  --main-dark: #2B1848;   /* smoky purple (instead of #3D0075) */
  --header-bg: var(--main-dark);
  --main:       var(--main-dark);;  /* hover/footers/ribbons (same as brand in dark mode) */


  /* =========================
     Dark mode backgrounds
     ========================= */
  --background:      #1E1B24;  /* page background */
  --surface-1:       #262230;  /* panels, containers */
  --surface-2:       #2F2A3D;  /* elevated panels, cards */

  /* Keep old variable names used across templates */
  --secondary-dark:  #2F2A3D;  /* cards/boxes */
  --light-grey:      #3A3550;  /* borders / dividers (was “light” in light mode, now subtle border) */
  --dark-grey:       #9E94B8;  /* muted text/icons */

  /* =========================
     Text
     ========================= */
  --text-main:       #F5EEFF;  /* primary text on dark */
  --text-secondary:  #CFC6E6;  /* secondary text */
  --text-body:       #F5EEFF;  /* body text (set to light, since background is dark now) */
  --text-muted:      #9E94B8;  /* extra-muted labels */


    /* =========================
     Map UI colors (pins + clusters)
     Keep these brighter than --main-dark so they don’t go “black/white”
     ========================= */
    --map-bouldering:  #6A4FB3;  /* accent-soft purple */
    --map-sport:       #14111B;  /* ink black (very subtle purple tint) */

    /* Cluster gradient: dark → clearly purple */
    --map-cluster-min: #2E2A3A;  /* dark slate-purple (not grey) */
    --map-cluster-max: #654cd6;  /* brighter, vivid purple for BIG clusters */

  /* =========================
     UI lines / accents
     ========================= */
  --border-subtle:   #3A3550;
  --accent-soft:     #6A4FB3;

      /* Grid container sizes */
      --gutter: 16px;
      --container-max: 1480px;
      --container-max-wide: 1680px;


      /* Content sizing */
      --content-max: 1100px;   /* default cap for wide pages */
      --content-narrow: 820px; /* cap for tight content (maps, weatherbox) */
      --section-gap: 50px;  /* match your desired spacing */
      --page-gap: 10px
    }

    /* Minimal helpers */
    .bg-main           { background: var(--main); }
    .bg-background     { background: var(--background); }
    .bg-main-dark      { background: var(--main-dark); }
    .bg-secondary-dark { background: var(--secondary-dark); }
    .bg-light-grey     { background: var(--light-grey); }
    .text-main         { color: var(--text-main); }
    .text-secondary    { color: var(--text-secondary); }
    /* Fonts */
    @font-face {
      font-family: 'Modak';
      src: url('/static/fonts/Modak-Regular.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
      font-display: block;
    }
    @font-face {
      font-family: 'SairaStencilOne';
      src: url('/static/fonts/SairaStencilOne-Regular.ttf') format('truetype-variations');
      font-weight: 100 900;
      font-display: block;
    }
    @font-face {
      font-family: "Saira Var";
      src: url("/static/fonts/Saira-VariableFont_wdth,wght.ttf") format("truetype");
      font-style: normal;
      font-weight: 100 900;              /* full weight range */
      font-stretch: 62.5% 125%;          /* wdth axis mapped to CSS font-stretch */
      font-display: block;
    }





    /* Global UI font token + defaults */
    :root {
      --ui-font: "Saira Var", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }
    
    /* Apply to common controls and text elements */
    html, body, button, input, select, textarea {
      font-family: var(--ui-font);
      font-optical-sizing: auto; /* lets Saira Var auto-tune weight/contrast */
    }
    
    /* Header now only contains the "right" content → use normal UI font */
    #site-header { font-family: var(--ui-font); }

    /* Animations */
    @keyframes slideInFromTop   { 0%{opacity:0;transform:translateY(-40px);} 100%{opacity:1;transform:translateY(0);} }
    @keyframes slideInFromBottom{ 0%{opacity:0;transform:translateY( 40px);} 100%{opacity:1;transform:translateY(0);} }
    @keyframes slideInFromLeft  { 0%{opacity:0;transform:translateX(-40px);} 100%{opacity:1;transform:translateX(0);} }

    /* Base page look */
    body {
      background-color: var(--background);
      color: #ddd;
      font-family: "Saira Var";
      margin: 0;
      padding: 0;
    }


    /* Global layout guards (new) */
    *, *::before, *::after { box-sizing: border-box; }

    html, body {
      overflow-x: clip;      /* prevents sideways scroll without creating a scroll container */
      overflow-y: auto;      /* explicit vertical scrolling */
      overscroll-behavior-y: auto; /* don't block wheel scrolling */
    }
    

    /* Make media shrink within its container (prevents right “leak”) */
    img, canvas, svg, video { max-width: 100%; height: auto; display: block; }


    /* Centered page wrapper */
    .cc-wrap {
      margin-inline: auto;
      width: 100%;
      max-width: var(--container-max);
    }

    /* 12-col grid; mobile-first: stack by default */
    .cc-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--gutter);
      align-items: start;
    }

    .cc-pad{
      padding-left: var(--page-gap);
      padding-right: var(--page-gap);
    }

    /* Grid overflow guard (new) */
    .cc-wrap, .cc-grid, .cc-main { overflow-x: hidden; }
    /* Roles */
    .cc-main { grid-column: 1 / -1; }
    .cc-ad   { display: none; }  /* hidden on small/medium by default */

    /* ≥768px: switch to 12 columns */
    @media (min-width: 768px) {
      .cc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
      .cc-main { grid-column: 1 / -1; }
    }

    /* ≥1200px: desktop layout */
    @media (min-width: 1200px) {
      .cc-wrap { max-width: var(--container-max); }
      .cc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    
      /* Default: NO rails → center main across 10 columns (2..11) */
      .cc-ad { display: none; }
      .cc-main { grid-column: 2 / span 10; }
    
      /* Rails are opt-in via .has-rails */
      .has-rails .cc-ad { display: block; position: sticky; top: 12px; background: transparent; }
      .has-rails .cc-ad--left  { grid-column: 1 / span 2; }
      .has-rails .cc-main      { grid-column: 3 / span 8; }
      .has-rails .cc-ad--right { grid-column: 11 / span 2; }
    }
    /* ---------- Inner grid so children align to columns ---------- */
    @media (min-width: 1200px) {
      /* Make the content area itself a 12-col grid */
      .cc-main {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: var(--gutter);
      }
    
      /* When inside the grid, don't auto-center .content with margins.
         We'll place it with grid columns instead. */
      .cc-main > .content {
        margin-left: 0;
        margin-right: 0;
      }
    
      /* Column helpers (use these on direct children of .cc-main) */
      .col-12 { grid-column: 1 / -1; }        /* full width */
      .col-10 { grid-column: 2 / span 10; }   /* main band (2..11) */
      .col-8  { grid-column: 3 / span 8; }    /* centered 8-col band */
      .col-6  { grid-column: 4 / span 6; }    /* tighter band */
    
      /* Optional alignment helpers */
      .align-center { justify-self: center; } /* center item inside its span */
      .stretch      { justify-self: stretch; }/* stretch to span width */
    }



    /* ≥1600px: a bit more width for very large screens */
    @media (min-width: 1600px) {
      .cc-wrap { max-width: var(--container-max-wide); }
    }

  /* Fluid width helpers: center + cap width */
  .content {
    width: 100%;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
  }

  /* For tighter pages/sections: override cap */
  .content--narrow {
    --content-max: var(--content-narrow);
  }

  /* Optional: a fully fluid clamp you can use instead of fixed caps
     .content--clamp { width: clamp(280px, 90vw, 1100px); margin-inline:auto; } */


 /* =========================
   Unified Star Button (global)
   Works in: suggestions + favorites list
   ========================= */
.fav-star{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;

  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);

  cursor: pointer;
  padding: 0;
  margin-left: 8px;

  color: var(--text-main);
  opacity: 0.92;

  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
/* Favorite (saved) state — same as in the favorites section */
.fav-star[data-fav="1"]{
  background: rgba(61,0,117,0.28);
  border-color: rgba(106,79,179,0.45);
}
.fav-star:hover{
  opacity: 1;
  background: rgba(61,0,117,0.22);
  border-color: rgba(106,79,179,0.35);
  transform: translateY(-1px);
}

.fav-star:active{
  transform: translateY(0px);
  background: rgba(61,0,117,0.30);
}

.fav-star svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* Make the star pop a touch when it is "filled" (your JS inserts filled path) */
.fav-star svg path[fill="currentColor"]{
  filter: drop-shadow(0 2px 6px rgba(106,79,179,0.35));
}

/* Suggestions row layout: text left, star right */
#suggestions li.suggestion-row{
  justify-content: space-between;
  align-items: center;
}

/* Ensure the text truncates nicely next to the star */
#suggestions li.suggestion-row .suggestion-text{
  flex: 1 1 auto;
  min-width: 0;
}

    .suggestion-text{
      display: block;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .suggestion-left .suggestion-primary,
    .suggestion-left .suggestion-secondary {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }



/* ======================================================
   Unified Header Typography for BOTH pages
   ====================================================== */

/* Large screens (default) */
.header-primary {
  font-size: 1.85rem;        /* or whatever large size you prefer */
  font-weight: 600;
  line-height: 1.2;
}

.header-secondary {
  font-size: 0.95rem;
  opacity: 0.9;
}

/* Medium screens */
@media (max-width: 992px) {
  .header-primary {
    font-size: 1.45rem;
  }
  .header-secondary {
    font-size: 0.7rem;
  }
}

/* Small screens */
@media (max-width: 768px) {
  .header-primary {
    font-size: 1.15rem;
  }
  .header-secondary {
    font-size: 0.8rem;
  }
}



    /* Map container (shared) */
    #map {
      filter: saturate(0.9) brightness(0.9) contrast(1.05);
      height: 500px;
      width: 100%;
      max-width: 100%;
      margin: 0;
      border-radius: 2px;
      animation: slideInFromBottom 0.8s ease-out forwards;
      animation-fill-mode: forwards;
    }

    /* Cluster bubble */
    .cc-cluster {
      border-radius: 50%;
      display: grid;
      place-items: center;
      box-shadow: 0 0 0 3px rgba(255,255,255,0.8), 0 4px 10px rgba(0,0,0,0.25);
      color: #fff;
      font-weight: 700;
      border: 1px solid rgba(0,0,0,0.15);
    }
    .cc-cluster span {
      font-size: 14px;
      line-height: 1;
      transform: translateY(1px);
    }

    /* Needle pin (single-color only now) */
    .cc-needle {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid #ffffff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.25);
      position: relative;
    }
    .cc-needle::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: -8px;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 8px solid currentColor; /* tail outline tint */
      filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25));
    }

    /* Legend overlay (top-left on the map) */
    .cc-legend {
      background: var(--surface-2); /* uses your --background vibe */
      border: 3px solid var(--surface-2);
      border-radius: 6px;
      box-shadow: 0 6px 16px rgba(0,0,0,0.18);
      padding: 10px 10px;
      color: var(--text-body);
      font-family: var(--ui-font);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      opacity: 0.9;
    }
    .cc-legend .row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 6px 0;
      white-space: nowrap;
    }
    .cc-legend .label {
      font-size: 0.95rem;
      opacity: 0.9;
    }
    .cc-legend .cc-needle.legend {
      width: 16px;
      height: 16px;
    }
    .cc-legend .cc-needle.legend::after {
      bottom: -6px;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top-width: 6px;
    }



    
/* Dark Leaflet controls */
.leaflet-control-zoom a {
  background: var(--surface-2) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-subtle) !important;
}
.leaflet-control-zoom a:hover {
  background: rgba(255,255,255,0.05) !important;
}

/* Dark popup */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--surface-2) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-subtle) !important;
}

/* --- CondiCaster "Slate Mist" map treatment --- */
#map { background: var(--background); }


/* =========================
   Leaflet "My Location" button
   ========================= */
.cc-locate-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;

  background: var(--surface-2);
  color: var(--text-main);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;

  box-shadow: 0 6px 16px rgba(0,0,0,0.22);
  cursor: pointer;

  user-select: none;
}

.cc-locate-btn:hover {
  background: rgba(255,255,255,0.05);
}

.cc-locate-btn:active {
  transform: translateY(1px);
}

.cc-locate-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}