/* ==========================================================================
   Greenco Terrapack - shared site additions
   Loaded AFTER each page's inline <style>, so these rules win.
   0. Light, neutral colour palette (overrides each page's inline colours)
   1. Mobile navigation (hamburger menu)
   2. Custom cursor (leaf) + tap effect on touch screens
   3. Image protection
   ========================================================================== */

/* -------------------------------------------------------------------------
   0. LIGHT NEUTRAL PALETTE
   Brighter, clean off-white instead of the old beige/pink. Change the three
   --sand values here to adjust the look of EVERY page at once.
   ------------------------------------------------------------------------- */
:root{
  --sand:#FBFBFA;          /* main page background (very light) */
  --sand-dim:#F3F3F0;      /* alternate sections */
  --sand-sage:#EEF3EA;     /* soft green-tinted sections */
  --paper:#FFFFFF;         /* cards */
  --line:rgba(35,36,31,.10);
}
header{background:rgba(255,255,255,.92);}
.controls-wrap{background:rgba(255,255,255,.95);}
.typing-box{background:linear-gradient(135deg,#F4F8EF,#FFFFFF);}

/* -------------------------------------------------------------------------
   1. MOBILE NAVIGATION
   The old CSS hid the menu links on phones (display:none) and never gave
   visitors a button to open them. This adds that button and a drop-down panel.
   ------------------------------------------------------------------------- */
.nav-actions{display:flex; align-items:center; gap:10px;}

.nav-toggle{
  display:none;                      /* desktop: hidden */
  width:44px; height:44px; padding:0;
  border:1px solid var(--line); border-radius:8px;
  background:transparent; cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle span{
  display:block; width:22px; height:2px; border-radius:2px;
  background:var(--forest, #1B3123);
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle:focus-visible{outline:2px solid var(--clay, #B5651D); outline-offset:2px;}
header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
header.nav-open .nav-toggle span:nth-child(2){opacity:0;}
header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.nav-links .nav-cta-mobile{display:none;}   /* only shown on very small phones */

@media (max-width:860px){
  .nav-toggle{display:inline-flex;}

  header .nav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper, #fff);
    border-bottom:1px solid var(--line);
    box-shadow:0 22px 30px -20px rgba(35,36,31,.4);
    padding:6px 0 14px;
    max-height:calc(100vh - 76px); max-height:calc(100dvh - 76px);
    overflow-y:auto;
  }
  header.nav-open .nav-links{display:flex;}

  header .nav-links a{
    display:block; padding:15px 24px; font-size:16px;
    border-bottom:1px solid var(--line);
  }
  header .nav-links a::after{display:none;}
  header .nav-links a.active{color:var(--clay, #B5651D); background:rgba(92,122,91,.08);}
}

/* Very small phones: move the "Be a Distributor" button into the menu */
@media (max-width:560px){
  .nav-actions .btn{display:none;}
  header .nav-links .nav-cta-mobile{
    display:block; margin:14px 24px 0; padding:14px 18px; text-align:center;
    background:var(--clay, #B5651D); color:#fff; border:0; border-radius:6px; font-weight:600;
  }
  header .nav-links .nav-cta-mobile.active{color:#fff; background:var(--clay, #B5651D);}
}

/* -------------------------------------------------------------------------
   2. CUSTOM CURSOR: a little leaf  (desktop mouse only; touch devices unchanged)
   - The leaf hangs from its tip and swings as you move the mouse.
   - Over links/buttons it grows and turns orange.
   - Clicking makes it press down and release a few tiny leaves.
   Switched on by site.js (adds class "gt-cursor" to <html>).
   ------------------------------------------------------------------------- */
.gt-leaf{
  position:fixed; top:0; left:0; z-index:2147483647;
  width:28px; height:28px; margin:-5px 0 0 -23px;   /* leaf tip sits exactly on the pointer */
  pointer-events:none; opacity:0; will-change:transform;
  transform-origin:23px 5px;
  transition:opacity .2s ease;
}
.gt-leaf svg{
  display:block; width:100%; height:100%; overflow:visible;
  transform-origin:23px 5px;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.4);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.28));
}
.gt-leaf path{
  fill:#5C7A5B; stroke:#fff; stroke-width:1.4; stroke-linejoin:round; paint-order:stroke;
  transition:fill .2s ease;
}
html.gt-cursor-on .gt-leaf{opacity:1;}
html.gt-cursor-link .gt-leaf svg{transform:scale(1.35);}
html.gt-cursor-link .gt-leaf path{fill:#B5651D;}
html.gt-cursor-down .gt-leaf svg{transform:scale(.8);}
html.gt-cursor-native .gt-leaf{opacity:0 !important;}   /* over text boxes / map / video */

/* tiny leaves released on click */
.gt-bit{
  position:fixed; top:0; left:0; z-index:2147483646; pointer-events:none;
  width:9px; height:9px; margin:-4px 0 0 -4px;
  border-radius:0 100% 0 100%;
}

@media (hover:hover) and (pointer:fine){
  html.gt-cursor, html.gt-cursor *{cursor:none !important;}
  html.gt-cursor input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
  html.gt-cursor textarea,
  html.gt-cursor select,
  html.gt-cursor [contenteditable="true"]{cursor:text !important;}
  html.gt-cursor iframe, html.gt-cursor video{cursor:auto !important;}
}
@media (hover:none), (pointer:coarse){
  .gt-leaf{display:none !important;}      /* no mouse pointer on touch screens */
}

/* touch screens: leaf that pops up where you tap */
.gt-tapleaf{
  position:fixed; top:0; left:0; z-index:2147483646; pointer-events:none;
  width:28px; height:28px; margin:-14px 0 0 -14px; opacity:0;
}
.gt-tapleaf svg{display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));}
.gt-tapleaf path{fill:#5C7A5B; stroke:#fff; stroke-width:1.4; stroke-linejoin:round; paint-order:stroke;}

/* -------------------------------------------------------------------------
   3. IMAGE PROTECTION (light deterrent: no drag-to-desktop / long-press save)
   ------------------------------------------------------------------------- */
img{-webkit-user-drag:none; user-drag:none; -webkit-touch-callout:none;}

/* -------------------------------------------------------------------------
   CALL BUTTON (premium round phone icon in the nav, after "Be a Distributor")
   ------------------------------------------------------------------------- */
.nav-call{
  position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(145deg,#8CC063 0%,#3E8E4F 100%);   /* fresh leaf green */
  color:#fff;                                      /* white icon */
  border:1px solid rgba(233,216,166,.85);          /* fine cream-gold ring */
  box-shadow:0 8px 18px -8px rgba(62,142,79,.65), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.nav-call svg{
  position:relative; z-index:1; width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
/* soft green ripple that gently draws the eye */
.nav-call::after{
  content:""; position:absolute; inset:-1px; border-radius:50%;
  border:1px solid rgba(95,170,95,.6); pointer-events:none;
  animation:navCallPulse 3.2s ease-out infinite;
}
@keyframes navCallPulse{0%{transform:scale(1); opacity:.7;} 70%,100%{transform:scale(1.55); opacity:0;}}

.nav-call:hover{
  background:linear-gradient(145deg,#C97A2B,#B5651D); color:#fff; border-color:#E4B26A;
  transform:translateY(-2px);
  box-shadow:0 12px 22px -8px rgba(181,101,29,.7), inset 0 1px 0 rgba(255,255,255,.3);
}
.nav-call:hover svg{animation:navCallRing .6s ease-in-out;}     /* phone "rings" on hover */
@keyframes navCallRing{0%,100%{transform:rotate(0);} 20%{transform:rotate(-16deg);} 40%{transform:rotate(14deg);} 60%{transform:rotate(-10deg);} 80%{transform:rotate(6deg);}}
.nav-call:active{transform:scale(.94);}
.nav-call:focus-visible{outline:2px solid #DBA648; outline-offset:3px;}

@media (prefers-reduced-motion:reduce){
  .nav-call::after{display:none; animation:none;}
  .nav-call:hover svg{animation:none;}
}