/*
 * ============================================================
 *  GLOBAL.CSS — Shared Global Styles
 *  Used by: ALL pages (index, about, shop, contact, plantDetails)
 *  Contains: Fonts, resets, navigation, overlay menu, burger,
 *            search overlay, logo, utility classes, custom cursor
 * ============================================================
 */

/* -------------------------------------------------------
 * 1. GOOGLE FONT IMPORT
 * Barlow Condensed — used in team section & shop page
 * ------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

/* -------------------------------------------------------
 * 2. CSS VARIABLES (Design Tokens)
 * Global color palette used across pages
 * ------------------------------------------------------- */
:root {
  --base-100: #fff;
  --base-200: #3a3a3a;
  --base-300: #000;
}

/* -------------------------------------------------------
 * 3. GLOBAL RESET
 * Removes default browser spacing and sets border-box model
 * ------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Asset Security — Deter unauthorized downloading/dragging of images */
img, 
.hero-bg, 
.shop-bg, 
.heading-sprite {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;            /* Prevents right-click & drag on background assets */
}

/* Enable pointer events only for interactive images (if any) */
a img, 
button img {
  pointer-events: auto;
}

/* -------------------------------------------------------
 * 4. CUSTOM FONT-FACE DECLARATIONS
 * Local font files loaded from assets/fonts/
 * ------------------------------------------------------- */

/* Canopee — decorative/display font */
@font-face {
  font-family: "Canopee";
  src: url("../assets/fonts/Canopee.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

/* Lexa — decorative font */
@font-face {
  font-family: "Lexa";
  src: url("../assets/fonts/Lexa.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

/* Bigilla — used in hero footer text & slider descriptions */
@font-face {
  font-family: "Bigilla";
  src: url("../assets/fonts/Bigilla.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

/* GS-Roman (Grand Slang Roman) — used in about page content */
@font-face {
  font-family: "GS-Roman";
  src: url("../assets/fonts/GrandSlang-Roman.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

/* Monument Extended — used in about page description text */
@font-face {
  font-family: "Monument Extended";
  src: url("../assets/fonts/MonumentExtended.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

/* Gabarito — primary site-wide font (body, nav, logo, buttons) */
@font-face {
  font-family: "Gabarito";
  src: url("../assets/fonts/Gabarito.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

/* Ternima — decorative display font */
@font-face {
  font-family: "Ternima";
  src: url("../assets/fonts/Ternima.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

/* Mocka — decorative font */
@font-face {
  font-family: "Mocka";
  src: url("../assets/fonts/Mocka.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

/* Monigue — decorative font */
@font-face {
  font-family: "Monigue";
  src: url("../assets/fonts/Monigue.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

/* Blogh — decorative font */
@font-face {
  font-family: "Blogh";
  src: url("../assets/fonts/Blogh.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

/* Yorkmade — decorative font */
@font-face {
  font-family: "Yorkmade";
  src: url("../assets/fonts/Yorkmade.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

/* -------------------------------------------------------
 * 5. BASE HTML & BODY STYLES
 * Sets global font, background gradient, and hides scrollbars
 * ------------------------------------------------------- */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "Gabarito";
  background: linear-gradient(135deg, #cdc6be 0%, #b8b0a5 50%, #cdc6be 100%);
  overflow-x: hidden;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge */
  overscroll-behavior: none;       /* Prevents pull-to-refresh & scroll bounce */
}

/* Hide scrollbar — Webkit browsers (Chrome, Safari) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* Lock scroll during preloader animation */
html.loading,
body.loading {
  overflow: hidden;
}

/* -------------------------------------------------------
 * 6. GLOBAL LINK STYLES
 * Default anchor styling across the site
 * ------------------------------------------------------- */
a {
  text-decoration: none;
  color: #cdc6be;
}

/* -------------------------------------------------------
 * 7. GSAP / SPLITTEXT ANIMATION UTILITY CLASSES
 * Used by GSAP SplitText for text reveal animations
 * ------------------------------------------------------- */

/* Individual animated characters, words, and digits */
.word,
.char,
.digit {
  position: relative;
  will-change: transform;
}

/* Line and word wrappers for text animation clipping */
.line,
.word {
  position: relative;
  display: inline-block;
  will-change: transform;
}

/* Optimize section transforms for scroll-triggered animations */
section {
  will-change: transform;
}

/* -------------------------------------------------------
 * 8. NAVIGATION BAR
 * Fixed top nav with mix-blend-mode for color inversion
 * Shared across all pages
 * ------------------------------------------------------- */
nav {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5em 2em;
  color: #cdc6be;
  mix-blend-mode: difference;      /* Inverts colors against background */
  z-index: 2;
  will-change: transform;
}

/* Hide nav on home page (revealed by GSAP after preloader) */
.home-page nav {
  opacity: 0;
  visibility: hidden;
}

/* -------------------------------------------------------
 * 9. NAVIGATION BLUR BACKDROP
 * Frosted glass effect behind the fixed navbar
 * ------------------------------------------------------- */
.nav-blur {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(135deg, #cdc6be 0%, #b8b0a5 50%, #cdc6be 100%);
  z-index: 1;
  pointer-events: none;            /* Allows clicks to pass through */
  filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.5));
  will-change: transform;
}

/* Hide nav blur on home page (revealed after preloader) */
.home-page .nav-blur {
  opacity: 0;
  visibility: hidden;
}

/* Equal-width flex children for nav layout (info | logo | toggle) */
nav > div {
  flex: 1;
}

/* -------------------------------------------------------
 * 10. LOGO
 * Centered brand name in the navigation bar
 * ------------------------------------------------------- */
.logo {
  text-align: center;
  font-family: "Gabarito";
}

.logo a {
  text-decoration: none;
  font-size: 40px;
  color: #cdc6be;
  cursor: default;
  transition: color 0.3s ease;
  text-transform: uppercase;
}

/* -------------------------------------------------------
 * 11. NAVBAR SEARCH TRIGGER BUTTON
 * Search icon button in the nav (used on shop page)
 * ------------------------------------------------------- */
.search-trigger {
  background: none;
  border: none;
  color: #cdc6be;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  transition: opacity 0.3s ease;
}

.search-trigger:hover {
  opacity: 0.7;
}

/* Hide search trigger when burger menu is open or closing */
body:has(.burger.active) .search-trigger,
body.menu-closing .search-trigger {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* -------------------------------------------------------
 * 12. SEARCH OVERLAY
 * Full-width search bar that slides down from the navbar
 * ------------------------------------------------------- */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 88px;
  background: linear-gradient(135deg, #cdc6be 0%, #b8b0a5 50%, #cdc6be 100%);
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0 2em;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
  filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.2));
}

/* Active state — shown when search is triggered */
.search-overlay.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Inner flex container for back button + input */
.search-overlay-inner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2em;
}

/* Back arrow button inside search overlay */
.search-back {
  background: none;
  border: none;
  color: #141412;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0;
  transition: opacity 0.3s ease;
}

.search-back:hover {
  opacity: 0.7;
}

/* Search input field inside the overlay */
#navbar-plant-search {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid #141412;
  font-family: "Gabarito";
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: #141412;
  padding: 0.25em 0;
  outline: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Placeholder styling for search input */
#navbar-plant-search::placeholder {
  color: rgba(20, 20, 18, 0.4);
}

/* -------------------------------------------------------
 * 13. HAMBURGER MENU BUTTON (BURGER)
 * Animated hamburger icon that transforms into an X
 * ------------------------------------------------------- */

/* Burger button wrapper — positioned right in nav */
.toggle-btn {
  display: flex;
  justify-content: flex-end;
}

/* Burger button base — two pseudo-element lines */
.burger {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.75em 2em 1.5em 2em;
  background: rgba(255, 255, 255, 0);
  outline: none;
  border: none;
  width: 28px;
  height: 20px;
  transition: all 250ms ease-out;
  cursor: pointer;
}

/* Two horizontal lines of the burger icon */
.burger:before,
.burger:after {
  content: "";
  width: 40px;
  height: 2px;
  position: absolute;
  background: #cdc6be;
  transition: all 250ms ease-out;
  will-change: transform;
}

/* Top line — offset upward */
.burger:before {
  transform: translateY(-3px);
}

/* Bottom line — offset downward */
.burger:after {
  transform: translateY(3px);
}

/* Active state — top line rotates to form X */
.active.burger:before {
  transform: translateY(0) rotate(45deg);
}

/* Active state — bottom line rotates to form X */
.active.burger:after {
  transform: translateY(0) rotate(-45deg);
}

/* -------------------------------------------------------
 * 14. FULLSCREEN OVERLAY MENU
 * Dark overlay with animated menu items
 * Revealed via GSAP clip-path animation on burger click
 * ------------------------------------------------------- */

/* Overlay backdrop — initially collapsed via clip-path */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  background: #141412;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);  /* Collapsed state */
  will-change: transform;
  z-index: 1;
}

/* Menu items container — centered vertically */
.overlay-menu {
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  gap: 1em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Individual menu link wrapper — clip-path for text reveal */
.menu-item {
  display: flex;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Menu item text — large viewport-width font */
.menu-item p {
  position: relative;
  text-align: center;
  font-family: "Gabarito";
  font-size: 10vw;
  line-height: 80%;
  will-change: transform;
  transition: letter-spacing 0.3s;
}

/* Menu link color */
.menu-item p a {
  color: #cdc6be;
  text-decoration: none;
}

/* Hover effect — expands letter spacing */
.menu-item p:hover {
  letter-spacing: 0.075em;
}

/* -------------------------------------------------------
 * 15. SUB-NAVIGATION (Footer links in overlay)
 * "Terms & Conditions" and "Privacy Policy" links
 * ------------------------------------------------------- */
.sub-nav {
  position: absolute;
  top: 93%;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5em;
  opacity: 0;                      /* Animated in by GSAP */
}

.sub-nav p {
  font-family: "Gabarito";
  font-size: 20px;
  color: #cdc6be;
}

.sub-nav p a {
  position: relative;
  text-decoration: none;
  color: #cdc6be;
  display: inline-block;
}

/* Underline hover animation on sub-nav links */
.sub-nav p a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1.5px;
  background-color: #cdc6be;
  transition: width 0.3s ease-out;
}

.sub-nav p a:hover::before {
  width: 100%;
}

/* -------------------------------------------------------
 * 16. MAIN CONTENT CONTAINER
 * Shared wrapper used by about page and shop page
 * ------------------------------------------------------- */
.container {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: linear-gradient(135deg, #cdc6be 0%, #b8b0a5 50%, #cdc6be 100%);
  overflow-x: hidden;
  position: relative;
  z-index: 0;
}

/* Hide container scrollbar */
.container::-webkit-scrollbar {
  display: none;
}

/* -------------------------------------------------------
 * 17. HERO SECTION (Base)
 * Full-viewport hero — used on home & contact pages
 * ------------------------------------------------------- */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;                  /* Small viewport height (accounts for mobile address bar) */
  overflow: hidden;
  margin: 0;
}

/* Hero heading — centered absolutely (applies to contact page h1) */
.hero h1 {
  font-family: inherit;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  color: #faf3e8;
  font-weight: bolder;
  text-align: center;
}

/* Character animation class for hero heading */
.hero h1 .char {
  position: relative;
  will-change: transform;
}

/* -------------------------------------------------------
 * 18. "GET APP" LINK COMPONENT
 * Reusable animated link with underline + arrow icon
 * Used on: home nav, shop card titles, filter trigger
 * ------------------------------------------------------- */
.get-app-link {
  position: relative;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}

/* Animated underline — expands on hover from left to right */
.get-app-link::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 1.5px;
  background-color: currentColor;
  transition: width 0.3s ease-out;
}

.get-app-link:hover::before {
  width: 100%;
}

/* Arrow icon — slides in on hover using SVG mask */
.get-app-link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1.2em;
  transform: translateY(-50%) translateX(-5px);
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  -webkit-mask: url("../assets/images/arrow-up-right.svg") no-repeat center;
  mask: url("../assets/images/arrow-up-right.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: currentColor;
  opacity: 0;
  transition: all 0.3s ease;
}

.get-app-link:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Work page container fix (legacy/unused) */
.work-page .container::before {
  position: fixed;
}

/* -------------------------------------------------------
 * 19. LOGO IMAGE HOVER EFFECT
 * Shows full logo image when hovering over text logo (desktop only)
 * Uses body::after pseudo-element as the image container
 * ------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  top: 1.2em;
  left: 50%;
  transform: translateX(-50%);
  width: 650px;
  height: 65px;
  background-image: url("../assets/images/logo_normal.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 999;
}

/* Switch to active/light logo when burger menu is open */
body:has(.burger.active)::after {
  background-image: url("../assets/images/logo_active.png");
}

/* Override link color to inherit from parent */
a {
  text-decoration: none;
  color: inherit;
}

/* ============================================================
 *  RESPONSIVE BREAKPOINTS — COMMON ELEMENTS
 * ============================================================ */

/* -------------------------------------------------------
 * TABLETS & MOBILE (max-width: 1025px)
 * ------------------------------------------------------- */
@media (max-width: 1025px) {
  /* Smaller logo text */
  .logo a {
    font-size: 30px;
  }

  /* Larger menu items for touch targets */
  .menu-item p {
    position: relative;
    text-align: center;
    font-family: "Gabarito";
    font-size: 15vw;
    line-height: 80%;
    will-change: transform;
    transition: letter-spacing 0.3s;
  }

  /* Adjust sub-nav position for smaller screens */
  .sub-nav {
    position: absolute;
    top: 85%;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5em;
    opacity: 0;
  }

  /* Hide nav info section (GET APP link) on mobile */
  nav .info {
    visibility: hidden;
  }
}

/* -------------------------------------------------------
 * MEDIUM SCREENS / TABLETS (600px–1025px)
 * ------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1025px) {
  /* Larger logo for tablets */
  .logo a {
    font-size: 50px;
  }

  /* Larger nav info text */
  nav .info p {
    font-size: 1.2rem;
  }

  /* Scale up burger icon for tablets */
  .burger {
    transform: scale(1.2);
  }

  /* Taller nav blur backdrop for tablets */
  .nav-blur {
    height: 100px;
  }

  /* Larger sub-nav text */
  .sub-nav p {
    font-size: 1.75rem;
  }
}

/* -------------------------------------------------------
 * SMALL MOBILE (max-width: 600px)
 * ------------------------------------------------------- */
@media (max-width: 600px) {
  /* Slightly smaller burger icon on small phones */
  .burger {
    transform: scale(0.85);
    margin-right: -10px;
  }
}

/* -------------------------------------------------------
 * SUB-NAV MOBILE LAYOUT (max-width: 1025px)
 * Stacks Terms & Privacy links vertically
 * ------------------------------------------------------- */
@media (max-width: 1025px) {
  .sub-nav {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.3em !important;
    top: 83% !important;           /* Optimized for 6.1" mobile screens */
  }

  .sub-nav p,
  .sub-nav p a {
    font-size: 14px !important;
  }

  /* Hide the dot separator between links */
  .sub-nav p:nth-child(2) {
    display: none !important;
  }
}

/* -------------------------------------------------------
 * SUB-NAV TABLET OVERRIDE (600px–1025px)
 * ------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1025px) {
  .sub-nav p,
  .sub-nav p a {
    font-size: 18px !important;
  }
}

/* -------------------------------------------------------
 * DESKTOP LOGO HOVER (min-width: 1026px)
 * Shows full logo image when hovering text logo
 * ------------------------------------------------------- */
@media (min-width: 1026px) {
  /* Show logo image on hover */
  body:has(nav .logo a:hover)::after {
    opacity: 1;
  }

  /* Hide text logo when image is shown */
  nav .logo a:hover {
    color: transparent !important;
  }
}

/* -------------------------------------------------------
 * 20. CUSTOM CURSOR (Desktop only — min-width: 1026px)
 * Replaces default cursor with a custom animated dot
 * ------------------------------------------------------- */
@media (min-width: 1026px) {
  .custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    will-change: transform;
    mix-blend-mode: difference;
    transition: width 0.3s cubic-bezier(0.23, 1, 0.32, 1), height 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .custom-cursor.hovering {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 1025px) {
  .custom-cursor {
    display: none !important;
  }
}