/* UHN Downtime Pages – Wireframe-faithful layout (v5) */
:root{
  --page-bg:#ffffff;
  --nav-bg:#e4e4e4;
  --footer-bg:#e4e4e4;
  --brand:#192958;
  --outage-bg:#c0233c;
  --link:#0055A5;
  --container-max:1200px;
  --container-pad:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--page-bg);color:#222;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;flex-direction:column;min-height:100vh}
a{color:var(--link)}

/* Masthead */
.masthead{background:#fff}
.masthead-inner{max-width:var(--container-max);margin:0 auto;padding:24px var(--container-pad);display:flex;align-items:center;gap:16px}
.masthead .logo img{height:56px;width:auto}
.masthead .spacer{flex:1}
.masthead .myuhn a{display:inline-flex;align-items:center}
.masthead .myuhn img{height:40px;width:auto}

/* Navigation bar */
.navbar{background:var(--nav-bg);color:var(--brand);border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8}
.navbar-inner{max-width:var(--container-max);margin:0 auto;padding:8px var(--container-pad);display:flex;align-items:center;gap:16px}
.navbar .home{display:inline-flex;align-items:center;color:var(--brand);text-decoration:none}
.navbar .home img{width:30px;height:30px;display:block}
.navbar ul{list-style:none;margin:0;padding:0;display:flex;gap:24px;flex-wrap:wrap}
.navbar a{color:var(--brand);text-decoration:none;font-weight:600}
.navbar a:hover{text-decoration:underline}

/* Hamburger styles */
.nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  padding: 8px;
  margin-left: auto;
}
.nav-toggle .hamburger {
  display: block;
  width: 28px;
  height: 3px;
  background: var(--brand);
  position: relative;
}
.nav-toggle .hamburger::before,
.nav-toggle .hamburger::after {
  content: '';
  display: block;
  width: 28px;
  height: 3px;
  background: var(--brand);
  position: absolute;
  left: 0;
  transition: 0.3s;
}
.nav-toggle .hamburger::before {
  top: -8px;
}
.nav-toggle .hamburger::after {
  top: 8px;
}
.nav-toggle.open .hamburger {
  background: transparent;
}
.nav-toggle.open .hamburger::before {
  top: 0;
  transform: rotate(45deg);
}
.nav-toggle.open .hamburger::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

@media (min-width: 701px) {
  .nav-toggle {
    display: none !important;
  }
  .nav-links {
    display: flex !important;
    position: static;
    flex-direction: row;
    background: none;
    box-shadow: none;
    width: auto;
  }
}

/* Mobile styles */
@media (max-width: 700px) {
  /* Masthead adjustments */
  .masthead-inner {
    gap: 8px;
    padding: 12px var(--container-pad);
  }
  .masthead .logo img {
    height: 36px;
    width: auto;
  }
  .masthead .myuhn img {
    height: 32px;
    width: auto;
  }

  /* Navigation bar adjustments */
  .navbar-inner {
    flex-wrap: nowrap;
    gap: 0;
  }
  .nav-toggle {
    display: inline-block;
  }
  .nav-links {
    display: none !important;
    position: fixed;
    top: calc(56px + 24px + 40px); /* masthead height + padding + myuhn icon height */
    left: 0;
    width: 100%;
    background: var(--nav-bg);
    flex-direction: column;
    gap: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 100;
  }
  .nav-links.open {
    display: flex !important;
    gap: 1rem;
    padding: 1rem;
  }
  .navbar .home {
    margin-right: 8px;
  }

  /* Outage message area */
  #outage-msg p {
    padding-left: revert !important;
  }

  /* Table responsiveness */
  .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table thead, .table tbody, .table th, .table td {
    white-space: nowrap;
  }

  /* Footer mobile styles */
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .footer-logo {
    display: none;
  }
  .footer-content {
    width: 100%;
    text-align: left;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .footer-content nav.links,
  .footer-content .social,
  .footer-content .copy {
    text-align: left;
    margin-left: 0;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    display: flex;
  }
  .footer-content nav.links {
    gap: 12px;
  }
  .footer-content nav.links a:first-child {
    margin-left: 0;
  }
  .footer-content .social {
    gap: 10px;
  }
  .footer-content .copy {
    display: block;
  }
}

/* Outage message aligned to container padding */
.outage{padding:16px 0}
.outage-inner{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.outage .box{background:var(--outage-bg);color:#fff;border-radius:8px;padding:14px 18px;width:100%}
#outage-msg h3, #outage-msg p {margin: 0.3rem 0 0.5rem;}
#outage-msg p {padding-left: 2.4rem;}
#outage-msg img {width: 2rem; height: 2rem; vertical-align: middle; margin: 0 0.5rem 0 -0.15rem;}

/* Main content */
main{flex:1 0 auto}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad) 16px}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;padding-top:16px}
.card{display:flex;flex-direction:column;align-items:center;gap:12px;background:transparent;border:none;box-shadow:none;padding:12px}
.card .icon{width:130px;height:130px;color:var(--brand)}
.card h3{margin:8px 0 4px 0;font-size:1.2rem;color:#222;text-align:center}
.card p.desc{margin:0 0 12px 0;color:#444;text-align:center}
.card .cta{margin-top:auto}
.btn{display:inline-block;background:var(--brand);color:#fff;text-decoration:none;border-radius:8px;padding:10px 14px;font-weight:700}
.btn:hover{opacity:.9}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid #e6e6e6;padding:10px;text-align:left;vertical-align:top}
.table th{color:#0b3d91;background:#f5f7fa}

/* Footer */
.footer{background:var(--footer-bg);color:var(--brand);border-top:1px solid #d8d8d8;margin-top:auto}
.footer-inner{max-width:var(--container-max);margin:0 auto;padding:16px var(--container-pad);display:flex;align-items:center;gap:16px}
.footer .left{flex:0 0 auto}
.footer .left img{height:40px;width:auto}
.footer .right{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.footer .links a{color:var(--brand);text-decoration:none;font-weight:600;margin-left:12px}
.footer .links a:hover{text-decoration:underline}
.footer .social{display:flex;gap:10px;align-items:center;color:var(--brand)}
.footer .social a{color:inherit;display:inline-flex}
.footer .social img, .footer .social svg{width:2.15rem;height:2.15rem}
.footer .copy{color:var(--brand);font-size:.95rem}

/* Utilities */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}