/* Otherside Landscaping - dark polished theme */
:root {
  --otherside-dark: #111411;
  --otherside-charcoal: #1f221f;
  --otherside-panel: #202320;
  --otherside-border: #343834;
  --otherside-purple: #8844B4;
  --otherside-green: #9FC612;
  --otherside-lime: #B7E300;
  --otherside-text: #d8ddd4;
  --otherside-muted: #aeb5ab;
  --otherside-white: #ffffff;
}

/* Global */
body {
  color: var(--otherside-text);
  background: var(--otherside-dark);
}

a {
  color: var(--otherside-purple);
}

a:hover {
  color: var(--otherside-green);
}

h1,
h2,
h3,
h4,
.entry-title,
.section-title,
.widget-title {
  color: var(--otherside-white);
  letter-spacing: 0;
}

h1 span,
h2 span,
h3 span,
.section-title span,
.widget-title span {
  color: var(--otherside-green);
}

/* Topbar */
.topbar,
.top-bar,
.header-top,
.site-topbar,
#topbar,
#top-bar {
  background: var(--otherside-charcoal) !important;
  color: #c8cec4 !important;
}

.topbar a,
.top-bar a,
.header-top a,
.site-topbar a,
#topbar a,
#top-bar a {
  color: #c8cec4 !important;
}

.topbar a:hover,
.top-bar a:hover,
.header-top a:hover,
.site-topbar a:hover,
#topbar a:hover,
#top-bar a:hover {
  color: var(--otherside-lime) !important;
}

/* Header and navigation */
.header,
.site-header {
  background: var(--otherside-charcoal) !important;
}

.main-navigation,
.primary-menu,
.navbar,
.site-navigation,
.nav-menu,
.menu-primary-menu-container {
  background: var(--otherside-green) !important;
}

.main-navigation a,
.primary-menu a,
.navbar a,
.site-navigation a,
.nav-menu a {
  color: #fff !important;
  font-weight: 700;
}

.main-navigation a:hover,
.primary-menu a:hover,
.navbar a:hover,
.site-navigation a:hover,
.nav-menu a:hover {
  background: var(--otherside-purple) !important;
  color: #fff !important;
}

.main-navigation .current-menu-item > a,
.primary-menu .current-menu-item > a,
.navbar .current-menu-item > a,
.site-navigation .current-menu-item > a,
.nav-menu .current-menu-item > a {
  background: var(--otherside-lime) !important;
  color: var(--otherside-dark) !important;
}

/* Dropdowns */
.sub-menu,
.main-navigation ul ul,
.primary-menu ul ul,
.navbar ul ul,
.site-navigation ul ul,
.nav-menu ul ul {
  background: var(--otherside-charcoal) !important;
}

.sub-menu a,
.main-navigation ul ul a,
.primary-menu ul ul a,
.navbar ul ul a,
.site-navigation ul ul a,
.nav-menu ul ul a {
  color: #f4f7f1 !important;
}

.sub-menu a:hover,
.main-navigation ul ul a:hover,
.primary-menu ul ul a:hover,
.navbar ul ul a:hover,
.site-navigation ul ul a:hover,
.nav-menu ul ul a:hover {
  background: var(--otherside-purple) !important;
  color: #fff !important;
}

/* Hero */
.slider,
.hero,
.rev_slider_wrapper,
.jumbotron {
  background-color: var(--otherside-dark) !important;
}

.slider h1,
.hero h1,
.rev_slider_wrapper h1 {
  color: #fff !important;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.75);
}

.slider p,
.hero p,
.rev_slider_wrapper p {
  color: #f4f7f1 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* Make homepage sections follow polished black area */
.home .section,
.home .content-area,
.home .site-content,
.home .services,
.home .home-services,
.home .why-choose-us,
.home .features-section,
.home .latest-news,
.home .testimonials,
.home .testimonial-section,
.home .awards,
.home .cta-section {
  background: var(--otherside-dark) !important;
  color: var(--otherside-text) !important;
}

/* Section title divider like polished screenshot */
.home h2,
.home .section-title,
.home .widget-title {
  border-bottom: 1px dashed #777;
  padding-bottom: 14px;
  margin-bottom: 28px;
}

/* Cards and boxes */
.home .service,
.home .service-box,
.home .service-card,
.home .feature,
.home .icon-box,
.home .testimonial,
.home .testimonial-box,
.home .post,
.home article {
  background: var(--otherside-panel) !important;
  border: 1px solid var(--otherside-border) !important;
  color: var(--otherside-text) !important;
  box-shadow: none !important;
}

.home .service h3,
.home .service-box h3,
.home .service-card h3,
.home .feature h3,
.home .icon-box h3,
.home .testimonial h3,
.home .post h3,
.home article h3 {
  color: #fff !important;
}

.home p,
.home li,
.home .entry-content {
  color: #c8cec4;
}

/* Icons */
.home .feature i,
.home .icon-box i,
.home .service i {
  color: var(--otherside-green) !important;
}

.home .feature:hover i,
.home .icon-box:hover i,
.home .service:hover i {
  color: var(--otherside-purple) !important;
}

/* Buttons */
button,
.button,
.btn,
input[type="submit"],
.wp-block-button__link,
.wpcf7 input[type="submit"] {
  background: #7da52a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
}

button:hover,
.button:hover,
.btn:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wpcf7 input[type="submit"]:hover {
  background: var(--otherside-purple) !important;
  color: #fff !important;
}

/* Forms */
input,
textarea,
select {
  background: #1f1f1f !important;
  border: 1px solid #3a3a3a !important;
  color: #fff !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--otherside-purple) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(136, 68, 180, 0.25) !important;
}

/* Blog/news cards */
.latest-news,
.blog,
.archive {
  background: var(--otherside-dark) !important;
}

.entry-title,
.post-title,
.blog h1,
.blog h2,
.blog h3 {
  color: #fff !important;
}

.entry-meta,
.post-meta,
.blog-meta {
  color: var(--otherside-muted) !important;
}

.read-more,
.more-link,
.entry-title a:hover,
.post-title a:hover {
  color: var(--otherside-purple) !important;
}

.read-more:hover,
.more-link:hover {
  color: var(--otherside-green) !important;
}

/* Page headers */
.page-header,
.page-title-bar,
.page-banner,
.breadcrumb-area,
.inner-banner {
  background: var(--otherside-charcoal) !important;
  color: #fff !important;
}

.page-header h1,
.page-title-bar h1,
.page-banner h1,
.inner-banner h1,
.page-title {
  color: #fff !important;
}

/* Footer */
.site-footer,
.footer,
.footer-area,
#footer,
.main-footer {
  background: var(--otherside-charcoal) !important;
  color: #c8cec4 !important;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.main-footer h1,
.main-footer h2,
.main-footer h3,
.main-footer h4 {
  color: #fff !important;
}

.site-footer a,
.footer a,
.footer-area a,
#footer a,
.main-footer a,
.main-footer .widget_nav_menu ul > li > a {
  color: #c8cec4 !important;
}

.site-footer a:hover,
.footer a:hover,
.footer-area a:hover,
#footer a:hover,
.main-footer a:hover,
.main-footer .widget_nav_menu ul > li > a:hover {
  color: var(--otherside-lime) !important;
}

.bottom-footer,
.footer-bottom,
.site-info {
  background: #191c19 !important;
  color: #c8cec4 !important;
}

/* Mobile */
.mobile-navigation,
.mobile-menu,
.mean-container .mean-nav,
.slicknav_nav,
.offcanvas-menu {
  background: var(--otherside-charcoal) !important;
}

.mobile-navigation a,
.mobile-menu a,
.mean-container .mean-nav a,
.slicknav_nav a,
.offcanvas-menu a {
  color: #fff !important;
  border-color: #454a45 !important;
}

.navbar-toggle,
.navbar-toggle:hover {
  background: var(--otherside-purple) !important;
}

/* Hide the template-placeholder feeling until images are replaced */
img[src*="placeholder"],
img[alt="Theme Image"] {
  opacity: 0.35;
  filter: grayscale(100%);
}
/* Fix Client Testimonials section */
.home .testimonials,
.home .testimonials.style-boxed,
.home .testimonial-section {
  background: #111411 !important;
  color: #d8ddd4 !important;
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

/* Fix testimonial heading */
.home .testimonials h2,
.home .testimonials .section-title,
.home .testimonial-section h2,
.home .testimonial-section .section-title {
  color: #ffffff !important;
  border-bottom: 1px dashed #777 !important;
  padding-bottom: 16px !important;
  margin-bottom: 34px !important;
}

.home .testimonials h2 span,
.home .testimonials .section-title span,
.home .testimonial-section h2 span,
.home .testimonial-section .section-title span {
  color: #9FC612 !important;
}

/* Testimonial quote cards */
.home .testimonials .testimonial,
.home .testimonials .testimonial-box,
.home .testimonials .quote,
.home .testimonials blockquote,
.home .testimonial-section .testimonial,
.home .testimonial-section .testimonial-box,
.home .testimonial-section blockquote {
  background: #1f221f !important;
  color: #d8ddd4 !important;
  border: 1px solid #343834 !important;
  border-left: 5px solid #8844B4 !important;
  box-shadow: none !important;
}

/* Quote text */
.home .testimonials p,
.home .testimonials blockquote,
.home .testimonials blockquote p,
.home .testimonial-section p,
.home .testimonial-section blockquote,
.home .testimonial-section blockquote p {
  color: #d8ddd4 !important;
}

/* Big quote icon */
.home .testimonials .fa-quote-left,
.home .testimonials .fa-quote-right,
.home .testimonials blockquote:before,
.home .testimonial-section blockquote:before {
  color: #9FC612 !important;
  opacity: 0.45 !important;
}

/* Author names and locations */
.home .testimonials h3,
.home .testimonials h4,
.home .testimonials .author,
.home .testimonials .name,
.home .testimonials .testimonial-author,
.home .testimonial-section h3,
.home .testimonial-section h4,
.home .testimonial-section .author,
.home .testimonial-section .name,
.home .testimonial-section .testimonial-author {
  color: #ffffff !important;
}

.home .testimonials .location,
.home .testimonials .company,
.home .testimonials .testimonial-location,
.home .testimonial-section .location,
.home .testimonial-section .company,
.home .testimonial-section .testimonial-location {
  color: #9FC612 !important;
}

/* Remove awkward white speech-bubble tail if theme keeps it */
.home .testimonials .testimonial:after,
.home .testimonials .testimonial-box:after,
.home .testimonials blockquote:after {
  border-top-color: #1f221f !important;
}

/* Fix split homepage headings on light sections */
.home .widget-title,
.home .section-title {
  color: #464646 !important;
}

.home .widget-title .light,
.home .section-title .light {
  color: #464646 !important;
}

/* Keep headings readable on dark sections */
.home .about .widget-title,
.home .testimonials .widget-title,
.home .main-footer .widget-title,
.home .footer .widget-title,
.home .dark-section .widget-title {
  color: #ffffff !important;
}

.home .about .widget-title .light,
.home .testimonials .widget-title .light,
.home .main-footer .widget-title .light,
.home .footer .widget-title .light,
.home .dark-section .widget-title .light {
  color: #9FC612 !important;
}

body:not(.home) .content p,
body:not(.home) .content li,
body:not(.home) .entry-content p,
body:not(.home) .entry-content li {
  color: #464646 !important;
}

body:not(.home) .content h1,
body:not(.home) .content h2,
body:not(.home) .content h3 {
  color: #2f332f !important;
}

/* Replace native date icon with white calendar icon */
.wpcf7 input[type="date"] {
  position: relative !important;
  color: #ffffff !important;
  background-color: #1f1f1f !important;
  padding-right: 44px !important;
}

/* Hide the browser's black calendar icon */
.wpcf7 input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0 !important;
  position: absolute !important;
  right: 0 !important;
  width: 44px !important;
  height: 100% !important;
  cursor: pointer !important;
}

/* White calendar icon overlay */
.wpcf7 input[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px 16px !important;
}

/* Replace The Landscaper / QreativeThemes footer credit */
.bottom-footer .container .row > div:first-child,
.footer-bottom .container .row > div:first-child,
.site-footer .container .row > div:first-child,
.main-footer + .bottom-footer .container .row > div:first-child {
  font-size: 0 !important;
  color: transparent !important;
}

.bottom-footer .container .row > div:first-child::before,
.footer-bottom .container .row > div:first-child::before,
.site-footer .container .row > div:first-child::before,
.main-footer + .bottom-footer .container .row > div:first-child::before {
  content: "Copyright 2026 Otherside Landscaping & Lawncare. All Rights Reserved.";
  font-size: 14px !important;
  color: #c8cec4 !important;
}
/* Make header logo stand out */
.header .navigation,
.site-header .navigation {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important;
}

.header .logo,
.site-header .logo,
.navigation .logo {
  background: #ffffff !important;
  padding: 10px 24px !important;
  border-bottom: 4px solid #8844B4 !important;
}

.header .logo img,
.site-header .logo img,
.navigation .logo img {
  max-height: 78px !important;
  width: auto !important;
}

/* Mobile logo cleanup */
@media (max-width: 768px) {
  .header .logo,
  .site-header .logo,
  .navigation .logo {
    padding: 8px 14px !important;
    border-bottom: 3px solid #8844B4 !important;
  }

  .header .logo img,
  .site-header .logo img,
  .navigation .logo img {
    max-height: 58px !important;
  }
}