/* ==========================================================================
   RAMYA PRESS SYSTEM
   One definition of how everything tappable behaves under a finger, loaded
   last on every page so it settles the question wherever a button lives:
   css/styles.css, portal-styles.css, or the inline block in index.html.

   WHY THE PRESSED FILL IS OPAQUE, which is the whole point of this file.
   .btn-primary is rgba(31,58,50,0.88) sitting on a backdrop-filter. The press
   below scales the button, which on iOS promotes it to its own compositing
   layer; the backdrop filter then stops sampling the page behind it, and an
   0.88 alpha fill over nothing renders close to white. The label is white, so
   the button read as blank the moment a finger landed on it. An opaque fill
   has nothing to sample and cannot do that.

   The pressed colour is our gold. It is the same white on gold that .btn-gold
   already wears at rest, so a press looks like the brand rather than like a
   state nobody designed.

   TIMING. The transition on the resting rule is the RELEASE and runs slower,
   200ms, so the button settles back. The one inside :active is the PRESS and
   runs faster, 120ms, so it answers the finger immediately. Fast in, slow out
   is what reads as something physical moving, rather than a colour changing.

   HOVER IS NOT TOUCH. Nothing here defines a hover. Every hover on this site
   already sits inside @media(hover:hover), which a phone never matches, so
   the press below is the only feedback a touch device gets and it has to
   carry the whole job on its own.
   ========================================================================== */

:root{
  --press-in:120ms;
  --press-out:200ms;
  --press-ease:cubic-bezier(.2,.8,.2,1);
  --press-gold:rgba(168,133,76,1);
}

/* Element qualified on purpose. These have to beat the .btn rules already in
   three stylesheets whatever order the browser loads them in, and a tag plus
   a class plus a pseudo class does that without reaching for !important. */
a.btn,
button.btn,
a.nav-cta,
a.nav-signin,
a.wa,
button.tab,
a.pc-cta,
button.pc-cta{
  -webkit-tap-highlight-color:transparent;
  transition:
    transform var(--press-out) var(--press-ease),
    box-shadow var(--press-out) var(--press-ease),
    background-color var(--press-out) ease,
    border-color var(--press-out) ease,
    color var(--press-out) ease;
}

/* THE PRESS */
a.btn:active,
button.btn:not(:disabled):active,
a.btn-primary:active,
button.btn-primary:not(:disabled):active,
a.btn-gold:active,
button.btn-gold:not(:disabled):active,
a.btn-glass:active,
button.btn-glass:not(:disabled):active,
a.nav-cta:active,
a.nav-signin:active,
a.pc-cta:active,
button.pc-cta:not(:disabled):active{
  transition-duration:var(--press-in);
  transform:scale(.965);
  background-image:none;
  background-color:var(--press-gold);
  color:#fff;
  border-color:rgba(255,255,255,0.30);
  /* the shadow tightens as the button goes down, so it reads as moving
     towards the page rather than just darkening */
  box-shadow:0 3px 10px rgba(168,133,76,0.40),
             inset 0 1px 0 rgba(255,255,255,0.22);
}

/* a small quiet subline inside a button must not stay dimmed on gold */
a.btn:active .btn-s,
button.btn:not(:disabled):active .btn-s{
  opacity:.85;
  color:#fff;
}

/* The round WhatsApp button keeps its circle and its gold glyph, so it presses
   without inheriting the fill above. */
a.wa:active{
  transition-duration:var(--press-in);
  transform:scale(.94);
  box-shadow:0 3px 10px rgba(31,58,50,0.30);
}

/* KEYBOARD, WHICH IS NOT A PRESS AND NOT A HOVER.
   focus-visible only, so a mouse or a finger never draws this ring, and a Tab
   key always does. */
a.btn:focus-visible,
button.btn:focus-visible,
a.nav-cta:focus-visible,
a.nav-signin:focus-visible,
a.wa:focus-visible,
button.tab:focus-visible,
a.pc-cta:focus-visible,
button.pc-cta:focus-visible{
  outline:2px solid var(--press-gold);
  outline-offset:3px;
}

/* A disabled control must not pretend to move. */
button.btn:disabled,
button.btn:disabled:active{
  transform:none;
  box-shadow:none;
}

@media(prefers-reduced-motion:reduce){
  a.btn,button.btn,a.nav-cta,a.nav-signin,a.wa,button.tab,a.pc-cta,button.pc-cta{
    transition:background-color 120ms ease,color 120ms ease,border-color 120ms ease;
  }
  a.btn:active,button.btn:not(:disabled):active,
  a.nav-cta:active,a.nav-signin:active,a.wa:active,
  a.pc-cta:active,button.pc-cta:not(:disabled):active{
    transform:none;
  }
}

/* ==========================================================================
   MOBILE DECLUTTER, item 13. Phones only, 768px and under.

   The press state fills every button with --press-gold and sets the label to
   white. White on that gold is 3.43:1, under the 4.5:1 floor, so a button that
   passed at rest was failing again the moment a finger was on it. On phones
   the pressed fill goes to the same lighter gold the resting gold button now
   uses and the label goes deep forest, which is 5.11:1.

   Media scoped on purpose: this file is otherwise global and is loaded by all
   thirteen marketing pages including index.html, so an unscoped rule here
   would change the 1280px render.
   ========================================================================== */
@media(max-width:768px){
  :root{--press-gold:#C2A368;}

  a.btn:active,
  button.btn:not(:disabled):active,
  a.btn-primary:active,
  button.btn-primary:not(:disabled):active,
  a.btn-gold:active,
  button.btn-gold:not(:disabled):active,
  a.btn-glass:active,
  button.btn-glass:not(:disabled):active,
  a.nav-cta:active,
  a.nav-signin:active{
    color:#1F3A32;
    border-color:rgba(31,58,50,0.22);
  }

  a.btn:active .btn-s,
  button.btn:not(:disabled):active .btn-s{
    color:#1F3A32;
    opacity:.82;
  }

  /* THE CONSENT BANNER READS AS A CARD ON ANY GROUND.
     The banner is a forest panel at 0.96 alpha and it is fixed, so it comes to
     rest on whatever happens to be under it. Against the dark footer, and
     against the dark Method panel and the closing panel, it was separating on
     its drop shadow alone: the panel measures 1.29:1 against the footer, which
     is close to invisible. A white hairline takes that to about 2.2:1.

     On the ivory page and the sand panels the banner already separates at
     9.05:1 and 8.02:1, so there the line is only a rim and not a drawn box.

     The banner's own styles are injected by js/consent.js. This overrides the
     border and nothing else: not its copy, not its buttons, not its position,
     not the consent logic. Scoped to phones, so the 1280px render is untouched.
     It lives in press.css because that is the one stylesheet all thirteen
     marketing pages load, index.html included. */
  #ramya-consent-banner{
    border:1px solid rgba(255,255,255,0.42);
  }
}