/* Duotone alternating theme system: odd sections use brand purple, even sections use red accents. */

/*
Contract:
- Wrap content sections in <main class="duotone">.
- Add class "duo-section" to each top-level section to participate in alternation.
- We override CSS variables per-section so existing components pick up the right accent colors without markup churn.
*/

/* Logo responsive sizing */
#logo img {
  max-width: 100%;
  height: auto;
  transition: all 0.3s ease;
}

/* Main logo - largest size for desktop header */
#logo .logo-main {
  max-width: 320px;
  height: auto;
}

/* Scroll logo - medium size when scrolling */
#logo .logo-scroll {
  max-width: 200px;
  height: auto;
}

/* Mobile logo - smallest size for mobile devices */
#logo .logo-mobile {
  max-width: 180px;
  height: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #logo .logo-main {
    max-width: 240px;
  }

  #logo .logo-scroll {
    max-width: 160px;
  }

  #logo .logo-mobile {
    max-width: 150px;
  }
}

@media (max-width: 480px) {
  #logo .logo-main {
    max-width: 200px;
  }

  #logo .logo-scroll {
    max-width: 140px;
  }

  #logo .logo-mobile {
    max-width: 120px;
  }
}

main.duotone {
  display: block;
  /* Ensure body text is white, not grey, when using the duotone layout */
  --body-font-color-dark: rgba(255, 255, 255, 1);
}

/* Base styling for duo sections */
main.duotone > .duo-section {
  position: relative;
  isolation: isolate; /* ensure overlays stay within section */
}

/* Visual cue: a thin gradient stripe at the top of each section using the active colors */
main.duotone > .duo-section::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--primary-color) 0%,
    var(--secondary-color) 100%
  );
  opacity: 0.6;
  z-index: 1;
}

/* Odd sections (1st, 3rd, ...) — keep brand purple */
main.duotone > .duo-section:nth-of-type(odd) {
  /* Brand (from scheme-01): Purple */
  --primary-color: #764df0;
  --primary-color-rgb: 118, 77, 240;
  --secondary-color: #442490;
  --secondary-color-rgb: 68, 36, 144;
}

/* Even sections (2nd, 4th, ...) — Red */
main.duotone > .duo-section:nth-of-type(even) {
  --primary-color: #e22b2b;
  --primary-color-rgb: 226, 43, 43;
  --secondary-color: #9a1111;
  --secondary-color-rgb: 154, 17, 17;
}

/* Optional utility: theme overlay that adapts to current section colors */
.theme-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 120% at 50% 0%,
    rgba(var(--primary-color-rgb), 0.25) 0%,
    rgba(var(--secondary-color-rgb), 0.45) 60%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Ensure foreground content stays above overlays */
main.duotone > .duo-section > * {
  position: relative;
  z-index: 2;
}

/* Typography overrides: force text to white inside duotone sections */
main.duotone,
main.duotone p,
main.duotone li,
main.duotone a,
main.duotone span,
main.duotone small,
main.duotone label {
  color: #ffffff;
}

/* Make muted text white as requested */
main.duotone .text-muted {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Force slider/hero text to be white - override any grey styling */
main.duotone #section-hero,
main.duotone #section-hero p,
main.duotone #section-hero .lead,
main.duotone #section-hero .subtitle,
main.duotone #section-hero h1,
main.duotone #section-hero h2,
main.duotone #section-hero h3,
main.duotone #section-hero h4,
main.duotone #section-hero h5,
main.duotone #section-hero h6,
main.duotone #section-hero span,
main.duotone #section-hero div {
  color: #ffffff !important;
}

/* Ensure all lead paragraphs in duotone sections are white */
main.duotone .lead {
  color: #ffffff !important;
}

/* Red bracket decoration for key headings without cluttering paragraphs */
main.duotone .duo-section .subtitle,
main.duotone .duo-section h1,
main.duotone .duo-section h2 {
  position: relative;
  display: inline-block;
}

main.duotone .duo-section .subtitle::before,
main.duotone .duo-section .subtitle::after,
main.duotone .duo-section h1::before,
main.duotone .duo-section h1::after,
main.duotone .duo-section h2::before,
main.duotone .duo-section h2::after {
  color: #e22b2b; /* fixed red brackets as requested */
  font-weight: 800;
}

main.duotone .duo-section .subtitle::before,
main.duotone .duo-section h1::before,
main.duotone .duo-section h2::before {
  content: "[";
  margin-right: 8px;
}

main.duotone .duo-section .subtitle::after,
main.duotone .duo-section h1::after,
main.duotone .duo-section h2::after {
  content: "]";
  margin-left: 8px;
}

/* Red button variants */
/* Filled red button */
.btn-red,
a.btn-red,
.btn-main.btn-red,
a.btn-main.btn-red {
  background: #e22b2b !important;
  border-color: #e22b2b !important;
  color: #ffffff !important;
}

.btn-red:hover,
a.btn-red:hover,
.btn-main.btn-red:hover,
a.btn-main.btn-red:hover {
  background: #b91f1f !important; /* slightly darker */
  border-color: #b91f1f !important;
  color: #ffffff !important;
}

/* Outline red button */
.btn-red-line,
a.btn-red-line,
.btn-line.btn-red,
a.btn-line.btn-red {
  background: transparent !important;
  color: #e22b2b !important;
  border: 1px solid #e22b2b !important;
}

.btn-red-line:hover,
a.btn-red-line:hover,
.btn-line.btn-red:hover,
a.btn-line.btn-red:hover {
  background: #e22b2b !important;
  color: #ffffff !important;
  border-color: #e22b2b !important;
}

/* Navigation red styling */
/* Make navbar button red */
header .btn-main {
  background: #e22b2b !important;
  border-color: #e22b2b !important;
}

header .btn-main:hover {
  background: #b91f1f !important;
  border-color: #b91f1f !important;
}

/* Red underlines for navigation menu items - more specific selectors */
#mainmenu li a:before {
  background: #e22b2b !important;
}

#mainmenu li a.menu-item:before {
  background: #e22b2b !important;
}

#mainmenu li a.active:before {
  background: #e22b2b !important;
}

#mainmenu li a:hover:before {
  background: #e22b2b !important;
}

/* Legacy selectors for backwards compatibility */
#mainmenu li a.menu-item:after {
  background: #e22b2b !important;
}

/* Active menu item styling */
#mainmenu li a.menu-item.active:after {
  background: #e22b2b !important;
}

/* Hover state for menu items */
#mainmenu li a.menu-item:hover:after {
  background: #e22b2b !important;
}

/* Make ALL buttons red throughout the site */
/* All filled buttons */
.btn-main,
a.btn-main,
.btn,
a.btn,
input[type="submit"],
input[type="button"],
button {
  background: #e22b2b !important;
  border-color: #e22b2b !important;
  color: #ffffff !important;
}

.btn-main:hover,
a.btn-main:hover,
.btn:hover,
a.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
  background: #b91f1f !important;
  border-color: #b91f1f !important;
  color: #ffffff !important;
}

/* All outline/line buttons */
.btn-line,
a.btn-line,
.btn-outline,
a.btn-outline {
  background: transparent !important;
  color: #e22b2b !important;
  border: 1px solid #e22b2b !important;
}

.btn-line:hover,
a.btn-line:hover,
.btn-outline:hover,
a.btn-outline:hover {
  background: #e22b2b !important;
  color: #ffffff !important;
  border-color: #e22b2b !important;
}

/* Override any specific button classes that might exist */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
  background: #e22b2b !important;
  border-color: #e22b2b !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-danger:hover {
  background: #b91f1f !important;
  border-color: #b91f1f !important;
  color: #ffffff !important;
}

/* Make all icons red */
/* Override id-color class to use red */
.id-color,
i.id-color,
span.id-color {
  color: #e22b2b !important;
}

/* Override text-gradient to use red gradient */
.text-gradient,
i.text-gradient {
  background: linear-gradient(45deg, #e22b2b 0%, #b91f1f 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* All icofont icons should be red by default in duotone theme */
main.duotone [class*="icofont-"],
main.duotone i[class*="icofont-"] {
  color: #e22b2b !important;
}

/* All Font Awesome icons should be red by default in duotone theme */
main.duotone [class*="fa-"],
main.duotone i[class*="fa-"],
main.duotone [class*="fab-"],
main.duotone i[class*="fab-"],
main.duotone [class*="fas-"],
main.duotone i[class*="fas-"],
main.duotone [class*="far-"],
main.duotone i[class*="far-"] {
  color: #e22b2b !important;
}

/* Global red styling for ALL pages (not just duotone) */
/* This ensures legal pages and other linked pages also have red buttons */
body .btn-main,
body a.btn-main,
body .btn,
body a.btn,
body input[type="submit"],
body input[type="button"],
body button {
  background: #e22b2b !important;
  border-color: #e22b2b !important;
  color: #ffffff !important;
}

body .btn-main:hover,
body a.btn-main:hover,
body .btn:hover,
body a.btn:hover,
body input[type="submit"]:hover,
body input[type="button"]:hover,
body button:hover {
  background: #b91f1f !important;
  border-color: #b91f1f !important;
  color: #ffffff !important;
}

/* Global icon colors for ALL pages */
body .id-color,
body i.id-color,
body span.id-color {
  color: #e22b2b !important;
}

body .text-gradient,
body i.text-gradient {
  background: linear-gradient(45deg, #e22b2b 0%, #b91f1f 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}