/* ============================================================
   MikroTik Alarab — WordPress theme bridge
   Connects prototype CSS to WordPress markup conventions.
   ============================================================ */

html { scroll-padding-top: 80px; overflow-x: clip; }
body { overflow-x: clip; }
/* DO NOT put overflow on .site — it breaks position: sticky on .topbar. */

/* ============================================================
   LANG TOGGLE — use <a> tags (real links) but style as buttons
   ============================================================ */
.lang-toggle a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	border-radius: 100px;
	color: var(--ink-3);
	background: transparent;
	border: 0;
	font-family: 'JetBrains Mono', ui-monospace, monospace !important;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.15s ease;
	line-height: 1;
	min-width: 36px;
}
.lang-toggle a:hover { color: var(--ink); }
.lang-toggle a.active { background: var(--ink); color: var(--paper); }
.lang-toggle a.active:hover { color: var(--paper); }
@media (max-width: 720px) {
	.topbar .lang-toggle a { padding: 5px 10px; font-size: 10px; min-width: 32px; }
}

/* ============================================================
   HERO — force prototype fonts (the source CSS hardcodes Inter)
   ============================================================ */
.mtkph,
.mtkph * { font-family: var(--body) !important; }
.mtkph .mtkph__title,
.mtkph h1, .mtkph h2, .mtkph h3,
.mtkph [class*="display-"] { font-family: var(--display) !important; }
.mtkph .mono,
.mtkph [class*="mono"],
.mtkph .mtkph__sku,
.mtkph .mtkph__tab,
.mtkph .mtkph__spec-label,
.mtkph .mtkph__brand-badge-label,
.mtkph .mtkph__brand-badge-name { font-family: var(--mono) !important; }

[dir="rtl"] .mtkph,
[dir="rtl"] .mtkph * { font-family: 'IBM Plex Sans Arabic', ui-sans-serif, system-ui, sans-serif !important; }

/* ============================================================
   FOOTER — matches handoff exactly: dark background, inverted
   logo, light text on dark.
   ============================================================ */
.site-footer {
	background: var(--ink);
	color: var(--paper);
	padding: 64px 0 32px;
	margin-top: auto;
}
.footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(247,246,242,0.12);
}
@media (max-width: 800px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}
@media (max-width: 600px) {
	.footer-grid { grid-template-columns: 1fr; }
}
.footer-brand-mark {
	height: 56px;
	width: auto;
	filter: invert(1);
}
.brand-block p,
.footer-tagline {
	color: rgba(247,246,242,0.65);
	font-size: 14px;
	line-height: 1.7;
	margin-top: 20px;
	max-width: 36ch;
}

/* Social icons under tagline in footer */
.footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}
.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(247,246,242,0.18);
	border-radius: 50%;
	color: rgba(247,246,242,0.75);
	background: transparent;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.footer-social a:hover {
	transform: translateY(-2px);
	color: #FFFFFF;
}
.footer-social svg {
	width: 16px;
	height: 16px;
}

/* Brand-colored hover states for each platform */
.footer-social a[aria-label="Facebook"]:hover {
	background: #1877F2;
	border-color: #1877F2;
}
.footer-social a[aria-label="WhatsApp"]:hover {
	background: #25D366;
	border-color: #25D366;
}
.footer-social a[aria-label="Instagram"]:hover {
	background: linear-gradient(45deg, #F58529 0%, #DD2A7B 35%, #8134AF 65%, #515BD4 100%);
	border-color: #DD2A7B;
}
.footer-social a[aria-label="LinkedIn"]:hover {
	background: #0A66C2;
	border-color: #0A66C2;
}
.footer-social a[aria-label="YouTube"]:hover {
	background: #FF0000;
	border-color: #FF0000;
}
.footer-social a[aria-label="TikTok"]:hover {
	background: #000000;
	border-color: #25F4EE;
	color: #25F4EE;
	box-shadow: 2px 0 0 #FE2C55, -2px 0 0 #25F4EE;
}

/* Office column — city label on top, Google Maps button below */
.footer-offices {
	gap: 18px !important;
}
.footer-offices li {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}
.footer-offices__label {
	color: rgba(247,246,242,0.8);
	font-size: 15px;
	line-height: 1.4;
}
.footer-offices__map-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid rgba(247,246,242,0.25);
	border-radius: 100px;
	background: transparent;
	color: rgba(247,246,242,0.9) !important;
	font-family: var(--mono);
	font-size: 10px !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	width: max-content;
	max-width: 100%;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.footer-offices__map-btn:hover,
.footer-offices__map-btn:focus {
	background: #F7F6F2;
	color: #0B0D0C !important;
	border-color: #F7F6F2;
}
.footer-offices__map-btn svg {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	stroke: currentColor;
}
.footer-offices__map-btn span {
	color: inherit !important;
}
.footer-grid h5,
.footer-col h5 {
	font-family: var(--mono);
	font-size: 15px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(247,246,242,0.55);
	margin: 0 0 18px;
}
.footer-grid ul,
.footer-col ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0;
	margin: 0;
}
.footer-grid li,
.footer-col li { margin: 0; }
.footer-grid a,
.footer-col a {
	color: rgba(247,246,242,0.8);
	font-size: 15px !important;
	text-decoration: none;
	transition: color 0.15s ease;
}
.footer-grid a:hover,
.footer-col a:hover { color: var(--paper); }
.footer-grid span,
.footer-col span { color: rgba(247,246,242,0.8); font-size: 15px !important; }

/* Map buttons keep their compact 10px text */
.footer-grid .footer-offices__map-btn,
.footer-grid .footer-offices__map-btn span,
.footer-col .footer-offices__map-btn,
.footer-col .footer-offices__map-btn span {
	font-size: 10px !important;
}

.footer-bottom {
	padding-top: 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(247,246,242,0.55);
	flex-wrap: wrap;
	gap: 16px;
}
@media (max-width: 600px) {
	.footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

/* ============================================================
   MARQUEE — force logo size override WP's width/height attrs
   Also force LTR on the animated marquee track so the animation
   doesn't start outside the viewport in RTL mode. The header
   above the marquee stays in the page direction.
   ============================================================ */
.marquee .logo-cell img {
	height: 44px !important;
	width: auto !important;
	max-height: 44px !important;
	max-width: 200px !important;
}

/* Force LTR on the marquee wrapper so RTL doesn't break overflow
 * clipping or animation direction. The header text inside stays
 * properly RTL via an override below. */
.marquee-wrap,
.marquee {
	direction: ltr !important;
}
/* But the header above the marquee should still flow in the page direction
 * so Arabic text is readable. */
[dir="rtl"] .marquee-head {
	direction: rtl !important;
}

/* In RTL, use the same LTR keyframes so logos flow continuously. */
[dir="rtl"] .marquee {
	animation-name: marquee !important;
}

/* Make marquee logos clickable links to brand products. */
.marquee a.logo-cell {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.marquee a.logo-cell:hover {
	opacity: 1;
	transform: translateY(-1px);
}
.marquee a.logo-cell img {
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.2s ease, opacity 0.2s ease;
}
.marquee a.logo-cell:hover img {
	filter: grayscale(0);
	opacity: 1;
}

/* ============================================================
   CONTACT — handoff classes (.contact-layout, .form-input,
   .form-label, .form-textarea, .form-select, .submit-btn,
   .contact-info, .contact-info__item, .contact-info__phone,
   .contact-info__map-link) live in main.css.

   No extra overrides needed here.
   ============================================================ */

/* ============================================================
   Hidden helper
   ============================================================ */
[hidden] { display: none !important; }

/* ============================================================
   Product cards animation
   ============================================================ */
.pp-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
[data-mtka-grid] { animation: mtka-fade-in 0.3s ease-out; }
@keyframes mtka-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   PP placeholder size
   ============================================================ */
.pp-card__image-inner svg.pp-placeholder,
.pd-image__inner svg.pp-placeholder {
	width: 70%;
	height: auto;
	max-width: 200px;
	opacity: 0.85;
}

/* ============================================================
   PRODUCT CARDS — image sizing + stock badge bulletproofing.
   WordPress adds width/height attrs to <img> that breaks the
   layout. Some host caching plugins also strip parts of our
   product CSS. Force these with !important so the design holds.
   ============================================================ */
.pp-card__image-inner img,
.pp-card__image-inner svg {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	display: block !important;
}
.pp-card__image-inner svg.pp-placeholder {
	max-width: 200px !important;
	width: 70% !important;
	height: auto !important;
}
.pd-image__inner img,
.pd-image__inner svg {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	display: block !important;
}

/* Ensure the card clips overflow and the image keeps its aspect. */
.mtka-pp .pp-card,
.pp-products-grid .pp-card {
	overflow: hidden !important;
	border: 1px solid var(--rule) !important;
	border-radius: var(--radius-lg) !important;
	background: var(--paper) !important;
}
.mtka-pp .pp-card__image,
.pp-products-grid .pp-card__image {
	position: relative !important;
	aspect-ratio: 1 / 1 !important;
	padding: 24px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: hidden !important;
}

/* Lock down the stock badge so it stays inside the image area. */
.pp-card .pp-stock {
	position: absolute !important;
	top: 12px !important;
	right: 12px !important;
	left: auto !important;
	z-index: 3 !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 6px 12px 6px 10px !important;
	font-family: var(--mono) !important;
	font-size: 11px !important;
	line-height: 1 !important;
	letter-spacing: 0.10em !important;
	text-transform: uppercase !important;
	border: 1px solid var(--rule);
	border-radius: 100px !important;
	white-space: nowrap !important;
	pointer-events: none;
}
.pp-card .pp-stock__dot {
	width: 6px !important;
	height: 6px !important;
	border-radius: 50% !important;
	display: inline-block !important;
	flex-shrink: 0 !important;
}
.pp-card .pp-stock--in {
	background: rgba(34, 139, 92, 0.12) !important;
	color: #1f7a52 !important;
	border-color: rgba(34, 139, 92, 0.25) !important;
}
.pp-card .pp-stock--in .pp-stock__dot {
	background: #22c47a !important;
}
.pp-card .pp-stock--out {
	background: rgba(150, 150, 150, 0.15) !important;
	color: var(--ink-3) !important;
}
.pp-card .pp-stock--out .pp-stock__dot {
	background: #b54b4b !important;
}

/* RTL: flip the badge to the top-left so it stays readable. */
[dir="rtl"] .pp-card .pp-stock {
	right: auto !important;
	left: 12px !important;
}

/* Mobile / narrow cards: shrink badge typography so "IN STOCK" /
   "OUT OF STOCK" / "نفدت الكمية" never get clipped. */
@media (max-width: 640px) {
	.pp-card .pp-stock {
		font-size: 9px !important;
		letter-spacing: 0.04em !important;
		padding: 5px 9px 5px 8px !important;
		gap: 6px !important;
		top: 10px !important;
		right: 10px !important;
	}
	[dir="rtl"] .pp-card .pp-stock {
		left: 10px !important;
	}
	.pp-card .pp-stock__dot {
		width: 5px !important;
		height: 5px !important;
	}
}

/* ============================================================
   MOBILE SHEET — allow social icons to wrap when many are added
   ============================================================ */
.mobile-sheet__quick {
	flex-wrap: wrap;
	gap: 8px !important;
}
.mobile-sheet__contact-text a {
	display: inline-block;
	margin-top: 4px;
}

/* ============================================================
   ARABIC HEADINGS — line-height 1.1 for better readability
   Arabic glyphs need more vertical breathing room than Latin.
   ============================================================ */
[dir="rtl"] .display-xl,
[dir="rtl"] .display-lg,
[dir="rtl"] .display-md,
[dir="rtl"] .display-sm,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4 {
	line-height: 1.1 !important;
}

/* ============================================================
   GLOBAL BUTTON SHAPE — rounded-square like the hero buttons.
   Overrides the default pill (100px) radius on all CTAs.
   ============================================================ */
.cta-btn,
.cta-btn--outline,
.cta-btn--full,
.pp-btn,
.pp-btn--dark,
.pp-btn--ghost,
.submit-btn,
.mobile-sheet__cta-wa,
.mobile-sheet__cta a {
	border-radius: 8px !important;
}

/* Brand-grid "View products" button + product card buttons */
.pp-brand-card__actions .pp-btn,
.pp-card__actions a,
.pp-card__actions button {
	border-radius: 8px !important;
}

/* Filter chips and similar small pills can stay pill-shaped */
.pp-filter-chip,
.pp-search,
.lang-toggle a,
.eyebrow,
.pp-card__sku,
.pp-card__cat,
.pp-stock,
.footer-offices__map-btn,
.mobile-sheet__icon-btn {
	/* keep their existing pill / circle shapes */
}

/* ============================================================
   MOBILE MENU + STICKY HEADER — coordinate them
   The sheet's z-index must be HIGHER than the sticky topbar so
   the dark panel covers it visually. We keep the topbar visible
   so the close button (inside the topbar) stays accessible.
   ============================================================ */
body.mtka-menu-open {
	overflow: hidden;
}

/* Mobile sheet sits above the sticky topbar */
.mobile-sheet {
	z-index: 1000 !important;
}
/* Hamburger button stays clickable above the sheet so users can close */
.mobile-menu-btn {
	position: relative;
	z-index: 1001;
}
.topbar {
	z-index: 100 !important;
}
body.mtka-menu-open .topbar {
	/* Keep topbar visible but transparent so the sheet shines through.
	   The hamburger / close icon stays on top via its own z-index. */
	background: transparent !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	border-bottom-color: transparent !important;
}
body.mtka-menu-open .topbar > .container > *:not(.mobile-menu-btn) {
	visibility: hidden;
}

/* Brand header WhatsApp link - underlined inline link */
.pp-brand-header__wa {
	color: var(--ink) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.15s ease;
}
.pp-brand-header__wa:hover {
	color: var(--accent, #1779e1) !important;
}

/* Hide quick-spec tags on product cards in the grid */
.pp-card__tags { display: none !important; }

/* ============================================================
   SECTION MODIFIERS
   ============================================================ */
.section + .section.section--no-rule { border-top: 0 !important; }
.section.section--tight-top { padding-top: 0 !important; }

/* ============================================================
   SERVICE TILE ICONS — larger, using site colors (var(--ink)).
   SVG uses currentColor so it adapts to context.
   ============================================================ */
.tile__icon {
	width: 72px !important;
	height: 72px !important;
	border: none !important;
	border-radius: var(--radius) !important;
	background: transparent !important;
	padding: 4px !important;
	color: var(--ink) !important;
}
.tile__icon svg {
	width: 64px !important;
	height: 64px !important;
	color: var(--ink);
}

/* ============================================================
   Sticky topbar — forces sticky positioning above all other UI.
   Must NOT have any overflow:hidden ancestor (we use overflow:clip
   on html/body instead, which is sticky-safe).
   ============================================================ */
.topbar {
	position: sticky !important;
	top: 0 !important;
	z-index: 100 !important;
}

/* WordPress admin bar offset on sticky header */
body.admin-bar .topbar {
	top: 32px !important;
}
@media (max-width: 782px) {
	body.admin-bar .topbar {
		top: 46px !important;
	}
}

/* ============================================================
   RTL
   ============================================================ */
[dir="rtl"] body { direction: rtl; text-align: right; }