/* CK Shared Button Styles */
.ck-button {
	display: inline-block;
	font-family: var(--ck-font-body);
	font-weight: 900;
	font-size: 14px;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--ck-button-border-radius);
	padding: 20px 20px;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
	line-height: 1;
	box-sizing: border-box;
	border: var(--ck-button-border-width) solid transparent;
}

/* Button 1: Outline (default) */
.ck-button,
.ck-button--outline {
	color: var(--ck-dark-navy);
	border-color: var(--ck-dark-navy);
	background: transparent;
}

.ck-button:hover,
.ck-button--outline:hover {
	background-color: var(--ck-dark-navy);
	color: var(--ck-white);
}

/* Button 2: Solid Dark */
.ck-button--solid {
	background-color: var(--ck-dark-navy);
	border-color: var(--ck-dark-navy);
	color: var(--ck-white);
}

.ck-button--solid:hover {
	background-color: var(--ck-primary-blue);
	border-color: var(--ck-primary-blue);
	color: var(--ck-white);
}

/* Button 3: Blue */
.ck-button--blue {
	background-color: var(--ck-primary-blue);
	border-color: var(--ck-primary-blue);
	color: var(--ck-dark-navy);
}

.ck-button--blue:hover {
	background-color: var(--ck-dark-navy);
	border-color: var(--ck-dark-navy);
	color: var(--ck-primary-blue);
}

a.ck-button,
a.ck-button:hover,
a.ck-button:focus,
a.ck-button:visited {
	text-decoration: none !important;
}

/* Visible keyboard focus on every CK button (WCAG 2.4.7).
   Uses currentColor so the outline is legible against any variant background. */
.ck-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Navy alias (backwards compatible with existing blocks) */
.ck-button--navy {
	color: var(--ck-dark-navy);
	border-color: var(--ck-dark-navy);
	background: transparent;
}

.ck-button--navy:hover {
	background-color: var(--ck-dark-navy);
	color: var(--ck-white);
}

/* White variant (for dark backgrounds) */
.ck-button--white {
	color: var(--ck-white);
	border-color: var(--ck-white);
	background: transparent;
}

.ck-button--white:hover {
	background-color: var(--ck-white);
	color: var(--ck-dark-navy);
}

/* Light Blue outline (for navy backgrounds) */
.ck-button--light-blue {
	color: var(--ck-primary-blue);
	border-color: var(--ck-primary-blue);
	background: transparent;
}

.ck-button--light-blue:hover {
	color: var(--ck-dark-navy);
	background-color: var(--ck-primary-blue) !important;
}

/* Blue Outline (#00A7E1 on transparent, fills on hover) */
.ck-button--blue-outline {
	color: #00A7E1;
	border-color: #00A7E1;
	background: transparent;
}

.ck-button--blue-outline:hover {
	background-color: #00A7E1;
	color: var(--ck-white);
}

/* Success */
.ck-button--success {
	background-color: #28a745;
	border-color: #28a745;
	color: var(--ck-white);
}

.ck-button--success:hover {
	background-color: #1e7e34;
	border-color: #1e7e34;
	color: var(--ck-white);
}

/* Error */
.ck-button--error {
	background-color: #dc3545;
	border-color: #dc3545;
	color: var(--ck-white);
}

.ck-button--error:hover {
	background-color: #bd2130;
	border-color: #bd2130;
	color: var(--ck-white);
}

/* Grey */
.ck-button--grey {
	background-color: #BFCAD1;
	border-color: #BFCAD1;
	color: var(--ck-dark-navy);
}

.ck-button--grey:hover {
	background-color: var(--ck-dark-navy);
	border-color: var(--ck-dark-navy);
	color: var(--ck-white);
}

/* Disabled */
.ck-button--disabled,
.ck-button[disabled] {
	background-color: #e0e0e0;
	border-color: #e0e0e0;
	color: #999;
	cursor: not-allowed;
	pointer-events: none;
}

/* ── Shadow / outline pills (OAH location pages) ─────────────────────────
   Metrics from the OAH design: 16px/700 uppercase, 1.6px tracking, ~68px tall,
   drop shadow 0 13px 30px rgba(0,0,0,.3). Colours follow the design tokens. */
.ck-button--blue-shadow,
.ck-button--white-shadow,
.ck-button--light-blue-outline {
	box-shadow: 0 13px 30px rgba(0, 0, 0, 0.3);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1.6px;
	padding: 22px 40px;
	text-align: center;
}

.ck-button--blue-shadow {
	background-color: var(--ck-primary-blue);
	border-color: var(--ck-primary-blue);
	color: var(--ck-white);
}

.ck-button--blue-shadow:hover {
	background-color: var(--ck-white);
	border-color: var(--ck-white);
	color: #3EB5E6;
}

.ck-button--white-shadow {
	background-color: var(--ck-white);
	border-color: var(--ck-white);
	color: #3EB5E6;
}

.ck-button--white-shadow:hover {
	background-color: var(--ck-primary-blue);
	border-color: var(--ck-primary-blue);
	color: var(--ck-white);
}

.ck-button--light-blue-outline {
	background-color: var(--ck-white);
	border-color: #3EB5E6;
	color: #3EB5E6;
}

.ck-button--light-blue-outline:hover {
	background-color: #3EB5E6;
	border-color: #3EB5E6;
	color: var(--ck-white);
}