/**
 * Design Tokens - Global CSS Custom Properties
 * Derived from DESIGN.md for Omran Behdasht Heritage
 *
 * Single source of truth for colors, spacing, radii, and other design tokens.
 * Use these CSS variables everywhere - do not duplicate values.
 */

:root {
	/* Colors - Palette from DESIGN.md */
	--color-surface: #f8f8f6;
	--color-surface-dim: #dddcd6;
	--color-surface-bright: #f8f8f6;
	--color-surface-container-lowest: #ffffff;
	--color-surface-container-low: #f1f1ee;
	--color-surface-container: #ebebe7;
	--color-surface-container-high: #e5e5e1;
	--color-surface-container-highest: #dfdfdb;
	--color-on-surface: #1c1c1a;
	--color-on-surface-variant: #46493f;
	--color-inverse-surface: #313130;
	--color-inverse-on-surface: #f1f1ee;
	--color-outline: #76796c;
	--color-outline-variant: #c6c8bc;
	--color-surface-tint: #366b00;
	--color-primary: #366b00;
	--color-on-primary: #ffffff;
	--color-primary-container: #6bb728;
	--color-on-primary-container: #1f4200;
	--color-inverse-primary: #8cdb4a;
	--color-secondary: #466821;
	--color-on-secondary: #ffffff;
	--color-secondary-container: #d8e4c2;
	--color-on-secondary-container: #4a6c25;
	--color-tertiary: #3a3a38;
	--color-on-tertiary: #ffffff;
	--color-tertiary-container: #c7c6c0;
	--color-on-tertiary-container: #2e2e2c;
	--color-error: #ba1a1a;
	--color-on-error: #ffffff;
	--color-error-container: #ffdad6;
	--color-on-error-container: #93000a;
	--color-primary-fixed: #a7f863;
	--color-primary-fixed-dim: #8cdb4a;
	--color-on-primary-fixed: #0c2000;
	--color-on-primary-fixed-variant: #275000;
	--color-secondary-fixed: #d8e4c2;
	--color-secondary-fixed-dim: #abd37f;
	--color-on-secondary-fixed: #0f2000;
	--color-on-secondary-fixed-variant: #2f4f09;
	--color-tertiary-fixed: #e4e3de;
	--color-tertiary-fixed-dim: #aaa9a3;
	--color-on-tertiary-fixed: #1c1c1a;
	--color-on-tertiary-fixed-variant: #46443e;
	--color-background: #f8f8f6;
	--color-on-background: #1c1c1a;
	--color-surface-variant: #dfdfdb;

	/* Spacing - 8px baseline */
	--space-base: 8px;
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;
	--space-3xl: 64px;
	--space-4xl: 96px;

	/* Container */
	--container-max: 1280px;
	--margin-desktop: 64px;
	--margin-mobile: 20px;
	--gutter: 24px;

	/* Brand / logo (header chrome) */
	--logo-height-header: 80px;
	--logo-width-header: 80px;
	--logo-height-drawer: 56px;
	--logo-max-width: 180px;
	--logo-max-height: 80px;

	/* Radii */
	--radius-sm: 0.125rem;
	--radius-md: 0.25rem;
	--radius-lg: 0.375rem;
	--radius-xl: 0.5rem;
	--radius-2xl: 0.75rem;
	--radius-full: 9999px;

	/* Typography scale */
	--font-display: 'Abar High', sans-serif;
	--font-body: 'Abar Mid', sans-serif;
	--font-label: 'Abar Low', sans-serif;

	/* Elevations (tonal, no heavy shadows) */
	--elevation-card: 0 2px 8px rgba(70, 104, 33, 0.08);
	--elevation-hover: 0 4px 16px rgba(70, 104, 33, 0.12);
	--elevation-modal: 0 8px 32px rgba(54, 107, 0, 0.16);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-normal: 250ms ease;
	--transition-slow: 350ms ease;

	/* Shared property list for hover/focus transitions */
	--transition-hover-props:
		color var(--transition-fast),
		background-color var(--transition-fast),
		border-color var(--transition-fast),
		box-shadow var(--transition-normal),
		outline-color var(--transition-fast),
		outline-offset var(--transition-fast),
		opacity var(--transition-fast),
		transform var(--transition-normal),
		filter var(--transition-normal),
		text-decoration-color var(--transition-fast),
		gap var(--transition-normal);

	/* Z-index scale */
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-fixed: 300;
	--z-modal-backdrop: 400;
	--z-modal: 500;
	--z-popover: 600;
	--z-tooltip: 700;
}

/* ── Spacing utilities (single source) ── */

/* Padding */
.p-base { padding: var(--space-base); }
.p-2 { padding: var(--space-xs); }
.p-3 { padding: 12px; }
.p-4 { padding: var(--space-md); }
.p-6 { padding: var(--space-lg); }
.p-8 { padding: var(--space-xl); }
.p-12 { padding: var(--space-2xl); }
.p-gutter { padding: var(--gutter); }
.p-stack-md { padding: var(--space-lg); }
.p-stack-lg { padding: var(--space-2xl); }

/* Padding axis */
.px-2 { padding-inline: var(--space-xs); }
.px-3 { padding-inline: 12px; }
.px-4 { padding-inline: var(--space-md); }
.px-6 { padding-inline: var(--space-lg); }
.px-8 { padding-inline: var(--space-xl); }
.px-10 { padding-inline: var(--space-2xl); }
.px-12 { padding-inline: var(--space-2xl); }
.py-1 { padding-block: var(--space-xs); }
.py-2 { padding-block: var(--space-sm); }
.py-3 { padding-block: 12px; }
.py-4 { padding-block: var(--space-md); }
.py-16 { padding-block: var(--space-3xl); }

/* Padding side */
.pb-1 { padding-bottom: var(--space-xs); }
.pb-4 { padding-bottom: var(--space-md); }
.pb-base { padding-bottom: var(--space-base); }
.pb-stack-md { padding-bottom: var(--space-lg); }
.pt-4 { padding-top: var(--space-md); }
.pt-8 { padding-top: var(--space-xl); }
.pt-20 { padding-top: var(--space-3xl); }
.pt-28 { padding-top: 7rem; }
.pt-base { padding-top: var(--space-base); }
.pt-stack-sm { padding-top: 12px; }
.pt-stack-md { padding-top: var(--space-lg); }
.pt-stack-lg { padding-top: var(--space-2xl); }
.pl-4 { padding-inline-start: var(--space-md); }
.pr-4 { padding-inline-end: var(--space-md); }
.pr-12 { padding-inline-end: var(--space-2xl); }

/* Margin */
.mt-2 { margin-top: var(--space-xs); }
.mt-4 { margin-top: var(--space-md); }
.mt-6 { margin-top: var(--space-lg); }
.mt-12 { margin-top: var(--space-2xl); }
.mb-1 { margin-bottom: var(--space-xs); }
.mb-2 { margin-bottom: var(--space-xs); }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: var(--space-md); }
.mb-6 { margin-bottom: var(--space-lg); }
.mb-8 { margin-bottom: var(--space-xl); }
.mb-12 { margin-bottom: var(--space-2xl); }
.mb-16 { margin-bottom: var(--space-3xl); }
.mb-20 { margin-bottom: var(--space-3xl); }
.mb-base { margin-bottom: var(--space-base); }
.mb-gutter { margin-bottom: var(--gutter); }

/* Stack margin */
.mt-stack-md { margin-top: var(--space-lg); }
.mt-stack-lg { margin-top: var(--space-2xl); }
.mt-stack-xl { margin-top: var(--space-4xl); }
.mb-stack-sm { margin-bottom: 12px; }
.mb-stack-md { margin-bottom: var(--space-lg); }
.mb-stack-lg { margin-bottom: var(--space-2xl); }
.mb-stack-xl { margin-bottom: var(--space-4xl); }

/* Gap */
.gap-base { gap: var(--space-base); }
.gap-2 { gap: var(--space-xs); }
.gap-3 { gap: 12px; }
.gap-4 { gap: var(--space-md); }
.gap-6 { gap: var(--space-lg); }
.gap-8 { gap: var(--space-xl); }
.gap-12 { gap: var(--space-2xl); }
.gap-16 { gap: var(--space-3xl); }
.gap-gutter { gap: var(--gutter); }
.gap-stack-sm { gap: 12px; }
.gap-stack-md { gap: var(--space-lg); }
.gap-stack-lg { gap: var(--space-2xl); }

/* Stack padding */
section.py-stack-lg,
.py-stack-lg {
	padding-block: var(--space-2xl);
}

section.py-stack-md,
.py-stack-md {
	padding-block: var(--space-lg);
}

/* Child spacing */
.space-y-base > * + * { margin-top: var(--space-base); }
.space-y-2 > * + * { margin-top: var(--space-xs); }
.space-y-3 > * + * { margin-top: 12px; }
.space-y-4 > * + * { margin-top: var(--space-md); }
.space-y-6 > * + * { margin-top: var(--space-lg); }
.space-y-8 > * + * { margin-top: var(--space-xl); }
.space-y-gutter > * + * { margin-top: var(--gutter); }
.space-y-stack-sm > * + * { margin-top: 12px; }
.space-y-stack-md > * + * { margin-top: var(--space-lg); }

/* Responsive page margins */
.px-margin-desktop {
	padding-inline: var(--margin-desktop);
}

.px-margin-mobile {
	padding-inline: var(--margin-mobile);
}

@media (max-width: 767px) {
	.px-margin-desktop {
		padding-inline: var(--margin-mobile);
	}
}

@media (min-width: 768px) {
	.md\:px-margin-desktop {
		padding-inline: var(--margin-desktop);
	}

	.md\:p-10 {
		padding: var(--space-2xl);
	}

	.md\:p-12 {
		padding: var(--space-2xl);
	}

	.md\:pb-0 {
		padding-bottom: 0;
	}
}

/* Fixed-size brand logos (header / drawer) */
.obc-topappbar__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: var(--logo-width-header);
	min-height: var(--logo-height-header);
}

.obc-topappbar__logo--drawer {
	min-height: var(--logo-height-drawer);
}

.obc-topappbar__logo img {
	display: block;
	max-width: var(--logo-max-width);
	max-height: var(--logo-max-height);
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
}

/**
 * Element normalization — strip native UA chrome (borders, background,
 * bevels) from button-like elements so only our component styles apply.
 * Zero specificity via :where(), so any component border/background wins.
 * Radios/checkboxes/ranges keep their native appearance intentionally.
 */
:where(
	button,
	input[type="submit"],
	input[type="button"],
	input[type="reset"],
	[role="button"]
) {
	appearance: none;
	-webkit-appearance: none;
	background-color: transparent;
	border: none;
	margin: 0;
	font: inherit;
	color: inherit;
}

/**
 * Site-wide hover transitions on interactive elements.
 */
:where(
	a,
	button,
	input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
	textarea,
	select,
	summary,
	[role="button"],
	label[for]
) {
	transition: var(--transition-hover-props);
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
}

:where(
	a,
	button,
	summary,
	[role="button"],
	label[for]
):focus:not(:focus-visible) {
	outline: none;
}

:where(
	a,
	button,
	summary,
	[role="button"],
	label[for]
):active {
	-webkit-tap-highlight-color: transparent;
	tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	:where(
		a,
		button,
		input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
		textarea,
		select,
		summary,
		[role="button"],
		label[for]
	) {
		transition: none;
	}
}

/*
 * Dark mode overrides — not activated yet.
 * Enabling prefers-color-scheme here flips semantic tokens (e.g. on-background)
 * and breaks stitch layouts that use bg-on-background for the dark app bar.
 */

/* Stitch / Elementor canvas pages stay light (matches stitch HTML class="light"). */
.elementor-template-canvas {
	color-scheme: light;
	--color-background: #f8f8f6;
	--color-on-background: #1c1c1a;
	--color-surface: #f8f8f6;
	--color-on-surface: #1c1c1a;
	--color-on-surface-variant: #46493f;
	--color-surface-container-lowest: #ffffff;
	--color-surface-container-low: #f1f1ee;
	--color-surface-container: #ebebe7;
	--color-surface-container-high: #e5e5e1;
	--color-surface-container-highest: #dfdfdb;
	--color-surface-variant: #dfdfdb;
	--color-outline: #76796c;
	--color-outline-variant: #c6c8bc;
	--color-primary: #366b00;
	--color-on-primary: #ffffff;
}
 
@media (prefers-color-scheme: dark) {
	.elementor-template-canvas {
		color-scheme: light;
		--color-background: #f8f8f6;
		--color-on-background: #1c1c1a;
		--color-surface: #f8f8f6;
		--color-on-surface: #1c1c1a;
		--color-on-surface-variant: #46493f;
		--color-surface-container-lowest: #ffffff;
		--color-surface-container-low: #f1f1ee;
		--color-surface-container: #ebebe7;
		--color-surface-container-high: #e5e5e1;
		--color-surface-container-highest: #dfdfdb;
		--color-surface-variant: #dfdfdb;
		--color-outline: #76796c;
		--color-outline-variant: #c6c8bc;
	}
}

/* ============================================================
   Canonical Rank Math breadcrumb styling (site-wide)
   Targets the raw `.rank-math-breadcrumb` element that Rank Math
   emits — identical markup whether it is rendered by the theme
   (rank_math_the_breadcrumbs()) or by a manual
   `[rank_math_breadcrumb]` shortcode (e.g. inside Elementor).
   Styling the element directly (not its .obc-* wrapper) keeps the
   Elementor projects page and the PHP archive pages pixel-identical
   in font, size, color and separators. Loaded globally.
   ============================================================ */
.rank-math-breadcrumb {
	font-family: var(--font-label); /* Abar Low */
	font-size: 0.875rem;            /* matches .text-label-md */
	line-height: 1.43;
	font-weight: 500;
	color: var(--color-on-surface-variant);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
}

.rank-math-breadcrumb p {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
}

.rank-math-breadcrumb a {
	color: var(--color-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.rank-math-breadcrumb a:hover,
.rank-math-breadcrumb a:focus {
	color: var(--color-primary-container);
}

/* Current (last) item — truncate long titles instead of wrapping */
.rank-math-breadcrumb .last,
.rank-math-breadcrumb span:last-child {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Breadcrumb styling - consistent across all page types */
.obc-elementor-breadcrumbs-wrapper {
	background: var(--color-background);
}

/* Ensure all breadcrumbs have consistent spacing */
.obc-page-breadcrumb,
.obc-archive-breadcrumb,
.obc-tenders-breadcrumb,
.obc-blog-home-breadcrumb,
.obc-news-breadcrumb,
.obc-search-breadcrumb,
.obc-services-archive-breadcrumb {
	margin-bottom: var(--space-md);
}