/*
 * Ahmad Almashhrawi theme — front-end styles.
 * Written with logical properties (inline-start/end) wherever practical so
 * the layout mirrors correctly for RTL (Arabic) without duplicate rules.
 * Colors/typography/spacing tokens are defined in theme.json; this file
 * covers layout, custom section classes, and interaction states only.
 */

/* ---------- Spacing system ---------- */
/* Two responsive section-padding tiers used consistently across the site,
   roughly 52–80px for lighter/secondary sections and 64–120px for major
   sections, scaling with viewport width instead of a single fixed value. */

:root {
	--space-section-sm: clamp(3.25rem, 2.4rem + 3vw, 5rem);
	--space-section-lg: clamp(4rem, 2.6rem + 5.5vw, 7.5rem);
	--ahmad-header-height: 84px;
}

/* ---------- Base & accessibility ---------- */

*:focus-visible {
	outline: 2px solid #2563EB;
	outline-offset: 2px;
}

a {
	text-decoration: none;
}

@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;
	}
}

/* Note: the "Skip to content" link is injected automatically by WordPress
   core for block themes (wp_enqueue_block_template_skip_link on
   wp_body_open) and needs no theme markup or styling here. */

/* Prevent any horizontal scroll from full-bleed sections */
body {
	overflow-x: hidden;
}

/* ---------- Header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: rgba(7, 20, 38, 0.7);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header__inner {
	min-height: clamp(72px, 6vw, 84px);
	align-items: center;
	padding-inline: clamp(1.5rem, 4vw, 3rem);
}

.site-header a {
	color: #fff;
}

.site-header__brand {
	gap: 0.85rem;
	align-items: center;
}

.site-header__title a {
	font-weight: 700;
	letter-spacing: 0.03em;
	font-size: 1rem;
	text-transform: uppercase;
}

.site-header__nav {
	gap: 0.25rem;
}

.site-header__nav a {
	position: relative;
	color: rgba(255, 255, 255, 0.82);
	font-size: 0.95rem;
	font-weight: 500;
	padding: 0.5rem 0.9rem;
	transition: color 0.15s ease;
}

.site-header__nav a::after {
	content: "";
	position: absolute;
	inset-inline: 0.9rem;
	bottom: 0.3rem;
	height: 1.5px;
	background: #3B82F6;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s ease;
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible {
	color: #ffffff;
}

.site-header__nav a:hover::after,
.site-header__nav a:focus-visible::after {
	transform: scaleX(1);
}

.site-header__lang {
	font-size: 0.85rem;
	padding-inline-start: 1.25rem;
	margin-inline-start: 0.5rem;
	border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}

.lang-switcher-placeholder {
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.08em;
}

/* Mobile overlay menu: keep it clean, not oversized */
.wp-block-navigation__responsive-container.is-menu-open {
	background: #071426;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	color: #fff;
	font-size: 1.1rem;
}

/* ---------- Hero ---------- */

.hero-section {
	display: flex;
	align-items: center;
	position: relative;
}

/* Subtle normalization of the Cover's own background layer (today the
   navy-depth gradient; a real photo if one is uploaded later per the
   README's "Hero background" section) so its colors read consistently
   across displays/panels instead of shifting with screen calibration.
   Scoped to the Cover's own background/image layers only — never the
   portrait image, and never hero-inner's text/buttons content. */
.hero-section .wp-block-cover__background,
.hero-section .wp-block-cover__image-background {
	filter: saturate(0.88) brightness(0.88);
}

/* Directional navy overlay: strongest behind the left-side text for
   readability, fading out toward the portrait side so the background
   (photo or gradient) stays visible there. A dedicated layer above the
   Cover's own background/dim and below the hero content (z-index 2), so
   it never touches hero-inner. */
.hero-section::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		rgba(3, 15, 30, 0.88) 0%,
		rgba(3, 15, 30, 0.72) 45%,
		rgba(3, 15, 30, 0.48) 100%
	);
}

/* Faint technical grid texture — CSS only, no imagery */
.hero-section::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 0%, transparent 75%);
}

.hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
	gap: clamp(2rem, 5vw, 4.5rem);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.hero-content {
	flex: 1 1 56%;
	max-width: 680px;
}

.hero-eyebrow {
	color: #7FB0FF;
	letter-spacing: 0.14em;
	font-weight: 700;
	margin-block-end: 1.1rem;
}

.hero-headline {
	font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem);
	line-height: 1.08;
	margin-block-end: 1.5rem;
}

.hero-headline__accent {
	color: #3B82F6;
}

.hero-supporting {
	max-width: 48ch;
	opacity: 0.92;
	margin-block-end: 1.35rem;
}

.hero-credential {
	color: #9db8dd;
	letter-spacing: 0.04em;
	margin-block-end: 2rem;
}

.hero-buttons {
	gap: 1rem;
	margin-block-end: 2rem;
}

.hero-social {
	gap: 0.9rem;
}

.hero-social a {
	color: #fff;
}

.hero-portrait {
	/* This is the 44% hero-row column only — it never changes size when a
	   portrait style is picked. All visible box treatment (glow, bottom
	   alignment) lives on .hero-portrait__stage below, and the actual
	   selectable sizing lives on the <img> further down. align-self:
	   stretch (overriding hero-inner's own centered vertical alignment
	   just for this item) gives the stage a real, definite height to fill
	   instead of shrink-wrapping to the image. */
	position: relative;
	flex: 0 1 44%;
	align-self: stretch;
}

/* Full-size portrait stage: this box is the "container" and it is
   intentionally inert with respect to portrait style — its own
   dimensions never change when Small/Medium/Large/XL is selected on the
   image inside it. It fills the hero-portrait column and provides a
   fixed, predictable frame for the image to sit inside, bottom-anchored
   and centered. min-height is a desktop fallback for when an ancestor's
   height can't be resolved to a percentage (e.g. if the Cover block's
   inner container isn't itself a definite height), so the stage still
   reads as "hero height" rather than collapsing to nothing. */
.hero-portrait__stage {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: clamp(360px, 34vw, 520px);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: visible;
}

/* Atmospheric glow rather than a hard-edged card behind the portrait.
   Belongs to the stage (a fixed, always-present box) rather than the
   image, so the glow never resizes or repositions when the portrait
   style changes. */
.hero-portrait__stage::before {
	content: "";
	position: absolute;
	inset: -12%;
	background: radial-gradient(circle at 50% 38%, rgba(59, 130, 246, 0.38), rgba(37, 99, 235, 0.14) 45%, transparent 72%);
	filter: blur(28px);
	z-index: 0;
}

/* The Image block's figure: always 100% of the stage width and
   flex-centered, regardless of style. Only the <img> inside changes
   size — this wrapper is a fixed reference frame for that percentage to
   resolve against, not a resizable container itself. No background/
   border here, so it stays an invisible frame — never a visible
   rectangular card behind the portrait. */
.hero-portrait__image {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Shared visual treatment for every portrait state, including
   WordPress's own "Default" Image block style (no is-style-portrait-*
   class present): Default now renders at exactly 100% of the stage
   width — the reference point that Portrait XL/XXL scale up from below.
   `max-width: 100%` is a safety net only — it never shrinks the image
   below its requested width, it only prevents overflow on narrow
   viewports/containers (where width itself is later reduced — see the
   mobile breakpoint), and `height: auto` + `object-fit: contain` keep
   the full, uncropped image visible and undistorted, with its original
   aspect ratio preserved and pixels untouched, at any width. No
   background/border is set on the image itself either, so a transparent
   PNG blends directly into the hero background instead of sitting on a
   visible card. */
.hero-portrait__image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35));
}

/* Editor-selectable portrait sizes (Settings sidebar → Styles). Small/
   Medium/Large resize the <img> directly via width, as a percentage of
   the fixed .hero-portrait__stage (via the always-100%
   .hero-portrait__image figure above) — the stage/figure box itself
   never moves or resizes. XL/XXL instead keep layout width at 100%
   (identical to Default, so they can't affect the stage, figure, hero
   height, or column width either) and grow visually via `transform:
   scale()` instead — a purely visual paint-time effect with no layout
   footprint. `transform-origin: center bottom` keeps the scaling
   anchored to the portrait's own bottom-center, so it stays horizontally
   centered and bottom-aligned as it grows past the stage's edge, rather
   than drifting. Scoped to .hero-portrait__image so selecting one of
   these on an unrelated site image has no visual effect — the selector
   simply won't match. */
.hero-portrait__image.is-style-portrait-small img {
	width: 70%;
}

.hero-portrait__image.is-style-portrait-medium img {
	width: 82%;
}

.hero-portrait__image.is-style-portrait-large img {
	width: 92%;
}

.hero-portrait__image.is-style-portrait-xl img {
	width: 100%;
	transform: scale(1.1);
	transform-origin: center bottom;
}

.hero-portrait__image.is-style-portrait-xxl img {
	width: 100%;
	transform: scale(1.25);
	transform-origin: center bottom;
}

/* Buttons */

.wp-block-button .wp-block-button__link {
	padding: 0.85rem 1.9rem;
	font-size: 0.95rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, opacity 0.15s ease;
}

.wp-block-button .wp-block-button__link.is-style-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1.5px solid currentColor;
	background: transparent;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.55);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background: rgba(255, 255, 255, 0.1);
}

/* ---------- Value strip (connected to hero) ---------- */

.value-strip {
	position: relative;
	padding-block: 0 var(--space-section-sm);
}

.value-strip__panel {
	position: relative;
	z-index: 5;
	margin-top: -72px;
	background: rgba(13, 34, 58, 0.82);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	box-shadow: 0 30px 60px -24px rgba(7, 20, 38, 0.6);
	padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
	row-gap: 2rem;
}

.value-strip__item {
	gap: 0.65rem;
	padding-inline: clamp(1rem, 2vw, 1.75rem);
	border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
}

.value-strip__item:first-child {
	border-inline-start: none;
	padding-inline-start: 0;
}

.value-strip__item p {
	color: rgba(255, 255, 255, 0.72);
}

.value-strip__icon {
	display: block;
	margin-block-end: 0.15rem;
}

/* ---------- About preview ---------- */

.about-preview {
	padding-block: var(--space-section-lg);
}

.about-preview__inner {
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

.about-preview__text {
	flex: 1 1 440px;
	max-width: 560px;
}

.about-preview__visual {
	flex: 1 1 360px;
	max-width: 420px;
	display: flex;
	justify-content: center;
}

.section-eyebrow {
	color: #2563EB;
	letter-spacing: 0.12em;
	font-weight: 700;
	margin-block-end: 0.6rem;
}

.section-eyebrow--light {
	color: #7fb0ff;
}

.about-visual-card {
	position: relative;
	width: 100%;
	max-width: 380px;
	background: linear-gradient(160deg, #0D223A, #071426);
	border: 1px solid rgba(59, 130, 246, 0.25);
	border-radius: 20px;
	padding: clamp(2rem, 4vw, 2.75rem);
	overflow: hidden;
	box-shadow: 0 30px 50px -28px rgba(7, 20, 38, 0.55);
}

.about-visual-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 18px 18px;
	opacity: 0.6;
}

.about-visual-card > * {
	position: relative;
	z-index: 1;
}

.about-visual-badge {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(37, 99, 235, 0.15);
	border: 1px solid rgba(59, 130, 246, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block-end: 1.35rem;
}

.about-visual-card__desc {
	color: rgba(255, 255, 255, 0.7);
}

/* ---------- Expertise (home) ---------- */

.expertise-section {
	padding-block: var(--space-section-lg);
}

.expertise-grid {
	gap: 1.75rem;
	margin-block: 2.75rem;
}

.expertise-card {
	border: 1px solid rgba(16, 24, 40, 0.09);
	border-radius: 12px;
	padding: 2rem clamp(1.5rem, 2.5vw, 2.25rem);
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.expertise-card:hover {
	border-color: rgba(37, 99, 235, 0.35);
	box-shadow: 0 16px 32px -20px rgba(16, 24, 40, 0.25);
	background-color: rgba(37, 99, 235, 0.02);
}

.expertise-card__icon {
	display: block;
	margin-block-end: 1rem;
}

.expertise-card h3 {
	margin-block-end: 0.5rem;
}

/* ---------- SIRI section (home) ---------- */

.siri-section {
	padding-block: var(--space-section-lg);
}

.siri-section__inner {
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

.siri-section__text {
	flex: 1 1 440px;
	max-width: 560px;
}

.siri-section__body {
	opacity: 0.92;
	margin-block: 1.25rem 1.75rem;
}

.siri-visual {
	flex: 1 1 360px;
	max-width: 420px;
	width: 100%;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
	padding: clamp(1.75rem, 3vw, 2.5rem);
}

.siri-visual__row {
	margin-block-end: 0.5rem;
	opacity: 0.85;
}

.siri-visual__row:not(:first-child) {
	margin-block-start: 1.25rem;
}

.siri-visual__bar {
	height: 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, #3B82F6, #7FB0FF);
	opacity: 0.9;
}

.siri-visual__caption {
	display: block;
	margin-block-start: 1.5rem;
	opacity: 0.55;
	font-style: italic;
}

/* ---------- Final CTA ---------- */

.final-cta {
	position: relative;
	padding-block: var(--space-section-lg);
	overflow: hidden;
}

.final-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		radial-gradient(ellipse 60% 90% at 50% 0%, rgba(37, 99, 235, 0.28), transparent 65%);
	background-size: 56px 56px, 56px 56px, 100% 100%;
	pointer-events: none;
}

.final-cta > .wp-block-group {
	position: relative;
	z-index: 1;
}

.final-cta h2 {
	max-width: 800px;
	margin-inline: auto;
	margin-block-end: 1rem;
}

.final-cta p {
	opacity: 0.85;
	margin-block-end: 2rem;
}

/* ---------- Generic / bespoke page headers ---------- */

.page-hero-band,
.generic-page-header {
	padding-block: var(--space-section-lg);
}

.page-hero-band p:last-child {
	max-width: 60ch;
	opacity: 0.9;
	margin-block-start: 0.75rem;
}

.page-cta-band {
	padding-block: var(--space-section-sm);
}

/* ---------- Editorial content pages ---------- */

.editorial-section,
.generic-page-content {
	padding-block: var(--space-section-sm);
}

.editorial-section h2 {
	margin-block-start: 2.5rem;
}

.editorial-section h2:first-child {
	margin-block-start: 0;
}

.credential-panel {
	border-radius: 10px;
	padding: 1.5rem 1.75rem;
	margin-block-start: 2rem;
	border-inline-start: 3px solid #2563EB;
}

/* ---------- Expertise detail page ---------- */

.expertise-detail-section {
	padding-block: var(--space-section-sm);
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.expertise-detail-card {
	border-radius: 10px;
	padding: 2rem clamp(1.5rem, 4vw, 3rem);
}

/* ---------- Contact page ---------- */

.contact-section {
	padding-block: var(--space-section-sm);
	gap: 2.5rem;
}

.contact-section__social,
.contact-section__form-placeholder {
	flex: 1 1 320px;
}

.contact-section__form-placeholder {
	border-radius: 10px;
	padding: 2rem;
	border: 1px dashed rgba(16, 24, 40, 0.18);
}

/* ---------- Footer ---------- */

.site-footer {
	padding-block: var(--space-section-sm) 2rem;
}

.site-footer a {
	color: rgba(255, 255, 255, 0.85);
	transition: color 0.15s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: #ffffff;
}

.site-footer__top {
	gap: 2.5rem 3rem;
	margin-block-end: 2.5rem;
}

.site-footer__brand {
	flex: 1 1 280px;
	gap: 0.5rem;
	max-width: 320px;
}

.site-footer__tagline {
	opacity: 0.65;
	margin-block-start: 0.35rem;
}

.site-footer__col {
	flex: 0 1 auto;
	gap: 0.75rem;
}

.site-footer__col-label {
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	margin-block-end: 0.4rem;
}

.site-footer__nav a {
	font-size: 0.92rem;
	opacity: 0.9;
}

.site-footer__divider {
	border-color: rgba(255, 255, 255, 0.1);
	margin-block: 0 1.75rem;
}

.site-footer__copyright {
	opacity: 0.55;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.value-strip__panel {
		margin-top: -48px;
	}
}

@media (max-width: 782px) {
	.hero-inner {
		flex-direction: column-reverse;
		text-align: center;
	}

	.hero-content {
		max-width: 100%;
	}

	.hero-headline,
	.hero-supporting,
	.hero-credential {
		margin-inline: auto;
	}

	.hero-supporting {
		max-width: 100%;
	}

	.hero-portrait {
		max-width: 240px;
		flex-basis: auto;
		align-self: center;
	}

	/* Stage collapses to content height on mobile (the stacked layout no
	   longer needs it to fill the hero row) and clips its own glow rather
	   than letting anything bleed past the now-narrow column. */
	.hero-portrait__stage {
		width: 100%;
		height: auto;
		min-height: 0;
		overflow: hidden;
	}

	/* Force all portrait styles back to a shared, capped width on
	   tablet/mobile so none of them can trigger horizontal scrolling on
	   narrow viewports. XL/XXL's desktop-only transform scale is disabled
	   here too, since scaling up an already-100%-width image on a narrow
	   viewport would overflow it. */
	.hero-portrait__image.is-style-portrait-small img,
	.hero-portrait__image.is-style-portrait-medium img,
	.hero-portrait__image.is-style-portrait-large img,
	.hero-portrait__image.is-style-portrait-xl img,
	.hero-portrait__image.is-style-portrait-xxl img {
		width: 100%;
		max-width: 100%;
		transform: none;
	}

	.hero-buttons,
	.hero-social {
		justify-content: center;
	}

	.value-strip__panel {
		grid-template-columns: 1fr 1fr !important;
		margin-top: -32px;
		row-gap: 1.75rem;
	}

	.value-strip__item {
		border-inline-start: none;
		padding-inline: 0.5rem;
	}

	.value-strip__item:nth-child(odd) {
		border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
	}

	.expertise-grid {
		grid-template-columns: 1fr 1fr !important;
	}

	.about-preview__inner,
	.siri-section__inner {
		flex-direction: column;
	}

	.about-preview__visual,
	.siri-visual {
		max-width: 420px;
	}

	.site-header__nav {
		font-size: 0.9rem;
	}
}

@media (max-width: 480px) {
	.value-strip__panel {
		grid-template-columns: 1fr !important;
		margin-top: -20px;
		row-gap: 1.5rem;
	}

	.value-strip__item {
		border-inline-end: none !important;
	}

	.expertise-grid {
		grid-template-columns: 1fr !important;
	}

	.hero-buttons {
		flex-direction: column;
	}

	.hero-buttons .wp-block-button {
		width: 100%;
	}

	.hero-buttons .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.site-footer__top {
		flex-direction: column;
	}
}