/* =========================================================
   Obsidian Roofing – Global Design System
   Design tokens, font and button system (scoped to .obs-* classes)
   ========================================================= */
:root {
	--obs-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

	--obs-green: #2ee860;
	--obs-green-dark: #1fc94c;
	--obs-green-soft: rgba(46, 232, 96, .12);
	--obs-dark: #0a0e0c;
	--obs-dark-2: #101614;
	--obs-dark-3: #161e1b;
	--obs-white: #ffffff;
	--obs-muted: #a9b3ae;
	--obs-border: rgba(255, 255, 255, .09);

	--obs-radius: 8px;
	--obs-radius-lg: 14px;
	--obs-container: 1320px;
	--obs-ease: cubic-bezier(.22, .61, .36, 1);
	--obs-speed: .35s;
}

/* ---------- Font: applied only to our own components (Roofix stays untouched) ---------- */
.obs-scope, .obs-scope *:not(i):not([class*="fa-"]):not([class^="flaticon"]):not([class*=" flaticon"]) {
	font-family: var(--obs-font);
}
/* Same font across the whole site: set OBS_FONT_ALL to true in functions.php (adds body.obs-font-all) */
body.obs-font-all, body.obs-font-all :is(h1,h2,h3,h4,h5,h6,p,a,li,span,button,input,select,textarea,label,.elementor-heading-title,.elementor-button) {
	font-family: var(--obs-font) !important;
}

body *:not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands):not([class^="eicon"]):not([class*=" eicon"]):not([class^="flaticon"]):not([class*=" flaticon"]):not(.dashicons):not([class*="dashicons-"]) {
	font-family: var(--obs-font) !important;
}



/* Small, consistent icon size */
.obs-ico { font-size: 14px; line-height: 1; }

/* =========================================================
   Buttons
   ========================================================= */
.obs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	border: 1px solid transparent;
	border-radius: var(--obs-radius);
	font-family: var(--obs-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition:
		background-color var(--obs-speed) var(--obs-ease),
		color var(--obs-speed) var(--obs-ease),
		border-color var(--obs-speed) var(--obs-ease),
		box-shadow var(--obs-speed) var(--obs-ease),
		transform var(--obs-speed) var(--obs-ease);
}

/* Default = primary green */
.obs-btn,
.obs-btn--primary {
	background-color: var(--obs-green);
	color: #06100a;
}

/* Soft shine sweep on hover */
.obs-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.35) 50%, transparent 80%);
	transform: translateX(-120%);
	transition: transform .7s var(--obs-ease);
}

.obs-btn:hover {
	background-color: var(--obs-green-dark);
	color: #06100a;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -8px rgba(46, 232, 96, .55);
}
.obs-btn:hover::before { transform: translateX(120%); }

.obs-btn:active { transform: translateY(0); box-shadow: none; }

.obs-btn:focus-visible {
	outline: 2px solid var(--obs-green);
	outline-offset: 3px;
}

/* Arrow nudges on hover */
.obs-btn i { transition: transform var(--obs-speed) var(--obs-ease); }
.obs-btn:hover i.fa-arrow-right { transform: translateX(4px); }

/* Elementor Button widget opt-in: add "obs-btn-style" under Advanced → CSS Classes */
.obs-btn-style .elementor-button { background-color: var(--obs-green); color: #06100a; border-radius: var(--obs-radius); font-weight: 600; transition: all var(--obs-speed) var(--obs-ease); }
.obs-btn-style .elementor-button:hover { background-color: var(--obs-green-dark); color: #06100a; transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(46,232,96,.55); }
.obs-btn-style .elementor-button:focus-visible { outline: 2px solid var(--obs-green); outline-offset: 3px; }
.obs-btn-style .elementor-button-icon { transition: transform var(--obs-speed) var(--obs-ease); }
.obs-btn-style .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }

/* Dark variant */
.obs-btn--dark { background-color: #0b0f0d; color: #fff; }
.obs-btn--dark:hover { background-color: #000; color: #fff; box-shadow: 0 10px 24px -8px rgba(0,0,0,.6); }

/* Outline variant */
.obs-btn--outline { background-color: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.obs-btn--outline:hover { background-color: rgba(255,255,255,.06); border-color: var(--obs-green); color: #fff; box-shadow: none; }

/* Sizes */
.obs-btn--sm { padding: 11px 18px; font-size: 14px; }
.obs-btn--block { width: 100%; }

/* Text link with underline animation */
.obs-link {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--obs-green); font-weight: 600; text-decoration: none;
	padding-bottom: 6px; position: relative;
}
.obs-link::after {
	content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
	background: currentColor; transform-origin: left; transition: transform var(--obs-speed) var(--obs-ease);
}
.obs-link:hover { color: var(--obs-green); }
.obs-link:hover::after { transform: scaleX(.6); }
.obs-link i { transition: transform var(--obs-speed) var(--obs-ease); }
.obs-link:hover i.fa-arrow-right { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
	.obs-scope *, .obs-scope *::before, .obs-scope *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}