/* MaruCare – theme styles (Tailwind handles most of the layout). */
body {
	font-family: 'Cairo', 'Inter', sans-serif;
	background-color: #f8fafd;
	color: #1f2937;
}
html[data-lang="en"] body { font-family: 'Inter', 'Cairo', sans-serif; }

/* Bilingual switching – both languages are in the HTML (good for SEO), CSS shows one. */
html[data-lang="ar"] .mc-en,
html[data-lang="en"] .mc-ar { display: none !important; }

[x-cloak] { display: none !important; }

/* Arrows point the reading direction. */
html[dir="ltr"] .mc-flip { transform: rotate(180deg); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: var(--mc-brand, #0e4b37); border-radius: 4px; }

.text-gradient {
	background: linear-gradient(135deg, var(--mc-brand, #0e4b37) 0%, #22c55e 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.bg-gradient-brand { background: linear-gradient(135deg, var(--mc-brand, #0e4b37) 0%, #125841 50%, #15803d 100%); }
.bg-gradient-emerald { background: linear-gradient(135deg, #125841 0%, #22c55e 100%); }
.glass-card { background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); border: 1px solid rgba(226, 232, 240, .8); }

/* Journey tabs: columns follow the number of steps. */
@media (min-width: 768px) {
	.mc-steps { grid-template-columns: repeat(var(--mc-cols, 5), minmax(0, 1fr)); }
}

/* Form controls */
.mc-select,
.mc-input {
	width: 100%;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	color: #1e293b;
	font-size: .875rem;
	border-radius: .75rem;
	padding: .75rem;
	font-weight: 500;
}
.mc-select { appearance: none; -webkit-appearance: none; padding-inline-end: 2.25rem; }
.mc-select:focus,
.mc-input:focus { outline: none; box-shadow: 0 0 0 2px var(--mc-brand, #0e4b37); }

/* Keyboard focus */
a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid #22c55e; outline-offset: 2px; }

/* Content pages */
.mc-prose { line-height: 1.9; color: #334155; }
.mc-prose h2 { font-size: 1.5rem; font-weight: 800; margin: 1.6em 0 .6em; color: #0f172a; }
.mc-prose h3 { font-size: 1.2rem; font-weight: 700; margin: 1.4em 0 .5em; color: #0f172a; }
.mc-prose p, .mc-prose ul, .mc-prose ol { margin-bottom: 1em; }
.mc-prose ul { list-style: disc; padding-inline-start: 1.4em; }
.mc-prose ol { list-style: decimal; padding-inline-start: 1.4em; }
.mc-prose a { color: var(--mc-brand, #0e4b37); text-decoration: underline; }
.mc-prose img { max-width: 100%; height: auto; border-radius: 1rem; }
.mc-pagination .nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.mc-pagination .page-numbers { padding: .5rem .9rem; border-radius: .75rem; background: #fff; border: 1px solid #e2e8f0; }
.mc-pagination .current { background: var(--mc-brand, #0e4b37); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}