/* ════════════════════════════════════════════════════════════════════════
   header.css — Page header: title wordmark, UTCI dial, and search box.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 4. HEADER  (title + dial + search, three-column grid) ──────────── */

.utci-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;  /* title | dial | search */
  gap: 32px;
  align-items: center;
  padding-bottom: 32px;
  margin-bottom: 32px;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

/* The big "SUNScope" wordmark */
.utci-title {
  font-family: Fraunces, serif;
  font-weight: 900;
  font-variation-settings: "opsz" 144;
  font-size: clamp(48px, 6vw, 80px);    /* responsive — scales with viewport */
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: #1e1208;
}

.utci-title .title-sun {                /* "SUN"  —  bold + brass */
  color: #c8922a;
  font-weight: 900;
  font-style: normal;
}

.utci-title .title-scope {              /* "Scope"  —  italic light, matching about page */
  font-style: italic;
  font-weight: 300;
  color: #1e1208;
}

/* "See the sun the way..." */
.utci-tagline {
  font-family: Fraunces, serif;
  font-style: italic;
  font-size: 17px;
  color: #7a5c2a;
  margin-top: 14px;
}

/* "↳ Location, Somewhere" */
.utci-current-loc {
  font-family: Fraunces, serif;
  font-style: italic;
  font-weight: 800;
  font-size: 18px;
  margin-top: 12px;
  color: #1e1208;
}

/* The lat/lon below the location */
.utci-loc-coords {
  font-family: JetBrains Mono, monospace;
  font-style: normal;
  font-size: 11px;
  color: #b09870;
  display: block;
  margin-top: 4px;
  margin-left: 15px;
  letter-spacing: 0.08em;
}

/* The big UTCI dial in the middle of the header.
   Change width/height to resize it. */
.scope-ring {
  width: 220px;
  height: 220px;
  display: block;
}

.scope-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.scope-env-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-top: 1px solid #c9b08a;
  width: 220px;                   /* match desktop/tablet dial width */
}

.scope-env-label {
  font-family: Manrope, sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #b09870;
}

.scope-env-row .cs-wrap,
.scope-env-row .cs-btn {
  width: 100%;
}

.scope-env-row .cs-btn {
  justify-content: center;
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.30), 0 2px 8px rgba(0,0,0,0.18);
  transition: color 0.35s ease;
}

.scope-env-row .cs-btn .cs-btn-overlay {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #c8922a;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 0;
}

.scope-env-row .cs-btn.on:hover .cs-btn-overlay {
  opacity: 1;
}

/* Label stays above the overlay */
.scope-env-row .cs-btn .cs-btn-label {
  position: relative;
  z-index: 1;
}

/* Arrow pinned right, above the overlay */
.scope-env-row .cs-arrow {
  position: absolute;
  right: 12px;
  z-index: 1;
}

.scope-env-row .cs-panel,
.scope-env-row .cs-option {
  text-align: center;
}

/* Per-environment gradient themes — !important keeps the gradient fixed
   under the brass hover overlay (ui.css :hover rules load later). */
.scope-env-row[data-env="open"]      .cs-btn.on { background: linear-gradient(135deg, #5a8a28 0%, #b8d860 100%) !important; border-color: #4a7818 !important; color: #fff; }
.scope-env-row[data-env="forest"]    .cs-btn.on { background: linear-gradient(135deg, #1b5e3b 0%, #57bf8a 100%) !important; border-color: #1b5e3b !important; color: #fff; }
.scope-env-row[data-env="alpine"]    .cs-btn.on { background: linear-gradient(135deg, #a8cfe8 0%, #dff0fa 100%) !important; border-color: #6aaedd !important; color: #1a3a58; }
.scope-env-row[data-env="beach"]     .cs-btn.on { background: linear-gradient(135deg, #2a8fc8 0%, #e8d87a 100%) !important; border-color: #1e78b0 !important; color: #fff; }
.scope-env-row[data-env="river"]     .cs-btn.on { background: linear-gradient(135deg, #2e6e5e 0%, #78c4a8 100%) !important; border-color: #2e6e5e !important; color: #fff; }
.scope-env-row[data-env="desert"]    .cs-btn.on { background: linear-gradient(135deg, #b86820 0%, #e8c458 100%) !important; border-color: #a05818 !important; color: #fff; }
.scope-env-row[data-env="openwater"] .cs-btn.on { background: linear-gradient(135deg, #0c4878 0%, #2898d8 100%) !important; border-color: #0c4878 !important; color: #fff; }
.scope-env-row[data-env="urban"]     .cs-btn.on { background: linear-gradient(135deg, #4a5568 0%, #a89880 100%) !important; border-color: #3a4455 !important; color: #fff; }

/* On hover the brass overlay covers the interior — force white text for contrast */
.scope-env-row .cs-btn.on:hover { color: #fff; }

/* The search box on the right of the header */
.utci-search-wrap {
  position: relative;
  width: 300px;
}

.utci-search-label {
  font-family: Manrope, sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #b09870;
  display: block;
  margin-bottom: 7px;
}

.utci-search {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #c9b08a;
  background: #fffcf2;
  font-family: Manrope, sans-serif;
  font-size: 14px;
  color: #1e1208;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.utci-search::placeholder {
  color: #c0a880;
}

.utci-search:focus {
  border-color: #c8922a;
  box-shadow: 0 0 0 3px #c8922a24;      /* brass glow when focused */
}

/* The dropdown list of city results */
.utci-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fffcf2;
  border: 1.5px solid #c9b08a;
  border-top: none;
  max-height: 260px;
  overflow-y: auto;
  z-index: 50;
  box-shadow: 0 8px 24px #6446141f;
}

.utci-result {
  padding: 11px 16px;
  cursor: pointer;
  border-bottom: 1px solid #ede4cc;
  font-size: 14px;
  transition: background 0.12s;
  border-left: 3px solid transparent;
}

.utci-result:hover {
  background: #fef3dc;
  border-left-color: #c8922a;           /* brass marker on hover */
}

/* The "GB · 51.48°, -1.07°" line under each city */
.utci-result-meta {
  font-size: 11px;
  color: #b09870;
  font-family: JetBrains Mono, monospace;
  margin-top: 3px;
  letter-spacing: 0.06em;
}

.utci-searching {
  margin-top: 7px;
  font-size: 10px;
  color: #b09870;
  font-family: Manrope, sans-serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Mobile header layout ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .utci-header {
    grid-template-columns: 1fr;   /* single column — stack title, dial, search */
    gap: 20px;
    padding-bottom: 24px;
    margin-bottom: 24px;
  }

  .header-right {
    align-items: flex-start;      /* left-align location on mobile */
  }

  .utci-title {
    font-size: clamp(40px, 12vw, 60px);
  }

  .scope-ring {
    width: 160px;
    height: 160px;
    margin: 0 auto;               /* centre the dial */
  }

  .scope-env-row {
    width: 160px;                 /* match dial width on mobile */
  }

  .utci-current-loc {
    margin-top: 4px;              /* tighten gap above location on mobile */
  }

  .utci-search-wrap {
    width: 100%;                  /* full-width search box */
  }
}