/* ========================================
   MOBILE LOGO PANEL WITH HAMBURGER MENU
   (Add at the bottom of mobile-responsive.css)
   ======================================== */

@media (max-width: 768px) {
  /* Hide Desktop Navigation */
  .ga-nav {
    display: none !important;
  }

  /* Show Mobile Logo Panel */
  .great_andhra_logo_panel-mob {
    display: block !important;
    width: 100% !important;
    background: #fff !important;
  }

  /* Hide Desktop Logo Panel on Mobile */
  .great_andhra_logo_panel {
    display: none !important;
  }

  /* First Row - Logo and Hamburger */
  .logo-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px !important;
    background: #fff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    /* Was 100 - lower than .mobile-overlay (999) and .mobile-nav-wrapper (1000), so once the
       drawer opened, the overlay visually covered the hamburger's own X-shape "close" state
       (it still worked as a toggle, just invisible - looked like there was no close button at
       all). Raised above both so the hamburger (and its X transform) stays visible/on top. */
    z-index: 1002 !important;
  }

  .logo-bar .logo {
    flex-shrink: 0 !important;
  }

  .logo-bar .logo img {
    height: 45px !important;
    width: auto !important;
    display: block !important;
  }

  /* Search + Hamburger group, right-aligned - search comes first (left of the hamburger) */
  .mobile-actions {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .mobile-search-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: #333 !important;
    font-size: 17px !important;
  }

  /* Hamburger Button */
  .hamburger-menu {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 30px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    position: relative !important;
  }

  .hamburger-menu span {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background: #333 !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
  }

  .hamburger-menu.active span:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg) !important;
  }

  .hamburger-menu.active span:nth-child(2) {
    opacity: 0 !important;
  }

  .hamburger-menu.active span:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg) !important;
  }

  /* Mobile Search Bar - collapsed (max-height:0) until #mobileSearchBtn toggles .active */
  .mobile-search-bar {
    max-height: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    transition: max-height 0.3s ease !important;
  }

  .mobile-search-bar.active {
    max-height: 60px !important;
  }

  .mobile-search-form {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .mobile-search-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 36px !important;
    padding: 0 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 18px !important;
    font-size: 14px !important;
    font-family: "lato" !important;
  }

  .mobile-search-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    border: none !important;
    border-radius: 50% !important;
    background: #d0021b !important;
    color: #fff !important;
    cursor: pointer !important;
  }

  /* Mobile Navigation Wrapper */
  .mobile-nav-wrapper {
    position: fixed !important;
    top: 0 !important;
    right: -320px !important;
    width: 280px !important;
    height: 100vh !important;
    background: #fff !important;
    box-shadow: -3px 0 15px rgba(0, 0, 0, 0.2) !important;
    transition: right 0.3s ease-in-out !important;
    z-index: 1000 !important;
    overflow-y: auto !important;
    display: block !important;
  }

  .mobile-nav-wrapper.active {
    right: 0 !important;
  }

  .mobile-nav-content {
    padding: 70px 0 20px 0 !important;
    display: block !important;
  }

  /* Mobile Menu Styles */
  .mobile-menu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }

  .mobile-menu > li {
    border-bottom: 1px solid #eee !important;
    display: block !important;
    width: 100% !important;
  }

  .mobile-menu > li > a {
    display: block !important;
    padding: 16px 25px !important;
    color: #333 !important;
    font-family: "lato";
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    transition: background 0.2s ease !important;
    width: 100% !important;
  }

  .mobile-menu > li > a:hover {
    background: #f5f5f5 !important;
  }

  .mobile-menu > li > a i.fas {
    margin-right: 8px !important;
    color: #666 !important;
  }

  /* Submenu Styles */
  /* Politics/Movies rows - split into a real link (navigates to the category, same as any
     other top-level item) and a separate caret button (toggles the submenu only). Previously
     a single <a class="submenu-toggle"> did both via preventDefault(), so tapping "Politics"
     could only ever open the submenu and never actually navigate there. */
  .has-submenu .submenu-row {
    display: flex !important;
    align-items: stretch !important;
  }

  .has-submenu .submenu-link {
    flex: 1 1 auto !important;
    display: block !important;
    padding: 16px 25px !important;
    color: #333 !important;
    font-family: "lato";
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    transition: background 0.2s ease !important;
  }

  .has-submenu .submenu-link:hover {
    background: #f5f5f5 !important;
  }

  .has-submenu .submenu-caret {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid #eee !important;
    cursor: pointer !important;
    color: #666 !important;
  }

  .has-submenu .submenu-caret i.fa-caret-down {
    transition: transform 0.3s ease !important;
    font-size: 14px !important;
  }

  .has-submenu.active .submenu-caret i.fa-caret-down {
    transform: rotate(180deg) !important;
  }

  .submenu {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #f9f9f9 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
    display: block !important;
  }

  .has-submenu.active .submenu {
    max-height: 300px !important;
  }

  .submenu li {
    border-bottom: 1px solid #e6e6e6 !important;
    display: block !important;
  }

  .submenu li:last-child {
    border-bottom: none !important;
  }

  .submenu a {
    display: block !important;
    padding: 14px 25px 14px 45px !important;
    color: #555 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    text-transform: capitalize !important;
    transition: background 0.2s ease !important;
  }

  .submenu a:hover {
    background: #efefef !important;
  }

  /* Mobile Social Icons */
  .mobile-social {
    display: flex !important;
    justify-content: center !important;
    gap: 30px !important;
    padding: 25px !important;
    border-top: 1px solid #eee !important;
    margin-top: 15px !important;
  }

  .mobile-social a {
    color: #333 !important;
    font-size: 22px !important;
    transition: color 0.3s ease !important;
    display: inline-block !important;
  }

  .mobile-social a:hover {
    color: #007bff !important;
  }

  .shortcut-menu-links {
    display: flex;
    flex-direction: row;
    background: red;
    align-items: center;
    padding: 10px 0;
    list-style: none;
  }

  .shortcut-menu-links li {
    padding: 0 18px;
    border-right: 1px solid white;
  }

  .shortcut-menu-links li a {
    color: white;
    font-weight: 500;
    font-family: "lato";
  }
  /* Overlay */
  .mobile-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.6) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
    z-index: 999 !important;
    display: block !important;
  }

  .mobile-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Advertisement Section in Mobile Header */
  .great_andhra_logo_panel-mob ._201223_ {
    width: 100% !important;
    padding: 15px 10px !important;
    background: #fff !important;
    text-align: center !important;
    display: block !important;
  }

  .great_andhra_logo_panel-mob ._201223_ img {
    max-width: 100% !important;
    height: auto !important;
    display: inline-block !important;
  }

  /* Prevent body scroll when menu is open */
  body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }

  /* Hide the 201223 ad sections that appear below nav */
  .great_andhra_main_201223_ {
    display: none !important;
  }
}

/* Desktop: Hide Mobile Logo Panel */
@media (min-width: 769px) {
  .great_andhra_logo_panel-mob {
    display: none !important;
  }
}