/* ==========================================================================
   Dnyantra — /hiring and /placement reskin
   ==========================================================================

   These two routes are one React app served from a single minified bundle
   (assets/index-Ba66DKRq.js). There is no source, no sourcemap and no backup
   for it, and the bundle contains the live Razorpay checkout and the Firebase
   assessment flow. So this file restyles them from the outside instead:

     - It changes appearance ONLY. No markup, no bundle, no logic is touched,
       so payments and candidate assessments are unaffected.
     - CSS is immune to React hydration, so the overrides survive the app
       re-rendering the DOM over the pre-rendered HTML.
     - Those pages style themselves with cdn.tailwindcss.com at runtime. That
       output is never !important, so every !important below wins regardless
       of whether the CDN injects its <style> before or after this file.

   Palette is the same one the landing page uses (tailwind.config.js):
     paper #FFFFFF · paper-warm #F7F7F5 · ink #0A0A0A · ink-soft #1A1A1A
     muted #6B6B6B · muted-soft #9A9A98 · muted-faint #C4C4C0 · hair #E5E5E1

   To roll back: remove the <link> to this file from the two index.html files
   (or restore the .bak-* copies the deploy script leaves next to them).
   ========================================================================== */

:root {
  --dn-paper: #ffffff;
  --dn-paper-warm: #f7f7f5;
  --dn-paper-sink: #f0f0ee;
  --dn-ink: #0a0a0a;
  --dn-ink-soft: #1a1a1a;
  --dn-muted: #6b6b6b;
  --dn-muted-soft: #9a9a98;
  --dn-muted-faint: #c4c4c0;
  --dn-hair: #e5e5e1;
}

/* --------------------------------------------------------------------------
   1. Base surface — flip the page from black to paper
   -------------------------------------------------------------------------- */

html,
body {
  background-color: var(--dn-paper) !important;
  color: var(--dn-ink) !important;
}

body.bg-black,
.bg-black,
.min-h-screen.bg-black {
  background-color: var(--dn-paper) !important;
  color: var(--dn-ink) !important;
}

/* Sticky headers used a translucent black; give them paper instead. */
.bg-black\/50 {
  background-color: rgb(255 255 255 / 0.85) !important;
}

::selection {
  background-color: var(--dn-ink) !important;
  color: var(--dn-paper) !important;
}

/* The inline <style> in both pages paints the scrollbar black. */
::-webkit-scrollbar-track {
  background: var(--dn-paper-warm) !important;
}
::-webkit-scrollbar-thumb {
  background: var(--dn-muted-faint) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--dn-muted-soft) !important;
}

/* --------------------------------------------------------------------------
   2. Typography — match the landing page's editorial scale
   -------------------------------------------------------------------------- */

body {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2 {
  letter-spacing: -0.032em !important;
  line-height: 1.05 !important;
}

h3,
h4 {
  letter-spacing: -0.02em !important;
}

/* The landing page uses semibold display type, not black weight. */
.font-bold,
.font-extrabold,
.font-black {
  font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   3. Text colours
   -------------------------------------------------------------------------- */

.text-white,
.hover\:text-white:hover,
.group:hover .group-hover\:text-white {
  color: var(--dn-ink) !important;
}

/* Body/secondary copy. gray-300/400 carry most of it; 500/600 are captions. */
.text-gray-200,
.text-gray-300,
.text-gray-400 {
  color: var(--dn-muted) !important;
}

.text-gray-500,
.text-gray-600 {
  color: var(--dn-muted-soft) !important;
}

.group:hover .group-hover\:text-gray-200 {
  color: var(--dn-ink) !important;
}

/* Primary buttons invert: dark pill, light label. */
.text-black {
  color: var(--dn-paper) !important;
}

/* --------------------------------------------------------------------------
   4. Kill the purple/blue/cyan accent system
   The landing page is strictly black and white — no colour accents.
   -------------------------------------------------------------------------- */

.text-purple-400,
.text-purple-500,
.text-blue-400,
.text-cyan-400,
.group:hover .group-hover\:text-blue-400 {
  color: var(--dn-ink) !important;
}

/* Solid purple fills are small accents (dots, markers) — these become ink. */
.bg-purple-400,
.bg-purple-500,
.bg-purple-600 {
  background-color: var(--dn-ink) !important;
}

/*
 * `bg-purple-500/10` is NOT an accent — it is the faint tint marking the
 * selected pricing plan. Mapping it to solid ink turned that card black while
 * its text stayed dark, which hid the ₹16,334 price completely. It has to stay
 * a subtle tint; the selected state is carried by the border instead.
 */
.bg-purple-500\/10 {
  background-color: var(--dn-paper-sink) !important;
}

.border-purple-500\/50 {
  border-color: var(--dn-ink) !important;
}

.ring-purple-500\/30,
.ring-purple-500\/20 {
  --tw-ring-color: var(--dn-hair) !important;
}

/* Gradient text headings (bg-clip-text + from/via/to) become flat ink. */
.bg-clip-text {
  background-image: none !important;
  -webkit-text-fill-color: var(--dn-ink) !important;
  color: var(--dn-ink) !important;
}

/* The big decorative purple/blue glow blobs behind the hero. */
.blur-3xl,
.blur-2xl,
.blur-lg {
  display: none !important;
}

/* --------------------------------------------------------------------------
   5. Surfaces — translucent-white-on-black cards become hairline panels
   -------------------------------------------------------------------------- */

.bg-white\/5,
.bg-white\/10,
.bg-white\/\[0\.07\],
.hover\:bg-white\/\[0\.07\]:hover,
.bg-white\/20,
.group:hover .group-hover\:bg-white\/40 {
  background-color: var(--dn-paper-warm) !important;
}

.border-white\/5,
.border-white\/10 {
  border-color: var(--dn-hair) !important;
}

.hover\:border-white\/20:hover {
  border-color: var(--dn-ink) !important;
}

/*
 * Two surfaces use arbitrary hex rather than palette classes, so they are not
 * caught by any of the rules above and stayed near-black with dark text:
 *   bg-[#0d0d1a]     — the floating social-proof toast
 *   bg-[#050508]/95  — the fixed mobile action bar (Chat with us / Enroll Now)
 */
.bg-\[\#0d0d1a\] {
  background-color: var(--dn-paper-warm) !important;
  border-color: var(--dn-hair) !important;
}

.bg-\[\#050508\]\/95 {
  background-color: rgb(255 255 255 / 0.96) !important;
  border-color: var(--dn-hair) !important;
}

.shadow-black\/60 {
  box-shadow: 0 1px 3px rgb(10 10 10 / 0.08) !important;
}

/* Frosted glass reads as muddy grey on a light page. */
.backdrop-blur-xl,
.backdrop-blur-lg,
.backdrop-blur-md,
.backdrop-blur-sm,
.backdrop-blur {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* The landing page uses hairlines and flat panels, never drop shadows. */
.shadow-lg,
.shadow-xl,
.shadow-2xl,
.shadow-purple-500\/25,
.shadow-purple-900\/40 {
  box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

/* Primary CTA was `bg-white text-black`; it becomes the landing page's dark pill. */
.bg-white:not(.bg-clip-text) {
  background-color: var(--dn-ink) !important;
  color: var(--dn-paper) !important;
}

.hover\:bg-gray-200:hover {
  background-color: var(--dn-ink-soft) !important;
}

/* The purple→blue gradient CTA (Enroll / Pay) becomes a flat ink pill. */
.bg-gradient-to-r {
  background-image: none !important;
  background-color: var(--dn-ink) !important;
  color: var(--dn-paper) !important;
}

.bg-gradient-to-r:hover,
.hover\:from-purple-500:hover,
.hover\:to-blue-500:hover {
  background-image: none !important;
  background-color: var(--dn-ink-soft) !important;
}

/* Anything sitting inside a now-dark button must read light. */
.bg-gradient-to-r *,
.bg-white:not(.bg-clip-text) * {
  color: inherit !important;
}

/* Slightly tighter radii, closer to the landing page's restraint. */
.rounded-2xl {
  border-radius: 1rem !important;
}

/* --------------------------------------------------------------------------
   7. Status colours — kept legible rather than neutralised.
   Errors and success states still need to read as errors and success.
   -------------------------------------------------------------------------- */

.text-green-400,
.text-emerald-400 {
  color: #15803d !important;
}

.text-red-400,
.text-red-300,
.text-red-200 {
  color: #b91c1c !important;
}

.text-yellow-400,
.text-amber-400 {
  color: #a16207 !important;
}

.bg-red-500\/10 {
  background-color: #fef2f2 !important;
}

.border-red-500\/30 {
  border-color: #fecaca !important;
}

.bg-red-400,
.bg-red-500 {
  background-color: #b91c1c !important;
}

.bg-gradient-to-r.to-red-500 {
  background-color: #b91c1c !important;
}

/* WhatsApp keeps its own brand green — it is a recognised affordance. */
.border-\[\#25D366\]\/40 {
  border-color: rgb(37 211 102 / 0.5) !important;
}

.hover\:bg-\[\#25D366\]\/10:hover {
  background-color: rgb(37 211 102 / 0.08) !important;
}

/* --------------------------------------------------------------------------
   7b. Placement links, while enrolment is paused
   The nav on these pages is rendered by the bundle, which cannot be edited, so
   the links to /placement are hidden here instead. /placement itself still
   resolves — it serves a "programme paused" notice — so any external or
   bookmarked link still lands somewhere sensible.
   Remove this block to bring the programme back.
   -------------------------------------------------------------------------- */

a[href="/placement"],
a[href="/placement/"],
a[href$="dnyantra.com/placement"] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   8. Focus visibility — dark rings on a light page
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--dn-ink) !important;
  outline-offset: 2px !important;
}

/* Form fields were dark-on-dark; make them light with a hairline. */
input,
select,
textarea {
  background-color: var(--dn-paper) !important;
  color: var(--dn-ink) !important;
  border-color: var(--dn-hair) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--dn-muted-faint) !important;
}

/* --------------------------------------------------------------------------
   9. Respect reduced motion, as the landing page does
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}