/* ===============================
   Aadhithyaa Infometa - Updated style.css
   =============================== */

:root{
  --bg:#0b0f26;
  --accent1:#7b3ff6;
  --accent2:#04d9ff;
  --text:#e6f7ff;
  --muted:#bcd7ee;
  --card:rgba(255,255,255,0.03);
  --border:rgba(255,255,255,0.06);
}

/* ---------- Reset & Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Inter",system-ui,Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 85% 10%, rgba(123,63,246,0.06), transparent),
    radial-gradient(circle at 10% 90%, rgba(4,217,255,0.04), transparent),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  padding-bottom:40px;
  -moz-osx-font-smoothing:grayscale;
}

/* Background image + overlay (optional file background.png) */
.bg{position:fixed;inset:0;background:url('background.png') center/cover no-repeat;filter:brightness(0.55) saturate(0.9);z-index:-2}
.overlay{position:fixed;inset:0;background:linear-gradient(180deg,rgba(4,6,18,0.55),rgba(4,6,18,0.7));z-index:-1}

/* ---------- Header & Branding ---------- */
header.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:nowrap;
  gap:16px;
  padding:14px 24px;
  background:rgba(255,255,255,0.02);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(6px);
  width:100%;
  position:relative;
  z-index:120;
  box-sizing:border-box;
}

/* Brand/logo */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  min-width:0;
}
.logo-img{height:48px;width:auto;object-fit:contain}
.brand-title{font-weight:700;white-space:nowrap}
.brand-sub{font-size:12px;color:var(--muted)}

/* ---------- Desktop Navigation (single row) ---------- */
nav.main-nav-desktop{
  display:flex;
  align-items:center;
  gap:18px;
  flex-grow:1;      /* let nav occupy remaining space */
  justify-content:flex-end;
  min-width:0;
  flex-wrap:nowrap;
  overflow-x:auto;  /* if very narrow, allow horizontal scroll instead of wrapping */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
nav.main-nav-desktop::-webkit-scrollbar{height:6px}
nav.main-nav-desktop a{
  color:var(--muted);
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
  padding:6px 8px;
  border-radius:6px;
  transition:color .22s ease, background .22s ease;
}
nav.main-nav-desktop a:hover,
nav.main-nav-desktop a:focus{
  color:var(--accent2);
  outline:none;
  background:rgba(255,255,255,0.01);
}

/* ---------- Mobile Hamburger ---------- */
.nav-toggle{
  display:none; /* shown on mobile via media query */
  background:transparent;
  border:1px solid rgba(255,255,255,0.04);
  padding:8px;
  border-radius:8px;
  cursor:pointer;
  color:var(--text);
  z-index:130;
}
.hamburger{
  display:inline-block;
  width:20px;
  height:2px;
  background:var(--text);
  position:relative;
}
.hamburger::before,.hamburger::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:var(--text);
  transition:transform .22s ease,opacity .22s ease;
}
.hamburger::before{top:-6px}
.hamburger::after{top:6px}
.nav-toggle[aria-expanded="true"] .hamburger{background:transparent}
.nav-toggle[aria-expanded="true"] .hamburger::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .hamburger::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- Mobile Dropdown Nav (collapsible) ---------- */
.nav-collapsible{
  overflow:hidden;
  max-height:0;
  background:rgba(255,255,255,0.02);
  border-top:1px solid rgba(255,255,255,0.05);
  transition:max-height .26s ease;
}
.nav-collapsible.open{max-height:420px} /* enough for the links */

/* list styling */
.nav-list{list-style:none;margin:0;padding:8px 0}
.nav-list li{margin:0}
.nav-list a{
  display:block;
  padding:10px 16px;
  color:var(--text);
  text-decoration:none;
  border-radius:8px;
}
.nav-list a:hover,.nav-list a:focus{
  background:rgba(255,255,255,0.03);
  color:var(--accent2);
  outline:none;
}

/* ---------- Hide/Show desktop vs mobile nav ---------- */
@media (max-width:880px){
  nav.main-nav-desktop{display:none}
  .nav-toggle{display:inline-flex}
  /* ensure collapsible area visible in document flow */
  .nav-collapsible{display:block}
}
@media (min-width:881px){
  .nav-collapsible{display:none !important}
}

/* ---------- Layout, Hero, Content ---------- */
.container{max-width:none;width:100%;margin:0;padding:0}
.content-wrap{width:100%}
main, section, .hero{padding-left:24px;padding-right:24px}
.hero{
  background:var(--card);
  padding:20px;
  border-radius:10px;
  border:1px solid var(--border);
  display:block;
  width:100%;
  box-sizing:border-box;
}
h1{
  font-size:1.8rem;
  margin-bottom:8px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  font-weight:800;
}
h2{margin-bottom:8px;color:var(--text)}
p,ul{color:var(--muted);margin-bottom:10px}
ul{margin-left:18px}

/* ---------- Buttons ---------- */
.btn{display:inline-block;padding:10px 14px;border-radius:8px;border:0;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#02102a;font-weight:700;text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,0.05)}

/* ---------- Quick Facts (no sidebar) ---------- */
.right, aside.right{
  width:100%;
  display:block;
  float:none;
  margin:12px 0 0 0;
  padding:14px;
  border-radius:10px;
  box-sizing:border-box;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.02);
}
.right h3{color:var(--text);margin-bottom:8px}
.right p,.right ul{color:var(--muted);font-size:0.95rem}

/* ---------- Sections ---------- */
section{
  margin-top:18px;
  background:rgba(255,255,255,0.02);
  padding:14px 24px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.02);
}

/* ---------- Forms ---------- */
form{display:flex;flex-direction:column;gap:10px;margin-top:8px}
label{font-size:13px;color:var(--muted)}
input,textarea{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.05);background:transparent;color:var(--text)}
.status{font-size:0.9rem;color:var(--muted);margin-top:4px}

/* ---------- Footer ---------- */
footer{width:100%;text-align:center;color:var(--muted);margin-top:28px;border-top:1px solid rgba(255,255,255,0.05);padding:16px}

/* ---------- Full-width adjustments ---------- */
body, main, .container { max-width:none; width:100%; margin:0; padding:0; }
.hero, section { width:100%; border-radius:0; margin-left:0; margin-right:0; }
.container { background:transparent; box-shadow:none; }
p, li { max-width:100%; line-height:1.6 }

/* ---------- Readability for very wide screens ---------- */
@media (min-width:1400px){
  main, section, .hero { max-width:1200px; margin-left:auto; margin-right:auto; }
}

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- Helpful small tweaks ---------- */
/* ensure nav links have a little breathing room when scrolled horizontally */
nav.main-nav-desktop{padding-bottom:6px}