/* Sarfend Weather / PressBook styling – v2.0
   REPLACE the previous sarfend-weather-modern.css contents with this file.
   Load AFTER weather-screen-red-narrow.css.
   Preserves Saratoga's 620px dashboard and flyout-menu behaviour. */
:root { --sw-red:#b51e49; --sw-dark:#8f1738; --sw-border:#e4d8dc; }
html { font-size: 16px; }
body { margin:0; background:#f5f5f7; color:#292929; font:13px/1.5 Arial,Helvetica,sans-serif; }
#page { width:850px; max-width:calc(100% - 24px); margin:16px auto; padding:0; background:#fff; border:1px solid #dedee2; border-radius:7px; box-shadow:0 3px 14px #00000012; /* no overflow:hidden: it clips flyout menus */ }
#header { position:relative; min-height:88px; background:var(--sw-red); color:white; }
#header::after { content:""; display:block; clear:both; }
#header .headerTitle { box-sizing:border-box; margin:0; padding:17px 135px 14px 18px; font:bold 23px/1.25 Arial,Helvetica,sans-serif; color:#fff; }
#header .headerTitle a,#header .headerTitle span { color:#fff; }
#header .headerTemp { position:absolute; right:18px; top:13px; float:none; margin:0; padding:0; color:#fff; font-size:32px; line-height:1.2; }
#header .subHeader { float:left; clear:both; box-sizing:border-box; width:38%; min-height:50px; margin:0; padding:10px 15px; background:#f8edf1; color:#4b2634; font-size:12px; }
#header .subHeaderRight { float:right; box-sizing:border-box; width:62%; min-height:50px; margin:0; padding:9px 15px; background:#f8edf1; color:#4b2634; font-size:12px; text-align:right; }
#header .subHeader a,#header .subHeaderRight a { color:var(--sw-dark); }
/* Keep the classic float layout: the Saratoga dashboard is a fixed 620px wide. */
.leftSideBar { float:left; clear:left; box-sizing:border-box; width:172px; padding:12px 10px 16px; background:#fff; }
.leftSideBar .sideBarTitle { margin:0 0 8px; padding:7px 9px; background:var(--sw-red); color:white; font-weight:bold; border-radius:3px; }
.leftSideBar a,.leftSideBar a:visited { color:var(--sw-dark); }
.leftSideBar a:hover { color:white; background:var(--sw-red); }
/* The flyout menu's inline rules must be overridden without breaking nested lists. */
.leftSideBar .flyoutmenu { position:relative; z-index:20; }
.leftSideBar .flyoutmenu > ul { width:150px; padding:0; margin:0; }
.leftSideBar .flyoutmenu li { float:none; width:150px; margin:0; background:#fff; }
.leftSideBar .flyoutmenu a,.leftSideBar .flyoutmenu a:visited { box-sizing:border-box; width:150px; min-height:27px; padding:4px 7px; line-height:1.4; font-size:12px; color:var(--sw-dark); background:#fff; border:1px solid var(--sw-border); border-top:0; text-decoration:none; }
.leftSideBar .flyoutmenu > ul > li:first-child > a { border-top:1px solid var(--sw-border); }
.leftSideBar .flyoutmenu li:hover > a,.leftSideBar .flyoutmenu a:focus { color:white; background:var(--sw-red); }
.leftSideBar .flyoutmenu li ul { position:absolute; left:142px; top:0; width:156px; padding:5px; background:#fff; border:1px solid var(--sw-border); box-shadow:0 5px 15px #0002; }
.leftSideBar .flyoutmenu li ul li,.leftSideBar .flyoutmenu li ul a { width:156px; }
.leftSideBar img { max-width:100%; height:auto; }
#main-copy,#main-copy-dark { box-sizing:border-box; width:calc(100% - 172px); margin:0 0 0 172px; padding:12px 12px 18px; border-left:1px solid #eee; background:#fff; text-align:left; min-height:0; }
#main-copy .column-dark,#main-copy .column-light { background:#fafafd; }
#main-copy h1 { color:var(--sw-dark); font-size:21px; border-top:1px solid #eee; }
#main-copy a { color:var(--sw-dark); }
.table-top,.ajaxDashboard .datahead,.ajaxDashboard .datahead2,.ajaxSidebar h2 { color:white; background:var(--sw-red); }
.ajaxDashboard { font-family:Arial,Helvetica,sans-serif; font-size:12px; }
.ajaxDashboard .data1,.ajaxDashboard .data2 { background:#fff; }
#footer { clear:both; margin:0; padding:16px 18px; color:white; background:var(--sw-red); font-size:12px; text-align:left; }
#footer a,#footer a:visited { color:white; }
/* Existing footer information box had a peach fill and white text. */
#footer table { max-width:100%; }
#footer td[bgcolor],#footer table[bgcolor] { background:#fff4f6 !important; color:#3c2630 !important; }
#footer td[bgcolor] a,#footer table[bgcolor] a { color:var(--sw-dark) !important; }
#footer td[bgcolor] font,#footer table[bgcolor] font { color:#3c2630 !important; }
/* Warning colours retain their meaning. */
.watchBox,.advisoryBox,.warningBox,.tornadowarningBox { padding:8px; border-radius:3px; }
/* Keep dashboard graphics at natural size. Narrow screens scroll the data area. */
@media (max-width:880px) {
  #page { width:calc(100% - 16px); margin:8px auto; }
  #main-copy,#main-copy-dark { overflow-x:auto; }
}
@media (max-width:740px) {
  #header .headerTitle { font-size:19px; padding-right:110px; }
  #header .headerTemp { font-size:25px; right:12px; }
  .leftSideBar { float:none; clear:both; width:auto; padding:10px 12px; }
  .leftSideBar .flyoutmenu > ul { display:flex; flex-wrap:wrap; gap:4px; width:auto; }
  .leftSideBar .flyoutmenu > ul > li { width:150px; }
  .leftSideBar .flyoutmenu li ul { left:0; top:100%; }
  #main-copy,#main-copy-dark { width:100%; margin:0; border-left:0; border-top:1px solid #eee; }
}
@media (max-width:480px) {
  #header .headerTitle { padding:13px 10px 4px; font-size:18px; }
  #header .headerTemp { position:static; padding:0 10px 9px; font-size:27px; }
  #header .subHeader,#header .subHeaderRight { float:none; width:100%; min-height:0; text-align:left; }
  #footer { padding:12px; }
}


/* v2.4 – full-width PressBook-style header/footer.
   In v2.3 the header and footer moved OUTSIDE #page, so #page #header
   selectors could not match them. This version targets the actual markup. */
html, body { margin:0; }
body { background:#f0f0f2; }

/* Full browser-width header, with centred branding/nav contents */
header#header.sarfend-weather-header {
  display:block; width:100%; min-height:0; margin:0; padding:0;
  box-sizing:border-box; background:#fff; color:#222;
  border:0; border-radius:0; box-shadow:none;
}
header#header.sarfend-weather-header::after { content:none; }
header#header .sw-branding {
  max-width:1100px; margin:0 auto; padding:16px 18px;
  box-sizing:border-box; background:#fff;
}
header#header .sw-brand {
  display:inline-flex; align-items:center; gap:12px;
  color:#d00000; text-decoration:none; background:transparent;
}
header#header .sw-brand img { display:block; width:65px; height:56px; object-fit:contain; }
header#header .sw-brand strong { display:block; font:bold 25px/1.2 Arial,Helvetica,sans-serif; color:#d00000; }
header#header .sw-brand small { display:block; margin-top:3px; font:12px/1.3 Arial,Helvetica,sans-serif; color:#9b0000; }

header#header nav.sw-topnav { display:block; width:100%; background:#b51e49; padding:0; }
header#header .sw-topnav-inner {
  max-width:1100px; margin:0 auto; padding:0 8px;
  box-sizing:border-box; display:flex; align-items:center; flex-wrap:wrap;
}
header#header .sw-topnav a,
header#header .sw-topnav a:visited {
  display:block; padding:13px 11px; background:transparent;
  color:#fff; font:bold 13px/1.3 Arial,Helvetica,sans-serif;
  text-decoration:none; white-space:nowrap;
}
header#header .sw-topnav a:hover,
header#header .sw-topnav a:focus { background:#921538; color:#fff; }

/* Weather title strip is separate from the top navigation */
header#header .sw-weather-heading {
  box-sizing:border-box; width:100%; margin:0; min-height:62px;
  padding:12px max(18px,calc((100% - 1064px)/2));
  display:flex; align-items:center; justify-content:space-between; gap:15px;
  background:#b51e49; color:#fff;
}
header#header .sw-weather-heading h1.headerTitle {
  position:static; float:none; flex:1; margin:0; padding:0;
  background:transparent; color:#fff;
  font:bold 21px/1.3 Arial,Helvetica,sans-serif;
}
header#header .sw-weather-heading .headerTemp {
  position:static; float:none; top:auto; right:auto;
  margin:0; padding:0; background:transparent; color:#fff;
  font:bold 29px/1.2 Arial,Helvetica,sans-serif; white-space:nowrap;
}
header#header .sw-weather-meta {
  box-sizing:border-box; width:100%; margin:0;
  padding:9px max(18px,calc((100% - 1064px)/2));
  display:flex; justify-content:space-between; align-items:flex-start; gap:15px;
  min-height:48px; background:#fff; border-bottom:3px solid #b51e49;
}
header#header .sw-weather-meta .subHeader,
header#header .sw-weather-meta .subHeaderRight {
  position:static; float:none; clear:none; width:auto; min-height:0;
  margin:0; padding:0; border:0; background:transparent;
  color:#333; font:12px/1.5 Arial,Helvetica,sans-serif;
}
header#header .sw-weather-meta .subHeaderRight { flex:1; text-align:right; }

/* Keep Saratoga's existing dashboard width and layout untouched. */
#page { width:850px; max-width:calc(100% - 24px); margin:16px auto 24px; }

/* Full browser-width footer, which also sits outside #page */
footer#footer.sarfend-weather-footer {
  display:block; box-sizing:border-box; width:100%; clear:both;
  margin:0; padding:0; background:#b51e49; color:#fff;
  font:12px/1.6 Arial,Helvetica,sans-serif; text-align:center;
}
footer#footer .sw-footer-note {
  box-sizing:border-box; max-width:1100px; margin:0 auto;
  padding:13px 18px; background:#fff4f6; color:#333; text-align:left;
}
footer#footer .sw-footer-note a,
footer#footer .sw-footer-note a:visited { color:#a01743; text-decoration:underline; }
footer#footer .sw-footer-equipment { display:block; }
footer#footer .sw-footer-links {
  max-width:1100px; margin:0 auto; padding:14px 12px;
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:5px 9px;
}
footer#footer .sw-footer-links a,
footer#footer .sw-footer-links a:visited { color:#fff; text-decoration:none; }
footer#footer .sw-footer-links a:hover { text-decoration:underline; }
footer#footer .sw-footer-links a:not(:last-of-type)::after { content:' |'; margin-left:9px; }

@media(max-width:740px) {
  header#header .sw-topnav a { padding:10px 9px; }
  header#header .sw-weather-heading { padding:12px 16px; }
  header#header .sw-weather-meta { padding:9px 16px; }
}
@media(max-width:480px) {
  header#header .sw-brand strong { font-size:21px; }
  header#header .sw-weather-heading { flex-wrap:wrap; }
  header#header .sw-weather-heading h1.headerTitle { flex-basis:100%; font-size:18px; }
  header#header .sw-weather-heading .headerTemp { font-size:25px; }
  header#header .sw-weather-meta { flex-wrap:wrap; }
  header#header .sw-weather-meta .subHeaderRight { flex-basis:100%; text-align:left; }
}

/* v2.5: Full-width footer disclaimer, aligned with PressBook content. */
footer#footer.sarfend-weather-footer {
  width:100%; max-width:none; margin:0; padding:0;
  background:#b51e49; border:0; box-shadow:none;
}
footer#footer.sarfend-weather-footer .sw-footer-note {
  display:block; width:100%; max-width:none; margin:0; padding:0;
  background:#f8f5f6; border-top:1px solid #e4d8dc;
  color:#292929; text-align:left;
}
footer#footer.sarfend-weather-footer .sw-footer-note-inner {
  box-sizing:border-box; max-width:1100px; margin:0 auto; padding:13px 18px;
}
footer#footer.sarfend-weather-footer .sw-footer-links {
  box-sizing:border-box; max-width:1100px; margin:0 auto; padding:12px 18px;
  justify-content:center; gap:5px 9px; color:#fff;
}
footer#footer.sarfend-weather-footer .sw-footer-links span { color:#fff; }
@media(max-width:740px) {
  footer#footer.sarfend-weather-footer .sw-footer-note-inner { padding:12px 16px; }
  footer#footer.sarfend-weather-footer .sw-footer-links { padding:12px 16px; }
}