/**
 * Esevioz Brand Override CSS
 *
 * This file safely overrides the Sandbox template colors and fonts
 * without modifying the core style.css (31,862 lines).
 *
 * IMPORTANT: This file must be loaded AFTER all other CSS files.
 */

/* ========================================
   1. LOAD MONTSERRAT FONT
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/* ========================================
   2. ESEVIOZ BRAND COLORS
   ======================================== */
:root {
  /* Esevioz Primary Colors */
  --esevioz-pine: #1B5420;        /* Primary dark green */
  --esevioz-fern: #486F38;        /* Secondary green */
  --esevioz-butterscotch: #E0993D; /* Accent warm */
  --esevioz-vermilion: #E44628;   /* Accent energetic */
  --esevioz-linen: #FFF5EB;       /* Background warm */

  /* Esevioz Text Colors - Refined blacks and whites */
  --esevioz-text-dark: #191919;   /* Slightly muted black for body text */
  --esevioz-text-light: #FCFCFC;  /* Slightly muted white for light text */

  /* Override template's purple with Esevioz Pine */
  --color-purple: var(--esevioz-pine);
  --color-purple-rgb: 27, 84, 32;
}

/* Text Selection Color - Butterscotch highlight */
::selection {
  background-color: var(--esevioz-butterscotch) !important;
  color: var(--esevioz-text-light) !important;
}

::-moz-selection {
  background-color: var(--esevioz-butterscotch) !important;
  color: var(--esevioz-text-light) !important;
}


/* ========================================
   3. FONT FAMILY & TEXT COLOR OVERRIDES
   ======================================== */

/* Override body font and text color */
body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  color: var(--esevioz-text-dark) !important;
}

/* Override all major text elements */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--esevioz-text-dark) !important;
}

/* Paragraphs and general text */
p, li, span, a, div {
  color: inherit;
}

/* White/light text overrides (for dark backgrounds) */
.text-white,
.!text-white {
  color: var(--esevioz-text-light) !important;
}

/* Hero section and other white text areas */
.video-content .text-white,
.navbar-dark .nav-link,
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p {
  color: var(--esevioz-text-light) !important;
}

/* Override buttons */
.btn {
  font-family: 'Montserrat', sans-serif !important;
}

/* Override navigation */
.navbar,
.nav-link,
.navbar-nav .nav-link {
  font-family: 'Montserrat', sans-serif !important;
}

/* Override all heading elements specifically */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Montserrat', sans-serif !important;
}


/* ========================================
   4. COLOR OVERRIDES - Purple to Pine
   ======================================== */

/* Background colors */
.bg-purple,
.bg-soft-purple {
  background-color: var(--esevioz-pine) !important;
}

/* Override template's blue primary colors to warm beige */
.bg-soft-primary {
  background-color: var(--esevioz-linen) !important;
}

/* Logo visibility for navbar-light (blog pages) */
.navbar-light .logo-dark {
  display: inline-block !important;
}

.navbar-light .logo-light {
  display: none !important;
}

/* ========================================
   5. NAVIGATION HOVER COLORS
   ======================================== */

/* Dark navbar (landing page hero) - use butterscotch for visibility */
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .dropdown-toggle:hover,
.navbar-dark .navbar-nav .dropdown-item:hover {
  color: var(--esevioz-butterscotch) !important;
}

/* Dropdown toggle arrow in dark mode */
.navbar-dark .navbar-nav .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after {
  color: var(--esevioz-butterscotch) !important;
}

/* Info icon and mobile menu button in dark navbar */
.navbar-dark .navbar-nav .nav-link i:hover {
  color: var(--esevioz-butterscotch) !important;
}

/* Active/current page link in dark navbar */
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--esevioz-butterscotch) !important;
}

/* ========================================
   6. OVERRIDE TEMPLATE BLUE (#3f78e0)
   ======================================== */

/* Override all hardcoded blue backgrounds to pine green */
[class*="!bg-[#3f78e0]"],
[class*="bg-[#3f78e0]"] {
  background-color: var(--esevioz-pine) !important;
}

/* Override all hardcoded blue borders to pine green */
[class*="border-[#3f78e0]"] {
  border-color: var(--esevioz-pine) !important;
}

/* Override all hardcoded blue text/hovers to pine green */
[class*="text-[#3f78e0]"],
[class*="hover:text-[#3f78e0]"],
[class*="hover:!text-[#3f78e0]"] {
  color: var(--esevioz-pine) !important;
}

/* Override post meta and link accents */
a:hover,
.post-meta a:hover,
.post-category a:hover {
  color: var(--esevioz-pine) !important;
}

/* Override pseudo-element colors (dots, lines, underlines) */
.post-category.text-line::before,
.text-line::before,
[class*="before:bg-[#3f78e0]"]::before {
  background-color: var(--esevioz-pine) !important;
}

/* ========================================
   7. BLOG CATEGORY LABEL STYLES
   ======================================== */

/* Style blog category labels - dark green text and accent line */
.post-header .inline-flex a[rel="category"],
.post-category a {
  color: var(--esevioz-pine) !important;
}

.post-header .inline-flex a[rel="category"]:hover,
.post-category a:hover {
  color: var(--esevioz-fern) !important;
}

/* Text colors */
.text-purple {
  color: var(--esevioz-pine) !important;
}

/* Border colors */
.border-purple {
  border-color: var(--esevioz-pine) !important;
}

/* Button colors */
.btn-purple,
.btn-primary {
  background-color: var(--esevioz-pine) !important;
  border-color: var(--esevioz-pine) !important;
  color: var(--esevioz-text-light) !important;
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--esevioz-fern) !important;
  border-color: var(--esevioz-fern) !important;
  color: var(--esevioz-text-light) !important;
}

.btn-outline-purple {
  border-color: var(--esevioz-pine) !important;
  color: var(--esevioz-pine) !important;
}

.btn-outline-purple:hover {
  background-color: var(--esevioz-pine) !important;
  border-color: var(--esevioz-pine) !important;
  color: var(--esevioz-text-light) !important;
}

.btn-soft-purple {
  background-color: rgba(27, 84, 32, 0.1) !important;
  color: var(--esevioz-pine) !important;
}

.btn-soft-purple:hover {
  background-color: var(--esevioz-pine) !important;
  color: var(--esevioz-text-light) !important;
}

/* Link colors */
a.text-purple:hover,
a.text-purple:focus {
  color: var(--esevioz-fern) !important;
}

/* Badge colors */
.badge-purple {
  background-color: var(--esevioz-pine) !important;
}

/* Alert colors */
.alert-purple {
  background-color: rgba(27, 84, 32, 0.1) !important;
  border-color: var(--esevioz-pine) !important;
  color: var(--esevioz-pine) !important;
}


/* ========================================
   5. ACCENT COLORS - Butterscotch & Vermilion
   ======================================== */

/* Use Butterscotch for secondary actions/highlights */
.btn-secondary,
.badge-secondary {
  background-color: var(--esevioz-butterscotch) !important;
  border-color: var(--esevioz-butterscotch) !important;
  color: var(--esevioz-text-light) !important;
}

.btn-secondary:hover {
  background-color: #d68a2e !important;
  border-color: #d68a2e !important;
  color: var(--esevioz-text-light) !important;
}

/* Use Vermilion for call-to-action elements (sparingly) */
.btn-danger,
.text-danger {
  background-color: var(--esevioz-vermilion) !important;
  color: var(--esevioz-text-light) !important;
}


/* ========================================
   6. BACKGROUND OVERRIDES
   ======================================== */

/* Page frame background - warm linen color */
.page-frame {
  background-color: var(--esevioz-linen) !important;
}

/* Soft backgrounds */
.bg-soft-primary {
  background-color: rgba(27, 84, 32, 0.05) !important;
}


/* ========================================
   7. ICON & SVG COLOR OVERRIDES
   ======================================== */

/* SVG icons that use purple */
.icon-svg.icon-svg-purple,
.svg-inject.icon-svg[class*="purple"] {
  fill: var(--esevioz-pine) !important;
}

/* Icon backgrounds */
.icon.icon-purple {
  color: var(--esevioz-pine) !important;
}


/* ========================================
   8. NAVIGATION OVERRIDES
   ======================================== */

/* Logo sizing - control the size of the Esevioz logo */
.navbar-brand img {
  max-height: 45px !important;  /* Constrain logo height */
  width: auto !important;
  height: auto !important;
}

/* Logo sizing for larger screens */
@media (min-width: 992px) {
  .navbar-brand img {
    max-height: 50px !important;
  }
}

/* Logo sizing for smaller screens/mobile */
@media (max-width: 991.98px) {
  .navbar-brand img {
    max-height: 40px !important;
  }
}

/* Optional: Add subtle backdrop to transparent navbar for better logo visibility */
.navbar.transparent.navbar-dark {
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%) !important;
}

/* Active/hover states in navigation */
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: var(--esevioz-pine) !important;
}

/* Dropdown hover states */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(27, 84, 32, 0.05) !important;
  color: var(--esevioz-pine) !important;
}


/* ========================================
   9. FORM ELEMENT OVERRIDES
   ======================================== */

/* Focus states */
.form-control:focus,
.form-select:focus {
  border-color: var(--esevioz-pine) !important;
  box-shadow: 0 0 0 0.25rem rgba(27, 84, 32, 0.15) !important;
}

/* Checkboxes and radios */
.form-check-input:checked {
  background-color: var(--esevioz-pine) !important;
  border-color: var(--esevioz-pine) !important;
}


/* ========================================
   10. PROGRESS & LOADING OVERRIDES
   ======================================== */

/* Progress bars */
.progress-bar {
  background-color: var(--esevioz-pine) !important;
}

/* Loading spinner */
.spinner-border.text-purple {
  color: var(--esevioz-pine) !important;
}


/* ========================================
   11. CUSTOM UTILITY CLASSES
   ======================================== */

/* Custom Esevioz color utilities */
.bg-esevioz-pine { background-color: var(--esevioz-pine) !important; }
.bg-esevioz-fern { background-color: var(--esevioz-fern) !important; }
.bg-esevioz-butterscotch { background-color: var(--esevioz-butterscotch) !important; }
.bg-esevioz-vermilion { background-color: var(--esevioz-vermilion) !important; }
.bg-esevioz-linen { background-color: var(--esevioz-linen) !important; }

.text-esevioz-pine { color: var(--esevioz-pine) !important; }
.text-esevioz-fern { color: var(--esevioz-fern) !important; }
.text-esevioz-butterscotch { color: var(--esevioz-butterscotch) !important; }
.text-esevioz-vermilion { color: var(--esevioz-vermilion) !important; }

.border-esevioz-pine { border-color: var(--esevioz-pine) !important; }
.border-esevioz-fern { border-color: var(--esevioz-fern) !important; }


/* ========================================
   12. HERO IMAGE OVERLAY - GREEN TINT
   ======================================== */

/* Hero image uses data-image-src and template's built-in overlay system */
/* The green overlay is applied via inline Tailwind classes in HTML */


/* ========================================
   13. BULLET LIST ICON OVERRIDES
   ======================================== */

/* Clean override for bullet list icons - green filled with white caret */
/* HTML has been cleaned of hardcoded colors, so CSS has full control */

/* Style the icon container - green filled background */
.bullet-soft-purple li i.uil-check {
  background-color: var(--esevioz-pine) !important;
  color: var(--esevioz-text-light) !important;
  border-radius: 0.25rem !important; /* Slightly rounded square */
}

/* Change icon from checkmark to right-pointing caret (filled triangle) */
.bullet-soft-purple li i.uil-check::before {
  content: '\ec59' !important; /* Unicons play icon */
}


/* ========================================
   14. FOOTER COMPONENT STYLES
   ======================================== */

/* Footer logo sizing - applied globally so all pages are consistent */
footer .widget img {
  max-height: 50px !important;
  width: auto !important;
}


/* ========================================
   15. JOURNAL FILTER PILLS
   ======================================== */

/* Filter navigation styling - subtle text links, not buttons */
.filter-nav .filter-pill {
  display: inline-block;
  padding: 0.4rem 0;
  font-size: 0.85rem;
  font-weight: 500;
  color: #60697b;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.filter-nav .filter-pill:hover {
  color: var(--esevioz-pine);
}

/* Active state - clear visual indicator */
.filter-nav .filter-pill.active {
  color: var(--esevioz-pine);
  font-weight: 600;
  border-bottom-color: var(--esevioz-pine);
}


/* ========================================
   16. PULL QUOTE STYLES
   ======================================== */

/* Standardized pull quote - for emphasis passages in articles/pages */
.pull-quote {
  font-size: 1.75rem !important;
  font-style: italic !important;
  font-weight: 600 !important;
  color: var(--esevioz-pine) !important;
  line-height: 1.4 !important;
}


/* ========================================
   END OF ESEVIOZ BRAND OVERRIDES
   ======================================== */