/* Reset and base styles */
*{margin:0;padding:0;box-sizing:border-box}

body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  line-height:1.6;
  color:#333;
  background-color:#f5f5f5;
}

.container{max-width:1200px;margin:0 auto}

/* Header */
.header{
  background:#000;
  color:#fff;
  padding:1rem 0;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  position:relative;
  z-index:1500;
}
.header-content{display:flex;justify-content:space-between;align-items:center;position:relative}

.logo,.logo-fallback{font-size:1.8rem;font-weight:700}
.logo a{color:#fff;text-decoration:none}
.logo-svg{height:50px;width:auto;display:block}
.logo-fallback{display:none;color:#fff}

.main-nav ul{display:flex;list-style:none;gap:2rem; }
.main-nav.active ul{ flex-direction: column;}
.main-nav a{color:#fff;text-decoration:none;transition:opacity .3s}
.main-nav a:hover{opacity:.8}

/* Buttons */
.btn{
  display:inline-block;
  padding:.75rem 1.5rem;
  border:none;
  border-radius:5px;
  text-decoration:none;
  font-weight:500;
  cursor:pointer;
  transition:all .3s;
  text-align:center;
}
.btn-primary,.btn-secondary{border-radius:15px;color:#fff}
.btn-primary{background:#667eea}
.btn-primary:hover{background:#5a6fd8;transform:translateY(-1px)}
.btn-secondary{background:#6c757d}
.btn-secondary:hover{background:#5a6268}
.btn-full{width:100%}
.btn-large{padding:1rem 2rem;font-size:1.1rem}

/* Forms */
.auth-form,.contact-form{
  max-width:500px;
  margin:2rem auto;
  background:#fff;
  padding:2rem;
  border-radius:10px;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
}
.form-group{margin-bottom:1.5rem}
.form-row{display:flex;gap:1rem}
.form-row .form-group{flex:1}

label{display:block;margin-bottom:.5rem;font-weight:500}
input,textarea,select{
  width: 100%;
  padding:.75rem;
  border:1px solid #ddd;
  border-radius:5px;
  font-size:1rem;
  cursor:pointer;
}
textarea{resize:vertical;min-height:120px}
body input[type="radio"]:where(:not(.tariff-builder__input):not(.sr-only):not([hidden])){
  appearance:auto;
  width:18px;
  min-width:18px;
  height:18px;
  min-height:18px;
  margin:0;
  padding:0;
  flex-shrink:0;
  vertical-align:middle;
  accent-color:var(--fg-link,#4f46e5);
}

/* Alerts */
.alert{padding:1rem;border-radius:5px;margin-bottom:1rem}
.alert-error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}
.alert-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.alert ul{margin:0;padding-left:1.5rem}

/* Screen reader only */
.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;
}

/* Page content */
.page-content{padding:2rem 0}
.page-header{text-align:center;margin-bottom:3rem}
.page-header h1{font-size:2.5rem;margin-bottom:1rem}
.content-section{
  max-width:800px;
  margin:0 auto;
  background:#fff;
  padding:2rem;
  border-radius:10px;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
}
.content-section h2{margin:2rem 0 1rem;color:#667eea}
.content-section h3{margin:1.5rem 0 .5rem}
.content-section p{margin-bottom:1rem}
.content-section ul{margin:1rem 0;padding-left:2rem}

/* Contact page */
.contact-content{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(400px,1fr));
  gap:3rem;
  margin-top:3rem;
}
.contact-details{display:grid;gap:1.5rem}
.contact-item{display:flex;align-items:center;gap:1rem}
.contact-icon{font-size:2rem;width:50px}

/* Articles */
.articles-section{margin-bottom:3rem}
.articles-section h2{color:#667eea;margin-bottom:2rem}
.articles-grid,.related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.5rem;
  margin-bottom:2rem;
}
.article-card,.related-article{
  background:#fff;
  padding:1.5rem;
  border-radius:10px;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
  transition:transform .3s;
}
.article-card:hover,.related-article:hover{transform:translateY(-3px)}
.article-card h3{margin-bottom:1rem}
.article-card h3 a{color:#333;text-decoration:none}
.article-card h3 a:hover{color:#667eea}
.article-excerpt{color:#666;margin-bottom:1rem}
.article-meta{display:flex;justify-content:space-between;align-items:center}
.article-date{color:#999;font-size:.9rem}
.read-more{color:#667eea;text-decoration:none;font-weight:500}
.read-more:hover{text-decoration:underline}
.article-content{
  background:#fff;
  padding:2rem;
  border-radius:10px;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
  margin:2rem 0;
  line-height:1.8;
}
.article-footer{text-align:center;margin-top:3rem}

/* Footer */
.footer{
  background:rgba(10,17,34,.92);
  color:#e5e7eb;
  border-top:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  padding:3rem 0 1rem;
  margin-top:4rem;
}
.footer-content{
  display:flex;
  flex-wrap:wrap;
  gap:2rem;
  margin-bottom:2rem;
}
.footer h3{margin-bottom:1rem;color:#f8fafc}
.footer ul{list-style:none}
.footer a{color:#f8fafc;text-decoration:none;transition:color .3s}
.footer a:hover{color:#a5b4fc}
.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,.12)}
.footer-contact-row{display:flex;align-items:center;gap:.55rem;margin:0 0 .55rem}
.footer-contact-icon{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}
.footer-contact-icon img{display:block}
.footer-brand{max-width:300px}

/* Unified heading rhythm across the site */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  line-height: 1.25 !important;
}

/* Mobile menu */
.mobile-menu-toggle{display:none;flex-direction:column;cursor:pointer}
.mobile-menu-toggle span{
  width:25px;height:3px;
  background:#fff;
  margin:3px 0;
  transition:.3s;
}

/* Responsive (merged) */
@media (max-width:768px){
  .logo-svg{height:35px}

  .main-nav ul{flex-wrap:wrap;justify-content:center;gap:1rem}

  .form-row{flex-direction:column}
  .contact-content{grid-template-columns:1fr}
  .articles-grid,.related-grid{grid-template-columns:1fr}

  /* Mobile menu behavior */
  .mobile-menu-toggle{display:flex;z-index:5}
  .main-nav{
    display:none;
    position:absolute;
    top:100%;
    right:0;
    background:rgba(0,0,0,.9);
    backdrop-filter:blur(10px);
    opacity:0;
    transform:translateY(-10px);
    transition:all .3s ease;
  }
  .main-nav.active{
    display:block;
    opacity:1;
    transform:translateY(0);
    z-index:2000;
    width:min(320px,85vw);
    padding-bottom:1rem;
    margin-top:8px;
    border-radius:15px;
  }

  .mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .mobile-menu-toggle.active span:nth-child(2){opacity:0}
  .mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

  .main-nav ul{text-align:center;gap:1rem;padding-left:2rem}

}

/* Mobile menu styles */
.mobile-menu {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.mobile-menu li {
    border-bottom: 1px solid #dee2e6;
}

.mobile-menu li:last-child {
    border-bottom: none;
}

.mobile-menu a {
    display: block;
    padding: 1rem;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.mobile-menu a:hover,
.mobile-menu a.active {
    background: #f8f9fa;
    color: #007bff;
}

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    margin-left: 1rem;
}

.mobile-menu-toggle span {
    width: 25px;
    height: 3px;
    background: #ffffff;
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

@media (max-width: 768px) {
    .main-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .mobile-menu.active {
        display: block;
    }

}