/* ==========================================================================
   THEME VARIABLES
   ========================================================================== */
:root {
--primary-color: #0071ce;
  --cta-blue: var(--primary-color);
  --accent-color: #e01f1f;
  --light-bg: #edf6ff;
  --light-red: #fff5f5;
  --mega-color: #f5f7f7;
  --primary-rgb: 0, 113, 206;
  --background-blue: var(--light-bg);
  --background-rgb: 234, 243, 252;
  --border-color: #e0e4e8;
  --accent-gold: #FFD700;
}

/* ==========================================================================
   GLOBAL CONTAINER & LAYOUT CLEANUP
   ========================================================================== */
.site-main {
  padding-top: 2rem;
}

.site-main,
.content-layout-inner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}


@media (max-width: 768px) {
  .site-main,
  .content-layout-inner {
    width: 90%;
  max-width: 90%;
  margin: 0 auto;
  padding-top: 1rem;
  padding-left: .2rem;
  padding-right: .2rem;
}


/* ==========================================================================
   Mobile Containers
   ========================================================================== */


@media (max-width: 768px) {
  .mb-3.border.border-opacity-50.shadow-sm.p-3.rounded {
    border: none !important;       /* Remove border */
    box-shadow: none !important;   /* Remove shadow */
    padding: 0 !important;         /* Remove padding */
    border-radius: 0 !important;   /* Remove rounded corners */
    margin-bottom: 1rem;           /* Keep some spacing below */
  }
}




}
 
/* ==========================================================================
   TYPOGRAPHY AND LINKS
   ========================================================================== */
a {
  color: #0071ce;
  font-weight: 600;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

.small, small {
  font-size: 1em;
  /* text-decoration: underline;
  */;
}

/* Base font for body text */
body {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: #212121;
  verflow-x: hidden;

}
 

/* Headings use Merriweather for strong contrast */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Merriweather', serif;
  font-weight: 700;
  line-height: 1.2;
  color: #212121;
  margin-top: .25em;
  margin-bottom: 0.5em;
}

h1 {
  font-size: 2rem;
}

/* 32px */
h2 {
  font-size: 1.75rem;
}

/* 28px */
h3 {
  font-size: 1.5rem;
}

/* 24px */
h4 {
  font-size: 1.25rem;
}

/* 20px */
h5 {
  font-size: 1.125rem;
}

/* 18px */
h6 {
  font-size: 1rem;
}

/* 16px */


p {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

div p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------
   Base reset — spacing only
-------------------------------------------------- */
ul,
ol {
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------
   Mobile-first defaults
-------------------------------------------------- */

/* Unordered lists: no bullets (cards) */
ul {
  list-style: none;
}

/* Ordered lists: standard numbering */
ol {
  list-style: decimal outside;
  padding-left: 1.5rem;
}

/* Main content only */
#main.site-main ul,
#main.site-main ol {
  margin: 0;
  padding: 0;
}

/* Top-level UL items as cards (mobile) */
#main.site-main ul > li {
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #fff;
}

/* Ordered list spacing */
#main.site-main ol li {
  margin-bottom: 1rem;
}

/* --------------------------------------------------
   Mobile: nested ULs use bullets, not cards
-------------------------------------------------- */
#main.site-main ul li ul {
  list-style: disc outside;
  padding-left: 1.25rem;
  margin-top: 0.5rem;
}

#main.site-main ul li ul li {
  padding: 0;
  margin-bottom: 0.5rem;
  border: none;
  background: none;
}



/* --------------------------------------------------
   Desktop: bullets only, no cards anywhere
-------------------------------------------------- */
@media (min-width: 769px) {

  /* All lists behave normally */
  #main.site-main ul,
  #main.site-main ol {
    list-style-position: outside;
    padding-left: 1.75rem;
    margin: 1rem 0;
  }

  #main.site-main ul {
    list-style: disc;
  }

  /* Kill all card styling */
  #main.site-main ul li,
  #main.site-main ol li {
    padding: 0;
    margin-bottom: 0.75rem;
    border: none;
    border-radius: 0;
    background: none;
    line-height: 1.6;
  }
}

/* --------------------------------------------------
   CTA overrides — always bullets
-------------------------------------------------- */
#main.site-main .cta-body ul {
  list-style: disc outside;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

#main.site-main .cta-body ul li {
  padding: 0;
  margin-bottom: 0.5rem;
  background: none;
  border: none;
  border-radius: 0;
}

/* Mobile-friendly ordered lists */
@media (max-width: 768px) {
  #main.site-main ol {
    list-style: decimal outside;
    padding-left: 1.5rem;   /* space for numbers */
    margin: 0 0 1rem 0;
  }

  #main.site-main ol li {
    margin-bottom: 0.75rem; /* breathing room between steps */
    padding-left: 0.25rem;  /* slight indent from number */
    line-height: 1.5;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* If list items contain paragraphs, normalize spacing */
  #main.site-main ol li p {
    margin: 0;
  }
}




/* ==========================================================================
   ICONS & INTERACTIONS
   ========================================================================== */
.collapse-toggle-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

/* Rotate arrow when the TOGGLE is expanded */
.toggle-arrow[aria-expanded="true"] .collapse-toggle-arrow {
  transform: rotate(180deg);
}


.was-helpful-feedback {
  ;
}

.was-helpful-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0.5rem 0;
}

.btn-feedback {
  font-size: 1.5rem;
  cursor: pointer;
  border: none;
  background: transparent;
}

.like-count {
  font-size: 0.9rem;
  color: #1b1b1b;
}

/* Base button styling if not already defined */
.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  font-weight: 600;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

/* Gray Button */
.btn-gray {
  background-color: #e9ecef;
  color: #212529;
}

.btn-gray:hover {
  background-color: var(--light-bg);
  color: #000;
}

/* Blue Button */
.btn-blue { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; }

.btn-blue:hover { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; filter: brightness(0.95); }

/* Red Button */
.btn-red {
  background-color: #e01f1f;
  color: #fff;
}

.btn-red:hover {
  background-color: #cc0000;
  color: #fff;
}


/* Nuclear fix — kills all JotForm inline padding */
#jotform-container *[style*="padding-bottom"] {
    padding-bottom: 0 !important;
}
 div[id^="JFFrame"] {
    padding-bottom: 0 !important;
}

div[id^="jf_iframe_container"] {
    padding-bottom: 0 !important;
}


/* Top bar container */

.top-bar-bg {
    position: relative;
    z-index: 10010;
}


.top-bar-bg {
  padding: 6px;
  background-color: var(--mega-color);
}

/* Base layout */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-betwen; /* Keep everything left-aligned */
  font-size: 14px;
  color: #1b1b1b;
  line-height: 1.3;
  flex-wrap: wrap;
  gap: 0.5rem; /* Small space between text and link */
}

/* Keep text + arrow glued together */
.top-bar-left-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Icon + text */
.top-bar-left {
  display: flex;
  align-items: center;
}

.top-bar-left-title {
  font-size:1.75rem;
  font-family: 'Merriweather', serif;
  font-weight: 700;
  line-height: 1.2;
  color: #212121;
  margin-top: .25em;
}

.top-bar i.red-icon {
  color: #c00;
  font-size: 18px;
}

.top-bar-text-left {
  font-weight: 500;
}

.top-bar-right-title {
  font-size:1.75rem;
  font-family: 'Merriweather', serif;
  font-weight: 700;
  line-height: 1.2;
  color: #212121;
  margin-top: .25em;

}
/* Link styling */
span.top-bar-right {
    font-size: 14px;
    color: var(--primary-color);
}

.top-bar a:hover {
  text-decoration: underline;
}

/* Styling the link to look like a serious urgent button */
.top-bar-urgent-link {
    display: inline-block;
    background-color: var(--primary-color); /* Bootstrap "Danger" Red for urgency */
    color: #fff !important; /* Force white text for contrast */
    padding: 4px 10px;
    border-radius: 8px;
    border-color:#fff;
    border-width:2px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    

}

/* Hover state for interactivity */
.top-bar-urgent-link:hover {
    background-color: #c9302c;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Defining the eye-catching pulse maneuver */
@keyframes urgent-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(217, 83, 79, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(217, 83, 79, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(217, 83, 79, 0);
    }
}
/* Full-width rail */
.top-bar-full {
  width: 100%;
}
 

/* Push CTA to real right edge */
.top-bar-right-slot {
  margin-left: auto;
}

/* Desktop only */
@media (max-width: 991.98px) {
  .desktop-only {
    display: none !important;
  }
}


@media (max-width: 991.98px) {
  .top-bar-urgent-link {
    display: none !important;
  }
}


/* Desktop: inline layout */
@media (min-width: 1024px) {
  .top-bar {
    flex-direction: row; /* Inline */
    align-items: center;
    gap: 0.5rem; /* Space between text and link */
  }
}

/* Mobile: stack vertically */
@media (max-width: 767.98px) {
  .top-bar {
    flex-direction: column; /* Stack */
    align-items: flex-start; /* Align left */
    gap: 0.25rem; /* Small gap between rows */
  }
}


 
/* Star badge for top-right corner of button */
.star-badge {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  background-color: gold;
  color: black;
  font-size: 1rem;
  padding: 2px 4px;
  border-radius: 50%;
  font-weight: bold;
  line-height: 1;
}
 
/* ============================================================
   HEADER BASE
============================================================ */
header .container {
    padding-left: 1rem;
    padding-right: 1rem;
}



.hamburger-btn img {
    border: none !important;
    box-shadow: none !important;
}

/* Container for contact info */
.cobra-mobile-contact {
    line-height: 1.2;
    padding-left: 12px;
    border-left: 1px solid #dee2e6 !important; 
}

/* Small uppercase label */
.contact-label {
    font-size: 10px;
    font-weight: 700;
    color: #495057; /* Darker gray for better readability */
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}

/* Phone number link */
.contact-phone-link {
    font-size: 15px; /* Slightly smaller to fit better on one line */
    font-weight: 800;
    color: #0056b3; 
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap; /* Prevents the phone number from breaking */
}


/* Mirroring your Nav Font Style */
.nav-item-style {
    font-size: 1.1rem; /* Adjust to match your exact nav font size */
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Subtle Vertical Separator */
.nav-divider {
    width: 1px;
    height: 30px; /* Adjust height to match your nav link height */
    background-color: #dee2e6;
    margin: 0 5px;
}

/* Accent color for the Phone Number */
.text-accent {
    color: #d93025;
}

/* Ensure the border-start is subtle and clean */
.border-start {
    border-color: #dee2e6 !important;
}


/* Icon color */
.contact-phone-link i {
    font-size: 12px;
    color: #d93025; /* Professional red */
}
/* Ensure the wrapper doesn't collapse */
.menu-lang-wrap {
    min-height: 50px;
}

@media (max-width: 767px) {
  .menu-lang-wrap {
    display: flex !important;
    align-items: stretch !important; /* KEY FIX */
    gap: 0.5rem;
  }
}

@media (min-width: 768px) {
  .cta-buttons {
    display: none !important;
  }
}




:root {
    --top-bar-height: 48px;
    --header-height: 72px;
}

/* ============================================================
   UNIFIED MOBILE MENU — CLICKABLE & CLEAN
============================================================ */

/* 1. The Main Panel Container */
/* 1. The Main Panel Container - UPDATED FOR SCROLLING */
#mobileMenuPanel {
    width: 100%;
    /* Remove 'top: 0' and 'bottom: 0' since it is no longer fixed */
    background: #ffffff;
    z-index: 11000;
    
    /* These three lines enable the independent scroll */
    max-height: 80vh; /* Limits height so it doesn't push the whole page */
    overflow-y: auto !important; 
    -webkit-overflow-scrolling: touch; /* Forces smooth momentum scroll on iOS */
    
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 2. The Header (Avatar + Action Link + X) */
.mobile-menu-header {
    background: var(--primary-color, #0071ce);
    position: sticky; 
    top: 0; 
    z-index: 100;
    padding: 10px 15px;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.mobile-menu-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-menu-avatar {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #fff;
    flex-shrink: 0;
}

.mobile-menu-title {
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
}

span.mobile-menu-title-text {
    display: block;
    margin-bottom: .3rem;
}

/* The Clickable Button in Header */
a.insurance-options-link {
    color: #fff !important;
    border: 2px solid #fff !important;
    border-radius: 6px;
    padding: 4px 10px;
    text-decoration: none;
    display: inline-block;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-top: 4px;
}

/* 3. The Menu List - EVERYTHING CLICKABLE */
.mobile-menu-list, 
.mobile-menu-list .sub-menu {
    margin: 0 !important; 
    padding: 0 !important;
    list-style: none !important;
}

/* Top-Level Categories (e.g., COBRA Continuation) */
.mobile-menu-list > li {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-menu-list > li > a {
    display: block;
    padding: 18px 20px;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--primary-color, #0071ce) !important;
    text-decoration: none;
    background-color: #fcfcfc;
    pointer-events: auto !important; /* CRITICAL: Must be clickable */
    cursor: pointer;
}

/* Sub-links (Indented & Clickable) */
.mobile-menu-list .sub-menu li a {
    display: flex !important;
    align-items: center;
    min-height: 48px; /* Touch friendly */
    padding: 12px 20px 12px 35px !important; /* Indented hierarchy */
    font-size: 16px;
    font-weight: 400 !important;
    color: #333 !important;
    text-decoration: none;
    border-bottom: 1px solid #f9f9f9;
    pointer-events: auto !important;
    cursor: pointer;
}

/* Grandchildren (e.g., Short-term items) */
.mobile-menu-list .sub-menu .sub-menu li a {
    font-size: 15px;
}

/* Icons/Images inside links */
.mobile-menu-list a i, 
.mobile-menu-list a img {
    margin-right: 10px;
    max-width: 20px;
}

/* 4. Utilities */
.mobile-menu-close {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.2);
    border: 1px solid #fff;
    color: #fff;
    border-radius: 4px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

[hidden] { display: none !important; }

body.menu-lock { overflow: hidden !important; }
/* ============================================================
   1. GLOBAL HEADER & LAYOUT
============================================================ */
header {
    position: relative !important; /* Ensure this is the anchor */
    z-index: 10001 !important;
    background: #ffffff;
    /* CRITICAL: Ensure overflow is NOT hidden or the menu won't show */
    overflow: visible !important; 
}

/* Force links to stay on ONE line and add the ">" */
.menu-nav-link {
    display: flex !important;
    align-items: center;
    white-space: nowrap !important; /* Fixes the two-line issue */
    position: relative !important;
    z-index: 10005 !important;
    padding: 10px 15px !important;

    font-weight: 700 !important;
    font-size: 22px !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

/* Add the ">" indicator to the end of main nav items */
.menu-nav-link::after {
    content: ">";
    font-size: 12px;
    margin-left: 8px;
    opacity: 0.6;
    transition: transform 0.3s ease;
}

.menu-nav-item:hover .menu-nav-link::after {
    transform: rotate(90deg); /* Optional: turns arrow down on hover */
    color: #0071ce;
}

/* ============================================================
   2. MEGA MENU & SUB-MENU REFINEMENT
============================================================ */
/* Hide the messy WordPress auto-generated lists */
.menu-nav-item.has-mega > .sub-menu {
    display: none !important;
}

.mega-menu, 
.menu-nav-item:not(.has-mega) .sub-menu {
    background-color: var(--mega-color) !important; /* Your specific color */
    border-top: 3px solid #0071ce;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}

/* 2. Reset the Mega Menu base state */
.mega-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10000 !important;
    background-color: #fff !important; /* Or your variable */
    border-top: 3px solid #0071ce;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
    
    /* Start hidden */
    display: none; 
    pointer-events: none;
}

/* 3. This is what the JS toggles - Force it visible */
.mega-menu.is-active {
    display: block !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure the hidden attribute actually works */
.mega-menu[hidden] {
    display: none !important;
}

[hidden] { 
    display: none !important; 
}

/* ============================================================
   3. "GET HELP" DROPDOWN FIX
============================================================ */
.menu-nav-item:not(.has-mega) {
    position: relative !important;
}

.menu-nav-item:not(.has-mega) .sub-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    min-width: 240px;
    padding: 15px 0 !important;
    border-radius: 0 0 8px 8px;
    
    /* Strict Visibility Control to prevent collision */
    display: none !important; 
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

/* Show ONLY when hovering over the "Get Help" item itself */
.menu-nav-item:not(.has-mega):hover > .sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.mega-title:hover {
    color: var(--primary-color); /* Uses your red accent color from :root */
    text-decoration: none; 
    transition: color 0.2s ease-in-out;
}

/* SUB-MENU LINKS */
.sub-menu-item a {
    display: block !important;
    padding: 12px 25px !important;
    color: #1b1b1b !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.sub-menu-item a:hover {
    background-color: rgba(0, 113, 206, 0.05) !important;
    color: #0071ce !important;
    padding-left: 30px !important;
}

@keyframes menuFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   MEGA MENU VISUAL POLISH
============================================================ */

/* Inner container breathing room */
.mega-menu-inner {
    padding-top: 2.25rem !important;
    padding-bottom: 2.5rem !important;
    max-width: 1200px;
    margin: 0 auto;
}

/* Each column */
.mega-col {
    min-width: 240px;
    position: relative;
}




/* Section headers */
.mega-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #222;
    margin-bottom: 0.75rem !important;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid rgba(0, 113, 206, 0.15);
}

/* Mega menu links */
.mega-link {
    font-size: 0.95rem;
    font-weight: 500;
    padding: 6px 0 6px 14px;
    margin-bottom: 2px !important;
    position: relative;
    transition: all 0.2s ease;
}

/* Subtle left marker instead of bullets */
.mega-link {
    text-decoration: none;
    color: #1b1b1b;
    transition: color 0.2s ease;
}

.mega-link:hover {
    color: var(--primary-color);
}

.mega-link:hover::before {
    opacity: 0.9;
}

/* Space between section blocks */
.mega-col + .mega-col {
    padding-left: 1.5rem;
}



/* =========================================================
   Mega Menu Promo — Refined Slab
   ========================================================= */

.mega-promo-column {
  display: flex;
  align-items: stretch;
}

/* Core container */
.mega-promo-content {
  position: relative;
  padding: 1rem  1rem 2rem;
  min-height: 100%;

  background: var(--cta-blue);
  color: #ffffff;

  border-radius: 8px;

  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.32);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Headline — ALL CAPS for emphasis */
.mega-promo-title {
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  color: #ffffff;
}

/* Body copy */
.mega-promo-content p {
  font-size: 0.98rem;
  line-height: 1.55;
  margin-bottom: 0.75rem;
  color: rgba(255, 255, 255, 0.95);
}

/* Inline emphasis */
.mega-promo-content strong {
  font-weight: 800;
  color: #ffffff;
}

/* CTA — strong but clean */
.mega-promo-content a {
  align-self: flex-start;
  padding: 0.5rem .5rem;
  background: #ffffff;
  color: var(--cta-blue);
  font-size: 0.95rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top:2em;

  border-radius: 8px;
  text-decoration: none;

  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.35);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

/* CTA hover */
.mega-promo-content a:hover,
.mega-promo-content a:focus {
  transform: translateY(-2px);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.45);
}

/* Accent bar using brand red */
.mega-promo-content::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: var(--accent-color);
  border-radius: 0 0 20px 20px;
}

/* Mobile */
@media (max-width: 768px) {
  .mega-promo-content {
    padding: 1.8rem 1.6rem 2rem;
    border-radius: 16px;
  }

  .mega-promo-title {
    font-size: 1.25rem;
  }
}


 

/* Ensure the mega menu inner container handles the 4th column correctly */
.mega-menu-inner {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* Forces columns to stay side-by-side */
    justify-content: flex-start !important;
}

/* Style the new promo column */
.mega-promo-column {
    flex: 0 0 280px !important; /* Fixed width for the promo */
    margin-right: 2rem;
    padding-right: 2rem;
    border-right: 1px solid rgba(0, 0, 0, 0.08); /* Matches your soft dividers */
}

/* Remove the divider from the promo on mobile if necessary */
@media (max-width: 991px) {
    .mega-menu-inner {
        flex-direction: column !important;
    }
    .mega-promo-column {
        flex: 1 1 auto !important;
        margin-right: 0;
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        margin-bottom: 2rem;
    }
}


/* Prevent background scrolling when mobile menu is open */
html.menu-lock, body.menu-lock { overflow: hidden; }

/* Responsive visibility rules */
@media (max-width: 991.98px) {
  .desktop-only { display: none !important; }   /* hide desktop nav components */
  .mobile-only  { display: block !important; }  /* show mobile nav components */
  .hamburger-btn { display: inline-flex !important;border: 0px;background-color:#fff;} /* show hamburger on mobile */
  .cta-buttons { justify-content: center !important; } /* center CTAs + burger */
}
@media (min-width: 992px) {
  .mobile-only  { display: none !important; }   /* hide mobile menu & parts */
  .desktop-only { display: block !important; }  /* show desktop nav */
  .hamburger-btn { display: none !important; }   /* hide hamburger on desktop */
  .cta-buttons { justify-content: flex-end !important; } /* right-align CTAs */
}

@media (min-width: 992px) {
  .header-border-container {
    border-bottom: 1px solid #ccc !important;
    padding-bottom: 1em; /* or whatever spacing you want */
  }
}

@media (max-width: 991.98px) {
  .header-border-container {
  border-bottom: 1px solid #999 !important;
}

}


.hero-back {
  position: relative;
  background-image: url(/wp-content/uploads/2026/01/Hero_BG_blue.png) !important;
  background-size: cover !important;
  background-position: center right !important;
  background-repeat: no-repeat !important;
  display: block !important;
}

/* Lighten background image */
.hero-back::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

/* Ensure content stays above overlay */
.hero-back > * {
  position: relative;
  z-index: 1;
}

.hero-image-col {
  position: relative;
  padding: 0;
  display: flex;
}

/* Right-column foreground image */
.hero-figure-bg {
  width: 100%;
  height: 100%;
  background-image: url("/wp-content/uploads/2026/01/Hero_People1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

/* Force columns to match tallest content */
.hero-back .row {
  align-items: stretch;
}

.hero-image-col {
  flex-direction: row;
}

/* .row.align-items-stretch > [class*="col-"] {
  display: flex;
  flex-direction: column;
} */


/* ==========================================================================
   GRIDS
   ========================================================================== */

.cobra-button-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Desktop */
  gap: 1rem;
  max-width: 1024px;
  margin: 0.75rem 0;
}

/* Tablet */
@media (max-width: 1024px) {
  .cobra-button-grid {
    grid-template-columns: repeat(2, 1fr);
}

}

/* Mobile */
@media (max-width: 640px) {
  .cobra-button-grid {
    grid-template-columns: 1fr;
  /* Stack cards vertically */;
}

}

 
.cobra-button-card {
  display: block;
  background-color: #fff5f5;
  color: #1b1b1b;
  /* base text color */
  border-radius: 12px;
  padding: 1rem 1.25rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.cobra-button-card:hover {
  background-color: #ffeaea;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.cobra-button-card .title {
  font-size: 1rem;
  font-weight: 700;
  color: #e01f1f;
  /* bold red headline */
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cobra-button-card .title i {
  font-size: 1rem;
  opacity: 0.85;
  color: #e01f1f;
  /* icon color matches your brand red */;
}

.cobra-button-card .desc {
  font-size: 0.95rem;
  color: #444;
  /* improved readability on light red */
  line-height: 1.5;
  margin-bottom: 0;
}

/* Mobile Tweaks */
@media (max-width: 768px) {
  .cobra-button-grid {
    gap: 0.75rem;
}

.cobra-button-card {
  padding: 1rem;
    margin-bottom: 1rem;
}

.cobra-button-card .title {
  font-size: 1.05rem;
}

.cobra-button-card .desc {
  font-size: 0.95rem;

}

}


.cobra-alt-grid {
  display: grid;
  gap: 1.5rem;
  max-width: 700px;
  margin: 0.75rem auto;
  padding: 0 1rem;
}

.cobra-alt-card {
  display: block;
  background-color: #eaf3fc;
  border-left: 6px solid #0073cf;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  color: #1b1b1b;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.cobra-alt-card:hover {
  background-color: #d8ecff;
  box-shadow: 0 6px 16px rgba(0, 115, 207, 0.15);
  text-decoration: none;
}

.cobra-alt-card .heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: #003366;
  margin-bottom: 0.5rem;
}

.cobra-alt-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #1b1b1b;
}

@media (min-width: 769px) {
  .cobra-alt-grid {
    margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

}

@media (max-width: 768px) {
  .cobra-alt-card {
    padding: 1rem 1.25rem;
  border-left-width: 4px;
}

.cobra-alt-grid {
  padding: 0 1rem;
  gap: 1rem;
}

.cobra-alt-card .heading {
  font-size: 1.05rem;
}

.cobra-alt-card p {
  font-size: 0.95rem;
}

}

/* Make .plan-topper flush to cta-column edges */



/* Grid */
.state-plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .state-plan-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .state-plan-cards {
    gap: 1.5rem;
  }
}


/* Card */
.state-plan-card {
  background: var(--light-bg);
  border: 1px solid var(--primary-color);
  border-radius: 8px 8px 0 0;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  overflow: hidden;
}

/* Top label */
.state-plan-topper {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: -1rem -1.25rem 0.75rem;
  padding: 0.4rem 0.75rem;
  background: #fff;
  border-bottom: 1px solid var(--primary-color);
}

/* Feature line (replaces <strong>) */
.state-plan-feature {
  font-weight: 600;
  color: #1b1b1b;
  margin-bottom: 0.35rem;
}

/* Body copy spacing */
.state-plan-card > div:last-child {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Links */
.state-plan-card a {
  font-weight: 600;
  color: var(--primary-color);
  text-decoration: none;
}

.state-plan-card a:hover {
  text-decoration: underline;
}



/* Container & Layout */
.insurance-container {
  margin: 20 auto;
}

.section-title {
  border-bottom: 3px solid var(--primary-color);
  padding-bottom: 10px;
  margin: 40px 0 20px;
}

/* The Grid System - Adjusted to min 340px for wider cards */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 25px;
  margin-bottom: 50px;
  justify-content: center;
}

/* 1. Base Styles (Mobile First) */
.plan-grid-2 {
  display: grid;
  /* On mobile, cards take up 1 column (100% width) */
  grid-template-columns: 1fr; 
  gap: 18px;
  margin-bottom: 50px;
}

.plan-grid-2 > div {
  /* Cards are full width on mobile by default */
  width: 100%;
  box-sizing: border-box; 
}

/* 2. Desktop Styles (Screens wider than 768px) */
@media (min-width: 768px) {
  .plan-grid-2 {
    /* Creates as many 300px columns as will fit, then stops */
    grid-template-columns: repeat(auto-fill, 300px);
    /* Keeps the grid aligned to the left */
    justify-content: start;
  }

  .plan-grid-2 > div {
    /* Prevents cards from growing beyond 300px on desktop */
    max-width: 300px;
  }
}



/* Individual Cards */
.plan-card {
  background: #fff;
  
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* Topper Bar - Centered */
.plan-topper {
  background: var(--primary-color);
  color: white;
  padding: 12px 15px;
  font-size: 0.85rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

.plan-topper i {
  color: var(--accent-gold);
  margin-left: 8px;
  vertical-align: middle;
}

/* Urgent / COBRA Card Modifier */
.plan-card.plan-urgent {
  border-color: var(--accent-color);
}

.plan-card.plan-urgent .plan-topper,
.plan-card.plan-urgent .plan-btn {
  background-color: var(--accent-color);
}

/* Content Area - Centered */
.plan-content {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.plan-card-logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.plan-logo {
  max-height: 100%;
  max-width: 150px;
  object-fit: contain;
}

.plan-card h3 {
  font-size: 1.25rem;
  margin: 0 0 15px 0;
  color: #000;
}

.plan-card p {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #555;
  margin-bottom: 25px;
  flex-grow: 1; 
}

/* Modernized Button */
.plan-btn {
  display: inline-block;
  background-color: var(--primary-color);
  color: white !important;
  text-decoration: none;
  text-align: center;
  padding: 12px 20px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: opacity 0.2s;
  width: 80%;
  max-width: 280px;
}

.plan-btn:hover {
  opacity: 0.9;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .plan-grid {
    grid-template-columns: 1fr;
  }
  .plan-grid-2 {
    grid-template-columns: 1fr;
  }
  
  .plan-btn {
    width: 100%;
  }
}


/* Reduce spacing between cards on single-state */
.single-state.plan-cards {
  gap: 0.5rem;
}
.single-state .plan-card.cta-column {
  margin-bottom: 0.5rem; /* optional tighter vertical spacing */
}

/* Color variants */
.highlighted-red.cta-column {
  background-color: #fff5f5;
}
.highlighted-red.cta-column::before {
  background-color: #e01f1f; /* fake left border */
}
.highlighted-red.cta-column .plan-topper {
  background-color: #e01f1f;
  color:#ffffff;
}

.highlighted-blue.cta-column {
  background-color: #0071ce;
}
.highlighted-blue.cta-column::before {
  background-color: #0071ce; /* fake left border */
}
.highlighted-blue.cta-column .plan-topper {
  background-color: #0071ce;
  color:#ffffff;
}

/* Mobile: stack to 1 column */
@media (max-width: 640px) {
  .single-state.plan-cards {
    grid-template-columns: 1fr !important;
  }
  .single-state.plan-cards .wide {
    grid-column: span 1; /* revert to single column on mobile */
  }
}


/* Reset default list behavior */
.state-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;

  /* Mobile first: one full-width item per row */
  grid-template-columns: 1fr;
  gap: 14px;
}

/* Tablet: two columns */
@media (min-width: 576px) {
  .state-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: four columns */
@media (min-width: 992px) {
  .state-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.state-grid li a {
  display: block;
  padding: 14px 18px;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-decoration: none;
  font-size: 17px;
  line-height: 1.4;
  color: #0056a3;
}

.state-grid li a:hover {
  background: #f5f5f5;
  border-color: #ccc;
}
/* Remove bullets everywhere */
.state-grid {
  list-style: none !important;
}

/* Extra safety for themes that reapply bullets at breakpoints */
.state-grid li {
  list-style: none !important;
}


 /* ==========================================================================
   STEPS TIME LINE HOMEPAGE
      ========================================================================== */

/* Container styling */
.cobra-steps-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .cobra-steps-grid.steps-5 {
    grid-template-columns: repeat(6, 1fr);
  }

  .cobra-steps-grid .step-wide {
    grid-column: span 3;
  }

  .cobra-steps-grid .step:not(.step-wide) {
    grid-column: span 2;
  }
}


/* Card styling */
.cobra-steps-grid .step {
  background-color: var(--mega-color);
  border: 1px solid #ddd;
  padding: 1.5rem;
  border-radius: 6px;
}

.cobra-steps-grid .step h4 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.cobra-steps-grid .step p {
  color: #1b1b1b;
}

/* Step titles */
.cobra-steps .step h4 {
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

/* Paragraphs */
.cobra-steps p {
  color: #1b1b1b;
}
@media (min-width: 768px) {
  /* Let the row control height */
  .cobra-steps {
    display: flex;
    align-items: stretch;
  }

  /* Columns stretch but do NOT stack content */
  .cobra-steps > .col-md-4 {
    display: flex;
    flex-direction: row;
  }

  /* Card fills column height */
  .cobra-steps .step {
    flex: 1 1 auto;
    display: block;
  }
}

.cobra-steps .step p:last-child {
  margin-top: auto;
}



@media (max-width: 768px) {
  /* Remove all step card styling */
  .cobra-steps .step {
    background-color: transparent;
    border: none;
    padding: 0;
    margin-bottom: 1rem; /* optional, keep minimal spacing */
    border-radius: 0;
    box-shadow: none;
    transition: none;
  }


  /* Remove hover effect */
  .cobra-steps .step:hover {
    box-shadow: none;
  }

  /* Reset step titles */
  .cobra-steps .step h4 {
    color: inherit;
    font-size: inherit;
    margin-bottom: 0.25rem; /* optional */
  }

  /* Reset paragraph styling */
  .cobra-steps p {
    color: inherit;
    line-height: normal;
  }
}



/* ==========================================================================
   FAQ BLOCK STYLING (Scoped to .faqs)
   ========================================================================== */
.faqs {
  margin-bottom: 2rem;
}

.faqs h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.faqs .accordion {
  width: 100%;
}

.faqs .accordion-item {
  border-radius: 6px;
  margin-bottom: 1rem;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.faqs .accordion-button {
  padding: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #003366;
  background-color: #f5f9ff;
  border-radius: 0;
  transition: background-color 0.2s;
}

.faqs .accordion-button:not(.collapsed) {
  background-color: #dbeaff;
}

.faqs .accordion-body {
  padding: 1rem;
  font-size: 0.95rem;
  background-color: #fff;
  color: #1b1b1b;
}

.faqs .accordion-button br,
.faqs .accordion-header br,
.faqs p:empty {
  display: none;
}

.faqs .accordion-header {
  margin: 0;
  padding: 0;
}

.faqs .accordion-button,
.faqs .accordion-body {
  word-break: break-word;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.testimonial-card {
  background: #ffffff;
  border: 1px solid #e3e3e3;
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.05);
  max-width: 600px;
}

.testimonial-card .rating i {
  font-size: 1.25rem;
  margin: 0 0.1rem;
  color: #ffc107;
  /* Bootstrap warning */;
}

.testimonial-card blockquote {
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #1b1b1b;
}

.testimonial-card blockquote-footer {
  font-size: 0.95rem;
  color: #6c757d;
  /* Bootstrap secondary */
  margin-top: 0.5rem;
}

.testimonial-card p.mb-3::before,
.testimonial-card p.mb-3::after {
  content: '“';
  font-family: Georgia, serif;
  font-size: 2rem;
  vertical-align: top;
  line-height: 1;
  margin: 0 0.2rem;
  color: #c3c3c3;
}

.testimonial-card p.mb-3::after {
  content: '”';
}

/* ==========================================================================
   CONTAINERS & LAYOUT
   ========================================================================== */
 
.content-layout-inner {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

.directory .row.py-2 > .col-6:nth-child(n+2) {
  padding-top: 1rem;
  border-top: none !important;
}

.state-head {
  display: none !important;
}

}

}

/* ==========================================================================
   CONTENT LAYOUT BLOCK used on PAGE content Type
   ========================================================================== */

.content-layout-inner {
  max-width: 80%;
  width: 100%;
}




.content-layout-outer.alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0;
  padding-right: 0;
  width: 100vw;
  /* Force full viewport width */
  position: relative;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
}

.content-layout-background {
  width: 100%;
}

.equal-height .row {
  display: flex;
  flex-wrap: wrap;
}

.equal-height .equal-fill {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/* === COBRA Table base === */
.cobra-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 16px;
  table-layout: fixed;               /* helps wrapping and consistent widths */
  word-break: normal;
}

.cobra-table th,
.cobra-table td {
  padding: 0.75rem;
  text-align: left;
  border: 1px solid #ddd;
  vertical-align: top;               /* long labels/values align nicely */
}

.cobra-table th {
  background-color: var(--primary-color, #0071ce);
  color: #fff;
}

.cobra-table tbody tr:nth-child(even) {
  background-color: #f7f9fc;
}

@media screen and (max-width: 768px) {
  .cobra-table,
  .cobra-table thead,
  .cobra-table tbody,
  .cobra-table th,
  .cobra-table td,
  .cobra-table tr {
    display: block;
  }

  .cobra-table thead {
    display: none;
  }

  .cobra-table tr {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    padding: 0.5rem;
    border-radius: 8px;
    background-color: #fff;
  }

  .cobra-table td {
    display: flex;                   /* Keep label and value on same row */
    flex-wrap: wrap;                  /* Allow text to wrap to next line if too long */
    justify-content: space-between;   /* Push value to the right */
    align-items: flex-start;
    gap: 0.5rem;
    border: none;
    border-bottom: 1px solid #eee;
    padding: 0.5rem 0.5rem;
    text-align: left;
    white-space: normal;              /* Ensure wrapping is allowed */
  }

  .cobra-table td:last-child {
    border-bottom: none;
  }

  .cobra-table td::before {
    content: attr(data-label);
    font-weight: 600;
    flex: 1 1 45%;                     /* Label takes ~45% width */
    min-width: 120px;                  /* Prevent labels from being too squished */
  }

  .cobra-table td {
    flex: 1 1 55%;                     /* Value takes remaining space */
  }
}



@media screen and (max-width: 768px) {
  .cobra-table,
  .cobra-table thead,
  .cobra-table tbody,
  .cobra-table th,
  .cobra-table td,
  .cobra-table tr {
    display: block;
    box-sizing: border-box;
  }

  .cobra-table thead {
    display: none;
  }

  .cobra-table tr {
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    padding: 0.75rem;
    border-radius: 8px;
    background-color: #fff;
  }

  .cobra-table td {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* ✅ Fix alignment */
    align-items: flex-start;
    gap: 0.5rem;
    border: none;
    border-bottom: 1px solid #eee;
    padding: 0.5rem 0;
    text-align: left;
    white-space: normal;
  }

  .cobra-table td:last-child {
    border-bottom: none;
  }

  .cobra-table td::before {
    content: attr(data-label);
    font-weight: 600;
    flex: 1 1 100%; /* ✅ Label on its own line for clarity */
    margin-bottom: 0.25rem;
  }

  /* Category cell styling */
  .cobra-table td[data-label="Category"]::before {
    display: none;
  }

  .cobra-table td[data-label="Category"] {
    font-weight: 700;
    width: 100%;
    display: block;
    margin-bottom: 0.5rem;
  }
}



/* Override WP styles */

.wp-block-group {
  padding: 2rem 2rem 0 2rem;
  border-radius: 10px;
}

.wp-block-group {
  padding: 2rem;
  border-radius: 10px;
}

/* Increase space between Gutenberg columns on this FAQ/resources block */
.wp-block-columns.gx-5 {
    column-gap: 3rem;          /* Horizontal spacing */
    row-gap: 2rem;             /* Vertical spacing if stacked */
}

/* If WP overrides it on desktop, force it */
@media (min-width: 768px) {
    .wp-block-columns.gx-5 {
        gap: 4rem !important;
    }
}



/* ==========================================================================
   Directory – diplomatic, serious, accessible
   Assumes brand variables exist:
     --primary-color: #0071ce (buttons, borders, accents)
     --background-blue: #eaf3fc   (backgrounds)
   ========================================================================== */

.directory {
  --dir-radius: 14px;
  --dir-divider: 1px solid rgba(0,0,0,.08);
  --dir-shadow: 0 6px 18px rgba(0,0,0,.06);
  --dir-icon-size: 3rem;
  --dir-muted: #6c757d;
  --dir-ink: #212529;
  background: #fff;
  border: var(--dir-divider);
  border-radius: var(--dir-radius);
  box-shadow: var(--dir-shadow);
  overflow: hidden;
}

/* Header strip (desktop) */
.directory .directory-heading {
  color: var(--primary-color, #0071ce);         /* CTA titles use dark blue */
  font-weight: 700;
  line-height: 1.2;
}

.directory .directory-secondary {
  display: inline-block;
  margin-top: .15rem;
  font-size: .875rem;
  color: var(--dir-muted);
  font-weight: 500;
}

/* Group label band */
.directory .directory-group-label .bg-cobra {
  background: var(--background-blue, #eaf3fc);  /* light brand blue */
  color: var(--dir-ink);
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding-top: .45rem;
  padding-bottom: .45rem;
}

.directory .directory-group-label .text-success-emphasis {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

/* Rows */
.directory .directory-row {
  position: relative;
  padding-top: .75rem;
  padding-bottom: .75rem;
  gap: .5rem;
  transition: background-color .2s ease, box-shadow .2s ease;
  border-bottom: var(--dir-divider);
}
.directory .directory-row:last-of-type {
  border-bottom: 0;
}

.directory .directory-row:hover {
  background: var(--background-blue, #eaf3fc);
}

/* State column */
.directory .state-name a {
  color: var(--dir-ink);
  text-decoration: none;
}
.directory .state-name a:hover {
  color: var(--primary-color, #0071ce);
  text-decoration: underline;
}
.directory small.text-muted {
  color: var(--dir-muted) !important;
}

/* CTA titles – only inside the Directory (request: serious, diplomatic) */
.directory .cta-title,
.directory .directory-heading {                 /* header cells already scoped to directory */
  color: var(--primary-color, #0071ce);
}

/* Only make H2s inside the Directory’s CTA zones dark blue (not global H tags) */
.directory .cta-column h2,
.directory .cta-wide h2 {
  color: var(--primary-color, #0071ce);
}

/* Icon system: replace inline styles with classes for consistency */
.directory .icon {
  font-size: var(--dir-icon-size);
  line-height: 1;
}
.directory .icon-ok      { color: var(--primary-color, #0071ce); }
.directory .icon-na      { color: #595c5f80; }
.directory .icon-warn    { color: #f59f00; }      /* Bootstrap-ish warning */
.directory .icon-danger  { color: #dc3545; }      /* Bootstrap danger */

/* Links inside action cells */
.directory .directory-row a {
  color: var(--primary-color, #0071ce);
  text-decoration-color: rgba(0,113,206,.3);
}
.directory .directory-row a:hover {
  text-decoration-color: currentColor;
}

/* Pills & badges (optional, diplomatic tone) */
.directory .pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .5rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: .75rem;
  font-weight: 600;
}
.directory .pill.ok {
  color: var(--primary-color, #0071ce);
  background: color-mix(in srgb, var(--background-blue, #eaf3fc) 70%, white);
}
.directory .pill.na {
  color: #6c757d;
  background: #f5f5f5;
}

/* Buttons (brand) */
.directory .btn-blue,
.directory .btn.btn-blue {
  background-color: var(--primary-color, #0071ce);
  border-color: var(--primary-color, #0071ce);
  color: #fff;
}
.directory .btn-blue:hover,
.directory .btn.btn-blue:hover {
  filter: brightness(.95);
  color: #fff;
}

/* Compact mobile refinements */
@media (max-width: 767.98px) {
  .directory {
    --dir-icon-size: 2.5rem;
    border-radius: 12px;
  }
  .directory .directory-row {
    padding-top: .65rem;
    padding-bottom: .65rem;
  }
  .directory .d-md-none.fw-bold {               /* mobile labels for CTA columns */
    color: var(--primary-color, #0071ce);
  }
  .directory .state-name { margin-bottom: .25rem; }
}


.navbar {
  background-color:var(--primary-color) !important;
}

/* ==========================================================================
   ADMIN DIRECTORY BLOCK
   ========================================================================= */

/* Directory wrapper */
.admin-directory {
  --bs-card-border-radius: 0.75rem;
}

/* Individual card style */
.admin-card {
  transition: all 0.2s ease-in-out;
  background-color: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  height:160px;
}

.admin-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Logo styling */
.admin-logo img {
  max-height: 60px;
  object-fit: contain;
  opacity: 0.9;
}

/* Text cleanup */
.admin-name {
  font-weight: 600;
  font-size: 1.125rem;
}

.admin-phone,
.admin-location {
  font-size: 0.875rem;
  color: #555;
}

/* Button style */
.admin-website.btn {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  border-radius: 20px;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
   
    
    /* CSS for the menu flag icon */
    .menu-flag-icon {
      height: 18px;
      margin-right: 6px;
      vertical-align: middle;
      display: inline-block;
    }

/* ==========================================================================
   STATE PAGES
   ========================================================================== */
.money-highlight-box {
    padding: 1.25rem 1.5rem;
    border-radius: 6px;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex-direction: row;
}



/* ==========================================================================
   BREADCRUMB Styles
   ========================================================================== */

.breadcrumb-wrapper {
  font-size: 0.85rem;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  scrollbar-width: none; /* Firefox */
  position: relative;
}

.breadcrumb-wrapper::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

#main.site-main .breadcrumb-wrapper ol {
  display: inline-flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0.4rem;
  flex-wrap: nowrap;
}

.breadcrumb-wrapper li {
  white-space: nowrap;
  display: flex;
  align-items: center;
  color: #555;
  font-weight: 500;
}

.breadcrumb-wrapper li a {
  color: #0073aa;
  text-decoration: none;
}

.breadcrumb-wrapper li a:hover {
  text-decoration: underline;
}

.breadcrumb-wrapper li:not(:last-child)::after {
  content: "\203A";  /* Unicode character for › */
  margin: 0 0.4rem;
  color: #aaa;
}


.breadcrumb-wrapper li:last-child {
  font-weight: 600;
  color: #111;
}

/* MOBILE BREADCRUMB ADJUSTMENTS */
@media (max-width: 480px) {
  .breadcrumb-wrapper {
    font-size: 0.75rem;
    padding-right: 4px;
  }

  #main.site-main .breadcrumb-wrapper ol {
    gap: 0.2rem;
  }

  .breadcrumb-wrapper li:not(:last-child)::after {
    margin: 0 0.2rem;
  }

  .breadcrumb-wrapper li {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .breadcrumb-wrapper li span,
  .breadcrumb-wrapper li a span {
    display: inline-block;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
}





/* ==========================================================================
   KB Styles
   ========================================================================== */

/* === Question Style === */
.question {
  position: relative;
  font-size: 1.4rem;
  font-weight: 600;
  color: #202020;
  margin: 1.5rem 0 1rem;
  padding-left: 2.2rem; /* tighter alignment */
  line-height: 1.5;
}

.question::before {
  content: "\f128";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #fff;
  background: linear-gradient(145deg, #e53935, #c62828);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-right:20px;
  font-size: 0.85rem;
  position: absolute;
  left: 0;
  top: 0.25rem; /* ↓ pushes icon slightly down for perfect baseline alignment */
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

/* Hover effect for clarity */
.question:hover::before {
  transform: scale(1.05);
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}


/* Q&A container */
.kb-qa {
  border: 1px solid #dbe3f0;           /* light blue-gray */
  border-radius: 6px;
  background: #ffffff;
  margin: 1.25rem 0 2rem;
}

/* Question bar */
.kb-qa__question {
  padding: 12px 16px;
  border-bottom: 1px solid #dbe3f0;
  background: #eaf3fc;                 /* subtle blue tint */
  color: #1b1b1b;                       /* neutral dark */
  font-weight: 600;
  font-size: 1.125rem;                  /* a bit larger than body */
  line-height: 1.4;
}

/* Add “Q:” label visually, no extra markup */
.kb-qa__question::before {
  content: "Q: ";
  color: #003366;                       /* federal blue */
  font-weight: 700;
}

/* Answer body */
.kb-qa__answer {
  padding: 16px;
}

/* Normalize any existing .answer styling inside the card */
.kb-qa .answer {
  margin: 0;
  padding: 0;                           /* remove prior alert padding */
  background: transparent;              /* kill any prior alert bg */
  border: 0;                            /* kill any left border */
  color: #2a2a2a;
  line-height: 1.6;
  font-size: 1rem;
}

/* Optional: add a subtle “A:” label before the first paragraph */
.kb-qa__answer .answer > *:first-child::before {
  content: "A: ";
  color: #003366;
  font-weight: 700;
}

 

/* New card-style answer */
.answer {
font-size: 1.1rem;
    color: #1b1b1b;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    background: #f9f9fc;
    padding: 0.75rem 1rem;
    border-left: 3px solid #e01f1f;
    border-radius: 4px;
}

/* Mobile touch-ups */
@media (max-width: 600px) {
  .question {
    font-size: 1.1rem;
    padding-left: 1.75rem;
  }

  .question::before {
    font-size: 1.1rem;
    top: 0.1rem;
  }

  .answer {
    font-size: 0.95rem;
    padding: 0.9rem 1rem;
    border-left: 0px;
  }
}
/* Hide right CTA column on Question/Answer only on mobile */
@media (max-width: 767px) {
  .hide-mobile-cta {
    display: none !important;
  }
}




/* CTA Button */

.next-button {
    background-color: #e01f1f;
    color: #fff !important;
    position: relative;
    display: inline-block;
    padding: 0.5rem 20px 0.5rem 3.5rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    text-decoration: none;
    transition: background-color 0.2s ease;
}



.next-button:hover {
  background-color: #b91e24;
  transform: translateY(-2px);
}

/* Base circle behind icon */
.next-button::before {
    content: '';
    position: absolute;
    left: .9rem;
    top: 50%;
    transform: translateY(-50%);
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 3px solid #f8f9fa;
    background-color: rgba(255, 255, 255, 0.2);
}

/* Bootstrap Icon for NEXT */
.next-button.is-next::after {
  content: '\F19D'; /* bi-arrow-right */
  font-family: 'bootstrap-icons';
  font-size: 15px;
  color: #fff;
  font-weight: normal;
  position: absolute;
  left: 21px;
  top: 50%;
  transform: translateY(-50%);
}
/* Bootstrap Icon for View Health Plans */
.next-button.is-health::after {
  content: '\F71E'; /* bi-shield-plus */
  font-family: 'bootstrap-icons';
  font-size: 15px;
  color: #fff;
    font-weight: normal;
  position: absolute;
  left: 21px;
  top: 50%;
  transform: translateY(-50%);
}


/* Bootstrap Icon for VIDEO */
.next-button.is-video::after {
  content: '\f4f4'; /* bi-play */
  font-family: 'bootstrap-icons';
  font-size: 15px;
  color: #fff;
    font-weight: normal;
  position: absolute;
  left: 21px;
  top: 50%;
  transform: translateY(-50%);
}

.next-button.is-directory::after {
  content: '\F4D0'; /* bi-journal-text */
  font-family: 'bootstrap-icons';
  font-size: 15px;
  color: #fff;
    font-weight: normal;
  position: absolute;
  left: 21px;
  top: 50%;
  transform: translateY(-50%);
}
/* Bootstrap Icon for Survey */
.next-button.is-survey::after {
  content: '\f26e'; 
  font-family: 'bootstrap-icons';
  font-size: 15px;
  color: #fff;
    font-weight: normal;
  position: absolute;
  left: 21px;
  top: 50%;
  transform: translateY(-50%);
}

/* Tweak for small screens */
@media (max-width: 480px) {
  .next-button {
    padding: 14px 16px 14px 44px;
    font-size: 1rem;
    line-height: 1.2;
  }

  .next-button::before {
    left: 14px;
    width: 22px;
    height: 22px;
  }

  .next-button.is-survey::after {
    font-size: 11px;
    left: 19px;
  }
}


/* Hide icons on mobile */
@media (max-width: 767px) {
  .next-button::after {
    content: none !important;
  }
}

@media (max-width: 767.98px) {
  .mt-md-only-3 {
    margin-top: 2rem !important; /* mt-3 */
  }
}

@media (min-width: 768px) {
    .extra-gap {
        --bs-gutter-x: 5rem; /* Adjust this value as needed */
    }
}


/* ========== FAQ Block Cleanup ========== */

.sas-faq-block {
  font-family: inherit;
  font-size: 1rem;
}

.sas-faq-block .accordion-button {
  font-size: 1rem;
  font-weight: 600;
  color: #003366;
  padding: 0.75rem 1rem;
  background-color: #f5f9ff;
  transition: background-color 0.2s;
}

.sas-faq-block .accordion-button:not(.collapsed) {
  background-color: #dbeaff;
}

.sas-faq-block .accordion-body {
  font-size: 0.95rem;
  color: #1b1b1b;
  padding: 0.75rem 1rem;
  background-color: #fff;
}

.sas-faq-block .accordion-item {
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.sas-faq-block .accordion-item:last-child {
  margin-bottom: 0;
}

/* Remove WP-generated empty <p> tags */
.sas-faq-block p:empty {
  display: none;
  margin: 0;
  padding: 0;
}

/* Remove accidental <br> inside FAQ buttons */
.sas-faq-block .accordion-header br,
.sas-faq-block .accordion-button br {
  display: none;
}

/* Optional: reset spacing around buttons and headers too */
.sas-faq-block .accordion-header {
  margin: 0;
  padding: 0;
}

@media (max-width: 768px) {
  /* FAQ Container on mobile */
  .faqs {
    padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 2rem;
}

.faqs h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

/* Accordion Item */
  .faqs .accordion-item {
  margin-bottom: 1rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

/* Accordion Button */
  .faqs .accordion-button {
  padding: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #003366;
  background-color: #f5f9ff;
  border-radius: 0;
  /* flat look on mobile */
    transition: background-color 0.2s;
}

/* Accordion Body */
  .faqs .accordion-body {
  padding: 1rem;
  font-size: 0.95rem;
  background-color: #fff;
  color: #1b1b1b;
}

/* Clean up WP output */
  .faqs p:empty {
  display: none;
}

.faqs .accordion-button br,
  .faqs .accordion-header br {
  display: none;
}

/* Prevent scroll issues */
  .faqs .accordion-button,
  .faqs .accordion-body {
  word-break: break-word;
}

/* Help column */
  .kb-faqs .help {
  padding: 0 1rem;
  margin-top: 1.5rem;
  border-top: 1px solid #e4e4e4;
}

.kb-faqs .help h3 {
  font-size: 1.25rem;
  margin-top: 1.5rem;
}

.kb-faqs .help p {
  font-size: 0.95rem;
  line-height: 1.5;
}

.kb-faqs .help img {
  max-width: 180px;
  margin-top: 1rem;
}

}

/* ===== KB Fast Facts (contained, clean, crisp checks) ===== */

/* === KB Fast Facts: Fixed & Cleaned === */

/* Contained box */
.kb-fast-facts {
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  background: #fafafa !important; /* Forces the gray background back */
  padding: 1.5rem !important;
  margin-bottom: 3rem !important;
  display: block !important; 
}

/* Heading */
.kb-fast-facts h2 {
  margin: 0 0 .75rem 0;
  font-size: 1.25rem;
}

/* Target UL/LI regardless of nesting depth */
.kb-fast-facts ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.kb-fast-facts ul li {
  list-style: none !important;
  margin: .55rem 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1.25rem 1fr !important;
  gap: .6rem !important;
  align-items: start !important;
}

/* The Checkmark SVG */
.kb-fast-facts ul li::before {
  content: "" !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  
  /* Positioning: "Pushing down a tick" */
  margin-top: 0.25rem !important; /* Adjusted from .05rem to align with text cap-height */
  flex-shrink: 0;

  /* Color: Using your CSS Variable */
  background-color: var(--primary-color) !important;

  /* Shape: The Checkmark Mask */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4.8 4.8L20 7.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4.8 4.8L20 7.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

@media (max-width: 768px) {
  /* 1. Ensure the main container keeps its gray background and padding */
  #main.site-main .kb-fast-facts,
  .kb-fast-facts {
    background: #fafafa !important; 
    padding: 1.25rem !important;
    border: 1px solid #e4e7eb !important;
    display: block !important;
  }

  /* 2. Strip white backgrounds and borders from individual list items */
  #main.site-main .kb-fast-facts ul li {
    background: transparent !important; /* Removes the white boxes */
    border: none !important;            /* Removes individual item borders */
    box-shadow: none !important;        /* Removes any shadow from other styles */
    padding: 0.5rem 0 !important;       /* Vertical breathing room */
    margin-bottom: 0.5rem !important;
    display: grid !important;           /* Keeps checkmark aligned with text */
    grid-template-columns: 1.25rem 1fr !important;
    gap: 0.75rem !important;
    align-items: start !important;
  }

  /* 3. Ensure the checkmark remains consistent */
  .kb-fast-facts ul li::before {
  content: "" !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  
  /* Positioning: "Pushing down a tick" */
  margin-top: 0.25rem !important; /* Adjusted from .05rem to align with text cap-height */
  flex-shrink: 0;

  /* Color: Using your CSS Variable */
  background-color: var(--primary-color) !important;

  /* Shape: The Checkmark Mask */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4.8 4.8L20 7.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4.8 4.8L20 7.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}
}

/* =========================================================
   Single Product template styles (fast + Bootstrap-friendly)
   All rules are scoped to .single-product to avoid bleed.
   ========================================================= */

.single-product {
  /* Palette (tweak to brand) */
  --sp-ink: #1b1f23;          /* body text */
  --sp-border: #e3e6ea;       /* light border */
  --sp-blue-10: #eef5ff;      /* soft blue panel bg */
  --sp-gray-05: #f7f9fc;      /* subtle card bg */
  --sp-chip-ok-bg: #e9f9ef;   /* available chip bg */
  --sp-chip-ok-text: #0f7a3b; /* available chip text */
  --sp-chip-no-bg: #f3f4f6;   /* not-available chip bg */
  --sp-chip-no-text: #374151; /* not-available chip text */
}

/* ---------- Hero / heading / logos ---------- */

.single-product .title {
  margin-bottom: .25rem; /* tighten under H1 */
}

.single-product .product-logo { /* product mark beside H1 */
  max-height: 64px;
  width: auto;
}

.single-product .carrier-logo { /* carrier mark beside H1 */
  max-height: 40px;
  width: auto;
}

@media (max-width: 576px) {
  .single-product .product-logo { max-height: 48px; }
  .single-product .carrier-logo { max-height: 32px; }
}

/* ---------- Top description & right-column blocks ---------- */

.single-product .product-desc { /* main body copy at top */
  color: var(--sp-ink);
}

.single-product .product-benefits,
.single-product .product-who {
  background: #fff;
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.single-product .product-benefits h2,
.single-product .product-who h2,
.single-product .product-benefits .h3,
.single-product .product-who .h5 {
  margin-top: 0;
}

.single-product .product-benefits li i { /* align check icon with text cap height */
  line-height: 1.2;
  margin-top: 2px;
}

/* ---------- Coverage detail boxes (left/right) ---------- */

.single-product .highlighted-blue {
  background: var(--sp-blue-10);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
}

/* Give interior paragraphs breathing room without over-spacing */
.single-product .highlighted-blue p:last-child { margin-bottom: 0; }

/* ---------- Summary list ---------- */

.single-product .product-summary ul {
  margin: 0;
  padding-left: 1rem; /* simple bullets, not heavy icons */
}
.single-product .product-summary li { margin-bottom: .35rem; }

/* ---------- State availability chips ---------- */

.single-product .state-list { margin-bottom: 0; }

.single-product .state-list .badge {
  /* make Bootstrap badges look like modern "chips" */
  display: inline-block;
  border-radius: 999px;
  font-weight: 500;
  padding: .5rem .65rem;
  border: 1px solid var(--sp-border);
  background: var(--sp-gray-05);
  color: var(--sp-ink);
}

/* If your Bootstrap doesn't have the new *-subtle utilities,
   these fallbacks ensure colors still look right. */
.single-product .bg-success-subtle { background-color: var(--sp-chip-ok-bg) !important; }
.single-product .text-success-emphasis { color: var(--sp-chip-ok-text) !important; }
.single-product .border-success-subtle { border-color: rgba(15,122,59,.25) !important; }

.single-product .bg-secondary-subtle { background-color: var(--sp-chip-no-bg) !important; }
.single-product .text-secondary-emphasis { color: var(--sp-chip-no-text) !important; }
.single-product .border-secondary-subtle { border-color: rgba(17,24,39,.15) !important; }

/* ---------- Images ---------- */

.single-product .product-images img {
  /* you already add .rounded-3 in markup; this just ensures smooth edges */
  border: 1px solid var(--sp-border);
}

/* ---------- Spacing polish ---------- */



.single-product .product-benefits + .product-who { /* tighten stacked cards in right rail */
  margin-top: 1rem;
}

@media (min-width: 992px) {
  /* Keep columns aligned with comfortable reading width on desktop */
  .single-product .col-lg-8 { max-width: 100%; }
}

/* ---------- Utility: subtle cards you might reuse ---------- */

.single-product .card--soft {
  background: #fff;
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  padding: 1rem 1.25rem;
}

/* CTA card sizing and image behavior */
.single-product .cta-card--tall { 
  min-height: auto;            /* make the box taller; adjust as needed */
}

.single-product .cta-card__img {
  width: 100%;
  max-height: 180px;            /* keep the image from overpowering the card */
  object-fit: cover;            /* crops nicely while filling width */
  display: block;
}

/* Make the two cards the same height */
.single-product .product-benefits,
.single-product .product-who { height: 100%; }


/* Collapse the bottom margin of the last note paragraph */
.single-product .cta-card .small p:last-child { 
  margin-bottom: 0; 
}
/* Optional: keep a little height on wide screens without creating a big gap */
@media (min-width: 1200px) {
  .single-product .cta-card--tall { min-height: 320px; } /* tweak or delete */
}

/* ===== Fine Print (subtle footer disclaimers) ===== */

.single-product .fine-print {
  background: #f8f9fa;                 /* gentle gray */
  border: 1px solid var(--sp-border, #e3e6ea);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  line-height: 1.55;
}

.single-product .fine-print p { margin-bottom: .5rem; }
.single-product .fine-print a { color: inherit; text-decoration: underline; }
.single-product .fine-print a:hover { text-decoration: none; }

/* Product Quote CTA Box */
.product-quote-inner {
  background-color: #f8f9fc;
}

/* Left side */
.product-quote-logo {
  max-height: 55px;
}

/* Right side text a bit bigger */
.product-quote-checklist {
  padding-left: 0;
  list-style: none;
}

.product-quote-checklist li {
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  font-size: 1.02rem; /* bigger */
}

.product-quote-checklist i {
  color: var(--primary-color);
  margin-right: 8px;
}

.product-quote-note {
  font-size: 0.95rem;
}

/* Arrow + button row */
.product-quote-cta-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product-quote-arrow {
  font-size: 2.2rem;
  color: var(--primary-color);
  animation: product-quote-arrow-move 1.2s infinite ease-in-out;
  display: inline-block;
}

@keyframes product-quote-arrow-move {
  0%   { transform: translateX(-2px); }
  50%  { transform: translateX(6px); }
  100% { transform: translateX(-2px); }
}

/* Button */
.product-quote-button {
  width: 100%;
}

@media (min-width: 992px) {
  .product-quote-button {
    width: auto;
  }
}


/* Remove Bootstrap-like utility classes on mobile */
@media (max-width: 768px) {
 

#main.site-main .single-product ul {
    list-style: disc outside;
    padding-left: 1.5rem; /* space for bullets */
    margin-bottom: 1rem !important; /* space between items */
}

#main.site-main .single-product ul li {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.25rem 0 !important; /* vertical padding for breathing room */
    list-style: disc outside;

}
#main.site-main .single-product li {
    margin-bottom: 1rem;}

}

/* ---------- Accessibility tweaks ---------- */

.single-product a:hover { text-decoration: none; }

/* Reduce motion for users that prefer it; no animations in this block but future-safe */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* Coverage Steps (Bootstrap) */
/* Container background tint to match your screenshot */
.coverage-steps {
  background: #e9f2ff; /* light blue */
  border-radius: 12px;
  padding-left: 1rem;  /* visual breathing on small screens */
  padding-right: 1rem;
}

/* Left labels */
.step-label {
  /* Fixed size on desktop, fluid on mobile */
  min-height: 88px;
  min-width: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;         /* rounded rectangle */
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* On phones, make the label full width above the card */
@media (max-width: 767.98px) {
  .step-label {
    width: 100%;
  }
}

/* Right cards */
.step-card .card-body {
  padding: 1.25rem 1.5rem;
}
.step-card {
  border-radius: 12px;
}


#main.site-main .step-card ul {
    list-style: disc outside;
    padding-left: 1.5rem; /* space for bullets */
    margin-bottom: 1rem !important; /* space between items */
}

#main.site-main .step-card ul li {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.25rem 0 !important; /* vertical padding for breathing room */
    list-style: disc outside;

}


/* Optional: tighten list spacing inside THEN */
.coverage-steps ul { margin-bottom: 0; }
.coverage-steps li { margin-bottom: .25rem; }

/* Color accessibility (Bootstrap .bg-warning is yellow; keep white text) */
.bg-warning.text-white { color: #fff !important; }



/* ==========================================================================
   COBRA BLUE THEME – NINJA FORM STYLING
   ========================================================================== */

/* Form container alignment & appearance */
#nf-form-2-cont.nf-form-cont {
  max-width: 600px;
  margin-left: 0;
  margin-right: auto;
  padding: 2rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Remove unnecessary paddings in wrapper */
#nf-form-2-cont .nf-form-wrap {
  padding: 0;
}

/* Form field layout */
#nf-form-2-cont .nf-field-container {
  margin-bottom: 18px;
}

/* Input fields */
#nf-form-2-cont input[type="text"],
#nf-form-2-cont input[type="email"],
#nf-form-2-cont input[type="tel"],
#nf-form-2-cont input[type="date"],
#nf-form-2-cont .nf-element {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: var(--mega-color);
  transition: border-color 0.2s ease;
}

#nf-form-2-cont input:focus,
#nf-form-2-cont .nf-element:focus {
  border-color: #00629B;
  background-color: #fff;
  outline: none;
}

/* Labels */
#nf-form-2-cont label,
#nf-form-2-cont .nf-label-span {
  font-weight: 600;
  font-size: 15px;
  color: #1b1b1b;
  margin-bottom: 6px;
  display: block;
  text-align: left;
}

/* Helper icon fix (blue, not red) */
#nf-form-2-cont .nf-help .fa-info-circle {
  color: #00629B;
  margin-left: 5px;
  font-size: 14px;
}

#nf-form-2-cont .nf-help::after {
  content: none !important;
}

/* Email optional fix */
#nf-label-field-9 .fa-info-circle {
  color: #00629B !important;
}

/* Submit button */
#nf-form-2-cont input[type="submit"] {
  background-color: var(--primary-color);
    display: inline-block;
    border-color: var(--primary-color);
    color: #fff;
    padding: .5rem 1rem;
    font-weight: 600;
    text-align: center;
    border: 1px solid transparent;
    border-radius: .25rem;
    text-decoration: none;
    transition: background-color .2s ease;
}

#nf-form-2-cont input[type="submit"]:hover {
  background-color: #004e7a;
}

/* Error messages */
#nf-form-2-cont .nf-error,
#nf-form-2-cont .nf-error-wrap {
  color: #c8102e;
  font-size: 14px;
}

/* Hide debug messages */
#nf-form-2-cont .nf-debug-msg {
  display: none;
}

/* Two-column layout fix on mobile */



}


/* ==========================================================================
   Admin Pages
   ========================================================================== */
.single-admin .content {
padding: .5rem;
}

.single-admin .contact {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 4px;
  border: 1px solid rgba(200, 200, 255, 0.4);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.05),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);
  padding: 2rem;
  margin-top: 1rem;
  transition: all 0.3s ease;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #202b3a;
}

.single-admin .contact:hover {
  transform: scale(1.01);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.1),
    inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.single-admin .contact h3 {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  color: #0071ce;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 2px dashed rgba(0, 0, 0, 0.1);
  padding-bottom: 0.5rem;
}

.single-admin .contact p {
  margin: 0.5rem 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
}

.single-admin .contact i {
  color: #0071ce;
  margin-right: 0.75rem;
  font-size: 1.1rem;
}
/* ==========================================================================
   Carrier
   ========================================================================== */

.carrier-logo {
    width: 100%;
    height: 150px; /* Fixed height for consistency */
    object-fit: contain; /* Keeps aspect ratio without cropping */
    padding: 10px;
    background-color: #fff; /* Optional for clean look */
}






/* Carrier header: logo + contact aligned; keep it compact */
.single-carrier .carrier-logo img { max-width: 100%; height: auto; }

/* Tighten vertical rhythm in the contact block */
.single-carrier .carrier-contact-block p { margin-bottom: .25rem; line-height: 1.4; }

/* Slight top margin when the contact stack drops under the logo on small screens */
@media (max-width: 767.98px) {
  .single-carrier .carrier-contact-block { margin-top: .5rem; }
}

/* Two-column layout just for the Carrier template */
.single-carrier .carrier-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); /* ~8/4 split */
  gap: 24px;
  align-items: start;
}

/* Collapse and hide right column on mobile */
@media (max-width: 767.98px) {
  .single-carrier .carrier-grid {
    grid-template-columns: 1fr;
  }
  .single-carrier .carrier-aside {
    display: none !important;
  }
}

/* Logo + contact header row (desktop ~5/7 split) */
.single-carrier .carrier-header {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 16px;
  align-items: center;
}

/* On mobile: stack logo on top, contact below */
@media (max-width: 767.98px) {
  .single-carrier .carrier-header {
    grid-template-columns: 1fr;     /* single column */
    grid-template-rows: auto auto;  /* logo row, then contact row */
  }
}



.carrier-directory-logo {
    width: 100%;
    height: 150px; /* Fixed height for consistency */
    object-fit: contain; /* Keeps aspect ratio without cropping */
    padding: 10px;
    background-color: #fff; /* Optional for clean look */
}



/* ==========================================================================
   HIGHLIGHTED BLOCKS
   ========================================================================== */

/* Base highlight styles */
.highlighted-red,
.highlighted-blue,
.highlighted-yellow {
  color: #000 !important;
  padding: 1rem;
  border-radius: 10px;
  flex-grow: 1;
}

/* Color variants */
.highlighted-red {
  background-color: var(--light-red) !important;
}

.highlighted-blue {
  background-color: var(--light-bg) !important;
}

.highlighted-yellow {
  background-color: #fff9e6 !important;
}

/* Feature accents */
.highlighted-red.feature {
  border-left: 4px solid var(--accent-color);
}

.highlighted-blue.feature {
  border-left: 4px solid var(--primary-color);
}

/* Utilities */
.red-icon {
  color: #e01f1f !important;
}

.pad-1 {
  padding: 1rem;
}

/* --------------------------------------------------------------------------
   KB scoped highlights
   -------------------------------------------------------------------------- */

.kb-more-info .highlighted-red    { background: #FEF2F2; border-left: 4px solid #DC2626; }
.kb-more-info .highlighted-blue   { background: #EFF6FF; border-left: 4px solid #2563EB; }
.kb-more-info .highlighted-yellow { background: #FFFBEB; border-left: 4px solid #D97706; }
.kb-more-info .highlighted-green  { background: #ECFDF5; border-left: 4px solid #10B981; }
@media (max-width: 768px) {
  /* Kill highlight styling completely on mobile */
  /* Disable highlight visuals, not layout */
  .kb-more-info .highlighted-red,
  .kb-more-info .highlighted-blue,
  .kb-more-info .highlighted-yellow {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
}
.kb-more-info .highlighted-red,
.kb-more-info .highlighted-blue,
.kb-more-info .highlighted-yellow,
.kb-more-info .highlighted-green {
  padding: 1rem;
  overflow: hidden;
  border-radius: 0.25rem;
}

/* If applied to Bootstrap rows */
.kb-more-info .row.highlighted-red,
.kb-more-info .row.highlighted-blue,
.kb-more-info .row.highlighted-yellow,
.kb-more-info .row.highlighted-green {
  padding: 1rem;
  margin-left: 0;
  margin-right: 0;
}

/* --------------------------------------------------------------------------
   Mobile overrides
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {

  /* Eligibility callout special case */
  .highlighted-red.check-eligibility {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    margin: 1rem 0 !important;
    border-radius: 0 !important;
  }

  /* Neutralize highlight backgrounds on mobile */
  .highlighted-red,
  .highlighted-blue,
  .highlighted-yellow {
    background-color: #fff !important;
    padding: 0 !important;
  }

  /* Strip Bootstrap utility box chrome */
  .mb-3.border.border-opacity-50.shadow-sm.rounded.pad-1 {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }

  /* Restore normal list behavior inside eligibility block */
  .highlighted-red.check-eligibility ul {
    list-style: disc outside !important;
    padding-left: 1.5rem !important;
    margin: 0;
  }

  .highlighted-red.check-eligibility ul li {
    background: none !important;
    border: none !important;
    padding: 0.25rem 0 !important;
    margin-bottom: 0.75rem !important;
  }
 

  /* Kill highlight styling completely on mobile */
  /* Disable highlight visuals, not layout */
  .kb-more-info .highlighted-red,
  .kb-more-info .highlighted-blue,
  .kb-more-info .highlighted-yellow {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
 
   /* Match .more-info text width exactly */
  .kb_more_info_section_2_flex .row {
    --bs-gutter-x: 0;
  }

  /* Kill highlight visuals only */
  .kb_more_info_section_2_flex .highlighted-red,
  .kb_more_info_section_2_flex .highlighted-blue,
  .kb_more_info_section_2_flex .highlighted-yellow {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  .mb-3.border.border-opacity-50.shadow-sm.rounded.pad-1 {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }


  /* Restore normal bullets for the list */
  .highlighted-red.check-eligibility ul {
    list-style: disc outside !important;
    padding-left: 1.5rem !important;   /* Space for bullets */
    margin: 0;
  }

  .highlighted-red.check-eligibility ul li {
    background: none !important;
    border: none !important;
    padding: 0.25rem 0 !important;     /* Breathing room */
    margin-bottom: 0.75rem !important; /* Space between items */
  }
}




.citation {
  position: relative;
  background: var(--mega-color);
  border-left: 4px solid #e01f1f;
  padding: 0.75rem 1rem 0.75rem 2.25rem;
  font-size: 0.9rem;
  color: #1b1b1b;
  display: inline-block;
  width:100%;
  max-width: 100%;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.citation::before {
  content: "\f005";
  /* Font Awesome star */
  font-family: "Font Awesome 5 Free";
  /* or 6 if you're using it */
  font-weight: 900;
  color: #e01f1f;
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.95rem;
}

.citation.no-star::before {
  content: none;
}

.citation p {
    margin-top: 0;
    margin-bottom: 0rem;
}

.citation a {
  color: var(--primary-color);
  text-decoration: none;
  border-bottom: 1px dotted var(--primary-color);
  font-weight: 500;
}

.citation a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

div.answer > footer.citation {
    position: relative;
    background: none;
    border-left: none;
    padding: 0.2rem 1rem 0.2rem 2.25rem;
    font-size: 0.9rem;
    color: #1b1b1b;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    border-radius: 4px;
    margin-top: 5px;
    margin-bottom: 0px;
}



.product-feature-block {
  background: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease-in-out;
}

.product-feature-block:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.product-feature-title {
  font-family: 'Merriweather', serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: #1c2b39;
}

.product-feature-block .highlights {
  font-size: 1.25rem;
  font-family: 'Merriweather', serif;
  font-weight: 600;
  color: #0056b3;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.product-feature-block p {
  color: #444;
  line-height: 1.6;
}

.product-feature-block p.highlight {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-top: 0.75rem;
}

.product-feature-block p.terms {
  font-size: 0.9rem;
  color: #535A5F;
  margin-top: -0.25rem;
  margin-bottom: 1rem;
}

.product-feature-block ul {
  list-style: none;
  padding-left: 0;
}

.product-feature-block li {
  background: #f8f9fa;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
  border-left: 4px solid #0d6efd;
}

.product-feature-block li strong {
  color: var(--primary-color);
}

 

.product-feature-block .cta-button .btn {
  font-size: 1.1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: var(--primary-color);
  border: none;
  transition: all 0.2s ease-in-out;
}

.product-feature-block .cta-button .btn:hover {
  background: #084298;
  transform: translateY(-2px);
}




/* Neutral, mobile-friendly styles for .product-states */

span.state-badge {
    padding: 20px;
    border: 1px solid #cccccc;
}


.product-states .col-auto {
    margin-bottom: 3rem;
}



@media (max-width: 768px) {
  #main.site-main .product-feature-block ul li {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.25rem 0 !important; /* breathing room */
    margin-bottom: 0.75rem !important;
    display: flex !important;
    gap: 0.5rem !important;
    align-items: flex-start !important;
    list-style: none !important; /* keep custom checkmark */
  }

  #main.site-main .product-feature-block ul li::before {
    content: "";
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4.8 4.8L20 7.5' fill='none' stroke='%230071ce' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}


/* ==========================================
   Shared CTA Styles
========================================== */

.cta-title {
  color: var(--primary-color);
  font-family: 'Merriweather', serif;
  font-weight: 200;
  font-size:2.4em;
}

.cta-body-second {
  font-size: 0.875rem;
}

.cta-body p {
    margin-bottom: .25em;
}

.cta-body .price {
    font-size: 2em;
}

.cta-body-second a {
  font-weight: 400;
  text-decoration: underline;
}

.terms {
  font-size: 0.875rem;
  color: #666;
}

.cta-button {
  display: inline-block;
  width:100%;
}


/* ==========================================
   Wide CTA Section
========================================== */

.cta-wide {
  background-color: var(--light-bg);
  border-left: 6px solid var(--primary-color);
  padding: 1.5rem;
  border-radius: 0.5rem;
}

.cta-image-wide img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}



/* Mobile adjustments */
@media (max-width: 767px) {
  .cta-wide {
    padding: 1rem; /* Reduce padding for smaller screens */
    border: 1px solid var(--primary-color); /* Slightly thinner left border */
    margin-bottom: 1rem; /* Add spacing between stacked elements */
    font-size: 0.95rem; /* Slightly smaller text for better fit */
  }
}



/* ==========================================
   Column CTA (Sidebar)
========================================== */

.cta-column {
  background-color: var(--light-bg);
  border-left: 6px solid var(--primary-color);
  border-radius: 0.5rem;
  margin-bottom: 2rem;
}

.cta-column .cta-image img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .cta-column {
    padding: 1rem; /* Reduce padding for smaller screens */
    border: 1px solid var(--primary-color); /* Slightly thinner left border */
    margin-bottom: 0rem; /* Add spacing between stacked elements */
    font-size: 0.95rem; /* Slightly smaller text for better fit */
  }
}



/* ========================================================================== */
/* Wide Layout Responsive Enhancements */
/* ========================================================================== */

@media (min-width: 992px) {
  .highlighted-blue-cta .cta-image img {
    max-width: 85%;
  margin-left: auto;
}

}



/* Remove margin if needed */
.no-margin-top {
  margin-top: 0 !important;
}

/* === Fix readability and layout === */
.cta-better-box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 2rem 1rem;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  min-height: 500px;
  background: #fff;
  background-image: url('https://cobra.adhdseo.com/wp-content/uploads/2025/10/ad-back.png');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

/* Darken / balance the bright white gradient background */
.cta-better-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(240, 247, 255, 0.97) 25%,  /* soft blue tint instead of white */
    rgba(230, 242, 255, 0.85) 60%,
    rgba(220, 235, 255, 0.6) 100%
  );
  z-index: 1;
}


.cta-better-content {
  position: relative;
  z-index: 2;
  max-width: 540px;
  color: #0d2240;
}

.cta-better-content h2 {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.cta-better-content em {
  color: #b60000;
  font-style: normal;
}

.cta-better-lead {
  font-size: 1.1rem;
  color: #1b1b1b;
  margin-bottom: 1.5rem;
}

.cta-better-button {
  display: inline-block;
  padding: 0.9rem 2rem;
  background-color: #0071ce;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 10px rgba(0, 113, 206, 0.3);
}

.cta-better-button:hover {
  background-color: #005ba8;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 113, 206, 0.4);
}

.cta-better-note {
  font-size: 0.95rem;
  color: #666;
  margin-top: 0.75rem;
}

/* phone box refinement */
.cta-better-contact {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e5ecf5;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  display: inline-block;
}

.contact-label {
  font-weight: 600;
  color: #0d2240;
}

.contact-phone {
  font-size: 1.3rem;
  font-weight: bold;
  color: #0071ce;
  text-decoration: none;
}

.contact-phone:hover {
  text-decoration: underline;
}

.contact-hours {
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.25rem;
}

/* === MOBILE === */
@media (max-width: 768px) {
      .cta-better-box {
        flex-direction: column;
        text-align: center;
        /* padding: 3rem 1.5rem 260px; */
        background-image: url(https://cobra.adhdseo.com/wp-content/uploads/2025/10/ad-back.png);
        background-position: right;
        background-size: cover;
    }

  .cta-better-box::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0) 100%);
  }

  .cta-better-content h2 {
    font-size: 2rem;
  }

  .cta-better-lead {
    font-size: 1rem;
  }

  .cta-better-button {
    width: 100%;
  }

  .cta-better-contact {
    margin: 2rem auto 0;
  }
}





 






/* ==========================================================================
   Footer CTA
   ========================================================================== */
.footer-cta {
    background-color: var(--light-bg) !important;
}

@media (max-width: 768px) {
.footer-cta {
    background-color: var(--light-bg) !important;
    margin: 5px 30px 40px;
     padding: 1rem; /* Reduce padding for smaller screens */
    border: 1px solid var(--primary-color); /* Slightly thinner left border */
    margin-bottom: 3rem; /* Add spacing between stacked elements */
    font-size: 0.95rem; /* Slightly smaller text for better fit */
    border-radius:8px;
}

* Mobile adjustments */
@media (max-width: 767px) {
  .footer-cta {
    
  }
}

 }


/* ==========================================================================
   LOGO IMAGE
   ========================================================================== */
.custom-logo {
  height: 78px;
  width: auto;
}

.bg-footer {
  background-color: var(--mega-color);
      padding-left: 1rem;
    padding-right: 1rem;
  /* a bit lighter than black */;
}

.site-footer {
  font-size: 0.95rem;
}


@media (min-width: 768px) {
  .site-footer hr {
    display: none!important;
  }
}


.footer-site-name {
  font-size: 1.1rem;
  color: #242424;
  font-weight: 700;
  font-color:;
   margin-bottom: 0.25rem;
}

.footer-logo {
  max-width: 180px;
  height: auto;
}

.footer-address {
  color: #242424;
  padding-bottom: 1rem;
  white-space: pre-line;
}

.footer-contact-heading {
  font-size: 1rem;
  font-weight: 600;
    color: #242424;
  margin-bottom: 0.25rem;
}

.footer-contact-sub {
  color: #242424;
  margin-bottom: 0.5rem;
}

.footer-phone a {
  color: var(--primary-color);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
    padding-bottom: 1rem;
}

.footer-phone {
    padding-bottom: 1rem;
}


.footer-phone a:hover {
  color: var(--primary-color);
}

 .footer-heads {
  padding: 0;
      color: #242424;
  margin: 0;
  font-size:1.2em;
}

.footer-menu ul {
  padding-bottom:1rem;
  margin: 0;
}

.footer-menu ul li {
  margin-bottom: 0.4rem;
}

#menu-footer a {
    color: var(--primary-color);
}



.footer-disclaimer .small {
  font-size: 0.85rem;
  color: #242424;
  line-height: 1.6;
}

.footer-legal {
  font-size: 0.75rem;
  color: #242424;
}

.footer-legal a {
  color: var(--primary-color);
  text-decoration: none;
}

.footer-legal a:hover {
  text-decoration: underline;
}

.footer-social a {
  color: var(--primary-color);
  margin-left: 0.5rem;
  text-decoration: none;
}

.footer-social a:hover {
  color: var(--primary-color);
}

.border-top {
  border-top: 1px solid var(--bs-border-color) !important;
}





/* ========================================================================== 
   CTA BUTTONS RESPONSIVE BEHAVIOR
   ========================================================================== */

/* Mobile: center buttons + hamburger */
@media (max-width: 767.98px) {
  .cta-buttons {
    flex-direction: column; /* Stack vertically */
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem;
  }

  .cta-buttons .btn {
    width: 100%; /* Full width buttons */
    font-size: 1rem;
  }
}

/* Desktop: keep right-aligned */
@media (min-width: 768px) {
  .cta-buttons {
    justify-content: flex-end !important;
  }
}

/* Desktop-only: prevent CTA button text from wrapping */
@media (min-width: 768px) {
  .cta-buttons .btn {
    white-space: nowrap;
    min-width: 165px;  /* adjust if you want wider buttons */
    text-align: center;
  }
}

.cobra-callout {
  flex-wrap: nowrap !important;
}

.cobra-callout span {
  white-space: nowrap;
}

.cobra-callout a {
  white-space: nowrap;
}



/* ===========================================================
   COBRA Directory (inherits site colors via Bootstrap vars)
   This block uses your existing theme colors:
   --bs-primary, --bs-success, --bs-warning, --bs-danger,
   --bs-body-color, --bs-secondary-color
   =========================================================== */

.directory {
  --cobra-blue:  var(--bs-primary,  #0071ce);
  --cobra-green: var(--bs-success,  #198754);
  --cobra-amber: var(--bs-warning,  #ffc107);
  --cobra-red:   var(--bs-danger,   #dc3545);
  --ink:         var(--bs-body-color, #212529);
  --muted:       var(--bs-secondary-color, #6c757d);
}

/* Container rhythm */
.directory.container { padding-left: .75rem; padding-right: .75rem; }

/* Desktop header row */
.directory .directory-heading { font-size: 1rem; color: var(--ink); }
.directory .directory-heading .directory-secondary { font-weight: 400; color: var(--muted); font-size: .825rem; }
.directory .row.directory-heading { border-color: rgba(0,0,0,.08); }

/* Group label row (desktop) */
.directory .directory-group-label .bg-cobra {
  background-color: var(--cobra-var(--light-bg));
  color: #fff;
  padding-top: .375rem;
  padding-bottom: .375rem;
}
/* ensure readable if markup has .text-muted applied */
.directory .directory-group-label .bg-cobra .text-muted { color: rgba(255,255,255,.92) !important; }
.directory .directory-group-label .col-md-9 {
  background-color: #f8f9fa;
  border-left: 2px solid var(--cobra-green) !important;
  border-right: 2px solid var(--cobra-green) !important;
  color: color-mix(in srgb, var(--cobra-green) 25%, #000);
}

/* Rows */
.directory .directory-row {
  border-color: rgba(0,0,0,.06);
  background: #fff;
  transition: background-color .15s ease, box-shadow .15s ease;
}
@media (min-width: 768px) {
  .directory .directory-row:hover {
    background-color: color-mix(in srgb, var(--cobra-var(--light-bg)) 6%, #fff);
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
  }
}
.directory .directory-row > [class*="col-"] { padding-top: .5rem; padding-bottom: .5rem; }

/* State link */
.directory .state-name a {
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
}
.directory .state-name a:hover, .directory .state-name a:focus {
  color: var(--cobra-var(--primary-color));
  text-decoration: underline;
}

/* Helper text */
.directory small.text-muted { color: var(--muted) !important; }

/* Icons (Bootstrap Icons) */
.directory .bi { font-size: 2.25rem !important; line-height: 1; vertical-align: middle; }
/* Available */
.directory .bi-check-circle, .directory .bi-check-circle-fill { color: var(--cobra-var(--primary-color)) !important; }
/* Unavailable */
.directory .bi-x-circle, .directory .bi-x-circle-fill { color: rgba(89,92,95,.5) !important; }
/* COBRA/Mini-COBRA shield */
.directory .bi-shield-check { color: var(--cobra-amber); }
.directory .bi-shield-check.text-warning { color: var(--cobra-amber) !important; }
.directory .bi-shield-check.text-danger { color: var(--cobra-red) !important; }

@media (max-width: 767.98px) {
  .directory .bi { font-size: 2rem !important; margin-bottom: .25rem; }
  /* keep mobile columns centered */
  .directory .text-md-start { text-align: center !important; }
  .directory .d-md-none.fw-bold { font-size: .9rem; color: var(--muted); margin-bottom: .25rem; }
}

/* Links under icons */
.directory .mt-2.small a { color: var(--cobra-var(--primary-color)); text-decoration: none; }
.directory .mt-2.small a:hover, .directory .mt-2.small a:focus { text-decoration: underline; }

/* Focus states */
.directory a { padding: 2px 0; }
.directory a:focus-visible {
  outline: 2px solid var(--cobra-var(--primary-color));
  outline-offset: 2px;
  border-radius: 2px;
}

/* Desktop equalizer so icon columns match height of state column */
@media (min-width: 768px) {
  .directory .directory-row > .col-md { min-height: 96px; }
}

/* Softer separators */
@media (prefers-color-scheme: light) {
  .directory .border-bottom { border-bottom-color: rgba(0,0,0,.06) !important; }
}

/* === CTA-scoped heading update === */
/* CTA-only heading color */
.cta-column .cta-title,
.cta-wide .cta-title,
.cta-column h2,
.cta-wide h2 {
  color: var(--primary-color);
}


  .cobra-404 {
    min-height: 80vh;
    background-image: url('https://cobra.adhdseo.com/wp-content/uploads/2025/12/eagle2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Dark overlay so text stays readable */
    position: relative;
  }

  .cobra-404::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
  }

  .cobra-404 .inner {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    padding: 60px 20px;
  }

  .cobra-404 h1 {
    font-size: 2em;
    margin-bottom: 1em;
    color: #ffffff;
  }

  .cobra-404 p {
    font-size: 18px;
    margin-bottom: 25px;
  }

  .cobra-404 a.btn-home {
    background: #0071ce;
    color: #fff;
    padding: 12px 22px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 18px;
  }

  .cobra-404 a.btn-home:hover {
    background: #005a9f;
  }


      /* Main STOP popup */    /* Wrapper */
    .popup-wrapper {
      padding: 1.5rem;
    }


    .popup {
      max-width: 840px;
      margin: 0 auto;
      padding: 2rem 2.5rem;
      background-color: #dbeeff;
      border-radius: 0.5rem;

    }

    /* Image columns */
    .popup-figure {
      text-align: center;
    }

    .popup-figure img {
      width: 100%;
      max-width: 260px;
      height: auto;
    }

    @media (max-width: 768px) {
  .popup-figure {
    display: none!important;
  }
}

    /* Heading */
    .popup-heading {
      font-size: 2rem;
      font-weight: 400;
      color: #004a8f;
      line-height: 1.2;
    }

    .popup-heading-accent {
      color: #004a8f;
      font-weight: 700;
    }

    /* Phone block */
    .popup-call-us {
      font-size: 1.4rem;
      color: #004a8f;
    }

    .popup-phone-number {
      font-size: 1.7rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: #004a8f;
    }

    /* Body text */
    .popup-body {
      font-size: 0.98rem;
      color: #003458;
    }

    /* CTA button */
    .popup-cta-btn {
      padding: 0.65rem 1.8rem;
      border-radius: 2rem;
      font-weight: 600;
      font-size: 1rem;
      background-color: #f6cb4f;
      border: none;
      color: #003458;
      text-decoration: none;
      display: inline-block;
    }

    .popup-cta-btn:hover {
      background-color: #ffd868;
      color: #002744;
    }

    /* Mobile adjustments */
    @media (max-width: 575.98px) {
      .popup {
        padding: 1.5rem;
      }

      .popup-heading {
        font-size: 1.6rem;
      }

      .popup-phone-number {
        font-size: 1.4rem;
      }

      .popup-figure img {
        max-width: 200px;
        margin-bottom: 1rem;
      }
    }



/* Full Width Hero Wrapper */
.hero-full-bleed {
    width: 100%;
    position: relative;
    /* Extra padding to show off the image sides as requested */
    padding: 60px 0; 
    margin-bottom: 2rem;
}

/* Ensure the container inside the hero stays centered */
.hero-full-bleed .container {
    background: transparent;
}

/* Fix for mobile - ensure background doesn't squish */
@media (max-width: 768px) {
    .hero-full-bleed {
        padding: 40px 0;
        background-attachment: scroll; /* better for mobile performance */
    }
}