/* =============================================================================
	04-buttons.css — buttons and inline link affordances
	the .{colour}_{style}_btn system, and the small "Read more" / "Opens in new tab" / "Download" links that behave like buttons.

	HOW THE BUTTON SYSTEM WORKS: One shared base rule holds everything every button has. Each colour block only sets border, background and text colour. The base is matched with attribute selectors — [class*="_solid_btn"]

	Class names: .{colour}_{style}_btn, plus an optional size class.
		colour  purple  blue  grey  orange  yellow
		style   solid       filled, empties out on hover
						outline     empty, fills on hover
						soft        tinted — for a secondary action beside a solid one
						black       filled black, fills with the colour on hover
		 size    button_sm  button_md  button_lg      e.g. class="blue_solid_btn button_md"

	 ORDER IS LOad-BEARING. A size class and a colour class have the same specificity, so the tie is broken by whichever is written LAST in the file —
	 which is why the sizes sit at the very bottom. Moving them up would silently stop them working.

	 Not every colour/style pair is used; the set is kept complete so a page can reach for one without a new rule being written first.
	 ============================================================================= */

/* --- a.button — the original black button ---------------------------------
	Predates the colour system below and several templates still use it. It is written FIRST on purpose: a.button and a.purple_outline_btn have identical specificity, so the one written later wins, and the colour should win.
	New work should use .{colour}_{style}_btn on its own.
	 -------------------------------------------------------------------------- */
a.button {
	display: inline-block;
	font-family: var(--js-font-bold);
	font-size: 1.75rem;
	line-height: 1.25;
	padding: 0.9375rem 1.25rem;
	border-radius: 10px;
	background-color: var(--js-black);
	color: var(--js-white);
	text-decoration: none;
}

/* --- Purple — Agency ------------------------------------------------------ */
.purple_solid_btn, a.purple_solid_btn,
.purple_outline_btn, a.purple_outline_btn,
.purple_soft_btn, a.purple_soft_btn,
.purple_black_btn, a.purple_black_btn {
	border-color: var(--js-purple);
}
.purple_solid_btn, a.purple_solid_btn {
	background-color: var(--js-purple);
	color: var(--js-white);
}
.purple_solid_btn:hover, a.purple_solid_btn:hover,
.purple_solid_btn:focus-visible, a.purple_solid_btn:focus-visible {
	background-color: transparent;
	color: var(--js-purple);
}
.purple_outline_btn, a.purple_outline_btn {
	background-color: transparent;
	color: var(--js-purple);
}
.purple_outline_btn:hover, a.purple_outline_btn:hover,
.purple_outline_btn:focus-visible, a.purple_outline_btn:focus-visible {
	background-color: var(--js-purple);
	color: var(--js-white);
}
.purple_soft_btn, a.purple_soft_btn {
	background-color: var(--js-purple-tint);
	border-color: var(--js-purple-tint);
	color: var(--js-purple);
}
.purple_soft_btn:hover, a.purple_soft_btn:hover,
.purple_soft_btn:focus-visible, a.purple_soft_btn:focus-visible {
	background-color: var(--js-purple);
	border-color: var(--js-purple);
	color: var(--js-white);
}
.purple_black_btn, a.purple_black_btn {
	background-color: var(--js-black);
	border-color: var(--js-black);
	color: var(--js-white);
}
.purple_black_btn:hover, a.purple_black_btn:hover,
.purple_black_btn:focus-visible, a.purple_black_btn:focus-visible {
	background-color: var(--js-purple);
	border-color: var(--js-purple);
	color: var(--js-white);
}

/* --- Blue — Advice & Resources -------------------------------------------- */
.blue_solid_btn, a.blue_solid_btn,
.blue_outline_btn, a.blue_outline_btn,
.blue_soft_btn, a.blue_soft_btn,
.blue_black_btn, a.blue_black_btn {
	border-color: var(--js-blue);
}
.blue_solid_btn, a.blue_solid_btn {
	background-color: var(--js-blue);
	color: var(--js-white);
}
.blue_solid_btn:hover, a.blue_solid_btn:hover,
.blue_solid_btn:focus-visible, a.blue_solid_btn:focus-visible {
	background-color: transparent;
	color: var(--js-blue-ink);
}
.blue_outline_btn, a.blue_outline_btn {
	background-color: transparent;
	color: var(--js-blue-ink);
}
.blue_outline_btn:hover, a.blue_outline_btn:hover,
.blue_outline_btn:focus-visible, a.blue_outline_btn:focus-visible {
	background-color: var(--js-blue);
	color: var(--js-white);
}
.blue_soft_btn, a.blue_soft_btn {
	background-color: var(--js-blue-tint);
	border-color: var(--js-blue-tint);
	color: var(--js-blue-ink);
}
.blue_soft_btn:hover, a.blue_soft_btn:hover,
.blue_soft_btn:focus-visible, a.blue_soft_btn:focus-visible {
	background-color: var(--js-blue);
	border-color: var(--js-blue);
	color: var(--js-white);
}
.blue_black_btn, a.blue_black_btn {
	background-color: var(--js-black);
	border-color: var(--js-black);
	color: var(--js-white);
}
.blue_black_btn:hover, a.blue_black_btn:hover,
.blue_black_btn:focus-visible, a.blue_black_btn:focus-visible {
	background-color: var(--js-blue);
	border-color: var(--js-blue);
	color: var(--js-white);
}

/* --- Grey — neutral / secondary ------------------------------------------- */
.grey_solid_btn, a.grey_solid_btn,
.grey_outline_btn, a.grey_outline_btn,
.grey_soft_btn, a.grey_soft_btn,
.grey_black_btn, a.grey_black_btn {
	border-color: var(--js-grey);
}
.grey_solid_btn, a.grey_solid_btn {
	background-color: var(--js-grey);
	color: var(--js-white);
}
.grey_solid_btn:hover, a.grey_solid_btn:hover,
.grey_solid_btn:focus-visible, a.grey_solid_btn:focus-visible {
	background-color: transparent;
	color: var(--js-grey);
}
.grey_outline_btn, a.grey_outline_btn {
	/* White rather than transparent, unlike the other colours — kept so
		 existing usages don't shift when they sit on a tinted panel. */
	background-color: var(--js-white);
	color: var(--js-grey);
}
.grey_outline_btn:hover, a.grey_outline_btn:hover,
.grey_outline_btn:focus-visible, a.grey_outline_btn:focus-visible {
	background-color: var(--js-grey);
	color: var(--js-white);
}
.grey_soft_btn, a.grey_soft_btn {
	background-color: var(--js-grey-tint);
	border-color: var(--js-grey-tint);
	color: var(--js-grey);
}
.grey_soft_btn:hover, a.grey_soft_btn:hover,
.grey_soft_btn:focus-visible, a.grey_soft_btn:focus-visible {
	background-color: var(--js-grey);
	border-color: var(--js-grey);
	color: var(--js-white);
}
.grey_black_btn, a.grey_black_btn {
	background-color: var(--js-black);
	border-color: var(--js-black);
	color: var(--js-white);
}
.grey_black_btn:hover, a.grey_black_btn:hover,
.grey_black_btn:focus-visible, a.grey_black_btn:focus-visible {
	background-color: var(--js-grey);
	border-color: var(--js-grey);
	color: var(--js-white);
}

/* --- Orange — Events & Workshops ------------------------------------------ */
.orange_solid_btn, a.orange_solid_btn,
.orange_outline_btn, a.orange_outline_btn,
.orange_soft_btn, a.orange_soft_btn,
.orange_black_btn, a.orange_black_btn {
	border-color: var(--js-orange);
}
.orange_solid_btn, a.orange_solid_btn {
	background-color: var(--js-orange);
	color: var(--js-white);
}
.orange_solid_btn:hover, a.orange_solid_btn:hover,
.orange_solid_btn:focus-visible, a.orange_solid_btn:focus-visible {
	background-color: transparent;
	color: var(--js-orange-ink);
}
.orange_outline_btn, a.orange_outline_btn {
	background-color: transparent;
	color: var(--js-orange-ink);
}
.orange_outline_btn:hover, a.orange_outline_btn:hover,
.orange_outline_btn:focus-visible, a.orange_outline_btn:focus-visible {
	background-color: var(--js-orange);
	color: var(--js-white);
}
.orange_soft_btn, a.orange_soft_btn {
	background-color: var(--js-orange-tint);
	border-color: var(--js-orange-tint);
	color: var(--js-orange-ink);
}
.orange_soft_btn:hover, a.orange_soft_btn:hover,
.orange_soft_btn:focus-visible, a.orange_soft_btn:focus-visible {
	background-color: var(--js-orange);
	border-color: var(--js-orange);
	color: var(--js-white);
}
.orange_black_btn, a.orange_black_btn {
	background-color: var(--js-black);
	border-color: var(--js-black);
	color: var(--js-white);
}
.orange_black_btn:hover, a.orange_black_btn:hover,
.orange_black_btn:focus-visible, a.orange_black_btn:focus-visible {
	background-color: var(--js-orange);
	border-color: var(--js-orange);
	color: var(--js-white);
}

/* A text link wearing button classes: no box, underline on hover only. */
.orange_transparent_btn, a.orange_transparent_btn {
	background-color: transparent;
	border-color: transparent;
	color: var(--js-orange-ink);
	text-decoration: none;
	padding: 3px 0;
}
.orange_transparent_btn:hover, a.orange_transparent_btn:hover,
.orange_transparent_btn:focus-visible, a.orange_transparent_btn:focus-visible {
	text-decoration: underline;
}

/* --- Yellow — Jobs Board --------------------------------------------------
	 Yellow is too light to carry white text, so the solid variants use grey. */
.yellow_solid_btn, a.yellow_solid_btn,
.yellow_outline_btn, a.yellow_outline_btn,
.yellow_soft_btn, a.yellow_soft_btn,
.yellow_black_btn, a.yellow_black_btn {
	border-color: var(--js-yellow);
}
.yellow_solid_btn, a.yellow_solid_btn {
	background-color: var(--js-yellow);
	color: var(--js-grey);
}
.yellow_solid_btn:hover, a.yellow_solid_btn:hover,
.yellow_solid_btn:focus-visible, a.yellow_solid_btn:focus-visible {
	background-color: transparent;
	color: var(--js-yellow-ink);
}
.yellow_outline_btn, a.yellow_outline_btn {
	background-color: transparent;
	color: var(--js-yellow-ink);
}
.yellow_outline_btn:hover, a.yellow_outline_btn:hover,
.yellow_outline_btn:focus-visible, a.yellow_outline_btn:focus-visible {
	background-color: var(--js-yellow);
	color: var(--js-grey);
}
.yellow_soft_btn, a.yellow_soft_btn {
	background-color: var(--js-yellow-tint);
	border-color: var(--js-yellow-tint);
	color: var(--js-yellow-ink);
}
.yellow_soft_btn:hover, a.yellow_soft_btn:hover,
.yellow_soft_btn:focus-visible, a.yellow_soft_btn:focus-visible {
	background-color: var(--js-yellow);
	border-color: var(--js-yellow);
	color: var(--js-grey);
}
.yellow_black_btn, a.yellow_black_btn {
	background-color: var(--js-black);
	border-color: var(--js-black);
	color: var(--js-white);
}
.yellow_black_btn:hover, a.yellow_black_btn:hover,
.yellow_black_btn:focus-visible, a.yellow_black_btn:focus-visible {
	background-color: var(--js-yellow);
	border-color: var(--js-yellow);
	color: var(--js-grey);
}

/* --- Shared base: picked up by every colour and style above --------------- */
[class*="_solid_btn"],
[class*="_outline_btn"],
[class*="_soft_btn"],
[class*="_black_btn"],
[class*="_transparent_btn"] {
	display: inline-block;
	font-family: var(--js-font-bold);
	font-size: 1rem;
	line-height: 1.25;
	padding: 0.625rem 0.75rem;
	margin-bottom: 0.3125rem;
	border: 1px solid;
	border-radius: 10px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.15s ease-in-out;
}

/* --- Sizes: MUST stay below every rule above (see the note at the top) ----- */
.button_sm {
	font-size: 0.9375rem;
	padding: 0.1875rem 0.375rem;
	margin: 0;
}
.button_md {
	font-size: 1rem;
	line-height: 1.1;
	padding: 0.375rem 0.5rem;
	margin-bottom: 0;
}
.button_lg {
	font-size: 1.125rem;
	padding: 0.5rem 0.625rem;
	letter-spacing: 0.04em;
}

/* =============================================================================
	 INLINE LINK AFFORDANCES
	 .read_more        quiet — invisible until the link around it is hovered
	 .open_in_new_tab  loud  — a card's primary action, always visible
	 .download_file    a file download
	 All three share an underline that grows from the left on hover.
	 ============================================================================= */
.read_more,
.open_in_new_tab,
.download_file {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	margin: 0;
	padding-bottom: 2px;

	/* Set --read_more_colour on ANY ancestor (a section, a card) to recolour
		 these. Custom properties inherit, so no stronger selector is needed. */
	color: var(--read_more_colour, inherit);

	/* The underline is a background image grown from 0 to full width, NOT an
		 ::after. An ::after would need position: relative here, which would make
		 this link the containing block for any overlay hung off it — see
		 .stretch_link in 15-advice-resources.css. For the same reason there is
		 no transform on hover: the card may lift, this link must not. */
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: opacity 0.2s ease-in-out, background-size 0.3s ease-in-out;
}

.read_more {
	opacity: 0;
}

.open_in_new_tab {
	font-family: var(--js-font-bold);
	font-size: 1.25rem;
	color: var(--js-blue-ink);
}

.download_file {
	font-size: 1.25rem;
	color: var(--js-grey);
}

/* The trigger. The a.* pairs cover a link carrying the class itself, rather
	 than wrapping an element that carries it. */
a:hover .read_more,
a:focus-visible .read_more,
a.read_more:hover,
a.read_more:focus-visible,
a.open_in_new_tab:hover,
a.open_in_new_tab:focus-visible,
a.download_file:hover,
a.download_file:focus-visible {
	opacity: 1;
	background-size: 100% 1px;
}

/* Touch screens have no hover, so opacity: 0 would hide .read_more for good. */
@media (hover: none) {
	.read_more {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.read_more,
	.open_in_new_tab,
	.download_file {
		transition: none;
	}
}

/* ============================================================================= */

@media (max-width: 1000px) {
	a.button {
		font-size: 1.25rem;
		line-height: 1.45;
	}
}