/* The Anglican News page (public/index.html, bead cca-olht), dressed as
   confessinganglicans.nz and measured against it at 1440px: header inset
   about 6vw (logo at x=86, nav ending at x=1354), main and footer content in a
   centred 1080px column (h1 at x=180), Montserrat, brand #85754d on white,
   thin grey rules, body text #717171. On a phone the gutters are 16px.

   Contrast: #85754d on white is 4.52:1, AA for normal text with almost no
   margin. So brand-coloured TEXT sits only on pure white and never at reduced
   opacity; normal-size brand text uses the logo fill #7d7150 (4.83:1), which
   looks the same. Only the large heading uses #85754d itself. Body grey
   #717171 is 4.81:1.

   The headlines widget keeps its own styles (widget.css, owned by its own
   tests). This page only re-themes it, and only under .site-main. It never
   touches the Try again or status-region margins and padding (they leave
   room for the focus ring), the dashed aria-disabled border, or the 3px
   focus rings.

   Navigation works without JavaScript: below 1100px it is a <details>
   "Menu" / "Close" button; from 1100px, in browsers that support
   ::details-content, the summary is hidden and the list is always shown, with
   dropdowns opened by :hover and :focus-within (the submenu links stay in the
   Tab order). A browser without ::details-content keeps the button at every
   width, which still works. */

:root {
  --cca-brand: #85754d;
  --cca-brand-text: #7d7150;
  --cca-brand-dark: #6b5e3d;
  --cca-text: #717171;
  --cca-strong-text: #3a3a3a;
  --cca-rule: #e2e2e2;
  --cca-field: #8a8a8a;
  --cca-column: 1080px;
  --cca-gutter: clamp(16px, 4vw, 60px);
  /* Below 1100px the header aligns with the content column. */
  --cca-header-gutter: var(--cca-gutter);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: #fff;
  color: var(--cca-text);
  font-family:
    'Montserrat',
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    Arial,
    sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--cca-brand-text);
}
a:hover {
  color: var(--cca-brand-dark);
}

/* One visible focus ring for every link and control: brand on white
   (non-text contrast 4.5:1, well past the 3:1 needed). */
:focus-visible {
  outline: 3px solid var(--cca-brand);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: #fff;
  color: var(--cca-brand-text);
  border: 2px solid var(--cca-brand);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  top: 16px;
}

/* The centred content column (main and footer): 1080px of content. */
.wrap {
  max-width: calc(var(--cca-column) + 2 * var(--cca-gutter));
  margin-inline: auto;
  padding-inline: var(--cca-gutter);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--cca-rule);
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--cca-header-gutter);
}
.site-logo {
  flex: 0 0 auto;
}
.site-logo img {
  width: 150px;
}

.site-menu {
  margin-left: auto;
}
.site-menu__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--cca-brand);
  color: var(--cca-brand-text);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.site-menu__toggle::-webkit-details-marker {
  display: none;
}
/* Three-bar icon, drawn in the text colour (decorative). */
.site-menu__toggle::before {
  content: '';
  width: 18px;
  height: 14px;
  border-block: 2px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}
/* The button names what it will do: "Menu" when closed, "Close" when open.
   display:none takes the hidden word out of the accessible name too. */
.site-menu__label-open {
  display: none;
}
.site-menu[open] .site-menu__label-open {
  display: inline;
}
.site-menu[open] .site-menu__label-closed {
  display: none;
}
/* Open: the three bars become a cross. */
.site-menu[open] .site-menu__toggle::before {
  height: 18px;
  border: 0;
  background:
    linear-gradient(45deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%);
}

/* The open phone menu: a full-width panel that starts BELOW the header's
   bottom rule (the +1px), so the rule stays visible. */
.site-menu[open] .site-nav {
  position: absolute;
  top: calc(100% + 1px);
  right: 0;
  left: 0;
  z-index: 20;
  padding: 0.5rem var(--cca-header-gutter) 1rem;
  background: #fff;
  border-bottom: 1px solid var(--cca-rule);
  box-shadow: 0 8px 16px rgb(0 0 0 / 8%);
}

.site-nav__list,
.site-nav__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: block;
  padding: 0.625rem 0;
  color: var(--cca-brand-text);
  font-size: 1.0625rem;
  font-weight: 400;
  text-decoration: none;
}
.site-nav a:hover {
  color: var(--cca-brand-dark);
  text-decoration: underline;
}
.site-nav__item + .site-nav__item {
  border-top: 1px solid var(--cca-rule);
}
.site-nav__sub {
  padding-left: 1rem;
}
.site-nav__sub a {
  padding-block: 0.4rem;
}

@media (min-width: 768px) {
  .site-logo img {
    width: 200px;
  }
}

/* The full navigation needs about 670px beside a 220px logo at 17px, so it
   appears from 1100px; narrower screens keep the Menu button. */
@media (min-width: 1100px) {
  @supports selector(::details-content) {
    .site-menu > .site-menu__toggle {
      display: none;
    }
    /* Always show the navigation on desktop, open or not. */
    .site-menu::details-content {
      content-visibility: visible;
    }
    .site-menu[open] .site-nav {
      position: static;
      padding: 0;
      background: none;
      border: 0;
      box-shadow: none;
    }

    .site-nav__list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-end;
      row-gap: 0.5rem;
    }
    .site-nav__item {
      position: relative;
    }
    /* Short brand-colour bars between the items, as on the main site: one
       crisp 1px column, so whole-pixel offsets only (no translate, which
       blurred the bar over two columns). Each link has no inline padding;
       the bar sits 6px after the previous link and 10px before the next, so
       a focus ring (3px + 2px offset = 5px) stops 1px short of it either
       side. The link's line-height is fixed at 28px (+ 4px padding top and
       bottom = 36px) so the 18px bar centres at top: 9px exactly. */
    .site-nav__item + .site-nav__item {
      margin-left: 17px;
      border-top: 0;
    }
    .site-nav__item + .site-nav__item::before {
      content: '';
      position: absolute;
      top: 9px;
      left: -11px;
      width: 1px;
      height: 18px;
      background: var(--cca-brand);
    }
    .site-nav__item > a {
      padding: 4px 0;
      line-height: 28px;
      white-space: nowrap;
    }
    /* Down chevron on items with a submenu: small, a 2px stroke, tight to
       the text (decorative, drawn, no text). */
    .has-sub > a::after {
      content: '';
      display: inline-block;
      width: 0.4em;
      height: 0.4em;
      margin-left: 0.45em;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: translateY(-0.2em) rotate(45deg);
    }

    /* Dropdowns: hidden by opacity only, so their links stay focusable; Tab
       into one and :focus-within shows it. The inline padding keeps a
       focused link's ring inside the panel. */
    .site-nav__sub {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 20;
      min-width: 14rem;
      padding: 0.5rem;
      background: #fff;
      border: 1px solid var(--cca-rule);
      box-shadow: 0 8px 16px rgb(0 0 0 / 8%);
      opacity: 0;
      transform: translateY(-0.25rem);
      pointer-events: none;
      transition:
        opacity 0.15s ease,
        transform 0.15s ease;
    }
    .site-nav__item:hover > .site-nav__sub,
    .site-nav__item:focus-within > .site-nav__sub {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
    .site-nav__sub a {
      padding: 0.5rem 0.75rem;
      white-space: nowrap;
    }
  }
}

@media (min-width: 1100px) {
  /* The main site's wider header inset (logo at x=86 at 1440). Below 1100px
     the header shares the content gutter, so the logo lines up with the
     heading. */
  :root {
    --cca-header-gutter: clamp(16px, 6vw, 86px);
  }
  .site-header__inner {
    padding-block: 25px;
  }
  .site-logo img {
    width: 220px;
  }
}

/* ── Main ───────────────────────────────────────────────────────────────── */

.site-main {
  padding-block: clamp(1.5rem, 2.65vw, 38px) clamp(3rem, 6vw, 5rem);
  color: var(--cca-text);
}
/* The site's heading: 48px at desktop, tight tracking (-2px at 48px), in the
   brand colour (large text, and it clears 4.5:1 anyway). */
.page-title {
  margin: 0 0 1.5rem;
  color: var(--cca-brand);
  font-size: clamp(2.25rem, 1.75rem + 1.5vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.0416em;
  line-height: 1.125;
  overflow-wrap: anywhere;
}
.page-intro {
  margin: 0 0 2rem;
  color: var(--cca-text);
  font-size: 1.1875rem;
  line-height: 1.65;
}
/* Subheadings as on the main site ("North Island"): brand, regular, ~2.5rem.
   The page has none today; this keeps any future one on-style. */
.site-main h2 {
  margin: 2.5rem 0 1rem;
  color: var(--cca-brand);
  font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
}
/* Links in body text: brand text colour, underlined. */
.site-main p a {
  color: var(--cca-brand-text);
  text-decoration: underline;
}

/* ── The headlines widget, re-themed for this page (scoped to .site-main) ─ */

/* Full column width, aligned with the heading. */
.site-main .cca-news {
  max-width: none;
  margin-inline: 0;
}
/* The disclaimer as the main site's notice card: white, a thin brand border,
   dark grey text (11:1), the label in brand text colour. */
.site-main .cca-news__disclaimer {
  border: 1px solid var(--cca-brand);
  border-radius: 0;
  background: #fff;
  color: var(--cca-strong-text);
}
/* Bold names on the main site are bold GREY, never brand. */
.site-main .cca-news__disclaimer-label {
  color: inherit;
}
/* Headline titles as the site's card titles: brand, regular, larger. */
.site-main .cca-news__link {
  color: var(--cca-brand-text);
  font-size: 1.1875rem;
  font-weight: 400;
}
/* Full strength (no opacity) so #717171 keeps its 4.81:1. */
.site-main .cca-news__meta {
  color: var(--cca-text);
  opacity: 1;
}
/* Pause and Try again: brand text, and the widget's own 1px currentColor
   border follows it; square-ish corners like the site's Search button.
   Colour and corners only. */
.site-main .cca-news__toggle,
.site-main .cca-news__retry {
  color: var(--cca-brand-text);
  border-radius: 2px;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--cca-rule);
}
/* 1068px inside the 1080px column, as on the main site (x 186 to 1254). */
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  max-width: 1068px;
  margin-inline: auto;
  padding-block: 1.5rem 2rem;
}
.site-footer__logo img {
  width: 220px;
}
.site-footer__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  min-width: 0;
}
.site-footer__legal {
  margin: 0;
  color: var(--cca-brand-text);
  font-size: 1rem;
  text-align: right;
  overflow-wrap: anywhere;
}
.site-footer__sep {
  margin-inline: 0.5rem;
}

.site-search {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* As wide as the legal line above it (the meta column's width). */
  width: 100%;
}
/* A short field and a tall button, as on the main site. The field's border is
   #8a8a8a (3.4:1) rather than the site's #cacaca (1.6:1): a field's edge must
   reach 3:1 (WCAG 1.4.11). */
.site-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 0.75rem;
  border: 1px solid var(--cca-field);
  border-radius: 0;
  background: #fff;
  color: #0a0a0a;
  font: inherit;
  font-size: 1rem;
}
.site-search input::placeholder {
  color: var(--cca-text);
  opacity: 1;
}
/* White on #85754d is 4.52:1 (AA); bold uppercase, as on the main site. */
.site-search button {
  flex: 0 0 auto;
  height: 59px;
  padding: 0 1.5rem;
  border: 1px solid var(--cca-brand);
  border-radius: 0;
  background: var(--cca-brand);
  color: #fff;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.033em;
  text-transform: uppercase;
  cursor: pointer;
}
.site-search button:hover {
  background: var(--cca-brand-dark);
  border-color: var(--cca-brand-dark);
}

@media (max-width: 768px) {
  .site-footer__logo img {
    width: 180px;
  }
  .site-footer__meta {
    align-items: stretch;
    width: 100%;
  }
  .site-footer__legal {
    text-align: left;
  }
  .site-search {
    width: 100%;
  }
}

/* Narrow phones: the legal line would wrap and leave the "|" dangling, so the
   separator goes and the email takes its own line. */
@media (max-width: 600px) {
  .site-footer__sep {
    display: none;
  }
  .site-footer__legal a {
    display: block;
  }
}

@media (max-width: 360px) {
  .site-logo img {
    width: 130px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav__sub {
    transition: none;
  }
}