/* ==========================================================================
   Extensions beyond the prototype — job [2042]

   Rules for options the client asked for that the approved prototype never
   drew. Kept apart from nzwc.css (a straight port, re-portable) and wp.css
   (WordPress reconciliation) so it is obvious what was added after sign-off.
   ========================================================================== */

/* Feature band: the card can be any brand colour, not only the linked
   section's. The prototype only shows it on fern and white, where ink text
   works; on ink, cobalt or rust the card switches to white text and the
   button to the light outline (see src/feature-band/render.php). */
.featureband .card.on-dark {
	color: var(--white);
}

/* FUSCA: the change since the previous sale, which the feed supplies and the
   prototype's card does not show. Small, mono, after the price unit. */
.fusca .price { flex-wrap: wrap; }
.fusca .price .delta { display: block; width: 100%; margin-top: 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted); }
.fusca .price .delta.up { color: #1f7a3a; }
.fusca .price .delta.down { color: var(--rust); }
.fusca .range button[disabled] { opacity: .35; cursor: default; }
.fusca .foot .span:empty { display: none; }

/* FUSCA chart additions beyond the prototype: a three-point x-axis, and a
   hover readout (date · price) with a dashed guide and a marigold marker. */
.fusca .chart { position: relative; }
.fusca .chart svg { cursor: crosshair; touch-action: pan-y; }
.fusca .xaxis { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-40); }
.fusca .xaxis span:nth-child(2) { text-align: center; }
.fusca .xaxis span:last-child { text-align: right; }
.fusca .tip { position: absolute; transform: translate(10px, -50%); padding: 5px 8px; background: var(--ink); color: var(--white); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; white-space: nowrap; border-radius: var(--radius); pointer-events: none; z-index: 2; }
.fusca .tip.flip { transform: translate(calc(-100% - 10px), -50%); }
.fusca .tip[hidden] { display: none; }

/* Stage 2 variants the prototype draws with inline styles. */
.stats.words td.n { font-size: 28px; }
.news.bordered .card { border: 1px solid var(--line-soft); }
.docs .sechead h2 { font-size: 36px; }
.docs .sechead { margin-bottom: 24px; }
.docs .doc.pending { opacity: .55; }
.docs .doc.pending .btn { border-style: dashed; }

/* Stage 3: singles and archives. The share pills are real controls now. */
.share button.pill { font: inherit; cursor: pointer; }
.archive .filters .search { display: flex; align-items: center; gap: 8px; }
.archive .filters .search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: inherit; padding: 0; }
.archive .filters .search button { display: grid; place-items: center; padding: 0; color: var(--muted); }
.archive .pagination a { text-decoration: none; }
.moreband .doc-thumb { background: var(--white); display: grid; place-items: center; }
.moreband .doc-thumb .doc { width: 64px; height: 80px; background: var(--ink); display: grid; place-items: center; }
.moreband .doc-thumb .doc span { width: 50px; height: 64px; background: #fff; display: grid; place-items: center; font-family: var(--mono); font-size: 8px; }

/* Stage 4: Getting started, School and the form pages. */
.split.flip img { order: 2; }
.sponsor .logo.has-logo { width: auto; height: auto; border: 0; }
.sponsor .logo.has-logo img { display: block; max-width: 170px; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.formpage .nzwc-notice { background: var(--bone); border-color: var(--line-soft); }
.programme .nzwc-noimage { aspect-ratio: 540/400; }
.split .nzwc-noimage { min-height: 300px; }

/* Stage 5 — brands */
.profilehead .logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.profilehead .logo.nologo { display: grid; place-items: center; }
.directory .filters .search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.directory .none { padding: 24px 0 48px; color: var(--muted); }
.grid3 .item .nzwc-noimage { aspect-ratio: 371/275; }
.article.profile .gallery img { display: block; }
.article.profile .body > .entry-content > p:first-child { font-size: 22px; line-height: 1.5; color: var(--ink); margin-bottom: 40px; }
.archive > .grid3:last-child { padding-bottom: 80px; }

/* Stage 6 — team and standard content */
.people .person p + p { margin-top: 8px; }
.people .person .more { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
/* Feature band copy that runs to several paragraphs, and an attribution line. */
.featureband .card p + p { margin-top: -14px; }
.featureband .card p.cite { font-size: 15px; opacity: .8; }
/* Core lists and images inside the article body (Sustainability & integrity). */
.article .body ul, .article .body ol { margin: 1em 0 1em 1.4em; padding-left: 0; }
.article .body ul { list-style: disc; }
.article .body ol { list-style: decimal; }
.article .body li + li { margin-top: .4em; }
.article .body .wp-block-image { margin: 0 0 8px; }
.article .body .wp-block-image img { height: auto; max-width: 100%; }
.article .body .wp-block-image + h2 { margin-top: 28px; }
.article .body .lead + h2, .article .body > h2:first-child { margin-top: 0; }
.article .body .lead { color: var(--ink); }
.article .body .muted { font-size: 15px; color: var(--muted); }
.asidecard.on-dark, .asidecard.on-dark .eyebrow { color: var(--white); }
.subnav a.on::before { flex: none; }

/* Client feedback 3 Nov 2026 — the home hero: about 80vh, and a slider.
   Height applies to the single-image hero too, so it sits in line with the
   other banners. */
.hero { height: 80vh; min-height: 560px; max-height: 860px; }
.hero .btn { margin-top: 36px; }
.btn-lg { font-size: 18px; padding: 19px 32px; border-width: 2px; }
.hero .btn-outline-light { transition: background .15s ease, color .15s ease; }
.hero .btn-outline-light:hover, .hero .btn-outline-light:focus-visible { background: var(--white); color: var(--ink); }
.hero .slides { position: absolute; inset: 0; z-index: 0; }
.hero .slide { position: absolute; inset: 0; display: flex; align-items: flex-end; isolation: isolate; opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.hero .slide.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; z-index: 1; }
.hero .slide .media::after { background: linear-gradient(to top, rgba(16,25,33,.55), rgba(16,25,33,0) 62%), linear-gradient(to right, rgba(16,25,33,.42), rgba(16,25,33,0) 58%), linear-gradient(to bottom, rgba(16,25,33,.35), rgba(16,25,33,0) 26%); }
.hero .slide .nzwc-noimage { display: block; width: 100%; height: 100%; background: var(--ink); }
.hero .ctl { position: absolute; left: 0; right: 0; bottom: 44px; z-index: 2; pointer-events: none; }
.hero .ctl .wrap { display: flex; justify-content: flex-end; align-items: center; gap: 22px; padding-bottom: 0; }
.hero .ctl .wrap > * { pointer-events: auto; }
.hero .ctl .arrows { display: flex; gap: 10px; }
.hero .ctl .arrows button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--white); color: var(--white); display: grid; place-items: center; font-size: 18px; transition: background .15s ease, color .15s ease; }
.hero .ctl .arrows button:hover { background: var(--white); color: var(--ink); }
.hero .ctl button:focus-visible, .hero .btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.hero-slider .slide .wrap { padding-bottom: 112px; }
/* Both headlines the same size, and small enough that "New Zealand wool,
   together." holds on one line across laptop widths (Greg, 6 Nov 2026). */
.hero .slide .display { font-size: clamp(46px, 5.6vw, 80px); max-width: none; }
@media (max-width: 760px) {
  .hero { height: 75vh; height: 75svh; min-height: 520px; max-height: none; }
  .hero .btn { margin-top: 24px; white-space: normal; line-height: 1.25; text-align: left; }
  .btn-lg { font-size: 16px; padding: 16px 26px; }
  .hero-slider .slide .wrap { padding-bottom: 92px; }
  .hero .ctl { bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .slide, .hero .slide.is-active { transition: none; }
}

/* Client feedback 3 Nov 2026 — section hero button; supporters without a logo file */
.sechero .btn { margin-top: 28px; }
.sechero .btn:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.supporters .row .textlogo { font-weight: 600; font-size: 17px; line-height: 1.2; max-width: 190px; text-align: center; }
.supporters .row img.is-stacked { height: 72px; }
.supgrid .cell .textlogo { font-weight: 600; font-size: 20px; line-height: 1.2; min-height: 44px; display: flex; align-items: center; margin-bottom: 22px; }
.supgrid .cell img.is-stacked { height: 72px; margin-top: -28px; }
@media (max-width: 760px) {
  .supporters .row img.is-stacked { height: 56px; }
  .supgrid .cell img.is-stacked { margin-top: 0; }
}

/* Phase 5 check pass, 6 Nov 2026 */
/* Menu titles are not page headings (they came before the H1): same look, plain element. */
.mega .intro .h3 { font-size: 30px; margin-bottom: 18px; }
.mega .intro p { margin-bottom: 28px; }
@media (max-width: 1024px) { .mnav .pane .h3 { font-size: 27px; margin-bottom: 14px; } }
/* The shifted photo on a mobile-top section hero must not widen the page. */
.sechero { overflow: hidden; }
/* One visible focus ring everywhere: ink on light, white where the text is white. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
:where(.site-footer, .hero, .sechero, .on-dark, .callout) :where(a, button):focus-visible { outline-color: var(--white); }
.site-header.over .logo:focus-visible, .site-header.over .primary > li > a:focus-visible, .site-header.over .bar > button:focus-visible, .site-header.over .tools :where(a, button):focus-visible { outline-color: var(--white); }
.docs div.doc.pending { cursor: default; }
.mega .feature .h4 { font-size: 19px; line-height: 1.22; margin-bottom: 14px; }
@media (max-width: 1024px) { .mnav .feature .h4 { font-size: 15px; line-height: 1.25; } }
.site-header .primary > li > a:focus-visible { outline-offset: -8px; }
/* Search and 404: the core search field in the site's own shapes. */
.search .pagehead, .error404 .pagehead { padding-bottom: 64px; }
.error404 .pagehead .lead { font-size: 22px; line-height: 1.5; margin-top: 18px; }
.pagehead .wp-block-search { margin-top: 28px; max-width: 560px; }
.wp-block-search__inside-wrapper { display: flex; gap: 10px; }
.wp-block-search__input { flex: 1; min-width: 0; border: 1px solid var(--line-soft); border-radius: 999px; padding: 13px 20px; font: inherit; font-size: 16px; background: var(--white); color: var(--ink); appearance: none; }
.wp-block-search__button { margin: 0; border: 0; border-radius: 999px; background: var(--ink); color: var(--white); font: inherit; font-weight: 600; font-size: 15px; padding: 14px 24px; cursor: pointer; }
.search .article .body .wp-block-post-template { list-style: none; padding: 0; margin: 0; }
.search .article .body .wp-block-post-template > li + li { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line-soft); }
.search .article .body .wp-block-post-title { font-size: 26px; margin: 0 0 8px; }

/* Heading levels, 6 Nov 2026. Blocks print the level the page outline needs
   (section title H2, cards H3) and carry the level they were designed at as a
   class — <h3 class="h4"> looks exactly like the H4 it replaced. Every
   `… h3/h4/h5` rule above and in nzwc.css has a `.h3/.h4/.h5` twin. A section
   label that is really the heading is <h2 class="eyebrow">. */
.cover .h5 { font-weight: 700; }

/* FUSCA band: a sentence on current prices ahead of the copy. */
.fusca .copy.overview { font-weight: 600; color: var(--ink); margin-bottom: 14px; }

/* Conditional post fields, 6 Nov 2026: event card, podcast player, a case study's brand link. */
.asidecard.event .h4 { margin-bottom: 8px; }
.asidecard.event .meta { margin: 0 0 20px; }
.glance .profile-link { margin-top: 18px; font-size: 15px; }
.article .episode-embed { margin-bottom: 40px; }
.article .episode-embed iframe { display: block; width: 100%; max-width: 100%; border: 0; border-radius: var(--radius); }
.article .share .pill { white-space: nowrap; }
.aside .share { flex-wrap: wrap; row-gap: 10px; }

/* Stubs (9 Nov 2026): a listing card for a post or brand with no body yet is
   not a link. It keeps the card's look, says "coming soon" where the link
   label was, and does not react to hover. */
.stub { cursor: default; }
.stub .link { text-decoration: none; color: var(--muted); }
.stub .soon, .card .soon { display: block; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cardrow .card.stub .h4 .soon, .cardrow .card.stub h3 .soon { display: inline; margin: 0 0 0 8px; }
.carousel .slide.stub h3 .soon { display: block; }

/* ------------------------------------------------------------------
   Section rhythm (Greg, 9 Nov 2026). Every section has the same space
   above and below (--sec); a band with a background has it inside its
   colour. The one exception is two white sections in a row, which share
   one gap: the second drops its top. Under a page head a section sits
   --sec-head below the rule. Phones use the smaller pair. */
:root { --sec: 96px; --sec-head: 56px; }
@media (max-width: 760px) { :root { --sec: 56px; --sec-head: 32px; } }

.tiles, .stats, .showcase, .supporters, .introrow, .index, .featgrid, .docs, .related, .cardrow, .childtiles,
.article, .formpage, .moreband, .people, .programmes, .alsoin, .carousel, .guides, .supgrid, .faq, .zig,
.quoteblock, .callout, .ctaband, .notlisted, .news, .fusca, .wrap:has(> .sponsor), .wrap:has(> .navigator), .guidelist { padding-top: var(--sec); padding-bottom: var(--sec); }

/* White after white: one gap, not two. */
:is(.tiles, .stats, .showcase, .supporters, .introrow, .index, .featgrid, .docs, .related, .childtiles, .article, .formpage, .moreband, .people, .programmes, .guidelist, .wrap:has(> .sponsor), .wrap:has(> .navigator),
    .cardrow:not([style*="background"]), .alsoin:not([style*="background"]), .carousel:not([class*="-tint"]), .guides:not([class*="marigold"]),
    .supgrid:not([style*="background"]), .faq:not([style*="background"]), .zig:not([style*="background"]), .quoteblock:not([style*="background"]), .callout:not([style*="background"]), .news.bordered)
+ :is(.tiles, .stats, .showcase, .supporters, .introrow, .index, .featgrid, .docs, .related, .childtiles, .article, .formpage, .moreband, .people, .programmes, .guidelist, .wrap:has(> .sponsor), .wrap:has(> .navigator),
    .cardrow:not([style*="background"]), .alsoin:not([style*="background"]), .carousel:not([class*="-tint"]), .guides:not([class*="marigold"]),
    .supgrid:not([style*="background"]), .faq:not([style*="background"]), .zig:not([style*="background"]), .quoteblock:not([style*="background"]), .callout:not([style*="background"]), .news.bordered) { padding-top: 0; }

/* Under a page head. */
.pagehead + * { padding-top: var(--sec-head); }
.pagehead + .programmes { padding-top: 0; } /* its rows carry their own space and rule */
.programme:first-child { border-top: 0; }
.pagehead + .guidelist .listhead { padding-top: 0; }
.guidelist .guidegrid { padding-bottom: 0; }
/* Two people groups: one gap between them. */
.people:has(+ .people) { padding-bottom: 40px; }
/* A page head followed by a coloured band needs no rule under it. */
.pagehead.hairline:has(+ .fusca, + [style*="background"], + .news:not(.bordered)) { border-bottom: 0; }
.pagehead.rule:has(+ .fusca, + [style*="background"], + .news:not(.bordered)) .cols { border-bottom: 0; }

/* Eyebrows (Greg, 9 Nov 2026): every label that sits over a heading has
   the same space under it. Card labels over an .h4 keep their own. */
main .eyebrow:has(+ h1, + h2, + h3, + .h2, + .h3) { margin-bottom: 18px; }
.split .panel .eyebrow, .featureband.white .card .eyebrow { margin-bottom: 18px; }
.mnav .feature .eyebrow { margin-bottom: 12px; }

/* FAQ: no rule above the first question (Greg, 9 Nov 2026). */
.faq details:first-of-type { border-top: 0; }


/* Zig with no image (Growers' work programme): one column, not an empty one. */
.zig .wrap.single { grid-template-columns: 1fr; }
.zig .wrap.single .copy { max-width: 62ch; }

/* Carousel (Brands & Innovation): the track scrolls, slides have set widths. */
.carousel .track { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; }
.carousel .track::-webkit-scrollbar { display: none; }
.carousel .slide { scroll-snap-align: start; }
.carousel .slide.lead { width: 640px; }
.carousel .slide.md { width: 500px; }
.carousel .slide.sm { width: 180px; }
@media (max-width: 1100px) { .carousel .slide.lead { width: 520px; } }
@media (max-width: 760px) { .carousel .slide.lead { width: 86vw; } .carousel .slide.md { width: 300px; } .carousel .slide.sm { width: 150px; } }

/* Links (Greg, 9 Nov 2026): a link that ends in an arrow has no underline —
   the arrow slides right on hover instead (nzwc.js wraps it in .arr). A link
   in running text underlines on hover. */
.arr { display: inline-block; transition: transform .22s ease; }
a:hover .arr, button:hover .arr { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .arr { transition: none; } a:hover .arr, button:hover .arr { transform: none; } }
.link.ul, .grid3 .item .link, .carousel .slide.lead .link, .people .person .more { text-decoration: none; }
.article .body a, .faq .a a, .asidecard .copy a, .zig .copy a, .intro a, .introrow a, .crumb a, .site-footer a:not(.btn):not(.links > a), .mega .intro a { text-decoration: none; }
.article .body a:hover, .faq .a a:hover, .asidecard .copy a:hover, .zig .copy a:hover, .intro a:hover, .introrow a:hover, .crumb a:hover, .site-footer a:not(.btn):not(.links > a):hover, .mega .intro a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.site-header .primary > li > a:hover::after { opacity: 1; }

/* Share pills: the Copy link button matches the two links. */
.share button.pill { -webkit-appearance: none; appearance: none; background: none; color: inherit; font-size: 14px; font-weight: 600; line-height: inherit; padding: 8px 14px; margin: 0; }

/* News article head: the meta line sits under the title; the lead image is
   16:9, at most 1600px wide, and there is no rule between the head and the image. */
.pagehead.article-head .meta-line { margin: 22px 0 0; }
.pagehead.article-head:has(+ .bleed) { border-bottom: 0; }
.bleed { max-width: 1600px; margin-top: 0; } /* the head's own 32px is the gap above */
.bleed img { aspect-ratio: 16/9; }
.pagehead + .bleed { padding-top: 16px; } /* 48px from the meta line to the image, with the head's own 32 */
.bleed + .article { padding-top: 36px; } /* 60px from the image to the first line (Greg: half) */
@media (max-width: 760px) { .bleed img { aspect-ratio: 4/3; } .pagehead + .bleed { padding-top: 8px; } .bleed + .article { padding-top: 20px; } }

/* Supporters grid (About), Greg 9 Nov 2026: logos sit on one baseline, left
   aligned, so the names and copy line up across each row; more air between rows. */
.supgrid .cells { gap: 64px 32px; }
.supgrid .cell img, .supgrid .cell img.is-stacked { display: block; height: 64px; width: 100%; max-width: 200px; object-fit: contain; object-position: left bottom; margin: 0 0 22px; }
.supgrid .cell .textlogo { min-height: 64px; align-items: flex-end; margin-bottom: 22px; }

/* Mobile panel: air between a section pane's link list (or intro) and its button (Greg, 10 Nov 2026). */
.mnav .pane:not([data-pane="root"]) .btn { margin-top: 28px; }
.mnav .pane .feature { margin-bottom: 0; } /* the button carries the gap */

/* Visual sweep, 10 Nov 2026 (Greg). On phones the footer's Privacy link sits under the copyright, not indented; a label that wraps (crumb, card meta) gets room between its lines. */
@media (max-width: 760px) {
  .site-footer .bottom span + span { margin-left: 0; }
  .crumb, .grid3 .item .eyebrow, .news .card .eyebrow, .archive .featured .eyebrow, .bd .item .eyebrow { line-height: 1.5; }
}

/* Home slider: no arrows on phones; the slides run on their own (Greg, 10 Nov 2026). */
@media (max-width: 760px) { .hero .ctl { display: none; } }

/* Register band (10 Nov 2026): intro left, the Register form right, on a colour.
   It carries .formpage so the form takes the form page's field styles. */
.regband .wrap { grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: start; }
.regband .intro .eyebrow { margin-bottom: 18px; }
.regband .intro .h2 { margin-bottom: 20px; }
.regband .intro p { color: var(--muted); max-width: 44ch; }
.regband .intro p + p { margin-top: .7em; }
.regband .form .forminator-custom-form { margin: 0; }
.regband .form .forminator-input, .regband .form .forminator-textarea, .regband .form select { background: var(--white); }
@media (max-width: 1100px) { .regband .wrap { gap: 48px; } }
@media (max-width: 760px) { .regband .wrap { grid-template-columns: 1fr; gap: 32px; } }
.regband.nointro .wrap { grid-template-columns: minmax(0, 760px); }

/* Feature band: one or two buttons in a row (10 Nov 2026). */
.featureband .card .btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* CTA band, contained: a rounded colour panel at content width with white around it (10 Nov 2026). */
.ctaband.contained { background: transparent; }
.ctaband.contained .wrap { border-radius: var(--radius); padding: 56px; }
.ctaband.contained .wrap > div:first-child { min-width: 0; }
* + .ctaband.contained { padding-top: 0; }               /* after a white section the two share one gap… */
[style*="background"] + .ctaband.contained, .hero + .ctaband.contained, .sechero + .ctaband.contained, .featureband + .ctaband.contained, .bleed + .ctaband.contained { padding-top: var(--sec); } /* …after a colour or an image it keeps its own */
@media (max-width: 760px) { .ctaband.contained .wrap { padding: 32px 24px; } }
/* Two buttons: side by side on desktop (the card widens to hold them), one above the other on phones. */
.featureband .card:has(.btns > a + a) { width: 600px; }
.featureband .card .btns .btn { white-space: nowrap; }
@media (max-width: 760px) {
  .featureband .card:has(.btns > a + a) { width: 100%; }
  .featureband .card .btns { flex-direction: column; align-items: flex-start; }
}

/* CTA band: the button column sits on the bottom line of the text, not floating mid-height (Greg, 10 Nov 2026). */
.ctaband .wrap { align-items: end; }
.ctaband .side .btn:last-child { margin-bottom: 0; }

/* Phones (Greg, 10 Nov 2026): with the slider arrows gone the headline sits where they were; an
   article's aside card is dropped when a CTA banner follows the article, so Register isn't offered twice. */
@media (max-width: 760px) {
  .hero-slider .slide .wrap { padding-bottom: 40px; }
  .article:has(+ .ctaband) .aside, .article:has(+ .ctaband) .asidecard { display: none; }
}