/**
 * C&S Drainage Brand Colors Implementation
 * 
 * Primary implementation of brand colors across all site elements
 * Colors: #F2901C (Yellow), #1A1A1A (Dark Grey)
 * 
 * This file applies the CSS variables defined in brand-variables.css
 * to all TheGem and WPBakery elements
 */

/* === GLOBAL COLOR APPLICATION === */

/* Apply brand colors to body and main content areas */
body {
  color: var(--csd-text-primary);
  background-color: var(--csd-bg-primary);
}

/* === HEADER & NAVIGATION === */

/* Site Header */
.site-header,
#site-header,
.header-main {
  background-color: var(--csd-bg-primary) !important;
  border-bottom: 1px solid var(--csd-border-light);
}

/* Navigation Menu Items */
.primary-navigation a,
#primary-menu > li > a,
.main-menu-item,
.title-main-menu {
  color: var(--csd-text-primary) !important;
}

.primary-navigation a:hover,
#primary-menu > li > a:hover,
.main-menu-item:hover {
  color: var(--csd-yellow) !important;
  background-color: var(--csd-grey) !important;
}

/* Active Menu Items */
.current-menu-item > a,
.current-menu-parent > a,
.current-menu-ancestor > a {
  color: var(--csd-grey) !important;
  border-bottom: 3px solid var(--csd-yellow) !important;
}

/* === BUTTONS & CTAs === */

/* Primary Buttons */
.csd-button,
.btn,
.button,
input[type="submit"],
input[type="button"],
button {
  background-color: var(--csd-yellow) !important;
  color: var(--csd-grey) !important;
  border: 2px solid var(--csd-yellow) !important;
  font-weight: var(--csd-font-weight-semibold);
  transition: all 0.3s ease;
}

.csd-button:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
  background-color: var(--csd-accent-hover) !important;
  border-color: var(--csd-accent-hover) !important;
  transform: translateY(-2px);
  box-shadow: var(--csd-shadow-md);
}

/* Secondary/Outline Buttons */
.csd-button-outline,
.btn-outline,
.button-outline {
  background-color: transparent !important;
  color: var(--csd-grey) !important;
  border: 2px solid var(--csd-grey) !important;
}

.csd-button-outline:hover,
.btn-outline:hover,
.button-outline:hover {
  background-color: var(--csd-grey) !important;
  color: var(--csd-white) !important;
}

/* === TYPOGRAPHY COLOR APPLICATION === */

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--csd-text-primary);
}

/* Links */
a {
  color: var(--csd-link);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--csd-link-hover);
  text-decoration-color: currentColor;
}

a:visited {
  color: var(--csd-link-visited);
}

/* === SECTIONS & BACKGROUNDS === */

/* Yellow Background Sections */
.bg-yellow,
.csd-bg-accent {
  background-color: var(--csd-yellow) !important;
  color: var(--csd-grey) !important;
}

.bg-yellow h1, .bg-yellow h2, .bg-yellow h3,
.bg-yellow h4, .bg-yellow h5, .bg-yellow h6,
.csd-bg-accent h1, .csd-bg-accent h2, .csd-bg-accent h3,
.csd-bg-accent h4, .csd-bg-accent h5, .csd-bg-accent h6 {
  color: var(--csd-grey) !important;
}

/* Dark Background Sections */
.bg-dark,
.csd-bg-dark {
  background-color: var(--csd-grey) !important;
  color: var(--csd-white) !important;
}

.bg-dark h1, .bg-dark h2, .bg-dark h3,
.bg-dark h4, .bg-dark h5, .bg-dark h6,
.csd-bg-dark h1, .csd-bg-dark h2, .csd-bg-dark h3,
.csd-bg-dark h4, .csd-bg-dark h5, .csd-bg-dark h6 {
  color: var(--csd-white) !important;
}

.bg-dark a,
.csd-bg-dark a {
  color: var(--csd-yellow) !important;
}

.bg-dark a:hover,
.csd-bg-dark a:hover {
  color: var(--csd-accent-hover) !important;
}

/* === WPBAKERY SPECIFIC OVERRIDES === */

/* WPBakery Buttons */
.vc_btn3-color-grey,
.vc_btn3-color-primary {
  background-color: var(--csd-yellow) !important;
  color: var(--csd-grey) !important;
  border-color: var(--csd-yellow) !important;
}

.vc_btn3-color-grey:hover,
.vc_btn3-color-primary:hover {
  background-color: var(--csd-accent-hover) !important;
  border-color: var(--csd-accent-hover) !important;
}

/* WPBakery Icon Boxes */
.vc_icon_element {
  color: var(--csd-yellow) !important;
}

/* WPBakery Section Backgrounds */
.vc_section[data-vc-full-width="true"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* === FORMS === */

/* Form Fields */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select {
  border: 2px solid var(--csd-border-medium) !important;
  color: var(--csd-text-primary) !important;
  background-color: var(--csd-bg-primary) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--csd-yellow) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(242, 144, 28, 0.2);
}

/* Form Labels */
label {
  color: var(--csd-text-primary);
  font-weight: var(--csd-font-weight-medium);
}

/* === FOOTER === */

.site-footer,
#footer {
  background-color: var(--csd-grey) !important;
  color: var(--csd-white) !important;
}

.site-footer a,
#footer a {
  color: var(--csd-white) !important;
}

.site-footer a:hover,
#footer a:hover {
  color: var(--csd-yellow) !important;
}

/* === ACCESSIBILITY CONTRAST FIXES === */

/* Ensure yellow text on white has sufficient contrast */
.yellow-on-white {
  color: var(--csd-grey) !important; /* Use grey instead of yellow for text */
}

/* Yellow backgrounds need dark text */
.bg-yellow p,
.bg-yellow li,
.bg-yellow span,
.csd-bg-accent p,
.csd-bg-accent li,
.csd-bg-accent span {
  color: var(--csd-grey) !important;
}

/* === HOVER STATES === */

/* Universal hover effect for interactive elements */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--csd-shadow-md);
}

/* === FOCUS STATES === */

/* Consistent focus styles for accessibility */
*:focus-visible {
  outline: 2px solid var(--csd-grey);
  outline-offset: 2px;
}

/* Yellow elements get grey focus */
.bg-yellow *:focus-visible,
.csd-bg-accent *:focus-visible {
  outline-color: var(--csd-grey);
}

/* Dark elements get yellow focus */
.bg-dark *:focus-visible,
.csd-bg-dark *:focus-visible {
  outline-color: var(--csd-yellow);
}

/* === UTILITY CLASSES === */

/* Text Colors */
.text-yellow { color: var(--csd-yellow) !important; }
.text-grey { color: var(--csd-grey) !important; }
.text-white { color: var(--csd-white) !important; }

/* Background Colors */
.bg-yellow { background-color: var(--csd-yellow) !important; }
.bg-grey { background-color: var(--csd-grey) !important; }
.bg-white { background-color: var(--csd-white) !important; }

/* Border Colors */
.border-yellow { border-color: var(--csd-yellow) !important; }
.border-grey { border-color: var(--csd-grey) !important; }
.border-white { border-color: var(--csd-white) !important; }

/* === RESPONSIVE ADJUSTMENTS === */

@media (max-width: 768px) {
  /* Mobile Navigation */
  .mobile-menu {
    background-color: var(--csd-bg-primary);
    border-top: 3px solid var(--csd-yellow);
  }
  
  /* Mobile Buttons */
  .csd-button,
  .btn,
  .button {
    width: 100%;
    text-align: center;
  }
}

/* === PRINT STYLES === */

@media print {
  /* High contrast for printing */
  body {
    color: #000 !important;
    background: #fff !important;
  }
  
  .bg-yellow,
  .csd-bg-accent {
    background-color: #fff !important;
    border: 2px solid #000 !important;
  }
  
  .bg-dark,
  .csd-bg-dark {
    background-color: #fff !important;
    color: #000 !important;
    border: 2px solid #000 !important;
  }
}