/* =========================================
   DROP-IN: style.css  (v1)
   - Consolidated Hero (no heavy dimming)
   - Mobile-first, Bootstrap-friendly
   - Stable across devices
   ========================================= */

/* -----------------------------------------
   1) Variables
   ----------------------------------------- */
@import url('variables.css');

/* Safe fallbacks if variables.css is missing */
:root {
  --navbar-height-desktop: 76px;
  --navbar-height-mobile: 56px;

  --hero-min-h-desktop: 564px;
  --hero-min-h-mobile: 420px;

  /* Adjust this if you want a touch more/less veil on the hero bg */
  --hero-overlay: 0.18;

  --container-max: 1140px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;

  --shadow-sm: 0 4px 12px rgba(0,0,0,.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,.12);
  --shadow-lg: 0 14px 40px rgba(0,0,0,.18);
}

/* -----------------------------------------
   2) Base / Resets
   ----------------------------------------- */
html { box-sizing: border-box; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: inherit; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #1a1a1a;
  background: #fff;
  line-height: 1.5;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Helpful utility if you need a max container on non-Bootstrap blocks */
.container-max { max-width: var(--container-max); margin-inline: auto; padding-inline: 16px; }

/* -----------------------------------------
   3) Navbar / Overlay helpers
   ----------------------------------------- */
/* If your navbar is fixed-top, we space the hero only (safer than padding body globally) */
@media (min-width: 769px) {
  .hero-section { margin-top: var(--navbar-height-desktop); }
}
@media (max-width: 768px) {
  .hero-section { margin-top: var(--navbar-height-mobile); }
}

/* Mobile menu backdrop (used if you show a side drawer) */
.navbar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 1040; /* under Bootstrap modals (1050+) */
}
.navbar-overlay.show {
  opacity: 1;
  pointer-events: all;
}

/* -----------------------------------------
   4) HERO (Consolidated)
   ----------------------------------------- */
/* Required markup structure:
   <section class="hero-section">
     <div class="container"> ... content ... </div>
   </section>
*/
.hero-section {
  position: relative;
  width: 100%;
  min-height: var(--hero-min-h-desktop);
  display: flex;
  align-items: center;
  overflow: hidden;

  /* Set your desktop hero image here */
  background: url('../images/diabetes-care-bg.jpg') center / cover no-repeat;
}

/* Soft overlay for legibility — tweak via --hero-overlay or set to 0 to remove */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--hero-overlay));
  pointer-events: none;
  z-index: 1;
}

/* Make inner content sit above the overlay */
.hero-section > .container,
.hero-section > .container-max {
  position: relative;
  z-index: 2;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: .9;
  margin-bottom: 8px;
  color: #fff;
}

.hero-title {
  color: #fff;
  margin: 0 0 10px 0;
  line-height: 1.15;
  font-weight: 800;
  font-size: clamp(28px, 5vw, 44px);
}

.hero-subtitle {
  color: #f4f7fb;
  font-size: clamp(14px, 2.2vw, 18px);
  max-width: 60ch;
  opacity: .95;
  margin-bottom: 20px;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .hero-section {
    min-height: var(--hero-min-h-mobile);
    background-image: url('../images/diabetes-care-bg-mobile.jpg'); /* provide a mobile-optimized image */
    padding-block: 18px;
  }
  .hero-subtitle { max-width: 100%; }
}

/* -----------------------------------------
   5) “Glass” Search Card (bright, readable)
   ----------------------------------------- */
.search-card {
  background: rgba(255,255,255,0.88);   /* previously too translucent -> foggy look */
  -webkit-backdrop-filter: saturate(160%) blur(6px);
  backdrop-filter: saturate(160%) blur(6px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  border: 1px solid rgba(0,0,0,.06);
}

.search-card .form-control,
.search-card .form-select {
  background-color: #fff;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: none;
}

.search-card .btn {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

/* Compact on small screens */
@media (max-width: 576px) {
  .search-card { padding: 12px; border-radius: var(--radius-md); }
}

/* -----------------------------------------
   6) Autosuggest / Typeahead Panel
   ----------------------------------------- */
/* Container should be position:relative on the wrapper around the input. */
.autosuggest-wrap { position: relative; }

.autosuggest-panel {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  margin-top: 6px;

  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);

  max-height: 45vh;
  overflow: auto;
  z-index: 1050; /* above hero content, below modals */
}

.autosuggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  line-height: 1.25;
}

.autosuggest-item:hover,
.autosuggest-item.is-active {
  background: #f7f9fc;
}

.autosuggest-item .icon {
  flex: 0 0 20px;
  width: 20px; height: 20px;
  opacity: .65;
}

/* “No results” row */
.autosuggest-empty {
  padding: 10px 12px;
  color: #777;
  font-style: italic;
}

/* -----------------------------------------
   7) Pills / Tabs (search-type toggles)
   ----------------------------------------- */
.search-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px;
}
.search-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  user-select: none;
}
.search-pill.is-active {
  background: #0d6efd; /* Bootstrap primary */
  color: #fff;
  border-color: #0d6efd;
}

/* -----------------------------------------
   8) Utility Helpers
   ----------------------------------------- */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }

.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

.text-muted-70 { color: rgba(0,0,0,.70) !important; }
.text-muted-50 { color: rgba(0,0,0,.50) !important; }
.bg-blur-6 {
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* -----------------------------------------
   9) Footer basics
   ----------------------------------------- */
.site-footer {
  background: #0f172a; /* deep slate */
  color: #e5e7eb;
  padding: 36px 0;
}
.site-footer a { color: #e5e7eb; }
.site-footer a:hover { color: #fff; }

/* -----------------------------------------
   10) Accessibility niceties
   ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
:focus-visible {
  outline: 3px solid #84caff; outline-offset: 2px;
}

/* End of file */
/* ---- Header: force white theme ---- */
#navbar,
.header,
.header .navbar,
.navbar.header-nav,
.navbar {
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}

/* Links & brand */
#navbar .navbar-brand,
#navbar .nav-link,
.navbar .navbar-brand,
.navbar .nav-link { color: #0f172a !important; }

#navbar .nav-link:hover,
#navbar .nav-link:focus { color: #2ecc71 !important; }

/* Buttons in header */
#navbar .btn-primary { background:#2ecc71; border-color:#2ecc71; }
#navbar .btn-outline-light,
#navbar .btn-light {
  color:#0f172a !important;
  background:#fff !important;
  border-color: rgba(0,0,0,.15) !important;
}

/* Search box */
#navbar .form-control {
  background:#fff; color:#0f172a; border-color: rgba(0,0,0,.15);
}

/* Dropdowns on white header */
#navbar .dropdown-menu {
  background:#fff;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
#navbar .dropdown-item { color:#0f172a; }
#navbar .dropdown-item:hover { background:#f5fff9; }

/* Mobile toggler icon: dark bars */
#navbar .navbar-toggler { border-color: rgba(15,23,42,.25); }
#navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(15,23,42,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* ===== No-gap header/hero fix ===== */

/* 1) Remove any border/shadow that looks like a gap */
.header,
#navbar,
.header .navbar,
.navbar.header-nav,
.navbar {
  border-bottom: 0 !important;
  box-shadow: none !important;  /* comment out if you want a faint divider */
}

/* 2) Kill unintended spacing above the hero */
.hero-section { margin-top: 0 !important; }

/* Some frameworks collapse the first child's margin into the parent;
   these lines prevent that so headings can't push the hero down. */
.hero-section { padding-top: 1px; }
.hero-section > .container,
.hero-section > .container-max { margin-top: 0 !important; }
.hero-section h1,
.hero-section .hero-title { margin-top: 0 !important; }

/* 3) If (and only if) your navbar is fixed-top, add the offset safely on desktop */
@media (min-width: 992px) {
  .fixed-top ~ main .hero-section { margin-top: var(--navbar-height-desktop, 76px) !important; padding-top: 0; }
}
/* Mobile offset (if fixed-top) */
@media (max-width: 991.98px) {
  .fixed-top ~ main .hero-section { margin-top: var(--navbar-height-mobile, 56px) !important; padding-top: 0; }
}
/* === Mobile hamburger visible on WHITE header === */

/* Bootstrap toggler */
#navbar .navbar-toggler {
  background:#fff !important;
  border:1px solid rgba(15,23,42,.25) !important; /* subtle outline on white */
}
#navbar .navbar-toggler:focus { box-shadow: 0 0 0 .25rem rgba(46,204,113,.25) !important; }

/* Dark bars (SVG) so they show on white */
#navbar .navbar-toggler-icon {
  width:1.5em; height:1.5em; background-size:1.5em 1.5em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(15,23,42,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

/* If your build is Bootstrap 5.3+, also set the CSS var (harmless otherwise) */
#navbar { --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(15,23,42,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }

/* Custom icon (if using #mobile_btn with .bar-icon spans like your reference) */
#mobile_btn .bar-icon span {
  display:block; height:2px; width:24px; margin:5px 0;
  background:#0f172a !important; /* dark bars on white */
  border-radius:2px;
}
/* Ensure visible hamburger on a white header */
.navbar .navbar-toggler { 
  background:#fff; border:1px solid rgba(15,23,42,.25);
}
.navbar .navbar-toggler:focus { 
  box-shadow:0 0 0 .25rem rgba(46,204,113,.25);
}
/* Dark bars SVG so it shows on white */
.navbar .navbar-toggler-icon{
  width:1.5em;height:1.5em;background-size:1.5em 1.5em;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(15,23,42,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}


:root{ --health-green:#2ecc71; }

  /* Header: white, visible, no gap; collapse above content */
  #navbar, .navbar { background:#fff !important; border-bottom:0 !important; box-shadow:none !important; z-index:1055; }
  .hero-section{ position:relative; margin-top:0 !important; padding-top:1px; }

  /* Hamburger on white header */
  .navbar .navbar-toggler{ background:#fff; border:1px solid rgba(15,23,42,.25); }
  .navbar .navbar-toggler:focus{ box-shadow:0 0 0 .25rem rgba(46,204,113,.25); }
  .navbar-light .navbar-toggler-icon,
  .navbar .navbar-toggler-icon{
    width:1.5em;height:1.5em;background-size:1.5em 1.5em;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(15,23,42,0.9)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
  }

  /* Backdrop to close on outside click, only on mobile */
  .nav-backdrop{ position:fixed; inset:0; background:transparent; display:none; z-index:1050; }
  .nav-backdrop.show{ display:block; }
  body.nav-open{ overflow:hidden; } /* prevent scroll when menu open */
  @media (min-width: 992px){ .nav-backdrop{ display:none !important; } }

  /* Search UI */
  .search-wrap { min-width: 0; }
  .as-container {
    position: absolute; top: 100%; left: 0; z-index: 1060; width: 100%;
    max-height: 360px; overflow-y: auto; background: #fff;
    border: 1px solid #e2e8f0; border-top: none; box-shadow: 0 8px 18px rgba(0,0,0,0.12);
    border-radius: 0 0 10px 10px;
  }
  .as-item { padding: .6rem .85rem; display: flex; align-items: center; gap: .5rem; cursor: pointer; line-height: 1.2; }
  .as-item:hover, .as-item[aria-selected="true"] { background: #f7fafc; }
  .as-label { font-weight: 600; }
  .as-sub { color: #6b7280; font-size: .875rem; }

  .search-bar-desktop .form-control, .search-bar-mobile .form-control { border: 1px solid #e2e8f0; box-shadow: none; }
  .btn.btn-search { border: 1px solid #e2e8f0; }

  @media (min-width: 992px) {
    .search-bar-desktop .input-group { max-width: 520px; }
    .search-bar-desktop .form-control { border-radius: 10px 0 0 10px; height: 42px; }
    .search-bar-desktop .btn.btn-search {
      border-left: 0; border-radius: 0 10px 10px 0; height: 42px; width: 52px;
      display: inline-flex; align-items: center; justify-content: center; background: var(--health-green) !important; color:#fff;
    }
  }
  @media (max-width: 991.98px) {
    .search-bar-mobile .form-control { border-radius: 8px 0 0 8px; height: 40px; }
    .search-bar-mobile .btn.btn-search {
      border-radius: 0 8px 8px 0; height: 40px; width: 46px;
      display: inline-flex; align-items: center; justify-content: center; background: var(--health-green) !important; color:#fff;
    }
  }

  /* Fallback collapse display if Bootstrap CSS/JS is missing */
  .navbar .collapse:not(.show){display:none;}
  @media (min-width: 992px){ .navbar .collapse{display:flex !important;} }
  @media (min-width: 992px){ .navbar .collapse{display:flex !important;} }
  
  
  :root{
        --bs-primary: #2ecc71;
        --bs-primary-rgb: 46,204,113;
        --brand-secondary: #0f172a;
      }
      .btn-primary{ background:#2ecc71; border-color:#2ecc71; }
      .btn-outline-primary{ color:#2ecc71; border-color:#2ecc71; }
      .btn-outline-primary:hover{ background:#2ecc71; color:#fff; }
      .link-primary, a.text-primary{ color:#2ecc71 !important; }
      .site-footer{ background:var(--brand-secondary); }
      /* Hero brighten (light veil) */
      .hero-section::before{ background: rgba(0,0,0,0.12); }
	  
	  
	  :root{ --health-green:#2ecc71; }
  .tool-card{ transition: transform .15s ease, box-shadow .15s ease; border:1px solid #eef2f7; }
  .tool-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.08); }
  .tool-card .tool-ico{ color: var(--health-green); }
  .btn-success{ background: var(--health-green); border-color: var(--health-green); }
  .btn-outline-success{ color: var(--health-green); border-color: var(--health-green); }
  .btn-outline-success:hover{ background: var(--health-green); color:#fff; }