/* DWA website — site-specific responsive layout helpers.
   Brand tokens come from styles.css; this only adds page layout
   and responsive behaviour that inline component styles can't express. */

html, body { margin: 0; }
body { background: var(--white); color: var(--text-body); font-family: var(--font-body); }

.dwa-container {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.dwa-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.dwa-section-tight { padding: clamp(2.25rem, 5vw, 4rem) 0; }

/* Grids that collapse on small screens */
.dwa-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.dwa-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
.dwa-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

@media (max-width: 920px) {
  .dwa-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .dwa-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .dwa-grid-3, .dwa-grid-2, .dwa-grid-4 { grid-template-columns: 1fr; }
}

/* Footer */
.dwa-footer-grid { grid-template-columns: 1.5fr 1fr 1.2fr; }
@media (max-width: 820px) { .dwa-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dwa-footer-grid { grid-template-columns: 1fr; } }

/* Split hero: content panel + image */
.dwa-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  min-height: 540px;
}
@media (max-width: 880px) {
  .dwa-hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .dwa-hero-img { min-height: 300px; }
}

/* Full-bleed image-led hero with a solid sand copy panel */
.dwa-hero-full {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(560px, 82vh, 760px);
  /* Generous top + bottom bands so the photo frames the copy box on every side;
     the top band also clears the fixed, blended navbar. */
  padding-top: clamp(120px, 14vh, 152px);
  padding-bottom: clamp(72px, 9vh, 112px);
  overflow: hidden;
  background: var(--deep-sea);
}
.dwa-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.dwa-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,76,119,0.45) 0%, rgba(10,76,119,0.18) 40%, rgba(10,76,119,0) 64%);
}
/* Top-down scrim so the blended navbar text keeps contrast over any image */
.dwa-hero-topscrim {
  position: absolute; left: 0; right: 0; top: 0; height: 220px;
  background: linear-gradient(180deg, rgba(7,33,52,0.58) 0%, rgba(7,33,52,0.26) 48%, rgba(7,33,52,0) 100%);
  pointer-events: none;
}
/* Nudge the hero copy box toward the left, but keep an image margin on its left */
.dwa-hero-shift { margin-left: 0; }
@media (min-width: 881px) {
  .dwa-hero-shift { margin-left: calc(var(--gutter) * -0.28); }
}
.dwa-hero-panel {
  position: relative;
  max-width: 560px;
  background: rgba(247, 243, 234, 0.94);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 3vw, 3rem);
}
@media (max-width: 880px) {
  .dwa-hero-full { min-height: 70vh; padding: clamp(108px, 16vw, 124px) 0 clamp(48px, 12vw, 72px); }
  .dwa-hero-panel { max-width: 100%; }
}

/* Two-column content (e.g. About) */
.dwa-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 880px) { .dwa-split { grid-template-columns: 1fr; gap: var(--space-6); } }

.dwa-split-even { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-7); align-items: center; }
@media (max-width: 880px) { .dwa-split-even { grid-template-columns: 1fr; } }

/* Header / nav */
.dwa-nav-desktop { display: flex; align-items: center; gap: var(--space-5); }
.dwa-nav-toggle { display: none; }
.dwa-mobile-menu { display: none; }

@media (max-width: 1080px) {
  .dwa-nav-desktop { display: none; }
  .dwa-nav-toggle { display: inline-flex; }
  .dwa-mobile-menu.open { display: block; }
}

/* Responsive display type */
.dwa-h-hero { font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.14; }
.dwa-h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
.dwa-h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }

img { max-width: 100%; }

/* ---- Anchor scrolling: clear the sticky/fixed navbar ---- */
:target { scroll-margin-top: 104px; }

/* ---- Navbar dropdown menus ---- */
.dwa-navitem { position: relative; display: inline-flex; align-items: center; }
.dwa-navlink { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.dwa-chev { transition: transform .2s var(--ease-out); opacity: 0.8; }
.dwa-navitem:hover .dwa-chev, .dwa-navitem:focus-within .dwa-chev { transform: rotate(180deg); }
.dwa-dropdown {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 234px; padding-top: 12px; /* invisible hover bridge */
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s var(--ease-out), transform .16s var(--ease-out);
  z-index: 250;
}
.dwa-navitem:hover .dwa-dropdown, .dwa-navitem:focus-within .dwa-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dwa-dropdown-inner {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.dwa-drop-link {
  display: block; padding: 10px 14px; border-radius: var(--radius-md);
  font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
  color: var(--ink-700); text-decoration: none; white-space: nowrap;
  transition: background .14s var(--ease-out), color .14s var(--ease-out);
}
.dwa-drop-link:hover, .dwa-drop-link:focus-visible { background: var(--sand-50); color: var(--deep-sea); outline: none; }

/* Entrance — calm fade/rise, respects reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .dwa-rise { opacity: 0; transform: translateY(14px); animation: dwaRise var(--duration-slow) var(--ease-out) forwards; }
  @keyframes dwaRise { to { opacity: 1; transform: none; } }
}