/*
 * Shared site chrome — one header, one footer, across the public site and
 * the member portal.
 *
 * THE RULE FOR THIS FILE: every selector must be scoped to .site-header,
 * .site-footer, or the `has-site-chrome` body class. No bare element
 * selectors — no `body`, `h1`, `a`, `img`, `*`. The portal's stylesheets
 * are a verbatim extract from the Apps Script original and this file
 * loads after them, so anything unscoped here would silently restyle it.
 */

:root {
  --teal: #21211f;
  --teal-dark: #000000;
  --teal-soft: #eceae7;
  --gold: #f73c4a;
  --cream: #f5f4f2;
  --border: #e2dfdb;
  --white: #ffffff;

  --chrome-serif: Inter, 'Helvetica Neue', Arial, sans-serif;
  --chrome-sans: Inter, 'Helvetica Neue', Arial, sans-serif;

  /*
   * ONE measure, everywhere.
   *
   * This is the width the portal's dashboard already uses - it breaks out
   * of its container to min(1420px, 100vw - 32px) and centres itself on
   * the viewport. The header and footer have to match it or they sit
   * visibly inset from the page beneath them.
   *
   * The public site uses the same value rather than a narrower one of its
   * own: two different header widths is worse than one wide header, and
   * `--shell` in site.css is kept in step so the site's content lines up
   * with its header too. Long prose is held to a readable measure by
   * max-width on the text itself, not by the shell.
   */
  --chrome-shell: min(1420px, calc(100% - 32px));
  --chrome-shadow: 0 10px 30px rgba(15, 95, 91, .12);

  /*
   * The header's own height. The portal's navigation bar sticks directly
   * beneath it, so the two must agree; min-height 74px plus a 1px border.
   */
  --chrome-header-h: 75px;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(245, 244, 242, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  font-family: var(--chrome-sans);
}

.site-header .header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 74px;
  width: 100%;
  max-width: var(--chrome-shell);
  margin: 0 auto;
  /* No padding: the shell width already provides the gutter, and this
     way header content starts exactly where the page content does. */
  padding: 0;
}

.site-header .brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}

.site-header .brand-lockup img {
  height: 44px;
  width: auto;
  display: block;
  /* Clear zone. The guide asks for space around the mark; nothing may
     crowd, overlap or merge with it. */
  margin-right: 6px;
}

.site-header .brand-lockup .name {
  font-family: var(--chrome-serif);
  color: var(--teal);
  font-size: 1.12rem;
  line-height: 1.15;
}

.site-header .brand-lockup .tagline {
  display: block;
  font-family: var(--chrome-sans);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-top: 3px;
}

.site-header .site-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-header .site-nav a {
  padding: 9px 14px;
  border-radius: 9px;
  text-decoration: none;
  color: #56524d;
  font-size: .95rem;
  font-weight: 400;
}

.site-header .site-nav a:hover {
  background: var(--teal-soft);
  color: var(--teal);
}

.site-header .site-nav a[aria-current="page"] {
  color: var(--teal);
  font-weight: 700;
  background: var(--teal-soft);
}

.site-header .member-link {
  background: var(--teal);
  color: var(--white);
  padding: 11px 24px;
  border-radius: 999px;
  font-weight: 500;
  white-space: nowrap;
}

.site-header .member-link:hover {
  background: var(--teal-dark);
  color: var(--white);
}

/* ---------------------------------------------------------------
 * Account control
 *
 * Replaces the "Member Login" button once somebody is signed in. It
 * mirrors the portal's own profile menu rather than reimplementing it —
 * see public/site/js/site.js — so every item still runs the portal's
 * handler.
 * ------------------------------------------------------------- */

.site-header .account { position: relative; display: flex; align-items: center; }

.site-header .account-chip { position: relative; }

.site-header .account-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: .93rem;
  color: #22312f;
  max-width: 260px;
}

.site-header .account-trigger:hover { border-color: var(--teal); }

.site-header .account-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .5px;
}

.site-header .account-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-header .account-chevron { color: var(--gold); font-size: .8rem; }

.site-header .account-bell {
  margin-left: 2px;
  font-size: .85rem;
  position: relative;
}

.site-header .account-bell b {
  position: absolute;
  top: -4px;
  right: -6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9a3f38;
}

.site-header .account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 224px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--chrome-shadow);
  padding: 6px;
  z-index: 70;
}

.site-header .account-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .92rem;
  color: #56524d;
  cursor: pointer;
}

.site-header .account-menu button:hover { background: var(--teal-soft); color: var(--teal); }

.site-header .account-menu button.is-signout {
  color: #9a3f38;
  border-top: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  margin-top: 4px;
  padding-top: 12px;
}

.site-header .account-menu button.is-signout:hover { background: #fff1ef; color: #9a3f38; }

.site-header .hidden { display: none !important; }

.site-header .nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 1.1rem;
  color: var(--teal);
  cursor: pointer;
  font-family: inherit;
}

/* ---------------------------------------------------------------
 * Footer
 *
 * The centred arrangement from the original portal footer, which is the
 * one the fellowship already used: the name in caps, a clear gap, then
 * the strapline. The navigation sits below it rather than beside it, so
 * that block stays the thing you see first.
 * ------------------------------------------------------------- */

.site-footer {
  background: var(--teal);
  color: rgba(255, 255, 255, .88);
  padding: 40px 0 26px;
  font-family: var(--chrome-sans);
  text-align: center;
  line-height: 1.6;
}

.site-footer .shell {
  width: 100%;
  max-width: var(--chrome-shell);
  margin: 0 auto;
  padding: 0;
}

/* Solid white on the dark footer - an approved version, unaltered. */
.site-footer .footer-mark {
  height: 62px;
  width: auto;
  display: block;
  margin: 0 auto 22px;
}

.site-footer .footer-name {
  display: block;
  color: var(--white);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin: 0;
}

.site-footer .strapline {
  margin: 18px 0 0;
  font-size: 13px;
  letter-spacing: .3px;
  color: rgba(255, 255, 255, .9);
}

.site-footer .footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 28px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  list-style: none;
}

.site-footer .footer-links a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-size: .9rem;
}

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

.site-footer .footer-bottom {
  margin-top: 20px;
  font-size: .82rem;
  color: rgba(255, 255, 255, .62);
}

.site-footer .footer-bottom a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.site-footer .footer-bottom a:hover { color: var(--white); text-decoration: underline; }

/* ---------------------------------------------------------------
 * Portal adjustments
 *
 * Scoped to the `has-site-chrome` class that split-frontend.js puts on
 * the portal's <body>, so none of this can reach another page.
 * ------------------------------------------------------------- */

/*
 * Let position: sticky work at all.
 *
 * The portal's stylesheets set `overflow-x: hidden` on html and body,
 * and when authenticated they re-assert it alongside `overflow-y: auto`
 * with !important. That turns <body> into its own scroll container, and
 * a sticky child of a scroll container has no scroll range to stick
 * within - so the header and the navigation bar both simply scrolled
 * away. Nothing reports this; sticky just silently behaves as static.
 *
 * `overflow-x: clip` clips exactly the same overflow without creating a
 * scroll container, which is the whole difference. It is the one value
 * that may pair with `overflow-y: visible`.
 */
body.has-site-chrome {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Sticky footer: the portal's own .page sets min-height:100vh, which
   left a tall gap above the footer on short screens. */
body.has-site-chrome { display: flex; flex-direction: column; min-height: 100vh; }
body.has-site-chrome .page { flex: 1 0 auto; min-height: 0; }
body.has-site-chrome .site-footer { flex-shrink: 0; }

/*
 * The portal drew its own brand block and profile menu, which produced a
 * second header directly beneath this one - the same logo, the same
 * fellowship name, a second identity chip. Both are hidden; the site
 * header now carries them, and the portal's navigation tabs remain.
 */
body.has-site-chrome .portal-brand,
body.has-site-chrome .portal-profile { display: none !important; }

/*
 * Freeze the portal's navigation bar directly beneath the site header.
 *
 * It was already sticky, but at top: 0 - so it slid underneath the site
 * header and disappeared. Offsetting it by the header's height parks the
 * two together, and the lower z-index keeps it behind the header rather
 * than over it while scrolling.
 *
 * The sidebar is a horizontal bar at most widths and a 240px column at
 * the widest; both want the same offset, so this covers each.
 */
/*
 * The dashboard card used to centre itself on the viewport with
 * `left: 50%; transform: translateX(-50%)`, breaking out of the 680px
 * .container it sits in. Two things were wrong with that here.
 *
 * The transform: a transformed ancestor becomes the containing block for
 * its descendants, and `position: sticky` inside one stops tracking the
 * viewport - so the navigation bar scrolled away whatever `top` it was
 * given.
 *
 * And the measure: the card sized itself from 100vw, which includes the
 * scrollbar, while the header sized itself from its parent, which does
 * not. That is where a stubborn 7px misalignment came from.
 *
 * So the card no longer breaks out at all. The container is widened to
 * the shared measure when it holds a dashboard, and the card simply
 * fills it - no transform, no viewport units, nothing to drift.
 */
body.has-site-chrome .page {
  padding-left: 0;
  padding-right: 0;
}

body.has-site-chrome .container:has(> .portal-dashboard-card:not(.hidden)) {
  max-width: var(--chrome-shell);
}

body.has-site-chrome .portal-dashboard-card {
  position: relative;
  left: auto;
  transform: none;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/*
 * !important because the portal asserts `top: 0` from a rule of equal
 * specificity, and the two are otherwise decided by source order alone -
 * too fragile a thing to rest a frozen header on.
 */
body.has-site-chrome .portal-sidebar {
  top: var(--chrome-header-h) !important;
  z-index: 40;
}

/*
 * Where the portal renders the sidebar as a full-height column it sets
 * `height: 100vh`, which now has to exclude the header or the bottom of
 * the column falls off the screen.
 *
 * Guarded on `height: 100vh` rather than on a breakpoint. An earlier
 * version keyed this to min-width: 701px and stretched the *horizontal*
 * navigation bar to 1198px, because the column layout does not in fact
 * begin at that width. Matching the declaration itself cannot drift.
 */
body.has-site-chrome .portal-sidebar {
  max-height: calc(100vh - var(--chrome-header-h));
}

/* The portal's own footer strip is removed by the splitter; this catches
   any variant the pattern missed. */
body.has-site-chrome .page .footer { display: none !important; }

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */

@media (max-width: 860px) {
  /*
   * The header stops being sticky here, so the portal's navigation bar
   * has no header to sit below and goes back to the top of the viewport.
   */
  :root { --chrome-header-h: 0px; }

  .site-header { position: relative; }
  .site-header .nav-toggle { display: block; }

  .site-header .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 16px 18px;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--chrome-shadow);
  }

  .site-header .site-nav.open { display: flex; }
  .site-header .site-nav a { padding: 12px 14px; }
  .site-header .member-link { text-align: center; margin-top: 6px; }

  /* The account chip stays in the bar, outside the disclosure panel, so
     signing out never requires opening the menu first. */
  .site-header .account-name { display: none; }
  .site-header .account-trigger { padding: 6px; border-radius: 999px; }
}


/* ---------------------------------------------------------------
 * Portal palette
 *
 * The portal's stylesheets are a verbatim extract from the Apps Script
 * original and define --teal, --gold and the rest in their own :root.
 * Redefining them on the portal's body class recolours the whole portal
 * to match the site without touching those files - which is what keeps
 * them safe to regenerate from the source.
 * ------------------------------------------------------------- */

body.has-site-chrome {
  --teal: #21211f;
  --teal-dark: #000000;
  --teal-soft: #eceae7;
  --gold: #f73c4a;
  --cream: #f5f4f2;
  --border: #e2dfdb;
}


/* ---------------------------------------------------------------
 * Portal typography
 *
 * The portal's stylesheets set Georgia directly in eight places rather
 * than through a token, so the palette override above cannot reach them
 * - which left the portal in a serif while the site had moved to the
 * sans face ag.org uses.
 *
 * Scoped to the portal's body class, so no other page is touched, and
 * the portal's own files stay a verbatim extract.
 * ------------------------------------------------------------- */

body.has-site-chrome,
body.has-site-chrome .brand h1,
body.has-site-chrome h1,
body.has-site-chrome h2,
body.has-site-chrome h3,
body.has-site-chrome .card-title,
body.has-site-chrome .portal-header,
body.has-site-chrome .portal-hero-title {
  font-family: Inter, 'Helvetica Neue', Arial, sans-serif;
}

/* The page title follows the site's display style. */
body.has-site-chrome .brand h1 {
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0;
}