/* =============================================================================
   17-buttons.css
   Button component. Order-sensitive: sizes must stay after colours.

   Split out of style.css, which had grown to 3,647 lines. Loaded via
   wp_enqueue_style() in inc/enqueue.php - the load ORDER there matches the
   numeric filename order, and matches the order these rules appeared in the
   original file, so the cascade is unchanged.
   ============================================================================= */
/* ==========================================================================
   || BUTTONS ||
   ==========================================================================
   HOW THIS WORKS: one shared "base" rule (typography, padding, border
   shape, transition - the stuff every button has regardless of colour)
   plus a small per-colour block that only sets border/background/text
   colours. This replaced 5 near-identical ~90-line blocks (one per
   colour) that each repeated the same base properties - if the base ever
   needed to change (e.g. a different corner radius) it meant editing it
   in 5 places. Now there's exactly one place.

   The base rule uses attribute selectors like [class*="_solid_btn"] -
   "any element whose class attribute CONTAINS this text" - instead of
   spelling out every colour explicitly (orange_solid_btn, blue_solid_btn,
   purple_solid_btn...). That means adding a brand new colour later only
   needs its own small colour block below; it's automatically picked up
   by the shared base with zero other edits.

   Four style variants per brand colour (swap "orange" for purple / blue /
   grey / yellow):
     .orange_solid_btn    filled with the colour        -> transparent on hover
     .orange_outline_btn  transparent (or white) outline -> filled on hover
     .orange_soft_btn     tinted background version of solid - quieter,
                           for secondary actions that shouldn't compete
                           with a solid button on the same screen
     .orange_black_btn    filled black                  -> fills with the colour on hover
   Colours/tints come from the :root variables at the top of this file.
   Selectors are written as `a.x, .x` so they beat the generic `a.button`
   rule above; safe to combine with class="button" in the markup.

   SIZES: .button_sm / .button_md / .button_lg, added as an EXTRA class
   alongside any of the above, e.g. class="orange_solid_btn button_md".
   These are deliberately declared at the very end of this section, AFTER
   every colour block. A size class and a colour class both have the same
   specificity (one class each) - CSS breaks that tie by picking whichever
   was declared LAST in the file, not by which one seems more specific to
   a person reading it. So a same-specificity override only works if it's
   physically later in the stylesheet; no !important or extra classes
   needed, just position. (This is also why editing .ev_book in
   template_events_workshops.php's own styles never visibly changed the
   button there - that rule sat earlier in the file than this one.)
   ========================================================================== */

/* --- Purple #9358a3 - Agency --- */
.purple_solid_btn, a.purple_solid_btn,
.purple_outline_btn, a.purple_outline_btn,
.purple_hover_btn, a.purple_hover_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, a.purple_solid_btn:focus {
	background-color: transparent;
	color: var(--js-purple);
}
.purple_outline_btn, a.purple_outline_btn,
.purple_hover_btn, a.purple_hover_btn {
	background-color: transparent;
	color: var(--js-purple);
}
.purple_outline_btn:hover, a.purple_outline_btn:hover,
.purple_outline_btn:focus, a.purple_outline_btn:focus,
.purple_hover_btn:hover, a.purple_hover_btn:hover,
.purple_hover_btn:focus, a.purple_hover_btn:focus {
	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, a.purple_soft_btn:focus {
	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, a.purple_black_btn:focus {
	background-color: var(--js-purple);
	border-color: var(--js-purple);
	color: var(--js-white);
}

/* --- Blue #0eb4ab - 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, a.blue_solid_btn:focus {
	background-color: transparent;
	color: var(--js-blue);
}
.blue_outline_btn, a.blue_outline_btn {
	background-color: transparent;
	color: var(--js-blue);
}
.blue_outline_btn:hover, a.blue_outline_btn:hover,
.blue_outline_btn:focus, a.blue_outline_btn:focus {
	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);
}
.blue_soft_btn:hover, a.blue_soft_btn:hover,
.blue_soft_btn:focus, a.blue_soft_btn:focus {
	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, a.blue_black_btn:focus {
	background-color: var(--js-blue);
	border-color: var(--js-blue);
	color: var(--js-white);
}

/* --- Grey #575b5c - neutral / secondary actions --- */
.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, a.grey_solid_btn:focus {
	background-color: transparent;
	color: var(--js-grey);
}
.grey_outline_btn, a.grey_outline_btn {
	/* Historically white, not transparent, unlike the other colours'
	   outline variant - kept as-is so existing usages don't shift. */
	background-color: var(--js-white);
	color: var(--js-grey);
}
.grey_outline_btn:hover, a.grey_outline_btn:hover,
.grey_outline_btn:focus, a.grey_outline_btn:focus {
	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, a.grey_soft_btn:focus {
	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, a.grey_black_btn:focus {
	background-color: var(--js-grey);
	border-color: var(--js-grey);
	color: var(--js-white);
}

/* --- Orange #f15f48 - 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, a.orange_solid_btn:focus {
	background-color: transparent;
	color: var(--js-orange);
}
.orange_outline_btn, a.orange_outline_btn {
	background-color: transparent;
	color: var(--js-orange);
}
.orange_outline_btn:hover, a.orange_outline_btn:hover,
.orange_outline_btn:focus, a.orange_outline_btn:focus {
	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);
}
.orange_soft_btn:hover, a.orange_soft_btn:hover,
.orange_soft_btn:focus, a.orange_soft_btn:focus {
	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, a.orange_black_btn:focus {
	background-color: var(--js-orange);
	border-color: var(--js-orange);
	color: var(--js-white);
}


/* --- Yellow #f0b41d - Jobs Board --- */
.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 {
	/* Yellow is too light for white text, so this uses grey instead -
	   same reasoning as .callout_solid.callout_yellow further down. */
	background-color: var(--js-yellow);
	color: var(--js-grey);
}
.yellow_solid_btn:hover, a.yellow_solid_btn:hover,
.yellow_solid_btn:focus, a.yellow_solid_btn:focus {
	background-color: transparent;
	color: var(--js-yellow);
}
.yellow_outline_btn, a.yellow_outline_btn {
	background-color: transparent;
	color: var(--js-yellow);
}
.yellow_outline_btn:hover, a.yellow_outline_btn:hover,
.yellow_outline_btn:focus, a.yellow_outline_btn:focus {
	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, a.yellow_soft_btn:focus {
	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, a.yellow_black_btn:focus {
	background-color: var(--js-yellow);
	border-color: var(--js-yellow);
	color: var(--js-grey);
}

.orange_transparent_btn, a.orange_transparent_btn {
	background-color: transparent;
	border-color: transparent;
	color: var(--js-orange);
	/* No underline by default - only on hover/focus, see below. Reads as
	   a quiet text link rather than a boxed button, on purpose. */
	text-decoration: none;
	padding: 3px 0;
}
.orange_transparent_btn:hover, a.orange_transparent_btn:hover,
.orange_transparent_btn:focus, a.orange_transparent_btn:focus {
	/* background-color: var(--js-orange-tint); */
	text-decoration: underline;
}

/* --- Shared base: every colour + every style above gets this. Written
   as attribute selectors so a future colour is picked up automatically -
   see the big comment at the top of this section. --- */
[class*="_solid_btn"],
[class*="_outline_btn"],
[class*="_soft_btn"],
[class*="_black_btn"],
[class*="_transparent_btn"],
[class*="_hover_btn"] {
	font-family: "effrabold";
	font-size: 12pt;
	line-height: 15pt;
	padding: 10px 12px;
	margin-bottom: 5px;
	border-width: 1px;
	border-style: solid;
	border-radius: 10px;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
	transition: all 0.15s ease-in-out;
}

/* --- Sizes: MUST stay below every rule above (see the comment at the
   top of this section for why) --- */
.button_sm {
	font-size: 11pt;
	padding: 3px 6px;
	margin: 0px 0px;
	gap: 3px;
}
.button_md {
	font-size: 12pt;
	line-height: 13pt;
	padding: 6px 8px;
	margin-bottom: 0;
	gap: 4px;
}
.button_lg {
	font-size: 13pt;
	padding: 8px 10px;
	gap: 6px;
	letter-spacing: 0.04em;
}