/*
 * The main site (the site/ web folder), on top of site.css, which
 * has the header, the phone cord, and the footer that this site shares
 * with the Alerts site.
 *
 * The page frame (site_head.php and site_foot.php), by width:
 *   wide (1024px and up)  the menu on the left, the page in the middle, and the
 *                         Relay a Message box on the right; the side columns
 *                         stay in place and scroll on their own
 *   medium (760px up)     the page and the box side by side, with the menu
 *                         behind the Menu button, opening above them
 *   phones                the header with the Menu button, the page, the box
 *                         close after it, and the menu (no strip above
 *                         the header, which only led down to the box)
 * The cord from the header bends down at the right-hand end and wraps the
 * box, which is this site's flourish.
 *
 * Kept to what old Android and TV browsers understand where it matters: the
 * phone layout is plain flexbox, and solid colors stand in where site.css
 * mixes them.
 *
 * Classes the wiki fills (see the "Contract as built" notes in site_head.php):
 *   .vs-side > .vs-side-inner   the left column, with the sideNav HTML
 *   .vs-sidenav, .vs-sidenav-list, .vs-sidenav-link   the menu built from the
 *                               site's links when no sideNav is given
 *   .vs-pagebar, .vs-crumbs, .vs-tools   breadcrumbs and the page tools row
 */

/* Older browsers cannot mix colors (site.css uses color-mix): solid shades of VOICE teal instead. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root { --brand-deep: #1f5d5b; --brand-tint: #e8f1f0; --brand-line: #b3d1cf; }
}
/* A deep shade of the brand color for white words on it (the Call button), the same in dark mode. */
:root { --vs-solid: #1f5d5b; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root { --vs-solid: color-mix(in srgb, var(--brand) 72%, #000); }
}

.voice-site { font-size: 1.125rem; line-height: 1.6; }

/* ---------- Header (the shared one, from site.css) ---------- */
/* The Menu button opens the left-hand menu where it is not beside the page. */
.vs-menu-btn { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: 0 1em; border: 1.5px solid var(--brand-line); border-radius: 999px; font-family: var(--display); font-weight: 600; color: var(--brand-deep); background: var(--card); text-decoration: none; white-space: nowrap; }
.vs-menu-btn svg { width: 1.2em; height: 1.2em; }
.vs-menu-btn[aria-expanded="true"] { background: var(--brand-tint); }
/* A branch of the cord comes down into the box where the box sits at the top right. */
.brand-site .cord-drop { display: none; }
@media (min-width: 760px) { .brand-site .cord-is-drop .cord-drop { display: block; } }
@media (min-width: 1024px) { .vs-menu-btn { display: none; } }
@media (max-width: 639px) { .vs-menu-btn { min-height: 40px; padding: 0 .65em; gap: .3em; font-size: .95rem; } }

/* ---------- The Relay a Message box (site_panel.php) ---------- */
/* The form first, then the message line as the other way, then one explanation with Learn More. */
.vs-panel { background: var(--card); border: 2px solid var(--brand-line); border-radius: 18px; padding: 1.1rem 1.2rem 1.25rem; box-shadow: var(--shadow); }
.vs-panel > h2 { margin: 0 0 .8rem; font-size: 1.3rem; color: var(--brand-deep); }
.vs-or { display: flex; align-items: center; gap: .7em; margin: 1.1rem 0 .7rem; font-size: .95rem; color: var(--ink-soft); }
.vs-or::before, .vs-or::after { content: ""; flex: 1 1 0; border-top: 1px solid var(--line); }
.vs-send-about { margin: 1rem 0 .9rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.vs-call { width: 100%; justify-content: center; min-height: 52px; font-size: 1.15rem; background: #1f5d5b; background: var(--vs-solid); border-color: transparent; }
/* The words may wrap, between Call and the number, but the number itself never breaks, so with Larger Text, in
   Spanish, or on the smallest phones the whole number always shows (nowrap on the button cut off its last
   digits). */
.vs-call { white-space: normal; text-align: center; line-height: 1.25; padding-left: .8em; padding-right: .8em; }
.vs-call > span { min-width: 0; }
.vs-call .nowrap { white-space: nowrap; }
.vs-call .nowrap { letter-spacing: .01em; }
/* The box is narrower between 760 and 1199 pixels, so the number stays on one line at a smaller size. */
@media (min-width: 760px) and (max-width: 1199px) { .vs-call { font-size: 1.02rem; padding-left: .7em; padding-right: .7em; gap: .35em; } }
/* The message form inside the box (RelayForm::compact(), templates/compact.php in the Switchboard). */
.sx-form .field { margin-bottom: .8rem; }
.sx-form label { font-size: 1rem; }
.sx-form textarea { min-height: 7.5em; }
.sx-form .help { font-size: .93rem; line-height: 1.45; }
.sx-form .check span { font-size: 1rem; }
.sx-more { margin: 0 0 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); }
/* The summary is a block with its mark at the right, so its words wrap as one line of text with Larger
   Text, and "(Optional)" never splits from its parenthesis. */
.sx-more > summary { display: block; position: relative; min-height: 44px; padding: .55rem 2.4rem .55rem .8rem; cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--brand-deep); list-style: none; }
.sx-more > summary::-webkit-details-marker { display: none; }
.sx-more > summary::after { content: "+"; content: "+" / ""; position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); font-size: 1.35rem; line-height: 1; }
.sx-more[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.sx-more[open] > summary { border-bottom: 1px solid var(--line); }
.sx-more > .field, .sx-more > .check, .sx-more > .help { margin-left: .8rem; margin-right: .8rem; }
.sx-more > .field:first-of-type { margin-top: .8rem; }
.sx-more > .help:last-child { margin-bottom: .8rem; }
/* The box's Sender and Intended Recipient groups: inset like the fields around them. */
.sx-more > .sx-group { margin: .8rem .8rem 0; }
.sx-more .sx-legend { margin: 0 0 .5rem; }
.sx-optional { font-weight: 400; color: var(--ink-soft); white-space: nowrap; }
.sx-send { width: 100%; justify-content: center; min-height: 50px; }
/* The field that people never see, which spam programs fill in. */
.sx-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- The frame ---------- */
/* Phones: one column, the page first, then the box. Without JavaScript the
   menu follows the box, and the Menu button (a link to it) jumps there; with
   it, the button opens the menu at the top of the page. */
.vs-layout { display: flex; flex-direction: column; padding-bottom: 2.5rem; }
.vs-main { order: 1; min-width: 0; padding-top: 1.4rem; }
.vs-panel-col { order: 2; margin-top: 1.6rem; }
.vs-side { order: 3; margin-top: 2.2rem; }
.js-menu .vs-side { display: none; }
.js-menu .vs-side.is-open { display: block; order: 0; margin: 1rem 0 0; }
.vs-side-inner { min-width: 0; }

/* Medium: the page and the box side by side. The box starts level with the page's first line, the same distance
   below the cord as the page and the menu. */
@media (min-width: 760px) {
  .vs-layout { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  /* The page keeps a basis of its own, so the opened menu (a full row) wraps above it instead of squeezing it to nothing. */
  .vs-main { flex: 1 1 240px; }
  .vs-panel-col { -webkit-flex: 0 0 290px; flex: 0 0 290px; margin: 1.4rem 0 0 1.6rem; align-self: flex-start; padding: 0 0 1rem 4px; }
  .vs-side { flex: 0 0 100%; }
  .js-menu .vs-side.is-open { order: 0; flex-basis: 100%; margin: 1.2rem 0 0; }
  .vs-no-panel .vs-main { padding-top: 0; }
  .vs-no-panel .vs-main > .vs-pagebar:first-child { padding-top: 1.4rem; }
}
/* Beside the page (760 pixels and wider), the box keeps its own height and stays in view while the page scrolls
   (stretched to the column, it could leave up to 781 pixels of empty box). A box that fits in the window stays 12
   pixels from its top. A taller one, such as the box with the message form, scrolls with the page until its foot is
   in view and then stays there, so none of it is ever out of reach: common.js sets --stick-top to the window's
   height less the box's. On phones the box sits in the flow. */
@media (min-width: 760px) {
  .vs-panel-col.vs-stick { position: -webkit-sticky; position: sticky; top: var(--stick-top, 12px); }
}
/* Wide: three columns, each side column in place with its own scroll. */
@media (min-width: 1024px) {
  .vs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "main panel"; column-gap: 1.8rem; }
  .vs-has-side .vs-layout { grid-template-columns: 210px minmax(0, 1fr) 300px; grid-template-areas: "side main panel"; }
  .vs-no-panel .vs-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main"; }
  .vs-has-side.vs-no-panel .vs-layout { grid-template-columns: 210px minmax(0, 1fr); grid-template-areas: "side main"; }
  .vs-main { grid-area: main; }
  .vs-panel-col { grid-area: panel; margin: 1.4rem 0 0; align-self: start; }
  .vs-side, .js-menu .vs-side { grid-area: side; display: block; margin: 0 0 0 -4px; padding: 1.4rem 4px 1.4rem 4px; align-self: start; position: -webkit-sticky; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; }
}
@media (min-width: 1200px) {
  .vs-layout { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 2rem; }
  .vs-has-side .vs-layout { grid-template-columns: 240px minmax(0, 1fr) 340px; }
  .vs-has-side.vs-no-panel .vs-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .vs-panel { padding: 1.2rem 1.35rem 1.35rem; }
}
/* Larger Text: a wider menu column, so the menu's words and the search field keep their room. */
@media (min-width: 1200px) {
  .a11y-large .vs-has-side .vs-layout { grid-template-columns: 290px minmax(0, 1fr) 340px; }
  .a11y-large .vs-has-side.vs-no-panel .vs-layout { grid-template-columns: 290px minmax(0, 1fr); }
}
/* A wrap at the top of a page with no box keeps its distance from what follows. */
.vs-main > .cord-wrap { margin-bottom: 1.8rem; }
/* Where no cord comes down into a wrap (phones), it ends free on both sides. */
@media (max-width: 759px) { .voice-site .cord-wrap .cord-end-r { display: block; } }

/* ---------- The left-hand menu built from the site's links (until the wiki gives its own) ---------- */
.vs-sidenav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vs-sidenav-list li + li { margin-top: 0; }
.vs-sidenav-link { display: flex; align-items: center; gap: .55em; min-height: 44px; padding: .4em .8em; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 1rem; }
.vs-sidenav-link:hover { background: var(--sunk); }
.vs-sidenav-link[aria-current="page"] { background: var(--brand-tint); color: var(--brand-deep); box-shadow: inset 3px 0 0 var(--brand); }
@media (max-width: 1023px) {
  .vs-side.is-open { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: .5rem; box-shadow: 0 8px 28px rgba(27, 38, 38, .12); }
}

/* ---------- Breadcrumbs and the page's tools ---------- */
.vs-pagebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin: 0 0 1rem; }
.vs-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .5rem; font-size: .95rem; color: var(--ink-soft); }
.vs-crumbs li + li { margin-top: 0; }
.vs-crumbs li + li::before { content: "\203A"; content: "\203A" / ""; margin-right: .5rem; color: var(--ink-faint); }
.vs-crumbs a { color: var(--ink-soft); }
.vs-crumbs [aria-current="page"] { color: var(--ink); }
.vs-tools { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------- Reading ---------- */
.vs-prose { max-width: 42rem; }
.vs-prose h1 { margin-top: .2rem; }
.vs-prose h2 { margin-top: 2.2rem; font-size: 1.45rem; color: var(--brand-deep); }
.vs-prose h3 { margin-top: 1.6rem; font-size: 1.2rem; }
.vs-prose h4 { margin-top: 1.3rem; font-size: 1.05rem; }
.vs-prose > :first-child { margin-top: 0; }
.vs-prose li + li { margin-top: .4em; }
.vs-prose a { font-weight: 600; }
.lead { font-size: 1.22rem; color: var(--ink-soft); line-height: 1.5; }
.vs-intro { margin: 0 0 1.6rem; }
.vs-intro .lead { max-width: 36em; }
/* The front page's own words while the wiki is off (Settings > Appearance > Main Site, Front Page), set as the wiki's
   front page sets its opening. */
.vs-intro-hidden { margin: 0; }
.vs-front-text { max-width: 40em; font-size: 1.12rem; line-height: 1.6; }
.vs-front-text p { margin: 0 0 1em; }

/* ---------- The front page (the wiki's templates/front.php) ---------- */
/* The start page's words, directly under the header: the opening sentences a
   little larger, and the rest behind the wiki's Read More fold (wiki.css). */
.vs-front-intro { margin: .2rem 0 1rem; }
.vs-front-intro > p:first-child { font-size: 1.24rem; line-height: 1.5; color: var(--ink); }

/* ---------- Footer (the shared design in site.css) ---------- */
.vs-foot { margin-top: 1rem; }

@media print {
  .a11y-bar, .util-strip, .vs-panel-col, .vs-side, .site-nav, .vs-menu-btn, .vs-tools, .skip, .wiki-search { display: none !important; }
  .vs-layout { display: block; padding: 0; }
  .vs-main { padding-top: 0; }
}

/* A menu that scrolls on its own (the wiki's): when there is more above or below, its edge fades
   into the page, so the words that run on show there is more. common.js and admin.js mark which edges have more. */
[data-scroll-fade].fade-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); }
[data-scroll-fade].fade-above { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 56px); mask-image: linear-gradient(to bottom, transparent, #000 56px); }
[data-scroll-fade].fade-above.fade-below { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
[data-scroll-fade] { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }