:root {
	--btn-bg: var(--color-black);
	--btn-color: var(--color-black);
	--btn-filled-bg: var(--color-black);
	--btn-filled-color: var(--color-white);
}

button {
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Harmonised with the Apply Online button system (assets/css/layouts/
   apply-online.css, .ao-btn), which is the site's design authority for
   CTAs.

   What changed and why: the base button was set in var(--font-mono)
   (Inconsolata) at var(--text-lg), and the loud variants below pushed
   that to var(--text-2xl) — a 24px monospace CTA, which reads as a code
   sample rather than a button and looked nothing like the flagship page
   students are being sent to. Font, size, weight, padding and radius now
   match .ao-btn exactly, so a CTA looks the same wherever a student meets
   it.

   min-height matches .ao-btn's 3rem, which also clears the 44px minimum
   touch target on mobile — the old 0.5rem padding produced buttons below
   that on some variants.

   Reversible: assets/css/framework/buttons.css.bakBTN-* on the server. */
.btn {
	display: inline-flex;
	padding: var(--spacing-4) var(--spacing-5);
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	color: var(--btn-color);
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 8px;
	font-family: var(--font-sans);
	white-space: nowrap;
	background: none;
}
/* The framework had no visible focus state on buttons at all — a
   keyboard user could not see where they were. Same treatment as
   .ao-btn:focus-visible. */
.btn:focus-visible {
	outline: 3px solid var(--brand-navy, #0F172A);
	outline-offset: 2px;
}
.btn svg {
	margin-right: 0.75rem;
	min-width: 1rem;
}
.btn--outlined {
	border-color: var(--color-gray-400);
}
.btn--outlined.btn--white {
	border-color: var(--color-white);
	color: var(--color-white);
}
/* WhatsApp's own brand green, matching the mobile floating CTA bar
   (assets/css/site/mobile-cta-bar.css) so the colour reads as WhatsApp
   wherever it appears, not just the site's generic CTA yellow. */
.btn--call,
li.menu-item a.call-cta {
	border-radius: 999px !important;
}
/* Hero/boxed WhatsApp button: same plain solid green as the mobile
   floating bar (no pill shape, no icon) — same corner radius as every
   other .btn (matches Apply Online sitting next to it). .btn--box-call
   was previously grouped into the pill-radius rule above, which directly
   contradicted this comment and forced a 999px pill shape onto the boxed
   CTA button (site/snippets/kirbytags/cta.php) with no way for the rule
   below to override it, since border-radius here was !important. Removed
   from that group so it falls back to the standard .btn border-radius
   (var(--rounded)) already declared above, matching Apply Online next to
   it as the comment always said it should. */
/* Secondary weight next to Apply Online (the one dominant CTA per page):
   outlined rather than solid-filled, so it reads as "also available" not
   "equally important." Still unmistakably WhatsApp green. */
.btn--whatsapp {
	border-color: var(--whatsapp-green);
	background: transparent;
	color: var(--whatsapp-green) !important;
}
.btn--whatsapp:hover {
	background: var(--whatsapp-green);
	color: var(--color-white) !important;
}
.wa-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.6em;
	height: 1.6em;
	min-width: 1.6em;
	border-radius: 50%;
	background: var(--color-white);
	margin-right: var(--spacing-2);
}
.wa-icon svg {
	width: 60%;
	height: 60%;
}
.btn--filled {
	border-color: var(--btn-filled-bg);
	background: var(--btn-filled-bg);
	color: var(--btn-filled-color) !important;
}
.btn--filled svg {
	color: var(--btn-cta-bg);
}


.btn--cta {
	text-decoration: none;
	border-color: var(--btn-cta-bg);
	background: var(--btn-cta-bg);
	color: var(--btn-cta-color) !important;
}
.btn--cta:hover {
	background: var(--btn-cta-bg-hover);
}
.btn--cta:after {
	content: "→";
	margin-left: var(--spacing-4);
}
.btn--cta svg {
	color: var(--color-green-600);
}



.btn--offer {
	text-decoration: none;
	border-color: var(--btn-offer-bg);
	background: var(--btn-offer-bg);
	color: var(--btn-offer-color) !important;
}
.btn--offer:hover {
	background: var(--btn-offer-bg-hover);
}
.btn--offer:after {
	content: "→";
	margin-left: var(--spacing-4);
}
.btn--offer svg {
	color: var(--btn-offer-bg-hover);
}



.btn--menu {
	text-decoration: none;
	border-color: var(--btn-menu-bg);
	background: var(--btn-menu-bg);
	color: var(--btn-menu-color) !important;
}
.btn--menu:hover {
	background: var(--btn-menu-bg-hover);
}
/*.btn--menu:after {
	content: "→";
	margin-left: var(--spacing-4);
}*/
.btn--menu svg {
	color: var(--color-green-600);
}


.btn--call {
	text-decoration: none;
	border-color: var(--whatsapp-green);
	background: var(--whatsapp-green);
	color: var(--color-white) !important;
}
.btn--call:hover {
	background: var(--whatsapp-green-hover);
}
.btn--call:after {
/*	content: "→";
	margin-left: var(--spacing-4);*/
}
.btn--call svg {
	color: var(--color-green-600);
}



.btn--box {
	text-decoration: none;
	border-color: var(--btn-box-bg);
	background: var(--btn-box-bg);
	color: var(--btn-box-color) !important;
	box-shadow: 0 -2px 0 0 rgba(0,0,0,.1) inset;
}
.btn--box:hover {
	background: var(--btn-box-bg-hover);
}
.btn--box:after {
	content: "→";
	margin-left: var(--spacing-4);
}
.btn--box svg {
	color: var(--color-green-600);
}


.btn--apply {
	text-decoration: none;
	border-color: var(--btn-apply-bg);
	background: var(--btn-apply-bg);
	color: var(--btn-apply-color) !important;
}
.btn--apply:hover {
	filter: brightness(1.15);
}
.btn--apply:after {
	content: "→";
	margin-left: var(--spacing-2);
}


.btn--box-call {
	text-decoration: none;
	background: var(--color-call-btn-bg);
	color: var(--color-call-btn-text) !important;
	border-bottom: 0px solid var(--color-call-btn-border);
	box-shadow: 0 -2px 0 0 rgba(0,0,0,.1) inset;
}
.btn--box-call:hover {
	background: var(--color-call-btn-bg);
}
.btn--box-call:after {
	content: "→";
	margin-left: var(--spacing-4);
}
.btn--box-call svg {
	color: var(--color-call-btn-bg);
}