/* Canonical Ceangal operations header. Include after tool-specific styles. */
.ops-site-header,
.ops-site-header *,
.ops-site-header__backdrop,
.ops-site-header__drawer,
.ops-site-header__drawer * { box-sizing: border-box; }

.ops-site-header,
.ops-site-header__backdrop,
.ops-site-header__drawer,
.ops-site-header :where(button, a),
.ops-site-header__drawer :where(button, a) {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.ops-site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--ops-z-toast, 900);
  display: flex;
  width: 100%;
  height: 68px;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  padding: 10px clamp(24px, 4vw, 52px);
  border-bottom: 1px solid rgba(0, 95, 129, .12);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.ops-site-header__brand { display: flex; align-items: center; }
.ops-site-header__brand img {
  display: block;
  width: 94px;
  height: 42px;
  object-fit: contain;
  object-position: left center;
}

.ops-site-header__toggle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #fff;
  color: #005f81;
  box-shadow: none;
  cursor: pointer;
}
.ops-site-header__toggle:hover,
.ops-site-header__toggle:focus-visible { outline: 0; background: #edf7f8; box-shadow: 0 0 0 3px rgba(50, 204, 196, .14); }
.ops-site-header__menu-icon {
  display: grid;
  width: 24px;
  gap: 5px;
}
.ops-site-header__menu-icon > span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: #005f81;
}

.ops-site-header__backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--ops-z-global-backdrop, 1100);
  border: 0;
  background: rgba(0, 31, 48, .34);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.ops-site-header__drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--ops-z-global-drawer, 1110);
  display: flex;
  width: min(440px, 92vw);
  flex-direction: column;
  padding: 30px 46px;
  background: #fff;
  box-shadow: -24px 0 70px rgba(0, 31, 48, .16);
  visibility: hidden;
  transform: translateX(102%);
  transition: transform .35s cubic-bezier(.22,.72,.2,1), visibility .35s;
  color: #182126;
}
.ops-header-open { overflow: hidden; }
.ops-header-open .ops-site-header__backdrop { opacity: 1; visibility: visible; }
.ops-header-open .ops-site-header__drawer { visibility: visible; transform: none; }
.ops-site-header__drawer-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid rgba(0,95,129,.14); }
.ops-site-header__drawer-top strong { color: #00384d; font-size: 1.5rem; }
.ops-site-header__close { position: relative; width: 42px; height: 42px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; transition: background .18s ease, box-shadow .18s ease; }
.ops-site-header__close:hover,
.ops-site-header__close:focus-visible { outline: 0; background: #edf7f8; box-shadow: 0 0 0 3px rgba(50,204,196,.14); }
.ops-site-header__close::before,
.ops-site-header__close::after { position: absolute; top: 20px; left: 8px; width: 26px; height: 2px; background: #005f81; content: ""; transform: rotate(45deg); }
.ops-site-header__close::after { transform: rotate(-45deg); }
.ops-site-header__label { margin: 45px 0 14px; color: #66757b; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ops-site-header__nav { display: grid; gap: 12px; }
.ops-site-header__nav a,
.ops-site-header__tool {
  display: grid;
  grid-template-columns: auto 1fr auto;
  min-height: 64px;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid rgba(0,95,129,.14);
  border-radius: 8px;
  background: #f8fbfc;
  box-shadow: inset 3px 0 #32ccc4;
  color: #005f81;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ops-site-header__nav a[aria-current="page"] { background: #edf8f8; }
.ops-site-header__nav a:hover,
.ops-site-header__nav a:focus-visible {
  outline: 0;
  border-color: rgba(0,153,126,.38);
  background: #eaf8f7;
  box-shadow: inset 3px 0 #00997e, 0 9px 24px rgba(0,95,129,.1);
  transform: translateX(-2px);
}
.ops-site-header__nav span { color: #00997e; font-size: .66rem; font-weight: 800; }
.ops-site-header__nav b { font-size: .9rem; }
.ops-site-header__nav i { font-size: 1.2rem; font-style: normal; }
.ops-site-header__tool.is-planned { opacity: .55; box-shadow: none; }
.ops-site-header__note { margin: auto 0 0; padding-top: 22px; border-top: 1px solid rgba(0,95,129,.14); color: #66757b; font-size: .75rem; line-height: 1.5; }

@media (max-width: 700px) {
  .ops-site-header { padding: 10px 18px; }
  .ops-site-header__brand img { width: 88px; }
  .ops-site-header__drawer { padding: 24px; }
}