/* Anders design — bridge layer.
   Theme-authored.

   Everything the ported design cannot answer for itself: the parent theme's
   reset, this theme's own chrome, and the few places our markup differs from
   the design's. The ported anders-*.css files are overwritten by
   tools/port-design.js, so nothing here may live in them.

   hello-elementor's reset.css styles every button-ish control as a raspberry
   outline button:

     [type="button"], [type="submit"], button {
       background-color: transparent; border: 1px solid #c36; color: #c36; ... }
     [type="button"]:hover, [type="submit"]:hover, button:hover {
       background-color: #c36; color: #fff; }

   The ported design neutralises the resting state for real <button> elements
   (`.anders-design button{border:none;background:none}`), but nothing covers
   `<input type="submit">` — which is what Contact Form 7 renders the Apply Now
   and Ask an Expert buttons as — and nothing covers the :hover/:focus rule at
   all, so any design button without its own hover background flashed #c36.

   The scope selector is wrapped in :where() on purpose, so each rule below
   sits at the specificity of the reset selector it answers and wins on source
   order alone rather than by outranking the design.

   The reset also flattens every label to `line-height:1`. The design never
   restates it, so the floating label rendered as a 15px box inside a 52px
   field — text pinned high instead of optically centred. Handing the label
   back the inherited 1.6 is what the design's own reference page does, since
   it has no reset to undo. */

:where(.anders-design) label {
	line-height: inherit;
}

/* The design's reference pages put .shell in plain block flow, where its
   `margin: 0 auto` only centres it. site-header.php wraps the whole document in
   `#page.cxs-site-page`, which site-chrome.css makes a column flex container —
   and auto cross-axis margins on a flex item turn off the default stretch, so a
   .shell that is a *direct* child of #page shrink-wraps to fit-content instead
   of filling the row.

   The job single is the one template that hands #page a .shell directly
   (`.shell.layout > main`); the search, 404 and blog templates nest their shells
   inside <main>, which is why only this page showed it. Above 1024px .layout is
   `grid-template-columns: minmax(0,1fr) 368px`, and a 1fr track contributes
   nothing to an intrinsic width — the grid resolved to `0px 368px` and every
   element in the main column measured 0 wide.

   width:100% restores the stretch the design assumed. max-width still caps it
   and the auto margins still centre it, so the rule is a no-op wherever .shell
   is already in block flow. */
:where(.anders-design) .cxs-site-page > .shell {
	width: 100%;
}

/* Mobile job-search and landing heroes use the brand gradient on its own.
   Removing both image layers keeps every shared hero consistent without
   changing the tablet and desktop art direction. #main-content intentionally
   outranks the later-loaded ported hero background. */
@media (max-width: 767px) {
	body.anders-design #main-content > .hero {
		background: var(--hero-dark);
	}

	.anders-design .hero-bg,
	.anders-design .hero-scrim {
		display: none;
	}
}

/* The same reset puts `line-height:1.5` on every form control; the design
   leaves them at the UA's `normal`. It shows up twice. A rows="4" textarea
   came out 125px against the design's 115px. And because an inline-block
   control's baseline moves with its line-height, the strut in the line box
   that holds it gained a pixel of descent, so every 52px .field measured 53 —
   small alone, six of them plus the textarea is what pushed the Ask an Expert
   modal into a scrollbar.

   `button` is in that same reset selector list and is deliberately left out:
   the design's buttons are sized by their own padding and line-height, and
   sweeping them in here would resize every one of them. */
:where(.anders-design) :is(input, select, textarea) {
	line-height: normal;
}

/* The same reset rule ends with `width:100%`. The design never restates a width
   on .sortsel — a bare <select> shrink-wraps its longest option, which is how
   the sort control sits at ~190px on the reference page. Under the reset it
   claimed the full 1208px row instead, wrapping itself onto a second line and
   taking the filter bar from 76px to 126px tall. Auto restores the intrinsic
   width the design assumed.

   Scoped to the controls the design lays out itself rather than to `select`
   wholesale: a Contact Form 7 dropdown inside a modal genuinely does want the
   full width of its field. */
:where(.anders-design) :is(.sortsel, .fbar select) {
	width: auto;
}

/* The reset's `padding: .5rem 1rem` on every input. The design's panel search
   box draws the border on the .psearch wrapper and expects the input inside to
   contribute nothing but its text, so the inherited padding pushed the State
   panel's search field from 22px to 38px and the box around it from 40 to 56 --
   the row read as a form field sitting on top of the list rather than part of
   the panel.

   .fsearch is left alone: it sets its own padding and already measures right. */
:where(.anders-design) .psearch input {
	padding: 0;
}

:where(.anders-design) [type="button"],
:where(.anders-design) [type="submit"] {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	font: inherit;
}

/* The :hover/:focus half of the reset is the one case where levelling the
   specificity is not enough: `[type="submit"]:focus` already matches the
   design's own `.anders-design .btn-primary` at (0,2,0), so a level rule wins
   the tie on order and blanks a design button's fill the moment it takes
   focus — which is how the neon Apply Now button went white. :not(.btn) both
   lifts this clear of the reset and says what is meant: the raspberry
   treatment is undone for controls the design does not style, while a control
   the design does style keeps its own. */
:where(.anders-design) :is([type="button"], [type="submit"], button):not(.btn):hover,
:where(.anders-design) :is([type="button"], [type="submit"], button):not(.btn):focus {
	background-color: transparent;
	color: inherit;
	text-decoration: none;
}

/* Controls the design draws as surfaces, not as links.

   `.anders-design a:hover { text-decoration: underline }` is the design's rule
   for prose links, and it reaches these three because they happen to be built
   from <a>. Each already answers a hover on its own terms and needs no second
   answer:

     .fopt      a panel row — fills with --accent-soft
     .chip-opt  a sheet pill — has a border and a fill of its own
     .page-btn  a pager button — takes the accent on its border and label

   An underline on top of a filled row is a second signal for one event, and it
   lands on the one part of the row that was already legible.

   The design does not hit this itself: its own list-shaped controls (.pager,
   .nav-links, .cat-tabs) each say `text-decoration: none` on hover, and its
   pager is a row of <button>s driven by goPage(), which a link rule cannot
   reach at all. Ours are real <a href> so a page of results can be linked,
   shared and crawled — the deviation that exposes the gap.

   (0,2,1) each, matching `.anders-design a:hover` exactly and winning on source
   order: this file is enqueued after anders-components.css. */
:where(.anders-design) a:is(.fopt, .chip-opt, .page-btn):hover {
	text-decoration: none;
}

/* The featured card is the link.

   The design draws it as a card with a "View job →" line at the bottom and
   lifts the whole card's shadow on hover — so it reads as clickable across its
   whole face and used to answer in one corner of it. Ours makes the face match
   the affordance.

   Stretched from the card's own heading rather than wrapped around the card:
   an <a> around all of it takes everything inside as its accessible name, so
   each card would announce as one run of city, specialty, pay, shift and "View
   job". This way the name is the heading, and the hit area is still the card. */
:where(.anders-design) .feat-card {
	position: relative;
}

/* Inherit, because the heading is now inside a link and .anders-design a paints
   it accent blue — a colour the design gives to controls, which the city is not. */
:where(.anders-design) .feat-card .feat-cover {
	color: inherit;
}

:where(.anders-design) .feat-card .feat-cover::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* The design's base `a:hover` underline, declined here. The card already has a
   hover — the shadow the design lifts — and the underline below is the second
   half of it; a third on the city is one more answer than the question had.
   (0,3,0) to clear `.anders-design a:hover` at (0,2,1) outright rather than on
   load order, since this file is enqueued before the ported one. */
.anders-design .feat-card .feat-cover:hover {
	text-decoration: none;
}

/* ---------- The link arrow ----------

   Three of these were the character "→" sitting in the markup. Every other icon
   in the design is an inline SVG on a 24 viewBox with a currentColor stroke, so
   the glyph was the one place a font decided how an icon looked: it carried the
   font's stroke weight rather than the label's, sat on the text baseline rather
   than optically centred, and changed shape with the family. .similar-link had
   already been given a real SVG — on its own 14 grid at 1.6 — which is what
   made the inconsistency visible in the first place.

   One arrow now, on the 24 grid the rest of the set uses, with the stroke
   tracking the weight of the label beside it (2.2 against 700, 1.8 against
   500). .view-link, .sim-all and .similar-link were already inline-flex with a
   gap: the design laid all three out for an icon child and got a text node. */
:where(.anders-design) .feat-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* The nudge is not a fudge factor, it is the difference between two centres.

   `align-items: center` centres the icon's box on the line box, which for these
   labels lands its shaft on the CAP-height centre — correct for an all-caps
   label, and too high for "View job", where one capital carries six lowercase
   letters and the visual mass sits lower. Measured across all four labels the
   arrow came out 1.3–1.7px above the x-height centre, and it reads exactly as
   far off as that sounds: the shaft crosses the top of the o rather than its
   middle.

   0.1em drops it just shy of the x-height centre — where a hyphen or en dash
   sits in most faces, which is the company this glyph keeps. In em so it holds
   at 13.5px and 14px alike, and against any later change to the type scale.

   Offset with `position`, not `transform`: transform belongs to the hover
   nudge, and a static correction folded into it would have to be restated in
   every rule that moves the arrow — and would silently revert the moment one
   forgot. */
:where(.anders-design) .link-arrow {
	position: relative;
	top: .1em;
	flex: none;
	transition: transform 150ms cubic-bezier(.25, 1, .5, 1);
}

/* The card already answers a hover by lifting its shadow. The arrow moving the
   way the card is about to take you is the second half of that gesture, and a
   more specific one than an underline — it says where, not just that. Which is
   why the underline this rule used to carry is gone: two signals, not three. */
:where(.anders-design) :is(.feat-card, .job-card):hover .link-arrow,
:where(.anders-design) :is(.sim-all, .similar-link, .view-link):hover .link-arrow {
	transform: translateX(3px);
}

/* .feat-link is a <span> now — the card is the link — so the design's
   `.feat-link:hover` underline no longer describes anything true. */
.anders-design .feat-link:hover {
	text-decoration: none;
}

/* The arrow still moves, it just stops travelling to get there: the signal is
   the displacement, not the animation of it. */
@media (prefers-reduced-motion: reduce) {
	:where(.anders-design) .link-arrow {
		transition: none;
	}
}

/* Focus outlines the card, not the heading inside it: the card is what
   activates, so it should be what the ring describes. :has() is already a
   requirement of the ported design, so this adds nothing new. */
:where(.anders-design) .feat-card:has(.feat-cover:focus-visible) {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

:where(.anders-design) .feat-card .feat-cover:focus-visible {
	outline: none;
}