/* ==========================================================================
   Barewolf — brand tokens & utility classes
   Colors sourced from the official "Barewolf Colour System" brand board.

   NOTE on Elementor 4.x containers: the "_css_classes" advanced-tab control
   only lands on the OUTER wrapper of an element. For WIDGETS that wrapper is
   `.elementor-element.elementor-widget-<type>` (a real ancestor of the
   widget's inner markup), so descendant selectors like `.my-class .inner`
   work. Container/section-level `_css_classes` does not currently render in
   this Elementor build, so section theming here is done via background_color
   (set directly on section settings, which *does* render) plus explicit
   widget-level utility classes (.bw-h-white, .bw-p-light) applied to
   individual heading/text widgets placed inside dark sections.
   ========================================================================== */

:root {
	/* Primary */
	--bw-espresso: #1A1613;
	--bw-chocolate: #26170F;
	--bw-white: #FAF8F5;
	--bw-beige: #F3EEE7;

	/* Secondary */
	--bw-brown: #3F3027;
	--bw-stone: #EAE2D7;
	--bw-sand: #E4D8C8;
	--bw-grey: #737373;

	/* Accent */
	--bw-gold: #AD8330;
	--bw-brass: #B89B5E;
	--bw-champagne: #D2C2A1;
	--bw-navy: #051D40;

	/* Fonts */
	--bw-font-heading: 'Poppins', sans-serif;
	--bw-font-nav: 'Montserrat', sans-serif;
	--bw-font-body: 'Work Sans', sans-serif;
}

body {
	font-family: var(--bw-font-body);
	color: var(--bw-chocolate);
	background-color: var(--bw-white);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--bw-font-heading) !important;
	color: var(--bw-espresso);
}

p, .elementor-widget-text-editor {
	font-family: var(--bw-font-body);
}

/* Eyebrow / overline label used above section headings (inline HTML span) */
.bw-eyebrow {
	font-family: var(--bw-font-nav);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--bw-gold);
	display: inline-block;
	margin-bottom: 12px;
}
.bw-eyebrow.is-light {
	color: var(--bw-champagne);
}

/* Widget-level light-text utilities (apply directly to heading/text widgets
   that sit inside a dark-background section). */
.bw-h-white .elementor-heading-title {
	color: var(--bw-white) !important;
}
.bw-p-light,
.bw-p-light p {
	color: var(--bw-stone) !important;
}

/* Buttons — _css_classes lands on the wrapper, so target the inner anchor
   as a descendant, not a compound selector. */
.bw-btn-primary .elementor-button {
	background-color: var(--bw-gold) !important;
	color: var(--bw-espresso) !important;
	font-family: var(--bw-font-nav);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 16px 30px;
	border: none;
}
.bw-btn-primary .elementor-button:hover {
	background-color: var(--bw-brass) !important;
	color: var(--bw-espresso) !important;
}

.bw-btn-outline-light .elementor-button {
	background-color: transparent !important;
	color: var(--bw-white) !important;
	border: 1px solid rgba(250, 248, 245, 0.5) !important;
	font-family: var(--bw-font-nav);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 15px 30px;
}
.bw-btn-outline-light .elementor-button:hover {
	background-color: rgba(250, 248, 245, 0.1) !important;
	color: var(--bw-white) !important;
}

.bw-btn-outline-dark .elementor-button {
	background-color: transparent !important;
	color: var(--bw-espresso) !important;
	border: 1px solid rgba(26, 22, 19, 0.3) !important;
	font-family: var(--bw-font-nav);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 15px 30px;
}
.bw-btn-outline-dark .elementor-button:hover {
	background-color: var(--bw-espresso) !important;
	color: var(--bw-white) !important;
}

.bw-btn-dark .elementor-button {
	background-color: var(--bw-espresso) !important;
	color: var(--bw-white) !important;
	font-family: var(--bw-font-nav);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 16px 30px;
	border: none;
}
.bw-btn-dark .elementor-button:hover {
	background-color: var(--bw-brown) !important;
	color: var(--bw-white) !important;
}

/* Checklist (Why Choose Us) */
.bw-checklist .elementor-icon-list-item {
	border-bottom: 1px solid rgba(26, 22, 19, 0.12);
	padding: 14px 0;
}
.bw-checklist .elementor-icon-list-item:last-child {
	border-bottom: none;
}
.bw-checklist .elementor-icon-list-icon i,
.bw-checklist .elementor-icon-list-icon svg {
	color: var(--bw-gold);
	fill: var(--bw-gold);
}
.bw-checklist .elementor-icon-list-text {
	font-family: var(--bw-font-nav);
	font-size: 15px;
	color: var(--bw-espresso);
}

/* Header — solid by default (inner pages have no hero image behind it). */
#masthead {
	background-color: var(--bw-espresso);
	position: relative;
	z-index: 10;
}

/* Home page only: transparent header floating over the hero image, per the
   approved reference screenshot. WordPress adds the "home" body class on the
   static front page automatically. */
.home #masthead {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background-color: transparent;
	z-index: 100;
}

.bw-logo-mark .elementor-heading-title {
	font-family: var(--bw-font-heading) !important;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--bw-white) !important;
	font-size: 20px;
	text-transform: uppercase;
}
.bw-logo-mark .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
}

.bw-nav-menu .hfe-nav-menu {
	font-family: var(--bw-font-nav);
}
.bw-nav-menu .hfe-menu-item {
	color: var(--bw-white) !important;
	font-size: 13px !important;
	font-weight: 500;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.bw-nav-menu .hfe-menu-item:hover,
.bw-nav-menu .current-menu-item .hfe-menu-item {
	color: var(--bw-gold) !important;
}

/* Footer */
.bw-site-footer .elementor-heading-title {
	color: var(--bw-champagne) !important;
	font-family: var(--bw-font-nav) !important;
	font-size: 12px !important;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	font-weight: 600;
}
.bw-footer-bottom {
	border-top: 1px solid rgba(250, 248, 245, 0.15);
}

/* Placeholder image blocks — until real Figma exports are supplied */
.bw-placeholder-img img {
	filter: grayscale(8%);
	display: block;
	width: 100%;
	height: auto;
}

/* Section-level backgrounds (background_color renders fine on containers;
   only _css_classes does not, so these are informational / for widgets that
   happen to sit inside such a section and need matching utility classes). */
.bw-section-dark-bg {
	background-color: var(--bw-espresso);
}

/* Testimonial-style quote block */
.bw-quote-icon .elementor-icon,
.bw-quote-icon i {
	font-size: 26px;
	color: var(--bw-gold);
}
.bw-testimonial-name .elementor-heading-title {
	font-family: var(--bw-font-nav) !important;
	font-size: 13px !important;
	letter-spacing: 0.5px;
	font-weight: 500;
	text-transform: uppercase;
}

/* Team member card */
.bw-team-name .elementor-heading-title {
	font-size: 17px !important;
	margin-top: 14px;
}
.bw-team-role .elementor-widget-container p,
.bw-team-role p {
	font-family: var(--bw-font-nav) !important;
	font-size: 12px !important;
	letter-spacing: 0.5px;
	color: var(--bw-gold) !important;
	margin: 2px 0 0;
}

/* Numbered process step */
.bw-process-step .elementor-heading-title {
	font-size: 44px !important;
	font-weight: 300 !important;
	color: var(--bw-gold) !important;
	font-family: var(--bw-font-heading) !important;
}

/* Footer link list (plain HTML, styled directly — no _css_classes needed) */
.bw-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bw-footer-list li {
	margin-bottom: 10px;
}
.bw-footer-list a {
	font-family: var(--bw-font-nav);
	font-size: 14px;
	color: var(--bw-stone);
	text-decoration: none;
}
.bw-footer-list a:hover {
	color: var(--bw-gold);
}

.bw-site-footer .elementor-widget-text-editor p,
.bw-site-footer p {
	font-family: var(--bw-font-body);
	font-size: 14px;
	line-height: 1.7;
	color: var(--bw-stone);
}

/* Footer bottom row */
.bw-footer-bottom-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-family: var(--bw-font-nav);
	font-size: 12px !important;
	letter-spacing: 0.5px;
	color: var(--bw-stone) !important;
}
.bw-footer-bottom-row a {
	color: var(--bw-stone);
}
.bw-footer-bottom-row p {
	margin: 0;
}

/* Social icons */
.bw-social .elementor-social-icon {
	background-color: transparent !important;
	border: 1px solid rgba(250, 248, 245, 0.3);
	color: var(--bw-stone) !important;
}
.bw-social .elementor-social-icon:hover {
	border-color: var(--bw-gold);
	color: var(--bw-gold) !important;
}

/* Hero */
.bw-hero-heading .elementor-heading-title {
	font-size: clamp(34px, 5vw, 56px) !important;
	line-height: 1.1 !important;
	color: var(--bw-white) !important;
}

/* Content max-width wrapper */
.bw-narrow {
	max-width: 620px;
}
.bw-narrow .elementor-widget-container {
	max-width: 620px;
}

/* Centering utility (apply per-widget since section-level classing doesn't render) */
.bw-center,
.bw-center .elementor-widget-container {
	text-align: center;
}
.bw-center .elementor-button-wrapper {
	justify-content: center;
}

/* Gold icon utility */
.bw-icon-gold .elementor-icon i,
.bw-icon-gold svg {
	color: var(--bw-gold) !important;
	fill: var(--bw-gold) !important;
}
.bw-icon-gold .elementor-icon {
	font-size: 34px;
}

/* Trust-strip icon items */
.bw-trust-item {
	text-align: center;
}
.bw-trust-item .elementor-heading-title {
	font-size: 16px !important;
	margin-top: 12px;
}

/* Section vertical rhythm helper (applied via section-level settings/padding
   directly in the build script — kept here for reference only). */