/* ==========================================================================
   TAYF — front-end only layer (not loaded in the editor).
   ========================================================================== */

/* 1. Bilingual visibility -------------------------------------------------- */

body:not(.azraq-lang-ar):not(.rtl) .azraq-ar {
	display: none !important;
}

body.azraq-lang-ar .azraq-en,
body.rtl:not(.azraq-lang-en) .azraq-en {
	display: none !important;
}

/* 2. Sticky glass header --------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part:has(.azraq-site-header),
.wp-site-blocks > .wp-block-template-part:first-child:has(.azraq-site-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part:has(.azraq-site-header) {
		top: 0;
	}
}

/* 3. Navigation: collapse into the menu button below 960px ------------------ */

@media (max-width: 959px) {
	.azraq-site-header__bar > .azraq-nav {
		order: 3;
	}

	.azraq-js .azraq-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.azraq-js .azraq-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Without JavaScript the menu button cannot open, so show plain links that
   wrap onto a second row instead. */
html:not(.azraq-js) .azraq-site-header .wp-block-navigation__responsive-container-open {
	display: none !important;
}

html:not(.azraq-js) .azraq-site-header .wp-block-navigation__responsive-container {
	display: block !important;
	position: static !important;
	width: auto;
	background: transparent !important;
}

html:not(.azraq-js) .azraq-site-header .wp-block-navigation__responsive-container-close {
	display: none !important;
}

@media (max-width: 959px) {
	html:not(.azraq-js) .azraq-site-header__bar {
		flex-wrap: wrap !important;
	}

	html:not(.azraq-js) .azraq-site-header__bar > .azraq-nav {
		flex-basis: 100%;
	}

	html:not(.azraq-js) .azraq-nav .wp-block-navigation__container {
		flex-wrap: wrap;
	}
}

/* 4. Motion ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	/* Drifting sky. Transform-only, paused when off screen. */
	.azraq-hero::before {
		animation: azraq-drift-clouds 48s ease-in-out infinite alternate;
	}

	.azraq-hero::after {
		animation: azraq-drift-light 72s ease-in-out infinite alternate;
	}

	.azraq-page-hero::before {
		animation: azraq-drift-clouds 60s ease-in-out infinite alternate;
	}

	.azraq-hero.is-paused::before,
	.azraq-hero.is-paused::after {
		animation-play-state: paused;
	}

	/* Hero entrance: pure CSS, so content is visible even without JavaScript. */
	.azraq-hero__intro > *,
	.azraq-page-hero__inner > * {
		animation: azraq-rise 900ms var(--azraq-ease) both;
	}

	.azraq-hero__intro > :nth-child(2),
	.azraq-page-hero__inner > :nth-child(2) { animation-delay: 80ms; }
	.azraq-hero__intro > :nth-child(3),
	.azraq-page-hero__inner > :nth-child(3) { animation-delay: 160ms; }
	.azraq-hero__intro > :nth-child(4),
	.azraq-page-hero__inner > :nth-child(4) { animation-delay: 240ms; }

	.azraq-path > * {
		animation: azraq-rise 900ms var(--azraq-ease) both;
	}

	.azraq-path > :nth-child(1) { animation-delay: 320ms; }
	.azraq-path > :nth-child(2) { animation-delay: 400ms; }
	.azraq-path > :nth-child(3) { animation-delay: 480ms; }
	.azraq-path > :nth-child(4) { animation-delay: 560ms; }

	.azraq-path::before {
		transform-origin: left center;
		animation: azraq-draw 1400ms var(--azraq-ease) 300ms both;
	}

	body.rtl .azraq-path::before {
		transform-origin: right center;
	}

	/* Scroll reveal: only after the script confirms it is running
	   (html.azraq-motion). Elements already on screen are never hidden. */
	.azraq-motion .azraq-reveal:not(.is-revealed) .azraq-section-head,
	.azraq-motion .azraq-reveal:not(.is-revealed) .azraq-stagger > *,
	.azraq-motion .azraq-reveal:not(.is-revealed) .azraq-contact__columns {
		opacity: 0;
		transform: translateY(24px);
	}

	.azraq-motion .azraq-reveal .azraq-section-head,
	.azraq-motion .azraq-reveal .azraq-stagger > *,
	.azraq-motion .azraq-reveal .azraq-contact__columns {
		transition: opacity var(--azraq-slow) var(--azraq-ease), transform var(--azraq-slow) var(--azraq-ease), box-shadow var(--azraq-fast) ease, border-color var(--azraq-fast) ease, background-color var(--azraq-fast) ease;
		transition-delay: calc(var(--azraq-i, 0) * 70ms + 60ms), calc(var(--azraq-i, 0) * 70ms + 60ms), 0s, 0s, 0s;
	}

	.azraq-service-card:hover,
	.azraq-post-card:hover {
		transform: translateY(-3px);
	}

	.azraq-work-card:hover {
		transform: translateY(-4px);
	}

	.wp-block-button__link:active {
		transform: scale(0.98);
	}
}

@keyframes azraq-drift-clouds {
	0% { transform: translate3d(-3%, 0, 0); }
	100% { transform: translate3d(3%, -1.5%, 0); }
}

@keyframes azraq-drift-light {
	0% { transform: translate3d(2%, 1%, 0) scale(1); }
	100% { transform: translate3d(-2%, -1%, 0) scale(1.06); }
}

@keyframes azraq-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}

@keyframes azraq-draw {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* 5. Reduced motion: no drift, no entrance, no reveal. --------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Interactive four-service line on the home page. */
.azraq-interactive-services { overflow: hidden; }
.azraq-service-flow { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 5vw, 68px) 0; }
.azraq-flow-rail { position: absolute; z-index: 0; top: 50%; left: 2%; right: 34%; height: 3px; background: linear-gradient(90deg, #d9f0ff 0%, #69bfff 45%, #126ef0 100%); transform: translateY(-50%); border-radius: 9px; }
.azraq-flow-rail span { position: absolute; inset: -5px 0; background: inherit; filter: blur(10px); opacity: .42; }
.azraq-flow-items { position: relative; z-index: 1; display: grid; gap: 12px; }
.azraq-flow-item { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 14px 18px; border: 1px solid rgba(35, 112, 205, .12); border-radius: 15px; background: rgba(255,255,255,.94); color: #10253c; text-align: left; box-shadow: 0 10px 28px rgba(29, 94, 157, .09); cursor: pointer; transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease; }
.azraq-flow-item:hover, .azraq-flow-item:focus-visible { transform: translateX(5px); border-color: #60b8ff; outline: none; }
.azraq-flow-item.is-active { background: #102e55; color: #fff; border-color: #102e55; box-shadow: 0 15px 35px rgba(16, 46, 85, .22); }
.azraq-flow-number { color: #1685f8; font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.azraq-flow-label { flex: 1; font-weight: 700; font-size: clamp(14px, 1.3vw, 17px); }
.azraq-flow-arrow { font-size: 20px; opacity: .6; transition: transform .2s ease; }
.azraq-flow-item.is-active .azraq-flow-arrow { transform: translate(2px,-2px); opacity: 1; }
.azraq-flow-detail { position: relative; z-index: 1; min-height: 280px; padding: clamp(24px, 3vw, 38px); border: 1px solid rgba(61, 145, 220, .16); border-radius: 22px; background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(231,245,255,.95)); box-shadow: 0 18px 55px rgba(40, 110, 170, .10); animation: azraq-flow-in .28s ease both; }
.azraq-flow-detail[hidden] { display: none; }
.azraq-flow-detail__eyebrow { margin: 0 0 14px; color: #1679dc; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.azraq-flow-detail h3 { margin: 0 0 12px; color: #10253c; font-size: clamp(23px, 2.5vw, 34px); line-height: 1.16; }
.azraq-flow-detail > p:not(.azraq-flow-detail__eyebrow) { color: #526b85; line-height: 1.75; }
.azraq-flow-link { display: inline-flex; gap: 5px; align-items: center; margin-top: 8px; color: #096dd4; font-weight: 750; text-decoration: none; }
.azraq-flow-link:hover { text-decoration: underline; }
@keyframes azraq-flow-in { from { opacity: .25; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (max-width: 780px) { .azraq-service-flow { grid-template-columns: 1fr; gap: 22px; } .azraq-flow-rail { top: 18px; bottom: 18px; left: 24px; right: auto; width: 3px; height: auto; transform: none; } .azraq-flow-items { gap: 9px; } .azraq-flow-item { min-height: 58px; padding: 12px 14px; } .azraq-flow-detail { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .azraq-flow-detail { animation: none; } .azraq-flow-item { transition: none; } }


/* Audience-fit section: a low-friction route into the four-stage offer. */
.azraq-audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); margin-top: clamp(28px, 4vw, 48px); }
.azraq-audience-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 260px; padding: clamp(22px, 3vw, 34px); border: 1px solid rgba(40, 104, 166, .15); border-radius: 20px; background: linear-gradient(155deg, rgba(255,255,255,.98), rgba(239,247,255,.86)); box-shadow: 0 12px 35px rgba(29, 79, 125, .055); }
.azraq-audience-card .azraq-card-index { margin: 0 0 20px; color: #1679dc; font: 700 11px/1.4 var(--wp--preset--font-family--mono, monospace); letter-spacing: .08em; }
.azraq-audience-card h3 { margin: 0 0 12px; color: #10253c; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; }
.azraq-audience-card > p:not(.azraq-card-index) { margin: 0 0 24px; color: #526b85; line-height: 1.75; }
.azraq-audience-card a { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: #096dd4; font-weight: 750; text-decoration: none; }
.azraq-audience-card a:hover { text-decoration: underline; }
@media (max-width: 780px) { .azraq-audience-grid { grid-template-columns: 1fr; } .azraq-audience-card { min-height: 0; } }