/* =========================================================================
   RF THUNDER — BUTTON COLOR & INTERACTION FIX
   -------------------------------------------------------------------------
   Loaded LAST (after rfthunder-home.css / rfthunder-blog.css and after the
   inline --bg/--ink/--muted/--red variables generated from the Customizer),
   so these rules always win the cascade — regardless of cached CSS or any
   saved Customizer color.

   Every color below is one of the site's 4 brand colors (see :root in
   rfthunder-home.css) — buttons use --red at rest, the computed lighter
   --red-hover shade on hover, so nothing here introduces a 5th color.
   ========================================================================= */

:root{
  /* Aliases onto the single 4-color system (see rfthunder-home.css) —
     kept only so the rules below stay readable; not separate colors. */
  --rfth-red-solid: var(--red);
  --rfth-red-solid-hover: var(--red-hover);
  --rfth-red: var(--red);
}

/* -------------------------------------------------------------------------
   Guaranteed black page background — loaded last so this always wins over
   the Hello Elementor parent stylesheet's own body rule, even if that
   rule happens to be more specific (e.g. a body.hello-elementor selector
   beats a plain "body{...}" selector regardless of load order). Matters
   most on mobile: the elastic overscroll/"rubber-band" bounce past the
   top or bottom of the page is painted from html/body's own background,
   NOT from the fixed WebGL canvas (fixed elements don't extend into that
   bounce region), so if the parent theme's white ever won that fight,
   scrolling to the bottom would flash white for a moment. See also the
   html/body rules in rfthunder-home.css and rfthunder-blog.css.
   ------------------------------------------------------------------------- */
html, body{
  background: var(--bg) !important;
  overscroll-behavior-y: none !important;
}

/* -------------------------------------------------------------------------
   Shared label treatment for every solid red button below — bold, slightly
   letter-spaced, uppercase-friendly weight, with a soft dark text-shadow so
   the white label reads clearly against the red fill at any size.
   ------------------------------------------------------------------------- */
.work-cta-btn,
.cta-btn--solid,
.contact-submit{
  color: var(--ink) !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-shadow: 0 1px 2px rgba(var(--bg-rgb),0.35) !important;
}

/* -------------------------------------------------------------------------
   Selected Work — "Click Here →" button
   At-rest shadow is neutral/dark, NOT red-tinted — a red-tinted glow at
   rest bleeds into the black background and makes the button read as a
   different/lighter red than the flat, glow-free red used in heading text
   (em/eyebrow) and the "hello@rfthunder.in" email link, even though the
   button's own fill color is the exact same var(--red). The red glow is
   reserved for :hover, where it's an intentional interaction cue rather
   than the resting look that needs to color-match the text.
   ------------------------------------------------------------------------- */
.work-cta-btn{
  background: var(--rfth-red-solid) !important;
  box-shadow: 0 6px 16px -6px rgba(var(--bg-rgb),0.6) !important;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
.work-cta-btn:hover{
  background: var(--rfth-red-solid-hover) !important;
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 0 14px 30px -8px rgba(var(--red-hover-rgb),0.75) !important;
}

/* -------------------------------------------------------------------------
   Selected Work popup + Contact success popup — "Submit →" / "Mail now →"
   Same neutral at-rest shadow reasoning as .work-cta-btn above.
   ------------------------------------------------------------------------- */
.cta-btn--solid{
  background: var(--rfth-red-solid) !important;
  box-shadow: 0 3px 8px -2px rgba(var(--bg-rgb),0.4) !important;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
.cta-btn--solid:hover{
  background: var(--rfth-red-solid-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 12px -3px rgba(var(--bg-rgb),0.5) !important;
}

/* -------------------------------------------------------------------------
   Selected Work popup + Contact success popup — "×" close button
   Neutral at rest (was inheriting a possibly-tinted --ink), red ring +
   subtle rotation on hover for a clear close affordance.
   ------------------------------------------------------------------------- */
.rfth-modal__close{
  border-color: rgba(var(--ink-rgb),0.25) !important;
  color: var(--ink) !important;
  transition: border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease !important;
}
.rfth-modal__close:hover{
  border-color: var(--rfth-red) !important;
  color: var(--ink) !important;
  background: rgba(var(--red-rgb),0.12) !important;
  transform: rotate(90deg) !important;
}

/* -------------------------------------------------------------------------
   Leadership carousel — prev/next arrow buttons
   Default: solid, unambiguous red outline (previously a 35%-opacity red
   that visually read as pink against the blurred panel).
   Hover: fills with red + lifts + glows — a clear, confident hover state.
   Active (the moment you click): a lighter red flash so the click itself
   is visibly registered, then it settles back to the hover/default state.
   ------------------------------------------------------------------------- */
.team-nav{
  border-color: var(--rfth-red) !important;
  background: rgba(var(--red-rgb),0.06) !important;
  color: var(--ink) !important;
  transition: border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease !important;
}
.team-nav:hover{
  border-color: var(--rfth-red) !important;
  background: var(--rfth-red) !important;
  color: var(--ink) !important;
  box-shadow: 0 8px 22px -6px rgba(var(--red-rgb),0.65), 0 0 0 4px rgba(var(--red-rgb),0.15) !important;
  transform: translateY(-50%) scale(1.08) !important;
}
.team-nav:active{
  background: var(--rfth-red-solid) !important;
  border-color: var(--rfth-red-solid) !important;
  transform: translateY(-50%) scale(0.96) !important;
  box-shadow: 0 4px 14px -4px rgba(var(--red-rgb),0.8) !important;
}

/* -------------------------------------------------------------------------
   Contact form — "Let's Connect →" submit button. Uses the same var(--red)
   as the "hello@rfthunder.in" email link color, with the computed lighter
   --red-hover shade on hover — see the aliases and rfth_shift_lightness()
   note near the top of this file. Neutral at-rest shadow, same reasoning
   as .work-cta-btn above.
   ------------------------------------------------------------------------- */
.contact-submit{
  background: var(--rfth-red-solid) !important;
  box-shadow: 0 6px 16px -6px rgba(var(--bg-rgb),0.6) !important;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
.contact-submit:hover{
  background: var(--rfth-red-solid-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 30px -8px rgba(var(--red-hover-rgb),0.75) !important;
}

/* -------------------------------------------------------------------------
   Header nav menu items — About / Culture / Expertise / Work / Approach /
   Team / Locations / Blogs — forced to render IDENTICALLY and BRIGHTLY on
   every page (homepage nav and the shared blog/single nav). Hardcoded to
   a crisp off-white rather than var(--ink), since a dim/muted saved
   Customizer value there was making the text hard to read against the
   dark starry background. This also guards against any leftover "active"
   styling making one item (e.g. Blogs) look different from the rest.
   ------------------------------------------------------------------------- */
.nav__links a,
.rfth-blog-nav .nav__links a{
  color: var(--ink) !important;
  font-weight: 800 !important;
  text-shadow: 0 0 10px rgba(var(--red-rgb),0.55), 0 1px 3px rgba(var(--bg-rgb),0.5) !important;
}
.nav__links a:hover,
.rfth-blog-nav .nav__links a:hover{
  color: var(--ink) !important;
  text-shadow: 0 0 12px rgba(var(--red-rgb),0.85), 0 0 22px rgba(var(--red-rgb),0.5) !important;
}
/* Neutralize .active styling everywhere — every menu item, including
   Blogs, should look the same at rest; only :hover should stand out. */
.nav__links a.active,
.rfth-blog-nav .nav__links a.active{
  color: var(--ink) !important;
  text-shadow: 0 0 10px rgba(var(--red-rgb),0.55), 0 1px 3px rgba(var(--bg-rgb),0.5) !important;
}

/* Mobile slide-out menu links — same brightening, immune to any dim
   saved --ink value. */
#mobileMenu a,
#rfthMobileMenu a{
  color: var(--ink) !important;
}

/* -------------------------------------------------------------------------
   Hamburger / close icon (the same 3-bar button that morphs into an "×"
   when the mobile menu opens) — forced to an explicit, unambiguous true
   red at rest, on hover, on focus and in its open/"×" state, on every
   page (home + the shared blog/single/legal/404 header).

   This is intentionally a hardcoded hex, NOT var(--red)/var(--red-hover):
   var(--red-hover) is a red+white color-mix, which reads as pink/rose at
   higher hover opacity — exactly the "turns pink" symptom — and var(--red)
   itself can end up pink/rose if a rose-ish value was ever saved in
   Appearance > Customize > Color Palette. This one control point stays
   true red (#E2231C) no matter what.

   -webkit-tap-highlight-color is also neutralized here: mobile browsers
   draw their own translucent tap-highlight rectangle over a tapped
   button before any :hover/:active CSS even runs, which can visually
   read as a pink/rose flash over the red bars — removing it means only
   this rule's true red is ever seen.
   ------------------------------------------------------------------------- */
.nav__burger,
.rfth-blog-nav .nav__burger{
  -webkit-tap-highlight-color: transparent !important;
  background: transparent !important;
  outline: none !important;
}
.nav__burger span,
.rfth-blog-nav .nav__burger span{
  background: #E2231C !important;
}
.nav__burger:hover span,
.nav__burger:focus-visible span,
.nav__burger.open span,
.rfth-blog-nav .nav__burger:hover span,
.rfth-blog-nav .nav__burger:focus-visible span,
.rfth-blog-nav .nav__burger.open span{
  background: #FF2A22 !important;
}