/**
 * @file: mega-menu.css
 * @description: Стилі для Header + Мегаменю GOTUIMO
 * @created: 2025-12-07
 * @version: 1.0.1
 * 
 * Структура:
 * 1. CSS Variables
 * 2. Top Bar (Рівень 1)
 * 3. Banner (Рівень 2)
 * 4. Main Nav (Рівень 3)
 * 5. Mega Menu
 * 6. Mobile Menu
 * 7. Responsive
 * 8. Dark Mode
 * 9. Animations
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. CSS VARIABLES
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Colors */
  --gotuimo-primary: #3498db;
  --gotuimo-primary-hover: #2980b9;
  --gotuimo-cta: #d92e1f;
  --gotuimo-cta-hover: #ac0707;
  --gotuimo-accent: #ac0707;
  --gotuimo-text: #333;
  --gotuimo-text-light: #666;
  --gotuimo-text-muted: #999;
  --gotuimo-bg: #ffffff;
  --gotuimo-bg-light: #f8f9fa;
  --gotuimo-border: #e9ecef;

  /* Shadows */
  --gotuimo-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --gotuimo-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --gotuimo-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);

  /* Heights */
  --gotuimo-top-bar-height: 80px;
  --gotuimo-banner-height: 80px; /* ТЗ: 70-120px */
  --gotuimo-main-nav-height: 60px;

  /* Transitions */
  --gotuimo-transition: all 0.3s ease;
  --gotuimo-transition-fast: all 0.2s ease;

  /* Z-index */
  --gotuimo-z-header: 1000;
  --gotuimo-z-megamenu: 1001;
  --gotuimo-z-mobile-menu: 1100;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1.5. HEADER WRAPPER
   ═══════════════════════════════════════════════════════════════════════════ */

.gotuimo-header,
.gotuimo-header-wrapper-bp {
  position: relative;
  z-index: var(--gotuimo-z-header) !important;
  background: var(--gotuimo-bg);
  width: 100%;
  /* Font rendering optimization */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* BuddyPress wrapper specific */
.gotuimo-header-wrapper-bp {
  position: relative !important;
  z-index: 999999 !important;
}

/* Override BuddyBoss header styles */
#masthead.gotuimo-header {
  position: relative !important;
  z-index: var(--gotuimo-z-header) !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Admin Bar Fix - handled dynamically by JavaScript */
/* JS sets top based on actual #wpadminbar height */

/* Ensure content doesn't overlap header */
.site-content {
  position: relative;
  z-index: 1;
}

/* Recipe page uses BuddyBoss .bb-grid flex layout from template */

/* ═══════════════════════════════════════════════════════════════════════════
   2. TOP BAR (Рівень 1)
   ═══════════════════════════════════════════════════════════════════════════ */

.gotuimo-top-bar {
  background: var(--gotuimo-bg);
  height: var(--gotuimo-top-bar-height);
  border-bottom: 1px solid var(--gotuimo-border);
  transition: var(--gotuimo-transition);
  width: 100%;
}

.gotuimo-top-bar__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-sizing: border-box;
}

/* Logo */
.gotuimo-top-bar__logo {
  flex-shrink: 0;
}

.gotuimo-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.gotuimo-logo-img {
  max-height: 48px;
  width: auto;
}

.gotuimo-logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gotuimo-text);
}

/* Search */
.gotuimo-top-bar__search {
  flex: 1;
  max-width: 600px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

.gotuimo-search-form__wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Remove any default form styling - ONLY for top-bar search */
.gotuimo-top-bar .gotuimo-search-form,
.gotuimo-top-bar .gotuimo-search-form form {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

/* Hero search should have white background - restore it */
main .gotuimo-search-form,
.gotuimo-search-wrapper .gotuimo-search-form,
.elementor-section .gotuimo-search-form {
  background: #fff !important;
  border-radius: 50px !important;
}

main .gotuimo-search-form input,
.gotuimo-search-wrapper .gotuimo-search-form input,
.elementor-section .gotuimo-search-form input {
  background: #fff !important;
}

.gotuimo-search-form__input {
  width: 100%;
  padding: 12px 48px 12px 20px;
  border: 2px solid var(--gotuimo-border);
  border-radius: 50px;
  font-size: 1rem;
  background: var(--gotuimo-bg-light);
  transition: var(--gotuimo-transition);
  box-shadow: none !important;
}

.gotuimo-search-form__input:focus {
  outline: none;
  border-color: var(--gotuimo-primary);
  background: var(--gotuimo-bg);
  box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.15);
}

.gotuimo-search-form__input::placeholder {
  color: var(--gotuimo-text-muted);
}

.gotuimo-top-bar .gotuimo-search-form__submit,
.gotuimo-search-form button.gotuimo-search-form__submit,
button.gotuimo-search-form__submit {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none !important;
  background: var(--gotuimo-primary) !important;
  background-color: #3498db !important;
  color: #fff !important;
  border-radius: 50% !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--gotuimo-transition);
  padding: 0 !important;
  min-height: auto !important;
  line-height: 1 !important;
}

.gotuimo-top-bar .gotuimo-search-form__submit:hover,
.gotuimo-search-form button.gotuimo-search-form__submit:hover,
button.gotuimo-search-form__submit:hover {
  background: var(--gotuimo-primary-hover) !important;
  background-color: #2980b9 !important;
  transform: translateY(-50%) scale(1.05);
}

/* Account */
.gotuimo-top-bar__account {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.gotuimo-account-logged-in {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gotuimo-account-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--gotuimo-text);
  background: var(--gotuimo-bg-light);
  transition: var(--gotuimo-transition);
}

.gotuimo-account-icon:hover {
  color: var(--gotuimo-primary);
  background: rgba(52, 152, 219, 0.1);
}

.gotuimo-notification-count,
.gotuimo-message-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  color: #fff;
  background: var(--gotuimo-accent);
  border-radius: 9px;
}

.gotuimo-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.gotuimo-profile-icon {
  padding: 2px;
  background: transparent;
}

/* Login/Register buttons */
.gotuimo-account-logged-out {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gotuimo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: var(--gotuimo-transition);
  cursor: pointer;
  border: none;
}

.gotuimo-btn--login {
  color: var(--gotuimo-text);
  background: transparent;
  border: 2px solid var(--gotuimo-border);
}

.gotuimo-btn--login:hover {
  color: var(--gotuimo-primary);
  border-color: var(--gotuimo-primary);
  background: rgba(52, 152, 219, 0.05);
}

.gotuimo-btn--register {
  color: #fff;
  background: linear-gradient(135deg, var(--gotuimo-cta) 0%, #ac0707 100%);
  box-shadow: 0 4px 12px rgba(172, 7, 7, 0.25);
}

.gotuimo-btn--register:hover {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(172, 7, 7, 0.35);
  background: linear-gradient(135deg, #ac0707 0%, #8a0606 100%);
}

/* Mobile Toggle */
.gotuimo-mobile-menu-toggle {
  display: none;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 10px;
  background: var(--gotuimo-cta) !important; /* Червоний як CTA кнопка */
  border: none;
  border-radius: 8px;
  cursor: pointer;
  z-index: 1000;
  position: relative;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.gotuimo-hamburger {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Let parent handle clicks */
  width: 100%;
  height: 100%;
}

.gotuimo-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: var(--gotuimo-transition);
  pointer-events: none;
}

.gotuimo-hamburger span:nth-child(1) {
  transform: translateY(-6px);
}

.gotuimo-hamburger span:nth-child(3) {
  transform: translateY(6px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. BANNER (Рівень 2)
   ═══════════════════════════════════════════════════════════════════════════ */

.gotuimo-header-banner {
  /* ТЗ: Контрастний фон або фото-фон із затемненням */
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  background-size: 200% 200%;
  color: var(--banner-text, #fff);
  min-height: var(--gotuimo-banner-height);
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Декоративний overlay для глибини */
.gotuimo-header-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(212, 63, 58, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(52, 152, 219, 0.15) 0%, transparent 50%);
  pointer-events: none;
}

.gotuimo-header-banner__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.gotuimo-header-banner__link {
  display: flex;
  align-items: center;
  justify-content: center; /* ТЗ: Розміщення контенту в центрі */
  min-height: var(--gotuimo-banner-height);
  text-decoration: none !important;
  color: #fff !important;
  transition: var(--gotuimo-transition);
  text-align: center;
}

.gotuimo-header-banner__link:hover {
  opacity: 0.95;
  color: #fff !important; /* Зберігаємо білий колір при hover */
  text-decoration: none !important;
}

.gotuimo-header-banner__link:hover .gotuimo-header-banner__text {
  color: #fff !important; /* Текст баннера білий при hover */
}

.gotuimo-header-banner__content {
  display: flex;
  align-items: center;
  justify-content: center; /* ТЗ: Центрування */
  gap: 20px;
  padding: 16px 0;
}

.gotuimo-header-banner__text {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.gotuimo-header-banner__cta {
  font-size: 0.9375rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.15);
  padding: 6px 16px;
  border-radius: 20px;
  transition: var(--gotuimo-transition);
  color: #fff;
}

.gotuimo-header-banner__link:hover .gotuimo-header-banner__cta {
  background: rgba(255, 255, 255, 0.25);
  transform: translateX(4px);
  color: #fff !important; /* Залишаємо білий при hover */
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. MAIN NAV (Рівень 3)
   ═══════════════════════════════════════════════════════════════════════════ */

.gotuimo-main-nav {
  background: var(--gotuimo-bg);
  height: var(--gotuimo-main-nav-height);
  border-bottom: 1px solid var(--gotuimo-border);
  position: relative;
  z-index: var(--gotuimo-z-header);
  transition: var(--gotuimo-transition);
  width: 100%;
}

/* Sticky State - top is set dynamically by JavaScript based on admin bar */
.gotuimo-main-nav.is-sticky {
  position: fixed !important;
  /* top is set by JS - don't use !important here */
  top: 0;
  left: 0;
  right: 0;
  width: 100% !important;
  box-shadow: var(--gotuimo-shadow-md);
  z-index: var(--gotuimo-z-header) !important;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

/* Placeholder for sticky */
body.has-sticky-nav {
  padding-top: var(--gotuimo-main-nav-height);
}

.gotuimo-main-nav__container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Mobile Logo (sticky only) */
.gotuimo-main-nav__mobile-logo {
  display: none;
}

.gotuimo-sticky-logo {
  max-height: 36px;
  width: auto;
}

/* Menu */
.gotuimo-main-nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.gotuimo-menu-item {
  position: static; /* Changed from relative so mega menu can be positioned from .gotuimo-main-nav */
}

/* Item with mega menu needs special handling */
.gotuimo-menu-item--has-megamenu {
  position: static; /* Keep static for full-width mega menu */
}

.gotuimo-menu-item > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gotuimo-text);
  text-decoration: none;
  border-radius: 8px;
  transition: var(--gotuimo-transition);
}

.gotuimo-menu-item > a:hover,
.gotuimo-menu-item--active > a {
  color: var(--gotuimo-primary);
  background: rgba(52, 152, 219, 0.08);
}

.gotuimo-menu-arrow {
  transition: var(--gotuimo-transition);
}

.gotuimo-menu-item--has-megamenu:hover .gotuimo-menu-arrow,
.gotuimo-menu-item--has-megamenu.is-open .gotuimo-menu-arrow {
  transform: rotate(180deg);
}

/* CTA Button */
.gotuimo-main-nav__cta {
  flex-shrink: 0;
}

.gotuimo-btn--add-recipe {
  color: #fff;
  background: linear-gradient(135deg, #d92e1f 0%, #ac0707 100%);
  box-shadow: 0 4px 12px rgba(172, 7, 7, 0.25);
  border: none !important;
}

.gotuimo-btn--add-recipe:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ac0707 0%, #8a0606 100%);
  box-shadow: 0 6px 16px rgba(172, 7, 7, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. MEGA MENU
   ═══════════════════════════════════════════════════════════════════════════ */

/* Position mega menu relative to .gotuimo-main-nav (not the menu item) */
.gotuimo-main-nav {
  position: relative; /* Needed for mega menu positioning */
}

.gotuimo-mega-menu {
  position: absolute;
  top: 100%; /* Below the nav bar */
  left: 0;
  right: 0;
  margin: 0 auto;
  width: calc(100% - 48px);
  max-width: 1200px;
  background: var(--gotuimo-bg);
  border-radius: 0 0 16px 16px;
  box-shadow: var(--gotuimo-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: var(--gotuimo-transition);
  z-index: var(--gotuimo-z-megamenu);
  pointer-events: none;
}

.gotuimo-menu-item--has-megamenu:hover .gotuimo-mega-menu,
.gotuimo-menu-item--has-megamenu.is-open .gotuimo-mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.gotuimo-mega-menu__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 32px;
}

/* Columns */
.gotuimo-mega-menu__column {
  min-width: 0;
}

.gotuimo-mega-menu__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gotuimo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--gotuimo-border);
}

.gotuimo-mega-menu__title svg {
  color: var(--gotuimo-primary);
}

/* List */
.gotuimo-mega-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gotuimo-mega-menu__item {
  margin-bottom: 4px;
}

.gotuimo-mega-menu__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.9375rem;
  color: var(--gotuimo-text);
  text-decoration: none;
  border-radius: 8px;
  transition: var(--gotuimo-transition-fast);
}

.gotuimo-mega-menu__item a:hover {
  background: rgba(52, 152, 219, 0.08);
  color: var(--gotuimo-primary);
}

.gotuimo-mega-menu__count {
  font-size: 0.75rem;
  color: var(--gotuimo-text-muted);
  background: var(--gotuimo-bg-light);
  padding: 2px 8px;
  border-radius: 12px;
}

/* Tags */
.gotuimo-mega-menu__list--tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gotuimo-mega-menu__list--tags .gotuimo-mega-menu__item {
  margin: 0;
}

.gotuimo-tag {
  display: inline-block;
  padding: 6px 12px;
  font-size: 0.875rem;
  color: var(--gotuimo-text);
  background: var(--gotuimo-bg-light);
  border-radius: 20px;
  text-decoration: none;
  transition: var(--gotuimo-transition-fast);
}

.gotuimo-tag:hover {
  background: var(--gotuimo-primary);
  color: #fff;
}

/* Popular Recipes */
.gotuimo-mega-menu__recipes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gotuimo-mega-menu__recipe-card {
  display: flex;
  gap: 12px;
  padding: 8px;
  border-radius: 12px;
  text-decoration: none;
  transition: var(--gotuimo-transition-fast);
}

.gotuimo-mega-menu__recipe-card:hover {
  background: var(--gotuimo-bg-light);
}

.gotuimo-mega-menu__recipe-img {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.gotuimo-mega-menu__recipe-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.gotuimo-mega-menu__recipe-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--gotuimo-text);
  line-height: 1.3;
}

.gotuimo-mega-menu__recipe-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--gotuimo-text-muted);
}

/* CTA Buttons */
.gotuimo-mega-menu__cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gotuimo-mega-menu__cta-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 10px;
  transition: var(--gotuimo-transition);
}

.gotuimo-mega-menu__cta-btn--all {
  color: var(--gotuimo-text);
  background: var(--gotuimo-bg-light);
  border: 1px solid var(--gotuimo-border);
}

.gotuimo-mega-menu__cta-btn--all:hover {
  border-color: var(--gotuimo-primary);
  color: var(--gotuimo-primary);
}

.gotuimo-mega-menu__cta-btn--add {
  color: #fff;
  background: linear-gradient(135deg, #d92e1f 0%, #ac0707 100%) !important;
  border: none !important;
}

.gotuimo-mega-menu__cta-btn--add:hover {
  background: linear-gradient(135deg, #ac0707 0%, #8a0606 100%) !important;
  transform: translateY(-2px);
  color: #fff !important;
}

.gotuimo-mega-menu__cta-btn--random {
  color: var(--gotuimo-primary);
  background: rgba(52, 152, 219, 0.1);
}

.gotuimo-mega-menu__cta-btn--random:hover {
  background: rgba(52, 152, 219, 0.2);
  color: var(--gotuimo-primary) !important;
}

/* Promo Block */
.gotuimo-mega-menu__promo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 16px;
  background: linear-gradient(
    135deg,
    rgba(52, 152, 219, 0.1) 0%,
    rgba(62, 52, 255, 0.1) 100%
  );
  border-radius: 12px;
  font-size: 0.875rem;
  color: var(--gotuimo-text);
}

.gotuimo-mega-menu__promo-emoji {
  font-size: 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5.1. MEGA MENU - BLOG SPECIFIC STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Blog Posts - Default list view */
.gotuimo-mega-menu__posts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Blog Posts - Grid for 6 posts */
.gotuimo-mega-menu__posts--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.gotuimo-mega-menu__post-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  text-decoration: none;
  transition: var(--gotuimo-transition-fast);
  background: var(--gotuimo-bg-light);
}

.gotuimo-mega-menu__post-card:hover {
  background: var(--gotuimo-primary-light);
  transform: translateY(-2px);
}

.gotuimo-mega-menu__post-img {
  width: 100%;
  height: 50px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}

.gotuimo-mega-menu__post-img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gotuimo-border);
  color: var(--gotuimo-text-muted);
}

.gotuimo-mega-menu__post-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gotuimo-mega-menu__post-title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gotuimo-text);
  line-height: 1.25;
}

.gotuimo-mega-menu__post-cta {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gotuimo-primary);
}

.gotuimo-mega-menu__post-time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--gotuimo-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   5.2. BLOG MENU - BEGINNER SECTION + TOPICS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Section in Column 2 */
.gotuimo-mega-menu__section {
  margin-bottom: 16px;
}

.gotuimo-mega-menu__section--beginner {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gotuimo-border);
  margin-bottom: 16px;
}

/* Title with beginner badge */
.gotuimo-mega-menu__title--beginner {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 152, 0, 0.15) 100%);
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 12px !important;
}

.gotuimo-mega-menu__beginner-badge {
  margin-right: 6px;
}

/* Subtitle for sub-sections */
.gotuimo-mega-menu__subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--gotuimo-text);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gotuimo-border);
}

.gotuimo-mega-menu__subtitle svg {
  color: var(--gotuimo-primary);
}

/* Compact list for beginner section */
.gotuimo-mega-menu__list--compact {
  gap: 4px;
}

.gotuimo-mega-menu__list--compact .gotuimo-mega-menu__item a {
  padding: 6px 10px;
  font-size: 0.875rem;
}

/* Legacy beginner section styles (for backward compatibility) */
.gotuimo-mega-menu__beginner-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--gotuimo-border);
}

.gotuimo-mega-menu__beginner-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 152, 0, 0.15) 100%);
  border-radius: 10px;
  text-decoration: none;
  transition: var(--gotuimo-transition);
}

.gotuimo-mega-menu__beginner-link:hover {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.25) 0%, rgba(255, 152, 0, 0.25) 100%);
  transform: translateX(4px);
}

.gotuimo-mega-menu__beginner-icon {
  font-size: 1.25rem;
}

.gotuimo-mega-menu__beginner-text {
  font-weight: 500;
  color: var(--gotuimo-text);
}

/* Subscribe Button */
.gotuimo-mega-menu__cta-btn--subscribe {
  color: #fff;
  background: linear-gradient(135deg, #9C27B0 0%, #673AB7 100%);
}

.gotuimo-mega-menu__cta-btn--subscribe:hover {
  background: linear-gradient(135deg, #8E24AA 0%, #5E35B1 100%);
  transform: translateY(-2px);
  color: #fff !important;
}

/* Seasonal Card */
.gotuimo-mega-menu__seasonal-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(139, 195, 74, 0.1) 100%);
  border-radius: 12px;
  text-decoration: none;
  transition: var(--gotuimo-transition);
}

.gotuimo-mega-menu__seasonal-card:hover {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(139, 195, 74, 0.2) 100%);
  transform: translateX(4px);
}

.gotuimo-mega-menu__seasonal-icon {
  font-size: 1.5rem;
}

.gotuimo-mega-menu__seasonal-text {
  flex: 1;
  font-weight: 500;
  color: var(--gotuimo-text);
  line-height: 1.3;
}

.gotuimo-mega-menu__seasonal-card svg {
  color: var(--gotuimo-text-muted);
  transition: var(--gotuimo-transition);
}

.gotuimo-mega-menu__seasonal-card:hover svg {
  color: var(--gotuimo-primary);
  transform: translateX(4px);
}

/* Recipes CTA Button (Blog specific) */
.gotuimo-mega-menu__cta-btn--recipes {
  color: #fff;
  background: linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%);
}

.gotuimo-mega-menu__cta-btn--recipes:hover {
  background: linear-gradient(135deg, #43A047 0%, #7CB342 100%);
  transform: translateY(-2px);
  color: #fff !important;
}

/* Blog Promo Block variant */
.gotuimo-mega-menu__promo--blog {
  background: linear-gradient(
    135deg,
    rgba(156, 39, 176, 0.1) 0%,
    rgba(103, 58, 183, 0.1) 100%
  );
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. MOBILE MENU
   ═══════════════════════════════════════════════════════════════════════════ */

.gotuimo-mobile-menu-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999998; /* Нижче за меню, вище за хедер */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.gotuimo-mobile-menu-overlay.is-active {
  display: block !important;
  opacity: 1;
  pointer-events: auto !important;
}

.gotuimo-mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 320px;
  background: var(--gotuimo-bg);
  z-index: 9999999; /* Вище за будь-який хедер */
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: none;
  flex-direction: column;
  pointer-events: none;
}

.gotuimo-mobile-menu.is-active {
  display: flex !important;
  transform: translateX(0);
  pointer-events: auto !important;
}

/* Всі елементи всередині меню мають приймати кліки */
.gotuimo-mobile-menu.is-active * {
  pointer-events: auto !important;
}

.gotuimo-mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--gotuimo-border);
}

.gotuimo-mobile-menu__title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--gotuimo-text);
}

.gotuimo-mobile-menu__close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--gotuimo-text);
  cursor: pointer;
  border-radius: 8px;
  transition: var(--gotuimo-transition);
}

.gotuimo-mobile-menu__close:hover {
  background: var(--gotuimo-bg-light);
}

.gotuimo-mobile-menu__content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* Mobile Search */
.gotuimo-mobile-search {
  margin-bottom: 20px;
}

.gotuimo-mobile-search form {
  display: flex;
  border: 1px solid var(--gotuimo-border, #e0e0e0);
  border-radius: 10px;
  overflow: hidden;
  background: var(--gotuimo-bg-light, #f8f9fa);
}

.gotuimo-mobile-search input[type="search"] {
  flex: 1;
  border: none;
  padding: 12px 16px;
  font-size: 16px;
  outline: none;
  background: transparent;
}

.gotuimo-mobile-search button {
  background: var(--gotuimo-primary, #ff6b6b);
  border: none;
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

/* Mobile Navigation */
.gotuimo-mobile-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gotuimo-mobile-nav__item {
  border-bottom: 1px solid var(--gotuimo-border, #f0f0f0);
}

.gotuimo-mobile-nav__item:last-child {
  border-bottom: none;
}

.gotuimo-mobile-nav__item > a {
  display: block;
  padding: 16px 0;
  color: var(--gotuimo-text, #333);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
}

.gotuimo-mobile-nav__item > a:hover {
  color: var(--gotuimo-primary, #ff6b6b);
}

/* Submenu Toggle */
.gotuimo-mobile-nav__toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  padding: 16px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--gotuimo-text, #333);
  cursor: pointer;
  text-align: left;
}

.gotuimo-mobile-nav__toggle svg {
  transition: transform 0.3s ease;
}

.gotuimo-mobile-nav__item.is-open .gotuimo-mobile-nav__toggle svg {
  transform: rotate(180deg);
}

/* Submenu */
.gotuimo-mobile-nav__submenu {
  list-style: none;
  padding: 0 0 0 20px;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.gotuimo-mobile-nav__item.is-open .gotuimo-mobile-nav__submenu {
  max-height: 1200px; /* Збільшено для блогу з категоріями + підкатегоріями */
}

.gotuimo-mobile-nav__submenu li a {
  display: block;
  padding: 12px 0;
  font-size: 15px;
  color: var(--gotuimo-text-secondary, #666);
  text-decoration: none;
}

.gotuimo-mobile-nav__submenu li a:hover {
  color: var(--gotuimo-primary, #ff6b6b);
}

/* Divider/section title in mobile submenu */
.gotuimo-mobile-nav__divider {
  padding: 16px 0 8px 0 !important;
  margin-top: 8px;
  border-top: 1px solid var(--gotuimo-border, #f0f0f0);
}

.gotuimo-mobile-nav__divider span {
  font-size: 12px;
  font-weight: 600;
  color: var(--gotuimo-text-muted, #999);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Blog first item "Всі статті" */
.gotuimo-mobile-nav__submenu li a strong {
  color: var(--gotuimo-primary, #ff6b6b);
}

/* Mobile CTA */
.gotuimo-mobile-cta {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--gotuimo-border, #f0f0f0);
}

.gotuimo-btn--add-recipe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, var(--gotuimo-primary, #ff6b6b) 0%, #ff8585 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
}

.gotuimo-btn--add-recipe:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 107, 0.35);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --gotuimo-top-bar-height: 70px;
    --gotuimo-main-nav-height: 56px;
  }

  .gotuimo-mega-menu__container {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 24px;
  }

  .gotuimo-mega-menu__column--popular,
  .gotuimo-mega-menu__column--cta {
    display: none;
  }
}

/* Mobile */
@media (max-width: 768px) {
  /* ГОЛОВНА: Header звичайний, top-bar fixed (в header.php) */
  body:not(.buddypress):not(.bp-user) .gotuimo-header {
    position: relative !important;
    top: 0 !important;
  }
  
  .gotuimo-top-bar__search {
    display: none;
  }

  .gotuimo-account-logged-out {
    display: none;
  }

  .gotuimo-mobile-menu-toggle {
    display: flex;
  }

  .gotuimo-mobile-menu,
  .gotuimo-mobile-menu-overlay {
    display: none; /* Прихований поки не активний */
  }

  /* Main Nav - повністю приховати на мобільних */
  .gotuimo-main-nav {
    display: none !important;
  }
  
  /* На мобільному main-nav ЗАВЖДИ прихований (навіть sticky) */
  .gotuimo-main-nav,
  .gotuimo-main-nav.is-sticky {
    display: none !important;
  }

  .gotuimo-main-nav__menu,
  .gotuimo-main-nav__cta {
    display: none;
  }

  .gotuimo-main-nav__mobile-logo {
    display: none;
  }

  /* Banner */
  .gotuimo-header-banner__content {
    flex-direction: column;
    gap: 10px;
    text-align: center;
    padding: 12px 0;
  }

  .gotuimo-header-banner__text {
    font-size: 0.875rem;
    line-height: 1.4;
  }
  
  .gotuimo-header-banner__cta {
    font-size: 0.8125rem;
    padding: 5px 14px;
  }

  /* Mega Menu - hide on mobile */
  .gotuimo-mega-menu {
    display: none;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .gotuimo-top-bar__container {
    padding: 0 16px;
  }

  .gotuimo-logo-img {
    max-height: 40px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. DARK MODE
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-dark-theme {
  --gotuimo-text: #e4e6eb;
  --gotuimo-text-light: #b0b3b8;
  --gotuimo-text-muted: #8a8d91;
  --gotuimo-bg: #18191a;
  --gotuimo-bg-light: #242526;
  --gotuimo-border: #3e4042;
}

.bb-dark-theme .gotuimo-search-form__input {
  background: var(--gotuimo-bg-light);
  border-color: var(--gotuimo-border);
  color: var(--gotuimo-text);
}

.bb-dark-theme .gotuimo-search-form__input::placeholder {
  color: var(--gotuimo-text-muted);
}

.bb-dark-theme .gotuimo-btn--login {
  color: var(--gotuimo-text);
  border-color: var(--gotuimo-border);
}

.bb-dark-theme .gotuimo-hamburger span {
  background: var(--gotuimo-text);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide Top Bar on scroll - ТІЛЬКИ десктоп */
@media (min-width: 769px) {
  .gotuimo-header.is-scrolled .gotuimo-top-bar {
    transform: translateY(-100%);
    position: absolute;
    opacity: 0;
  }
}

/* Smooth transitions */
.gotuimo-top-bar,
.gotuimo-header-banner,
.gotuimo-main-nav {
  will-change: transform;
}

/* Focus states for accessibility */
.gotuimo-search-form__input:focus-visible,
.gotuimo-btn:focus-visible,
.gotuimo-menu-item > a:focus-visible,
.gotuimo-mega-menu__item a:focus-visible {
  outline: 2px solid var(--gotuimo-primary);
  outline-offset: 2px;
}

/* Fix purple/violet border on Elementor slider images and cards */
.elementor-widget-image-carousel .swiper-slide-active,
.elementor-widget-image-carousel .swiper-slide,
.elementor-widget-image-carousel img,
.elementor-slides .swiper-slide,
.elementor-slides img,
.e-gallery-item,
.elementor-widget-container img,
.swiper-wrapper img,
.swiper-slide img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove purple border-bottom from slider navigation */
.elementor-widget-image-carousel .swiper-container,
.elementor-image-carousel,
.elementor-slides-wrapper {
  border: none !important;
  border-bottom: none !important;
}

/* Fix focus outline styles - don't remove them globally, just style nicely */
a:focus-visible {
  outline: 2px solid var(--gotuimo-primary);
  outline-offset: 2px;
}

/* Recipe cards should not have extra borders */
/* ✅ FIX: Remove ALL purple/violet lines from recipe cards */
.recipe-card,
.recipe-card img,
.recipe-card__image,
article.recipe-card,
article.recipe-card img,
.gotuimo-blog-card,
.gotuimo-blog-card *,
.gotuimo-blog-card__image,
.gotuimo-blog-card__image *,
.gotuimo-blog-card__image a,
.gotuimo-blog-card__image img,
.gotuimo-blog-card__content,
.native-recipe-card,
.native-recipe-card *,
.native-recipe-card__image,
.native-recipe-card__image * {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove focus ring from card links */
.gotuimo-blog-card a:focus,
.gotuimo-blog-card a:focus-visible,
.native-recipe-card a:focus,
.native-recipe-card a:focus-visible,
.gotuimo-blog-card__image a:focus,
.gotuimo-blog-card__image a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* Ensure no pseudo-element decorations */
.gotuimo-blog-card__image::before,
.gotuimo-blog-card__image::after,
.gotuimo-blog-card__image a::before,
.gotuimo-blog-card__image a::after,
.gotuimo-blog-card__image img::before,
.gotuimo-blog-card__image img::after {
  display: none !important;
  content: none !important;
}

/* Print styles */
@media print {
  .gotuimo-header,
  .gotuimo-mobile-menu,
  .gotuimo-mobile-menu-overlay {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. BUDDYBOSS OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix header width ONLY - do not touch page containers */
.site-header.gotuimo-header,
#masthead.gotuimo-header {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Override BuddyBoss form styles */
.gotuimo-search-form,
.gotuimo-search-form *,
.gotuimo-top-bar__search form,
.gotuimo-top-bar__search input,
.gotuimo-top-bar__search button {
  border-radius: inherit;
}

/* Remove white lines from search button */
.gotuimo-search-form__submit,
.gotuimo-search-form__submit:before,
.gotuimo-search-form__submit:after {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Ensure search field has proper styling */
.gotuimo-search-form__input,
.gotuimo-top-bar input[type="search"],
.gotuimo-top-bar .search-field {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}

/* Search field remove arrows/extra elements */
.gotuimo-search-form__input::-webkit-search-decoration,
.gotuimo-search-form__input::-webkit-search-cancel-button,
.gotuimo-search-form__input::-webkit-search-results-button,
.gotuimo-search-form__input::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  display: none !important;
}

/* Remove BuddyBoss button hover effects */
.gotuimo-btn,
.gotuimo-btn:hover,
.gotuimo-btn:focus {
  text-decoration: none !important;
}

/* Ensure CTA buttons match brand */
.gotuimo-main-nav__cta .gotuimo-btn--add-recipe,
a.gotuimo-btn--add-recipe,
.gotuimo-btn--add-recipe {
  background: linear-gradient(135deg, #d92e1f 0%, #ac0707 100%) !important;
  color: #fff !important;
  border: none !important;
}

.gotuimo-main-nav__cta .gotuimo-btn--add-recipe:hover,
a.gotuimo-btn--add-recipe:hover,
.gotuimo-btn--add-recipe:hover {
  background: linear-gradient(135deg, #ac0707 0%, #8a0606 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX: Remove BuddyBoss sticky-header padding
   ═══════════════════════════════════════════════════════════════════════════ */
.site-content,
.sticky-header .site-content,
body.sticky-header .site-content {
  padding-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGIN/REGISTER POPUP
   ═══════════════════════════════════════════════════════════════════════════ */
   
.gotuimo-popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999999;
  align-items: center;
  justify-content: center;
}

.gotuimo-popup-overlay.is-active {
  display: flex !important;
}