/* Main Styles - Blue Theme */
:root{
  --primary:#1e3a8a; /* Primary Blue */
  --secondary:#3b82f6; /* Secondary Blue */
  --light:#60a5fa; /* Light Blue */
  --accent:#93c5fd; /* Accent Blue */
  --text:#1f2937; /* Text */
  --bg:#f8fafc; /* Background */
  --card:#ffffff;
  --border:#e5e7eb;
}
:root.dark{
  --bg:#0b1220;
  --text:#e5e7eb;
  --card:#111827;
  --border:#1f2937;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}

/* Header */
.site-header{background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.topbar{background:var(--primary);color:#fff}
.topbar a{color:#fff;text-decoration:none}
.topbar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:6px 16px;gap:12px}
.topbar-phone{display:flex;align-items:center;gap:8px;font-weight:600}
.topbar-social{display:flex;gap:10px}
.topbar-social a{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;background:rgba(255,255,255,0.12);border-radius:50%}
.topbar-social a:hover{background:rgba(255,255,255,0.2)}
.navbar{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px;padding:10px 16px;position:relative}
.navbar img{max-height:36px;height:auto}
.logo{font-weight:800;color:var(--primary);text-decoration:none;font-size:1.25rem}
.nav-menu{margin-left:auto;display:flex;gap:32px}
.nav-menu a{color:var(--text);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav-menu a:hover{background:var(--border)}

/* Mobile nav toggle (injected by JS) */
.nav-toggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--border);border-radius:8px;padding:8px 10px;cursor:pointer}
.nav-toggle:focus-visible{outline:3px solid var(--secondary);outline-offset:2px}
.nav-toggle .bar{display:block;width:20px;height:2px;background:var(--text);margin:3px 0;border-radius:1px}

/* Main Navigation */
.main-nav {
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 1000;
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

.nav-brand {
  display: flex;
  align-items: center;
}

.logo img {
  height: 40px;
  width: auto;
}

/* Main Menu */
.main-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-menu > li {
  position: relative;
  margin: 0 1rem;
}

.menu-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 0;
  display: block;
  position: relative;
  transition: color 0.2s ease;
}

.menu-link:hover,
.menu-link:focus {
  color: var(--primary);
}

/* Submenu */
.has-submenu {
  position: relative;
}

.submenu {
  position: absolute;
  top: 100%;
  left: -1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0;
  min-width: 200px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu li {
  padding: 0;
  margin: 0;
}

.submenu a {
  display: block;
  padding: 0.5rem 1.5rem;
  color: var(--text);
  text-decoration: none;
  transition: all 0.2s ease;
}

.submenu a:hover,
.submenu a:focus {
  background: rgba(0, 0, 0, 0.03);
  color: var(--primary);
}

/* Navigation CTA */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: 2rem;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: 0.5rem 1.25rem;
  border-radius: 4px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-outline:hover {
  background: rgba(30, 58, 138, 0.1);
}

/* Mobile Navigation */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 30px;
  height: 30px;
  position: relative;
  cursor: pointer;
  padding: 0;
  margin-left: 1rem;
  z-index: 1001;
}

.hamburger {
  display: block;
  position: relative;
  width: 24px;
  height: 2px;
  background: var(--text);
  transition: all 0.3s ease;
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--text);
  left: 0;
  transition: all 0.3s ease;
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  bottom: -8px;
}

.nav-toggle[aria-expanded="true"] .hamburger {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .hamburger::before {
  transform: rotate(45deg) translate(5px, 6px);
}

.nav-toggle[aria-expanded="true"] .hamburger::after {
  transform: rotate(-45deg) translate(5px, -6px);
}

/* Submenu Toggle for Mobile */
.submenu-toggle {
  display: none;
  background: none;
  border: none;
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  padding: 0;
  color: var(--text);
}

.plus {
  display: block;
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.3s ease;
}

.submenu-toggle[aria-expanded="true"] .plus {
  transform: rotate(45deg);
}

/* Responsive Styles */
@media (max-width: 1024px) {
  .nav-container {
    padding: 0 1rem;
  }
  
  .nav-cta {
    margin-left: 1rem;
  }
}

@media (max-width: 768px) {
  .nav-container {
    height: 60px;
  }
  
  .nav-toggle {
    display: block;
  }
  
  .nav-menu-container {
    position: fixed;
    top: 0;
    right: -100%;
    bottom: 0;
    width: 85%;
    max-width: 350px;
    background: var(--card);
    padding: 5rem 1.5rem 2rem;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    overflow-y: auto;
    z-index: 1000;
  }
  
  .nav-menu-container[aria-expanded="true"] {
    right: 0;
  }
  
  .main-menu {
    flex-direction: column;
    margin-bottom: 2rem;
  }
  
  .main-menu > li {
    margin: 0.5rem 0;
    position: relative;
  }
  
  .menu-link {
    padding: 0.75rem 0;
    font-size: 1rem;
  }
  
  .submenu-toggle {
    display: block;
  }
  
  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  .submenu.active {
    max-height: 1000px;
    padding: 0.5rem 0 0.5rem 1rem;
  }
  
  .submenu a {
    padding: 0.5rem 0;
  }
  
  .nav-cta {
    flex-direction: column;
    align-items: flex-start;
    margin: 2rem 0 0;
    gap: 0.75rem;
  }
  
  .search-toggle {
    display: none;
  }
}

/* Overlay for mobile menu */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 999;
}

.nav-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Buttons */
.btn-primary,.btn-secondary{border:none;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600;transition:transform .05s ease,background .2s}
.btn-primary{background:linear-gradient(180deg,var(--secondary),var(--primary));color:#fff}
.btn-primary:hover{filter:brightness(1.05)}
.btn-secondary{background:var(--border);color:var(--text)}
.btn-secondary:hover{background:#d1d5db}

/* Hero */
.hero{max-width:900px;margin:40px auto;padding:0 16px;text-align:center}
.hero h1{font-size:2rem;margin:0 0 8px}
.hero p{margin:0 0 18px;color:#4b5563}
.search-bar{display:flex;gap:8px;justify-content:center}
.search-bar input{width:100%;max-width:480px;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text)}

/* Sections */
.tools-section{max-width:1200px;margin:40px auto;padding:0 16px}
.tools-section h2{margin:0 0 12px;color:var(--primary)}

/* Tools grid */
.tools-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:16px}
@media(min-width:640px){.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.tools-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.tool-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s,transform .05s}
.tool-card:hover{box-shadow:0 10px 24px rgba(2,6,23,.12);transform:translateY(-1px)}
.tool-card h3{margin:0;font-size:1.05rem}
.tool-card p{margin:0;color:#6b7280;font-size:.95rem}
.tool-card .actions{margin-top:auto;display:flex;gap:8px}
.tool-card a{color:#fff;text-decoration:none}

/* Footer */
.site-footer{max-width:1200px;margin:40px auto;padding:16px;color:#6b7280;text-align:center}

/* Accessibility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--secondary);outline-offset:2px;border-radius:6px}

/* Ad placeholders */
.ad-section{max-width:1200px;margin:20px auto;padding:0 16px}
.ad-space{background:#ddd;color:#111;height:100px;display:flex;align-items:center;justify-content:center;border:1px dashed #bbb;border-radius:10px;margin:16px auto}

/* Responsive Ad container to guide Google auto sizing */
.ad-responsive{display:flex;justify-content:center;margin:16px auto}
.ad-responsive .ad-box{width:100%}
@media(max-width:767px){
  .ad-responsive{max-width:320px}
}
@media(min-width:768px) and (max-width:1023px){
  .ad-responsive{max-width:728px}
}
@media(min-width:1024px){
  .ad-responsive{max-width:970px}
}

/* Contact CTA styling */
.contact-cta .ad-space{
  height:auto;
  padding:28px 16px;
  background:linear-gradient(180deg,var(--secondary),var(--primary));
  color:#fff;
  border:none;
}
.contact-cta .contact-cta-content{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;max-width:900px;width:100%}
.contact-cta .contact-cta-text h3{margin:0 0 6px}
.contact-cta .contact-cta-text p{margin:0;opacity:.95}
.contact-cta .btn-primary{
  font-size:1.05rem;
  padding:12px 18px;
  box-shadow:0 8px 20px rgba(30,58,138,.35);
}

/* SERP preview helpers */
.counter{font-size:12px;color:#6b7280;margin-top:4px}
.toggle-group{display:flex;gap:8px;margin:8px 0}
.toggle-group .btn-secondary.active{background:#cfd4da}

/* Badges */
.badge{display:inline-block;padding:2px 6px;border-radius:999px;font-size:12px;line-height:1;border:1px solid var(--border);background:var(--card);color:var(--text)}
.badge-warn{border-color:#b91c1c;color:#b91c1c;background:#fee2e2}

/* Responsive adjustments */
@media(max-width:1023px){
  .master-nav-inner{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;padding:8px 20px 20px 172px;gap:24px}
}

@media(max-width:768px){
  .topbar-inner{flex-wrap:wrap;row-gap:8px}
  .nav-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center}
  .nav-menu{position:absolute;right:16px;top:64px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 28px rgba(2,6,23,.15);padding:10px;display:none;flex-direction:column;gap:6px;min-width:200px;z-index:20}
  .nav-menu a{padding:10px 12px 8px 172px}
  .nav-menu.open{display:flex}
}