/* =========================================================
   Alanaka — WordPress-specific additions on top of theme.css
   (the ported design system). Mobile nav, reveal animations,
   and small layout pieces the static export didn't need.
   ========================================================= */

:root {
	/* Requested: switch the whole theme to Cairo instead of the ported
	   Baloo Bhaijaan 2 / Alexandria pairing (loaded via Google Fonts). */
	--font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
	--font-familyen: 'Cairo';
	--f-number: 'Cairo';
}
body, .tit-wdt, .intro-title, .betit-w, .con-wgt { font-family: var(--font-family) !important; }
/* theme.css hardcodes these two selectors directly to 'Baloo Bhaijaan 2' / 'cursive'
   instead of var(--font-family) — the :root override above can't reach them. */
.contact_info1 span, .counter-v2-number { font-family: var(--font-family) !important; }

.skip-link { position: absolute; top: -100px; right: 20px; background: var(--uicolor); color: #fff; padding: 10px 18px; border-radius: 8px; z-index: 99999; }
.skip-link:focus { top: 10px; }

/* The ported theme.css sets `.Context--overlays { display: flex }` unconditionally,
   which (being an author rule) beats the `hidden` attribute's UA-stylesheet display:none. */
[hidden] { display: none !important; }

/* The ported CSS never constrains the custom-logo <img>, and add_theme_support's
   flex-width/flex-height makes WP emit the attachment's native pixel size as the
   width/height attributes — without this the logo renders at full native size
   (thousands of px) and blows up the whole header. */
.-site-logo img, .custom-logo-link img { max-height: 64px; width: auto; height: auto; }
.-footer-site-logo img { max-height: 80px; width: auto; height: auto; }
.-site-logo, .-site-logo a { display: flex; align-items: center; }

/* ---------- Mobile navigation (custom, off-canvas) ---------- */
.menu-toggle {
	display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer;
	z-index: 320; position: relative; width: 40px; height: 40px; align-items: center; justify-content: center;
}
.menu-toggle span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: .25s; }
.menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 300; opacity: 0; transition: opacity .3s; }
.nav-overlay.is-visible { display: block; opacity: 1; }

/* Panel-only chrome: hidden on desktop where .--Site--Menu is the plain horizontal bar. */
.mobile-menu-head, .mobile-menu-foot, .submenu-toggle, .menu-item-icon { display: none; }

@media (max-width: 1199px) {
	/* Decorative diagonal-stripe square is absolutely positioned near the
	   hero image; once .intro-v2-row stacks to a single column (theme.css's
	   own <1199px breakpoint) it ends up floating over the heading text
	   instead of beside the image. It's purely decorative — hide it. */
	.intro-v2-pattern { display: none; }
}

@media (max-width: 1240px) {
	/* The ported theme.css sets its own `right` on .--Site--Menu at several
	   breakpoints. In RTL, a fixed box with both `left` and `right` set is
	   over-constrained and the UA drops `left` — so a logical inset-inline-end
	   here would always lose to theme.css's `right`. Match the same physical
	   property (with !important) so this override actually wins. */
	.--Site--Menu {
		position: fixed !important; top: 0 !important; bottom: 0 !important; right: -320px !important; left: auto !important;
		width: 320px !important; min-width: 320px !important; max-width: 88vw; background: #fff;
		z-index: 310; padding: 0 !important; overflow: hidden; transition: right .35s cubic-bezier(.22,.61,.36,1);
		display: flex !important; flex-direction: column;
		box-shadow: -30px 0 60px -20px rgba(7,29,66,.35);
	}
	.--Site--Menu.is-open { right: 0 !important; }

	/* Panel header: brand strip + close button. */
	.mobile-menu-head {
		display: flex; align-items: center; justify-content: space-between;
		padding: 18px 20px; background: linear-gradient(120deg, var(--uicolor3), var(--uicolor));
		flex: 0 0 auto;
	}
	.mobile-menu-head-logo { color: #fff; font-weight: 800; font-size: 17px; }
	.mobile-menu-close {
		width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
		background: rgba(255,255,255,.12); color: #fff; font-size: 14px; cursor: pointer;
		display: flex; align-items: center; justify-content: center; transition: background .2s;
	}
	.mobile-menu-close:hover { background: rgba(255,255,255,.25); }

	/* Scrollable nav list. */
	.--Site--Menu > ul {
		flex: 1 1 auto; overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0;
		padding: 10px 12px; margin: 0;
	}
	.--Site--Menu ul#main-menu > li.menu-item {
		border-bottom: 1px solid var(--diver, #eef1f4); position: relative;
	}
	.--Site--Menu ul#main-menu > li.menu-item:last-child { border-bottom: 0; }
	.--Site--Menu ul li a {
		color: var(--primary-text); display: flex; align-items: center; gap: 12px;
		padding: 14px 10px; font-weight: 600; font-size: 15.5px; border-radius: 10px;
		transition: background .2s, color .2s;
	}
	.--Site--Menu ul#main-menu > li.menu-item > a:hover,
	.--Site--Menu ul#main-menu > li.menu-item > a:active { background: var(--background, #f4f4f4); color: var(--uicolor); }
	.--Site--Menu ul#main-menu > li.current-menu-item > a { color: var(--uicolor); background: rgb(var(--uicolor-code) / 8%); }
	.menu-item-icon { display: inline-block; color: var(--uicolor2); font-size: 15px; width: 20px; text-align: center; flex: none; }

	/* Submenu expand/collapse. */
	.submenu-toggle {
		position: absolute; inset-inline-end: 2px; top: 5px; width: 40px; height: 40px;
		background: var(--background, #f4f4f4); border-radius: 50%; border: 0; color: var(--secondarytext);
		font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center;
		transition: transform .25s, background .2s, color .2s;
	}
	.--Site--Menu ul li a { padding-inline-end: 46px; }
	.menu-item.is-open > .submenu-toggle { transform: rotate(180deg); color: var(--uicolor); }
	.--Site--Menu ul li ul.sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
		display: none; padding: 2px 0 8px 34px; margin: 0;
	}
	.--Site--Menu ul li.is-open > ul.sub-menu { display: block; }
	.--Site--Menu ul li ul.sub-menu li { border-bottom: 0; }
	.--Site--Menu ul li ul.sub-menu a {
		font-weight: 500; font-size: 14px; padding: 10px 10px; color: var(--secondarytext);
	}
	.--Site--Menu ul li ul.sub-menu a:hover { color: var(--uicolor); background: var(--background, #f4f4f4); }

	/* Panel footer CTA. */
	.mobile-menu-foot { display: block; flex: 0 0 auto; padding: 14px 16px; border-top: 1px solid var(--diver, #eef1f4); }
	.mobile-menu-call-btn {
		display: flex; align-items: center; justify-content: center; gap: 10px;
		background: var(--uicolor2); color: #fff; font-weight: 700; font-size: 15px;
		padding: 13px; border-radius: 12px; transition: filter .2s;
	}
	.mobile-menu-call-btn:hover { filter: brightness(1.08); }

	.menu-toggle { display: flex; }
	.header-contact-5.d-none.d-sm-inline-flex { display: none !important; }
}

/* ---------- Scroll reveal ---------- */
.reveal-up, .reveal-fade {
	opacity: 0; transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
	transition-delay: var(--reveal-delay, 0s);
}
.reveal-up { transform: translateY(28px); }
.reveal-fade { transform: scale(.97); }
.reveal-up.is-visible, .reveal-fade.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal-up, .reveal-fade { opacity: 1; transform: none; transition: none; }
}
/* These elements start at opacity:0 and rely on JS to reveal them, so if
   scripting is unavailable the page would render blank. Never let that
   happen: with no scripting, show everything immediately. */
@media (scripting: none) {
	.reveal-up, .reveal-fade { opacity: 1; transform: none; transition: none; }
}

/* ---------- Breadcrumbs ---------- */
.alanaka-breadcrumbs { background: var(--background); font-size: 13px; padding: 12px 0; }
.alanaka-breadcrumbs ol { display: flex; gap: 8px; color: var(--secondarytext); list-style: none; padding: 0; margin: 0; }
.alanaka-breadcrumbs li:not(:last-child)::after { content: '/'; margin-inline-start: 8px; opacity: .5; }
.alanaka-breadcrumbs a { color: var(--uicolor2); font-weight: 600; }

.layerslink-credit { opacity: .65; font-size: 12px; margin-inline-start: 14px; }
.layerslink-credit a { color: inherit; }
.layerslink-credit a:hover { opacity: 1; text-decoration: underline; }

/* ---------- About2 visual (before/after photo) ---------- */
/* The ported .aftr-v2-main-image img only sets height:auto — with a wide
   source crop that renders as a thin strip inside a frame sized for the
   squarer photo used elsewhere. Force a fixed, generous aspect ratio and
   crop the photo to fill it, independent of the source file's own proportions. */
.about2-visual .aftr-v2-main-image { width: 100%; }
.about2-visual .aftr-v2-main-image img {
	width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}

/* ---------- "Why trust us" feature list ---------- */
/* The ported .aftr-v2-features uses flex-wrap with two ~50% columns; when one
   item's text wraps to a second line the columns fall out of alignment with
   each other. A grid keeps every row's height in sync. The icon circle also
   had a leftover green from the original theme — rebrand to the site's blue. */
.aftr-v2-features {
	display: grid; grid-template-columns: 1fr 1fr; gap: 18px 26px; align-items: start;
}
.aftr-v2-feature-item {
	min-width: 0; max-width: none; flex: none; align-items: flex-start;
}
.aftr-v2-feature-icon {
	background: rgb(var(--uicolor-code) / 12%); color: var(--uicolor); margin-top: 2px;
}
.aftr-v2-feature-title { font-size: 16px; line-height: 1.6; }
@media (max-width: 640px) {
	.aftr-v2-features { grid-template-columns: 1fr; }
}

/* ---------- Stats/counter cards ---------- */
.counter-v2-inner {
	border: 1px solid var(--diver, #e5eaef);
	border-radius: var(--miniradius, 12px);
	padding: 24px 16px;
	background: #fff;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.counter-v2-inner:hover { border-color: var(--uicolor2); box-shadow: var(--box-shadow-hover); transform: translateY(-4px); }

/* ---------- Generic content pages ---------- */
.page-header { text-align: center; padding: 50px 0 20px; }
.page-header h1 { font-size: 34px; color: var(--primary-text); }
.entry-content { font-size: 16.5px; line-height: 1.9; color: var(--secondarytext); max-width: 900px; margin: 0 auto; }
.entry-content img { border-radius: var(--miniradius); }
.page-thumb img { border-radius: var(--miniradius); margin-bottom: 32px; max-width: 900px; margin-inline: auto; }
.container.narrow { max-width: 900px; }

/* ---------- Services grid (archive) ---------- */
.services-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 20px 0 50px; }
.service-archive-card {
	background: #fff; border: 1px solid var(--diver); border-radius: var(--miniradius); padding: 28px;
	transition: transform .25s ease, box-shadow .25s ease;
}
.service-archive-card:hover { transform: translateY(-6px); box-shadow: var(--box-shadow-hover); }
.service-archive-card .icon { width: 56px; height: 56px; border-radius: 14px; background: rgb(var(--uicolor-code) / 10%); color: var(--uicolor); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; }
.service-archive-card h3 { font-size: 18px; margin-bottom: 8px; }
.service-archive-card h3 a:hover { color: var(--uicolor); }
.service-archive-card p { color: var(--secondarytext); font-size: 14px; }

/* ---------- Single service ---------- */
.service-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; padding: 40px 0; align-items: start; }
.service-sidebar-card { position: sticky; top: 100px; background: var(--background); border-radius: var(--miniradius); padding: 26px; border: 1px solid var(--diver); }
.service-sidebar-card .-dURLArea { justify-content: flex-start; margin-top: 14px; }
.service-term-badge { display: inline-block; background: rgb(var(--uicolor-code) / 10%); color: var(--uicolor); font-weight: 700; font-size: 13px; padding: 6px 16px; border-radius: 999px; margin-bottom: 14px; }

/* ---------- Menu: grouped dropdown (services + articles) ---------- */
.sub-menu-heading {
	font-size: 11.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
	color: var(--uicolor2); padding: 10px 14px 6px; pointer-events: none;
}
.sub-menu-heading + .menu-item > a { padding-top: 6px; }
.--Site--Menu ul li ul.sub-menu .sub-menu-more a { color: var(--uicolor2); font-weight: 700; }
.--Site--Menu ul li ul.sub-menu .sub-menu-more { border-top: 1px solid var(--diver); margin-top: 4px; padding-top: 2px; }
.sub-menu-more a i { font-size: 11px; transition: transform .25s ease; }
.sub-menu-more a:hover i { transform: translateX(-4px); }

@media (min-width: 1241px) {
	/* A category can list services + 6 articles — keep the dropdown usable. */
	.--Site--Menu ul li ul.sub-menu { max-height: 70vh; overflow-y: auto; min-width: 290px; }
}

/* ---------- Services archive: one block per category ---------- */
.category-block { padding: 10px 0 34px; }
.category-block + .category-block { border-top: 1px solid var(--diver); padding-top: 34px; }
.category-block-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.category-block-title { display: flex; align-items: center; gap: 14px; }
.category-block-icon {
	width: 52px; height: 52px; flex: none; border-radius: 15px; display: flex; align-items: center; justify-content: center;
	background: rgb(var(--uicolor-code) / 10%); color: var(--uicolor); font-size: 21px;
}
.category-block-title h2 { font-size: 22px; margin: 0 0 3px; }
.category-block-title h2 a { color: var(--primary-text); }
.category-block-title h2 a:hover { color: var(--uicolor); }
.category-block-meta { font-size: 13px; color: var(--secondarytext); font-weight: 600; }
.category-block-link {
	display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px;
	color: var(--uicolor2); padding: 9px 18px; border: 1px solid var(--uicolor2); border-radius: 999px;
	transition: background .25s ease, color .25s ease;
}
.category-block-link:hover { background: var(--uicolor2); color: #fff; }
.category-block-link i { font-size: 12px; transition: transform .25s ease; }
.category-block-link:hover i { transform: translateX(-4px); }
.category-block .services-archive-grid { padding: 0; }

/* ---------- Contact page ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 20px 0 60px; align-items: start; }
.contact-cards { display: grid; gap: 14px; }
.contact-card {
	display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: #fff;
	border: 1px solid var(--diver); border-radius: var(--miniradius); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
a.contact-card:hover { transform: translateY(-3px); box-shadow: var(--box-shadow-hover); border-color: var(--uicolor2); }
.contact-card .icon {
	flex: none; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
	background: rgb(var(--uicolor-code) / 10%); color: var(--uicolor); font-size: 19px;
}
.contact-card .icon.whatsapp { background: rgb(27 123 67 / 12%); color: var(--color-whatsapp, #1b7b43); }
.contact-card-body span { display: block; font-size: 12.5px; color: var(--secondarytext); font-weight: 600; margin-bottom: 3px; }
.contact-card-body strong { font-size: 16px; color: var(--primary-text); }
.contact-map { height: 100%; min-height: 420px; border-radius: var(--miniradius); overflow: hidden; border: 1px solid var(--diver); }
.contact-map iframe { display: block; height: 100%; min-height: 420px; }

/* ---------- Single article ---------- */
.article-byline { display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-end; margin-top: 10px; }
.article-byline span { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--secondarytext); font-weight: 600; }
.article-byline i { color: var(--uicolor2); font-size: 13px; }
.article-content { max-width: none; margin: 0; }
.article-content > p:first-of-type { font-size: 18.5px; color: var(--primary-text); font-weight: 500; }
.article-content p { margin-bottom: 18px; }
.article-content h2, .article-content h3 { color: var(--primary-text); margin: 32px 0 14px; }
.article-content blockquote {
	background: rgb(var(--uicolor-code) / 6%); border-inline-start: 4px solid var(--uicolor2);
	border-radius: 0 var(--miniradius) var(--miniradius) 0; padding: 18px 22px; margin: 24px 0; font-size: 15.5px; color: var(--primary-text);
}
.article-content ul, .article-content ol { padding-inline-start: 22px; margin-bottom: 18px; }
.article-content li { margin-bottom: 8px; }
.article-author-box {
	display: flex; align-items: center; gap: 18px; margin-top: 44px; padding: 24px;
	background: var(--background); border-radius: var(--miniradius); border: 1px solid var(--diver);
}
.article-author-avatar { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: #fff; display: flex; align-items: center; justify-content: center; border: 1px solid var(--diver); }
.article-author-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.article-author-label { display: block; font-size: 12px; color: var(--uicolor2); font-weight: 700; margin-bottom: 4px; }
.article-author-info h3 { font-size: 17px; margin-bottom: 6px; }
.article-author-info p { font-size: 14px; color: var(--secondarytext); margin: 0; }

/* ---------- Blog cards (uses the theme's real .Post--item component) ---------- */
.post-grid, .posts-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 20px 0 50px; }
.posts-related-grid { padding: 0; }
.post-grid .Post--item, .posts-related-grid .Post--item { min-width: 0; max-width: none; width: 100%; }
.post-grid .-Po-Thumb, .posts-related-grid .-Po-Thumb { height: 200px; }
.post-grid .-Po-Thumb img, .posts-related-grid .-Po-Thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-grid .-Po-Info, .posts-related-grid .-Po-Info { padding: 22px 20px 20px; }
.post-grid .posts_title, .posts-related-grid .posts_title { font-size: 18px; }
.post-grid .post-excerpt, .posts-related-grid .post-excerpt { font-size: 14.5px; margin-bottom: 12px; }
.related-articles-head { margin-bottom: 24px; }
.related-articles-head .tit-wdt { margin-bottom: 6px; }

.alanaka-pagination ul { display: flex; justify-content: center; gap: 8px; padding: 10px 0 60px; list-style: none; }
.alanaka-pagination a, .alanaka-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--diver); font-weight: 700; font-size: 14px; }
.alanaka-pagination .current { background: var(--uicolor); color: #fff; border-color: var(--uicolor); }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
	.services-archive-grid, .post-grid, .posts-related-grid { grid-template-columns: repeat(2, 1fr); }
	.service-layout { grid-template-columns: 1fr; }
	.service-sidebar-card { position: static; }
	.contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.services-archive-grid, .post-grid, .posts-related-grid { grid-template-columns: 1fr; }
}