/* --------------- styles2.css  (22 May 2025) -------------------- */

/* ========== 0. TAILW COMPAT / BASELINE ========== */
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;tab-size:4}
body{margin:0}
a{color:inherit;text-decoration:inherit}
p,blockquote,dl,dd,h1,h2,h3,h4,h5,h6,figure,pre{margin:0}
ol,ul,menu{list-style:none;margin:0;padding:0}
table{text-indent:0;border-color:inherit;border-collapse:collapse}
button,input,optgroup,select,textarea{font:inherit;color:inherit;margin:0}
img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}
img,video{max-width:100%;height:auto}
[hidden]{display:none!important}
.container{width:100%}
@media (min-width:640px){.container{max-width:640px}}
@media (min-width:768px){.container{max-width:768px}}
@media (min-width:1024px){.container{max-width:1024px}}
@media (min-width:1280px){.container{max-width:1280px}}
@media (min-width:1536px){.container{max-width:1536px}}
.mx-auto{margin-left:auto;margin-right:auto}
.ml-2{margin-left:.5rem}
.ml-4{margin-left:1rem}
.mt-2{margin-top:.5rem}
.d-block{display:block}
.flex{display:flex}
.min-h-screen{min-height:100vh}
.items-center{align-items:center}
.rounded-b-lg{border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem}
.bg-gray-900{background-color:rgb(0 0 0 / .85)}
.bg-cover{background-size:cover}
.bg-fixed{background-attachment:fixed}
.p-4{padding:1rem}
.text-center{text-align:center}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-xs{font-size:.75rem;line-height:1rem}
.text-white{color:#fff}
.shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1)}
.font-roboto{font-family:Arial,sans-serif}
.img-fluid{max-width:100%;height:auto}
@media (min-width:640px){.sm\:text-sm{font-size:.875rem;line-height:1.25rem}}
@media (min-width:768px){.md\:text-base{font-size:1rem;line-height:1.5rem}.md\:text-sm{font-size:.875rem;line-height:1.25rem}}
@media (min-width:1024px){.lg\:text-lg{font-size:1.125rem;line-height:1.75rem}}
@media (min-width:1280px){.xl\:text-xl{font-size:1.25rem;line-height:1.75rem}}

/* ========== 1.  GLOBAL VARIABLES & DESKTOP GRID ========== */
:root{ --page-bg:
       radial-gradient(1040px 320px at 88% -70px, rgba(205,172,126,.16), transparent 55%),
       radial-gradient(820px 280px at -4% 100%, rgba(157,187,202,.18), transparent 50%),
       #dce3e8; --header-bg:rgba(3,10,17,.85); --sidebar-bg:rgba(90,90,90,.85);
       --main-bg:
       radial-gradient(1400px 520px at 50% -180px, rgba(255,255,255,.52), transparent 58%),
       radial-gradient(1120px 420px at 100% 10%, rgba(214,182,134,.22), transparent 52%),
       radial-gradient(1020px 420px at 0% 18%, rgba(150,181,170,.2), transparent 52%),
       linear-gradient(135deg, rgba(15,23,42,.035) 0%, rgba(255,255,255,0) 34%, rgba(15,23,42,.025) 100%),
       linear-gradient(180deg, rgba(248,249,251,.985) 0%, rgba(234,238,242,.985) 100%); --main-text:#0f172a; --main-link:#0f5dbb;
       --main-link-hover:#0b4b95; --footer-bg:rgba(3,10,17,.85); --footer-text:#fff;
       --divider-color:rgba(255,255,255,.3); --header-text:#fff;
       --theme-toggle-bg:linear-gradient(90deg, rgba(248,214,125,.34) 0 50%, rgba(182,196,210,.58) 50% 100%); --theme-toggle-border:rgba(15,47,78,.22);
       --theme-toggle-thumb:linear-gradient(180deg, #fff4cb 0%, #f3c464 100%); --theme-toggle-icon:rgba(255,255,255,.8);
       --theme-toggle-light-icon:#b56a00; --theme-toggle-dark-icon:#1f2937;
       --accent-color:rgba(0,123,255,.7);
       --content-auto-scale:1;
       --content-auto-collapse:0px;
       --content-auto-width:auto;
       font-size:16px; /* was 13px */ 
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page-bg:
    radial-gradient(1100px 340px at 82% -110px, rgba(110,154,143,.06), transparent 54%),
    radial-gradient(760px 240px at -8% 16%, rgba(182,137,88,.045), transparent 46%),
    #040608;
  --header-bg:rgba(7,10,13,.95);
  --sidebar-bg:
    radial-gradient(240px 460px at 102% 50%, rgba(255,255,255,.05), transparent 62%),
    radial-gradient(220px 220px at 18% 0%, rgba(132, 157, 151, .04), transparent 56%),
    linear-gradient(180deg, rgba(6,8,10,.985) 0%, rgba(11,13,16,.97) 100%);
  --main-bg:
    radial-gradient(1320px 440px at 50% -140px, rgba(255,255,255,.03), transparent 58%),
    radial-gradient(1020px 400px at 100% 12%, rgba(182,137,88,.13), transparent 50%),
    radial-gradient(980px 380px at 0% 18%, rgba(110,154,143,.12), transparent 52%),
    linear-gradient(135deg, rgba(255,255,255,.018) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,.13) 100%),
    linear-gradient(180deg, rgba(14,17,20,.978) 0%, rgba(11,14,17,.97) 100%);
  --main-text:#e5edf5;
  --main-link:#8ec5ff;
  --main-link-hover:#cfe7ff;
  --footer-bg:rgba(7,10,13,.96);
  --footer-text:#f8fafc;
  --theme-toggle-bg:linear-gradient(90deg, rgba(230,181,76,.24) 0 50%, rgba(144, 191, 219, .34) 50% 100%);
  --theme-toggle-border:rgba(148,163,184,.4);
  --theme-toggle-thumb:linear-gradient(180deg, #d8f1ff 0%, #8fcae8 100%);
  --theme-toggle-icon:rgba(255,255,255,.88);
  --theme-toggle-light-icon:#ffd36d;
  --theme-toggle-dark-icon:#0f172a;
}
body{
 /* background:url('../images/abstractbg.webp') center/cover fixed #021018;  */
  font-family: Arial, sans-serif;
  font-size: 1rem; /* new, predictable base */
  margin:0;min-height:100vh;
  background:var(--page-bg);
  display:grid;
  grid-template-rows:auto 1fr auto;
  grid-template-columns:clamp(130px,18vw,190px) 1fr;
  grid-template-areas:"header header"
                      "sidebar content"
                      "footer footer";
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%; /* Prevent iOS from shrinking text after rotating back to portrait */
}
/* collapse sidebar ≤ 969 px */
@media(max-width:969px){
  body{grid-template-columns:0 1fr;}
}

/* ========== 2.  HEADER / SIDEBAR / MAIN ========== */
header{
  grid-area:header;background:var(--header-bg);color:var(--header-text);
  display:flex;justify-content:space-between;align-items:center;
  padding:.42rem .75rem;border-radius:10px 10px 0 0;
  min-height:22px;
}
nav#sidebar{
  grid-area:sidebar;background:var(--sidebar-bg);color:#fff;
  padding:.5rem .25rem;display:flex;flex-direction:column;
  border-radius:10px 0 0 10px;overflow-y:auto;
}
main{
  grid-area:content;
  background:var(--main-bg);
  color:var(--main-text);
  border-radius:10px;
  padding:1rem;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:
    0 24px 48px rgba(15,23,42,.09),
    0 10px 24px rgba(15,23,42,.06),
    0 1px 0 rgba(255,255,255,.72) inset,
    0 -18px 36px rgba(15,23,42,.03) inset,
    0 0 0 1px rgba(255,255,255,.2) inset;
}
:root[data-theme="dark"] nav#sidebar{
  border:1px solid rgba(255,255,255,.09);
  border-right-color:rgba(255,255,255,.15);
  box-shadow:
    0 18px 36px rgba(0,0,0,.34),
    0 1px 0 rgba(255,255,255,.05) inset,
    1px 0 0 rgba(255,255,255,.1) inset,
    0 0 0 1px rgba(255,255,255,.025);
}
:root[data-theme="dark"] main{
  border:1px solid rgba(255,255,255,.07);
  box-shadow:
    0 26px 50px rgba(0,0,0,.28),
    0 12px 30px rgba(0,0,0,.14),
    0 1px 0 rgba(255,255,255,.04) inset,
    0 -22px 40px rgba(0,0,0,.12) inset,
    0 0 0 1px rgba(255,255,255,.025) inset;
}
main a{
  color:var(--main-link);
}
main a:hover{
  color:var(--main-link-hover);
}
:root[data-theme="dark"] main input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="dark"] main textarea,
:root[data-theme="dark"] main select{
  background:rgba(15,23,42,.92);
  color:#f8fafc;
  border:1px solid rgba(148,163,184,.28);
}
:root[data-theme="dark"] main input::placeholder,
:root[data-theme="dark"] main textarea::placeholder{
  color:rgba(226,232,240,.72);
}
footer{
  grid-area:footer;background:var(--footer-bg);color:var(--footer-text);
  text-align:center;padding:.5rem;border-radius:0 0 10px 10px;
}

/* ========== 2.1 HEADER DATE, DIVIDER & SITE TITLE STYLES ========== */
.header-meta{
  display:flex;
  align-items:center;
  gap:0;
  flex-grow:1;
  min-width:0;
}
.header-date {
  font-size: clamp(1rem, 2.2vw, 1.2rem); 
  white-space: nowrap; 
  flex-shrink: 0; 
  line-height: 1.05;
}
.header-divider {
  width: 1px;
  background-color: var(--divider-color); 
  height: 1.2em; 
  margin-left: .75rem;
  margin-right: .75rem;
  flex-shrink: 0; 
}
.site-title {
  font-size: clamp(1rem, 2.2vw, 1.2rem); 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 1; 
  min-width: 0; 
  line-height: 1.05; 
}
.theme-toggle{
  min-inline-size:auto;
  min-block-size:auto;
  padding:0;
  margin-right:.7rem;
  border:1px solid var(--theme-toggle-border);
  background:transparent;
  color:#fff;
}
.theme-toggle:hover{
  transform:none;
}
.theme-toggle__track{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  width:58px;
  height:26px;
  padding:0 9px;
  border-radius:999px;
  background:var(--theme-toggle-bg);
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 1px 3px rgba(15,23,42,.12);
  box-sizing:border-box;
}
.theme-toggle__track::after{
  content:"";
  position:absolute;
  left:50%;
  top:4px;
  bottom:4px;
  width:1px;
  background:rgba(15,23,42,.14);
  transform:translateX(-.5px);
}
.theme-toggle__thumb{
  position:absolute;
  left:4px;
  top:2px;
  width:21px;
  height:21px;
  border-radius:999px;
  background:var(--theme-toggle-thumb);
  box-shadow:
    0 2px 6px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.35) inset;
  transition:transform .2s ease, background-color .2s ease;
}
:root[data-theme="dark"] .theme-toggle__thumb{
  transform:translateX(29px);
}
.theme-toggle__icon{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  color:var(--theme-toggle-icon);
  transition:opacity .18s ease, transform .18s ease, color .18s ease;
}
.theme-toggle__icon--light{color:var(--theme-toggle-light-icon)}
.theme-toggle__icon--dark{color:var(--theme-toggle-dark-icon)}
:root:not([data-theme="dark"]) .theme-toggle__icon--light{opacity:1;transform:scale(1.2)}
:root:not([data-theme="dark"]) .theme-toggle__icon--dark{opacity:.68;transform:scale(1)}
:root[data-theme="dark"] .theme-toggle__icon--light{opacity:.72;transform:scale(.92)}
:root[data-theme="dark"] .theme-toggle__icon--dark{opacity:1;transform:scale(1.14)}
.theme-toggle__icon svg{
  width:14px;
  height:14px;
  fill:currentColor;
}
.theme-toggle__icon--dark svg{
  width:15px;
  height:15px;
}


/* ========== 3.  MOBILE DRAWER ========== */
@media (max-width: 969px) {
  #sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 65vw;
    max-width: 260px;
    transform: translateX(-100%);
    visibility: hidden;
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
    z-index: 1001;
  }
  #sidebar[data-open] {
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
    background: var(--sidebar-bg);
	-webkit-backdrop-filter: none;   /* <--- Added for Safari */
    backdrop-filter: none;
  }
  #sidebarOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
	-webkit-backdrop-filter: blur(2px);  /* <--- Added for Safari */
    backdrop-filter: blur(2px);
    z-index: 1000;
    transition: opacity .25s ease;
  }
  #sidebarOverlay[hidden] {
    opacity: 0;
    pointer-events: none;
  }
}

.sidebar-scroll-cue {
  display: none;
}
@media (max-width: 969px) {
  .sidebar-scroll-cue {
    position: fixed;
    left: 0;
    width: min(65vw, 260px);
    height: 38px;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s ease, visibility .16s ease;
    z-index: 1002;
  }

  .sidebar-scroll-cue::before {
    content: "";
    width: 38px;
    height: 20px;
    border: 1px solid rgba(114, 214, 255, .36);
    border-radius: 999px;
    background: rgba(6, 17, 26, .86);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .32);
  }

  .sidebar-scroll-cue::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-right: 2px solid #72d6ff;
    border-bottom: 2px solid #72d6ff;
  }

  .sidebar-scroll-cue--top {
    top: max(8px, env(safe-area-inset-top));
    background: linear-gradient(180deg, rgba(58, 61, 65, .96), rgba(58, 61, 65, 0));
  }

  .sidebar-scroll-cue--top::after {
    transform: translateY(3px) rotate(225deg);
  }

  .sidebar-scroll-cue--bottom {
    bottom: max(8px, env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(58, 61, 65, .96), rgba(58, 61, 65, 0));
  }

  .sidebar-scroll-cue--bottom::after {
    transform: translateY(-3px) rotate(45deg);
  }

  #sidebar[data-open][data-can-scroll-up] + .sidebar-scroll-cue--top,
  #sidebar[data-open][data-can-scroll-down] ~ .sidebar-scroll-cue--bottom {
    opacity: 1;
    visibility: visible;
  }
}

@media(min-width:970px){#sidebarOverlay{display:none!important;}}

/* ========== 4.  HAMBURGER VISIBILITY & STYLING ========== */
.hamburger{display:none;} 

.hamburger-text { 
    display: none;
    margin-right: .35em; 
}

@media(max-width:969px){
  .hamburger{
    display:inline-flex !important; 
    position: fixed;
    right: .75rem;   
    z-index: 1002;
    background-color: rgba(180, 65, 65, 0.95); 
    border-radius: .375rem; 
    color: #fff; 
    
    /* --- ADJUSTED HEIGHT CONTROLS --- */
    min-block-size: auto !important; /* Override .interactive's min-block-size */
    height: 38px !important;         /* Explicit height */
    padding-top: 0;                  /* Reset vertical padding, rely on align-items from .interactive */
    padding-bottom: 0;               /* Reset vertical padding, rely on align-items from .interactive */
    /* Horizontal padding .65rem is inherited from .interactive */
    /* align-items: center is inherited from .interactive */
    top: 0.3rem; /* Adjusted top position for vertical centering */
  }
  .hamburger-text {
      display: inline; 
  }
  .site-title { 
    margin-right: calc(75px + .75rem + .5rem); 
  }
}
@media(max-width:600px) and (orientation:portrait){
  .theme-toggle{
    margin-right:.55rem;
  }
  .theme-toggle__track{
    width:52px;
    height:24px;
    padding:0 8px;
  }
  .theme-toggle__thumb{
    top:2px;
    width:19px;
    height:19px;
  }
  :root[data-theme="dark"] .theme-toggle__thumb{
    transform:translateX(25px);
  }
}
@media(min-width:970px){
  .hamburger{display:none !important;}
  .hamburger-text {display: none !important;}
  .site-title { 
    margin-right: 0; 
  }
}
@media(max-width:420px){
  .header-date{
    font-size:.95rem;
  }
  .site-title{
    font-size:.95rem;
  }
}

/* ========== 5.  INTERACTIVE BASELINE & SKIP LINK ========== */
.skip-link{
  position:absolute;left:-999px;top:0;
  padding:.5rem 1rem;background:var(--accent-color);color:#fff;
  font-weight:600;border-radius:0 0 4px 4px;z-index:1000;text-decoration:none;
}
.skip-link:focus,.skip-link:focus-visible{left:0;}
*:focus-visible{outline:3px solid var(--accent-color);outline-offset:2px;}
.interactive{
  display:inline-flex;align-items:center;gap:.35em;
  padding:.5rem .65rem;min-inline-size:44px;min-block-size:44px;
  border-radius:.375rem;transition:transform .1s ease;
}
.interactive:active{transform:scale(.98);}
@media(max-width:360px){.interactive{min-width:40px;min-height:40px}}
@media(max-width:320px){.interactive{min-width:32px;min-height:32px}}

/* ========== 6.  DESKTOP NAV PILLS ========== */
nav ul{list-style:none;padding:0;margin:0} 
nav ul li{margin-bottom:.5rem}

nav#sidebar ul { 
  padding-top: 10px; 
}

nav ul li a.interactive{ 
  padding:.25rem .5rem;min-block-size:36px;
  display:flex;align-items:center;width:100%;
  background:rgba(50,50,50,.9);color:#fff;border-radius:5px;
  font-size:clamp(.75rem,1vw,1rem);transition:background-color .3s,color .3s;
}
:root[data-theme="dark"] nav ul li a.interactive{
  background:linear-gradient(180deg, rgba(15,18,22,.96) 0%, rgba(10,12,15,.94) 100%);
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
/* General hover for actual links */
nav ul li a.interactive:hover{
    background:var(--accent-color);
}
:root[data-theme="dark"] nav ul li a.interactive:hover{
    background:linear-gradient(180deg, rgba(20,46,66,.96) 0%, rgba(14,34,51,.96) 100%);
}

/* Styles for parent items that are just labels */
nav ul li.parent > a.interactive {
    pointer-events: none; 
    background: rgba(50,50,50,.9) !important; 
    cursor: default; 
}
:root[data-theme="dark"] nav ul li.parent > a.interactive {
    background: linear-gradient(180deg, rgba(16,19,23,.97) 0%, rgba(12,14,17,.95) 100%) !important;
}
/* Explicitly ensure hover on parent label does not change background */
nav ul li.parent > a.interactive:hover {
    background: rgba(50,50,50,.9) !important; 
}
:root[data-theme="dark"] nav ul li.parent > a.interactive:hover {
    background: linear-gradient(180deg, rgba(16,19,23,.97) 0%, rgba(12,14,17,.95) 100%) !important;
}


/* Sub-menu item specific background (slightly lighter) */
nav ul li ul li a.interactive{
    background:rgba(60,60,60,.9);
}
:root[data-theme="dark"] nav ul li ul li a.interactive{
    background:linear-gradient(180deg, rgba(18,21,25,.95) 0%, rgba(12,15,18,.94) 100%);
}
/* Hover for child items - ensure it gets the accent color */
nav ul li ul li a.interactive:hover{
    background:var(--accent-color);
}


nav ul li a.interactive svg{width:16px;height:16px;margin-right:.5rem;}

@media(max-width:480px){ 
  nav ul li a.interactive,
  nav ul li ul li a.interactive{
    padding: .3rem .5rem; 
    min-block-size: 40px; 
  }
}

/* ========== 7.  HERO / DASHBOARD CLS GUARDS ========== */
.weather-dashboard__card{min-height:114px}
.weather-dashboard__grid{grid-template-rows:repeat(4,minmax(80px,auto))}
.weather-dashboard__image{min-width:55px;min-height:55px}

/* -------- (OPTIONAL)  any site-wide extra styles below -------- */
/* .site-title rule is now in section 2.1 */