/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.ci-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ci-font-primary);
	font-size: var(--ci-text-button);
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	/* A transparent border of the same width every outlined variant uses, so
	   solid and outlined buttons share one box. Without it, .ci-btn--ghost,
	   --ghost-engage and --secondary each added their 2px border on top of the
	   full padding and came out 4px taller and 4px wider than a solid button —
	   height is content-driven here, so border-box has nothing to absorb it
	   into. The padding is reduced by the same 2px, so the outer size is
	   exactly what it was before. */
	border: 2px solid transparent;
	box-shadow: none;
	border-radius: 9999px;
	padding: calc(0.9rem - 2px) calc(2.25rem - 2px);
	cursor: pointer;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

/* Primary */
.ci-btn--primary {
	background-color: #af4d76;
	color: var(--ci-color-white);
}

/* Innovate */
.ci-btn--innovate {
	background-color: #af4d76;
	color: var(--ci-color-white);
}

/* Develop */
.ci-btn--develop {
	background-color: #af4d76;
	color: var(--ci-color-white);
}

/* Secondary — outlined rose */
.ci-btn--secondary {
	background-color: transparent;
	color: #af4d76;
	border: 2px solid #af4d76;
}

/* Ghost — for use on dark backgrounds */
.ci-btn--ghost {
	background-color: transparent;
	color: var(--ci-color-white);
	border: 2px solid var(--ci-color-white);
}

/* Ghost engage — transparent with orange border */
.ci-btn--ghost-engage {
	background-color: transparent;
	color: #646464;
	border: 2px solid #f99d31;
}

/* Ghost navy — outlined navy, the quiet partner to --navy on light
   backgrounds. Added for the cookie banner, which needs a secondary action
   that carries the same weight as the solid one without competing with it. */
.ci-btn--ghost-navy {
	background-color: transparent;
	color: #253d47;
	border: 2px solid #253d47;
}

/* Navy — solid navy button for light backgrounds */
.ci-btn--navy {
	background-color: #253d47;
	color: var(--ci-color-white);
}

/* Engage — solid orange button for light backgrounds */
.ci-btn--engage {
	background-color: #f99d31;
	color: var(--ci-color-white);
}

/* Coming soon — a button-shaped label for something not open yet.
   Rendered as a <span>, never an <a>: there is nowhere to go, and a link that
   goes nowhere is worse than no link. Lived in cpd.css until the Ofsted
   readiness page needed the same state, at which point one definition loaded
   site-wide beats two that can drift. */
.ci-btn--coming-soon {
	background-color: #d1d5db;
	color: #6b7280;
	border-color: transparent;
	cursor: not-allowed;
	pointer-events: none;
}

/* White — solid white button for coloured backgrounds (CTAs) */
.ci-btn--white {
	background-color: var(--ci-color-white);
	color: var(--ci-color-navy);
}

/* Moss */
.ci-btn--moss {
	background-color: #af4d76;
	color: var(--ci-color-white);
}

/* Slate */
.ci-btn--slate {
	background-color: #af4d76;
	color: var(--ci-color-white);
}

/* Dark — solid navy */
.ci-btn--dark {
	background-color: #af4d76;
	color: var(--ci-color-white);
}

@media (max-width: 767px) {
	.ci-btn {
		/* Same 2px allowance as the base rule. */
		padding: calc(0.85rem - 2px) calc(1.5rem - 2px);
	}
}

/* Press feedback — colour change only, no scale/shadow jump.
   Unlike :hover, :active fires on touch, so this is what mobile users see on tap. */
.ci-btn--primary:active,
.ci-btn--innovate:active,
.ci-btn--develop:active,
.ci-btn--moss:active,
.ci-btn--slate:active,
.ci-btn--dark:active {
	background-color: #8f3a5e;
	color: var(--ci-color-white);
}

.ci-btn--ghost-navy:active {
	background-color: #253d47;
	color: var(--ci-color-white);
}

.ci-btn--secondary:active {
	background-color: #af4d76;
	color: var(--ci-color-white);
	border-color: #af4d76;
}

.ci-btn--ghost:active {
	background-color: var(--ci-color-white);
	color: var(--ci-color-navy);
}

.ci-btn--ghost-engage:active,
.ci-btn--ghost-engage.is-pressed {
	background-color: #f99d31;
	color: #ffffff;
}

.ci-btn--navy:active {
	background-color: #1a2d35;
	color: var(--ci-color-white);
}

.ci-btn--engage:active {
	background-color: #e08820;
	color: var(--ci-color-white);
}

.ci-btn--white:active {
	background-color: #f0f0f0;
	color: var(--ci-color-navy);
}

@media (hover: hover) and (pointer: fine) {
	.ci-btn--primary:hover  { background-color: #8f3a5e; color: var(--ci-color-white); }
	.ci-btn--innovate:hover { background-color: #8f3a5e; color: var(--ci-color-white); }
	.ci-btn--develop:hover  { background-color: #8f3a5e; color: var(--ci-color-white); }
	.ci-btn--moss:hover     { background-color: #8f3a5e; color: var(--ci-color-white); }
	.ci-btn--slate:hover    { background-color: #8f3a5e; color: var(--ci-color-white); }
	.ci-btn--dark:hover     { background-color: #8f3a5e; color: var(--ci-color-white); }

	.ci-btn--secondary:hover {
		background-color: #af4d76;
		color: var(--ci-color-white);
		border-color: #af4d76;
	}

	.ci-btn--ghost:hover {
		background-color: var(--ci-color-white);
		color: var(--ci-color-navy);
	}

	.ci-btn--ghost-navy:hover {
		background-color: #253d47;
		color: var(--ci-color-white);
	}

	.ci-btn--ghost-engage:hover {
		background-color: #f99d31;
		color: #ffffff;
	}

	.ci-btn--navy:hover {
		background-color: #1a2d35;
		color: var(--ci-color-white);
	}

	.ci-btn--engage:hover {
		background-color: #e08820;
		color: var(--ci-color-white);
	}

	.ci-btn--white:hover {
		background-color: #f0f0f0;
		color: var(--ci-color-navy);
	}
}


/* ═══════════════════════════════════════════════════════════════════════════
   .ci-btn__long — words that only earn their place on a wide button

   A few labels are written for a desktop split panel and wrap to two lines on
   a phone, which on a pill button looks like a mistake rather than a long
   label. Wrapping the droppable words in this span lets the label stay full
   where there is room and shorten where there isn't, instead of shortening it
   everywhere.

   display: none, deliberately — it takes the words out of the accessibility
   tree as well as off the screen, so what a screen reader announces on a
   phone matches what is drawn on it. Only use it on words the surrounding
   copy already supplies; the short form has to stand on its own.
   ═══════════════════════════════════════════════════════════════════════════ */

/* .ci-btn is display:flex, so loose text beside a <span> would become two
   separate flex items on separate lines. .ci-btn__label wraps the whole
   label as one item; .ci-btn__long marks the part inside it that can go. */
.ci-btn__label { display: inline; }

/* Two bands, because the button's width does not follow the viewport's.
   
   The only label using this sits in a .page-split__text panel, which is half
   the viewport wide with 80px of padding each side above the split's 1024px
   stacking point, and full width below it. So the space the label gets does
   not shrink steadily as the screen does — it drops by half at 1025px and
   jumps back at 1024px:

     >= 1280px   panel content 460px+     full label fits on one line
     1025-1279   panel content 420-458    HALF-WIDTH PANEL — wraps to two
     601-1024    panel is full width      full label fits again
     <= 600px    panel is a phone column  wraps to two

   The upper bound comes from measurement, and the first attempt at it was
   wrong in an instructive way. The full label is 392px of text plus the
   button's 68px of padding, so it needs 460px; the panel gives half the
   viewport minus 160px of its own padding, which suggested 1240px. At exactly
   1240px it still wrapped — because the split's grid also has a 0.3rem gap
   between the columns, making the real figure (W - 4.8) / 2 - 160 and the
   true threshold 1245px. 1280 is the round number above that, with enough
   margin that a copy tweak or a different scrollbar width cannot push a
   two-line label back into the "fits" band. The cost is that between 1245 and
   1279 the short label shows where the long one would just fit, which is
   invisible; the alternative failure is a wrapped pill, which is not.

   iPad landscape at 1180px sits in the middle of the upper band, which is
   where this showed up. */
@media (max-width: 600px), (min-width: 1025px) and (max-width: 1279px) {
	.ci-btn__long { display: none; }
}


/* ── [cs-btn] in post content ──────────────────────────────────────────────
   Centred, matching .cs-lm-trigger-wrap, so a button and a form button in the
   same article line up rather than one sitting left and the other centred. */
.ci-btn-wrap {
	display: flex;
	justify-content: center;
	margin: 2.5rem 0;
}

@media (max-width: 600px) {
	.ci-btn-wrap {
		margin: 2rem 0;
	}
}

/* ── When the shortcode has been dropped inside a Gutenberg Buttons block ──
   Editors do this — the block is called "Buttons", so it looks like where a
   button belongs. It is Gutenberg's own button UI though, with its own
   alignment control, and it wraps our shortcode in two more elements:

       .wp-block-buttons   flex, justify-content from the block's setting
         .wp-block-button  a flex item, so it shrinks to its content
           .ci-btn-wrap    ours — centring inside a box the width of the button

   The wrapper was doing its job perfectly, inside a parent 425px wide sitting
   at the left of a 780px column. Nothing inside can fix that, so these two
   rules reach up: the outer block centres, and the inner one is allowed to
   fill. Only when one of our buttons is actually in there — a Buttons block
   holding real Gutenberg buttons keeps whatever alignment it was given.

   :has() is used because CSS has no other way to style an ancestor, and this
   markup is written by the editor rather than by us. Where it is unsupported
   the button simply keeps the block's own alignment, which is what happens
   today. */
.wp-block-buttons:has(.ci-btn-wrap) {
	justify-content: center;
}

.wp-block-button:has(.ci-btn-wrap) {
	flex: 1;
}

/* The block adds its own vertical margins on top of the wrapper's. */
.wp-block-buttons:has(.ci-btn-wrap) .ci-btn-wrap {
	margin-top: 0;
	margin-bottom: 0;
}