/* ONESEA Solutions — shared site chrome (every page): fixed/transparent-over-hero
   header, desktop dropdowns, Login link, mobile hamburger icon, and the
   page banner used by inner pages (single.php, and future page templates).
   Ported from site.css (the original export's shared subpage chrome). */

/* Fixed site header — sits above the hero/banner, transparent until scrolled. */
#root [data-nav-fixed] {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: background-color .3s ease, box-shadow .3s ease;
}
#root [data-nav-fixed] nav img { height: 56px; display: block; }
#root [data-nav-fixed].os-nav-scrolled { background: #fff; box-shadow: 0 6px 24px rgba(0,45,87,.14); }
#root [data-nav-fixed].os-nav-scrolled nav a { color: var(--onesea-navy) !important; }
#root [data-nav-fixed].os-nav-scrolled nav a svg path { stroke: var(--onesea-navy) !important; }
#root [data-nav-fixed].os-nav-scrolled nav a .os-dropdown svg path { stroke: #fff !important; }
#root [data-nav-fixed] nav a svg path { stroke: #fff !important; }

/* Dropdown */
#root [data-nav-fixed] nav a .os-dropdown {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); margin-top: 14px;
  min-width: 300px; max-width: calc(100vw - 40px);
  background: rgba(0, 28, 55, 0.72);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 0;
  box-shadow: 0 18px 40px rgba(0,20,45,.35);
  display: flex; flex-direction: column; padding: 8px 0;
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1); z-index: 60;
}
#root [data-nav-fixed] nav a .os-caret { transition: transform .25s ease; }
#root [data-nav-fixed] nav a:hover .os-caret { transform: rotate(180deg); }
#root [data-nav-fixed] nav a .os-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
#root [data-nav-fixed] nav a:hover .os-dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
#root [data-nav-fixed] nav a .os-dropdown--right { left: auto; right: 0; transform: translate(0, 8px); }
#root [data-nav-fixed] nav a:hover .os-dropdown--right { transform: translate(0, 0); }
#root [data-nav-fixed] nav a.os-login, #root [data-nav-fixed] nav a.os-navitem {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 400; font-size: 18px; color: #fff; text-decoration: none; white-space: nowrap;
}
#root [data-nav-fixed] nav a .os-dropdown-item {
  display: block; padding: 11px 22px; font-family: var(--font-sans); font-weight: 400; font-size: 15px; line-height: 1.3;
  color: rgba(255,255,255,1) !important; text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
#root [data-nav-fixed] nav a .os-dropdown-item:hover { background: rgba(255,255,255,0.08); color: #fff !important; }

/* Mobile hamburger icon (drawer itself is owned by mobile-nav.css) */
.nav-burger { display: none; }
@media (max-width: 1180px) {
  #root [data-nav-fixed] nav { padding: 0 20px !important; }
  .nav-burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; background: transparent; border: 0; cursor: pointer; color: #fff; z-index: 30; }
  #root [data-nav-fixed].os-nav-scrolled .nav-burger { color: var(--onesea-navy); }
  .nav-burger span, .nav-burger span::before, .nav-burger span::after { content: ""; display: block; position: relative; width: 24px; height: 2px; background: currentColor; transition: transform .25s ease, opacity .2s ease; }
  .nav-burger span::before { position: absolute; top: -7px; }
  .nav-burger span::after { position: absolute; top: 7px; }
  .nav-burger.is-open span { background: transparent; }
  .nav-burger.is-open span::before { transform: translateY(7px) rotate(45deg); }
  .nav-burger.is-open span::after { transform: translateY(-7px) rotate(-45deg); }
  /* desktop items row: mobile-nav.css already hides it (replaced by the drawer) */
}
@media (max-width: 860px) {
  #root [data-nav-fixed] nav img { height: 48px; }
}

/* ===== Page banner (inner pages: single.php, future page templates) ===== */
.page-banner { position: relative; height: 400px; min-height: 400px; overflow: hidden; display: flex; align-items: center; background: var(--onesea-navy); }
.page-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-banner__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,20,45,0.82) 0%, rgba(0,20,45,0.66) 45%, rgba(0,20,45,0.42) 100%); }
.page-banner__inner { position: relative; z-index: 2; padding: 150px 90px 0; max-width: 1500px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.page-banner__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; letter-spacing: 0.02em; color: rgba(255,255,255,0.82); margin-bottom: 16px; }
.page-banner__crumb a { color: rgba(255,255,255,0.82); text-decoration: none; }
.page-banner__crumb a:hover { color: #fff; }
.page-banner__crumb .sep { opacity: 0.6; }
.page-banner__crumb .cur { color: #fff; }
.page-banner__title { font-family: var(--font-sans); font-weight: 700; font-size: 54px; letter-spacing: -0.03em; line-height: 1.05; color: #fff; margin: 0; max-width: 820px; }
.page-banner__intro { font-family: var(--font-sans); font-weight: 500; font-size: 18px; line-height: 1.6; color: rgba(255,255,255,0.9); margin: 18px 0 0; max-width: 640px; }
@media (max-width: 860px) {
  .page-banner { height: 320px; min-height: 320px; }
  .page-banner__inner { padding: 120px 22px 0; }
  .page-banner__crumb { font-size: 13px; gap: 6px 8px; margin-bottom: 12px; }
  .page-banner__title { font-size: 34px; }
  .page-banner__intro { font-size: 16px; }
}

/* ===== Footer (footer.php, every page) =====
   footer.php closes </div><!-- #root --> BEFORE printing <footer>, so the
   footer is a sibling of #root, not a descendant — every selector here must
   target the bare "footer" tag, not "#root footer" (which never matches). */
footer { font-family: Inter, var(--font-sans), sans-serif; padding-left: 90px !important; padding-right: 90px !important; box-sizing: border-box; }
footer > div { max-width: 1400px; margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; }
footer, footer * { overflow-wrap: anywhere; }
footer [style*="line-height: 1.4"] { white-space: pre-line; }
footer p[style*="text-align: right"] { white-space: pre-line; }

.os-footer-links { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }
.os-footer-links li { margin: 0; padding: 0; }
.os-footer-links a {
  font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: 15px;
  color: rgba(255,255,255,0.82); text-decoration: none; display: flex; align-items: center; gap: 8px;
}
.os-footer-links a::before { content: "\203a"; color: rgba(255,255,255,0.5); font-size: 13px; }
.os-footer-links a:hover { color: #fff; }

.os-footer-brand { display: flex; align-items: center; gap: 18px; }
.os-footer-brand__mark { background: #fff; border-radius: 6px; padding: 6px; display: inline-flex; }
.os-footer-brand__name { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: 32px; letter-spacing: -0.03em; line-height: 1.05; }
@media (max-width: 860px) {
  .os-footer-brand__name { font-size: 24px; }
}
@media (max-width: 1180px) {
  footer { padding-left: 40px !important; padding-right: 40px !important; }
  footer [style*="grid-template-columns"] { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }
  footer [style*="grid-template-columns"] > * { min-width: 0; }
}
@media (max-width: 860px) {
  footer { padding-left: 22px !important; padding-right: 22px !important; padding-top: 56px !important; }
  footer > div { width: 100% !important; box-sizing: border-box; }
  footer [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  footer > div:first-child { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  footer > div:first-child > p { text-align: left !important; margin-top: 0 !important; }
  footer img { height: 64px !important; width: auto !important; }
}