/**
 * KBC Mobile Sticky CTA Bar — Frontend CSS
 *
 * Brand tokens (must match child theme custom.css):
 *   --kbc-red:   #CC0000   (call button colour)
 *   --kbc-gold:  #FFD700   (order button colour)
 *   --kbc-black: #1A1A1A
 *   --kbc-white: #FFFFFF
 *
 * The bar is mobile-only by default (hidden above 768px).
 * If the admin enables "Show on Desktop", JS adds .kbc-sticky-cta--desktop
 * to the body, which overrides the media query.
 *
 * @package KBC_Sticky_CTA
 */

/* ── CSS custom properties (fallbacks if theme vars not set) ───────────────── */

:root {
	--kbc-red:         #CC0000;
	--kbc-red-dark:    #aa0000;
	--kbc-gold:        #FFD700;
	--kbc-gold-dark:   #e6c200;
	--kbc-black:       #1A1A1A;
	--kbc-white:       #FFFFFF;
	--kbc-cta-height:  64px;
	--kbc-cta-zindex:  9990;
	--kbc-cta-radius:  0px;        /* flat edge against screen bottom */
	--kbc-cta-shadow:  0 -2px 12px rgba(0, 0, 0, 0.18);
}

/* ── Bar container ──────────────────────────────────────────────────────────── */

.kbc-sticky-cta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: var( --kbc-cta-zindex );
	display: flex;
	height: var( --kbc-cta-height );
	box-shadow: var( --kbc-cta-shadow );
	border-top: 1px solid rgba( 0, 0, 0, 0.12 );

	/* Start offscreen for the slide-in animation */
	transform: translateY( 100% );
	opacity: 0;
	transition:
		transform 280ms cubic-bezier( 0.25, 0.46, 0.45, 0.94 ),
		opacity   240ms ease;

	/* Mobile-only by default */
	display: none;
}

/* ── Mobile display rule ────────────────────────────────────────────────────── */

@media ( max-width: 768px ) {
	.kbc-sticky-cta {
		display: flex;
	}
}

/* ── Show on desktop override (class added by JS from config) ───────────────── */

.kbc-sticky-cta--desktop-on .kbc-sticky-cta {
	display: flex;
}

/* ── Ready state (HTML hidden attr removed by JS) ───────────────────────────── */

.kbc-sticky-cta--ready {
	/* Restore display so CSS transitions can take over from display:none */
	display: flex;
}

/* ── Visible state ──────────────────────────────────────────────────────────── */

.kbc-sticky-cta--visible {
	transform: translateY( 0 );
	opacity: 1;
}

/* ── Hidden state (explicitly hidden by JS near footer) ─────────────────────── */

.kbc-sticky-cta--hidden {
	transform: translateY( 100% );
	opacity: 0;
	pointer-events: none;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.kbc-sticky-cta__btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	text-decoration: none;
	font-family: 'Oswald', 'Arial Narrow', Arial, sans-serif;
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	border: none;
	outline: none;
	transition: filter 150ms ease, transform 100ms ease;
	-webkit-tap-highlight-color: transparent;

	/* Minimum 44px tap target (WCAG 2.5.5) — height set by container */
	min-height: 44px;
	padding: 0 0.5rem;
}

/* ── Call button — red ──────────────────────────────────────────────────────── */

.kbc-sticky-cta__btn--call {
	background-color: var( --kbc-red );
	color: var( --kbc-white );
}

.kbc-sticky-cta__btn--call:hover,
.kbc-sticky-cta__btn--call:focus-visible {
	background-color: var( --kbc-red-dark );
	filter: brightness( 1.05 );
}

/* ── Order button — gold/yellow ─────────────────────────────────────────────── */

.kbc-sticky-cta__btn--order {
	background-color: var( --kbc-gold );
	color: var( --kbc-black );
}

.kbc-sticky-cta__btn--order:hover,
.kbc-sticky-cta__btn--order:focus-visible {
	background-color: var( --kbc-gold-dark );
	filter: brightness( 1.05 );
}

/* ── Active press feedback ──────────────────────────────────────────────────── */

.kbc-sticky-cta__btn:active {
	transform: scale( 0.97 );
}

/* ── Icon and label ─────────────────────────────────────────────────────────── */

.kbc-sticky-cta__icon {
	font-size: 1.2rem;
	line-height: 1;
}

.kbc-sticky-cta__label {
	font-size: 0.72rem;
	line-height: 1;
	letter-spacing: 0.06em;
}

/* ── Divider between buttons ────────────────────────────────────────────────── */

.kbc-sticky-cta__btn--call {
	border-right: 1px solid rgba( 0, 0, 0, 0.15 );
}

/* ── Safe area inset (iPhone notch / home indicator) ────────────────────────── */

@supports ( padding-bottom: env( safe-area-inset-bottom ) ) {
	.kbc-sticky-cta {
		padding-bottom: env( safe-area-inset-bottom );
		height: calc( var( --kbc-cta-height ) + env( safe-area-inset-bottom ) );
	}
}

/* ── Body padding so content isn't hidden behind the bar ────────────────────── */
/*
   GeneratePress wraps content above the bar automatically via its footer hook.
   If content gets clipped, add this to the child theme custom.css:

   @media (max-width: 768px) {
     body { padding-bottom: 64px; }
   }
*/

/* ── Focus ring (keyboard / accessibility) ──────────────────────────────────── */

.kbc-sticky-cta__btn:focus-visible {
	outline: 3px solid var( --kbc-white );
	outline-offset: -3px;
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.kbc-sticky-cta {
		transition: opacity 120ms ease;
		transform: translateY( 0 );
	}

	.kbc-sticky-cta--hidden {
		transform: none;
		opacity: 0;
	}
}

/* ── Print — always hide ────────────────────────────────────────────────────── */

@media print {
	.kbc-sticky-cta {
		display: none !important;
	}
}