/* ==========================================================================
   Marine visual system
   Loaded after the Academic Pages theme to provide the site's dark marine skin.
   ========================================================================== */

:root {
  --marine-bg-deep: #010a14;
  --marine-bg-upper: #021522;
  --marine-bg-middle: #032235;
  --marine-bg-lower: #062c43;
  --marine-surface: rgba(1, 10, 20, 0.96);
  --marine-sidebar: rgba(1, 12, 22, 0.22);
  --marine-card: rgba(3, 31, 48, 0.72);
  --marine-text: #eef7fb;
  --marine-text-soft: #e7f3f8;
  --marine-text-muted: #dbeef7;
  --marine-heading: #f4fbff;
  --marine-link: #76d8ff;
  --marine-accent: #8de1ff;
  --marine-link-hover: #b9efff;
  --marine-border: rgba(160, 230, 255, 0.18);
  --marine-border-soft: rgba(160, 230, 255, 0.10);
}

/* ==========================================================================
   Global document flow and background
   ========================================================================== */

html {
  min-height: 100%;
  background-color: var(--marine-bg-deep);
}

body {
  min-height: 100vh;
  margin: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  color: var(--marine-text);
  background-color: var(--marine-bg-deep) !important;
  background-image: linear-gradient(
    180deg,
    var(--marine-bg-deep) 0%,
    var(--marine-bg-upper) 30%,
    var(--marine-bg-middle) 62%,
    var(--marine-bg-lower) 100%
  ) !important;
  background-attachment: fixed !important;
}

.site-content {
  position: relative;
  z-index: 5;
  width: 100%;
  flex: 1 0 auto;
}

#main {
  position: relative;
  z-index: 5;
  min-height: 0;
  background: transparent !important;
}

.page,
.page__inner-wrap,
.page__content,
.archive {
  background: transparent !important;
}

/* Fixed decorative background layers. */
#marine-bg {
  position: fixed;
  inset: 0;
  z-index: 0 !important;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 18%, rgba(62, 181, 224, 0.08) 0%, transparent 24%),
    radial-gradient(circle at 78% 22%, rgba(0, 160, 210, 0.09) 0%, transparent 22%),
    radial-gradient(circle at 50% 75%, rgba(15, 120, 170, 0.12) 0%, transparent 30%),
    linear-gradient(180deg, #010a14 0%, #021522 28%, #03263a 58%, #073047 78%, #0a3e58 100%);
}

#marine-bg::before,
#marine-bg::after {
  content: "";
  position: absolute;
  left: -20%;
  width: 160%;
  height: 45%;
  border-radius: 45%;
  filter: blur(30px);
  opacity: 0.16;
  animation: swell 16s ease-in-out infinite alternate;
}

#marine-bg::before {
  bottom: 10%;
  background: radial-gradient(
    ellipse at center,
    rgba(70, 195, 235, 0.22) 0%,
    rgba(70, 195, 235, 0.08) 35%,
    transparent 70%
  );
}

#marine-bg::after {
  bottom: -2%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 135, 190, 0.22) 0%,
    rgba(0, 135, 190, 0.08) 35%,
    transparent 70%
  );
  animation-duration: 22s;
  animation-delay: 2s;
}

@keyframes swell {
  0% {
    transform: translateX(-3%) translateY(0) scaleX(1);
  }
  50% {
    transform: translateX(2%) translateY(-10px) scaleX(1.03);
  }
  100% {
    transform: translateX(5%) translateY(8px) scaleX(0.98);
  }
}

#marine-particles {
  position: fixed;
  inset: 0;
  z-index: 1 !important;
  overflow: hidden;
  pointer-events: none;
}

.marine-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.38 !important;
  filter: blur(0.3px);
  box-shadow: 0 0 8px rgba(180, 240, 255, 0.35);
  animation: floatUp linear infinite;
}

.marine-particle.small {
  background: rgba(190, 245, 255, 0.65) !important;
}

.marine-particle.medium {
  background: rgba(135, 225, 255, 0.55) !important;
}

.marine-particle.large {
  background: rgba(225, 250, 255, 0.42) !important;
}

@keyframes floatUp {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.12;
  }
  50% {
    opacity: 0.28;
  }
  100% {
    transform: translateY(-120vh) translateX(18px);
    opacity: 0;
  }
}

/* ==========================================================================
   Masthead and navigation
   ========================================================================== */

.masthead {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  margin: 0 !important;
  background: var(--marine-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--marine-border) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.masthead__inner-wrap {
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}

.masthead__inner-wrap,
.masthead__menu,
.masthead__menu-item,
.masthead .masthead__menu-item,
.greedy-nav,
.greedy-nav li,
.greedy-nav .visible-links,
.greedy-nav .visible-links li,
.greedy-nav .visible-links li a,
.greedy-nav .hidden-links,
.greedy-nav .hidden-links li,
.greedy-nav .hidden-links li a {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.greedy-nav a,
.greedy-nav .site-title,
.greedy-nav .visible-links a,
.greedy-nav .hidden-links a,
.greedy-nav .masthead__menu-item a,
.masthead__menu-item.selected a,
#theme-toggle a,
#theme-icon {
  color: var(--marine-text) !important;
  text-shadow: none !important;
}

.greedy-nav a:hover,
.greedy-nav .visible-links a:hover,
.greedy-nav .hidden-links a:hover,
#theme-toggle a:hover,
#theme-icon:hover {
  color: var(--marine-accent) !important;
}

.greedy-nav .visible-links a::before {
  background: var(--marine-accent) !important;
}

.masthead__menu-item.selected a,
.masthead__menu-item.selected a:hover {
  border-bottom-color: var(--marine-accent) !important;
}

.greedy-nav button,
.greedy-nav__toggle,
.search__toggle {
  background-color: rgba(1, 10, 20, 0.82) !important;
  color: var(--marine-text) !important;
  border: 1px solid rgba(160, 230, 255, 0.20) !important;
}

.greedy-nav button .navicon,
.greedy-nav button .navicon::before,
.greedy-nav button .navicon::after {
  background: var(--marine-text) !important;
}

/* ==========================================================================
   Sidebar and author profile
   ========================================================================== */

.sidebar {
  z-index: 2;
  background: var(--marine-sidebar) !important;
  border-right: 1px solid var(--marine-border-soft) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.author__avatar img {
  border: 2px solid rgba(225, 247, 255, 0.95) !important;
  box-shadow: 0 0 18px rgba(120, 220, 255, 0.18);
}

.author__content,
.author__content h3,
.author__urls-wrapper,
.author__urls,
.author__urls li,
.author__urls li a {
  color: #e7f7ff !important;
}

.author__name {
  color: var(--marine-heading) !important;
  font-weight: 700 !important;
}

.author__bio {
  color: var(--marine-text-muted) !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
}

.author__bio br {
  display: block;
  content: "";
  margin-bottom: 0.15rem;
}

.author__urls a:hover {
  color: var(--marine-accent) !important;
}

.author__urls i,
.author__urls svg {
  color: var(--marine-accent) !important;
}

/* ==========================================================================
   Global content components
   ========================================================================== */

.page,
.page__content {
  color: var(--marine-text) !important;
}

.page__content h1,
.page__content h2,
.page__content h3,
.page__content h4,
.page__content h5,
.page__content h6 {
  color: var(--marine-heading) !important;
}

.page__content p,
.page__content li {
  color: var(--marine-text) !important;
}

.page__content td,
.page__content th {
  color: var(--marine-text-soft) !important;
}

.page__content a {
  color: var(--marine-link) !important;
}

.page__content a:hover {
  color: var(--marine-link-hover) !important;
}

.archive {
  color: var(--marine-text) !important;
}

.archive__item-title,
.archive__item-title a,
.archive__subtitle {
  color: var(--marine-heading) !important;
}

.archive__item-excerpt,
.archive__item p {
  color: var(--marine-text-muted) !important;
}

table {
  background: rgba(2, 18, 30, 0.35) !important;
  color: var(--marine-text) !important;
  border-color: var(--marine-border) !important;
}

thead {
  background: rgba(8, 54, 78, 0.7) !important;
}

th,
td {
  border-color: var(--marine-border) !important;
}

pre,
code {
  background: rgba(1, 10, 20, 0.75) !important;
  color: #eaf8ff !important;
  border-color: var(--marine-border) !important;
}

.notice,
.notice--info,
.notice--primary,
.notice--success,
.notice--warning,
.data-card,
.info-card,
.featured-card {
  background: var(--marine-card) !important;
  color: var(--marine-text) !important;
  border-color: rgba(140, 225, 255, 0.25) !important;
}

.btn,
.page__content .btn {
  background: rgba(8, 95, 130, 0.8) !important;
  color: #ffffff !important;
  border: 1px solid rgba(160, 230, 255, 0.35) !important;
}

.btn:hover,
.page__content .btn:hover {
  background: rgba(12, 130, 170, 0.95) !important;
  color: #ffffff !important;
}

input,
textarea,
select {
  background: rgba(1, 10, 20, 0.72) !important;
  color: var(--marine-text) !important;
  border: 1px solid rgba(160, 230, 255, 0.25) !important;
}

hr {
  border-color: var(--marine-border) !important;
}

.commentary-author {
  background-color: #0f6f9a;
  color: #ffffff;
}

.commentary-body {
  background-color: rgba(237, 248, 252, 0.92);
  color: #102532;
  border-color: #0f6f9a;
}

/* ==========================================================================
   Homepage hero and marine process diagram
   ========================================================================== */

.homepage-main {
  margin-top: 0 !important;
}

#marine-hero {
  position: relative;
  z-index: 2;
}

.page--home #marine-hero {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 62vh !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  padding: 3rem 0 1.1rem !important;
  box-sizing: border-box !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.page--home .hero-title {
  width: 100%;
  max-width: 760px !important;
  margin: 0 auto 1.2rem !important;
}

.page--home .hero-title h1 {
  margin: 0 !important;
  color: #f5fbff !important;
  font-size: clamp(2rem, 3.05vw, 2.95rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45) !important;
}

.page--home .hero-bio {
  max-width: 720px !important;
  margin: 0 auto 1rem !important;
  color: var(--marine-text-muted);
}

.page--home .hero-bio p {
  color: #e4f5fb !important;
  font-size: clamp(0.98rem, 1.45vw, 1.12rem) !important;
  line-height: 1.6 !important;
}

.page--home .marine-scene {
  width: 100% !important;
  max-width: 720px !important;
  margin: 2.1rem auto 1.4rem !important;
}

.page--home .marine-system {
  position: relative;
  height: 180px !important;
}

.page--home .marine-current {
  position: absolute;
  top: 48% !important;
  right: 10% !important;
  left: 10% !important;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #63d5ff, #d0f7ff, #63d5ff, transparent);
  box-shadow: 0 0 14px rgba(99, 213, 255, 0.32);
}

.page--home .marine-node {
  position: absolute;
  width: 92px !important;
  height: 92px !important;
  border: 1.8px solid rgba(128, 224, 255, 0.76);
  border-radius: 50%;
  background: rgba(4, 20, 32, 0.24);
  box-shadow: 0 0 18px rgba(90, 212, 255, 0.12);
}

.page--home .marine-node::before {
  content: "";
  position: absolute;
  inset: 18px !important;
  border: 1px solid rgba(128, 224, 255, 0.42);
  border-radius: 50%;
}

.page--home .node-1 {
  top: 42px !important;
  left: 6% !important;
}

.page--home .node-2 {
  top: 76px !important;
  left: 31% !important;
}

.page--home .node-3 {
  top: 42px !important;
  left: 56% !important;
}

.page--home .node-4 {
  top: 76px !important;
  left: 81% !important;
}

.page--home .marine-label {
  position: absolute;
  top: 104px !important;
  left: 50%;
  width: 180px;
  transform: translateX(-50%);
  color: #f0fbff;
  font-size: 0.78rem !important;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
}

.node-1 .marine-label::after {
  content: "Observations";
}

.node-2 .marine-label::after {
  content: "Data";
}

.node-3 .marine-label::after {
  content: "Models";
}

.node-4 .marine-label::after {
  content: "Advice";
}

.scroll-arrow {
  width: 18px;
  height: 18px;
  margin-top: 0.8rem;
  border-style: solid;
  border-width: 0 2px 2px 0;
  border-color: #d8f5ff;
  transform: rotate(45deg);
  animation: pulseDown 2s infinite;
}

@keyframes pulseDown {
  0% {
    transform: translateY(0) rotate(45deg);
    opacity: 0.4;
  }
  50% {
    transform: translateY(10px) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: translateY(0) rotate(45deg);
    opacity: 0.4;
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.page__footer {
  position: relative !important;
  inset: auto !important;
  z-index: 5 !important;
  float: none !important;
  width: 100%;
  flex: 0 0 auto;
  margin-top: 3rem !important;
  color: var(--marine-text-muted) !important;
  background: rgba(1, 10, 20, 0.88) !important;
  border-top: 1px solid rgba(160, 230, 255, 0.16) !important;
}

.page__footer footer {
  position: relative;
  z-index: 2;
}

.page__footer a {
  color: var(--marine-accent) !important;
}

/* ==========================================================================
   Responsive homepage layout
   ========================================================================== */

@media (min-width: 1024px) {
  #marine-hero {
    width: 100% !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 1023px) {
  .page--home #marine-hero {
    min-height: auto !important;
    padding-top: 2rem !important;
  }

  .page--home .hero-title h1 {
    font-size: clamp(1.7rem, 6vw, 2.5rem) !important;
  }

  .page--home .marine-system {
    height: 420px !important;
  }

  .page--home .marine-current {
    display: none !important;
  }

  .page--home .marine-node {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .page--home .node-1 {
    top: 0 !important;
  }

  .page--home .node-2 {
    top: 100px !important;
  }

  .page--home .node-3 {
    top: 200px !important;
  }

  .page--home .node-4 {
    top: 300px !important;
  }
}