/* ==========================================================================
   File: header.css
   Shared header styles + exhaustive dark-mode overrides
   Includes Filter Toggle icon styling
   ========================================================================== */

/*─────────────────────────────────────────────────────────────────────────────
 1) Base Header Layout (light mode)
─────────────────────────────────────────────────────────────────────────────*/
.header {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #444 0%, #222 100%);
  
  /* ← make it stick to the top of the viewport */
  position: sticky;
  top: 0;
  z-index: 100;

  width: 100%;
  margin: 0;
  padding: 14px 20px;
  color: #fff;
}

/*─────────────────────────────────────────────────────────────────────────────
 2) Header-top: brand | nav | controls
─────────────────────────────────────────────────────────────────────────────*/
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ─── Brand ───────────────────────────────────────────────────────────────── */
.header-brand {
  display: flex;
  flex-direction: column;
}
.header-title {
  font-family: 'Josefin_Bold', Arial, sans-serif;
  font-size: 2rem;
  margin: 0;
  color: #fff;
}
.header-subtitle {
  font-family: 'Josefin_Light', Arial, sans-serif;
  font-size: 1rem;
  margin: 6px 0 0;
  color: #ccc;
}

/* ─── Desktop Nav ─────────────────────────────────────────────────────────── */
.top-menu {
  flex: 1;
  display: flex;
  justify-content: center;
}
.top-menu ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}
.top-menu li {
  margin: 0 12px;
}
.top-menu a {
  text-decoration: none;
  font-family: 'Josefin_Medium', Arial, sans-serif;
  padding: 6px 10px;
  border-radius: 4px;
  color: #fff;
  transition: background 0.3s, border-bottom 0.3s;
  position: relative;
}
.top-menu a:hover {
  background: rgba(255,255,255,0.1);
}

/* Active state - orange underline for current page */
.top-menu li.active a {
  border-bottom: 3px solid #FF8C00 !important;
  padding-bottom: 3px;
}

.top-menu li.active a:hover {
  background: rgba(255, 140, 0, 0.1);
}

/* ─── Controls ────────────────────────────────────────────────────────────── */
.header-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── Filter Toggle Icon ─────────────────────────────────────────────────── */
/* ─── Filter Toggle Icon ─────────────────────────────────────────────────── */
#filter-toggle {
  font-family: 'Material Icons';
  font-feature-settings: 'liga';
  font-size: 24px;
  color: var(--color-bright-ivory);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px; /* space before dark-mode toggle */
  opacity: 0.8;
  transition: opacity 0.2s, color 0.2s;
}
#filter-toggle:hover {
  opacity: 1;
}
/* when any filters are active */
#filter-toggle.active {
  color: var(--color-accent);
}

/* make sure your existing .header-controls has enough room: */
.header-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

html.dark-theme #filter-toggle {
  color: var(--color-accent);
}

/* ─── Theme Toggle ────────────────────────────────────────────────────────── */
.theme-toggle-icon {
  position: relative;
  font-family: 'Material Icons';
  font-feature-settings: 'liga';
  font-size: 24px;
  color: var(--color-bright-ivory, #fff);  /* fallback to white */
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: none !important; /* HIDDEN - dark mode only from now on */
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  overflow: hidden;
  transition: color 0.3s ease, opacity 0.3s ease;
  visibility: hidden; /* Extra hiding layer */
}
.theme-toggle-icon:hover {
  opacity: 0.8;
}
.theme-toggle-icon::before {
  content: "lightbulb_outline";
  display: block;
  width: 100%;
  text-align: center;
}
html.dark-theme .theme-toggle-icon {
  color: var(--color-accent, #FFD700);
}
html.dark-theme .theme-toggle-icon::before {
  content: "lightbulb";
  filter: drop-shadow(0 0 4px rgba(255,215,0,0.6));
}

/* ─── Other Controls ──────────────────────────────────────────────────────── */
.material-icons {
  font-size: 24px;
}

/* Custom Location Button */
.custom-location-btn {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: transparent;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  
  font-family: 'Material Icons';
  font-feature-settings: 'liga';
  font-size: 0;
  transition: all 0.3s ease;
}

.custom-location-btn::before {
  content: "place";
  font-family: 'Material Icons';
  font-feature-settings: 'liga';
  font-size: 22px;
  line-height: 1;
  color: var(--color-bright-ivory);
  display: inline-block;
  transition: color 0.3s ease, filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.custom-location-btn:hover::before {
  opacity: 0.85;
  transform: scale(1.1);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
}

.custom-location-btn:active::before {
  transform: scale(0.95);
}

/* Dark mode support for custom location button */
html.dark-theme .custom-location-btn::before {
  color: var(--color-bright-ivory);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
}



/*─────────────────────────────────────────────────────────────────────────────
 3) Mobile FAB & Overlay Menu
─────────────────────────────────────────────────────────────────────────────*/
/* ─── Mobile FAB Button ───────────────────────────────────────────────────── */
.fab-menu {
  position: relative;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: transparent;         /* hide inner 'menu' text */
  overflow: hidden;
  display: none;              /* hidden by default, shown on mobile */
  align-items: center;
  justify-content: center;

  /* prep for injected icon */
  font-family: 'Material Icons';
  font-feature-settings: 'liga';
  font-size: 0;               /* inner text hidden; pseudo uses its own size */
}
.fab-menu::before {
  content: "menu";
  font-family: 'Material Icons';
  font-feature-settings: 'liga';
  font-size: 24px;
  line-height: 1;
  color: var(--color-bright-ivory, #fff);  /* fallback to white */
  display: inline-block;
  transition: color 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
}
.fab-menu:hover::before {
  opacity: 0.85;
}
html.dark-theme .fab-menu::before {
  color: var(--color-accent, #FFD700);
  filter: drop-shadow(0 0 2px rgba(255,215,0,0.5));
}

@media (max-width: 768px) {
  .top-menu { 
    display: none !important; 
  }
  .fab-menu { 
    display: inline-flex !important; 
  }
  
  .desktop-only {
    display: none !important;
  }
  .mobile-only {
    display: inline-flex !important;
  }
}

.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0,0,0,0.95);
  color: #fff;
  z-index: 1000;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s;
}
.mobile-menu-overlay.active {
  display: flex !important;
  opacity: 1;
}
.mobile-menu-overlay ul {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}
.mobile-menu-overlay li {
  margin: 15px 0;
}
.mobile-menu-overlay a {
  font-family: 'Josefin_Bold', Arial, sans-serif;
  font-size: 20px;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}
.mobile-menu-overlay a:hover {
  color: var(--color-accent);
}

/* Active state for mobile menu items */
.mobile-menu-overlay li.active a {
  color: #FF8C00 !important;
  border-left: 3px solid #FF8C00 !important;
  padding-left: 17px;
  font-weight: bold;
}

.mobile-menu-overlay li.active a:hover {
  color: #FF8C00 !important;
}

/*─────────────────────────────────────────────────────────────────────────────
 5) Responsive Header Tweaks & Mobile Controls
─────────────────────────────────────────────────────────────────────────────*/

/* Hide/show elements based on screen size */
.desktop-only {
  display: inline-flex;
}
.mobile-only {
  display: none;
}

/* Mobile controls inside hamburger menu */
.mobile-controls {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 20px;
}

.mobile-controls button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  margin: 10px 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  font-family: 'Josefin_Light', Arial, sans-serif;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.mobile-controls button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.mobile-controls button span {
  margin-right: 8px;
}

.mobile-controls .api-mode-toggle-mobile {
  background: rgba(255, 215, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.3);
}

.mobile-controls .api-mode-toggle-mobile:hover {
  background: rgba(255, 215, 0, 0.3);
}

/*─────────────────────────────────────────────────────────────────────────────
 6) Dark-Mode Overrides (applied when <html class="dark-theme">)
─────────────────────────────────────────────────────────────────────────────*/
html.dark-theme {
  --color-body-bg:        #111;
  --color-header-bg:      #111;
  --color-modal-overlay:  rgba(0,0,0,0.8);
  --color-text-base:      #ccc;
  --color-text-subtle:    #999;
  --color-text-secondary:#777;
  --color-bright-ivory:   #fffff0;
  --color-accent:         #FFD700;
  --color-card-bg:        #1c1c1c;
}
html.dark-theme,
html.dark-theme body {
  background-color: var(--color-body-bg) !important;
  color: var(--color-text-base);
}
html.dark-theme .header {
  background: linear-gradient(135deg, #1f1f1f 0%, #111 100%);
  color: #fff;
}
html.dark-theme .header-title {
  color: #fff;
}
html.dark-theme .header-subtitle {
  color: var(--color-accent);
}
html.dark-theme .top-menu a {
  color: #fff;
}
html.dark-theme .top-menu a:hover {
  color: var(--color-accent);
}
html.dark-theme .mobile-menu-overlay {
  background-color: var(--color-modal-overlay);
}
html.dark-theme .mobile-menu-overlay a {
  color: var(--color-bright-ivory);
}
html.dark-theme .mobile-menu-overlay a:hover {
  color: var(--color-accent);
}
html.dark-theme .fab-menu::before {
  color: var(--color-accent);
  filter: drop-shadow(0 0 2px rgba(255,215,0,0.5));
}
html.dark-theme footer {
  background: #222;
  color: #ccc;
}
html.dark-theme .footer-elements {
  background: #222;
  border-top: 1px solid #444;
}
html.dark-theme .modal-content {
  background: #333;
}
html.dark-theme .price,
html.dark-theme .likes-count {
  color: var(--color-accent);
}
html.dark-theme .about-text,
html.dark-theme .testimonials-heading,
html.dark-theme .reviews-container,
html.dark-theme .testimonial-content p,
html.dark-theme .testimonial-content .name {
  color: var(--color-bright-ivory) !important;
}
html.dark-theme .card {
  background: #242424;
  box-shadow: 0 10px 20px rgba(0,0,0,0.6);
}
html.dark-theme .card-title {
  color: gold;
}
html.dark-theme .card-subtitle,
html.dark-theme .card-description {
  color: #f0f0f0;
}
html.dark-theme .card-footer {
  background: #1e1e1e;
  border-top-color: #333;
}
html.dark-theme .icon {
  background: ivory !important;
  color: black !important;
}
html.dark-theme .icon::after {
  background: #000;
  color: #fff;
}
html.dark-theme .indicator-dot {
  background: rgba(255,255,255,0.2);
}
html.dark-theme .indicator-dot.active {
  background: var(--color-accent);
}
::selection {
  background-color: var(--color-accent);
  color: #fff;
}
html.dark-theme ::selection {
  background-color: var(--color-accent);
  color: #111;
}