/* ==========================================================================
   Lets Safe - modern theme layer
   Loaded last, after letssafe.css and site-polish.css.

   Brand is unchanged: same lime (--accent--primary-1 #7dff68), same near-black
   (--neutral--800 #060606), same Mona Sans, same logo and illustrations.
   What changes is the *surface treatment*: a sticky glass header, pill
   buttons, softer/rounder cards, calmer shadows and a little accent glow.

   Layout rule for this file: never add padding/margin to anything inside the
   header - the nav has no spare horizontal room. Hover affordances are drawn
   with absolutely-positioned pseudo-elements so they cost zero layout.
   ========================================================================== */

:root{
  /* Radii scale - rounder than the original 12/14/18px set */
  --ls-r-sm: 12px;
  --ls-r-md: 18px;
  --ls-r-lg: 24px;
  --ls-r-xl: 32px;
  --ls-r-pill: 999px;

  /* Layered, low-opacity shadows (modern depth instead of hard borders) */
  --ls-shadow-sm: 0 1px 2px rgba(6,6,6,.04), 0 2px 8px -4px rgba(6,6,6,.08);
  --ls-shadow-md: 0 2px 4px rgba(6,6,6,.03), 0 12px 28px -12px rgba(6,6,6,.14);
  --ls-shadow-lg: 0 4px 8px rgba(6,6,6,.03), 0 28px 56px -24px rgba(6,6,6,.20);
  --ls-shadow-accent: 0 10px 28px -10px rgba(125,255,104,.55);

  --ls-hairline: rgba(6,6,6,.09);
  --ls-ease: cubic-bezier(.2,.7,.3,1);
}

/* --------------------------------------------------------------------------
   1. Sticky glass header
   The header was static; making it sticky is the single biggest upgrade to
   how the site feels to use. Padding is trimmed so the bar sits slimmer.
   -------------------------------------------------------------------------- */
.header-wrapper{
  position: sticky;
  top: 0;
  z-index: 1000;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color .25s var(--ls-ease),
              border-color .25s var(--ls-ease),
              box-shadow .25s var(--ls-ease);
}
.header-wrapper.is-scrolled{
  background-color: rgba(255,255,255,.86);
  border-bottom-color: var(--ls-hairline);
  box-shadow: 0 8px 28px -20px rgba(6,6,6,.35);
}
/* Browsers without backdrop-filter get a solid bar rather than a muddy one */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .header-wrapper{background-color:#fff}
}

/* Hover underline for nav items. Drawn on ::before (::after is reserved for
   the current-page indicator in header-nav.css) and absolutely positioned so
   it adds no width - the nav bar has no room to spare. */
.header-nav-link,.dropdown-toggle{position: relative}
.header-nav-link::before,.dropdown-toggle::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:2px;
  border-radius:2px;
  background: currentColor;
  opacity:.28;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .22s var(--ls-ease);
}
.header-nav-link:hover::before,.dropdown-toggle:hover::before{transform: scaleX(1)}

.dropdown-column-wrapper{
  border-radius: var(--ls-r-lg);
  box-shadow: var(--ls-shadow-lg);
  border: 1px solid var(--ls-hairline);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. Buttons - pill shaped, with a lime glow on the primary action
   -------------------------------------------------------------------------- */
.btn-primary,.btn-secondary,.w-button,.button-row{
  border-radius: var(--ls-r-pill);
  letter-spacing: -.01em;
}
.btn-primary{
  box-shadow: var(--ls-shadow-sm);
  transition: background-color .2s var(--ls-ease), box-shadow .22s var(--ls-ease),
              transform .22s var(--ls-ease), color .2s var(--ls-ease);
}
.btn-primary:hover{
  background-color: var(--neutral--800);
  transform: translateY(-2px) scale(1.01);
  box-shadow: var(--ls-shadow-md), var(--ls-shadow-accent);
}
.btn-primary:active{transform: translateY(0) scale(1)}
.btn-secondary{
  border-color: var(--ls-hairline);
  transition: border-color .2s var(--ls-ease), background-color .2s var(--ls-ease),
              transform .22s var(--ls-ease), box-shadow .22s var(--ls-ease);
}
/* The base stylesheet's hover inverts the button: black background AND white
   text. This theme keeps a light tint instead, so the text colour has to be
   restored explicitly - otherwise the label renders white on near-white and
   becomes unreadable.
   The .white / .border-white variants sit on dark backgrounds and keep the
   original inverted hover, so they are excluded. */
.btn-secondary:hover{
  transform: translateY(-2px);
  box-shadow: var(--ls-shadow-sm);
}
.btn-secondary:not(.white):not(.border-white):hover{
  border-color: var(--neutral--800);
  background-color: rgba(6,6,6,.04);
  color: var(--neutral--800);
}

/* --------------------------------------------------------------------------
   3. Surfaces - rounder cards, depth from shadow rather than hard borders
   -------------------------------------------------------------------------- */
.card{
  border-radius: var(--ls-r-lg);
  border-color: var(--ls-hairline);
  box-shadow: var(--ls-shadow-sm);
  transition: transform .24s var(--ls-ease), box-shadow .24s var(--ls-ease),
              border-color .24s var(--ls-ease);
}
.card:hover{box-shadow: var(--ls-shadow-md)}
a:hover > .card,.card-link:hover .card{transform: translateY(-4px); box-shadow: var(--ls-shadow-lg)}

/* The big rounded feature blocks (lime CTA card, black footer card) */
.section-card,.card-footer-top{border-radius: var(--ls-r-xl)}
.section-card{box-shadow: 0 30px 70px -40px rgba(125,255,104,.9)}

/* Rounded media so imagery matches the softer container language */
.image-wrapper{border-radius: var(--ls-r-md)}
.social-icon-square{border-radius: var(--ls-r-pill)}

/* --------------------------------------------------------------------------
   4. Inputs
   -------------------------------------------------------------------------- */
.input,.text-area,select,.w-select{
  border-radius: var(--ls-r-md);
  border-color: var(--ls-hairline);
  transition: border-color .2s var(--ls-ease), box-shadow .2s var(--ls-ease);
}
.input:focus,.text-area:focus,select:focus{
  border-color: var(--neutral--800);
  box-shadow: 0 0 0 4px rgba(125,255,104,.35);
  outline: none;
}

/* --------------------------------------------------------------------------
   5. Typography - tighter at display sizes
   -------------------------------------------------------------------------- */
.display-1{letter-spacing:-.03em; line-height:1.04}
.display-2{letter-spacing:-.025em; line-height:1.12}
.display-3,.display-4{letter-spacing:-.02em}
h1,h2{letter-spacing:-.025em}
.heading-h4-size,.heading-h5-size{letter-spacing:-.015em}

/* The lime marker-pen highlight, softened into a rounded chip */
.highlighted-text{border-radius: var(--ls-r-sm); padding-left:.18em; padding-right:.18em}

/* --------------------------------------------------------------------------
   6. A single, very soft lime glow behind the top of each page.
   Sits behind content; adds depth without touching markup or imagery.
   -------------------------------------------------------------------------- */
.page-wrapper{position: relative; isolation: isolate}
.page-wrapper::before{
  content:"";
  position:absolute;
  top:-260px; left:50%;
  /* 100% (not vw) so the centred glow can never overhang and create a
     horizontal scrollbar on narrow viewports. */
  width:min(1100px, 100%); height:680px;
  transform:translateX(-50%);
  background: radial-gradient(closest-side, rgba(125,255,104,.26), rgba(125,255,104,0) 72%);
  pointer-events:none;
  z-index:-1;
}

/* --------------------------------------------------------------------------
   7. Rhythm - slightly tighter vertical spacing reads more current
   -------------------------------------------------------------------------- */
@media (min-width: 992px){
  .section{padding-top:112px; padding-bottom:112px}
}

/* --------------------------------------------------------------------------
   8. Respect reduced-motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .btn-primary:hover,.btn-secondary:hover,.card:hover,
  a:hover > .card,.card-link:hover .card{transform:none}
  .header-nav-link::before,.dropdown-toggle::before{transition:none}
}