/*
 * Kvarcóra Shortcode
 * Alap stílus a digitális, monospace megjelenéshez és a kettőspont villogásának támogatásához.
 * - Konfliktuskerülő, névtérhez kötött szelektorok
 * - Reszponzív finomhangolások
 * - Keresztböngészős, animáció nélküli villogás-támogatás
 */

/* Alap kijelző */
.kvarcora-display {
	/* Digitális hatás: monospace + tabuláris számok */
	font-family: var(--kvarcora-font, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: 'tnum' 1, 'lnum' 1;

	/* Tipográfia és elrendezés */
	display: inline-flex;
	align-items: baseline;
	justify-content: center;
	white-space: nowrap;
	word-break: keep-all;
	hyphens: none;
	line-height: 1;
	vertical-align: baseline;
	direction: ltr;
	unicode-bidi: plaintext;

	/* Finom digitális megjelenés */
	letter-spacing: var(--kvarcora-letter-spacing, 0.06em);
	font-size: var(--kvarcora-size, 1rem);
	color: var(--kvarcora-color, currentColor);
	background-color: var(--kvarcora-bg, transparent);
	padding: var(--kvarcora-padding, 0);
	border-radius: var(--kvarcora-radius, 0);
}

/* Fix szélesség érzet a layout-ugrások csökkentésére */
.kvarcora-display[data-seconds="true"] {
	/* HH:MM:SS -> 8 karakter */
	min-width: 8ch;
}
.kvarcora-display[data-seconds="false"] {
	/* HH:MM -> 5 karakter */
	min-width: 5ch;
}

/* Szeparált elemek (JS által opcionálisan beszúrt wrappek) */
.kvarcora-display .kvarcora-digit,
.kvarcora-display .kvarcora-sep,
.kvarcora-display .kvarcora-colon {
	display: inline-block;
}

/* Kettőspont villogásának (ideiglenes elrejtésének) támogatása
   - Láthatatlanná tesszük, de a helyfoglalás megmarad (visibility) */
.kvarcora-display .kvarcora-colon {
	visibility: visible;
	opacity: 1;
}
.kvarcora-display.kvarcora-colon--off .kvarcora-colon {
	visibility: hidden;
	opacity: 0;
}

/* Hosszú visszaszámlálás szöveges címkéje: "x hónap, y nap" */
.kvarcora-display .kvarcora-extended-label {
	display: inline-block;
	margin-left: var(--kvarcora-label-gap, 0.5em);
	font-size: var(--kvarcora-label-size, 0.82em);
	color: var(--kvarcora-label-color, currentColor);
	opacity: var(--kvarcora-label-opacity, 0.8);
	letter-spacing: var(--kvarcora-label-letter-spacing, 0);
	white-space: nowrap;
	align-self: baseline;
	direction: ltr;
}

/* Kisebb kijelzőkhöz finomhangolás */
@media (max-width: 480px) {
	.kvarcora-display {
		font-size: var(--kvarcora-size-sm, 0.95rem);
		letter-spacing: var(--kvarcora-letter-spacing-sm, 0.04em);
	}
	.kvarcora-display .kvarcora-extended-label {
		font-size: var(--kvarcora-label-size-sm, 0.78em);
	}
}

/* Nagyobb kijelzőkön kissé hangsúlyosabb megjelenés (opcionális, változóval szabályozható) */
@media (min-width: 768px) {
	.kvarcora-display {
		font-size: var(--kvarcora-size-lg, 1.125rem);
	}
	.kvarcora-display .kvarcora-extended-label {
		font-size: var(--kvarcora-label-size-lg, 0.86em);
	}
}