/* ==========================================================
   GLOBAL SITE STYLE OVERRIDES
   (works alongside Tailwind, does NOT replace it)
   ========================================================== */

/* ----------------------------------------------------------
1) GLOBAL BODY & BASE TYPOGRAPHY
---------------------------------------------------------- */
body {
  font-family: 'Inter', sans-serif;
  background-color: #f8fafc;
}

/* Improve hyphenation and avoid ragged text in long paragraphs */
p {
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ----------------------------------------------------------
2) MAKE LONG TEXT MORE READABLE & LESS “SPACED OUT”
---------------------------------------------------------- */

/* Target only dynamic content (your section pages) */
#dynamic-content p {
  line-height: 1.65; /* tighter than Tailwind's leading-loose */
}

/* Slightly more compact default text for long pages */
#dynamic-content {
  font-size: 1rem; /* equivalent to Tailwind text-base */
}

/* ----------------------------------------------------------
3) REDUCE EXCESSIVE SECTION PADDING SITE-WIDE
---------------------------------------------------------- */
.section-padding {
  padding: 3.5rem 1.25rem; /* was very generous before */
}

@media (min-width: 640px) {
  .section-padding {
    padding: 4.5rem 3rem; /* still elegant, but tighter */
  }
}

/* ----------------------------------------------------------
4) REDUCE BIG VERTICAL GAPS BETWEEN ELEMENTS
---------------------------------------------------------- */

/* Reduce Tailwind’s large stack spacing in dynamic content only */
#dynamic-content .space-y-8 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 1.5rem; /* was 2rem */
}

/* For large white “card” blocks */
#dynamic-content .bg-white.p-8 {
  padding: 1.75rem;
}

/* Lists feel calmer and less stretched */
#dynamic-content ul li {
  margin-bottom: 0.35rem;
}

/* ----------------------------------------------------------
5) HEADINGS — KEEP AIR BUT AVOID GIGANTIC GAPS
---------------------------------------------------------- */
#dynamic-content h2,
#dynamic-content h3,
#dynamic-content h4 {
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
}

/* Special case for your section titles */
#dynamic-content h2.text-3xl {
  margin-bottom: 2rem;
}

/* ----------------------------------------------------------
6) NAVIGATION (keeps your current left menu working)
---------------------------------------------------------- */
.nav-link {
  transition: all 0.3s ease;
  padding: 0.75rem 1rem;
  display: block;
  border-left: 2px solid transparent;
  cursor: pointer;
}

.nav-link:hover,
.nav-link.active {
  color: #005f73;
  background-color: #f8fafc;
  border-left-color: #005f73;
}

/* ----------------------------------------------------------
7) SMOOTHER SCROLLING
---------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

/* ----------------------------------------------------------
8) BANNER & ANIMATION CONTAINERS (kept intact)
---------------------------------------------------------- */
#sidebar-logo-area {
  transition: opacity 0.5s ease-in-out;
}

#anim-canvas-container {
  width: 100%;
  height: 220px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

#main-banner-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 200px;
  transition: opacity 0.3s ease;
}

#bannerCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ----------------------------------------------------------
9) ACCESSIBILITY: LINKS, CONTRAST, FOCUS (GLOBAL)
---------------------------------------------------------- */

/* A) Make links identifiable without relying on color (WCAG-friendly)
   Applies only to content links, not nav-links, not CTA buttons. */
#dynamic-content a:not(.nav-link):not(.bg-lagoon-blue):not(.bg-lagoon-light):not(.inline-block) {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

#dynamic-content a:not(.nav-link):not(.bg-lagoon-blue):not(.bg-lagoon-light):not(.inline-block):hover {
  text-decoration-thickness: 2px;
}

/* B) Improve contrast for lagoon-light links in body text
   Keep your lagoon-light look on hover, but ensure readable base color. */
#dynamic-content a.text-lagoon-light {
  color: #005f73 !important; /* lagoon-blue for AA contrast on light bg */
}

#dynamic-content a.text-lagoon-light:hover {
  color: #4da8b8 !important; /* lagoon-light on hover */
}

/* C) Visible keyboard focus rings (site-wide) */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #005f73;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ----------------------------------------------------------
10) SPONSOR BUTTON VISIBILITY (ALL SCREENS)
---------------------------------------------------------- */

/* Strong guarantee: any lagoon-blue button/link has white text */
#dynamic-content a.bg-lagoon-blue,
#dynamic-content button.bg-lagoon-blue,
#dynamic-content .bg-lagoon-blue a,
#dynamic-content .bg-lagoon-blue button {
  color: #ffffff !important;
}

/* Keep contrast when hovering */
#dynamic-content a.bg-lagoon-blue:hover,
#dynamic-content button.bg-lagoon-blue:hover {
  color: #ffffff !important;
}

/* Also ensure visited state doesn't override */
#dynamic-content a.bg-lagoon-blue:visited {
  color: #ffffff !important;
}

/* Fallbacks in case Tailwind custom color utilities are not generated */
.bg-lagoon-blue { background-color: #005f73 !important; }
.bg-lagoon-light { background-color: #4da8b8 !important; }
.text-lagoon-blue { color: #005f73 !important; }
.text-lagoon-light { color: #4da8b8 !important; }
.border-lagoon-blue { border-color: #005f73 !important; }

/* ==========================================================
   MOBILE OPTIMIZATIONS (small screens)
   ========================================================== */
@media (max-width: 767px) {

  /* 1) Make long pages feel shorter */
  .section-padding {
    padding: 2.25rem 1.1rem;
  }

  /* 2) Slightly smaller base text on phones (still readable) */
  #dynamic-content {
    font-size: 0.98rem;
    text-align: left;
  }

  /* 3) Improve paragraph rhythm on mobile */
  #dynamic-content p {
    line-height: 1.58;
  }

  /* 4) Reduce large vertical stacks */
  #dynamic-content .space-y-8 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 1.1rem;
  }

  /* 5) Headings: reduce “gapiness” */
  #dynamic-content h2.text-3xl {
    margin-bottom: 1.25rem;
  }

  #dynamic-content h3 {
    margin-top: 1.1rem;
    margin-bottom: 0.6rem;
  }

  /* 6) Cards: keep nice but less bulky */
  #dynamic-content .bg-white.p-8 {
    padding: 1.25rem;
  }

  /* 7) Lists: reduce indentation on narrow screens */
  #dynamic-content ul.list-disc.list-inside {
    padding-left: 0.25rem;
  }

  #dynamic-content ul li {
    margin-bottom: 0.25rem;
  }

  /* 8) Prevent long URLs/emails from overflowing */
  #dynamic-content a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 9) MOBILE: reduce banner footprint + remove extra whitespace under banner */
  #main-banner-container {
    min-height: 120px;   /* was ~200+ */
  }

  #main-banner-container img {
    margin-bottom: 0;
    display: block;
  }

  /* If your first loaded section has top padding, tighten it on mobile */
  #dynamic-content > section:first-child {
    padding-top: 1.25rem;
  }
}