/**
 * styles.css
 * Custom stylesheet for logo and layout overrides
 */

/* Logo container with text */
.site-logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-logo-text {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 800;
  background: linear-gradient(135deg, #548b6d 0%, #2d5a47 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.5px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  text-transform: uppercase;
  tracking: 0.05em;
}

@media (max-width: 640px) {
  .site-logo-text {
    font-size: 16px;
  }
}

/* Header logo sizing and alignment */
.site-logo {
  height: 40px !important;
  max-height: 48px !important;
  width: auto !important;
  display: block;
  object-fit: contain;
  margin-right: 0;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .site-logo {
    height: 48px !important;
    max-height: 56px !important;
  }
}

/* Watermark logo sizing */
.watermark-logo {
  width: 92px;
  height: auto;
  display: block;
}

/* Ensure any leftover Tailwind classes do NOT affect our logo */
img[alt="Logo"],
img.site-logo {
  height: auto !important;
  max-height: 56px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* If the bundle injects an element with Tailwind classes, override it */
.h-12.w-auto[alt="Logo"],
.h-12.w-auto.site-logo {
  height: auto !important;
  max-height: 56px !important;
  width: auto !important;
}

/* Center logo vertically within the nav */
nav .flex.items-center > img.site-logo {
  display: block;
  margin-top: 0;
  margin-bottom: 0;
}

/* Sticky header styling */
header,
nav {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* When header is scrolled (has scrolled class) */
header.scrolled,
nav.scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}

/* Sticky positioning common patterns */
header[class*="sticky"],
nav[class*="sticky"],
[class*="navbar"][class*="sticky"],
[class*="header"][class*="sticky"] {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

header[class*="sticky"].scrolled,
nav[class*="sticky"].scrolled,
[class*="navbar"][class*="sticky"].scrolled,
[class*="header"][class*="sticky"].scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}

/* Navigation text visibility when scrolled */
header.scrolled a,
nav.scrolled a,
header.scrolled button,
nav.scrolled button {
  color: #1a1a1a;
}

/* Smooth transition for text color changes */
header a,
nav a,
header button,
nav button {
  transition: color 0.3s ease;
}

/* Tour card layout - ensure button stays at bottom */
[data-product-shop="true"] {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
}

[data-product-shop="true"] > div:nth-child(2) {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

[data-product-shop="true"] button {
  margin-top: auto !important;
}