/* ==========================================================================
   LAYOUT
   Structural page regions: skip-link, header/nav, footer, page containers,
   hero banners, and the content section grid used across pages.

   v2 (visual redesign pass):
   - Header gets a permanent soft shadow (depth instead of a flat block)
   - Mobile nav panel animates open/closed (max-height + opacity) instead
     of an instant display:none/block swap — CSS-only, the JS still just
     toggles the same .is-open class it always did
   - Desktop nav links get an animated underline on hover, and the current
     page gets a small accent dot instead of a plain underline
   - Hero / page-heading padding and min-height use clamp() so they scale
     smoothly with viewport instead of jumping at one breakpoint
   - A "flow" rhythm is applied to the direct children of `.section
     .container` (headings, paragraphs, lists, quotes, forms, grids) so
     vertical spacing is consistent across every page without needing new
     classes in the HTML
   - Footer gets a subtle top divider and refined spacing
   ========================================================================== */

/* ---- Skip link (accessibility) ----
   Visually hidden until focused, so keyboard users can jump past the nav
   without it being visible to everyone else. */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.skip-link:focus {
  top: var(--space-2);
}

/* ---- Container ----
   Centers content and constrains it to a max width, with fluid side
   padding that scales with the viewport instead of jumping at one
   breakpoint. */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 1rem + 2vw, 2.5rem);
}

/* ==========================================================================
   SITE HEADER
   ========================================================================== */

.site-header {
  background-color: var(--color-primary);
  box-shadow: var(--shadow-header);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
}

/* ---- Primary navigation ----
   Mobile-first: collapsed by default (zero height, invisible), animated
   open into a stacked panel when .is-open is toggled by main.js. Becomes
   a static inline row at desktop width regardless of toggle state. */
.site-nav {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  background-color: var(--color-primary);
  border-top: 1px solid rgba(255, 255, 255, 0.12);

  max-height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height var(--transition-slow), opacity var(--transition-base),
    visibility var(--transition-slow);
}

.site-nav.is-open {
  max-height: 24rem;
  opacity: 1;
  visibility: visible;
}

.site-nav__list {
  list-style: none;
  padding: var(--space-2) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-nav__list a {
  display: block;
  padding: var(--space-2) var(--space-1);
  min-height: 44px; /* comfortable touch target */
  display: flex;
  align-items: center;
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  text-decoration: none;
  background: none; /* override the base <a> underline-draw effect */
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.site-nav__list a:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-accent-tint);
}

.site-nav__list a[aria-current="page"] {
  color: var(--color-white);
  font-weight: var(--weight-semibold);
  position: relative;
}

.site-nav__list a[aria-current="page"]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent-tint);
  margin-right: var(--space-1);
  flex-shrink: 0;
}

/* ---- Mobile nav toggle button ---- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  color: var(--color-white);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-2);
  min-height: 44px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.nav-toggle:hover {
  background-color: rgba(255, 255, 255, 0.08);
}

.nav-toggle__icon {
  width: 22px;
  height: 16px;
  position: relative;
  display: inline-block;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-white);
  transition: transform var(--transition-base);
}

.nav-toggle__icon::before {
  top: 0;
}

.nav-toggle__icon::after {
  bottom: 0;
}

/* Middle bar drawn via the icon element's own border-top, positioned center */
.nav-toggle__icon {
  border-top: 2px solid var(--color-white);
  top: 7px;
  transition: border-color var(--transition-fast);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  border-top-color: transparent;
}

@media (min-width: 1024px) {
  .nav-toggle {
    display: none;
  }

  .site-nav {
    position: static;
    background: none;
    border-top: none;
    max-height: none;
    opacity: 1;
    visibility: visible;
    overflow: visible;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: var(--space-4);
  }

  .site-nav__list a {
    padding: var(--space-1) 0;
    min-height: auto;
    position: relative;
    border-radius: 0;
  }

  .site-nav__list a:hover {
    background: none;
  }

  /* Animated underline: scales in from the left on hover/focus, replacing
     a plain color-only hover state with something more deliberate. */
  .site-nav__list a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent-tint);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
  }

  .site-nav__list a:hover::after,
  .site-nav__list a:focus-visible::after {
    transform: scaleX(1);
  }

  .site-nav__list a[aria-current="page"]::after {
    transform: scaleX(1);
    background-color: var(--color-white);
  }
}

/* ==========================================================================
   LOGO
   Typographic wordmark (no image asset) — Roboto Black, reversible between
   white (on the dark header) and brand dark blue (on a plain white page).
   ========================================================================== */

.logo {
  font-family: var(--font-logo);
  font-weight: var(--weight-heavy);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  background: none; /* override the base <a> underline-draw effect */
  color: var(--color-white); /* default: reversed out of the dark header */
  line-height: 1;
  transition: opacity var(--transition-fast);
}

.logo:hover {
  color: var(--color-white);
  opacity: 0.85;
}

/* Variant for use on a plain white background (e.g. a future error page) */
.logo--dark {
  color: var(--color-primary);
}

.logo--dark:hover {
  color: var(--color-primary-dark);
}

/* ==========================================================================
   SITE FOOTER
   ========================================================================== */

.site-footer {
  background-color: var(--color-primary);
  color: var(--color-white);
  padding-block: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--space-4);
  justify-content: center;
}

.footer-nav a {
  color: var(--color-white);
  font-size: var(--text-sm);
  text-decoration: none;
  background-image: linear-gradient(var(--color-white), var(--color-white));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--transition-base);
  padding-bottom: 2px;
}

.footer-nav a:hover {
  color: var(--color-white);
  background-size: 100% 1px;
}

.site-footer__copyright,
.site-footer__email a {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.75);
}

.site-footer__email a {
  text-decoration: none;
  background: none;
}

.site-footer__email a:hover {
  text-decoration: underline;
  color: var(--color-white);
}

@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ==========================================================================
   HERO (Home page only)
   Full-bleed background photo with the primary color as a scrim so the
   white headline text stays readable at any crop.
   ========================================================================== */

.hero {
  /* Fallback layer for browsers without image-set() support: if the
     image-set() declaration below is unsupported, the browser ignores
     that whole (invalid-to-it) declaration and keeps this JPEG-only one
     instead — this is a deliberate two-declaration progressive
     enhancement pattern, not a duplicate left in by mistake. */
  background-image: linear-gradient(
      180deg,
      rgba(0, 72, 109, 0.75) 0%,
      rgba(0, 72, 109, 0.55) 100%
    ),
    url("../images/hero-home-mobile.jpg");
  background-image: linear-gradient(
      180deg,
      rgba(0, 72, 109, 0.75) 0%,
      rgba(0, 72, 109, 0.55) 100%
    ),
    image-set(
      url("../images/hero-home-mobile.webp") type("image/webp"),
      url("../images/hero-home-mobile.jpg") type("image/jpeg")
    );
  background-size: cover;
  background-position: center 30%;
  color: var(--color-white);
  padding-block: var(--space-section);
  display: flex;
  align-items: center;
  /* True full-viewport bleed on every screen size, not just a large fixed
     cap. min-height: 100vh is the fallback for older browsers; the second
     100dvh declaration overrides it where supported and accounts for
     mobile browsers' collapsing address bar (100vh alone can leave a gap
     or cause a jump on phones as the browser chrome shows/hides). */
  min-height: 100vh;
  min-height: 100dvh;
}

@media (min-width: 768px) {
  .hero {
    background-image: linear-gradient(
        180deg,
        rgba(0, 72, 109, 0.7) 0%,
        rgba(0, 72, 109, 0.45) 100%
      ),
      url("../images/hero-home.jpg");
    background-image: linear-gradient(
        180deg,
        rgba(0, 72, 109, 0.7) 0%,
        rgba(0, 72, 109, 0.45) 100%
      ),
      image-set(
        url("../images/hero-home.webp") type("image/webp"),
        url("../images/hero-home.jpg") type("image/jpeg")
      );
  }
}

.hero__inner {
  max-width: 640px;
}

.hero__title {
  color: var(--color-white);
  font-size: var(--text-3xl);
  margin-bottom: var(--space-2);
}

.hero__tagline {
  font-size: var(--text-md);
  margin-bottom: var(--space-4);
  color: var(--color-white);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

@media (max-width: 400px) {
  /* Full-width stacked buttons are easier to tap accurately on very
     narrow phones than two side-by-side pill buttons. */
  .hero__ctas .btn {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   PAGE HEADING BANNER
   Shared on About / Investment-Meetings / Non-Deal Roadshows. Same source
   photo, three brand-derived overlay tints applied via modifier class.
   ========================================================================== */

.page-heading {
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  display: flex;
  align-items: center;
  min-height: clamp(14rem, 12rem + 8vw, 20rem);
}

.page-heading__inner {
  max-width: 720px;
}

.page-heading h1 {
  color: var(--color-white);
  margin-bottom: var(--space-1);
  /* Legibility insurance: the overlay tints below were made lighter (more
     of the photo shows through) per request, but the source photo has
     lighter yellow/orange sections that could otherwise reduce contrast
     under white text in places. A subtle shadow keeps the heading
     readable everywhere on the image without needing the overlay itself
     to stay as dark as before. */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.page-heading p {
  font-size: var(--text-md);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* About: solid primary (dark blue) tint
   (fallback JPEG-only declaration first, image-set() second — see the
   .hero comment above for why both are needed) */
.page-heading--about {
  background-image: linear-gradient(
      0deg,
      rgba(0, 72, 109, 0.70),
      rgba(0, 72, 109, 0.70)
    ),
    url("../images/page-heading-mobile.jpg");
  background-image: linear-gradient(
      0deg,
      rgba(0, 72, 109, 0.70),
      rgba(0, 72, 109, 0.70)
    ),
    image-set(
      url("../images/page-heading-mobile.webp") type("image/webp"),
      url("../images/page-heading-mobile.jpg") type("image/jpeg")
    );
}

/* Investment-Meetings: solid accent (teal) tint */
.page-heading--investment-meetings {
  background-image: linear-gradient(
      0deg,
      rgba(0, 109, 91, 0.70),
      rgba(0, 109, 91, 0.70)
    ),
    url("../images/page-heading-mobile.jpg");
  background-image: linear-gradient(
      0deg,
      rgba(0, 109, 91, 0.70),
      rgba(0, 109, 91, 0.70)
    ),
    image-set(
      url("../images/page-heading-mobile.webp") type("image/webp"),
      url("../images/page-heading-mobile.jpg") type("image/jpeg")
    );
}

/* Non-Deal Roadshows: diagonal gradient blending both brand colors */
.page-heading--nondeal-roadshows {
  background-image: linear-gradient(
      135deg,
      rgba(0, 72, 109, 0.72) 0%,
      rgba(0, 109, 91, 0.72) 100%
    ),
    url("../images/page-heading-mobile.jpg");
  background-image: linear-gradient(
      135deg,
      rgba(0, 72, 109, 0.72) 0%,
      rgba(0, 109, 91, 0.72) 100%
    ),
    image-set(
      url("../images/page-heading-mobile.webp") type("image/webp"),
      url("../images/page-heading-mobile.jpg") type("image/jpeg")
    );
}

@media (min-width: 768px) {
  .page-heading--about {
    background-image: linear-gradient(
        0deg,
        rgba(0, 72, 109, 0.68),
        rgba(0, 72, 109, 0.68)
      ),
      url("../images/page-heading.jpg");
    background-image: linear-gradient(
        0deg,
        rgba(0, 72, 109, 0.68),
        rgba(0, 72, 109, 0.68)
      ),
      image-set(
        url("../images/page-heading.webp") type("image/webp"),
        url("../images/page-heading.jpg") type("image/jpeg")
      );
  }

  .page-heading--investment-meetings {
    background-image: linear-gradient(
        0deg,
        rgba(0, 109, 91, 0.68),
        rgba(0, 109, 91, 0.68)
      ),
      url("../images/page-heading.jpg");
    background-image: linear-gradient(
        0deg,
        rgba(0, 109, 91, 0.68),
        rgba(0, 109, 91, 0.68)
      ),
      image-set(
        url("../images/page-heading.webp") type("image/webp"),
        url("../images/page-heading.jpg") type("image/jpeg")
      );
  }

  .page-heading--nondeal-roadshows {
    background-image: linear-gradient(
        135deg,
        rgba(0, 72, 109, 0.70) 0%,
        rgba(0, 109, 91, 0.70) 100%
      ),
      url("../images/page-heading.jpg");
    background-image: linear-gradient(
        135deg,
        rgba(0, 72, 109, 0.70) 0%,
        rgba(0, 109, 91, 0.70) 100%
      ),
      image-set(
        url("../images/page-heading.webp") type("image/webp"),
        url("../images/page-heading.jpg") type("image/jpeg")
      );
  }
}

/* ==========================================================================
   PAGE SECTIONS
   Generic vertical rhythm + optional alternate background for content
   sections that follow a hero or page-heading banner.
   ========================================================================== */

main {
  display: block;
}

.section {
  padding-block: var(--space-section);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section__intro {
  max-width: var(--content-max-width-narrow);
  margin-bottom: var(--space-stack-md);
}

/* ---- Content rhythm ("flow") ----
   Applies consistent vertical spacing between the direct children of a
   page's main content container, without needing a new class on every
   element in every page. Headings get more space above them than below,
   so they visually group with the content that follows. */
.section .container > * + * {
  margin-top: var(--space-stack-sm);
}

.section .container > h2,
.section .container > h3 {
  margin-top: var(--space-stack-lg);
}

.section .container > h2:first-child,
.section .container > h3:first-child {
  margin-top: 0;
}

.section .container > h2 + p,
.section .container > h2 + h3,
.section .container > h3 + p {
  margin-top: var(--space-stack-sm);
}

.section .container > .pull-quote,
.section .container > .content-grid,
.section .container > form,
.section .container > address {
  margin-top: var(--space-stack-lg);
}

/* Buttons/CTAs need more breathing room above them than plain paragraph
   text does, wherever they follow something else on the page (e.g. the
   "Learn more" CTA sitting right below a quote box) — the generic
   paragraph-to-paragraph gap above is too tight to read as a distinct
   call-to-action. Scoped to just the paragraph wrapping a button, so
   regular body-copy spacing elsewhere is unaffected. */
.section .container > p:has(.btn) {
  margin-top: var(--space-stack-lg);
}

/* Two-column layout for content blocks that pair a heading+copy with a
   supporting element (used on About / Non-Deal Roadshows subsections). */
.content-grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 1024px) {
  .content-grid--split {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--space-6);
  }
}