/* Presentation overrides for /en/new. Forecast colours and row metrics stay in beta.css. */
html, body {
  min-width: 0;
  background: #f1f4f8;
  color: #243449;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
body { margin: 0; padding: 16px; }
#pagewrap { max-width: 1260px; margin: 0 auto; }
header { border-radius: 12px; box-shadow: 0 2px 8px #172b4514; }
#core { width: 100%; }
a { color: #176a98; }
a:focus-visible, input:focus-visible, .table-wrap:focus-visible {
  outline: 3px solid #2589c6;
  outline-offset: 3px;
}
.forecast-toolbar {
  margin: 18px 0 24px;
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 12px;
  box-shadow: 0 3px 12px #172b4508;
}
navp {
  display: block;
  width: auto;
  background: #203b53;
  border-radius: 11px 11px 0 0;
  z-index: 20;
}
navp #logo { display: none; }
navp ul { float: none; }
navp ul::after { content: ""; display: block; clear: both; }
navp ul li { background: transparent; }
navp a {
  padding: 10px 13px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  transition: background-color .15s ease;
}
navp a:hover, navp a:focus-visible { background: #315570; color: #fff; }
navp a font[color=red] { color: #a8dcff; }
navp ul ul {
  top: 100%;
  min-width: 190px;
  max-height: 60vh;
  overflow-y: auto;
  background: #203b53;
  border: 1px solid #456078;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 8px 20px #172b4526;
}
navp ul ul li { width: auto; }
navp ul > li { position: relative; }
.forecast-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  font-size: 14px;
  text-align: left;
}
.forecast-search label { font-weight: 600; }
.forecast-search input[type=text] {
  box-sizing: border-box;
  width: 240px;
  max-width: 100%;
  height: 38px;
  padding: 8px 11px;
  color: #243449;
  background: #f8fafc;
  border: 1px solid #b9c7d6;
  border-radius: 6px;
  font: inherit;
}
.forecast-search input[type=submit] {
  height: 38px;
  padding: 0 18px;
  border: 1px solid #176a98;
  border-radius: 6px;
  background: #176a98;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.forecast-search input[type=submit]:hover { background: #12577e; }
.forecast-search .forecast-caption { color: #63758a; font-size: 13px; }
#core > h2 {
  margin: 24px 0 12px;
  color: #203b53;
  font-size: 21px;
  line-height: 1.4;
  font-weight: 600;
}
.table-scroll {
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 12px #172b4508;
}
.table-wrap {
  overscroll-behavior-x: contain;
  scrollbar-color: #8fa7bc #eef2f6;
  scrollbar-width: auto;
}
.main-table { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 20px; font-variant-numeric: tabular-nums; }
.main-table .fixed-side {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #edf2f7;
  box-shadow: 2px 0 4px #172b451f;
}
.main-table .fixed-side .hour-column { border-color: #edf2f7; }
.main-table .dt-desc2 { color: #40546a; }
.main-table .day-column { border-color: #cbd5e1; }
.main-table .dt-date { background: #edf2f7; color: #203b53; font-weight: 600; }
.desc { padding: 18px 0; color: #526479; line-height: 1.65; }
.desc:empty { display: none; }
#camMap { margin: 20px 0; border: 1px solid #dce3ec; border-radius: 12px; overflow: hidden; background: #fff; }
#camMap iframe#gmap { display: block; max-width: 100%; border: 0; }
footer { box-sizing: border-box; width: 100%; height: auto; min-height: 100px; padding: 18px; background: #203b53; border-radius: 12px; }
#copyrights { margin: 0; font-family: inherit; color: #e0e8f0; }
#copyrights h5 { margin: 0; font-size: 12px; line-height: 1.8; font-weight: 400; }
@media (min-width: 769px) {
  navp ul li:focus-within > ul { display: block; }
}
@media (max-width: 768px) {
  body { padding: 8px; }
  header { height: 72px; }
  #logoimage { margin-left: 16px; }
  .forecast-toolbar { margin-top: 12px; }
  navp .toggle { background: #203b53; text-align: left; font-size: 15px; border-radius: 8px; cursor: pointer; }
  navp .toggle:hover { background: #315570; }
  navp ul li { width: 100%; }
  navp ul ul { border: 0; box-shadow: none; border-radius: 0; }
  navp ul ul a { background: #294962; font-size: 14px; }
  .forecast-search { padding: 12px; gap: 8px; }
  .forecast-search input[type=text] { width: 180px; flex: 1; min-width: 100px; }
  .forecast-caption { flex-basis: 100%; }
  #core > h2 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  navp a { transition: none; }
}