/*
  MacroDivers stylesheet map
  ==========================

  This file controls the complete visual presentation of the public site.
  The HTML files contain page content and semantic section classes; this CSS
  turns those classes into the MacroDivers look and responsive layout.

  Editing guide for programmers:
  - `:root` holds colour variables used throughout the site.
  - Global typography, links, buttons and layout wrappers follow the variables.
  - `.topbar`, `.nav`, `.nav-dropdown` and `.dropdown-menu` style the shared menu.
  - `.hero`, `.content-section`, `.wrap`, `.split`, `.grid`, `.card` are reusable layout blocks.
  - `.destination-*` classes standardise the destination page templates.
  - `.gallery-lightbox` styles the JavaScript-powered enlarged image viewer.
  - Media queries near the end adjust the site for tablets and phones.

  Keep public-facing visual changes deliberate: small edits to shared classes can
  affect many pages at once. Page-specific overrides should stay below the shared
  rules so they are easy to find and remove later.
*/

/*
  MacroDivers main stylesheet
  ----------------------------
  Editing guide:
  - Colour variables live in :root at the top of this file.
  - Shared layout/navigation styles are near the top.
  - Destination galleries and the lightbox are grouped near the lower half.
  - Page-specific overrides are kept below the shared styles so they can safely
    adjust individual pages without changing the whole site.
*/

/* Core colour palette. Change these variables to reskin the site quickly. */
:root {
  --navy: #061a31;
  --navy2: #092846;
  --teal: #34c6d3;
  --coral: #ff7f6a;
  --white: #fff;
  --soft: #d8e6ec;
  --muted: #93aab5;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--navy);
  color: var(--soft);
  font-family:
    Inter,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  line-height: 1.6;
}
.serif,
h1,
h2,
h3,
.brand {
  font-family: Georgia, "Times New Roman", serif;
}
a {
  color: inherit;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* Fixed header and primary navigation. The HTML lives in partials/header.html. */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 5vw;
  background: linear-gradient(
    180deg,
    rgba(6, 26, 49, 0.9),
    rgba(6, 26, 49, 0.35),
    transparent
  );
  backdrop-filter: blur(6px);
}
.brand {
  font-size: 1.5rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.03em;
}
.nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav a {
  text-decoration: none;
  color: #d9f4f7;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.menu-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: 999px;
  padding: 8px 12px;
}
/* Home page hero. */
.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  background:
    linear-gradient(
      90deg,
      rgba(6, 26, 49, 0.95),
      rgba(6, 26, 49, 0.55),
      rgba(6, 26, 49, 0.85)
    ),
    url("assets/images/glossodoris-atromarginata.webp") center/cover no-repeat;
  padding: 120px 6vw 80px;
}
.hero-inner {
  max-width: 980px;
  text-align: center;
}
.logo {
  width: min(460px, 82vw);
  height: auto;
  margin: 0 auto 18px;
  filter: drop-shadow(0 10px 35px rgba(0, 0, 0, 0.55));
}
.mission {
  font-size: clamp(18px, 2.4vw, 28px);
  color: #fff;
  max-width: 900px;
  margin: 22px auto;
}
.mission strong {
  color: var(--coral);
  font-weight: 500;
}
.intro {
  max-width: 720px;
  margin: 0 auto;
  color: #d7eaf0;
}
.button-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
}
.btn {
  border: 1px solid rgba(52, 198, 211, 0.7);
  color: #fff;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(52, 198, 211, 0.12);
}
.btn.alt {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.07);
}
section {
  padding: 90px 6vw;
}
.wrap {
  max-width: 1180px;
  margin: auto;
}
.eyebrow {
  color: var(--teal);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 13px;
}
h1 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  color: #fff;
}
h2 {
  font-size: clamp(28px, 4vw, 36px);
  color: #fff;
  line-height: 1.1;
  margin: 10px 0 22px;
}
p.lead {
  font-size: clamp(17px, 2vw, 20px);
  max-width: 820px;
}
/* Reusable card grids. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  overflow: hidden;
}

/* Prevent distortion on standalone images and logos. Gallery cards still crop neatly using object-fit: cover. */
.gear-photo img,
.split img,
.camera-layout img,
.panel img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.card img {
  width: 100%;
  height: 310px;
  object-fit: cover;
}
.card-body {
  padding: 20px;
}
.card h3 {
  color: #fff;
  margin: 0 0 4px;
  font-size: clamp(20px, 2.2vw, 24px);
}
.tag {
  display: inline-block;
  margin-top: 8px;
  color: var(--teal);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.panel {
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.025)
  );
}
.destinations {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
.dest {
  min-height: 170px;
  border-radius: 20px;
  background: linear-gradient(
    160deg,
    rgba(52, 198, 211, 0.12),
    rgba(255, 127, 106, 0.06)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.dest small {
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
.dest b {
  font-family: Georgia, serif;
  color: white;
  font-size: clamp(20px, 2.2vw, 24px);
}
.coming {
  border-color: rgba(255, 127, 106, 0.45);
}
/* Footer and footer link styling. The HTML lives in partials/footer.html. */
.footer {
  padding: 50px 6vw;
  background: #031222;
  color: #9fb5be;
}
.footer .wrap {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.copyright {
  font-size: 14px;
  color: #79929e;
}
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox.open {
  display: flex;
}
.lightbox img {
  max-height: 82vh;
  max-width: 92vw;
  border-radius: 12px;
}
.lightbox button {
  position: absolute;
  top: 20px;
  right: 20px;
  border: 0;
  background: #fff;
  color: #000;
  border-radius: 999px;
  padding: 10px 14px;
}
.note {
  color: #9fb5be;
  font-size: 15px;
}
.gallery-img {
  cursor: zoom-in;
}
@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
  .split {
    grid-template-columns: 1fr;
  }
  .destinations {
    grid-template-columns: 1fr 1fr;
  }
  .nav {
    display: none;
    position: absolute;
    top: 64px;
    right: 5vw;
    background: rgba(6, 26, 49, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 18px;
    padding: 18px;
    flex-direction: column;
  }
  .nav.open {
    display: flex;
  }
  .menu-toggle {
    display: block;
  }
  .card img {
    height: 260px;
  }
  section {
    padding: 70px 5vw;
  }
}
@media (max-width: 580px) {
  .hero {
    padding: 100px 22px 60px;
  }
  .logo {
    width: min(330px, 86vw);
  }
  .grid,
  .destinations {
    grid-template-columns: 1fr;
  }
  .topbar {
    padding: 14px 18px;
  }
  .brand {
    font-size: 1.5rem;
  }
  .mission {
    font-size: 19px;
  }
  .intro {
    font-size: 15px;
  }
  .button-row {
    flex-direction: column;
  }
  .btn {
    width: 100%;
    text-align: center;
  }
  .card img {
    height: 250px;
  }
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 30px;
  }
}

.camera-section {
  background: #0d2238;
}

.camera-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  overflow: hidden;
}

.camera-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.camera-content {
  padding: 2rem;
}

.camera-content h3 {
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .camera-card {
    grid-template-columns: 1fr;
  }
}

/* Typography consistency update */
main section p:not(.eyebrow):not(.mission):not(.intro),
.panel p,
.card p,
.dest p,
.note,
main section li {
  font-size: 1.05rem;
  line-height: 1.75;
}

main section p:not(.eyebrow):not(.mission):not(.intro),
.panel p,
.card p {
  margin-top: 0;
  margin-bottom: 1rem;
}

main section p.lead,
p.lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #d8e6ec;
  max-width: 860px;
  margin-top: 0;
  margin-bottom: 1.1rem;
}

main section h2 + p,
main section h3 + p {
  margin-top: 0;
}

.panel h3 {
  margin-top: 0;
}

.card-body p {
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 0.4rem;
}

@media (max-width: 700px) {
  main section p:not(.eyebrow):not(.mission):not(.intro),
  .panel p,
  main section li {
    font-size: 1rem;
    line-height: 1.68;
  }

  main section p.lead,
  p.lead {
    font-size: 1.06rem;
    line-height: 1.65;
  }
}


/* Dropdown navigation update */
.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav a,
.nav-dropdown > a {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.nav-dropdown > a {
  text-decoration: none;
  color: #d9f4f7;
  font-size: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  padding: 10px 0;
  background: rgba(6, 26, 49, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.38);
  z-index: 100;
}

.dropdown-menu a {
  display: block;
  padding: 10px 16px;
  color: #d9f4f7;
  white-space: nowrap;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: none;
}

.dropdown-menu a:hover {
  background: rgba(52, 198, 211, 0.12);
  color: #fff;
}

.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  display: block;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.footer-contact a,
.footer a {
  color: #d9f4f7;
}

@media (max-width: 900px) {
  .dropdown-menu {
    position: static;
    display: block;
    min-width: 0;
    margin-top: 6px;
    padding: 6px 0 6px 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .dropdown-menu a {
    padding: 6px 0;
    font-size: 13px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}


/* Nudibranch education section */
.education-hero {
  min-height: 72vh;
  display: grid;
  place-items: center;
  padding: 130px 6vw 80px;
  background:
    linear-gradient(90deg, rgba(6,26,49,0.96), rgba(6,26,49,0.55), rgba(6,26,49,0.88)),
    var(--education-hero-image) center/cover no-repeat;
}

.education-hero .wrap {
  max-width: 980px;
  text-align: center;
}

.education-hero h1 {
  font-size: clamp(2.2rem, 5vw, 4rem);
}

.education-section {
  padding: 90px 6vw;
}

.education-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.education-card {
  padding: 24px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.11);
}

.education-card .number {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(52,198,211,0.16);
  border: 1px solid rgba(52,198,211,0.55);
  color: #fff;
  margin-bottom: 12px;
  font-weight: 700;
}

.education-card h3 {
  margin-top: 0;
  color: #fff;
}

.education-card p {
  margin-bottom: 0;
}

.diagram-card {
  margin-top: 32px;
  padding: 30px;
  border-radius: 26px;
  background: rgba(52,198,211,0.08);
  border: 1px solid rgba(52,198,211,0.25);
}

.taxonomy-tree,
.name-diagram,
.lifecycle {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin: 24px auto 0;
}

.taxonomy-tree span,
.name-diagram span,
.lifecycle span {
  display: block;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  text-align: center;
}

.name-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 24px;
}

.name-box {
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.1);
}

.name-box strong {
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.comparison-card {
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.1);
}

.comparison-card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.comparison-card div {
  padding: 22px;
}

.fact-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

@media (max-width: 900px) {
  .education-grid,
  .comparison-grid,
  .name-split {
    grid-template-columns: 1fr;
  }

  .comparison-card img {
    height: auto;
  }
}


/* Nudibranch anatomy page */
.anatomy-overview {
  margin-top: 32px;
  padding: 28px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.1);
}

.anatomy-overview img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.12);
}

.anatomy-parts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.anatomy-part {
  padding: 24px;
  border-radius: 22px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.09);
}

.anatomy-part h3 {
  margin-top: 0;
  color: #fff;
}

.anatomy-part strong {
  color: var(--teal);
}

.anatomy-note {
  margin-top: 32px;
  padding: 24px;
  border-left: 4px solid var(--teal);
  border-radius: 18px;
  background: rgba(52,198,211,0.08);
}

@media (max-width: 900px) {
  .anatomy-parts-grid {
    grid-template-columns: 1fr;
  }
}


/* Nudibranch life cycle page */
.lifecycle-stage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.lifecycle-stage {
  padding: 26px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.1);
}

.lifecycle-stage h3 {
  margin-top: 0;
  color: #fff;
}

.lifecycle-stage .stage-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(52,198,211,0.16);
  border: 1px solid rgba(52,198,211,0.55);
  color: #fff;
  font-weight: 700;
}

.lifecycle-diagram-panel {
  margin-top: 32px;
  padding: 28px;
  border-radius: 26px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.1);
}

.lifecycle-diagram-panel img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.12);
}

.lifecycle-flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 26px;
}

.lifecycle-flow span {
  padding: 14px 12px;
  border-radius: 18px;
  text-align: center;
  color: #fff;
  background: rgba(52,198,211,0.09);
  border: 1px solid rgba(52,198,211,0.25);
}

@media (max-width: 900px) {
  .lifecycle-stage-grid,
  .lifecycle-flow {
    grid-template-columns: 1fr;
  }
}


/* Nudibranch identification guide */
.id-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.id-guide-card {
  padding: 26px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.1);
}

.id-guide-card h3 {
  margin-top: 0;
  color: #fff;
}

.id-guide-card .step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(52,198,211,0.16);
  border: 1px solid rgba(52,198,211,0.55);
  color: #fff;
  font-weight: 700;
}

.identification-checklist {
  margin-top: 32px;
  padding: 28px;
  border-radius: 26px;
  background: rgba(52,198,211,0.08);
  border: 1px solid rgba(52,198,211,0.25);
}

.identification-checklist ul {
  columns: 2;
  gap: 36px;
}

.mistake-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.mistake-card {
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,127,106,0.08);
  border: 1px solid rgba(255,127,106,0.22);
}

.mistake-card h3 {
  margin-top: 0;
  color: #fff;
}

@media (max-width: 900px) {
  .id-guide-grid,
  .mistake-grid {
    grid-template-columns: 1fr;
  }

  .identification-checklist ul {
    columns: 1;
  }
}


/* Final navigation typography alignment fix */
.nav {
  display: flex;
  align-items: center;
}

.nav > a,
.nav-dropdown > a {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d9f4f7;
  text-decoration: none;
}

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown > a::after {
  content: " ▾";
  font-size: 0.85em;
  line-height: 1;
}

.dropdown-menu a {
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: none;
}

@media (max-width: 900px) {
  .nav {
    align-items: flex-start;
  }

  .nav > a,
  .nav-dropdown > a {
    min-height: 34px;
  }
}


/* Brand icon and refined home photo intro */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 25px;
  background: url("assets/nudibranch-brand-icon.png") center / contain no-repeat;
  flex: 0 0 auto;
}

.home-photo-teaser {
  padding-top: 80px;
  padding-bottom: 80px;
}

.home-photo-teaser .section-intro {
  max-width: 760px;
  margin-bottom: 28px;
}

.home-photo-teaser .section-intro p {
  margin-bottom: 0;
}

.photo-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.photo-mosaic img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
}

.home-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

@media (max-width: 900px) {
  .photo-mosaic {
    grid-template-columns: repeat(2, 1fr);
  }

  .photo-mosaic img {
    height: 220px;
  }
}

@media (max-width: 580px) {
  .brand::before {
    width: 38px;
    height: 20px;
  }

  .photo-mosaic {
    grid-template-columns: 1fr;
  }

  .photo-mosaic img {
    height: auto;
  }
}


/* Shared header/mobile menu system */
#site-header,
#site-footer {
  display: contents;
}

.menu-toggle {
  display: none;
  margin-left: auto;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  padding: 9px 14px;
  font: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 900px) {
  .topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav {
    display: none;
    position: absolute;
    top: 64px;
    right: 5vw;
    left: 5vw;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    background: rgba(6, 26, 49, 0.98);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 18px;
    padding: 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  }

  .nav.open {
    display: flex;
  }

  .nav-dropdown {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .nav > a,
  .nav-dropdown > a {
    width: 100%;
    min-height: 34px;
  }

  .dropdown-menu {
    position: static;
    display: none;
    min-width: 0;
    width: 100%;
    margin-top: 4px;
    padding: 6px 0 8px 14px;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .nav.open .nav-dropdown:hover .dropdown-menu,
  .nav.open .nav-dropdown:focus-within .dropdown-menu,
  .nav.open .nav-dropdown.open .dropdown-menu {
    display: block;
  }

  .dropdown-menu a {
    padding: 7px 0;
    font-size: 13px;
  }
}


/* Educational tooltip links */
.tooltip-link {
  position: relative;
  color: var(--teal);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: help;
}

.tooltip-link .tooltip-text {
  visibility: hidden;
  opacity: 0;
  width: min(340px, 82vw);
  background: #06233f;
  color: #fff;
  text-align: left;
  border-radius: 12px;
  padding: 12px 14px;
  line-height: 1.5;
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  position: absolute;
  z-index: 9999;
  bottom: 135%;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.25s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
}

.tooltip-link:hover .tooltip-text,
.tooltip-link:focus .tooltip-text,
.tooltip-link:focus-within .tooltip-text {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 768px) {
  .tooltip-link .tooltip-text {
    left: 0;
    transform: none;
    bottom: 125%;
  }
}


/* Additional Nudibranch guide pages */
.guide-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.guide-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.guide-card {
  padding: 26px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.025));
  border: 1px solid rgba(255,255,255,0.1);
}

.guide-card h3 {
  margin-top: 0;
  color: #fff;
}

.guide-card .guide-icon {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(52,198,211,0.14);
  border: 1px solid rgba(52,198,211,0.35);
  margin-bottom: 12px;
  font-size: 1.35rem;
}

.guide-photo-card {
  overflow: hidden;
  padding: 0;
}

.guide-photo-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.guide-photo-card div {
  padding: 22px;
}

.hotspot-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 28px;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255,255,255,0.04);
}

.hotspot-table th,
.hotspot-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: left;
}

.hotspot-table th {
  color: #fff;
  background: rgba(52,198,211,0.12);
}

@media (max-width: 900px) {
  .guide-grid-2,
  .guide-grid-3 {
    grid-template-columns: 1fr;
  }

  .guide-photo-card img {
    height: auto;
  }

  .hotspot-table {
    display: block;
    overflow-x: auto;
  }
}



/* Academy dropdown section styling */
.dropdown-section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
  margin: 0.8rem 0 0.3rem;
  padding: 0 0.8rem;
  font-weight: 700;
}

.dropdown-menu hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  margin: 0.8rem 0;
}

/* Academy homepage and Species Database preview cards */

.academy-preview {
  padding: 5rem 1.5rem;
  background: #071822;
}

.academy-preview .section-heading {
  max-width: 850px;
  margin: 0 auto;
  text-align: center;
}

.academy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.academy-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 1.8rem;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

.academy-card h3 {
  margin-top: 0;
  margin-bottom: 0.8rem;
}

.academy-card p {
  line-height: 1.6;
  opacity: 0.92;
}

.narrow {
  max-width: 900px;
}

.species-hero {
  background: linear-gradient(135deg, #06212f, #0b4d63);
}

/* Academy landing page */

.academy-hero {
  background: linear-gradient(135deg, #052230, #0a5d71);
}

.academy-preview .btn {
  display: inline-block;
  margin-top: 1.2rem;
}

.academy-card a,
.academy-card span {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 700;
}

.academy-card span {
  opacity: 0.75;
}


.academy-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  text-align: center;
}

.academy-hero h1,
.academy-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.55);
}


.species-hero,
.academy-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.species-hero h1,
.species-hero p,
.academy-hero h1,
.academy-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.6);
}

/* Academy and Species hero image styling */
.academy-hero,
.species-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover;
  background-position: center;
}

.academy-hero h1,
.academy-hero p,
.species-hero h1,
.species-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.65);
}

/* Compact Academy dropdown redesign */
.academy-short-menu {
  min-width: 220px;
}

.academy-short-menu a {
  white-space: nowrap;
}

/* Academy section landing pages */
.academy-landing-grid .academy-card a,
.academy-landing-grid .academy-card span {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 700;
}

.academy-landing-grid .academy-card span {
  opacity: 0.75;
}

/* Better Macro Diving and Photography pages */
.feature-infographic {
  display: block;
  width: min(100%, 980px);
  height: auto;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);
}

.clean-list {
  line-height: 1.8;
  margin: 1.5rem 0 2rem;
}

.academy-crosslink {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
}

.academy-crosslink .btn + .btn {
  margin-left: 0.75rem;
}


.image-caption {
  text-align: center;
  margin-top: 1rem;
  opacity: 0.85;
  font-size: 0.95rem;
}


/* Coming soon labels */
.academy-card span {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 700;
  opacity: 0.75;
}


/* Academy Nudibranchs hero image */
.academy-nudibranchs-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.42)), url('assets/images/academy-nudibranchs-hero.webp');
  background-size: cover;
  background-position: center;
}

.academy-nudibranchs-hero h1,
.academy-nudibranchs-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.7);
}





/* Academy Photography hero image */
.academy-photography-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.42)), url('assets/images/academy-photography-hero.webp');
  background-size: cover;
  background-position: center;
}

.academy-photography-hero h1,
.academy-photography-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.7);
}





/* Destinations page map hero - dedicated self-contained layout */
.destinations-map-hero {
  position: relative;
  min-height: 520px;
  background-image: linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.28)), url('assets/images/destinations-world-map-hero.webp');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.destinations-map-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7rem 2rem 3rem;
}

.destinations-map-hero__overlay h1 {
  color: #ffffff;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1.05;
  margin: 0 0 1rem;
  text-shadow: 0 5px 24px rgba(0,0,0,0.95);
}

.destinations-map-hero__overlay p {
  color: #ffffff;
  max-width: 920px;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 4px 20px rgba(0,0,0,0.95);
}

@media (max-width: 700px) {
  .destinations-map-hero {
    min-height: 420px;
  }

  .destinations-map-hero__overlay {
    padding-top: 6rem;
  }
}

/* What Is A Nudibranch - three group card layout */
.comparison-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.comparison-grid-three .comparison-card img {
  height: 260px;
  object-fit: cover;
  width: 100%;
}

@media (max-width: 900px) {
  .comparison-grid-three {
    grid-template-columns: 1fr;
  }
}

/* Destination infographic sections */
.destination-infographic-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.destination-infographic {
  display: block;
  width: min(100%, 1050px);
  height: auto;
  margin: 2rem auto 0;
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.35);
}

/* Return link sections */
.return-link-section {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.return-link-card {
  text-align: center;
}

.return-link-card .btn {
  display: inline-block;
  margin-top: 1rem;
}

/* Return link sections */
.return-link-section {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

.return-link-card {
  text-align: center;
}

.return-link-card .btn {
  display: inline-block;
  margin-top: 1rem;
}

/* Content type labels */
.content-type-label {
  display: inline-block;
  margin: 0.8rem 0 0.4rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.82;
}

/* Better Macro Photography hero image */
.better-macro-photography-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.42)), url('assets/images/better-macro-photography-hero.webp');
  background-size: cover;
  background-position: center;
}

.better-macro-photography-hero h1,
.better-macro-photography-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.7);
}

/* Macro Diving Skills hero image */
.macro-diving-skills-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.42)), url('assets/images/macro-diving-skills-hero.webp');
  background-size: cover;
  background-position: center;
}

.macro-diving-skills-hero h1,
.macro-diving-skills-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.7);
}

/* Academy Diving hero image */
.academy-diving-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.42)), url('assets/images/academy-diving-hero.webp');
  background-size: cover;
  background-position: center;
}

.academy-diving-hero h1,
.academy-diving-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.7);
}

/* Responsible Muck Diving hero image */
.responsible-muck-diving-hero {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.42)), url('assets/images/responsible-muck-diving-hero.webp');
  background-size: cover;
  background-position: center;
}

.responsible-muck-diving-hero h1,
.responsible-muck-diving-hero p {
  text-shadow: 0 4px 18px rgba(0,0,0,0.7);
}

/* Destination image-only galleries. Keep image crops consistent across trip pages. */
/* Mozambique image-only gallery */
.mozambique-gallery-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.mozambique-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.mozambique-gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  box-shadow: 0 16px 35px rgba(0,0,0,0.28);
}

/* Destination image-only gallery */
.raja-ampat-gallery-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.destination-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.destination-gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  box-shadow: 0 16px 35px rgba(0,0,0,0.28);
}











/* MacroDivers visual depth polish pass
   Unifies dark blue backgrounds, improves card depth and adds subtle teal accents.
   CSS-only update: content, layout and images remain unchanged.
*/

:root {
  --md-bg: #061722;
  --md-bg-deep: #031018;
  --md-section: #071d2a;
  --md-section-soft: #082332;
  --md-card: rgba(255,255,255,0.055);
  --md-card-strong: rgba(255,255,255,0.075);
  --md-border: rgba(255,255,255,0.11);
  --md-border-teal: rgba(52,198,211,0.35);
  --md-teal: #34c6d3;
  --md-teal-soft: rgba(52,198,211,0.14);
  --md-text: #f4fbfd;
  --md-muted: #c8dbe1;
}

/* One consistent underwater base */
html,
body {
  background:
    radial-gradient(circle at top left, rgba(52,198,211,0.06), transparent 34rem),
    linear-gradient(180deg, var(--md-bg-deep), var(--md-bg) 26rem, var(--md-bg-deep));
  color: var(--md-text);
}

/* Smooth out hard colour jumps between sections */
main,
section,
.content-section,
.academy-preview {
  background-color: transparent !important;
}

.content-section,
.academy-preview {
  position: relative;
}

.content-section::before,
.academy-preview::before {
  content: "";
  position: absolute;
  left: 6vw;
  right: 6vw;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52,198,211,0.22), transparent);
  pointer-events: none;
}

.content-section:first-of-type::before,
.page-hero + .content-section::before,
.hero + section::before {
  opacity: 0.35;
}

/* Section headings feel more intentional */
.section-heading {
  position: relative;
}

.section-heading h2,
.content-section h2,
.academy-preview h2 {
  text-shadow: 0 3px 18px rgba(0,0,0,0.35);
}

.section-heading h2::after,
.content-section .container > h2:first-child::after,
.content-section .container.narrow > h2:first-child::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin: 0.8rem auto 0;
  background: linear-gradient(90deg, transparent, var(--md-teal), transparent);
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(52,198,211,0.35);
}

.content-section .container.narrow > h2:first-child::after {
  margin-left: 0;
  margin-right: 0;
}

/* Make cards premium but still calm */
.academy-card,
.destination-card,
.guide-card,
.comparison-card,
.diagram-card,
.info-card,
.return-link-card,
.academy-crosslink,
.id-guide-card,
.card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.04)) !important;
  border: 1px solid var(--md-border) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.04);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.academy-card:hover,
.destination-card:hover,
.guide-card:hover,
.comparison-card:hover,
.diagram-card:hover,
.info-card:hover,
.return-link-card:hover,
.id-guide-card:hover,
.card:hover {
  transform: translateY(-3px);
  border-color: var(--md-border-teal) !important;
  background:
    linear-gradient(180deg, rgba(52,198,211,0.10), rgba(255,255,255,0.045)) !important;
  box-shadow:
    0 24px 55px rgba(0,0,0,0.34),
    0 0 0 1px rgba(52,198,211,0.08),
    0 0 28px rgba(52,198,211,0.08);
}

/* Card headings and links */
.academy-card h3,
.destination-card h3,
.guide-card h3,
.comparison-card h3,
.diagram-card h3,
.info-card h3,
.card h3 {
  color: #ffffff;
}

.academy-card:hover h3,
.destination-card:hover h3,
.guide-card:hover h3,
.comparison-card:hover h3,
.id-guide-card:hover h3,
.card:hover h3 {
  color: #e9feff;
}

.academy-card a,
.destination-card a,
.guide-card a,
.card a {
  color: var(--md-teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Buttons feel a little more tactile */
.btn,
button,
.button {
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.btn:hover,
button:hover,
.button:hover {
  transform: translateY(-1px);
  border-color: rgba(52,198,211,0.9);
  background: rgba(52,198,211,0.18);
  box-shadow: 0 12px 30px rgba(52,198,211,0.10);
}

/* Image blocks: subtle lift without becoming flashy */
.feature-infographic,
.destination-infographic,
.mozambique-gallery-grid img,
.destination-gallery-grid img,
.nudi-group-card img,
.comparison-card img {
  box-shadow:
    0 22px 48px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,255,255,0.06);
}

/* Gallery images feel clickable/finished even without captions */
.mozambique-gallery-grid img,
.destination-gallery-grid img {
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.mozambique-gallery-grid img:hover,
.destination-gallery-grid img:hover {
  transform: translateY(-3px) scale(1.01);
  filter: brightness(1.06);
  box-shadow:
    0 26px 62px rgba(0,0,0,0.42),
    0 0 0 1px rgba(52,198,211,0.18);
}

/* Subtle highlight panels for important crosslinks */
.academy-crosslink,
.return-link-card {
  background:
    linear-gradient(135deg, rgba(52,198,211,0.10), rgba(255,255,255,0.035)) !important;
  border-color: rgba(52,198,211,0.20) !important;
}

/* Footer blend */
.footer {
  background: linear-gradient(180deg, rgba(3,16,24,0.2), #020b10) !important;
  border-top: 1px solid rgba(52,198,211,0.12);
}

/* Keep mobile calm and readable */
@media (max-width: 800px) {
  .academy-card:hover,
  .destination-card:hover,
  .guide-card:hover,
  .comparison-card:hover,
  .diagram-card:hover,
  .info-card:hover,
  .return-link-card:hover,
  .id-guide-card:hover,
  .card:hover,
  .mozambique-gallery-grid img:hover,
  .destination-gallery-grid img:hover {
    transform: none;
  }

  .content-section::before,
  .academy-preview::before {
    left: 1.5rem;
    right: 1.5rem;
  }
}

/* End MacroDivers visual depth polish pass */














/* MacroDivers home mini gallery */
.home-mini-gallery-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.home-mini-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}

.home-mini-gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  cursor: zoom-in;
  box-shadow:
    0 18px 40px rgba(0,0,0,0.30),
    0 0 0 1px rgba(255,255,255,0.07);
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.home-mini-gallery-grid img:hover {
  transform: translateY(-3px) scale(1.01);
  filter: brightness(1.06);
  box-shadow:
    0 26px 62px rgba(0,0,0,0.42),
    0 0 0 1px rgba(52,198,211,0.18);
}

@media (max-width: 850px) {
  .home-mini-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .home-mini-gallery-grid {
    grid-template-columns: 1fr;
  }
}
/* End MacroDivers home mini gallery */

/* Shared gallery lightbox opened by script.js. */
/* MacroDivers gallery lightbox */
.destination-gallery-grid img,
.mozambique-gallery-grid img,
.home-mini-gallery-grid img,
.lightbox-gallery img {
  cursor: zoom-in;
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem 5rem;
  background: rgba(2, 10, 16, 0.92);
  backdrop-filter: blur(8px);
}

.gallery-lightbox.is-open {
  display: flex;
}

.gallery-lightbox img {
  max-width: min(94vw, 1400px);
  max-height: 88vh;
  width: auto;
  height: auto;
  border-radius: 18px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.65),
    0 0 0 1px rgba(255,255,255,0.12);
}

.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
  position: fixed;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.gallery-lightbox-close {
  top: 1.2rem;
  right: 1.4rem;
  width: 48px;
  height: 48px;
  font-size: 2rem;
  line-height: 1;
}

.gallery-lightbox-prev,
.gallery-lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  font-size: 2.2rem;
  line-height: 1;
}

.gallery-lightbox-prev {
  left: 1.5rem;
}

.gallery-lightbox-next {
  right: 1.5rem;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
  border-color: rgba(52,198,211,0.85);
  background: rgba(52,198,211,0.18);
}

.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
  transform: translateY(-50%) scale(1.04);
}

@media (max-width: 700px) {
  .gallery-lightbox {
    padding: 1rem 3.5rem;
  }

  .gallery-lightbox img {
    max-width: 94vw;
    max-height: 82vh;
    border-radius: 12px;
  }

  .gallery-lightbox-close {
    width: 42px;
    height: 42px;
    top: 0.8rem;
    right: 0.8rem;
  }

  .gallery-lightbox-prev,
  .gallery-lightbox-next {
    width: 42px;
    height: 42px;
    font-size: 1.8rem;
  }

  .gallery-lightbox-prev {
    left: 0.6rem;
  }

  .gallery-lightbox-next {
    right: 0.6rem;
  }
}
/* End MacroDivers gallery lightbox */








/* MacroDivers index gallery 25 photo refinement */
.home-mini-gallery-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
  gap: 1.1rem !important;
}

.home-mini-gallery-grid img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  display: block;
}
/* End MacroDivers index gallery 25 photo refinement */


/* MacroDivers final Ambon-style hero consistency
   Applies the Ambon-style compact hero treatment across all hero pages,
   including Academy pages that were still using older hero sizing/text.
*/

/* Keep menu hover polish */
.topbar {
  backdrop-filter: blur(10px);
}

.nav a {
  position: relative;
  transition: color 0.22s ease;
}

.nav > a::after,
.nav-dropdown > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.45rem;
  width: 0;
  height: 2px;
  background: #34c6d3;
  transition: width 0.22s ease;
}

.nav > a:hover,
.nav-dropdown > a:hover,
.dropdown-menu a:hover {
  color: #34c6d3;
}

.nav > a:hover::after,
.nav-dropdown > a:hover::after {
  width: 100%;
}

/* One shared compact hero system */
.hero,
.home-hero,
.page-hero,
.destination-hero,
.species-hero,
.academy-hero,
.academy-nudibranchs-hero,
.academy-photography-hero,
.academy-diving-hero,
.academy-diving-safety-hero,
.academy-marine-life-hero,
.macro-diving-skills-hero,
.responsible-muck-diving-hero,
.better-macro-photography-hero,
.better-macro-diving-hero,
.destinations-map-hero,
[class*="-hero"] {
  min-height: 410px !important;
  height: 410px !important;
  padding: 6.6rem 1.5rem 3.4rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background-size: cover !important;
  background-position: center !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Ambon-style readable overlay: clear text, visible image */
.hero::before,
.home-hero::before,
.page-hero::before,
.destination-hero::before,
.species-hero::before,
.academy-hero::before,
.academy-nudibranchs-hero::before,
.academy-photography-hero::before,
.academy-diving-hero::before,
.academy-diving-safety-hero::before,
.academy-marine-life-hero::before,
.macro-diving-skills-hero::before,
.responsible-muck-diving-hero::before,
.better-macro-photography-hero::before,
.better-macro-diving-hero::before,
.destinations-map-hero::before,
[class*="-hero"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(2,10,16,0.36), rgba(2,10,16,0.24) 46%, rgba(2,10,16,0.52)),
    radial-gradient(circle at 50% 50%, rgba(52,198,211,0.02), rgba(2,10,16,0.30) 78%);
  pointer-events: none;
  z-index: 0;
}

/* Put hero content above the overlay */
.hero .wrap,
.hero .container,
.home-hero .container,
.page-hero .container,
.destination-hero .container,
.species-hero .container,
.academy-hero .container,
.academy-nudibranchs-hero .container,
.academy-photography-hero .container,
.academy-diving-hero .container,
.academy-diving-safety-hero .container,
.academy-marine-life-hero .container,
.macro-diving-skills-hero .container,
.responsible-muck-diving-hero .container,
.better-macro-photography-hero .container,
.better-macro-diving-hero .container,
.destinations-map-hero .container,
.destinations-map-hero__overlay,
[class*="-hero"] .container {
  position: relative !important;
  z-index: 1 !important;
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hero labels: match Ambon-style small teal label */
.hero .wrap::before,
.hero .container::before,
.page-hero .container::before,
.destination-hero .container::before,
.species-hero .container::before,
.academy-hero .container::before,
.academy-nudibranchs-hero .container::before,
.academy-photography-hero .container::before,
.academy-diving-hero .container::before,
.academy-diving-safety-hero .container::before,
.academy-marine-life-hero .container::before,
.macro-diving-skills-hero .container::before,
.responsible-muck-diving-hero .container::before,
.better-macro-photography-hero .container::before,
.better-macro-diving-hero .container::before,
[class*="-hero"] .container::before {
  content: "MACRODIVERS";
  display: block;
  margin-bottom: 0.7rem;
  color: #34c6d3;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

/* But do not add fake label above the home logo */
.home-hero-content::before {
  content: none !important;
}

/* Hero headings */
.hero h1,
.home-hero h1,
.page-hero h1,
.destination-hero h1,
.species-hero h1,
.academy-hero h1,
.academy-nudibranchs-hero h1,
.academy-photography-hero h1,
.academy-diving-hero h1,
.academy-diving-safety-hero h1,
.academy-marine-life-hero h1,
.macro-diving-skills-hero h1,
.responsible-muck-diving-hero h1,
.better-macro-photography-hero h1,
.better-macro-diving-hero h1,
.destinations-map-hero h1,
.destinations-map-hero__overlay h1,
[class*="-hero"] h1 {
  color: #ffffff !important;
  font-size: clamp(2.7rem, 5.1vw, 4.7rem) !important;
  line-height: 1.04 !important;
  margin: 0 0 0.75rem !important;
  text-shadow:
    0 4px 18px rgba(0,0,0,0.95),
    0 0 24px rgba(0,0,0,0.65) !important;
}

/* Teal line under hero headings */
.hero h1::after,
.home-hero h1::after,
.page-hero h1::after,
.destination-hero h1::after,
.species-hero h1::after,
.academy-hero h1::after,
.academy-nudibranchs-hero h1::after,
.academy-photography-hero h1::after,
.academy-diving-hero h1::after,
.academy-diving-safety-hero h1::after,
.academy-marine-life-hero h1::after,
.macro-diving-skills-hero h1::after,
.responsible-muck-diving-hero h1::after,
.better-macro-photography-hero h1::after,
.better-macro-diving-hero h1::after,
.destinations-map-hero h1::after,
.destinations-map-hero__overlay h1::after,
[class*="-hero"] h1::after {
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  margin: 0.9rem auto 0;
  background: #34c6d3;
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(52,198,211,0.65);
}

/* Hero subtitles */
.hero p,
.home-hero p,
.page-hero p,
.destination-hero p,
.species-hero p,
.academy-hero p,
.academy-nudibranchs-hero p,
.academy-photography-hero p,
.academy-diving-hero p,
.academy-diving-safety-hero p,
.academy-marine-life-hero p,
.macro-diving-skills-hero p,
.responsible-muck-diving-hero p,
.better-macro-photography-hero p,
.better-macro-diving-hero p,
.destinations-map-hero p,
.destinations-map-hero__overlay p,
[class*="-hero"] p {
  color: #ffffff !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(1.03rem, 1.5vw, 1.22rem) !important;
  line-height: 1.48 !important;
  opacity: 1 !important;
  text-shadow:
    0 3px 14px rgba(0,0,0,0.95),
    0 0 20px rgba(0,0,0,0.65) !important;
}

/* Home page hero logo/text */
.home-hero-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 0.35rem !important;
}

.home-hero-logo {
  display: block !important;
  max-width: min(500px, 78vw) !important;
  height: auto !important;
  margin: 0 auto 0 !important;
  filter: drop-shadow(0 9px 24px rgba(0,0,0,0.60));
}

.home-hero-content .home-hero-shortline {
  position: relative !important;
  top: -1.45rem !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 0 1rem !important;
  color: #ffffff !important;
}

/* Coral Triangle hover */
.coral-triangle-term {
  color: #34c6d3 !important;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: help;
}

.coral-triangle-term:hover {
  color: #ffffff !important;
  text-shadow: 0 0 18px rgba(52,198,211,0.85);
}

/* Destination map hero compatibility */
.destinations-map-hero__overlay {
  position: relative !important;
  inset: auto !important;
  min-height: auto !important;
  padding: 0 !important;
}

/* Mobile consistency */
@media (max-width: 800px) {
  .hero,
  .home-hero,
  .page-hero,
  .destination-hero,
  .species-hero,
  .academy-hero,
  .academy-nudibranchs-hero,
  .academy-photography-hero,
  .academy-diving-hero,
  .academy-diving-safety-hero,
  .academy-marine-life-hero,
  .macro-diving-skills-hero,
  .responsible-muck-diving-hero,
  .better-macro-photography-hero,
  .better-macro-diving-hero,
  .destinations-map-hero,
  [class*="-hero"] {
    min-height: 330px !important;
    height: 330px !important;
    padding: 5.8rem 1.15rem 2.6rem !important;
  }

  .home-hero-logo {
    max-width: min(390px, 78vw) !important;
  }

  .home-hero-content .home-hero-shortline {
    top: -0.75rem !important;
    font-size: 0.98rem !important;
  }

  .hero h1,
  .home-hero h1,
  .page-hero h1,
  .destination-hero h1,
  .species-hero h1,
  .academy-hero h1,
  .academy-nudibranchs-hero h1,
  .academy-photography-hero h1,
  .academy-diving-hero h1,
  .academy-diving-safety-hero h1,
  .academy-marine-life-hero h1,
  .macro-diving-skills-hero h1,
  .responsible-muck-diving-hero h1,
  .better-macro-photography-hero h1,
  .better-macro-diving-hero h1,
  .destinations-map-hero h1,
  .destinations-map-hero__overlay h1,
  [class*="-hero"] h1 {
    font-size: clamp(2.1rem, 10vw, 3.1rem) !important;
  }
}

/* End MacroDivers final Ambon-style hero consistency */























/* MacroDivers home hero text-only reset
   Home page now uses the same hero format as normal pages: title plus short line.
*/
.home-page-hero {
  min-height: 410px !important;
  height: 410px !important;
  padding: 6.6rem 1.5rem 3.4rem !important;
}

.home-page-hero .container::before {
  content: "MACRODIVERS" !important;
  display: block;
  margin-bottom: 0.7rem;
  color: #34c6d3;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.home-page-hero h1 {
  color: #ffffff !important;
  font-size: clamp(2.7rem, 5.1vw, 4.7rem) !important;
  line-height: 1.04 !important;
  margin: 0 0 0.75rem !important;
  text-shadow:
    0 4px 18px rgba(0,0,0,0.95),
    0 0 24px rgba(0,0,0,0.65) !important;
}

.home-page-hero h1::after {
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  margin: 0.9rem auto 0;
  background: #34c6d3;
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(52,198,211,0.65);
}

.home-page-hero p {
  color: #ffffff !important;
  max-width: 800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(1.03rem, 1.5vw, 1.22rem) !important;
  line-height: 1.48 !important;
  opacity: 1 !important;
  text-shadow:
    0 3px 14px rgba(0,0,0,0.95),
    0 0 20px rgba(0,0,0,0.65) !important;
}

.home-page-hero .coral-triangle-term {
  color: #34c6d3 !important;
  font-weight: 800 !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.18em !important;
  cursor: help !important;
}

.home-page-hero .coral-triangle-term:hover {
  color: #ffffff !important;
  text-shadow: 0 0 18px rgba(52,198,211,0.85) !important;
}

@media (max-width: 800px) {
  .home-page-hero {
    min-height: 330px !important;
    height: 330px !important;
    padding: 5.8rem 1.15rem 2.6rem !important;
  }

  .home-page-hero h1 {
    font-size: clamp(2.1rem, 10vw, 3.1rem) !important;
  }

  .home-page-hero p {
    font-size: 0.98rem !important;
  }
}
/* End MacroDivers home hero text-only reset */


/* Destination detail page layout
   These classes keep Ambon, Anilao, Mozambique and Raja Ampat using the same
   section order, spacing and visual rhythm. Edit the HTML inside each section,
   but try to keep the section classes and order consistent across pages. */
.destination-page .destination-overview-section,
.destination-page .destination-dive-base-section,
.destination-page .destination-marine-life-section,
.destination-page .destination-story-section,
.destination-page .destination-takeaway-section {
  padding: 4rem 0;
}

.destination-page .destination-overview-section + .destination-infographic-section,
.destination-page .destination-infographic-section + .destination-dive-base-section,
.destination-page .destination-dive-base-section + .destination-marine-life-section,
.destination-page .destination-marine-life-section + .destination-story-section,
.destination-page .destination-story-section + .destination-takeaway-section,
.destination-page .destination-takeaway-section + .destination-gallery-section {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.destination-page .destination-gallery-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.destination-page .panel h3:first-child,
.destination-page .card h3:first-child {
  margin-top: 0;
}

.destination-page .section-heading {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Keep right-hand desktop dropdowns inside the browser window.
   The About menu sits near the right edge, so align its dropdown to the right
   of the parent item instead of opening further to the right. Mobile menu
   rules above still use the full-width stacked layout. */
@media (min-width: 901px) {
  .nav-dropdown:last-child .dropdown-menu {
    left: auto;
    right: 0;
  }
}

/* Home page introduction split: text and image hook below the hero.
   The section becomes a single column on smaller screens. */
.home-intro-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.home-intro-copy {
  max-width: 720px;
}

.home-intro-photo-card {
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 22px 60px rgba(0,0,0,0.28);
}

.home-intro-photo-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.home-intro-photo-card figcaption {
  padding: 1rem 1.2rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
}

@media (max-width: 850px) {
  .home-intro-split {
    grid-template-columns: 1fr;
  }
}

/* Best Macro Diving Destinations page */
.macro-destinations-page .academy-card p strong {
  color: var(--coral);
  font-weight: 600;
}

.macro-destination-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 32px;
}

.macro-destination-jump a {
  display: inline-block;
  padding: 9px 14px;
  border: 1px solid rgba(52, 198, 211, 0.42);
  border-radius: 999px;
  color: #ffffff;
  background: rgba(52, 198, 211, 0.08);
  text-decoration: none;
}

.macro-destination-jump a:hover,
.macro-destination-jump a:focus {
  border-color: rgba(52, 198, 211, 0.85);
  background: rgba(52, 198, 211, 0.15);
}

.macro-pick-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.macro-two-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.macro-three-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.macro-take {
  max-width: 960px;
  margin: 28px auto 0;
  padding: 18px 22px;
  border-left: 3px solid var(--md-teal);
  border-radius: 18px;
  background: rgba(52, 198, 211, 0.08);
  color: #d7eaf0;
}

@media (max-width: 1100px) {
  .macro-pick-grid,
  .macro-three-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .macro-pick-grid,
  .macro-two-card-grid,
  .macro-three-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Macro destinations country sections */
.country-block {
  margin-top: 2rem;
}

.country-block > h3 {
  margin-bottom: 0.5rem;
}

.destination-detail-grid {
  margin-top: 1rem;
}

.destination-detail-grid h4 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

/* Coral Triangle destination facts: match Beyond the Coral Triangle accent style */
.coral-destination-grid .card-body p strong {
  color: var(--accent, #ff7a66);
}

.coral-destination-grid .card-body h4 {
  color: #ffffff;
}

/* Macro destinations: stronger country headings */
.country-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 2.4rem 0 0.75rem;
  padding: 0.55rem 0.9rem;
  border-left: 4px solid var(--accent, #ff7a66);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 122, 102, 0.08);
  color: #ffffff;
  letter-spacing: 0.02em;
}

.country-heading::after {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  border-radius: 999px;
  background: var(--accent, #ff7a66);
  opacity: 0.85;
}

.country-block > p {
  max-width: 980px;
}

/* Macro destinations hero: match preferred site hero format */
.macro-destinations-hero .container::before {
  content: "MACRODIVERS";
}

.macro-destinations-hero p {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Site-wide hero consistency layer
   Keeps older hero-photo pages visually aligned with the preferred page-hero style. */
.hero .hero-inner,
.education-hero .wrap,
.camera-hero .wrap,
.destinations-map-hero__overlay {
  position: relative !important;
  z-index: 1 !important;
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.hero .hero-inner .eyebrow,
.education-hero .wrap .eyebrow,
.camera-hero .wrap .eyebrow {
  display: block !important;
  margin-bottom: 0.7rem !important;
  color: #34c6d3 !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

.hero .hero-inner h1,
.education-hero .wrap h1,
.camera-hero .wrap h1,
.destinations-map-hero__overlay h1 {
  color: #ffffff !important;
  font-size: clamp(2.7rem, 5.1vw, 4.7rem) !important;
  line-height: 1.04 !important;
  margin: 0 0 0.75rem !important;
  text-shadow:
    0 4px 18px rgba(0,0,0,0.95),
    0 0 24px rgba(0,0,0,0.65) !important;
}

.hero .hero-inner h1::after,
.education-hero .wrap h1::after,
.camera-hero .wrap h1::after,
.destinations-map-hero__overlay h1::after {
  content: "";
  display: block;
  width: 96px;
  height: 3px;
  margin: 0.9rem auto 0;
  background: #34c6d3;
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(52,198,211,0.65);
}

.hero .hero-inner .mission,
.hero .hero-inner .intro,
.education-hero .wrap .mission,
.camera-hero .wrap .lead,
.destinations-map-hero__overlay p {
  color: #ffffff !important;
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(1.03rem, 1.5vw, 1.22rem) !important;
  line-height: 1.48 !important;
  opacity: 1 !important;
  text-shadow:
    0 3px 14px rgba(0,0,0,0.95),
    0 0 20px rgba(0,0,0,0.65) !important;
}

.hero .hero-inner .intro {
  margin-top: 0.75rem !important;
  opacity: 0.92 !important;
}

.hero .hero-inner .button-row,
.education-hero .wrap .button-row,
.camera-hero .wrap .button-row {
  margin-top: 1.35rem !important;
}

/* Make sure old hero wrappers are not visually taller than the preferred hero treatment. */
.hero:not(.home-page-hero),
.education-hero,
.camera-hero,
.destinations-map-hero {
  min-height: 410px !important;
  height: 410px !important;
  padding: 6.6rem 1.5rem 3.4rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Blog feedback buttons */
.buttons button.selected {
  outline: 2px solid var(--accent, #34c6d3);
  box-shadow: 0 0 0 4px rgba(52, 198, 211, 0.16);
}