/*
Theme Name: GlobalBQ
Theme URI: https://globalbq.com/
Author: GlobalBQ
Author URI: https://globalbq.com/
Description: Official block theme for GlobalBQ — a lightweight, RTL-ready, English-first theme in navy and electric blue. Built for the approved GlobalBQ visual identity. Translation is handled by the GTranslate plugin (not bundled).
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: globalbq
Tags: block-theme, full-site-editing, custom-colors, custom-logo, rtl-language-support, translation-ready, wide-blocks
*/

/*
 * GlobalBQ identity variables — change these to evolve the brand
 * without rebuilding the site.
 */
:root {
	--gbq-navy: #0a2a5a;
	--gbq-blue: #1e90ff;
	--gbq-bg-light: #f8f9fa;
	--gbq-white: #ffffff;
	--gbq-gray: #6b7280;
	--gbq-radius: 12px;
	--gbq-font-latin: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--gbq-font-heading: "Poppins", "Inter", system-ui, sans-serif;
	--gbq-font-arabic: "IBM Plex Sans Arabic", "Tajawal", "Inter", sans-serif;
}

/* Base typography */
body {
	font-family: var(--gbq-font-latin);
	color: var(--gbq-navy);
	background: var(--gbq-white);
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--gbq-font-heading);
	line-height: 1.25;
	color: var(--gbq-navy);
}

/* Arabic / RTL: swap to the Arabic-capable stack automatically */
html[lang^="ar"] body,
html[lang^="ar"] h1, html[lang^="ar"] h2, html[lang^="ar"] h3,
html[lang^="ar"] h4, html[lang^="ar"] h5, html[lang^="ar"] h6 {
	font-family: var(--gbq-font-arabic);
}

/* Buttons — logical properties keep RTL layouts intact */
.wp-block-button__link,
.wp-element-button {
	border-radius: var(--gbq-radius);
	padding-inline: 1.75rem;
	padding-block: 0.85rem;
	font-weight: 600;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-1px);
}

/* Links */
a {
	color: var(--gbq-blue);
}

a:hover {
	color: var(--gbq-navy);
}

/* Language selector (GTranslate placeholder / widget) */
.gbq-lang-selector {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid rgba(10, 42, 90, 0.2);
	border-radius: 999px;
	padding-inline: 0.9rem;
	padding-block: 0.45rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--gbq-navy);
	background: var(--gbq-white);
	cursor: pointer;
	white-space: nowrap;
}

.gbq-lang-selector:hover {
	border-color: var(--gbq-blue);
	color: var(--gbq-blue);
}

.gbq-lang-selector svg {
	flex-shrink: 0;
}

/* On dark backgrounds */
.gbq-lang-selector.is-dark {
	border-color: rgba(255, 255, 255, 0.35);
	color: var(--gbq-white);
	background: transparent;
}

.gbq-lang-selector.is-dark:hover {
	border-color: var(--gbq-blue);
	color: var(--gbq-blue);
}

/* Service cards */
.gbq-service-card {
	border-radius: var(--gbq-radius);
	border: 1px solid rgba(10, 42, 90, 0.1);
	background: var(--gbq-white);
	padding: 2rem;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.gbq-service-card:hover {
	box-shadow: 0 12px 32px rgba(10, 42, 90, 0.12);
	transform: translateY(-4px);
}

/* Portfolio placeholders are intentionally neutral */
.gbq-portfolio-placeholder {
	border: 2px dashed rgba(10, 42, 90, 0.25);
	border-radius: var(--gbq-radius);
	background: var(--gbq-bg-light);
	aspect-ratio: 16 / 10;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--gbq-gray);
}

/* Focus visibility for accessibility */
a:focus-visible,
button:focus-visible,
.gbq-lang-selector:focus-visible {
	outline: 2px solid var(--gbq-blue);
	outline-offset: 2px;
}

/* ===== Header CTA button ("Get a Free Quote") — desktop only ===== */
.gbq-header-cta .wp-block-button__link {
	padding-block: 0.65rem;
	padding-inline: 1.35rem;
	font-size: 0.92rem;
	white-space: nowrap;
}

@media (max-width: 781px) {
	.gbq-header-cta {
		display: none;
	}
}

/* ===== Service card icons ===== */
.gbq-service-icon {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgba(30, 144, 255, 0.12);
	color: var(--gbq-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-block-end: 1.25rem;
}

.gbq-service-icon svg {
	width: 28px;
	height: 28px;
	display: block;
}

/* ===== Footer: tidy stacked layout on mobile ===== */
@media (max-width: 781px) {
	.gbq-footer .wp-block-column {
		text-align: center;
	}

	.gbq-footer .wp-block-navigation {
		justify-content: center;
	}
}

/* ===== Off-canvas side drawer (mobile navigation) — v1.2 ===== */
/* A dimmed backdrop covers the viewport while a navy panel slides in
   from the inline-end side (right in LTR, mirrored in RTL). Works with
   both WordPress markup variants (with or without the
   .wp-block-navigation__responsive-dialog wrapper). */
@media (max-width: 781px) {
	/* Backdrop */
	.wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		inset: 0;
		z-index: 100000;
		display: flex;
		justify-content: flex-end;
		margin: 0;
		padding: 0;
		background: rgba(4, 16, 36, 0.55);
		animation: gbq-backdrop-in 0.25s ease-out;
	}

	[dir="rtl"] .wp-block-navigation__responsive-container.is-menu-open {
		justify-content: flex-start;
	}

	/* Sliding panel (standard markup with the dialog wrapper) */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		background: var(--gbq-navy);
		color: #fff;
		inline-size: min(380px, 85vw);
		block-size: 100%;
		margin: 0;
		padding-block: 1rem 2rem;
		padding-inline: 1.25rem;
		overflow-y: auto;
		box-shadow: 0 0 48px rgba(0, 0, 0, 0.35);
		animation: gbq-drawer-in 0.28s ease-out;
	}

	[dir="rtl"] .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		animation-name: gbq-drawer-in-rtl;
	}

	/* Fallback panel (markup without the dialog wrapper) */
	.wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content {
		background: var(--gbq-navy);
		color: #fff;
		inline-size: min(380px, 85vw);
		block-size: 100%;
		margin-inline-start: auto;
		padding-block: 1rem 2rem;
		padding-inline: 1.25rem;
		overflow-y: auto;
		box-shadow: 0 0 48px rgba(0, 0, 0, 0.35);
		animation: gbq-drawer-in 0.28s ease-out;
	}

	[dir="rtl"] .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-container-content {
		margin-inline-start: 0;
		margin-inline-end: auto;
		animation-name: gbq-drawer-in-rtl;
	}

	/* Menu links: clear white rows */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-block-start: 2.75rem;
		align-items: stretch;
		gap: 0.15rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
		color: #fff;
		display: block;
		padding-block: 0.65rem;
		font-size: 1.05rem;
		border-block-end: 1px solid rgba(255, 255, 255, 0.09);
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item a {
		font-size: 0.95rem;
		padding-inline-start: 1rem;
	}

	/* Close button: clear white X in the panel's top corner */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		position: absolute;
		inset-block-start: 0.9rem;
		inset-inline-end: 1rem;
		z-index: 1;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close button {
		color: #fff;
	}
}

@keyframes gbq-backdrop-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes gbq-drawer-in {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}

@keyframes gbq-drawer-in-rtl {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
}

/* ===== Mobile reading comfort + drawer organization — v1.2.1 ===== */
@media (max-width: 781px) {
	/* Slightly smaller hero headline for comfortable reading */
	.has-hero-font-size {
		font-size: 2.35rem !important;
		line-height: 1.15;
	}

	/* Section titles: a touch smaller on phones */
	h2.wp-block-heading {
		font-size: 1.6rem;
		line-height: 1.25;
	}

	h3.wp-block-heading {
		font-size: 1.2rem;
		line-height: 1.3;
	}

	/* Hero cover: a little shorter on small screens */
	.wp-block-cover.alignfull {
		min-height: 480px !important;
	}

	/* Drawer: tidy start alignment and breathing room */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		text-align: start;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		margin-block: 0.1rem;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
		padding-block: 0.7rem;
		padding-inline: 0.25rem;
		line-height: 1.4;
	}

	/* Services children: clearly nested under their parent */
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
		padding-block: 0.15rem;
		gap: 0;
	}

	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item a {
		font-size: 0.92rem;
		padding-block: 0.5rem;
		padding-inline-start: 1.1rem;
		color: rgba(255, 255, 255, 0.92);
		border-block-end: 0;
	}
}