/* ============================
   NEPAL FLAG COLOR VARIABLES
============================ */
:root {
  --nepal-red:#bf0a30;
  --nepal-blue:#003893;
  --bg:#fbfbfd;
  --card-bg: rgba(255,255,255,0.94);
  --muted:#6b6b6b;
  --text:#111;
}
:root.dark {
  --bg:#07080a;
  --card-bg: rgba(12,12,14,0.92);
  --muted:#bdbdbd;
  --text:#e9e9e9;
}

/* ============================
   BASE STYLES
============================ */
* { box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  background:
    linear-gradient(180deg, rgba(0,56,147,0.05), transparent 40%),
    linear-gradient(180deg, transparent 60%, rgba(191,10,48,0.05)),
    var(--bg);
  color:var(--text);
}

a { color:var(--nepal-blue); }
.container { max-width:1100px; margin:28px auto; padding:0 16px; }

/* ============================
   HEADER
============================ */
.site-header {
  position:sticky; top:0; z-index:70;
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
  background: linear-gradient(90deg, rgba(255,255,255,0.66), rgba(255,255,255,0.2));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
:root.dark .site-header {
  background: linear-gradient(90deg, rgba(8,9,12,0.85), rgba(8,9,12,0.4));
  border-bottom:1px solid rgba(255,255,255,0.04);
}

.brand { display:flex; gap:12px; align-items:center; }
.logo {
  width:48px; height:48px; border-radius:8px;
  overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--nepal-blue),var(--nepal-red));
  color:white; font-weight:800;
}
.logo img { width:100%; height:100%; object-fit:cover; display:block; }

.brand-text .name { font-weight:800; color:var(--text); }
.brand-text .sub { font-size:13px; color:var(--muted); }

/* NAVIGATION */
.main-nav { display:flex; align-items:center; gap:10px; }
.main-nav a {
  padding:8px 10px; border-radius:8px;
  font-weight:700; text-decoration:none; color:inherit;
}
.main-nav a.active {
  background:linear-gradient(135deg,var(--nepal-red),var(--nepal-blue));
  color:white;
}
@media (max-width:900px) {
  .main-nav a:not(.active){ display:none; }
}

/* ============================
   PAGE CONTENT CARDS
============================ */
.card {
  background:var(--card-bg);
  padding:20px;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(8,8,15,0.06);
  margin-bottom:18px;
  color:var(--text);
}
.lead { color:var(--muted); }

.two-col {
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
@media (max-width:800px){ .two-col{ grid-template-columns:1fr; } }

/* ============================
   FIXED WIDGET BASE
============================ */
.widget{
  position:fixed;
  padding:10px;
  border-radius:12px;
  box-shadow:0 12px 36px rgba(0,0,0,0.10);
  background:var(--card-bg);
  z-index:120;
  color:var(--text);
}

/* WEATHER */
.weather{
  right:20px; top:90px;
  width:240px; display:flex; gap:12px; align-items:center;
}
.weather-icon{
  width:60px; height:60px; border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--nepal-blue),var(--nepal-red));
  color:white; font-weight:800;
}
.weather .muted{ color:var(--muted); font-size:13px; }

/* CHAT */
.chat-placeholder { right:20px; bottom:260px; }

/* VISITOR COUNTER (BOTTOM-LEFT) */
#visitorWidget {
  bottom:20px; left:20px;
  min-width:220px; border-radius:10px;
  background:rgba(255,255,255,0.85);
  color:#111;
}
:root.dark #visitorWidget {
  background:rgba(0,0,0,0.75); color:white;
}

/* NEPALI CLOCK (BOTTOM-RIGHT) */
#nepaliClockWidget{
  right:20px; bottom:20px;
  width:260px; height:130px;
  padding:0;
}
#nepaliClockWidget iframe{
  width:100%; height:100%; border-radius:10px;
}

/* Mobile */
@media (max-width:700px){
  #nepaliClockWidget{ right:12px; bottom:20px; }
  #visitorWidget{ left:12px; bottom:20px; }
}

/* DARK MODE IFRAME TINT */
:root.dark iframe { filter: brightness(0.85); }

/* ============================
   BUTTONS
============================ */
.btn{
  border:none; padding:8px 10px; border-radius:8px;
  cursor:pointer; color:var(--text);
  background:transparent; border:1px solid rgba(0,0,0,0.06);
}
:root.dark .btn{ border:1px solid rgba(255,255,255,0.06); }

.btn-primary{
  background:linear-gradient(135deg,var(--nepal-blue),var(--nepal-red));
  color:white; font-weight:800;
}

/* ============================
   FOOTER
============================ */
.nepal-footer{
  background: linear-gradient(135deg, #ce1126 40%, #003893 100%);
  padding:40px 20px;
  color:white;
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  margin-top:32px;
}

.footer-logo{
  width:260px;
  height:auto;
  margin-top:15px;
  animation: gentleFloat 4s ease-in-out infinite;
}

/* FLOAT ANIMATION */
@keyframes gentleFloat{
  0%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
  100%{transform:translateY(0)}
}