/*!
Theme Name: dynamicirrigation
Theme URI: http://underscores.me/
Author: IktanStudio.com
Author URI: http://iktanstudio.com/
Description: Custom WordPress theme for Dynamic Irrigation
Version: 1.0.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dynamicirrigation
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ==================================================
   Bootstrap Theme Colors
================================================== */

:root {
	--bs-primary: #4d9edb;
	--bs-primary-rgb: 77, 158, 219;

	--bs-success: #346d42;
	--bs-success-rgb: 52, 109, 66;

	--bs-secondary: #7fb064;
	--bs-secondary-rgb: 127, 176, 100;

	--bs-link-color: #4d9edb;
	--bs-link-color-rgb: 77, 158, 219;
	--bs-link-hover-color: #346d42;
	--bs-link-hover-color-rgb: 52, 109, 66;
}

/* ==================================================
   Buttons
================================================== */

.btn-primary {
	--bs-btn-color: #ffffff;
	--bs-btn-bg: #4d9edb;
	--bs-btn-border-color: #4d9edb;
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: #3d8fc9;
	--bs-btn-hover-border-color: #3d8fc9;
	--bs-btn-focus-shadow-rgb: 77, 158, 219;
	--bs-btn-active-color: #ffffff;
	--bs-btn-active-bg: #346d42;
	--bs-btn-active-border-color: #346d42;
	--bs-btn-disabled-color: #ffffff;
	--bs-btn-disabled-bg: #4d9edb;
	--bs-btn-disabled-border-color: #4d9edb;
}

.btn-outline-success {
	--bs-btn-color: #346d42;
	--bs-btn-border-color: #346d42;
	--bs-btn-hover-color: #ffffff;
	--bs-btn-hover-bg: #346d42;
	--bs-btn-hover-border-color: #346d42;
	--bs-btn-focus-shadow-rgb: 52, 109, 66;
	--bs-btn-active-color: #ffffff;
	--bs-btn-active-bg: #346d42;
	--bs-btn-active-border-color: #346d42;
	--bs-btn-disabled-color: #346d42;
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: #346d42;
}

/* ==================================================
   Global Box Sizing
================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ==================================================
   Base Elements
================================================== */

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: #ffffff;
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

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

figure {
	margin: 0;
}

embed,
iframe,
object {
	max-width: 100%;
}

table {
	width: 100%;
}

/* ==================================================
   Links
================================================== */

a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a:focus,
a:active {
	color: inherit;
	text-decoration: none;
}

/* ==================================================
   Typography
================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	clear: both;
}

p:last-child {
	margin-bottom: 0;
}

@font-face {
    font-family: "articulat-cf";
    src: url("fonts/ArticulatCF-Regular.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
}

body {
    font-family: "articulat-cf", sans-serif;
}

/* ==================================================
   WordPress Logo
================================================== */

.custom-logo-link {
	display: inline-block;
}

.custom-logo {
	height: auto;
	max-width: 100%;
}

/* ==================================================
   Header
================================================== */

.site-header {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	background-color: #ffffff;
}

/* ==================================================
   Top Bar
================================================== */

.top-bar {
	background-color: #346d42;
	font-size: 0.875rem;
	letter-spacing: 0.3px;
}

/* ==================================================
   Navbar
================================================== */

.navbar {
	min-height: 90px;
	background-color: #ffffff;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 1px;
	
}

/* ==================================================
   Logo
================================================== */

.navbar-brand img,
.custom-logo {
	max-height: 72px;
	width: auto;
	display: block;
}

/* ==================================================
   Navigation Menu
================================================== */

.main-navigation .navbar-nav > li {
	position: relative;
}

.main-navigation .navbar-nav > li > a {
	color: #1d1d1d;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.5rem 0;
	transition: all 0.3s ease;
}

.main-navigation .navbar-nav > li > a:hover,
.main-navigation .navbar-nav > li.current-menu-item > a,
.main-navigation .navbar-nav > li.current_page_item > a {
	color: #4d9edb;
}

/* ==================================================
   Dropdown Menu
================================================== */

.main-navigation .sub-menu {
	background-color: #ffffff;
	border-radius: 0.5rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	padding: 0.75rem 0;
	border: none;
}

.main-navigation .sub-menu li a {
	color: #1d1d1d;
	font-size: 0.95rem;
	font-weight: 500;
	padding: 0.65rem 1.25rem;
	display: block;
	transition: all 0.3s ease;
}

.main-navigation .sub-menu li a:hover {
	background-color: #f5f5f5;
	color: #4d9edb;
}



/* ==================================================
   Accessibility
================================================== */


.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ==================================================
   Mobile Navigation
================================================== */

.navbar-toggler {
	padding: 0;
}

.navbar-toggler:focus {
	box-shadow: none;
}

@media (max-width: 991.98px) {

	.navbar-collapse {
		background-color: #ffffff;
		padding-top: 1.5rem;
		padding-bottom: 1rem;
	}

	.main-navigation .navbar-nav {
		gap: 1rem !important;
	}

	.main-navigation .navbar-nav > li > a {
		display: block;
		padding: 0.75rem 0;
		border-bottom: 1px solid #eeeeee;
	}
}

/* ==================================================
   Hero Section
================================================== */

.hero-section {
	background-image:
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0.98) 0%,
			rgba(255, 255, 255, 0.92) 28%,
			rgba(255, 255, 255, 0.55) 48%,
			rgba(255, 255, 255, 0.05) 68%
		),
		url('https://dynamicirrigationil.com/wp-content/uploads/2026/05/dynamic-irrigation-hero-irrigation-system-elgin-il.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ==================================================
   Hero Typography
================================================== */

.hero-eyebrow {
	letter-spacing: 1px;
	font-size: 1rem;
}

.hero-title {
	font-size: clamp(2.75rem, 4.75vw, 4.75rem);
	line-height: 1;
	max-width: 680px;
	color: #1d1d1d;
}

.hero-copy {
	max-width: 600px;
	line-height: 1.5;
	color: #6b7280;
}

/* ==================================================
   Hero Responsive
================================================== */

@media (max-width: 991.98px) {

	.hero-section {
		background-image:
			linear-gradient(
				180deg,
				rgba(255, 255, 255, 0) 0%,
				rgba(255, 255, 255, 0.15) 28%,
				rgba(255, 255, 255, 0.86) 48%,
				rgba(255, 255, 255, 0.98) 68%,
				rgba(255, 255, 255, 1) 100%
			),
			url('/wp-content/uploads/2026/05/hero-mobile-background.webp');
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
	}

	.hero-section .row {
		padding-top: 25vh !important;
	}

	.hero-title {
		font-size: 2.3rem;
		line-height: 1;
	}

	.hero-copy {
		font-size: 1rem !important;
	}
}