/* ========================================================================
   EMS Association - "Refined Traditionalist" Palette & Typography
   For Joomla v6, Helix Ultimate, and SP Page Builder Pro
   ======================================================================== */

/* Import Google Fonts: Stoke (Headers) & Poppins (Body) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Stoke:wght@300;400&display=swap');

:root {
  /* Brand Colors */
  --ems-primary: #1E3A8A;       /* Cobalt Blue - Deep, rich, no glare */
  --ems-accent: #F59E0B;        /* True Gold - Warm, excellent contrast */
  --ems-alert: #E11D48;         /* Crisp Red - Critical alerts/urgency */
  
  /* Neutrals */
  --ems-bg-warm: #F3F4F6;       /* Warm Gray - Soft backgrounds */
  --ems-white: #FFFFFF;         /* White - Content blocks/cards */
  --ems-text-main: #374151;     /* Dark Gray for highly readable body text */
}

/* ------------------------------------------------------------------------
   1. GLOBAL & TYPOGRAPHY (Allows PageBuilder overrides)
   ------------------------------------------------------------------------ */
body {
  background-color: var(--ems-bg-warm);
  color: var(--ems-text-main);
  font-family: 'Poppins', sans-serif;
}

/* Default headings use EMS colors, but PageBuilder can now override them */
h1, h2, h3, h4, h5, h6,
.sppb-title-heading,
.sppb-addon-title {
  color: var(--ems-primary); /* Removed !important */
  font-family: 'Stoke', serif;
}

a {
  color: var(--ems-primary);
  transition: color 0.3s ease;
}

a:hover,
a:focus {
  color: var(--ems-accent);
}

/* ------------------------------------------------------------------------
   2. HELIX HEADER & NAVIGATION
   ------------------------------------------------------------------------ */
/* Removed shadow for both static and sticky header states */
#sp-header, 
#sp-header.header-sticky {
  background-color: var(--ems-white);
  box-shadow: none !important; 
  border-bottom: none !important;
}

.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  color: var(--ems-primary) !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a {
  color: var(--ems-accent) !important;
}

/* ------------------------------------------------------------------------
   3. BUTTONS & CALLS TO ACTION (CTAs)
   ------------------------------------------------------------------------ */
/* Primary Action Buttons (True Gold) */
.btn-primary,
.sppb-btn-primary,
.sppb-btn-default {
  background-color: var(--ems-accent) !important;
  border-color: var(--ems-accent) !important;
  color: #111827 !important; /* Very dark text for high WCAG contrast on gold */
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary:hover,
.sppb-btn-primary:hover,
.sppb-btn-default:hover {
  background-color: #D97706 !important; /* Darker Gold on hover */
  border-color: #D97706 !important;
}

/* Secondary / Outline Buttons (Cobalt Blue) */
.btn-secondary,
.sppb-btn-secondary {
  background-color: transparent !important;
  border: 2px solid var(--ems-primary) !important;
  color: var(--ems-primary) !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

.btn-secondary:hover,
.sppb-btn-secondary:hover {
  background-color: var(--ems-primary) !important;
  color: var(--ems-white) !important;
}

/* Alert / Danger Buttons (Crisp Red) */
.btn-danger,
.sppb-btn-danger,
.sppb-btn-warning {
  background-color: var(--ems-alert) !important;
  border-color: var(--ems-alert) !important;
  color: var(--ems-white) !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}

.btn-danger:hover,
.sppb-btn-danger:hover,
.sppb-btn-warning:hover {
  background-color: #BE123C !important; /* Darker Red on hover */
  border-color: #BE123C !important;
}

/* ------------------------------------------------------------------------
   4. SP PAGE BUILDER UTILITY CLASSES
   ------------------------------------------------------------------------ */
/* Add "ems-bg-blue" to the CSS Class field of any SPPB Row/Section */
.ems-bg-blue {
  background-color: var(--ems-primary) !important;
  color: var(--ems-white) !important;
}

.ems-bg-blue h1, 
.ems-bg-blue h2, 
.ems-bg-blue h3, 
.ems-bg-blue .sppb-addon-title,
.ems-bg-blue p {
  color: var(--ems-white) !important;
}

/* Add "ems-bg-white" to rows you want to pop off the warm gray body */
.ems-bg-white {
  background-color: var(--ems-white) !important;
}


/* ------------------------------------------------------------------------
   5. PAGE TITLE BAR
   ------------------------------------------------------------------------ */
#sp-title,
.sp-page-title {
  background-color: var(--ems-primary) !important;
  background-image: none !important; /* Removes any default gradients */
}

/* Force the heading text to be white */
#sp-title h1,
#sp-title h2,
#sp-title .page-header h1,
.sp-page-title h1,
.sp-page-title h2,
.sp-page-title .sppb-title-heading {
  color: var(--ems-white) !important;
}

/* If you have breadcrumbs in the title bar, make them white/gold */
#sp-title .breadcrumb > li,
#sp-title .breadcrumb > li > a,
#sp-title .breadcrumb > li.active > span,
#sp-title .breadcrumb-item,
#sp-title .breadcrumb-item.active {
  color: var(--ems-white) !important;
  opacity: 0.9;
}

#sp-title .breadcrumb > li > a:hover {
  color: var(--ems-accent) !important;
  opacity: 1;
}

/* Make the breadcrumb separator white */
#sp-title .breadcrumb > li + li::before {
  color: var(--ems-white) !important;
  opacity: 0.7;
}

/* Override global H3 color for Page Title Sub-headings */
#sp-title h3.sp-page-title-sub-heading,
.sp-page-title h3.sp-page-title-sub-heading {
  color: var(--ems-white) !important;
  font-family: 'Poppins', sans-serif !important; /* Uses your body font instead of Stoke */
  font-size: 1.1rem; /* Adjust this if you want it larger/smaller */
  font-weight: 400;
  opacity: 0.9;
  margin-top: 5px;
}