/* Modern visual override - professional, mobile-first tweaks */
:root{
  /* prefer existing project brand variables from style.css (keeps original colours) */
  --brand-900: var(--primary-dark, #6A001D);
  --brand-700: var(--primary-color, #F06321);
  --brand-500: var(--primary-color, #F06321);
  --accent: var(--accent-color, #3498DB);
  --muted: var(--gray-600, #6C757D);
  --surface: var(--white, #FFFFFF);
  --glass: rgba(255,255,255,0.6);
  --card-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Gentle reset for overrides */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--brand-900);
}

/* Improve headings for clarity */
h1{font-size:clamp(1.6rem,2.4vw,3rem);letter-spacing:-0.02em}
h2{font-size:clamp(1.25rem,1.6vw,2rem)}

/* Navbar: desktop layout and compact mobile */
.navbar{
  background:linear-gradient(180deg,var(--surface),#fbfdff);
  border-bottom:1px solid rgba(11,37,69,0.04);
}
.navbar .logo-text{color:var(--brand-700);font-weight:700}

/* Desktop nav links - override previous mobile-first menu */
@media (min-width: 900px){
  .nav-links{display:flex !important;position:static;flex-direction:row;background:transparent;padding:0;box-shadow:none;gap:1rem}
  .nav-links li{margin:0}
  .menu-toggle{display:none}
}

/* Mobile nav improvements */
.menu-toggle{border-radius:8px;padding:8px}
.nav-links a{padding:10px 14px;border-radius:8px}
.nav-links a.cta-nav{box-shadow:0 6px 18px rgba(0,0,0,0.08)}

/* Buttons - make CTAs larger, pill-like */
.btn{border-radius:999px}
.btn-primary{background:linear-gradient(90deg,var(--brand-500),var(--brand-700));box-shadow:var(--card-shadow);padding:12px 18px}
.btn-outline{border:1px solid var(--brand-500);color:var(--brand-700)}

/* Cards: subtle shadow and larger radius */
.insurance-plan-card, .service-card, .benefit-card, .testimonial-card, .plan-card{box-shadow:var(--card-shadow);border-radius:14px}

/* Hero improvements: split content and lighter background on mobile */
.hero-section{background:linear-gradient(180deg, rgba(240,99,33,0.03), rgba(106,0,29,0.02));}
.hero-text h1{color:var(--brand-900);font-weight:800}

/* Section badge: treat as a small heading across the site
   - remove any badge background
   - increase text size and weight for the label to read like a heading
   - keep the icon visually balanced
*/
.section-badge{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
}
.section-badge i{
  font-size:1.05rem;
  color:var(--brand-700);
  opacity:0.95;
}
.section-badge span{
  font-size:clamp(1.05rem,2.6vw,1.5rem) !important; /* larger, responsive */
  font-weight:800 !important;
  color:var(--brand-900) !important;
  letter-spacing:-0.01em;
}

/* Form inputs - cleaner focus state */
input[type=text], input[type=tel], input[type=email], select, textarea{border-radius:10px;border:1px solid rgba(0,0,0,0.06);padding:12px 14px}
input:focus, select:focus, textarea:focus{outline:none;box-shadow:0 6px 20px rgba(240,99,33,0.08);border-color:var(--brand-500)}

/* Footer - enforce brand-dark background and readable text across all pages */
/* Use higher specificity and !important to override inline or legacy stylesheet rules that may render the footer white. */
footer.footer, .footer {
  background: var(--brand-900) !important; /* primary dark tone */
  color: #ffffff !important;
  background-image: none !important;
  padding: 40px 0 !important;
}
.footer a {
  color: rgba(255,255,255,0.92) !important;
  text-decoration: none;
}
.footer a:hover { color: #ffffff !important; text-decoration: underline; }
.footer .footer-logo-text { color: var(--brand-500) !important; }
.footer .footer-description { color: rgba(255,255,255,0.9) !important; }
.footer .footer-certifications { background: rgba(255,255,255,0.03) !important; border-top: 1px solid rgba(255,255,255,0.06) !important; padding: 20px 0 !important; }

/* Back-to-top - brighter and visible earlier */
.back-to-top{background:var(--brand-500);box-shadow:0 10px 30px rgba(0,0,0,0.12)}

/* Small utilities */
.muted{color:var(--muted)}
.text-compact{line-height:1.4}

/* Accessibility: focus-visible outlines */
a:focus, button:focus, input:focus{outline:3px solid rgba(30,111,179,0.12);outline-offset:3px}

/* Slightly larger tap targets on mobile */
@media (max-width:899px){
  .btn, .menu-toggle, .nav-links a{min-height:44px}
}

/* Simple utility to center images responsively */
.hero-form-section img, .about-image img{max-width:100%;height:auto;border-radius:12px}

/* Make admin sidebar toggle more evident */
/* when admin includes modern.js it will add .sidebar-collapsed */
.sidebar-collapsed .sidebar{width:70px}

/* Smooth section entrance animation */
.fade-in{opacity:0;transform:translateY(8px);transition:opacity .5s ease,var(--transition-normal)}
.fade-in.show{opacity:1;transform:none}

/* Admin panel simplifications */
.admin-container, .container.admin, .admin-wrapper{background:transparent}
.sidebar{width:220px;box-shadow:none;border-right:1px solid rgba(0,0,0,0.04);background:var(--surface)}
.sidebar .logo-text{font-size:1rem}
.sidebar .nav-link span{display:inline-block}
.sidebar .nav-item .nav-link{padding:12px 14px;border-radius:10px}
.sidebar-collapsed .sidebar{width:72px}
.main-content{padding:18px}
.header{background:transparent;padding:14px 18px;border-bottom:1px solid rgba(0,0,0,0.04)}
.stats-grid .stat-card{padding:18px}
.table-container{overflow-x:auto}

/* Improve form/control sizes in admin for touch devices */
.form-group input, .form-group select, .search-box input{min-height:44px}

/* Responsive admin: collapse sidebar on small screens and hide labels for simplicity */
@media (max-width: 900px) {
  body:not(.sidebar-collapsed) .sidebar {width:72px}
  .sidebar .logo-text, .sidebar .nav-link span {display:none}
  .sidebar .logo img{max-width:36px}
  .main-content{padding:12px}
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:1100}
  .admin-container{padding-left:72px}
}


/* End modern.css */