/*
FILE:
 /core/styles/components.css

FINALIZED COMPONENT SYSTEM
- V1 emotional UI restoration
- Premium educational interaction surfaces
- Soft immersive navigation
- Mobile-first ergonomics
- Malayalam-safe spacing rhythm
- Scalable reusable component foundation
*/

/* ================= NAVBAR ================= */

.top-navbar{

  width:100%;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

  padding:18px 22px;

  margin-bottom:28px;

  border-radius:30px;

  background:
    rgba(255,255,255,.82);

  backdrop-filter:
    blur(18px);

  border:
    1px solid rgba(255,255,255,.84);

  box-shadow:
    0 18px 44px rgba(0,0,0,.06);

  transition:
    transform var(--transition),
    box-shadow var(--transition);
}

.navbar-left,
.navbar-right{

  display:flex;

  align-items:center;

  gap:14px;
}

/* ================= BRAND ================= */

.nav-brand{

  display:flex;

  align-items:center;

  gap:14px;
}

.nav-logo{

  width:54px;
  height:54px;

  border-radius:20px;

  display:flex;

  align-items:center;

  justify-content:center;

  flex-shrink:0;

  font-size:24px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--blue-light)
    );

  box-shadow:
    0 16px 34px rgba(0,87,255,.20);
}

.nav-title{

  font-size:20px;

  font-weight:900;

  line-height:1.1;

  letter-spacing:-.4px;

  color:
    var(--text);
}

/* ================= NAV BUTTONS ================= */

.nav-back-btn,
.nav-logout-btn{

  border:none;

  outline:none;

  cursor:pointer;

  transition:
    transform var(--transition),
    background var(--transition),
    box-shadow var(--transition);
}

/* ================= BACK BUTTON ================= */

.nav-back-btn{

  width:46px;
  height:46px;

  border-radius:16px;

  display:flex;

  align-items:center;

  justify-content:center;

  background:
    rgba(0,87,255,.08);

  color:
    var(--blue);

  font-size:20px;

  font-weight:900;
}

.nav-back-btn:hover{

  transform:
    translateY(-1px);

  background:
    rgba(0,87,255,.14);
}

/* ================= LOGOUT ================= */

.nav-logout-btn{

  min-height:46px;

  padding:0 18px;

  border-radius:16px;

  font-size:14px;

  font-weight:800;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--blue-light)
    );

  box-shadow:
    0 14px 30px rgba(0,87,255,.18);
}

.nav-logout-btn:hover{

  transform:
    translateY(-2px);

  box-shadow:
    0 18px 36px rgba(0,87,255,.22);
}

/* ================= LANGUAGE TOGGLE ================= */

.language-toggle{

  display:flex;

  align-items:center;

  gap:4px;

  padding:5px;

  border-radius:999px;

  background:
    rgba(255,255,255,.82);

  backdrop-filter:
    blur(16px);

  border:
    1px solid rgba(255,255,255,.82);

  box-shadow:
    0 12px 30px rgba(0,0,0,.06);
}

.language-toggle button,
.language-toggle span{

  border:none;

  outline:none;

  cursor:pointer;

  padding:9px 14px;

  border-radius:999px;

  font-size:13px;

  font-weight:800;

  color:
    var(--text-light);

  background:transparent;

  transition:
    background var(--transition),
    color var(--transition),
    transform var(--transition);
}

.language-toggle .active{

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--blue-light)
    );

  color:#fff;

  box-shadow:
    0 10px 24px rgba(0,87,255,.18);
}

/* ================= SECTION HEADER ================= */

.section-header{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:18px;

  margin-bottom:22px;
}

.section-heading{

  font-size:30px;

  font-weight:900;

  line-height:1.12;

  letter-spacing:-1px;

  color:
    var(--text);
}

.section-subtext{

  margin-top:10px;

  font-size:15px;

  line-height:1.8;

  color:
    var(--text-light);
}

/* ================= PILLS ================= */

.info-pill{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  min-height:40px;

  padding:0 16px;

  border-radius:999px;

  background:
    rgba(0,87,255,.08);

  color:
    var(--blue);

  font-size:13px;

  font-weight:800;
}

/* ================= FOOTER ================= */

.site-footer{

  margin-top:56px;

  padding:36px 24px;

  border-top:
    1px solid rgba(255,255,255,.08);

  background:
    rgba(255,255,255,.48);

  backdrop-filter:
    blur(18px);
}

.footer-container{

  width:100%;

  max-width:1200px;

  margin:0 auto;

  display:flex;

  flex-direction:column;

  gap:28px;
}

/* ================= FOOTER BRAND ================= */

.footer-brand{

  display:flex;

  align-items:center;

  gap:14px;
}

.footer-logo{

  width:50px;
  height:50px;

  border-radius:18px;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:22px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--blue-light)
    );

  box-shadow:
    0 14px 30px rgba(0,87,255,.16);
}

.footer-title{

  font-size:18px;

  font-weight:900;

  color:
    var(--text);
}

.footer-tagline{

  margin-top:4px;

  font-size:14px;

  line-height:1.7;

  color:
    var(--text-light);
}

/* ================= FOOTER LINKS ================= */

.footer-links{

  display:flex;

  flex-wrap:wrap;

  gap:18px;
}

.footer-link{

  position:relative;

  font-size:14px;

  font-weight:700;

  color:
    var(--text-light);

  transition:
    color var(--transition);
}

.footer-link:hover{

  color:
    var(--blue);
}

/* ================= DISCLAIMER ================= */

.footer-disclaimer{

  max-width:760px;

  font-size:14px;

  line-height:1.8;

  color:
    var(--text-light);
}

/* ================= FOOTER BOTTOM ================= */

.footer-bottom{

  padding-top:16px;

  border-top:
    1px solid rgba(255,255,255,.08);

  font-size:13px;

  color:
    var(--text-light);
}

/* ================= DARK MODE ================= */

.theme-dark .top-navbar{

  background:
    rgba(15,23,42,.72);

  border:
    1px solid rgba(255,255,255,.06);
}

.theme-dark .language-toggle{

  background:
    rgba(15,23,42,.82);

  border:
    1px solid rgba(255,255,255,.06);
}

.theme-dark .site-footer{

  background:
    rgba(15,23,42,.52);
}

.theme-dark .info-pill{

  background:
    rgba(59,130,246,.14);

  color:#7dd3fc;
}

/* ================= TABLET ================= */

@media(max-width:1080px){

  .section-heading{

    font-size:28px;
  }
}

/* ================= MOBILE ================= */

@media(max-width:768px){

  .top-navbar{

    padding:16px 16px;

    border-radius:26px;

    margin-bottom:22px;
  }

  .nav-logo{

    width:48px;
    height:48px;

    border-radius:18px;

    font-size:22px;
  }

  .nav-title{

    font-size:17px;
  }

  .nav-logout-btn{

    min-height:42px;

    padding:0 14px;

    font-size:13px;
  }

  .section-header{

    flex-direction:column;

    align-items:flex-start;

    gap:10px;
  }

  .section-heading{

    font-size:26px;

    line-height:1.15;
  }

  .section-subtext{

    font-size:14px;
  }

  .site-footer{

    margin-top:48px;

    padding:30px 18px;
  }

  .footer-links{

    gap:14px;
  }

  .footer-disclaimer{

    font-size:13px;
  }
}