/* /public_html/assets/index.css */
@import url('./index-xyur4B4F.css');

/* =========================================================
   HEAL PREMIUM THEME (Blue / Grey / Black / White)
   - CSS-only (no layout/JS/HTML changes)
   - Premium buttons: neon glow + 3D shadow + premium borders
   - Keeps: single product card centered + hero logo injection
   ========================================================= */

/* --- Palette & surfaces (site-wide CSS vars used by the build) --- */
:root{
  --background: 220 30% 99%;
  --foreground: 222 47% 9%;

  --card: 0 0% 100%;
  --card-foreground: 222 47% 9%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 9%;

  /* Brand blue */
  --primary: 0 84% 52%;
  --primary-foreground: 0 0% 100%;

  /* Blue-grey system */
  --secondary: 220 18% 96%;
  --secondary-foreground: 222 25% 14%;

  --muted: 220 16% 95%;
  --muted-foreground: 215 16% 40%;

  --accent: 220 16% 92%;
  --accent-foreground: 222 47% 9%;

  --soft-grey: 220 14% 90%;
  --soft-grey-foreground: 222 25% 14%;

  --border: 220 14% 88%;
  --input: 220 14% 92%;
  --ring: 0 84% 52%;

  /* Used by gradients in the existing template */
  --warm: 0 84% 52%;
  --warm-foreground: 0 0% 100%;

  /* Gradients (replaces old pink/orange feel) */
  --gradient-primary: linear-gradient(135deg, hsl(222 47% 12%), hsl(var(--primary)));
  --gradient-soft: linear-gradient(180deg, hsl(220 30% 99%), hsl(220 18% 96%));
  --gradient-accent: linear-gradient(135deg, hsl(var(--primary) / .18), hsl(220 18% 96%));

  /* Premium shadows */
  --shadow-soft: 0 18px 55px -28px hsl(222 47% 9% / .22);
  --shadow-card: 0 26px 70px -42px hsl(222 47% 9% / .30);
  --shadow-glow: 0 22px 70px -34px hsl(var(--primary) / .45);

  /* Button “neon” stack */
  --btn-glow: 0 0 0 1px hsl(var(--primary) / .35), 0 16px 40px -22px hsl(var(--primary) / .65), 0 0 42px hsl(var(--primary) / .22);
  --btn-glow-strong: 0 0 0 1px hsl(var(--primary) / .55), 0 22px 60px -26px hsl(var(--primary) / .80), 0 0 64px hsl(var(--primary) / .30);

  --radius: .9rem;
}


/* Dark mode still looks premium */
.dark{
  --background: 222 47% 7%;
  --foreground: 220 20% 96%;

  --card: 222 47% 10%;
  --card-foreground: 220 20% 96%;

  --popover: 222 47% 10%;
  --popover-foreground: 220 20% 96%;

  --primary: 0 84% 60%;
  --primary-foreground: 222 47% 7%;

  --secondary: 222 35% 14%;
  --secondary-foreground: 220 20% 96%;

  --muted: 222 35% 14%;
  --muted-foreground: 220 12% 70%;

  --accent: 222 35% 16%;
  --accent-foreground: 220 20% 96%;

  --border: 222 30% 18%;
  --input: 222 30% 18%;
  --ring: 0 84% 60%;

  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(222 47% 12%));
  --gradient-soft: linear-gradient(180deg, hsl(222 47% 7%), hsl(222 47% 10%));
  --gradient-accent: linear-gradient(135deg, hsl(var(--primary) / .18), hsl(222 35% 14%));
}

/* --- Global premium base --- */
html, body{
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

body{
  /* “Studio lighting” – subtle, expensive */
  background-image:
    radial-gradient(1050px 650px at 12% -12%, hsl(var(--primary) / .10), transparent 55%),
    radial-gradient(900px 600px at 92% -10%, hsl(220 16% 35% / .10), transparent 60%),
    linear-gradient(180deg, hsl(var(--background)), hsl(220 18% 98%));
  background-repeat: no-repeat;
}


*{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection{
  background: hsl(var(--primary) / .18);
}

/* Premium focus */
:where(a, button, input, textarea, select):focus-visible{
  outline: 3px solid hsl(var(--ring) / .30);
  outline-offset: 2px;
}

/* Header: glass + crisp border */
header{
  background: hsl(var(--background) / .78) !important;
  border-bottom-color: hsl(var(--border)) !important;
  backdrop-filter: blur(14px);
}

/* Footer stays deep premium */
footer.bg-foreground{
  background: hsl(222 47% 7%) !important;
}

/* --- Premium cards (visual only; no layout change) --- */
:where(section) :where(div)[class*="bg-card"],
:where(section) :where(div)[class*="bg-white"]{
  border-color: hsl(var(--border)) !important;
}

/* Make hero/section images feel higher-end */
#home img,
#about img,
#products img{
  box-shadow: var(--shadow-soft);
}

/* =========================================================
   BUTTONS — “$20k” interaction (neon glow + 3D + premium border)
   Target only elements that *look like buttons* (bg-* utility)
   ========================================================= */

/* Base transitions for button-like elements */
:where(button, a)[class*="bg-"]{
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    opacity .18s ease;
  will-change: transform, box-shadow, filter;
}

/* PRIMARY button look (blue) */
:where(button, a)[class*="bg-primary"],
:where(button, a)[class*="bg-gradient-primary"]{
  /* premium gradient border using background-clip trick */
  border: 1px solid transparent !important;
  background:
    linear-gradient(180deg, hsl(var(--primary) / .98), hsl(var(--primary) / .78)) padding-box,
    linear-gradient(135deg,
      hsl(0 84% 62% / .85),
      hsl(220 18% 96% / .55),
      hsl(0 84% 45% / .75)
    ) border-box !important;

  box-shadow:
    0 14px 36px -18px hsl(222 47% 9% / .35),
    var(--btn-glow);
  filter: saturate(1.05);
}


/* 3D “sheen” overlay without changing layout */
:where(button, a)[class*="bg-primary"]{
  position: relative;
  isolation: isolate;
}
:where(button, a)[class*="bg-primary"]::after{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg,
    hsl(0 0% 100% / .22),
    transparent 40%,
    hsl(222 47% 7% / .12)
  );
  mix-blend-mode: soft-light;
  opacity: .9;
  z-index: 0;
}
:where(button, a)[class*="bg-primary"] > *{
  position: relative;
  z-index: 1;
}

/* Hover: lift + stronger neon glow */
:where(button, a)[class*="bg-primary"]:hover,
:where(button, a)[class*="bg-gradient-primary"]:hover{
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 22px 60px -26px hsl(222 47% 9% / .45),
    var(--btn-glow-strong);
  filter: brightness(1.06) saturate(1.12);
}

/* Active: press down slightly */
:where(button, a)[class*="bg-primary"]:active,
:where(button, a)[class*="bg-gradient-primary"]:active{
  transform: translateY(0px) scale(0.995);
  box-shadow:
    0 10px 28px -18px hsl(222 47% 9% / .38),
    var(--btn-glow);
}

/* SECONDARY button look (grey, premium border, subtle blue halo on hover) */
:where(button, a)[class*="bg-secondary"],
:where(button, a)[class*="bg-muted"]{
  border: 1px solid hsl(var(--border)) !important;
  background: linear-gradient(180deg,
    hsl(0 0% 100%),
    hsl(220 18% 97%)
  ) !important;

  box-shadow:
    0 12px 28px -22px hsl(222 47% 9% / .22);
  filter: saturate(1.02);
}

:where(button, a)[class*="bg-secondary"]:hover,
:where(button, a)[class*="bg-muted"]:hover{
  transform: translateY(-2px);
  border-color: hsl(var(--primary) / .35) !important;
  box-shadow:
    0 18px 50px -28px hsl(222 47% 9% / .28),
    0 0 0 1px hsl(var(--primary) / .18),
    0 0 42px hsl(var(--primary) / .16);
  filter: brightness(1.03);
}

/* Header CTA button (often bg-secondary/muted) should also feel premium */
header :where(button, a)[class*="bg-"]{
  box-shadow: 0 12px 26px -22px hsl(222 47% 9% / .28);
}

/* Avoid nav text links shifting */
header nav a:not([class*="bg-"]){
  transform: none !important;
  box-shadow: none !important;
}

/* =========================================================
   EXISTING WORKING CUSTOMIZATIONS (do not remove)
   ========================================================= */

/* Waitlist email field tweaks */
#newsletter input[type="email"]{
  min-height: 3rem;
}
#newsletter input[type="email"]::placeholder{
  font-size: 0.85rem;
}
@media (min-width: 768px){
  #newsletter form{
    max-width: 40rem;
  }
}

/* Products: keep only the first card + center it */
#products .container > div.grid{
  grid-template-columns: minmax(0, 420px) !important;
  justify-content: center !important;
}
#products .container > div.grid > *:nth-child(n+2){
  display: none !important;
}

/* Hero: show HEAL logo above the category line (supports .png or .jpeg) */
#home div[class*="flex items-center"][class*="text-primary"]{
  flex-wrap: wrap;
}

#home div[class*="flex items-center"][class*="text-primary"]::before{
  content: "";
  flex: 0 0 100%;

  /* 1.5x size + clear visibility */
  height: clamp(96px, 13.5vw, 165px);

  /* breathing room from the FITNESS • MENTAL HEALTH • DISCIPLINE line */
  margin-bottom: 0.95rem;

  background-image: url("/assets/heal-logo.png"), url("/assets/heal-logo.jpeg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  /* premium depth */
  filter: drop-shadow(0 18px 30px hsl(222 47% 9% / .16));
  display: block;
}

@media (min-width: 1024px){
  #home div[class*="flex items-center"][class*="text-primary"]::before{
    background-position: left center;
  }
}

/* =========================================================
   ADDITIONS (requested): Instagram icon visibility + Join Mohamed neon border
   ========================================================= */

/* FIX: Instagram icon visibility (hero social row) */
#home :where(a,button)[href*="instagram"],
#home :where(a,button)[aria-label*="Instagram" i],
#home :where(a,button)[title*="Instagram" i]{
  background: hsl(0 0% 100% / .92) !important;
  border: 1px solid hsl(var(--border)) !important;
  box-shadow: 0 14px 34px -26px hsl(222 47% 9% / .35), 0 0 0 1px hsl(var(--primary) / .16) !important;
  color: hsl(var(--primary)) !important;

  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
}

#home :where(a,button)[href*="instagram"] svg,
#home :where(a,button)[aria-label*="Instagram" i] svg,
#home :where(a,button)[title*="Instagram" i] svg{
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  fill: none !important;
  opacity: 1 !important;
}

#home :where(a,button)[href*="instagram"]:hover,
#home :where(a,button)[aria-label*="Instagram" i]:hover,
#home :where(a,button)[title*="Instagram" i]:hover{
  transform: translateY(-2px);
  box-shadow:
    0 18px 48px -28px hsl(222 47% 9% / .40),
    0 0 0 1px hsl(var(--primary) / .28),
    0 0 34px hsl(var(--primary) / .22) !important;
}

/* Existing Join HEAL styling (kept as-is) */
header :where(a,button)[class*="rounded-full"][class*="bg-"]{
  position: relative;
  border: 1px solid transparent !important;

  background:
    linear-gradient(hsl(var(--background) / .92), hsl(var(--background) / .92)) padding-box,
    linear-gradient(135deg,
      hsl(var(--primary) / .95),
      hsl(var(--primary) / .18),
      hsl(var(--primary) / .85)
    ) border-box !important;

  box-shadow:
    0 14px 34px -26px hsl(222 47% 9% / .34),
    0 0 0 1px hsl(var(--primary) / .22),
    0 0 26px hsl(var(--primary) / .18) !important;

  transform: translateY(0);
}

header :where(a,button)[class*="rounded-full"][class*="bg-"]:hover{
  transform: translateY(-2px) scale(1.01);
  box-shadow:
    0 20px 55px -30px hsl(222 47% 9% / .45),
    0 0 0 1px hsl(var(--primary) / .44),
    0 0 42px hsl(var(--primary) / .26) !important;
}

header :where(a,button)[class*="rounded-full"][class*="bg-"]:active{
  transform: translateY(0px) scale(0.995);
}

/* =========================================================
   UPDATED (requested): Force Join HEAL neon border + pop hover
   - Targets the actual Join button link to #newsletter
   - Does not affect any other elements
   ========================================================= */
header :where(a,button)[href*="#newsletter"]{
  border: 1px solid transparent !important;

  background:
    linear-gradient(hsl(var(--background) / .92), hsl(var(--background) / .92)) padding-box,
    linear-gradient(135deg,
      hsl(var(--primary) / .98),
      hsl(var(--primary) / .22),
      hsl(var(--primary) / .90)
    ) border-box !important;

  box-shadow:
    0 16px 40px -28px hsl(222 47% 9% / .38),
    0 0 0 1px hsl(var(--primary) / .32),
    0 0 34px hsl(var(--primary) / .22) !important;

  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
  transform: translateY(0);
  will-change: transform, box-shadow;
}

header :where(a,button)[href*="#newsletter"]:hover{
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 26px 70px -34px hsl(222 47% 9% / .48),
    0 0 0 1px hsl(var(--primary) / .58),
    0 0 56px hsl(var(--primary) / .30) !important;
  filter: brightness(1.04) saturate(1.08);
}

header :where(a,button)[href*="#newsletter"]:active{
  transform: translateY(0px) scale(0.995);
}

/* =========================================================
   ABOUT ICON SWAP (ONLY these 4 items) — no layout changes
   Mental Resilience      -> Shield
   Structured Training    -> Clipboard Check
   Mental Focus           -> Target
   Sustainable Performance-> Trending Up
   ========================================================= */

/* Base: turn the existing icon box into a mask-icon holder */
#about div[class*="grid-cols-1"][class*="sm:grid-cols-2"]
  div.bg-gradient-accent.rounded-lg.flex-shrink-0{
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Hide the original SVG icons (we replace with masked icons) */
#about div[class*="grid-cols-1"][class*="sm:grid-cols-2"]
  div.bg-gradient-accent.rounded-lg.flex-shrink-0 svg{
  display: none !important;
}

/* Default masked icon sizing */
#about div[class*="grid-cols-1"][class*="sm:grid-cols-2"]
  div.bg-gradient-accent.rounded-lg.flex-shrink-0::before{
  content: "" !important;
  width: 18px;
  height: 18px;
  background-color: hsl(var(--primary));
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  filter: drop-shadow(0 8px 14px hsl(222 47% 9% / .18));
}

/* Slightly larger on md+ (matches your original responsive icon sizes) */
@media (min-width: 768px){
  #about div[class*="grid-cols-1"][class*="sm:grid-cols-2"]
    div.bg-gradient-accent.rounded-lg.flex-shrink-0::before{
    width: 20px;
    height: 20px;
  }
}

/* 1) Mental Resilience -> Shield */
#about div[class*="grid-cols-1"][class*="sm:grid-cols-2"] > div:nth-child(1)
  div.bg-gradient-accent.rounded-lg.flex-shrink-0::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l7 4v6c0 5-3 9-7 10-4-1-7-5-7-10V6l7-4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l7 4v6c0 5-3 9-7 10-4-1-7-5-7-10V6l7-4z'/%3E%3C/svg%3E");
}

/* 2) Structured Training -> Clipboard Check */
#about div[class*="grid-cols-1"][class*="sm:grid-cols-2"] > div:nth-child(2)
  div.bg-gradient-accent.rounded-lg.flex-shrink-0::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 2h6a2 2 0 0 1 2 2v2H7V4a2 2 0 0 1 2-2z'/%3E%3Cpath d='M9 14l2 2 4-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 2h6a2 2 0 0 1 2 2v2H7V4a2 2 0 0 1 2-2z'/%3E%3Cpath d='M9 14l2 2 4-4'/%3E%3C/svg%3E");
}

/* 3) Mental Focus -> Target */
#about div[class*="grid-cols-1"][class*="sm:grid-cols-2"] > div:nth-child(3)
  div.bg-gradient-accent.rounded-lg.flex-shrink-0::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v2'/%3E%3Cpath d='M12 20v2'/%3E%3Cpath d='M2 12h2'/%3E%3Cpath d='M20 12h2'/%3E%3C/svg%3E");
}

/* 4) Sustainable Performance -> Trending Up */
#about div[class*="grid-cols-1"][class*="sm:grid-cols-2"] > div:nth-child(4)
  div.bg-gradient-accent.rounded-lg.flex-shrink-0::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 7-7'/%3E%3Cpath d='M14 8h6v6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 7-7'/%3E%3Cpath d='M14 8h6v6'/%3E%3C/svg%3E");
}

/* =========================================================
   MOBILE MENU CTA TEXT FIX
   Desktop already says "Join HEAL" — this forces the MOBILE
   menu CTA (full-width button) to display "Join HEAL".
   No layout changes.
   ========================================================= */
@media (max-width: 768px){
  header .md\:hidden :where(a,button).w-full.mt-4{
    position: relative !important;
    color: transparent !important;        /* hide "Join The Glow" */
    text-shadow: none !important;
  }

  header .md\:hidden :where(a,button).w-full.mt-4::after{
    content: "Join HEAL" !important;
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;

    color: hsl(var(--foreground)) !important;
    font-weight: 600;
    letter-spacing: .01em;
    pointer-events: none; /* keeps clicks working */
  }
}