/**
 * Ceefax Revisited - Extended Teletext Styles
 *
 * Additional styles for teletext-faithful rendering that supplement
 * the base styles defined in style.css and theme.json.
 *
 * @package Ceefax_Revisited
 * @since 1.0.0
 */

/* ==========================================================================
   Block Style Variations
   ========================================================================== */

/* Teletext Flash - blinking text effect */
.is-style-ceefax-flash p,
.is-style-ceefax-flash {
	animation: ceefax-flash 1s step-start infinite;
}

@keyframes ceefax-flash {
	0%,
	100% {
		visibility: visible;
	}
	50% {
		visibility: hidden;
	}
}

/* Double Height text */
.is-style-ceefax-double-height p,
.is-style-ceefax-double-height {
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: 0.05em;
}

/* Fastext bar style for buttons group */
.is-style-ceefax-fastext {
	display: flex !important;
	gap: 0 !important;
	width: 100%;
}

.is-style-ceefax-fastext .wp-block-button {
	flex: 1;
}

.is-style-ceefax-fastext .wp-block-button .wp-block-button__link {
	width: 100%;
	border-radius: 0;
	text-align: center;
	padding: 6px 8px;
	text-transform: uppercase;
	font-size: 14px;
	display: block;
}

/* Newsflash group style */
.is-style-ceefax-newsflash {
	border: 4px solid var(--wp--preset--color--red);
	padding: 16px;
	position: relative;
}

.is-style-ceefax-newsflash::before {
	content: "NEWSFLASH";
	position: absolute;
	top: -12px;
	left: 16px;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--red);
	padding: 0 8px;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-family: var(--wp--preset--font-family--teletext);
	animation: ceefax-flash 1s step-start infinite;
}

/* Teletext Index list style */
.is-style-ceefax-index {
	list-style: none;
	padding: 0;
}

.is-style-ceefax-index li {
	padding: 2px 0;
	text-transform: uppercase;
}

.is-style-ceefax-index li::before {
	content: "\25B6 ";
	color: var(--wp--preset--color--cyan);
}

/* Teletext bar separator */
.is-style-ceefax-bar {
	border: none !important;
	height: 4px !important;
	background: var(--wp--preset--color--cyan) !important;
}

/* ==========================================================================
   Teletext Colour Bar Utility Classes
   ========================================================================== */

/* Coloured background strips - useful for section headers */
.ceefax-strip-red {
	background-color: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
	padding: 4px 16px;
}

.ceefax-strip-green {
	background-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--black);
	padding: 4px 16px;
}

.ceefax-strip-yellow {
	background-color: var(--wp--preset--color--yellow);
	color: var(--wp--preset--color--black);
	padding: 4px 16px;
}

.ceefax-strip-blue {
	background-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
	padding: 4px 16px;
}

.ceefax-strip-magenta {
	background-color: var(--wp--preset--color--magenta);
	color: var(--wp--preset--color--white);
	padding: 4px 16px;
}

.ceefax-strip-cyan {
	background-color: var(--wp--preset--color--cyan);
	color: var(--wp--preset--color--black);
	padding: 4px 16px;
}

.ceefax-strip-white {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	padding: 4px 16px;
}

/* ==========================================================================
   Teletext Grid Overlay (optional, for extra authenticity)
   ========================================================================== */

/*
 * Uncomment the following to add a subtle scanline effect
 * reminiscent of CRT displays.
 */

/*
body::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 9999;
	background: repeating-linear-gradient(
		to bottom,
		transparent,
		transparent 2px,
		rgba(0, 0, 0, 0.05) 2px,
		rgba(0, 0, 0, 0.05) 4px
	);
}
*/

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media screen and (max-width: 640px) {
	.ceefax-header-bar {
		padding: 4px 8px;
	}

	.ceefax-fastext {
		flex-wrap: wrap;
	}

	.ceefax-fastext-btn {
		flex: 1 1 50%;
	}

	.is-style-ceefax-fastext {
		flex-wrap: wrap !important;
	}

	.is-style-ceefax-fastext .wp-block-button {
		flex: 1 1 50%;
	}
}