sunscope/assets/css/header.css

/* ════════════════════════════════════════════════════════════════════════
   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;
  border-bottom: 2px solid #c9b08a;
  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;
}

/* 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 */
  }

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

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