/*==============================================================================
    FILE        : public/assets/css/frontend/header.css
    PROJECT     : GyanPeeth Academy
    FRAMEWORK   : CodeIgniter 4
    VERSION     : 3.0.0

    DESCRIPTION
    --------------------------------------------------------------------------
    Premium Responsive Header

    CONTENTS

    1. Root Variables
    2. Header Base
    3. Announcement Bar
    4. Marquee
    5. Utility
==============================================================================*/

/*==============================================================================
    ROOT VARIABLES
==============================================================================*/

:root {
  --header-height: 82px;

  --topbar-height: 42px;

  --header-radius: 18px;

  --header-blur: 20px;

  --header-transition: 0.35s ease;

  --header-shadow: 0 12px 35px rgba(15, 23, 42, 0.08);
}

/*==============================================================================
    RESET
==============================================================================*/

#feHeader,
#feHeader * {
  box-sizing: border-box;
}

/*==============================================================================
    ANNOUNCEMENT BAR
==============================================================================*/

.fe-topbar {
  position: relative;

  z-index: 1100;

  overflow: hidden;

  height: var(--topbar-height);

  display: flex;

  align-items: center;

  color: #fff;

  background: linear-gradient(90deg, #2563eb, #1d4ed8, #f97316);

  box-shadow: inset 0 -1px rgba(255, 255, 255, 0.08);
}

.fe-topbar::before {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.08),
    transparent
  );

  animation: feTopGlow 6s linear infinite;
}

/*==============================================================================
    WRAPPER
==============================================================================*/

.fe-topbar-wrapper {
  display: flex;

  align-items: center;

  gap: 20px;

  width: 100%;
}

/*==============================================================================
    BADGE
==============================================================================*/

.fe-topbar-badge {
  display: flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;

  padding: 7px 14px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.18);

  backdrop-filter: blur(10px);

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.3px;
}

.fe-topbar-badge i {
  color: #facc15;
}

/*==============================================================================
    MARQUEE
==============================================================================*/

.fe-topbar-marquee {
  position: relative;

  flex: 1;

  overflow: hidden;

  white-space: nowrap;
}

.fe-topbar-track {
  display: inline-flex;

  align-items: center;

  white-space: nowrap;

  animation: feMarquee 34s linear infinite;

  will-change: transform;
}

.fe-topbar-track span {
  display: inline-flex;

  align-items: center;

  gap: 18px;

  padding-right: 120px;

  font-size: 14px;

  font-weight: 500;
}

/*==============================================================================
    CONTACT
==============================================================================*/

.fe-topbar-contact {
  display: flex;

  align-items: center;

  gap: 18px;

  flex-shrink: 0;
}

.fe-topbar-contact a {
  display: flex;

  align-items: center;

  gap: 8px;

  color: #fff;

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;

  transition: all 0.25s ease;
}

.fe-topbar-contact a:hover {
  opacity: 0.85;
}

/*==============================================================================
    ANIMATIONS
==============================================================================*/

@keyframes feMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes feTopGlow {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(100%);
  }
}

/*==============================================================================
    RESPONSIVE
==============================================================================*/

@media (max-width: 992px) {
  .fe-topbar-contact {
    display: none;
  }
}

@media (max-width: 768px) {
  .fe-topbar {
    height: 38px;
  }

  .fe-topbar-badge {
    display: none;
  }

  .fe-topbar-wrapper {
    gap: 0;
  }

  .fe-topbar-track span {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .fe-topbar {
    height: 36px;
  }

  .fe-topbar-track {
    animation-duration: 28s;
  }
}
/*==============================================================================
    STICKY HEADER
==============================================================================*/

.fe-header {
  position: sticky;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1200;

  transition: all var(--header-transition);

  background: rgba(255, 255, 255, 0.88);

  backdrop-filter: blur(var(--header-blur));

  -webkit-backdrop-filter: blur(var(--header-blur));

  border-bottom: 1px solid rgba(226, 232, 240, 0.75);
}

/*------------------------------------------------------------------------------
    Header Scroll State
------------------------------------------------------------------------------*/

.fe-header.scrolled {
  background: rgba(255, 255, 255, 0.95);

  box-shadow: var(--header-shadow);
}

/*------------------------------------------------------------------------------
    Dark Theme
------------------------------------------------------------------------------*/

[data-theme="dark"] .fe-header {
  background: rgba(15, 23, 42, 0.88);

  border-color: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .fe-header.scrolled {
  background: rgba(15, 23, 42, 0.96);
}

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

.fe-navbar {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 32px;

  min-height: var(--header-height);
}

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

.fe-brand {
  display: flex;

  align-items: center;

  gap: 16px;

  flex-shrink: 0;

  text-decoration: none;
}

/*------------------------------------------------------------------------------
    Logo Box
------------------------------------------------------------------------------*/

.fe-brand-logo-box {
  position: relative;

  width: 60px;

  height: 60px;

  border-radius: 18px;

  overflow: hidden;

  flex-shrink: 0;

  background: linear-gradient(135deg, #2563eb, #1d4ed8);

  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
}

/* Soft Glow */

.fe-brand-logo-box::before {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent);
}

/*------------------------------------------------------------------------------
    Logo
------------------------------------------------------------------------------*/

.fe-brand-logo {
  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;
}

/*------------------------------------------------------------------------------
    Fallback
------------------------------------------------------------------------------*/

.fe-brand-fallback {
  display: none;

  width: 100%;

  height: 100%;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 24px;

  font-weight: 800;

  letter-spacing: 0.5px;
}

.fe-brand-fallback.show {
  display: flex;
}

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

.fe-brand-text {
  display: flex;

  flex-direction: column;

  justify-content: center;
}

/*------------------------------------------------------------------------------
    Institute Name
------------------------------------------------------------------------------*/

.fe-brand-title {
  font-family: "Outfit", sans-serif;

  font-size: 24px;

  font-weight: 800;

  color: #0f172a;

  line-height: 1.1;

  transition: 0.3s;
}

/*------------------------------------------------------------------------------
    Tagline
------------------------------------------------------------------------------*/

.fe-brand-subtitle {
  margin-top: 4px;

  font-size: 13px;

  font-weight: 500;

  color: #64748b;

  letter-spacing: 0.25px;
}

/*------------------------------------------------------------------------------
    Hover
------------------------------------------------------------------------------*/

.fe-brand:hover .fe-brand-title {
  color: #2563eb;
}

.fe-brand:hover .fe-brand-logo-box {
  transform: translateY(-2px);
}

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

[data-theme="dark"] .fe-brand-title {
  color: #f8fafc;
}

[data-theme="dark"] .fe-brand-subtitle {
  color: #cbd5e1;
}

/*==============================================================================
    RESPONSIVE
==============================================================================*/

@media (max-width: 1200px) {
  .fe-navbar {
    gap: 24px;
  }

  .fe-brand-title {
    font-size: 22px;
  }
}

@media (max-width: 992px) {
  .fe-navbar {
    min-height: 74px;
  }

  .fe-brand-logo-box {
    width: 54px;

    height: 54px;

    border-radius: 16px;
  }

  .fe-brand-title {
    font-size: 20px;
  }

  .fe-brand-subtitle {
    display: none;
  }
}

@media (max-width: 768px) {
  .fe-navbar {
    min-height: 70px;

    gap: 16px;
  }

  .fe-brand {
    gap: 12px;
  }

  .fe-brand-logo-box {
    width: 48px;

    height: 48px;

    border-radius: 14px;
  }

  .fe-brand-title {
    font-size: 18px;
  }
}

@media (max-width: 576px) {
  .fe-navbar {
    min-height: 66px;
  }

  .fe-brand-logo-box {
    width: 44px;

    height: 44px;

    border-radius: 12px;
  }

  .fe-brand-title {
    font-size: 16px;

    max-width: 180px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
  }
}
/*==============================================================================
    DESKTOP NAVIGATION
==============================================================================*/

.fe-nav-menu {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-left: auto;
}

/*------------------------------------------------------------------------------
    Navigation Link
------------------------------------------------------------------------------*/

.fe-nav-menu > a {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 46px;

  padding: 0 18px;

  border-radius: 14px;

  text-decoration: none;

  color: var(--color-text, #334155);

  font-size: 15px;

  font-weight: 600;

  letter-spacing: 0.2px;

  transition: all 0.3s ease;
}

/* Hover */

.fe-nav-menu > a:hover {
  color: #2563eb;

  background: #eff6ff;
}

/* Active */

.fe-nav-menu > a.active {
  color: #2563eb;

  background: #dbeafe;
}

/* Bottom Indicator */

.fe-nav-menu > a::after {
  content: "";

  position: absolute;

  left: 18px;

  right: 18px;

  bottom: 7px;

  height: 3px;

  border-radius: 30px;

  background: #2563eb;

  transform: scaleX(0);

  transform-origin: center;

  transition: 0.3s;
}

.fe-nav-menu > a:hover::after,
.fe-nav-menu > a.active::after {
  transform: scaleX(1);
}

/*==============================================================================
    RIGHT ACTIONS
==============================================================================*/

.fe-nav-actions {
  display: flex;

  align-items: center;

  gap: 12px;

  flex-shrink: 0;
}

/*==============================================================================
    COMMON ICON BUTTON
==============================================================================*/

.fe-icon-btn {
  width: 46px;

  height: 46px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: none;

  border-radius: 14px;

  cursor: pointer;

  color: #334155;

  background: #f8fafc;

  transition: 0.3s;
}

.fe-icon-btn:hover {
  color: #fff;

  background: #2563eb;

  transform: translateY(-2px);

  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

.fe-icon-btn i {
  font-size: 18px;
}

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

.fe-mobile-call {
  display: none;

  width: 46px;

  height: 46px;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  border-radius: 14px;

  color: #2563eb;

  background: #eff6ff;

  transition: 0.3s;
}

.fe-mobile-call:hover {
  color: #fff;

  background: #2563eb;
}

/*==============================================================================
    PREMIUM BUTTON
==============================================================================*/

.fe-btn {
  position: relative;

  overflow: hidden;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  min-height: 48px;

  padding: 0 22px;

  border-radius: 14px;

  font-size: 15px;

  font-weight: 700;

  text-decoration: none;

  transition: 0.3s;

  white-space: nowrap;
}

/* Shine Effect */

.fe-btn::before {
  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );

  transition: 0.7s;
}

.fe-btn:hover::before {
  left: 120%;
}

/*==============================================================================
    PRIMARY BUTTON
==============================================================================*/

.fe-btn-primary {
  color: #fff;

  background: linear-gradient(135deg, #25d366, #18b955);

  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.22);
}

.fe-btn-primary:hover {
  transform: translateY(-2px);

  box-shadow: 0 18px 35px rgba(37, 211, 102, 0.3);
}

/*==============================================================================
    OUTLINE BUTTON
==============================================================================*/

.fe-btn-outline {
  color: #2563eb;

  border: 2px solid #2563eb;

  background: #fff;
}

.fe-btn-outline:hover {
  color: #fff;

  background: #2563eb;
}

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

[data-theme="dark"] .fe-nav-menu > a {
  color: #e2e8f0;
}

[data-theme="dark"] .fe-nav-menu > a:hover {
  background: #1e293b;
}

[data-theme="dark"] .fe-nav-menu > a.active {
  background: #1e3a5f;
}

[data-theme="dark"] .fe-icon-btn {
  color: #f8fafc;

  background: #1e293b;
}

[data-theme="dark"] .fe-btn-outline {
  color: #fff;

  background: transparent;

  border-color: #3b82f6;
}

[data-theme="dark"] .fe-btn-outline:hover {
  background: #2563eb;
}

/*==============================================================================
    RESPONSIVE
==============================================================================*/

@media (max-width: 1200px) {
  .fe-nav-menu {
    gap: 4px;
  }

  .fe-nav-menu > a {
    padding: 0 14px;

    font-size: 14px;
  }
}

@media (max-width: 992px) {
  .fe-nav-menu {
    display: none;
  }

  .fe-btn {
    display: none;
  }

  .fe-mobile-call {
    display: flex;
  }
}

@media (max-width: 576px) {
  .fe-nav-actions {
    gap: 8px;
  }

  .fe-icon-btn,
  .fe-mobile-call {
    width: 42px;

    height: 42px;
  }
}
/*==============================================================================
    MOBILE NAVIGATION SYSTEM
==============================================================================*/

/*------------------------------------------------------------------------------
    Hamburger Button
------------------------------------------------------------------------------*/

.fe-nav-toggle {
  position: relative;

  width: 48px;

  height: 48px;

  display: none;

  align-items: center;

  justify-content: center;

  border: none;

  cursor: pointer;

  border-radius: 16px;

  background: #f8fafc;

  transition: all 0.35s ease;
}

.fe-nav-toggle:hover {
  background: #2563eb;

  transform: translateY(-2px);
}

.fe-nav-toggle:hover span {
  background: #fff;
}

/*------------------------------------------------------------------------------
    Hamburger Lines
------------------------------------------------------------------------------*/

.fe-nav-toggle span {
  position: absolute;

  width: 22px;

  height: 2px;

  border-radius: 999px;

  background: #0f172a;

  transition: 0.35s;
}

.fe-nav-toggle span:nth-child(1) {
  transform: translateY(-7px);
}

.fe-nav-toggle span:nth-child(2) {
  opacity: 1;
}

.fe-nav-toggle span:nth-child(3) {
  transform: translateY(7px);
}

/*------------------------------------------------------------------------------
    Active Animation
------------------------------------------------------------------------------*/

.fe-nav-toggle.active {
  background: #2563eb;
}

.fe-nav-toggle.active span {
  background: #fff;
}

.fe-nav-toggle.active span:nth-child(1) {
  transform: rotate(45deg);
}

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

.fe-nav-toggle.active span:nth-child(3) {
  transform: rotate(-45deg);
}

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

.fe-mobile-overlay {
  position: fixed;

  inset: 0;

  opacity: 0;

  visibility: hidden;

  z-index: 1298;

  background: rgba(15, 23, 42, 0.55);

  backdrop-filter: blur(5px);

  transition: 0.35s;
}

.fe-mobile-overlay.active {
  opacity: 1;

  visibility: visible;
}

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

.fe-mobile-drawer {
  position: fixed;

  top: 0;

  left: -360px;

  width: 340px;

  max-width: 90%;

  height: 100vh;

  display: flex;

  flex-direction: column;

  background: #fff;

  z-index: 1299;

  overflow: hidden;

  transition: left 0.35s ease;

  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
}

.fe-mobile-drawer.active {
  left: 0;
}

/*==============================================================================
    DRAWER HEADER
==============================================================================*/

.fe-mobile-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 22px;

  border-bottom: 1px solid #e2e8f0;
}

/*------------------------------------------------------------------------------
    Mobile Brand
------------------------------------------------------------------------------*/

.fe-mobile-brand {
  display: flex;

  align-items: center;

  gap: 14px;
}

.fe-mobile-brand img {
  width: 52px;

  height: 52px;

  object-fit: cover;

  border-radius: 14px;
}

.fe-mobile-logo-fallback {
  display: none;

  width: 52px;

  height: 52px;

  border-radius: 14px;

  align-items: center;

  justify-content: center;

  background: #2563eb;

  color: #fff;

  font-size: 22px;

  font-weight: 700;
}

.fe-mobile-brand h4 {
  margin: 0;

  font-size: 17px;

  color: #0f172a;
}

.fe-mobile-brand small {
  display: block;

  margin-top: 4px;

  color: #64748b;

  font-size: 12px;
}

/*------------------------------------------------------------------------------
    Close Button
------------------------------------------------------------------------------*/

.fe-mobile-close {
  width: 42px;

  height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: none;

  cursor: pointer;

  border-radius: 12px;

  background: #f8fafc;

  transition: 0.3s;
}

.fe-mobile-close:hover {
  background: #ef4444;

  color: #fff;
}

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

.fe-mobile-nav {
  flex: 1;

  overflow: auto;

  display: flex;

  flex-direction: column;

  padding: 20px;

  gap: 6px;
}

.fe-mobile-nav a {
  display: flex;

  align-items: center;

  gap: 16px;

  padding: 15px 18px;

  border-radius: 14px;

  text-decoration: none;

  color: #334155;

  font-size: 15px;

  font-weight: 600;

  transition: 0.25s;
}

.fe-mobile-nav a i {
  width: 22px;

  color: #2563eb;

  text-align: center;
}

.fe-mobile-nav a:hover {
  background: #eff6ff;

  color: #2563eb;

  transform: translateX(4px);
}

.fe-mobile-nav a.active {
  color: #2563eb;

  background: #dbeafe;
}

/*==============================================================================
    DIVIDER
==============================================================================*/

.fe-mobile-divider {
  height: 1px;

  margin: 8px 20px;

  background: #e2e8f0;
}

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

.fe-mobile-actions {
  display: flex;

  flex-direction: column;

  gap: 12px;

  padding: 20px;
}

.fe-mobile-btn {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  padding: 15px;

  border-radius: 14px;

  text-decoration: none;

  font-size: 15px;

  font-weight: 700;

  transition: 0.3s;
}

.fe-mobile-btn:hover {
  transform: translateY(-2px);
}

.fe-mobile-btn-whatsapp {
  color: #fff;

  background: #25d366;
}

.fe-mobile-btn-call {
  color: #fff;

  background: #2563eb;
}

.fe-mobile-btn-admin {
  color: #2563eb;

  border: 2px solid #2563eb;

  background: #fff;
}

.fe-mobile-btn-admin:hover {
  color: #fff;

  background: #2563eb;
}

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

[data-theme="dark"] .fe-mobile-drawer {
  background: #162033;
}

[data-theme="dark"] .fe-mobile-header {
  border-color: #2e3a4f;
}

[data-theme="dark"] .fe-mobile-brand h4 {
  color: #f8fafc;
}

[data-theme="dark"] .fe-mobile-brand small {
  color: #cbd5e1;
}

[data-theme="dark"] .fe-mobile-nav a {
  color: #e2e8f0;
}

[data-theme="dark"] .fe-mobile-nav a:hover,
[data-theme="dark"] .fe-mobile-nav a.active {
  background: #1e3a5f;
}

[data-theme="dark"] .fe-mobile-close {
  background: #1e293b;

  color: #fff;
}

[data-theme="dark"] .fe-mobile-btn-admin {
  background: transparent;

  color: #fff;

  border-color: #3b82f6;
}

/*==============================================================================
    RESPONSIVE
==============================================================================*/

@media (max-width: 992px) {
  .fe-nav-toggle {
    display: flex;
  }
}

@media (max-width: 480px) {
  .fe-mobile-drawer {
    width: 100%;

    max-width: 100%;
  }
}