/* Header, primary/footer nav, breadcrumb hero, footer, WhatsApp float. */

/* ===== Header =====
   Overlaps the hero/page-title-hero (transparent, position:absolute) until
   the page scrolls past ~40px, then becomes a solid, fixed, shrunk bar
   (.is-scrolled, toggled in assets/js/main.js). Mirrors the reference
   site's overlap-then-stick behavior; every template's first content block
   is a hero or page-title-hero that already reserves clearance for the
   header's tallest (120px desktop) state — see those sections' padding. */
.nuqta-site-header {
	position: absolute;
	inset-inline: 0;
	top: 0;
	background: transparent;
	border-bottom: 1px solid transparent;
	z-index: 100;
	transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.nuqta-site-header.is-scrolled {
	position: fixed;
	background: var(--color-surface);
	border-bottom-color: var(--color-border);
	box-shadow: var(--shadow-header-scrolled);
}

.nuqta-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	height: var(--header-h-desktop);
	transition: height 0.3s ease;
}
.nuqta-site-header.is-scrolled .nuqta-header-row {
	height: var(--header-h-sticky);
}
@media (max-width: 1024px) {
	.nuqta-header-row,
	.nuqta-site-header.is-scrolled .nuqta-header-row {
		height: var(--header-h-tablet);
	}
}

.nuqta-site-branding .nuqta-logo-link {
	display: inline-flex;
	align-items: center;
}
/* The uploaded logo is a JPEG — no alpha channel, so whatever's baked
   around the mark (here, white) always renders as a rectangle against the
   header's transparent/dark-overlap state. A deliberate white card makes
   that rectangle read as an intentional badge instead of a rendering
   artifact — scoped to WP core's own .custom-logo-link (the real image
   logo), leaving the plain-text fallback untouched. */
.nuqta-site-branding .custom-logo-link {
	display: inline-flex;
	align-items: center;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: var(--space-1) var(--space-3);
	box-shadow: var(--shadow-card);
}
.nuqta-logo-text {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--color-primary);
}
body.nuqta-header-on-dark .nuqta-site-header:not(.is-scrolled) .nuqta-site-branding .nuqta-logo-text {
	color: var(--color-on-brand);
}
.nuqta-site-branding img {
	max-height: var(--logo-h-normal);
	width: auto;
	transition: max-height 0.3s ease;
}
.nuqta-site-header.is-scrolled .nuqta-site-branding img {
	max-height: var(--logo-h-scrolled);
}
@media (max-width: 1024px) {
	/* Clamp the logo to the row's height regardless of how large an admin
	   sets --logo-h-normal (up to 120px) — without this, a large custom
	   logo height would overflow the fixed 60px tablet/mobile header row.
	   Must come after the base .nuqta-site-branding img rule above to win
	   the cascade at equal specificity. */
	.nuqta-site-branding {
		overflow: hidden;
	}
	.nuqta-site-branding img,
	.nuqta-site-header.is-scrolled .nuqta-site-branding img {
		max-height: min(var(--logo-h-normal), calc(var(--header-h-tablet) - 16px));
	}
}

.nuqta-nav-toggle {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: var(--space-2);
	order: 3;
}
.nuqta-nav-toggle-bar {
	width: 24px;
	height: 2px;
	background: var(--color-primary-dark);
	display: block;
}
/* The header is transparent pre-scroll, overlapping either a hero or a
   page-title-hero — the former is light by default, the latter (and any
   hero with a media background) is always dark. body.nuqta-header-on-dark
   (inc/template-functions.php: nuqta_body_classes()) tells us which one
   we're over, so the toggle/nav/phone/logo-text can stay legible either
   way. Once .is-scrolled applies (solid white header), :not(.is-scrolled)
   stops matching and the dark defaults above take back over. */
body.nuqta-header-on-dark .nuqta-site-header:not(.is-scrolled) .nuqta-nav-toggle-bar {
	background: var(--color-on-brand);
}

/* ===== Mobile nav popup — right-side drawer =====
   The hamburger toggles .is-open on both the backdrop and the drawer
   (assets/js/main.js). The drawer is taken out of flow (position:fixed),
   so it never competes for space in .nuqta-header-row — this replaces the
   old in-row display:none/.is-open{display:block} approach, which forced
   the opened menu onto the same line as the logo/toggle since the row
   never wrapped. */
.nuqta-nav-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	opacity: 0;
	visibility: hidden;
	z-index: 210;
	transition: opacity 0.3s ease, visibility 0s ease 0.3s;
}
.nuqta-nav-backdrop.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease;
}
.nuqta-nav-drawer {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	width: 320px;
	max-width: 85vw;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	background: var(--color-surface);
	box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15);
	padding: var(--space-6) var(--space-5);
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
	z-index: 220;
}
.nuqta-nav-drawer.is-open {
	transform: translateX(0);
}
.nuqta-nav-drawer-head {
	display: flex;
	justify-content: flex-end;
}
.nuqta-nav-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	border: 0;
	background: var(--color-bg-alt);
	color: var(--color-text);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.nuqta-primary-nav {
	display: block;
	width: 100%;
}
.nuqta-nav-list, .nuqta-footer-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.nuqta-nav-list a {
	display: block;
	padding: var(--space-2) 0;
	font-weight: 500;
	color: var(--color-text);
}
.nuqta-nav-list a:hover,
.nuqta-nav-list .current-menu-item > a {
	color: var(--color-primary);
}
.nuqta-drawer-cta {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	padding-top: var(--space-5);
	margin-top: auto;
	border-top: 1px solid var(--color-border);
}
.nuqta-drawer-cta .nuqta-header-phone {
	font-size: 1.1rem;
}
.nuqta-drawer-cta .nuqta-btn-cta {
	text-align: center;
}

/* Submenu accordion — inert on the site's current flat 8-item menu, built
   defensively for whenever a nested item is added (WP's default walker
   already emits .menu-item-has-children / <ul class="sub-menu"> with no
   custom Walker needed; assets/js/main.js appends the toggle button). */
.nuqta-nav-list li.menu-item-has-children {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}
.nuqta-nav-list li.menu-item-has-children > a {
	flex: 1;
}
.nuqta-nav-list .sub-menu {
	flex-basis: 100%;
	list-style: none;
	margin: 0;
	padding-inline-start: var(--space-4);
	display: none;
}
.nuqta-nav-list li.is-expanded > .sub-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}
.nuqta-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--color-text-muted);
}
.nuqta-submenu-toggle::before {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -4px;
	transition: transform 0.25s ease;
}
li.is-expanded > .nuqta-submenu-toggle::before {
	transform: rotate(225deg);
	margin-top: 4px;
}

/* Visible keyboard-focus rings for the new interactive drawer elements —
   no .nuqta-btn or .nuqta-nav-toggle rule anywhere else in the theme
   defines one, so this is scoped to just what this feature adds. */
.nuqta-nav-toggle:focus-visible,
.nuqta-nav-drawer-close:focus-visible,
.nuqta-submenu-toggle:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Prevents the page behind the open drawer from scrolling (toggled on
   <html> by assets/js/main.js) — a gap the acesaudi.org reference
   implementation itself has and this rebuild deliberately does not
   replicate. */
html.nuqta-scroll-locked,
html.nuqta-scroll-locked body {
	overflow: hidden;
}

.nuqta-header-cta {
	display: none;
	align-items: center;
	gap: var(--space-4);
}
.nuqta-header-phone {
	font-weight: 700;
	color: var(--color-primary-dark);
	white-space: nowrap;
}

@media (min-width: 1025px) {
	/* The header's outer <header> element already spans the full viewport
	   width (position:absolute/fixed + inset-inline:0) — .nuqta-header-row
	   is what was cramped: sharing .nuqta-container's sitewide 1140px
	   content max-width left zero slack for logo + 8 nav items + phone +
	   CTA, which is why the CTA button's Arabic label was wrapping to two
	   lines (see the .nuqta-btn white-space fix in components.css). A
	   header bar legitimately needs more horizontal room than a body
	   content column, so it gets its own, wider max-width here — desktop
	   only, .nuqta-container's own 1140px stays untouched everywhere else. */
	.nuqta-header-row {
		max-width: 1320px;
		gap: var(--space-5);
	}
	.nuqta-nav-toggle { display: none; }
	.nuqta-nav-backdrop { display: none; }
	.nuqta-nav-drawer {
		position: static;
		width: auto;
		height: auto;
		display: block;
		gap: 0;
		background: transparent;
		box-shadow: none;
		padding: 0;
		overflow: visible;
		transform: none;
		transition: none;
		order: 2;
	}
	.nuqta-nav-drawer-head,
	.nuqta-drawer-cta {
		display: none;
	}
	.nuqta-primary-nav {
		display: block;
		width: auto;
	}
	.nuqta-nav-list {
		flex-direction: row;
		gap: var(--space-6);
	}
	.nuqta-nav-list a { padding: var(--space-2) 0; }
	.nuqta-nav-list li.menu-item-has-children {
		position: relative;
	}
	.nuqta-nav-list .sub-menu {
		position: absolute;
		inset-inline-start: 0;
		top: 100%;
		flex-basis: auto;
		min-width: 200px;
		padding: var(--space-2);
		background: var(--color-surface);
		box-shadow: var(--shadow-card);
		border-radius: var(--radius-md);
		z-index: 50;
	}
	.nuqta-nav-list li.menu-item-has-children:hover > .sub-menu,
	.nuqta-nav-list li.menu-item-has-children:focus-within > .sub-menu {
		display: flex;
	}
	.nuqta-submenu-toggle { display: none; }
	.nuqta-header-cta {
		display: flex;
		order: 3;
	}
	/* Desktop-only: here .nuqta-nav-list/.nuqta-header-phone sit directly on
	   the actual header background (not inside the always-white drawer),
	   so they need the same dark-overlap treatment as the toggle bars and
	   logo-text above. */
	body.nuqta-header-on-dark .nuqta-site-header:not(.is-scrolled) .nuqta-nav-list a {
		color: var(--color-on-brand);
	}
	body.nuqta-header-on-dark .nuqta-site-header:not(.is-scrolled) .nuqta-nav-list a:hover,
	body.nuqta-header-on-dark .nuqta-site-header:not(.is-scrolled) .nuqta-nav-list .current-menu-item > a {
		color: var(--color-accent);
	}
	body.nuqta-header-on-dark .nuqta-site-header:not(.is-scrolled) .nuqta-header-cta .nuqta-header-phone {
		color: var(--color-on-brand);
	}
}

/* ===== Page title hero (inner pages) =====
   Top padding clears the absolutely-positioned header (120px desktop /
   60px tablet-mobile) plus breathing room, matching the reference site's
   own page-title-hero clearance treatment. */
.nuqta-page-title-hero {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	color: var(--color-on-brand);
	padding-block-start: 200px;
	padding-block-end: var(--space-8);
	margin-block-end: var(--space-7);
	text-align: center;
}
.nuqta-page-title-hero h1 {
	color: var(--color-on-brand);
	margin-bottom: var(--space-2);
	font-size: var(--font-size-h1); /* unified with the sitewide h1 scale (was an independently-diverging 54px) */
}
@media (max-width: 1024px) {
	.nuqta-page-title-hero {
		padding-block-start: 96px;
		padding-block-end: var(--space-5);
	}
}
.nuqta-breadcrumb {
	font-size: 0.9rem;
	opacity: 0.85;
}
.nuqta-breadcrumb a {
	text-decoration: underline;
}
.nuqta-breadcrumb-sep {
	margin-inline: var(--space-2);
}

/* ===== Footer ===== */
.nuqta-site-footer {
	position: relative;
	background: var(--color-primary-dark);
	color: var(--color-footer-text);
	padding-block-start: calc(var(--space-8) + 100px);
}
/* The footer background is always dark — unlike the header's .logo-text,
   which needs to track scroll/hero state, this one is unconditional. */
.nuqta-footer-about .nuqta-logo-text {
	color: var(--color-on-brand);
}
.nuqta-site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: 0;
	height: 100px;
	background: url('../images/footer-wave.svg') center / cover no-repeat;
}
.nuqta-footer-columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	padding-block-end: var(--space-7);
}
.nuqta-footer-col h3 {
	color: var(--color-on-brand);
	font-size: 1.05rem;
	margin-bottom: var(--space-3);
}
.nuqta-footer-about img {
	max-height: var(--logo-h-normal);
	width: auto;
}
/* Same JPEG-background rationale as .nuqta-site-branding .custom-logo-link
   above — the footer is always on a dark background, so this one doesn't
   need scroll-state gating. */
.nuqta-footer-about .custom-logo-link {
	display: inline-flex;
	align-items: center;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: var(--space-1) var(--space-3);
	box-shadow: var(--shadow-card);
	margin-bottom: var(--space-3);
}
.nuqta-footer-col p {
	color: var(--color-footer-text-muted);
}
.nuqta-footer-nav-list a,
.nuqta-footer-contact-list a,
.nuqta-footer-contact-list li {
	color: var(--color-footer-text-muted);
}
.nuqta-footer-nav-list a:hover,
.nuqta-footer-contact-list a:hover {
	color: var(--color-on-brand);
}
.nuqta-footer-contact-list {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.nuqta-social-icons {
	display: flex;
	gap: var(--space-3);
	margin-top: var(--space-4);
}
.nuqta-social-icon {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-footer-border);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-footer-text);
}
.nuqta-social-icon svg { width: 18px; height: 18px; }
.nuqta-social-icon:hover {
	background: var(--color-accent);
	border-color: var(--color-accent);
}

.nuqta-copyright-bar {
	border-top: 1px solid rgba(255, 255, 255, 0.19);
	padding-block: var(--space-4);
	text-align: center;
	font-size: 0.9rem;
	color: var(--color-footer-text-dim);
}
@media (max-width: 1024px) {
	.nuqta-copyright-bar { padding: var(--space-3) var(--space-5); }
}
@media (max-width: 767px) {
	.nuqta-copyright-bar { padding: var(--space-6) var(--space-5) var(--space-5); }
}

@media (min-width: 768px) {
	.nuqta-footer-columns {
		/* Matches reference's 20/20/30/30 desktop split. Unlike the
		   reference, all 4 columns stay visible at every width — hiding
		   nav/contact links on mobile (as the reference does) would be a
		   real UX regression, not a design signature worth copying. */
		grid-template-columns: 20% 20% 30% 30%;
	}
}

.nuqta-footer-nav-list a,
.nuqta-footer-contact-list li {
	font-size: 14px;
}
@media (max-width: 1024px) {
	.nuqta-footer-nav-list a,
	.nuqta-footer-contact-list li {
		font-size: 13px; /* reference uses 10px here; floored at 13px for legibility */
	}
}

/* ===== Floating WhatsApp button ===== */
.nuqta-whatsapp-float {
	position: fixed;
	inset-block-end: var(--space-6);
	inset-inline-end: var(--space-5);
	width: 56px;
	height: 56px;
	border-radius: var(--radius-pill);
	background: var(--color-whatsapp);
	color: var(--color-on-brand);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0,0,0,0.25);
	z-index: 200;
	transition: transform 0.2s ease;
}
.nuqta-whatsapp-float:hover {
	transform: scale(1.06);
}
.nuqta-whatsapp-float svg {
	width: 30px;
	height: 30px;
}

/* ===== Form notice ===== */
.nuqta-form-notice {
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	margin-block-end: var(--space-4);
	font-weight: 500;
}
.nuqta-form-notice-success {
	background: var(--color-notice-success-bg);
	color: var(--color-success);
	border: 1px solid var(--color-success);
}
.nuqta-form-notice-error {
	background: var(--color-notice-error-bg);
	color: var(--color-error);
	border: 1px solid var(--color-error);
}

/* ===== Generic grid helpers ===== */
.nuqta-grid {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}
@media (min-width: 480px) {
	.nuqta-grid-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	.nuqta-grid-3 { grid-template-columns: repeat(3, 1fr); }
	.nuqta-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
	.nuqta-grid-4 { grid-template-columns: repeat(4, 1fr); }
}