/* =====================================================================
   Denman & Hornby Ferries theme for the NeoWX Material weewx skin
   ---------------------------------------------------------------------
   Load AFTER css/style.min.css. Pure CSS: no changes to the skin's
   markup or chart scripts are needed. Follows the device light/dark
   setting like the rest of the site, and also honours the skin's own
   forced modes (body.light-theme / body.dark-theme).
   Selectors are prefixed with :root where the skin uses !important,
   so these rules win without relying on load order alone.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Source+Sans+3:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

/* ---------- Tokens (identical to the main site) ---------- */
:root{
  --bg:#E7EEEE; --surface:#F7FAFA; --sunk:#DCE6E6; --ink:#10242C; --muted:#56696F; --line:#C5D3D3;
  --accent:#0B5F7A; --den:#0B5F7A; --hor:#A9502B;
  --stbd:#1C8A4C; --port:#C7362F; --warn:#9A6411; --warn-bg:#F6E7C8; --water:#C7D8DA;
  --display:"Barlow Condensed","Roboto Condensed","Arial Narrow",sans-serif;
  --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:10px;
  /* chart series, in the order the skin draws them (rel="1", rel="2", ...) */
  --s1:var(--accent); --s2:var(--hor); --s3:var(--stbd); --s4:var(--port);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1518; --surface:#122125; --sunk:#0E1B1E; --ink:#E1EBEB; --muted:#8EA3A7; --line:#23383E;
    --accent:#5DB9D7; --den:#5DB9D7; --hor:#E8905F;
    --stbd:#4CC27E; --port:#F2675C; --warn:#E9B562; --warn-bg:#3A2C12; --water:#10272D;
    color-scheme:dark;
  }
}
/* the skin's forced modes (set in skin.conf) */
body.dark-theme{
  --bg:#0B1518; --surface:#122125; --sunk:#0E1B1E; --ink:#E1EBEB; --muted:#8EA3A7; --line:#23383E;
  --accent:#5DB9D7; --den:#5DB9D7; --hor:#E8905F;
  --stbd:#4CC27E; --port:#F2675C; --warn:#E9B562; --warn-bg:#3A2C12; --water:#10272D;
  color-scheme:dark;
}
body.light-theme{
  --bg:#E7EEEE; --surface:#F7FAFA; --sunk:#DCE6E6; --ink:#10242C; --muted:#56696F; --line:#C5D3D3;
  --accent:#0B5F7A; --den:#0B5F7A; --hor:#A9502B;
  --stbd:#1C8A4C; --port:#C7362F; --warn:#9A6411; --warn-bg:#F6E7C8; --water:#C7D8DA;
  color-scheme:light;
}

/* ---------- Page ---------- */
:root body,
:root body.main-bg{
  background:var(--bg) !important;
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
:root body a{color:var(--accent)}
:root body a:focus-visible,
:root body button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:root body .text-muted{color:var(--muted) !important}
:root body hr,
:root body hr.rowdivider{border-top:1px solid var(--line);opacity:1}
:root body main .container-fluid,
:root body main .container{padding-left:16px;padding-right:16px}

/* ---------- Header / navbar ---------- */
:root body .navbar,
:root body .navbar.indigo{
  background:var(--surface) !important;
  color:var(--ink);
  border-bottom:1px solid var(--line);
  box-shadow:none;
  padding:14px 16px;
  font-weight:400;
}
:root body .navbar .navbar-brand{color:var(--ink);align-items:center;gap:10px;margin-right:12px}
:root body .navbar .navbar-brand img{width:2.5rem !important;height:auto}
:root body .navbar .navbar-brand strong{
  display:block;
  font:700 30px/0.95 var(--display);
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--ink);
}
:root body .navbar .navbar-brand .font-small{
  font:500 12px/1.4 var(--mono);
  color:var(--muted);
  letter-spacing:.02em;
}
/* page links as pills, like the rest of the site */
:root body .navbar .navbar-nav{gap:6px}
:root body .navbar .navbar-nav .nav-item{margin-right:0 !important}
:root body .navbar.navbar-dark .navbar-nav .nav-item .nav-link{
  color:var(--ink);
  font:600 14px/1.2 var(--body);
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 13px;
  transition:border-color .2s,color .2s,background-color .2s;
}
:root body .navbar.navbar-dark .navbar-nav .nav-item .nav-link:hover{border-color:var(--accent);color:var(--accent)}
:root body .navbar.navbar-dark .navbar-nav .nav-item.active > .nav-link{
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:var(--accent);
  color:var(--accent);
}
:root body .navbar .waves-ripple{display:none !important}
/* sunrise / sunset */
:root body .navbar .nav-flex-icons .nav-item,
:root body .navbar .text-white{
  color:var(--muted) !important;
  font:500 13px/1.6 var(--mono);
}
:root body .navbar .nav-flex-icons .wi{color:var(--warn);opacity:1 !important}
/* hamburger: drawn with a mask so it takes the theme colour */
:root body .navbar .navbar-toggler{color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 8px}
:root body .navbar.navbar-dark .navbar-toggler-icon{
  background-image:none !important;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='2.5' stroke-linecap='round' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='2.5' stroke-linecap='round' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width:991.98px){
  :root body .navbar .navbar-collapse{margin:12px 0 0 !important}
  :root body .navbar .navbar-nav{flex-direction:row;flex-wrap:wrap}
  :root body .navbar .nav-flex-icons{display:none}
  :root body .navbar .navbar-brand strong{font-size:26px}
}

/* ---------- Cards ---------- */
:root body .card,
:root body .dropdown-menu{
  background:var(--surface) !important;
  color:var(--ink) !important;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:none;
}
:root body .card .card-body{padding:14px 12px}
/* card titles: same treatment as section heads on the site */
:root body .card .indigo-text,
:root body .indigo-text{
  color:var(--ink) !important;
  font:600 19px/1.1 var(--display) !important;
  letter-spacing:.06em;
  text-transform:uppercase;
}
:root body .card .indigo-text .wi{color:var(--accent);margin-left:4px;font-size:.9em}
/* the big reading */
:root body .card .h2-responsive{
  font:700 40px/1 var(--display) !important;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  margin:6px 0 0;
}
@media (max-width:575.98px){
  :root body .card .h2-responsive{font-size:32px !important}
}
/* low / high columns, labelled */
:root body .card .font-small{
  font:500 12px/1.45 var(--mono);
  font-variant-numeric:tabular-nums;
}
:root body .card .lo-text::before,
:root body .card .hi-text::before{
  display:block;
  font:600 10px/1.2 var(--body);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:2px;
}
:root body .card .lo-text::before{content:"Low";color:var(--accent)}
:root body .card .hi-text::before{content:"High";color:var(--hor)}

/* ---------- Charts (ApexCharts) ---------- */
/* the chart library paints its own grey background in dark mode; let the card show through */
:root body .apexcharts-canvas,
:root body .apexcharts-svg,
:root body .apexcharts-canvas.apexcharts-theme-dark{background:transparent !important}
:root body .apexcharts-canvas,
:root body .apexcharts-text,
:root body .apexcharts-legend-text,
:root body .apexcharts-tooltip,
:root body .apexcharts-xaxistooltip,
:root body .apexcharts-menu{font-family:var(--body) !important}
:root body .apexcharts-text,
:root body .apexcharts-text tspan,
:root body .apexcharts-datalabel{fill:var(--muted) !important}
:root body .apexcharts-legend-text{color:var(--ink) !important}
:root body .apexcharts-gridline,
:root body .apexcharts-grid line,
:root body .apexcharts-xaxis-tick,
:root body .apexcharts-radar-series polygon,
:root body .apexcharts-radar-series line{stroke:var(--line) !important}
:root body .apexcharts-radar-series polygon{fill:transparent !important}
:root body .apexcharts-xaxis line,
:root body .apexcharts-yaxis line{stroke:var(--line) !important}
:root body .apexcharts-xcrosshairs,
:root body .apexcharts-ycrosshairs{stroke:var(--muted) !important}

/* series colours: line, flat translucent area, radar shape, markers */
:root body .apexcharts-series[rel="1"]{--c:var(--s1)}
:root body .apexcharts-series[rel="2"]{--c:var(--s2)}
:root body .apexcharts-series[rel="3"]{--c:var(--s3)}
:root body .apexcharts-series[rel="4"]{--c:var(--s4)}
:root body .apexcharts-series path{stroke:var(--c) !important}
/* only the first series is filled; the rest are drawn as lines so fills never blend */
:root body .apexcharts-area-series .apexcharts-series path[fill^="url"]{fill:var(--c) !important;fill-opacity:0 !important;stroke:none !important}
:root body .apexcharts-area-series .apexcharts-series[rel="1"] path[fill^="url"]{fill-opacity:.16 !important}
:root body .apexcharts-radar-series .apexcharts-series path{fill:var(--c) !important;fill-opacity:0 !important;stroke-width:2px}
:root body .apexcharts-radar-series .apexcharts-series[rel="1"] path{fill-opacity:.2 !important}
:root body .apexcharts-bar-series .apexcharts-series path{fill:var(--c) !important;fill-opacity:.35 !important}
:root body .apexcharts-series .apexcharts-marker{fill:var(--c) !important;stroke:var(--surface) !important}

/* legend + tooltip swatches: the chart sets these inline with !important,
   so an inset shadow is painted over them in the theme colour */
:root body .apexcharts-legend-series[rel="1"]{--c:var(--s1)}
:root body .apexcharts-legend-series[rel="2"]{--c:var(--s2)}
:root body .apexcharts-legend-series[rel="3"]{--c:var(--s3)}
:root body .apexcharts-legend-series[rel="4"]{--c:var(--s4)}
:root body .apexcharts-legend-marker{box-shadow:inset 0 0 0 8px var(--c);border-radius:3px !important;height:4px !important;width:16px !important;top:-3px !important}
:root body .apexcharts-tooltip-series-group:nth-of-type(1){--c:var(--s1)}
:root body .apexcharts-tooltip-series-group:nth-of-type(2){--c:var(--s2)}
:root body .apexcharts-tooltip-series-group:nth-of-type(3){--c:var(--s3)}
:root body .apexcharts-tooltip-series-group:nth-of-type(4){--c:var(--s4)}
:root body .apexcharts-tooltip-marker{box-shadow:inset 0 0 0 8px var(--c)}

/* tooltip, x-axis tooltip, toolbar, menu */
:root body .apexcharts-tooltip,
:root body .apexcharts-tooltip.apexcharts-theme-light,
:root body .apexcharts-tooltip.apexcharts-theme-dark{
  background:var(--surface) !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
  border-radius:8px;
  box-shadow:0 4px 14px rgb(0 0 0 / .18) !important;
}
:root body .apexcharts-tooltip-title{
  background:var(--sunk) !important;
  border-bottom:1px solid var(--line) !important;
  color:var(--muted) !important;
  font:500 12px/1.3 var(--mono) !important;
}
:root body .apexcharts-tooltip-text-y-value{font-variant-numeric:tabular-nums;font-weight:700 !important}
:root body .apexcharts-xaxistooltip{
  background:var(--surface) !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
  font:500 12px/1.3 var(--mono) !important;
}
:root body .apexcharts-xaxistooltip::before,
:root body .apexcharts-xaxistooltip::after{border-bottom-color:var(--line) !important}
:root body .apexcharts-toolbar svg{fill:var(--muted) !important}
:root body .apexcharts-toolbar .apexcharts-selected svg,
:root body .apexcharts-toolbar div:hover svg{fill:var(--accent) !important}
:root body .apexcharts-menu{
  background:var(--surface) !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
  border-radius:8px;
}
:root body .apexcharts-menu-item:hover{background:var(--sunk) !important}
:root body .apexcharts-selection-rect{fill:var(--accent) !important;fill-opacity:.12 !important}

/* ---------- Buttons (Archive page) ---------- */
:root body .btn{
  border-radius:999px;
  box-shadow:none !important;
  text-transform:none;
  font:600 14px/1.2 var(--body);
  padding:9px 14px;
  margin:4px 0;
}
:root body .btn.btn-indigo,
:root body .btn.btn-primary{
  background:var(--accent) !important;
  color:var(--surface) !important;
  border:1px solid var(--accent);
}
:root body .btn.btn-primary{
  background:transparent !important;
  color:var(--accent) !important;
}
:root body .btn:hover{filter:brightness(1.08)}
:root body .card .h3-responsive.indigo-text{font-size:26px !important}

/* ---------- Footer ---------- */
:root body footer.page-footer,
:root body footer.page-footer.indigo{
  background:var(--surface) !important;
  color:var(--ink);
  border-top:1px solid var(--line);
  margin-top:24px;
}
:root body footer.page-footer h5{
  font:600 12px/1 var(--body);
  letter-spacing:.1em;
  color:var(--muted);
  margin-bottom:10px;
}
:root body footer.page-footer table td{color:var(--ink);font-size:14px;padding:2px 10px 2px 0}
:root body footer.page-footer table td:first-child{color:var(--muted)}
:root body footer.page-footer a{color:var(--accent)}
:root body footer.page-footer .footer-copyright{
  background:var(--sunk) !important;
  color:var(--muted) !important;
  font-size:12px;
}
:root body footer.page-footer .footer-copyright a{color:var(--muted);text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  :root body *{transition:none !important;animation:none !important}
}