/*
Theme Name:   Moeen
Theme URI:    https://moeencounselling.com
Description:  Theme for Moeen Counselling & Psychological Services Centre. Child of Twenty Twenty-Five: logo palette, self-hosted Vazirmatn, RTL-first, calm and readable.
Author:       Moeen Counselling Centre
Template:     twentytwentyfive
Version:      0.3.1
Requires at least: 6.7
Requires PHP: 8.1
License:      GPL-2.0-or-later
Text Domain:  moeen
*/

/* Most styling lives in theme.json. Only what theme.json cannot express is here. */

:root { --moeen-radius: 14px; }

/* Persian body text reads better slightly larger and never justified with stretched kashida. */
body { text-rendering: optimizeLegibility; }
.entry-content p, .wp-block-post-content p { text-align: start; }

/* Cards used by the services grid and article lists. */
.moeen-card {
	background: var(--wp--preset--color--base);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 16%, transparent);
	border-radius: var(--moeen-radius);
	transition: border-color .15s ease, box-shadow .15s ease;
	height: 100%;
}
.moeen-card:hover { border-color: var(--wp--preset--color--accent-1); box-shadow: 0 6px 20px color-mix(in srgb, var(--wp--preset--color--accent-3) 10%, transparent); }
.moeen-card a { text-decoration: none; }
.moeen-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.moeen-card { position: relative; }

/* Header: sticky but quiet. */
.moeen-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent); }
.admin-bar .moeen-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .moeen-header { top: 46px; } }

/* Crisis notice: visible, calm, never alarming red. */
.moeen-crisis { border-inline-start: 4px solid var(--wp--preset--color--accent-2); }

/* Focus must always be visible (WCAG 2.4.7). */
:where(a, button, input, select, textarea, .wp-block-navigation-item__content):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-2);
	outline-offset: 2px;
	border-radius: 4px;
}

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

/* Header on phones: the booking button must never wrap letter by letter. */
.moeen-header .wp-block-button__link { white-space: nowrap; }
@media (max-width: 600px) {
	.moeen-header .wp-block-site-title { font-size: 1.05rem; line-height: 1.4; }
	.moeen-header .wp-block-site-logo img { width: 32px; height: auto; }
	.moeen-header .wp-block-button__link { padding: .45rem .8rem !important; font-size: .95rem; }
}
@media (max-width: 360px) { .moeen-header .wp-block-site-title { display: none; } }

/* Header tools: language menu + staff icon. 40px targets; the menu opens under its button. */
.moeen-tools { display: flex; align-items: center; gap: .25rem; }
.moeen-lang { position: relative; }
.moeen-lang summary, .moeen-staff { display: inline-flex; align-items: center; justify-content: center; gap: .2rem; min-width: 40px; min-height: 40px; padding: 0 .35rem; border-radius: 8px; color: var(--wp--preset--color--accent-3); cursor: pointer; text-decoration: none; font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.moeen-lang summary { list-style: none; }
.moeen-lang summary::-webkit-details-marker { display: none; }
.moeen-lang summary:hover, .moeen-staff:hover, .moeen-lang[open] summary { background: var(--wp--preset--color--accent-6); }
.moeen-lang ul { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 100; margin: 0; padding: .35rem; list-style: none; min-width: 10rem; background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--accent-5); border-radius: 10px; box-shadow: 0 8px 24px rgb(16 56 88 / .12); }
.moeen-lang li a, .moeen-lang li span { display: block; padding: .5rem .75rem; border-radius: 6px; text-decoration: none; color: var(--wp--preset--color--contrast); font-size: var(--wp--preset--font-size--small); text-align: start; }
.moeen-lang li a:hover { background: var(--wp--preset--color--accent-6); }
.moeen-lang li a[aria-current] { font-weight: 700; color: var(--wp--preset--color--accent-1); }
.moeen-lang .is-soon { color: var(--wp--preset--color--accent-4); cursor: default; }
@media (max-width: 600px) {
	.moeen-lang summary span { display: none; }
	.moeen-lang summary, .moeen-staff { min-width: 34px; padding: 0 .2rem; }
	/* Logo never shrinks; the name takes at most two short lines; tighter gaps make room for the tools. */
	.moeen-header .wp-block-site-logo { flex-shrink: 0; }
	.moeen-header .wp-block-site-title { font-size: .92rem; line-height: 1.35; min-width: 5.2em; max-width: 7em; }
	.moeen-header .alignwide > .wp-block-group { gap: .45rem !important; }
	.moeen-tools { gap: 0; }
}