/* =========================================================================
   PeopleWill — layout
   Containers, page shell, header, footer, section rhythm.
   Mobile-first: base rules target 360px, media queries add from there.
   ========================================================================= */

.pw-app {
  display: flex;
  flex-direction: column;
  min-block-size: 100svh;
}

.pw-container {
  inline-size: 100%;
  max-inline-size: var(--pw-container-max);
  margin-inline: auto;
  padding-inline: var(--pw-gutter);
}

.pw-container--narrow {
  max-inline-size: var(--pw-container-narrow);
}

.pw-main {
  flex: 1;
  padding-block: var(--pw-space-5) var(--pw-space-8);
}

.pw-section {
  margin-block-start: var(--pw-space-7);
}

.pw-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pw-space-2) var(--pw-space-4);
  margin-block-end: var(--pw-space-4);
}

.pw-section__title {
  font-size: var(--pw-text-xl);
}

.pw-section__subtitle {
  margin-block-start: var(--pw-space-1);
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
}

.pw-prose {
  max-inline-size: var(--pw-measure);
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

.pw-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--pw-z-header);
  background: color-mix(in srgb, var(--pw-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid var(--pw-border);
}

.pw-header__inner {
  display: flex;
  align-items: center;
  gap: var(--pw-space-3);
  min-block-size: 60px;
}

.pw-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--pw-space-2);
  color: var(--pw-text);
  font-weight: var(--pw-weight-bold);
  font-size: var(--pw-text-lg);
  letter-spacing: var(--pw-tracking-tight);
  text-decoration: none;
}

.pw-logo__mark {
  display: grid;
  place-items: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--pw-radius-md);
  background: var(--pw-primary);
  color: var(--pw-primary-contrast);
}

.pw-logo__mark .pw-icon {
  inline-size: 20px;
  block-size: 20px;
}

.pw-header__spacer {
  flex: 1;
}

.pw-header__actions {
  display: flex;
  align-items: center;
  gap: var(--pw-space-2);
}

/* PRD §2 lists "Join PeopleWill" among the primary calls to action. It lives in
   the header rather than the hero, because the hero's primary action is the
   thing the product exists for — saying what should change. */
.pw-header__join {
  min-block-size: 40px;
  padding-inline: var(--pw-space-4);
  font-size: var(--pw-text-sm);
}

/* Once someone has joined, the invitation is noise. */
.pw-app[data-onboarded="true"] .pw-header__join {
  display: none;
}

/* Below this the header cannot hold logo + language + theme + Join without
   overflowing, so Join stands down here and the hero carries it instead — see
   buildHero() in js/pages/home.js. The CTA never disappears, it moves.

   The selector is qualified with .pw-header on purpose. `.pw-button` sets
   `display: inline-flex` in components.css, which loads after this file at
   equal specificity — a media query adds none of its own, so a bare
   `.pw-header__join` would lose on source order and silently do nothing. */
@media (max-width: 560px) {
  .pw-header .pw-header__join {
    display: none;
  }
}

/* The primary nav below 768px.

   It used to be display:none with no menu button anywhere, which meant that on
   a phone Global, My Country and Impact simply did not exist — the footer was
   the entire navigation. On a product most people will reach from a phone that
   is not a small styling gap, it is most of the site being unreachable for most
   of its visitors.

   Open, it is a panel under the header rather than a full-screen overlay: the
   header stays visible, so it is obvious what closed it and where you are. */
.pw-nav {
  display: none;
  gap: var(--pw-space-1);
}

.pw-nav[data-open="true"] {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: 20;
  padding: var(--pw-space-2);
  background: var(--pw-bg);
  border-block-end: 1px solid var(--pw-border);
  box-shadow: var(--pw-shadow-md);
}

.pw-nav[data-open="true"] .pw-nav__link {
  /* A touch target, not a text link. 44px is the minimum a thumb can hit
     reliably, and these are stacked so a near-miss lands on a neighbour. */
  min-block-size: 44px;
  display: flex;
  align-items: center;
  font-size: var(--pw-text-base);
}

.pw-nav__link {
  padding: var(--pw-space-2) var(--pw-space-3);
  border-radius: var(--pw-radius-md);
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
  font-weight: var(--pw-weight-medium);
  text-decoration: none;
}

.pw-nav__link:hover {
  background: var(--pw-bg-subtle);
  color: var(--pw-text);
}

.pw-nav__link[aria-current="page"] {
  color: var(--pw-primary);
  background: var(--pw-primary-tint);
}

/* The button exists only where the nav is collapsed. Above the breakpoint the
   links are all visible and a control that opens them would be a control that
   does nothing. */
.pw-header__menu {
  display: inline-flex;
  /* On the left, beside the logo, because that is what was asked for and it is
     where a nav drawer control conventionally sits. An earlier version pushed
     it to the right edge with `order: 99` on a thumb-reach argument; the
     product owner said the icon was not on the left, and that settles it.

     DOM order already puts it here, so no `order` is needed — and DOM order is
     also the order that matters to a screen reader, which now reaches
     "Menu, collapsed" and then the links it discloses. */
}

@media (min-width: 768px) {
  .pw-nav,
  .pw-nav[data-open="true"] {
    display: flex;
    flex-direction: row;
    position: static;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .pw-header .pw-header__menu {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.pw-footer {
  margin-block-start: auto;
  padding-block: var(--pw-space-6);
  border-block-start: 1px solid var(--pw-border);
  background: var(--pw-bg-subtle);
  color: var(--pw-text-secondary);
  font-size: var(--pw-text-sm);
}

.pw-footer__inner {
  display: grid;
  gap: var(--pw-space-4);
}

.pw-footer__tagline {
  font-weight: var(--pw-weight-medium);
  color: var(--pw-text);
}

.pw-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pw-space-2) var(--pw-space-4);
}

@media (min-width: 768px) {
  .pw-footer__inner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------------
   Grids
   Intrinsic layout — auto-fill + minmax adapts without media queries.
   --------------------------------------------------------------------------- */

.pw-grid {
  display: grid;
  gap: var(--pw-space-4);
}

.pw-grid--requests {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.pw-grid--topics {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
}

.pw-grid--tiles {
  grid-template-columns: repeat(auto-fill, minmax(min(50% - var(--pw-space-2), 140px), 1fr));
}