/* =========================================================================
   THE COMMERCIAL SEGMENT PAGES. Task P155-#52.

   /custom-socks-for-schools, /custom-socks-for-clubs,
   /custom-socks-for-universities, /custom-socks-for-fundraising,
   /how-it-works and /how-it-works/pricing.

   These pages borrow the blog post's prose column wholesale — blog.css is
   linked before this file and does all the real typographic work on
   .post-body. What is here is only the handful of things a landing page has
   that an article does not: the standfirst under the h1, the block of six
   facts, the FAQ items and the closing call to action.

   NO NEW COLOURS, NO NEW TYPE. Every value below is a variable out of
   brand.css. The flatness rule from site.css holds: no gradient, no shadow,
   no border-radius anywhere in this file.
   ========================================================================= */

/* The prose measure. Same reasoning as privacy.html's .legal: a commercial
   page that is hard to read is a commercial page nobody finishes. Task
   P155-#64 moved these pages onto the shared .sec/.sec-in section patterns in
   site.css, which carry their own measures per shape; this is kept because
   blog.html and the built pages still use it. */
.seg { max-width: 780px; }

.seg-lede {
    font: 400 20px/1.6 var(--body);
    color: var(--ink-soft);
    margin: 16px 0 0;
    max-width: 62ch;
}

/* =========================================================================
   THE SIX FACTS.

   This block is the reason task P155-#52 exists at all - see section 5.6 of
   app/SEO-STRATEGY.md. It is deliberately SIX SEPARATE PARAGRAPHS of running
   text rather than a table, a list or a row of stat cards: each one has to
   survive being lifted out of the page on its own and still say who it is
   about, which a table cell does not. It carries no image, no icon and no
   JavaScript.

   IT IS NOW ONE OF THE SHARED SECTION PATTERNS. Task P155-#64 moved it out of
   the single prose column into a `.sec.p-panel` of its own, so what was a grey
   inset inside a wall of text is now a full-width break in the page with the
   panel sitting on it. The ground and the rule come from the page's signature
   hue (--hue-tint / --hue-deep, declared in site.css) rather than from
   --paper-alt and --accent, which is what makes the schools page olive and the
   fundraising page peach while the shape stays identical.
   ========================================================================= */
.panel.facts h2 {
    margin: 0 0 .7em;
    font-size: clamp(20px, 2.4vw, 25px);
}
.panel.facts p {
    margin: 0 0 .85em;
    font-size: 17.5px;
    line-height: 1.6;
    color: var(--ink);
}
.panel.facts p:last-child { margin-bottom: 0; }

/* A short callout, for the one paragraph on a page that has to be read before
   the rest of it. The universities page uses it to say, above everything else,
   that the page is an offer and that no university is a client. */
.panel.callout p { margin: 0 0 1em; font-size: 17.5px; line-height: 1.6; color: var(--ink); }
.panel.callout p:last-child { margin-bottom: 0; }

/* =========================================================================
   THE FAQ. Each item is a <h3> question and its answers, with a rule between
   them, and it is the same markup the FAQPage structured data is generated
   from in tools/build-site.js — so a question that is on the page is in the
   schema and one that is not, is not. Do not change the shape of a .faq-item
   without changing faqFromHtml() in that file.
   ========================================================================= */
.post-body .faq-item { border-top: 1px solid var(--line); padding: 0; }
.post-body .faq-item:last-of-type { border-bottom: 1px solid var(--line); margin-bottom: 2em; }
.post-body .faq-item h3 { margin: 0; }

/* COLLAPSED BY DEFAULT, AND NATIVE. Task P155-#63. Toby: "Use collapsable
   lists when necessary." <details>/<summary> is the browser's own disclosure
   widget: it is focusable and operated by Enter or Space with no JavaScript at
   all, it exposes the right role and expanded state to a screen reader without
   an aria-expanded anybody has to remember to update, and - the part that
   matters for a site migrated off Wix for its search results - THE ANSWER IS
   IN THE SERVED HTML whether it is open or shut. Nothing here is injected on
   expand, so a crawler reads every answer on the page.

   THE MARKER IS OURS, NOT THE BROWSER'S. list-style on the summary kills the
   default triangle, which is a different shape in every browser and cannot be
   coloured; ::-webkit-details-marker does the same for older WebKit. The
   chevron below is drawn from two borders so it needs no image and no SVG. */
.post-body .faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 1.15em 2px;
    position: relative;
}
.post-body .faq-item summary::-webkit-details-marker { display: none; }
.post-body .faq-item summary::after {
    content: "";
    flex: none;
    margin-left: auto;
    align-self: center;
    width: 9px; height: 9px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .18s ease;
}
.post-body .faq-item[open] summary::after,
.post-body .faq-item summary[aria-expanded="true"]::after,
.post-body .faq-item details[open] summary::after {
    transform: translateY(2px) rotate(-135deg);
}
.post-body .faq-item summary:hover h3 { text-decoration: underline; }
/* A KEYBOARD USER MUST SEE WHERE THEY ARE. The browser's own focus ring is
   put back explicitly because list-style:none removes it in some engines. */
.post-body .faq-item summary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}
.post-body .faq-item details > p { margin: 0 0 1.1em; }
.post-body .faq-item details > p:first-of-type { margin-top: -.2em; }

/* THE JUMP LIST at the top of the FAQ page. Six section links, so a visitor
   who arrived for one question is one click from it rather than one scroll
   past five sections they did not come for. */
.post-body .faq-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0 0 2.4em;
    padding: 20px 22px;
    background: var(--paper-alt);
    border: 1px solid var(--line);
    /* A STACKING CONTEXT, AND IT IS LOAD-BEARING. The highlight below is a
       z-index:-1 pseudo-element on each link. Without a stacking context here
       that pseudo-element sorts behind this block's own background and is
       never seen; with one, it paints above the block and below the link's
       text, which is where a highlighter mark belongs. */
    position: relative;
    z-index: 0;
}
.post-body .faq-jump a {
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--line);
    padding-bottom: 2px;
    /* the ground for the highlight; it changes nothing at rest */
    position: relative;
}

/* THE HIGHLIGHT. Task P155-#81.

   Toby, 23 Sep 2026: "on the selection menu on FAQs the active underline is
   currently yellow (yay that looks awesome) could you make it so when its
   selected or hovered over its highlighted yellow instead of purple."

   SO THE RESTING STATE DOES NOT MOVE AT ALL — it is the state he praised. The
   hover was a black underline and the interactive furniture around it was the
   periwinkle; both are now a FILLED BLOCK of the page's own hue, which is what
   "highlighted yellow" asks for and what a recoloured underline is not.

   IT IS A PSEUDO-ELEMENT RATHER THAN A BACKGROUND ON THE LINK, and that is not
   decoration — it is the only way to get a highlight with air around the words
   without moving anything at rest. Padding on the link would widen the link's
   border box, and the resting 2px underline is drawn on that box: eight links
   would each grow a wider ochre rule and the row would re-wrap. The
   pseudo-element bleeds 6px past the box on each side and 2px down over the
   border, so the mark is a clean rectangle with breathing room and the link's
   own geometry is untouched to the pixel.

   IT IS WRITTEN AGAINST --hue, NEVER AGAINST --c-ochre. faq.html is the only
   page carrying this component today, and it is ochre, so ochre is what Toby
   will see. But the rule names the PAGE'S hue, so the same menu on an olive
   page highlights olive and on a cornflower page cornflower, with no per-page
   CSS and no second copy of this block. That is the whole of "please do the
   same for all the other similar pages" — see the note in site.css section 16,
   "THE FAQs: THE JUMP NAV", for what those pages turned out to be. */
.post-body .faq-jump a::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -6px; right: -6px; top: 0; bottom: -2px;
    background: transparent;
}
.post-body .faq-jump a:hover,
.post-body .faq-jump a:focus-visible,
.post-body .faq-jump a[aria-current] {
    /* THIS `background` IS THE LINE THAT ANSWERS TOBY'S "instead of purple",
       and it is worth saying why, because the periwinkle he saw was not coming
       from anything in this component. blog.css carries
       `.post-body a:hover { background: var(--accent) }` for links inside an
       ARTICLE, and faq.html wraps its jump menu in a `.post-body`, so every
       one of these six links has been highlighting in --accent #ab96ff on
       hover the whole time. That rule is right where it is and stays; this one
       out-specifies it for this component only. Declaring the fill here as
       well as on the ::before also means the LINK's own computed background is
       the hue, so nothing about the mark depends on reading a pseudo-element's
       paint order. */
    background: var(--hue);
    color: var(--hue-on);
    border-bottom-color: var(--hue);
}
.post-body .faq-jump a:hover::before,
.post-body .faq-jump a:focus-visible::before,
.post-body .faq-jump a[aria-current]::before { background: var(--hue); }

/* KEYBOARD FOCUS IS NOT JUST THE HOVER COLOUR. A focused link takes the same
   highlight — a keyboard user should get the same answer to "which one" that a
   mouse user gets — and then a black ring outside it, so focus and hover are
   two different things on the screen rather than one. The 8px offset puts the
   ring 2px clear of the 6px bleed instead of cutting through the mark. */
.post-body .faq-jump a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 8px;
}

/* The line under a section heading that points at the full FAQ page. */
.post-body .faq-more { margin: 1.4em 0 2.4em; font-weight: 600; }

/* The closing ask. A heading, one line and the site's own button. */
.post-body .seg-cta { margin: 2.8em 0 0; padding: 34px 0 0; border-top: 3px solid var(--ink); }
.post-body .seg-cta h2 { margin: 0 0 .4em; }
.post-body .seg-cta p { margin: 0 0 1.2em; }
.post-body .seg-cta p:last-child { margin: 0; }
.post-body .seg-cta a.btn { text-decoration: none; }
.post-body .seg-cta a.btn:hover { background: var(--ink); }

@media (max-width: 860px) {
    .seg-lede { font-size: 18px; }
    .post-body .faq-jump { padding: 16px 16px; gap: 8px 12px; }
    .post-body .faq-item summary { gap: 12px; }
    .panel.facts p, .panel.callout p { font-size: 17px; }
}


/* =========================================================================
   THE ACCORDION AND THE JUMP LIST ON A REVERSED GROUND. Task P155-#64.

   faq.html now paints one of its six groups on black (see the FAQROT rotation
   in the section-pattern notes in site.css). Everything in the rules above
   draws the accordion in --ink: the hairline between two questions, the
   chevron, the focus ring. On black each of those is black on black, which is
   not a subtle styling bug - it is an accordion nobody can see or tab through.
   These four rules are the reversed set, and they exist so that adding a dark
   ground to a page can never cost a keyboard user the control.
   ========================================================================= */
.bg-ink .post-body .faq-item,
.bg-deep .post-body .faq-item { border-top-color: var(--dark-line); }
.bg-ink .post-body .faq-item:last-of-type,
.bg-deep .post-body .faq-item:last-of-type { border-bottom-color: var(--dark-line); }
.bg-ink .post-body .faq-item summary::after,
.bg-deep .post-body .faq-item summary::after {
    border-right-color: var(--on-dark);
    border-bottom-color: var(--on-dark);
}
.bg-ink .post-body .faq-item summary:focus-visible,
.bg-deep .post-body .faq-item summary:focus-visible { outline-color: var(--on-dark); }

/* THE JUMP LIST takes the page's hue for its ground and its underline, so the
   six links at the top of faq.html read as part of the page rather than as a
   grey box that happens to be there. --ink on --hue-wash is 17:1 at worst. */
/* Framed, not filled. Task P155-#70: the wash ground goes and the hue border
   it already carried does the work on its own, which is the same trade
   `.p-panel .panel` makes in site.css section 12. --ink on --paper is 21:1,
   better than the 19-ish this measured on the wash. */
.post-body .faq-jump { background: var(--paper); border-color: var(--hue); }
.post-body .faq-jump a { color: var(--ink); border-bottom-color: var(--hue); }
/* The hover no longer inverts the underline to black — it fills the link with
   the hue instead. The rule is with the rest of the highlight, ~90 lines up;
   what used to be here was the one line that fought it. Task P155-#81. */

/* THE CLOSING ASK IS NOW A SECTION, NOT A DIV. Task P155-#64 lifted the
   contents of .seg-cta into a full-bleed `.sec.p-cta.bg-accent`, which is the
   one large flat area of periwinkle on the site (black on it, 8.54:1). The
   rules for it live with the other patterns in site.css; what is left here is
   the heading and paragraph spacing that block always had, retargeted. */
.sec.p-cta h2 { margin: 0 0 .4em; }
.sec.p-cta p { margin: 0 auto 1.2em; }
.sec.p-cta p:last-child { margin: 0; }

/* A heading with an id is a scroll target: every h2 on these pages is one, and
   the sticky top bar would otherwise land on top of it. Same calculation the
   `section[id]` rule in site.css makes, applied to the headings that now carry
   the ids the sections used to. */
h2[id], h3[id] { scroll-margin-top: calc(var(--topbar-h, var(--topbar-fallback)) + 20px); }