/* First Nations Employment homepage: loaded only by the "/" route (routes/public.js), after fn-tokens.css.
   Layout and type are Tailwind utilities in the views; this file holds only what utilities can't express. */

/* Tailwind utilities live in cascade layers, so the unlayered base rules in theme.css (h1-h4, p, a, img/svg)
   would beat them. Inside the homepage (.fn-home) and its header/footer (.fn-chrome) those elements roll back to
   the layered styles. :where() keeps this at element specificity so component classes still win. */
:where(.fn-home, .fn-chrome) :is(h1, h2, h3, h4, p, a, dl, dd, dt) { all: revert-layer; }
:where(.fn-home, .fn-chrome) a:hover { all: revert-layer; }
:where(.fn-home, .fn-chrome) :is(img, svg) { max-width: revert-layer; height: revert-layer; }
:where(.fn-home, .fn-chrome) { font-family: var(--fn-font-body); color: var(--fn-ink); }

/* Browser surfaces, from the tokens. */
.page-home ::selection { background: var(--fn-ink); color: var(--fn-canvas); }
:where(.fn-home, .fn-chrome) :focus-visible { outline: 2px solid var(--fn-ink); outline-offset: 3px; border-radius: var(--fn-radius-sm); }
:where(.fn-home, .fn-chrome) .fn-dark :focus-visible { outline-color: var(--fn-on-deep); }
:where(.fn-home) :is(input, select) { caret-color: var(--fn-ink); }
:where(.fn-home) .fn-scroll { scrollbar-width: thin; scrollbar-color: var(--fn-line-strong) transparent; }
.page-home, body:has(.fn-chrome) { background: var(--fn-canvas); }

/* Photograph frame: shows the real image when present, otherwise a quiet hatched placeholder with its label. */
.fn-photo-empty {
  background-color: var(--fn-photo);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--fn-ink) 6%, transparent) 14px 15px);
}

/* Pay scale in "Know more before you apply": the band grows from the low end when the panel opens. */
.fn-band { transform-origin: left center; }
@media (prefers-reduced-motion: no-preference) {
  .fn-band { animation: fn-grow .9s cubic-bezier(.16, 1, .3, 1) both; }
  .fn-panel:not([hidden]) { animation: fn-rise .45s cubic-bezier(.16, 1, .3, 1) both; }
}

/* "Opportunities close to home": the rings. The active scope's ring darkens and every ring inside it fills,
   so the circle visibly widens from community to region to province. */
.fn-ring { transition: fill .5s cubic-bezier(.16, 1, .3, 1), stroke .5s ease, opacity .5s ease; }
@media (prefers-reduced-motion: reduce) { .fn-ring { transition: none; } }

@keyframes fn-grow { from { transform: scaleX(0); } }
@keyframes fn-rise { from { opacity: 0; transform: translateY(8px); } }

/* Ring states. data-level on the svg is the active scope (1 community, 2 region, 3 province, 4 remote); every ring
   at or inside it fills, deepest at the centre, so the reach reads as one widening disc. */
.fn-ring { fill: var(--fn-raised); stroke: var(--fn-line-strong); }
.fn-ring[data-l="4"] { fill: none; }
.fn-ring-label { font: 600 14px/1 var(--fn-font-body); fill: var(--fn-ink-2); transition: fill .4s ease; }
/* Below lg the rings are drawn much smaller, so the labels scale up to stay readable (about 12–13px on screen). */
@media (max-width: 1023.98px) { .fn-ring-label { font-size: 19px; } }
.fn-ring-home { fill: var(--fn-ink); transition: fill .4s ease; }
.fn-rings[data-level="1"] .fn-ring[data-l="1"],
.fn-rings[data-level="2"] .fn-ring:is([data-l="1"], [data-l="2"]),
.fn-rings[data-level="3"] .fn-ring:is([data-l="1"], [data-l="2"], [data-l="3"]) { stroke: var(--fn-raised); }
.fn-rings .fn-ring[data-l="1"] { --on: var(--fn-ink); }
.fn-rings .fn-ring[data-l="2"] { --on: color-mix(in srgb, var(--fn-ink) 78%, var(--fn-raised)); }
.fn-rings .fn-ring[data-l="3"] { --on: color-mix(in srgb, var(--fn-ink) 58%, var(--fn-raised)); }
.fn-rings[data-level="1"] .fn-ring[data-l="1"],
.fn-rings[data-level="2"] .fn-ring:is([data-l="1"], [data-l="2"]),
.fn-rings[data-level="3"] .fn-ring:is([data-l="1"], [data-l="2"], [data-l="3"]) { fill: var(--on); }
.fn-rings[data-level="1"] .fn-ring-label[data-l="1"],
.fn-rings[data-level="2"] .fn-ring-label:is([data-l="1"], [data-l="2"]),
.fn-rings[data-level="3"] .fn-ring-label:is([data-l="1"], [data-l="2"], [data-l="3"]) { fill: var(--fn-raised); }
.fn-rings:is([data-level="1"], [data-level="2"], [data-level="3"]) .fn-ring-home { fill: var(--fn-raised); }
.fn-rings[data-level="4"] .fn-ring[data-l="4"] { stroke: var(--fn-ink); stroke-width: 3; }
.fn-rings[data-level="4"] .fn-ring-label[data-l="4"] { fill: var(--fn-ink); }

/* Print-only blocks (job detail) stay off screen; /css/print.css shows them on paper. */
@media screen { .print-only { display: none !important; } }

/* Legal documents (views/public/legal/_layout.ejs): the existing legal markup, set for reading. */
.legal-body { display: grid; gap: .9rem; font-size: 16px; line-height: 1.7; color: var(--fn-ink-2); }
.legal-body ul { display: grid; gap: .6rem; padding-left: 1.25rem; list-style: disc; }
.legal-body li::marker { color: var(--fn-ink); }
.legal-body strong { color: var(--fn-ink); font-weight: 600; }
.legal-body a { color: var(--fn-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--fn-line-strong); text-underline-offset: 3px; }
.legal-body a:hover { text-decoration-color: var(--fn-ink); }
.legal-body .legal-callout { display: grid; gap: .35rem; padding: 1rem 1.15rem; border: 1px solid var(--fn-line-strong); border-radius: var(--fn-radius); background: var(--fn-raised); color: var(--fn-ink); }

/* Primary actions: an Opportunity Copper → Land Forest gradient (client preference). It sits on the button's own
   copper background, and on hover the gradient travels toward green: a calm, directional "path" movement (brand
   motion: 200–400ms). On the Forest fields (.fn-dark) the green end is lighter so the button edge stays visible.
   Only real actions (links and buttons) get it; small copper markers (the active nav line, badges) stay flat. */
:where(.fn-home, .fn-chrome) :is(a, button).bg-fn-accent,
.fn-auth .kds-btn--accent {
  background-image: linear-gradient(105deg, var(--fn-grad-start) 0%, var(--fn-grad-start) 30%, var(--fn-grad-end) 100%);
  background-image: linear-gradient(105deg in oklab, var(--fn-grad-start) 0%, var(--fn-grad-start) 30%, var(--fn-grad-end) 100%);
  background-size: 125% 100%;
  background-position: 0% 0;
  transition: background-position 400ms cubic-bezier(0.22, 1, 0.36, 1), transform 200ms ease;
}
:where(.fn-home, .fn-chrome) :is(a, button).bg-fn-accent:hover,
.fn-auth .kds-btn--accent:hover { background-position: 100% 0; }
:where(.fn-home, .fn-chrome) .fn-dark :is(a, button).bg-fn-accent { --fn-grad-end: #5A7468; box-shadow: inset 0 0 0 1px rgb(247 243 237 / .22); }
:where(.fn-home) :is(input[type=checkbox], input[type=radio]) { accent-color: var(--fn-accent); }

/* Homepage hero: one entrance. The arch rises from the ground line, the sun lifts after it, the worker settles in
   front. Everything is visible by default; the motion only runs when the visitor allows it. */
@media (prefers-reduced-motion: no-preference) {
  .fn-hero-arch { transform-origin: 50% 100%; animation: fn-arch-rise 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .fn-hero-sun { animation: fn-sun-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both; }
  .fn-hero-person { animation: fn-person-in 800ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both; }
}
@keyframes fn-arch-rise { from { transform: scaleY(0.9); opacity: 0.6; } to { transform: none; opacity: 1; } }
@keyframes fn-sun-rise { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fn-person-in { from { transform: translateY(14px); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* "Opportunities right now": a slow ping on the live dot (off when reduced motion is preferred). */
@media (prefers-reduced-motion: no-preference) {
  .fn-live-ping { animation: fn-live-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; }
  @keyframes fn-live-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
}

/* =================================================================================================================
   The horizon (2026-10 redesign: header, homepage, Find Jobs). One grammar, shared by every surface that loads this:
   - Structure is square: rules, open rows and rectangles (0–2px corners). The only round shape is the copper sun,
     and it always means the same thing: where you are, or the next step (current page, chosen distance, selected
     job, current stop).
   - Movement runs left to right, forward along the path: lines draw from the left, arrows advance, panels open from
     the edge of the control that opened them. Calm exponential ease-out, 200–450ms, no bounce. Reduced motion: none.
   - Inter with optical sizing, so large type takes Inter's display cut. Copper is for the action and the sun only.
   ================================================================================================================= */
:where(.fn-home, .fn-chrome) { font-optical-sizing: auto; }
/* Headlines take Inter's single-storey a: the same family, a voice of its own. Body text keeps the default. */
:where(.fn-home, .fn-chrome) .font-fn-display { font-feature-settings: "cv11"; }
/* Display voice: semibold Inter at normal spacing, not the heavy, tightly packed headline every job board in this
   family uses. Inter's optical sizing does the rest at large sizes. One rule for every display heading and title on
   the site (it overrides the weight and tracking utilities written on each element). */
:where(.fn-home, .fn-chrome) .font-fn-display { font-weight: 600; letter-spacing: -0.018em; }
:where(.fn-home, .fn-chrome) h1.font-fn-display { letter-spacing: -0.026em; }
:root { --fn-ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* The sun: the logo's copper circle, as a position marker. */
.fn-sun { display: inline-block; width: .75rem; height: .75rem; border-radius: 9999px; background: var(--fn-accent); flex: none; }

/* A rule that draws from the left when its row is hovered or focused (rows, links). */
/* a.fn-draw:hover outranks the a:hover reset at the top of this file, which would otherwise drop the positioning. */
.fn-draw, a.fn-draw:is(:hover, :focus-visible) { position: relative; }
.fn-draw::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fn-accent); transform: scaleX(0); transform-origin: left center; transition: transform 450ms var(--fn-ease); pointer-events: none; }
.fn-draw:is(:hover, :focus-within)::after, .fn-draw[data-active]::after { transform: scaleX(1); }
/* A word inside a larger link draws its rule when the whole link is pointed at or focused. */
.group:is(:hover, :focus-visible) > .fn-draw::after { transform: scaleX(1); }
/* Arrows advance with their control. */
.fn-go { transition: transform 300ms var(--fn-ease); }
:is(a, button, .group):is(:hover, :focus-visible) > .fn-go, .group:is(:hover, :focus-within) .fn-go { transform: translateX(4px); }

/* Search slab (views/partials/fn-slab.ejs): two labelled cells and the copper action cell, square. The focused cell's
   copper rule draws across from the left; while the results load the arrow keeps moving forward. */
.fn-slab-cell { position: relative; }
.fn-slab-cell::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--fn-accent); transform: scaleX(0); transform-origin: left center; transition: transform 450ms var(--fn-ease); }
.fn-slab-cell:focus-within::after { transform: scaleX(1); }
.fn-slab-cell:focus-within .fn-slab-label { color: var(--fn-accent-text); }
.fn-slab-cell input:focus, .fn-slab-cell input:focus-visible { outline: none; }
.fn-slab-cell input::placeholder { color: var(--fn-ink-2); opacity: 1; }
.fn-slab[aria-busy="true"] .fn-go { animation: fn-advance 900ms var(--fn-ease) infinite; }
@keyframes fn-advance { 0% { transform: translateX(-6px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(8px); opacity: 0; } }

/* Reveal rows: the extra line opens on hover or keyboard focus (desktop), always open on touch. */
.fn-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 400ms var(--fn-ease), opacity 300ms ease; opacity: 0; }
.fn-reveal > * { min-height: 0; overflow: hidden; }
:is(.group:hover, .group:focus-within) .fn-reveal { grid-template-rows: 1fr; opacity: 1; }
@media (hover: none), (max-width: 1023.98px) { .fn-reveal { grid-template-rows: 1fr; opacity: 1; } }

/* Hero: one authored moment. The horizon draws across, then the sun rises onto it. Visible by default. */
@media (prefers-reduced-motion: no-preference) {
  .fn-horizon-line { transform-origin: left center; animation: fn-grow 1100ms var(--fn-ease) both; }
  .fn-horizon-sun { animation: fn-sun-rise 900ms var(--fn-ease) 350ms both; }
}

/* A stepped track (distance scale on the homepage, the journey rail): the sun glides to the chosen stop and the line
   behind it fills. --at is the chosen stop's position (0–1), set by the script. */
.fn-track { --at: 0; }
.fn-track-fill { transform-origin: left center; transform: scaleX(var(--at)); transition: transform 550ms var(--fn-ease); }
.fn-track-sun { left: calc(var(--at) * 100%); transition: left 550ms var(--fn-ease); }
.fn-swap { animation: fn-swap 450ms var(--fn-ease) both; }
@keyframes fn-swap { from { opacity: 0; transform: translateX(14px); } }

@media (prefers-reduced-motion: reduce) {
  .fn-draw::after, .fn-slab-cell::after, .fn-go, .fn-reveal, .fn-track-fill, .fn-track-sun { transition: none; }
  .fn-swap, .fn-slab[aria-busy="true"] .fn-go { animation: none; }
}

/* Find (views/partials/fn-find.ejs): the search field's own underline (under the typing area, not across the page).
   Focusing it draws the copper rule over it from the left, which is its focus indicator (with its visible label), so
   no box around the input. The highlighted suggestion takes
   the sun beside it. */
.fn-find-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; z-index: 1; height: 2px; background: var(--fn-accent); transform: scaleX(0); transform-origin: left center; transition: transform 500ms var(--fn-ease); pointer-events: none; }
.fn-find-line:focus-within::after { transform: scaleX(1); }
:where(.fn-home) .fn-find-input:focus-visible { outline: none; }
.fn-find-input::-webkit-search-cancel-button { display: none; }
.fn-find[aria-busy="true"] .fn-go { animation: fn-advance 900ms var(--fn-ease) infinite; }
.fn-find-opt { position: relative; transition: background-color 150ms ease; }
.fn-find-opt:hover, .fn-find-opt[aria-selected="true"] { background: var(--fn-surface); }
.fn-find-opt[aria-selected="true"]::before { content: ""; position: absolute; left: .45rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.25rem; border-radius: 9999px; background: var(--fn-accent); }
@media (prefers-reduced-motion: reduce) { .fn-find-line::after { transition: none; } .fn-find[aria-busy="true"] .fn-go { animation: none; } }
/* Find Jobs preview: slides in from the right when a job is chosen. */
@media (prefers-reduced-motion: no-preference) { .fn-preview[data-open] { animation: fn-swap 450ms var(--fn-ease) both; } }

/* "Opportunities close to home": the photograph takes the left half of the screen, the content the right half, its
   right edge lined up with the page container. */
@media (min-width: 1024px) { .fn-half { padding-right: max(24px, calc((100vw - 1200px) / 2 + 24px)); } }

/* Filter sliders (Find Jobs): a thin Mist track that fills Land Forest up to the thumb (--p, set by fn-jobs.js), and the
   thumb is the copper sun. Keyboard: arrow keys step; the focus ring sits on the thumb. */
.fn-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; --p: 0%; }
.fn-range:focus { outline: none; }
.fn-range::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(to right, var(--fn-forest) var(--p), var(--fn-line-strong) var(--p)); }
.fn-range::-moz-range-track { height: 4px; background: var(--fn-line-strong); }
.fn-range::-moz-range-progress { height: 4px; background: var(--fn-forest); }
.fn-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 9999px; background: var(--fn-accent); border: 3px solid var(--fn-canvas); box-shadow: 0 0 0 1px var(--fn-accent); transition: transform 200ms var(--fn-ease); }
.fn-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 9999px; background: var(--fn-accent); border: 3px solid var(--fn-canvas); box-shadow: 0 0 0 1px var(--fn-accent); }
.fn-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.fn-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--fn-accent), 0 0 0 5px color-mix(in srgb, var(--fn-ink) 35%, transparent); }
.fn-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 1px var(--fn-accent), 0 0 0 5px color-mix(in srgb, var(--fn-ink) 35%, transparent); }
@media (prefers-reduced-motion: reduce) { .fn-range::-webkit-slider-thumb { transition: none; } }

/* Rows that scroll sideways on phones fade at the right edge, so the cut-off item reads as "more this way". */
@media (max-width: 1023.98px) { .fn-edge { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); } }
.fn-price-was { font-weight: 400; opacity: .75; }