/* Compatible IT Solutions — Base / Global Styles */

/* ── Reset ── */
* { margin: 0; padding: 0; border: none; outline: none; }

.admin-bar .site-header,
.admin-bar header.wp-block-template-part {
	top: 32px;
}

/* The mobile menu is a fixed, full-height overlay above the admin bar's
   z-index, so start it below the admin bar (matching the sticky header). */
.admin-bar .mobile-menu,
.admin-bar .mobile-menu .menu-backdrop {
	top: 32px;
	height: calc(100% - 32px);
}

@media screen and (max-width: 782px) {
	/* At <=782px WordPress makes the admin bar `position: absolute`, so it
	   scrolls away with the page. A sticky header offset by its height would
	   therefore leave that gap at the top once scrolled — so pin it to 0.
	   At rest WP's `html { margin-top: 46px }` already keeps the header below
	   the admin bar, so there is no overlap. */
	.admin-bar .site-header,
	.admin-bar header.wp-block-template-part {
		top: 0;
	}

	.admin-bar .mobile-menu,
	.admin-bar .mobile-menu .menu-backdrop {
		top: 46px;
		height: calc(100% - 46px);
	}
}

/* ── Block gap: sections sit flush, inner blocks keep their spacing ──
   theme.json's spacing.blockGap:false still emits a 24px default gap
   (margin-block-start) on every flow/constrained child. Zero it only where
   whole sections stack — the site root (header ↔ main ↔ footer) and the
   top-level <section> groups inside the post content — so adjacent sections
   with matching backgrounds touch. Nested gaps (heading ↔ paragraph ↔
   buttons inside a section) are left alone: the child combinator (>) never
   reaches them. :root keeps this above WordPress's :where() gap rules. */
:root .wp-site-blocks > *,
:root .wp-block-post-content > section {
	margin-block-start: 0;
}

/* ── Base Elements ── */
body {
	font-family: var(--font-family-Montserrat);
	font-size: 14px;
	color: var(--dark-color);
	line-height: 1.6em;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	position: relative;
	margin: 0;
	background: none;
	font-family: var(--font-family-Montserrat);
}

h1 { font-weight: 700; line-height: 1.11em; font-size: var(--font-90); }
h2 { line-height: 1.3em; font-weight: 700; font-size: var(--font-32); }
h3 { line-height: 1.3em; font-weight: 600; font-size: var(--font-28); }
h4 { line-height: 1.4em; font-size: var(--font-24); }
h5 { line-height: 1.4em; font-size: var(--font-22); }
h6 { line-height: 1.6em; font-size: var(--font-18); }

a {
	text-decoration: none;
	cursor: pointer;
	color: var(--main-color);
	-webkit-transition: all 300ms ease;
	transition: all 300ms ease;
}

a:hover, a:focus, a:visited, button { text-decoration: none; outline: none !important; }

.text, p {
	position: relative;
	font-size: var(--font-16);
	color: var(--color-two);
}

textarea { overflow: hidden; }

img { display: inline-block; max-width: 100%; height: auto; }

ul, li { list-style: none; padding: 0; margin: 0; }

::-webkit-input-placeholder { color: inherit; }
::-moz-input-placeholder    { color: inherit; }
::-ms-input-placeholder     { color: inherit; }

/* ── Layout Utilities ── */
.auto-container {
	position: static;
	max-width: var(--auto-container-width);
	padding: 0 15px;
	margin: 0 auto;
}

.page-wrapper {
	position: relative;
	margin: 0 auto;
	width: 100%;
	min-width: 300px;
	overflow: hidden;
}

.centered { text-align: center; }

/* Flex utilities (Bootstrap replacements) */
.d-flex                  { display: flex; }
.justify-content-between { justify-content: space-between; }
.align-items-center      { align-items: center; }
.flex-wrap               { flex-wrap: wrap; }
.clearfix::after         { content: ''; display: table; clear: both; }

/* Simple grid — mobile-first, Bootstrap col-* naming */
.row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}
.row > [class*="col-"] {
	padding: 0 15px;
	box-sizing: border-box;
}
.col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7,
.col-md-6, .col-sm-12 { width: 100%; }

@media only screen and (min-width: 768px) {
	.col-md-6  { width: 50%; }
}

@media only screen and (min-width: 1024px) {
	.col-lg-3  { width: 25%; }
	.col-lg-4  { width: 33.333%; }
	.col-lg-5  { width: 41.667%; }
	.col-lg-6  { width: 50%; }
	.col-lg-7  { width: 58.333%; }
}

/* ── Section Title ── */
.sec-title {
	position: relative;
	z-index: 1;
	margin-bottom: var(--margin-bottom-45);
}

.sec-title_title {
	position: relative;
	font-weight: 600;
	letter-spacing: 0.4em;
	font-size: var(--font-14);
	text-transform: uppercase;
	color: var(--main-color);
	display: inline-block;
}

.sec-title_heading {
	position: relative;
	color: var(--color-two);
	margin-top: var(--margin-top-15);
}

.sec-title_text {
	position: relative;
	line-height: 28px;
	color: var(--color-three);
	font-size: var(--font-16);
	margin-top: var(--margin-top-15);
}

p {
	margin-bottom: 1rem;
	margin-top: 0;
}

.sec-title.light .sec-title_text { color: rgba(var(--white-color-rgb), 0.70); }
.sec-title.light h2              { color: var(--white-color); }
.sec-title.centered              { text-align: center !important; }

.sec-title_separator {
	position: relative;
	width: 270px;
	height: 3px;
	margin-top: var(--margin-top-30);
	border-bottom: 1px solid rgba(var(--black-color-rgb), 0.15);
}

.sec-title_separator::before {
	position: absolute;
	content: '';
	left: 50%;
	bottom: -3px;
	width: 70px;
	height: 4px;
	border-radius: 50px;
	transform: translateX(-50%);
	background-color: var(--main-color);
}

.sec-title.centered .sec-title_separator {
	margin: 0 auto;
	margin-top: var(--margin-top-30);
}

/* ── Buttons ── */
.theme-btn {
	cursor: pointer;
	display: inline-block;
	transition: all 0.3s ease;
}

.btn-style-one {
	position: relative;
	font-weight: 500;
	overflow: hidden;
	text-align: center;
	padding: 18px 40px;
	display: inline-block;
	border-radius: 50px;
	letter-spacing: 1px;
	color: var(--white-color);
	font-size: var(--font-16);
	text-transform: capitalize;
	/* Left-to-right colour wipe on hover: two hard 50% stops on a 200%-wide
	   gradient, slid via `background-position`. The label sits naturally on top,
	   so no wrapper spans are needed. To reverse the direction, swap the colour
	   order *and* the two `background-position` values (`100% 0` <-> `0 0`). */
	background-color: var(--main-color);
	background-image: linear-gradient(
		to right,
		var(--color-two) 0,
		var(--color-two) 50%,
		var(--main-color) 50%,
		var(--main-color) 100%
	);
	background-size: 200% 100%;
	background-position: 100% 0;
	transition: background-position 0.4s ease;
}

.btn-style-one:hover { background-position: 0 0; }

.btn-style-one i {
	position: relative;
	font-style: normal;
	font-size: var(--font-12);
	margin-left: var(--margin-left-5);
	font-family: 'Font Awesome 5 Pro';
}

/* ── Editor Buttons block — matches `.btn-style-one` ──
   Core Buttons ship their own markup, so we re-apply the brand button look:
   same padding/radius/colours and the same left-to-right gradient wipe as
   `.btn-style-one` (above), with the trailing arrow supplied via `::after`. */
.wp-block-buttons .wp-block-button .wp-block-button__link {
	position: relative;
	overflow: hidden;
	padding: 18px 40px;
	border-radius: 50px;
	color: var(--white-color) !important;
	background-image: linear-gradient(
		to right,
		var(--color-two) 0,
		var(--color-two) 50%,
		var(--main-color) 50%,
		var(--main-color) 100%
	);
	background-size: 200% 100%;
	background-position: 100% 0;
	transition: background-position 0.4s ease;
}

.wp-block-buttons .wp-block-button .wp-block-button__link:hover {
	background-position: 0 0;
}

/* Trailing arrow — matches `.btn-style-one`'s fa-arrow-right (\f061) */
.wp-block-buttons .wp-block-button .wp-block-button__link::after {
	content: "\f061";
	margin-left: var(--margin-left-5);
	font-family: 'Font Awesome 5 Pro';
	font-weight: 900;
	font-size: var(--font-12);
}

/* ── Scroll To Top ── */
.scroll-to-top {
	position: fixed;
	bottom: 15px;
	right: 15px;
	width: 40px;
	height: 40px;
	color: var(--main-color);
	font-size: var(--font-20);
	line-height: 38px;
	text-align: center;
	z-index: 100;
	cursor: pointer;
	display: none;
	background: var(--white-color);
	box-shadow: 0 0 10px rgba(0,0,0,0.15);
	transition: all 300ms ease;
	font-family: 'Font Awesome 5 Pro';
}

.scroll-to-top:hover {
	color: var(--white-color);
	background: var(--main-color);
}

/* ── Social Icon One ── */
.social-icon-one { position: relative; }
.social-icon-one li { position: relative; display: inline-block; margin-right: var(--margin-right-10); }
.social-icon-one li a {
	position: relative;
	width: 48px; height: 48px; line-height: 46px;
	text-align: center; border-radius: 50px;
	display: inline-block;
	color: var(--white-color);
	border: 1px solid rgba(var(--white-color-rgb), 0.1);
}
.social-icon-one li a:hover {
	color: var(--white-color);
	border-color: var(--main-color);
	background-color: var(--main-color);
}

/* ── Block heading font override (beats theme.json specificity) ── */
.wp-block-heading {
	font-family: var(--font-family-Montserrat);
}


/* ── Preloader ── */
.preloader {
	display: none;
}