/* accessibility.css — the /accessibility/ page.

   Authored, like ssw.css and legal-pages.css. The page's header,
   navigation and footer are the site's own, transplanted whole by
   tools/build-accessibility-page.mjs, so this styles ONLY the content
   between them.

   NOTHING HERE IS INVENTED. Every value is one the site already uses,
   and says where it came from:

     heading band     legal-pages.css — the flattened grey band the
                      privacy, cookie and terms pages use instead of a
                      544px photograph hero (owner's decision, 11 Aug 2026)
     h1               the kit's own h1: Brandon 900, uppercase, 60/46/30px
     h2               the kit's h3 typography token (53fe9af): Brandon 900,
                      uppercase, 1.5px tracking, 36/26/24px. The kit's h2 is
                      48px and this page has thirteen of them; legal-pages.css
                      made the same call for the same reason
     h3               the sub-heading treatment from ssw.css: Brandon 900,
                      uppercase, 1.1px tracking, 1.05rem, hairline rule
     body             the kit's text token: ff-meta-serif 500, 20/18/16px
     lead paragraph   24px — the accommodation page's lead treatment
                      (docs/SITE-LAYOUT.md)
     measure          34em ≈ 68 characters — legal-pages.css
     label            12px / 900 / 1.1px / uppercase — ninja-match-gravity.css
     link colour      the kit's own: --e-global-color-primary #CA4D2A,
                      4.56:1 on white, so it passes AA as text — checked, not
                      assumed. The kit's HOVER colour (#E77D41) is 2.8:1 and
                      is overridden below; the hover signal is a heavier
                      underline instead
     focus ring       3px --e-global-color-primary, 2px offset — ssw.css
     containers       1155px, side padding 60/40/20px — docs/SITE-LAYOUT.md

   Where this page departs from the site it says so in the rule. */

/* ---- the hero ----
   The site's content-page hero, as measured on the accommodation page
   (docs/SITE-LAYOUT.md): 544px tall, 400 at the tablet breakpoint, 300 on
   a phone; the photograph as `cover`; a 90deg #263238E0 -> transparent
   gradient for legibility; white h1. The h1 sits about a quarter of the
   way down (Day Visits: 134px of 544 = 25%), inside the 1155px container
   with the site's 60/40/20px side padding.

   AN <img> with object-fit rather than a CSS background, as the Seva &
   Satsang page does, so it can carry alt, width/height, srcset and
   fetchpriority. The gradient is a plain alpha gradient, not
   mix-blend-mode: multiply — over an <img> child multiply blacks the
   picture out (the trap recorded in SITE-LAYOUT.md); the visible result
   is the same.

   ONE DEPARTURE, stated: the site's heroes use `background-position: top
   center`. With `cover` at 544px on a wide screen that shows only the top
   40% of this photograph — sky and far hills — and cuts the ashram off.
   The temples sit between 57% and 85% of the frame, so the focal point is
   set at 72% down; on a phone the crop becomes side-to-side and the
   temples stay centred. Checked at 1280px and 375px. */
.sv-access-hero {
  position: relative;
  height: 544px;
  overflow: hidden;
  background-color: var(--e-global-color-text, #263238);
}
.sv-access-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
}
/* THE GRADIENT IS DIAGONAL (15 September 2026, evening). The heading
   now sits at the bottom left, so the dark is put there and nowhere
   else: darkest in the bottom-left corner, clear by the top right so the
   sky shows through. Six stops rather than two so nothing bands across
   the sky. The colour is the site's #263238, as on every other hero.

   CONTRAST WAS MEASURED, NOT ASSUMED: the rendered pixels behind the
   heading were sampled (photograph composited with this gradient) at
   1280, 1024 and 375px; the worst pixel under the text was above 4.5:1
   at each — the numbers are in reports/PROJECT-STATUS.md. The bottom-left
   of the frame is the dark wooded slope, which is what makes a light
   top-right affordable. */
.sv-access-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  /* The 36% and 54% stops were .58 and .34 in the first pass; the worst
     pixel under the last letters of the heading (a glint on the pond, at
     about a third of the way along the gradient) came out at 4.3:1 on a
     phone and 4.36:1 on desktop. Raised to .68 and .40 — the middle of
     the picture is a touch darker, the top right is untouched. */
  background-image: linear-gradient(to top right,
    rgba(38, 50, 56, .92) 0%,
    rgba(38, 50, 56, .82) 18%,
    rgba(38, 50, 56, .68) 36%,
    rgba(38, 50, 56, .40) 54%,
    rgba(38, 50, 56, .16) 72%,
    rgba(38, 50, 56, .04) 86%,
    rgba(38, 50, 56, 0) 100%);
  pointer-events: none;
}
/* THE HEADING SITS LOW: anchored to the bottom of the hero, with
   breathing room beneath it that scales with the hero — 18% of its
   height, so 96 / 72 / 54px at 544 / 400 / 300. That puts the baseline
   at roughly 80% of the way down at every breakpoint, in the bottom
   third, and it cannot drift as the heading wraps because the anchor is
   the bottom edge, not the top. */
.sv-access-hero-inner {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 0 60px 96px;
}
.sv-access-hero-box { max-width: 1155px; margin: 0 auto; }
.sv-access-hero h1 { margin: 0; color: var(--e-global-color-9eba703, #fff); }
@media (max-width: 1024px) {
  .sv-access-hero { height: 400px; }
  .sv-access-hero-inner { padding: 0 40px 72px; }
}
@media (max-width: 767px) {
  .sv-access-hero { height: 300px; }
  .sv-access-hero-inner { padding: 0 20px 54px; }
}

/* ---- the reading column ----
   The 1155px container with the site's side padding, and inside it a
   34em measure on every text element, left-aligned — exactly how the
   privacy policy sits on the page. 34em of 20px serif is about 68
   characters a line. */
.sv-access {
  max-width: 1155px;
  margin: 0 auto;
  padding: 2.5rem 60px 5rem;
}
@media (max-width: 60rem) { .sv-access { padding: 2rem 40px 4rem; } }
@media (max-width: 40rem) { .sv-access { padding: 1.5rem 20px 3rem; } }

.sv-access p,
.sv-access ul,
.sv-access h2,
.sv-access h3 { max-width: 34em; }

.sv-access p,
.sv-access li {
  font-family: var(--e-global-typography-text-font-family, ff-meta-serif-web-pro), serif;
  font-weight: var(--e-global-typography-text-font-weight, 500);
  font-size: var(--e-global-typography-text-font-size, 20px);
  line-height: 1.6;
  color: var(--e-global-color-text, #263238);
}
.sv-access p { margin: 0 0 1.15em; }
.sv-access ul { margin: 0 0 1.4em; padding-left: 1.4em; }
.sv-access li { margin: 0 0 .55em; }

/* The opening line, at the accommodation page's lead size. */
.sv-access p.sv-access-lead {
  font-size: 24px;
  line-height: 1.5;
  margin-bottom: 1em;
}
@media (max-width: 767px) { .sv-access p.sv-access-lead { font-size: 20px; } }

/* ---- headings ----
   h2 takes the kit's h3 token so it picks up the kit's own responsive
   sizes (36 / 26 / 24px) without restating them. The gap ABOVE an h2 is
   the page's section spacing: generous, because a reader is scanning
   for the one section that applies to them. */
.sv-access h2 {
  font-family: var(--e-global-typography-53fe9af-font-family, brandon-grotesque), sans-serif;
  font-size: var(--e-global-typography-53fe9af-font-size, 36px);
  font-weight: var(--e-global-typography-53fe9af-font-weight, 900);
  line-height: var(--e-global-typography-53fe9af-line-height, 40px);
  letter-spacing: var(--e-global-typography-53fe9af-letter-spacing, 1.5px);
  text-transform: uppercase;
  color: var(--e-global-color-text, #263238);
  margin: 3.5rem 0 1rem;
}
.sv-access-intro + .sv-access-toc + .sv-access-section h2 { margin-top: 3rem; }

.sv-access h3 {
  font-family: var(--e-global-typography-primary-font-family, brandon-grotesque), sans-serif;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--e-global-color-text, #263238);
  margin: 2.5rem 0 .9rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid rgba(38, 50, 56, .12);
}

/* A jumped-to heading should not land hard against the top edge, and
   must clear the header if it is ever made sticky. */
.sv-access h2, .sv-access h3 { scroll-margin-top: 1.5rem; }

@media (max-width: 40rem) {
  .sv-access h2 { margin-top: 2.75rem; }
  .sv-access h3 { margin-top: 2rem; }
}

/* ---- "On this page" ----
   The site has no table-of-contents pattern, so this is its body list
   under its 12px label.

   BELOW 1024px: a plain list at the top of the content, in normal flow,
   NOT sticky. Two columns where there is room, so twelve entries do not
   push the first section below the fold. This is also what a reader at
   200% zoom on an ordinary laptop gets (a 1280px window is 640 CSS px at
   200%), so nothing can sit over the content it links to at that zoom. */
.sv-access-toc {
  margin: 0 0 1rem;
  padding: 1.5rem 0 1.75rem;
  border-top: 1px solid rgba(38, 50, 56, .12);
  border-bottom: 1px solid rgba(38, 50, 56, .12);
  max-width: 34em;
}
.sv-access p.sv-access-toc-heading {
  font-family: var(--e-global-typography-primary-font-family, brandon-grotesque), sans-serif;
  font-weight: 900;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin: 0 0 .75rem;
}
.sv-access-toc ul { margin: 0; padding-left: 1.2em; }
.sv-access-toc li { margin: 0 0 .35em; break-inside: avoid; }
@media (min-width: 40rem) and (max-width: 1023.98px) {
  .sv-access-toc ul { column-count: 2; column-gap: 2rem; }
}

/* FROM 1024px: A STICKY CONTENTS SIDEBAR in the right-hand margin.

   The 1155px container already holds a 34em (680px) reading column on
   the left with the rest of the width empty — the same shape as the
   privacy policy. The sidebar takes that empty margin: a two-column
   grid, the intro and body in the first column, the list in the second,
   spanning both rows, stuck 2rem from the top of the window.

   IT CAN NEVER COVER THE CONTENT IT LINKS TO: it is a separate grid
   column, not an overlay. And it can never be taller than the window: a
   max-height with its own scrollbar, for a 200% zoom on a large screen
   (1280 CSS px wide but only ~450 tall) where twelve entries would
   otherwise run off the bottom.

   The site header is not sticky (position: static, measured), so the
   1.5rem scroll-margin on the headings is breathing room, not clearance.
   Smooth scrolling is the site's own (Elementor gates html
   {scroll-behavior: smooth} on prefers-reduced-motion: no-preference)
   and nothing is added here. */
@media (min-width: 1024px) {
  .sv-access {
    display: grid;
    grid-template-columns: minmax(0, 34em) minmax(12rem, 16rem);
    grid-template-rows: auto 1fr;
    column-gap: 4rem;
    align-items: start;
  }
  .sv-access-intro { grid-column: 1; grid-row: 1; }
  .sv-access-body  { grid-column: 1; grid-row: 2; }
  .sv-access-toc {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    margin: .35rem 0 0;
    padding: 0 0 0 1.25rem;
    border-top: 0;
    border-bottom: 0;
    border-left: 1px solid rgba(38, 50, 56, .12);
    max-width: none;
  }
  .sv-access-toc ul { list-style: none; padding-left: 0; column-count: auto; }
  .sv-access-toc li { margin: 0; }
  .sv-access-toc a {
    display: block;
    padding: .3rem 0 .3rem .75rem;
    margin-left: -1.25rem;
    padding-left: calc(1.25rem + .75rem);
    border-left: 3px solid transparent;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.4;
    color: var(--e-global-color-text, #263238);
  }
  .sv-access-toc a:hover,
  .sv-access-toc a:focus { text-decoration: underline; color: var(--e-global-color-primary, #CA4D2A); }
  /* The section in view: the brand orange as a rule beside it, and bold.
     Set by accessibility.js; without the script the list is plain. */
  .sv-access-toc a[aria-current="true"] {
    border-left-color: var(--e-global-color-primary, #CA4D2A);
    font-weight: 700;
    color: var(--e-global-color-text, #263238);
  }
  .sv-access-toc a:focus-visible { outline-offset: -3px; }
}

/* ---- links ----
   Colour is the kit's (orange, 4.56:1 on white). .page-content a is
   already underlined by the theme, so a link is never colour alone.
   Hover keeps the SAME colour — the kit's lighter hover orange is 2.8:1
   on white, which fails AA — and signals with a heavier underline.
   Focus is the ring ssw.css already uses. */
.sv-access a {
  color: var(--e-global-color-primary, #CA4D2A);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.sv-access a:hover,
.sv-access a:focus {
  color: var(--e-global-color-primary, #CA4D2A);
  text-decoration-thickness: 3px;
}
:focus-visible {
  outline: 3px solid var(--e-global-color-primary, #CA4D2A);
  outline-offset: 2px;
}
/* A phone number and an address should not break mid-way. */
.sv-access a[href^="tel:"], .sv-access a[href^="mailto:"] { white-space: nowrap; }

/* ---- the last line ---- */
.sv-access p.sv-access-reviewed {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(38, 50, 56, .12);
  font-size: .95rem;
  line-height: 1.55;
  /* rgba(38,50,56,.72) on white is #636B70, 5.4:1 — the small-print
     colour ssw.css uses, and it passes AA. */
  color: rgba(38, 50, 56, .72);
}