/**
 * Umrah Hosting brand tokens
 * Forest green #1B5E3B / deep green #0F3D28 · Gold #C4A35A / #D4AF37
 */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Source+Sans+3:wght@400;600;700&display=swap");

:root {
	--uh-green: #1B5E3B;
	--uh-green-dark: #0F3D28;
	--uh-green-mid: #247A4D;
	--uh-green-soft: #E8F5EE;
	--uh-gold: #C4A35A;
	--uh-gold-bright: #D4AF37;
	--uh-gold-soft: #F7F1E4;
	--uh-ink: #1A1A1A;
	--uh-muted: #5C6B63;
	--uh-white: #FFFFFF;
	--uh-border: #D9E5DE;
	--uh-radius: 10px;
	--uh-font-display: "Playfair Display", "Georgia", "Times New Roman", serif;
	--uh-font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

	/* Aliases used by dashboard / portals */
	--utl-brand: var(--uh-green-dark);
	--utl-brand-light: var(--uh-green-mid);
	--utl-accent: var(--uh-gold);
	--utl-bg: #F6F9F7;
	--utl-card: var(--uh-white);
	--utl-border: var(--uh-border);
	--utl-text: var(--uh-ink);
	--utl-muted: var(--uh-muted);
	--utl-warn: #9A6B1F;
	--utl-success: var(--uh-green);
	--uh-logo-h: 34px;
}

/* Themes often force `img { width: 100% }` inside page content, which blows the
   brand mark up to full width. Pin the logo size wherever it renders. */
.utl-brand-bar img,
.utl-admin-brand img,
.utl-md-header img,
.utl-fa-header img,
.utl-tf-hero img,
.utl-pl-hero img,
.utl-ops-header img {
	height: var(--uh-logo-h) !important;
	width: auto !important;
	max-width: 140px !important;
	min-width: 0 !important;
	object-fit: contain;
	flex: 0 0 auto;
}

@media (max-width: 600px) {
	:root { --uh-logo-h: 28px; }
}

/* Theme / Elementor site header logo — keep it compact next to nav */
.elementor-location-header .elementor-widget-theme-site-logo img,
.elementor-location-header .elementor-widget-image img,
.elementor-location-header a[href] > img,
header .custom-logo,
.site-header .custom-logo,
.site-branding img {
	max-height: 40px !important;
	height: auto !important;
	width: auto !important;
	max-width: 160px !important;
	object-fit: contain !important;
}