/*
 * Parent overrides.
 *
 * The Ethical Agency parent theme is Underscores, which ships ~25 KB of
 * light-mode defaults and zero CSS custom properties. This file exists only to
 * neutralise the rules that fight a dark, bespoke design. Nothing here is a
 * Bohardien design decision: those belong in base.css and custom.css.
 *
 * Each block names the parent rule it counters so this file can be audited
 * against the parent, and shrunk if the parent ever gains a token layer.
 */

/* Parent: body { background: #fff } ------------------------------------- */
body {
	background: var(--bg);
	color: var(--fg-2);
}

/* Parent: a { color: #4169e1 } and a:visited { color: #800080 }.
   The design has a single link colour and no visited state. -------------- */
a {
	color: var(--link);
}

/* Link states, and the specificity trap underneath them.
 *
 * The parent sets a:visited to #800080 and a:hover to midnight blue, both
 * at (0,1,1). Undoing them needs (0,1,1) too, which is what the two rules
 * below do. The catch is that (0,1,1) also outranks any component that
 * states its colour with a single class at (0,1,0), so a visited button or
 * header call to action took the link colour instead of its own. On the
 * header CTA that was --link blue on an --accent blue pill: the label
 * disappeared entirely.
 *
 * Wrapping these in :where() was tried and is worse: it drops them to
 * (0,0,1), so the parent purple wins instead and every classed anchor on
 * the site turns magenta.
 *
 * So the components are raised instead. .class:link and .class:visited is
 * (0,2,0), which beats (0,1,1) outright. The list below is not a guess: it
 * is every anchor class on the site that declares its own colour, read out
 * of the live CSSOM across all ten templates. A new anchor component that
 * sets a colour has to be added here. ------------------------------------ */
a:visited {
	color: var(--link);
}

a:hover,
a:focus,
a:active {
	color: var(--fg);
}

.button:link,
.button:visited,
.button-secondary:link,
.button-secondary:visited,
.home-hero__action:link,
.home-hero__action:visited,
.home-hero__action--ghost:link,
.home-hero__action--ghost:visited,
.office-map__link:link,
.office-map__link:visited,
.site-branding__link:link,
.site-branding__link:visited,
.team-card__action:link,
.team-card__action:visited {
	color: var(--fg);
}

.button-primary:link,
.button-primary:visited,
.header-cta:link,
.header-cta:visited,
.home-hero__action--primary:link,
.home-hero__action--primary:visited,
.team-card__action--primary:link,
.team-card__action--primary:visited {
	color: var(--accent-fg);
}

.cta-band__action:link,
.cta-band__action:visited {
	color: var(--panel);
}

.article-body__back-link:link,
.article-body__back-link:visited {
	color: var(--link);
}

.office-details__value:link,
.office-details__value:visited,
.service-tabs__tab:link,
.service-tabs__tab:visited,
.sitemap__link:link,
.sitemap__link:visited {
	color: var(--fg-2);
}

.page-hero__crumb-link:link,
.page-hero__crumb-link:visited {
	color: var(--kicker);
}

.utility-bar__link:link,
.utility-bar__link:visited {
	color: var(--util-fg-2);
}

.article-card__link:link,
.article-card__link:visited,
.booking-card:link,
.booking-card:visited,
.case-card__link:link,
.case-card__link:visited,
.expertise-card__link:link,
.expertise-card__link:visited,
.search-result:link,
.search-result:visited,
.vacancy-card:link,
.vacancy-card:visited {
	color: inherit;
}


/* Parent: .container { max-width: 1200px } ------------------------------ */
.container {
	max-width: var(--container);
	padding-inline: var(--gutter);
	margin-inline: auto;
	width: 100%;
}

/* Parent: system font stack on body, and "Courier 10 Pitch" on pre/code -- */
body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: var(--fw-light);
	line-height: var(--lh-body);
	letter-spacing: var(--ls-body);
}

/* Parent: .button { border-radius: 3px; border: 2px solid #1a1a1a;
   font-weight: 700 }. The design uses 999px pills at weight 500.

   The design has 36 pill buttons and every one of them is uppercase at 13px
   with 0.08em tracking. The first pass here set --fs-sm and letter-spacing 0
   and no text-transform, so every button on the site was in sentence case at
   the wrong size: the About the team link, the 404 actions, the thank-you
   actions, the case study back link, all of them. Counted in the design
   before changing it rather than going on one screenshot. ---------------- */
.button,
.button-primary,
.button-secondary {
	border-radius: var(--radius-pill);
	border: 1px solid var(--line-strong);
	background: transparent;
	color: var(--fg);
	font-weight: var(--fw-medium);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-kicker);
	text-transform: uppercase;
	/* Eight of the ten buttons on the site carry an arrow icon, and the parent's
	   inline-block left the icon and the label as inline content that wrapped:
	   the case study back link, both 404 actions and both thank-you actions all
	   rendered 68px tall with the arrow stranded on its own line above the text.
	   The two that looked right, .home-about__link and .article-body__back-link,
	   were the two with a bespoke inline-flex rule of their own, which is what
	   made this look like a one-off rather than a gap in the shared rule.

	   Centring belongs here too: .action-row__item is a flex container, so its
	   anchor is blockified and would otherwise align its contents left. Gap does
	   nothing on a label-only button, so the text-only pills are unaffected. */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gap-xs);
	/* Design: 15 of 36 pills are 14px 24px and 16 are 15px 26px. The em-based
	   padding here was sized against the old 14.5px label; once the font
	   dropped to the design 13px it rendered 9px by 20px, noticeably tighter
	   than every hand-built pill on the site. Fixed values, on tokens. */
	padding: var(--gap-sm) var(--gap-lg);
	transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.button-primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-fg);
}

/* 25 of the 36 invert on hover, filling with the foreground and dropping the
   label to the ground colour. Hover only: focus keeps the global ring rather
   than repainting, so a keyboard user never loses it. */
a.button:hover,
a.button-primary:hover,
a.button-secondary:hover,
.button:hover,
.button-primary:hover,
.button-secondary:hover {
	background: var(--fg);
	border-color: var(--fg);
	color: var(--bg);
}

/* Parent: hr { background-color: #ccc } -------------------------------- */
hr {
	background-color: var(--line);
	border: 0;
	height: 1px;
}

/* Parent: various light-mode greys on tables, quotes, code and captions -- */
blockquote {
	border-left: 1px solid var(--line-strong);
	color: var(--fg);
}

pre,
code,
kbd,
tt,
var {
	background: var(--well);
	color: var(--fg-2);
}

table,
th,
td {
	border-color: var(--line);
}

.wp-caption-text,
.gallery-caption {
	color: var(--faint);
	font-size: var(--fs-2xs);
}

/* Parent: mark, ins { background: #fff9c0 } ---------------------------- */
mark,
ins {
	background: var(--accent);
	color: var(--accent-fg);
	text-decoration: none;
}

/* Parent: no visible focus style beyond the browser default.
   WCAG 2.1 AA needs a focus indicator that survives a dark ground. ------ */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	box-shadow: var(--focus-ring);
}

/* Parent: .screen-reader-text sets a light background on focus --------- */
.screen-reader-text:focus {
	background-color: var(--bg-deep);
	color: var(--fg);
	border-radius: var(--radius-md);
	box-shadow: var(--focus-ring);
}

/* The parent's breakpoint grid is unused for Bohardien sections, per
   decision 3. It is left loaded and untouched rather than stripped, so any
   parent template still renders if it is ever pulled in unmodified. ----- */

/* ---------------------------------------------------------------------------
 * Second pass, added after visually checking the rendered page. The rules
 * below were missed on the first sweep because they sit on the parent's own
 * component classes rather than on elements.
 * ------------------------------------------------------------------------ */

/* Parent: .hero { background: #f5f5f5; text-align: center }.
   A light band across a dark design, and the design's heroes are left-aligned
   with a photographic ground, never centred on grey. ---------------------- */
.hero {
	background: var(--bg-deep);
	text-align: left;
}

/* Parent: .main-navigation ul ul { background: #fff; box-shadow: 0 3px 8px ... }.
   The dropdown submenu. Left alone it renders white-on-white text.

   NEUTRALISE ONLY. An earlier version of this rule also gave the ul a ground,
   a border and a radius, which drew a whole second panel: custom.css already
   paints the real one on ul::before, inset 8px from the top so there is a
   hover-safe gap between the trigger and the panel. Two panels meant the ul's
   own top border showed as a stray line across the top of the dropdown, and
   its overflow:hidden clipped the real panel's shadow.

   The panel belongs to ::before. This rule's only job is to undo the parent.
   ------------------------------------------------------------------------ */
.main-navigation ul ul {
	background: transparent;
	box-shadow: none;
}

/* Parent: input[type="text"], ..., textarea {
       color: #666; border: 1px solid #ccc; border-radius: 3px; padding: 3px }

   The Underscores light-mode form reset, and the single most consequential
   parent rule in this theme. It is a type-plus-attribute selector at (0,1,1);
   every field rule this theme writes is a single class at (0,1,0), so the
   parent won every one of them at rest. The fields were therefore rendering
   with a #ccc hairline, #666 text and 3px of padding on the navy ground, and
   only snapped to the design the moment they took focus, because the :focus
   block below is the one place that was ever qualified enough to win.

   #666 on --bg is roughly 2.8:1, so this was an AA failure on every field on
   the site, not only a cosmetic one.

   Restated here at the same specificity with the design's own resting
   appearance, so a field is correct by default and a component declares only
   what genuinely differs. A component that does differ has to outrank this
   block with an attribute qualifier, which is the construction
   newsletter-signup.css already documents for its :focus fill.

   Background stays transparent rather than --panel-field: most fields in the
   design sit on the page ground, and the two that sit on the inverted panel
   say so themselves.

   select is in the list even though the parent never touched it, and so has
   the opposite problem: nothing styled it at all, so it fell back to the
   platform control and rendered square and borderless next to the rounded
   text fields beside it. A bare type selector at (0,0,1), so any component
   that needs a different select still wins with a single class.
   ---------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
	padding: var(--gap-sm) var(--gap-md);
	border: 1px solid var(--control-line);
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--fg);
}

/* Parent: input[type=...]:focus { color: #111 }. Near-black text on a dark
   field the moment the user focuses it. --------------------------------- */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
textarea:focus {
	color: var(--panel-field-fg);
	background: var(--panel-field);
}

/* Parent: nothing. Browsers draw native checkboxes and radios in their own
   accent, which on this site is a mid blue against a navy ground and a colour
   that appears nowhere in the design. accent-color hands them the theme's own
   without replacing the native control, so the platform keeps its focus ring,
   its keyboard behaviour and its high-contrast-mode rendering. ----------- */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--accent);
}

input::placeholder,
textarea::placeholder {
	color: var(--panel-field-ph);
}

/* Parent: .cta-band .button-primary { background: #fff; color: #1a1a1a } -- */
.cta-band .button-primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-fg);
}

/* Parent: .feature-icon and .image-placeholder use #e2e2e2 blocks.
   Replaced with an on-palette lift so a placeholder never reads as a
   light hole punched in the page. ---------------------------------------- */
.feature-icon,
.about-split .image-placeholder {
	background: var(--panel-card);
	border: 1px solid var(--card-line);
	color: var(--faint);
	border-radius: var(--radius-lg);
}

.feature-icon {
	border-radius: var(--radius-pill);
}

/* Parent: pre { background: #eee } ------------------------------------- */
pre {
	background: var(--well);
	color: var(--fg-2);
}

/* Parent: a light #eee divider under every nav list item. The divider itself
   suits the mobile drawer and matches the design's hairline language, so the
   colour is corrected rather than the rule removed. Desktop has no dividers,
   so it is cleared there. Found by inspecting computed styles: the first two
   sweeps of this file both missed it. -------------------------------------- */
.main-navigation .nav-menu li,
.main-navigation .nav-menu ul li {
	border-bottom-color: var(--line);
}

@media (min-width: 1024px) {
	.main-navigation .nav-menu li,
	.main-navigation .nav-menu ul li {
		border-bottom: 0;
	}
}

/* Parent: .site-header { border-bottom: 1px solid #e2e2e2 }.
   A near-white hairline under the header on a navy site, sitting there since
   Stage 2 and never overridden: the same class of miss as the form reset, and
   found the same way, by reading computed styles rather than the stylesheets.

   Kept as a 1px transparent border rather than removed outright, so the stuck
   state below can colour it without the header changing height and nudging
   the whole page by a pixel. Single class, and this file loads after the
   parent's style.css, so source order settles it. ------------------------- */
.site-header {
	border-bottom: 1px solid transparent;
}

/* Parent: .cta-band { text-align: center }.
   The design's promise band is a two-column grid, both columns ranged left:
   the heading on the left, the paragraph and the button on the right. The
   parent centring made every line of it centre-aligned, which read as a
   different component entirely. Nothing in the design centres this band. --- */
.cta-band {
	text-align: start;
}

/* Parent: .site-footer { background-color: #1a1a1a }.
   A near-black grey under a navy site. The design's footer carries no ground
   of its own at all: it sits on the page and is separated by a hairline, which
   is what the border-top in the footer's own rules already does. ----------- */
.site-footer {
	background-color: var(--bg);
}