/* MoreSomalia Keyboards - shared styles for every script (Osmanya, Borama, Kaddare, Wadaad, Wadaad2). */

/*
 * NOTE: the @font-face rules for the custom Borama/Kaddare fonts are
 * generated in PHP (MK_Keyboard::build_font_face_css) rather than written
 * here, because the .woff2 files may live in either the plugin's
 * assets/fonts/ folder or in wp-content/uploads/fonts/.
 */

.mk-widget, .mk-widget *, .mk-widget *::before, .mk-widget *::after {
	box-sizing: border-box;
}

.mk-widget {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2rem;
	background: linear-gradient(135deg, #418FDE, #66B2FF);
	min-height: 100vh;
	font-family: Arial, sans-serif;
}

.mk-card {
	background: white;
	border-radius: 16px;
	padding: 2rem;
	max-width: 750px;
	width: 100%;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
	text-align: center;
}

.mk-title {
	color: #418FDE;
	margin-bottom: 0.5rem;
}

.mk-subtitle {
	color: #555;
	margin-bottom: 1.5rem;
}

.mk-toggle-buttons {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.mk-toggle-btn {
	background: #E0EFFF;
	border: none;
	padding: 0.5rem 1.2rem;
	border-radius: 25px;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.2s, transform 0.1s;
}

.mk-toggle-btn:hover {
	background: #CFE5FF;
	transform: translateY(-1px);
}

.mk-toggle-btn.active {
	background: #418FDE;
	color: white;
	font-weight: bold;
}

.mk-textarea {
	width: 100%;
	border-radius: 8px;
	border: 1px solid #ccc;
	padding: 1rem;
	font-size: 1rem;
	margin-bottom: 1rem;
	resize: vertical;
	min-height: 120px;
}

.mk-output {
	background: #f8f9fa;
	font-weight: bold;
}

.mk-font-borama {
	font-family: 'MKBorama', Arial, sans-serif;
	font-feature-settings: "liga" 1, "clig" 1, "dlig" 1;
	font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}

.mk-font-kaddare {
	font-family: 'MKKaddare', Arial, sans-serif;
	font-feature-settings: "liga" 1, "clig" 1, "dlig" 1;
	font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
}

.mk-font-wadaad {
	font-family: "Amiri", "Noto Naskh Arabic", "Scheherazade New", serif;
}

.mk-rtl {
	direction: rtl;
	text-align: right;
	unicode-bidi: plaintext;
}

.mk-keyboard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
}

/* The letter/capital/digit keys of the current page. */
.mk-keys {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

/*
 * Shift / 123 / Space / backspace. Always rendered directly under the
 * keys, so Space is never stranded at the bottom of a long key list.
 */
.mk-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	align-items: stretch;
	border-top: 1px solid #eef2f6;
	padding-top: 10px;
}

.mk-action-btn {
	font-size: 15px;
	min-width: 52px;
}

.mk-space-btn {
	flex: 1 1 140px;
	max-width: 320px;
}

.mk-shift-btn[aria-pressed="true"] {
	background: #418FDE;
	color: #fff;
}

.mk-key-btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	padding: 8px 12px;
	font-size: 16px;
	line-height: 1.2;
	border: none;
	background: #E0EFFF;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.2s;
	touch-action: manipulation;
}

.mk-key-glyph {
	font-size: 16px;
	line-height: 1.2;
}

/*
 * The Latin hint under each key. Hidden until the learner asks for it,
 * so the default keyboard shows pure script.
 */
.mk-key-latin {
	display: none;
	font-family: Arial, sans-serif;
	font-size: 10px;
	line-height: 1;
	color: #8a929b;
	letter-spacing: 0.02em;
}

.mk-keyboard.mk-show-latin .mk-key-latin {
	display: block;
}

.mk-key-btn:hover {
	background: #CFE5FF;
}

.mk-delete-btn {
	background: #FF6B6B;
	color: white;
	font-weight: bold;
}

.mk-delete-btn:hover {
	background: #FF4C4C;
	transform: translateY(-1px);
}

/* Toggles the grey Latin hints on the keys. */
.mk-hint-toggle {
	margin-top: 1rem;
	background: none;
	border: 1px solid #CFE5FF;
	color: #418FDE;
	border-radius: 20px;
	padding: 0.35rem 1rem;
	font-size: 0.85rem;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s;
}

.mk-hint-toggle:hover {
	background: #F2F8FF;
	border-color: #418FDE;
}

.mk-footer {
	margin-top: 1.5rem;
	font-size: 0.85rem;
	color: #888;
}

.mk-bottom-image {
	max-width: 100%;
	border-radius: 8px;
	margin-top: 1rem;
	display: block;
}

/* ----- Phones -----
   Tighter keys fit more per row, so the keyboard needs fewer rows and
   the text boxes stay on screen while you type. */
@media (max-width: 600px) {
	/* The gradient wrapper's 2rem padding costs 64px of a 375px screen. */
	.mk-widget {
		padding: 0.75rem;
		min-height: 0;
	}

	.mk-card {
		padding: 1.1rem;
	}

	.mk-title {
		font-size: 1.4rem;
	}

	.mk-keys,
	.mk-actions {
		gap: 6px;
	}

	.mk-key-btn {
		padding: 7px 9px;
		min-width: 38px;
	}

	.mk-key-glyph {
		font-size: 18px;
	}

	.mk-textarea {
		min-height: 90px;
	}
}

/* Compact variant used by the wp-admin preview screen: no full-screen
   gradient, no forced 100vh height. */
.mk-widget--compact {
	min-height: 0;
	padding: 0;
	background: none;
	display: block;
}

.mk-widget--compact .mk-card {
	box-shadow: none;
	border: 1px solid #dcdcde;
	padding: 1.25rem;
	max-width: none;
}

.mk-widget--compact .mk-title {
	font-size: 1.15rem;
	margin-top: 0;
}

.mk-widget--compact .mk-textarea {
	min-height: 80px;
}