/*
Theme Name: MostafaZaid
Theme URI: https://mostafazaid.com/
Author: Mostafa Zaid
Description: Mostafa Zaid custom theme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mostafazaid
Tags: rtl-language-support, custom-logo, custom-menu, featured-images, translation-ready

*/

/* ============================================================
   RESPONSIVE UTILITY CLASSES (missing from pre-compiled Tailwind)
   ============================================================ */

/* Height utilities */
.h-16 { height: 4rem; }

/* Padding-top utilities */
.pt-16 { padding-top: 4rem; }
.pt-20 { padding-top: 5rem; }

/* Min-height utilities (touch targets) */
.min-h-11 { min-height: 2.75rem; }
.min-h-14 { min-height: 3.5rem; }
.min-h-\[600px\] { min-height: 600px; }

/* Arbitrary value utilities used in tokens/templates */
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }
.leading-\[1\.05\] { line-height: 1.05; }

/* Spacing utilities missing from compiled CSS */
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.mt-10 { margin-top: 2.5rem; }
.items-stretch { align-items: stretch; }

/* Gap utilities (already in tailwind but ensure) */
.gap-4 { gap: 1rem; }

/* Responsive: sm (>=640px) */
@media (min-width: 640px) {
	.sm\:flex-row { flex-direction: row; }
	.sm\:items-center { align-items: center; }
	.sm\:gap-4 { gap: 1rem; }
	.sm\:gap-6 { gap: 1.5rem; }
	.sm\:py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
	.sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
	.sm\:text-5xl { font-size: 3rem; line-height: 1; }
	.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Responsive: md (>=768px) */
@media (min-width: 768px) {
	.md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Responsive: lg (>=1024px) */
@media (min-width: 1024px) {
	.lg\:pt-20 { padding-top: 5rem; }
	.lg\:pt-44 { padding-top: 11rem; }
	.lg\:pb-28 { padding-bottom: 7rem; }
	.lg\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
	.lg\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
	.lg\:gap-8 { gap: 2rem; }
	.lg\:h-20 { height: 5rem; }
	.lg\:min-h-screen { min-height: 100vh; }
	.lg\:flex-row { flex-direction: row; }
	.lg\:text-7xl { font-size: 4.5rem; line-height: 1; }
	.lg\:text-6xl { font-size: 3.75rem; line-height: 1; }
	.lg\:text-5xl { font-size: 3rem; line-height: 1; }
	.lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Ensure main content not hidden behind fixed header */
main#main-content {
	padding-top: 4.5rem;
}
@media (min-width: 1024px) {
	main#main-content {
		padding-top: 5rem;
	}
}

/* Prevent horizontal scroll */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Ensure images never overflow */
img {
	max-width: 100%;
	height: auto;
}

/* ============================================================
   MISSING OPACITY VARIANTS (not in pre-compiled Tailwind)
   ============================================================ */

/* background = rgb(255 255 255) = white */
.bg-background\/10 { background-color: rgba(255, 255, 255, 0.1); }
.border-background\/30 { border-color: rgba(255, 255, 255, 0.3); }
.hover\:bg-background\/10:hover { background-color: rgba(255, 255, 255, 0.1); }

/* secondary = rgb(241 245 249) = slate-100 */
.bg-secondary\/30 { background-color: rgba(241, 245, 249, 0.3); }

/* Touch target minimum for nav links */
#mobile-nav a {
	min-height: 2.75rem;
	display: flex;
	align-items: center;
}

/* FAQ accordion group-open variants (missing from pre-compiled Tailwind) */
.group[open] .group-open\:hidden { display: none; }
.group[open] .group-open\:block { display: block; }

/* FAQ summary touch target */
details summary {
	min-height: 3.5rem;
}

/* Footer nav links touch target */
footer nav a {
	min-height: 2.75rem;
	display: flex;
	align-items: center;
}

/* ============================================================
   MENU / NAVIGATION FIXES
   ============================================================ */

/* Active menu item visual distinction */
.current-menu-item > a,
.current_page_item > a {
	color: #16697a !important;
	font-weight: 700 !important;
}

/* Desktop nav hover (fix: [&>li>a:hover] not in compiled Tailwind) */
nav[aria-label="القائمة الرئيسية"] > ul > li > a:hover {
	background-color: rgb(241, 245, 249);
	color: rgb(15, 23, 42);
}
nav[aria-label="القائمة الرئيسية"] .sub-menu > li > a:hover {
	background-color: rgb(241, 245, 249);
}

/* Mobile toggle: 44px touch target */
#mobile-nav-toggle {
	width: 2.75rem !important;
	min-width: 2.75rem !important;
	height: 2.75rem !important;
	flex-shrink: 0 !important;
}

/* Mobile menu slide animation */
#mobile-nav { transition: opacity .2s ease, transform .2s ease; }
#mobile-nav.hidden { opacity: 0; transform: translateY(-8px); }

/* Dropdown indicator */
.menu-item-has-children > a::after {
	content: '▾';
	margin-inline-start: 0.25rem;
	font-size: 0.75rem;
	opacity: 0.6;
}

/* ============================================================
   CONTACT FORM 7 — theme-matching overrides
   (custom classes because WP/CF7 strip ":" and "/" from class
   names, so Tailwind variants like hover:bg-brand/90 can't be
   applied directly as CF7 tag options)
   ============================================================ */
.mz-cf7-form form.wpcf7-form { display: flex; flex-direction: column; gap: 1.25rem; }
.mz-cf7-form p { margin: 0; }

.mz-cf7-input {
	width: 100%;
	min-height: 2.75rem;
	border-radius: 0.375rem;
	border: 1px solid rgb(203 213 225);
	background-color: rgb(255 255 255);
	color: rgb(15 23 42);
	padding: 0.625rem 0.75rem;
}
.mz-cf7-input:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px rgba(22, 105, 122, .5), 0 0 0 4px rgb(255 255 255);
}
.mz-cf7-textarea {
	resize: vertical;
	min-height: 8rem;
}

.mz-cf7-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3.5rem;
	font-weight: 600;
	font-size: 0.875rem;
	padding: 0.75rem 1.5rem;
	border-radius: 0.375rem;
	background-color: #16697a;
	color: #fff;
	border: none;
	cursor: pointer;
	transition: background-color .15s ease;
}
.mz-cf7-submit:hover { background-color: rgba(22, 105, 122, .9); }
.mz-cf7-submit.wpcf7-submit.has-spinner .ajax-loader { margin-inline-start: 0.5rem; }

/* CF7 response / validation messages, styled like the previous native form */
.mz-cf7-form .wpcf7-response-output {
	margin: 0 0 1.5rem;
	padding: 1rem;
	border-radius: 0.75rem;
	text-align: center;
	font-weight: 600;
}
.mz-cf7-form form.sent .wpcf7-response-output {
	background-color: rgba(22, 105, 122, .1);
	border: 1px solid rgba(22, 105, 122, .3);
	color: #16697a;
}
.mz-cf7-form form.failed .wpcf7-response-output,
.mz-cf7-form form.aborted .wpcf7-response-output,
.mz-cf7-form form.spam .wpcf7-response-output,
.mz-cf7-form form.invalid .wpcf7-response-output,
.mz-cf7-form form.unaccepted .wpcf7-response-output {
	background-color: rgba(220, 38, 38, .1);
	border: 1px solid rgba(220, 38, 38, .3);
	color: rgb(220 38 38);
}
.mz-cf7-form .wpcf7-not-valid-tip {
	color: rgb(220 38 38);
	font-size: 0.8125rem;
	margin-top: 0.375rem;
	display: block;
}
.mz-cf7-form .wpcf7-form-control.wpcf7-not-valid {
	border-color: rgb(220 38 38);
}