/* =============================================================
   Mornington YC Weathercam Widgets — SHARED STYLES
   Host this file once on your server, e.g.:
     https://www.morningtonyc.com.au/weathercam/widgets/weathercam-common.css
   Every block links to it with a <link rel="stylesheet"> tag.

   HOW TO CHANGE A BLOCK'S LOOK
   -----------------------------
   Every visual property (background, borders, text colours/sizes)
   is a CSS custom property (variable), never a hard-coded value.
   There are two levels:
     1) :root defaults below — change these to restyle ALL blocks.
     2) .wcam-theme-* classes near the bottom — one per block
        "family" (wind / barometric / temperature / rose / graph).
        Change a theme's variables to restyle just that family,
        most importantly --wcam-bg / --wcam-bg-gradient
        (the background colour).
   A single block can still override any variable inline in its
   own <style> tag if you want a one-off look.
   ============================================================= */

:root {
  /* ---- typography (shared by every block) ---- */
  --wcam-font: 'Segoe UI', Arial, Helvetica, sans-serif;

  /* ---- block shell defaults ---- */
  --wcam-bg: #0b3350;                 /* BACKGROUND COLOUR — override per theme below */
  --wcam-bg-gradient: linear-gradient(160deg, #0e3f66 0%, #0b2a45 100%);
  --wcam-border-color: #1c5c8c;
  --wcam-border-width: 1px;
  --wcam-radius: 14px;
  --wcam-padding: 20px 24px;
  --wcam-shadow: 0 4px 14px rgba(0,0,0,0.28);
  --wcam-min-width: 190px;

  /* ---- common text styles (used across ALL blocks) ---- */
  --wcam-heading-color: #9fd3ff;
  --wcam-heading-size: 14px;
  --wcam-heading-weight: 700;
  --wcam-heading-tracking: 0.07em;

  --wcam-value-color: #ffffff;
  --wcam-value-size: 44px;
  --wcam-value-weight: 700;

  --wcam-unit-color: #9fd3ff;
  --wcam-unit-size: 16px;
  --wcam-unit-weight: 600;

  --wcam-label-color: #7fa8c9;
  --wcam-label-size: 12px;

  --wcam-updated-color: #4d7ea3;
  --wcam-updated-size: 10px;

  /* ---- trend accent colours (rise / fall / steady) ---- */
  --wcam-accent-rise: #4ade80;
  --wcam-accent-fall: #f87171;
  --wcam-accent-steady: #cbd5e1;

  /* ---- chart line colours (read by graph widgets via JS) ---- */
  --wcam-chart-line: #7fd7ff;
  --wcam-chart-fill: rgba(127,215,255,0.16);
  --wcam-chart-grid: rgba(255,255,255,0.08);
  --wcam-chart-text: #b9d4e8;

  /* ---- compass rose needle colours ---- */
  --wcam-needle-current: #ffcc4d;   /* current direction pointer */
  --wcam-needle-average: #66e0ff;  /* 5-minute average pointer */
}

/* ================= generic block shell (shared) ================= */
.wcam-block {
  box-sizing: border-box;
  font-family: var(--wcam-font);
  background: var(--wcam-bg-gradient), var(--wcam-bg);
  border: var(--wcam-border-width) solid var(--wcam-border-color);
  border-radius: var(--wcam-radius);
  box-shadow: var(--wcam-shadow);
  padding: var(--wcam-padding);
  min-width: var(--wcam-min-width);
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  color: var(--wcam-value-color);
}
.wcam-block *  { box-sizing: border-box; }

/* ---- common text style classes, reused by every block ---- */
.wcam-heading {
  margin: 0;
  font-size: var(--wcam-heading-size);
  font-weight: var(--wcam-heading-weight);
  letter-spacing: var(--wcam-heading-tracking);
  text-transform: uppercase;
  color: var(--wcam-heading-color);
}
.wcam-data-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wcam-value    { font-size: var(--wcam-value-size); font-weight: var(--wcam-value-weight); color: var(--wcam-value-color); line-height: 1; }
.wcam-value--sm{ font-size: calc(var(--wcam-value-size) * 0.5); }
.wcam-unit     { font-size: var(--wcam-unit-size); font-weight: var(--wcam-unit-weight); color: var(--wcam-unit-color); }
.wcam-label    { font-size: var(--wcam-label-size); color: var(--wcam-label-color); text-transform: uppercase; letter-spacing: 0.04em; }
.wcam-sub-row  { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.wcam-updated  { font-size: var(--wcam-updated-size); color: var(--wcam-updated-color); margin-top: 8px; }

.wcam-rising  { color: var(--wcam-accent-rise); }
.wcam-falling { color: var(--wcam-accent-fall); }
.wcam-steady  { color: var(--wcam-accent-steady); }

/* ================= graph blocks ================= */
.wcam-block--graph { min-width: 320px; width: 100%; max-width: 640px; }
.wcam-block--graph .wcam-chart-wrap { position: relative; height: 220px; width: 100%; margin-top: 6px; }
.wcam-block--graph canvas { width: 100% !important; height: 100% !important; }

/* ================= compass rose block ================= */
.wcam-block--rose { min-width: 270px; align-items: center; text-align: center; }
.wcam-rose-svg-wrap { width: 220px; height: 220px; margin: 6px auto 0; }
.wcam-rose-readout { display: flex; gap: 20px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.wcam-rose-readout .wcam-swatch {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}

/* =============================================================
   PER-BLOCK THEMES
   Add ONE of these classes (alongside .wcam-block) to a block's
   wrapper <div> to set its family colours — most importantly its
   background (--wcam-bg / --wcam-bg-gradient / --wcam-border-color).
   ============================================================= */

/* Wind widgets: current wind, 10m/20m averages, today's max */
.wcam-theme-wind {
  --wcam-bg: #0b3350;
  --wcam-bg-gradient: linear-gradient(160deg,#0e4a73 0%,#0a2c47 100%);
  --wcam-border-color: #1c6c9c;
  --wcam-heading-color: #9fe0ff;
  --wcam-unit-color: #9fe0ff;
  --wcam-chart-line: #7fe0ff;
  --wcam-chart-fill: rgba(127,224,255,0.18);
}

/* Barometric widgets: pressure, 1hr / 3hr rise-fall */
.wcam-theme-baro {
  --wcam-bg: #2a2140;
  --wcam-bg-gradient: linear-gradient(160deg,#3c2f5c 0%,#221b34 100%);
  --wcam-border-color: #5c4a8c;
  --wcam-heading-color: #cbb8ff;
  --wcam-unit-color: #cbb8ff;
  --wcam-chart-line: #cbb8ff;
  --wcam-chart-fill: rgba(203,184,255,0.18);
}

/* Temperature widget */
.wcam-theme-temp {
  --wcam-bg: #3a1f18;
  --wcam-bg-gradient: linear-gradient(160deg,#5c2f22 0%,#2a1712 100%);
  --wcam-border-color: #a45338;
  --wcam-heading-color: #ffb98a;
  --wcam-unit-color: #ffb98a;
  --wcam-chart-line: #ffb98a;
  --wcam-chart-fill: rgba(255,185,138,0.18);
}

/* Wind rose (compass) */
.wcam-theme-rose {
  --wcam-bg: #0d2438;
  --wcam-bg-gradient: linear-gradient(160deg,#123a58 0%,#081826 100%);
  --wcam-border-color: #1c6c9c;
  --wcam-heading-color: #9fe0ff;
}