/* ONESEA Solutions — shared inner-page layout (every page except Home,
   which has its own tighter home.css). Ported from site.css's "Mobile
   hardening" + timeline rules — the parts of the original export's shared
   subpage chrome that aren't nav/banner (those are in chrome.css). */

#root [id] { scroll-margin-top: 120px; }

/* ===== Photo gallery tiles (CGallery — Fleet, Onshore/Onboard Life, and
   future pages all reuse this) ===== */
.fleet-tile__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,20,45,0.5)); opacity: 0; transition: opacity .35s ease; }
.fleet-tile:hover .fleet-tile__scrim { opacity: 1; }

/* ===== Map location dots (Fleet's Global Coverage map) ===== */
.os-map-legend { display: none; }
.os-map-hq:not(.os-map-hq--branch) .os-map-hq__label { transform: translateX(-20%); }
.os-map-hq:not(.os-map-hq--branch) .os-map-hq__label::after { left: 20%; }
.os-map-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--onesea-pink); box-shadow: 0 0 0 3px rgba(239,0,138,0.22); }
.os-map-hq { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--onesea-pink); box-shadow: 0 0 0 5px rgba(239,0,138,0.3); }
.os-map-hq::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--onesea-pink); animation: os-map-pulse 2.4s ease-out infinite; }
@keyframes os-map-pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.6); opacity: 0; } }
.os-map-hq__label { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; color: #fff; background: var(--onesea-pink); padding: 5px 11px; border-radius: 100px; }
.os-map-hq__label::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--onesea-pink); }
@media (prefers-reduced-motion: reduce) { .os-map-hq::after { animation: none; } }

@media (max-width: 860px) {
  html, body { overflow-x: hidden; max-width: 100%; }
  #root section { padding-left: 22px !important; padding-right: 22px !important; padding-top: 64px !important; padding-bottom: 64px !important; }
  #root [style*="grid-template-columns"]:not(.os-tl-row):not(.os-step-row) { grid-template-columns: 1fr !important; }
  #root img, #root video, #root svg { max-width: 100%; }
  #root [style*="position: sticky"] { position: static !important; }
  #root h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.1 !important; }
  #root h2 { font-size: clamp(26px, 7.2vw, 34px) !important; line-height: 1.14 !important; }
  #root h3 { font-size: clamp(19px, 5vw, 24px) !important; }
  #root button, #root a[href] { min-height: 44px; }
  #root input:not([type="checkbox"]):not([type="radio"]), #root select, #root textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box; font-size: 16px !important; }

  /* Map: pills are fixed-width + nowrap while the map is fluid, so they collide
     below ~860px. Drop them to bare pulsing dots and move naming into a legend. */
  #root .os-map-hq__label { display: none !important; }
  #root .os-map-legend {
    display: flex; flex-direction: column; gap: 10px;
    align-items: flex-start; margin: 24px auto 0; max-width: 420px;
  }
  #root .os-map-legend__item {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 1.4;
    color: #fff; text-align: left;
  }
  #root .os-map-legend__dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    background: var(--onesea-pink); box-shadow: 0 0 0 3px rgba(239,0,138,0.28);
  }

  /* Milestones timeline: keep the marker column so text never crosses the spine. */
  #root .os-timeline .os-tl-row[style] {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 0 18px !important;
    padding: 10px 0 !important;
    align-items: start !important;
  }
  #root .os-timeline .os-tl-row[style] > .os-tl-dot { grid-column: 1; grid-row: 1; }
  #root .os-timeline .os-tl-row[style] > .os-tl-year { grid-column: 2; grid-row: 1; padding-top: 4px !important; font-size: clamp(22px, 6.4vw, 28px) !important; }
  #root .os-timeline .os-tl-row[style] > .os-tl-body { grid-column: 2; grid-row: 2; padding-top: 6px !important; }
  #root .os-timeline__spine { left: 19px !important; }

  /* Numbered step timelines (Technical/Safety "workflow") keep their marker column. */
  #root .os-steps .os-step-row[style] { grid-template-columns: 48px minmax(0, 1fr) !important; gap: 0 18px !important; }
  #root .os-steps__spine { left: 23px !important; }

  /* Horizontal 4-up step rows (Site Management workflow) stack with real spacing;
     the connector line is desktop-only. */
  #root .os-hsteps { row-gap: 34px !important; }
  #root .os-hstep { padding-left: 0 !important; padding-right: 0 !important; }
  #root .os-hstep__head { margin-bottom: 14px !important; }
  #root .os-hstep__line { display: none !important; }
  #root .os-hstep__desc { max-width: none !important; }
}
@media (max-width: 420px) {
  #root section { padding-left: 18px !important; padding-right: 18px !important; }
}
@media (max-width: 400px) {
  #root .os-timeline .os-tl-row[style] { grid-template-columns: 34px minmax(0, 1fr) !important; gap: 0 14px !important; }
  #root .os-timeline .os-tl-row[style] > .os-tl-dot { width: 34px !important; height: 34px !important; }
  #root .os-timeline__spine { left: 16px !important; }
  #root .os-steps .os-step-row[style] { grid-template-columns: 40px minmax(0, 1fr) !important; gap: 0 14px !important; }
  #root .os-steps .os-step-num { width: 40px !important; height: 40px !important; }
  #root .os-steps__spine { left: 19px !important; }
}

/* Footer styling lives in chrome.css (sitewide, footer.php is shared). */