/* Imdad Portal - Premium Polish Layer (additive only; no layout/color/branding changes) */
:root{
  --imdad-ease: cubic-bezier(.4,0,.2,1);
  --imdad-shadow-md: 0 4px 12px rgba(16,24,40,.06), 0 2px 4px rgba(16,24,40,.05);
  --imdad-shadow-lg: 0 14px 32px rgba(16,24,40,.10), 0 6px 12px rgba(16,24,40,.06);
}

/* Typography refinement */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
h1,h2,h3{ text-wrap:balance; letter-spacing:-.011em; }
p{ text-wrap:pretty; }

/* Smooth interactions */
a, button, [role=tab], [data-bookmark]{
  transition: color .18s var(--imdad-ease), background-color .18s var(--imdad-ease), border-color .18s var(--imdad-ease), box-shadow .2s var(--imdad-ease), transform .15s var(--imdad-ease);
}
button:active, [role=tab]:active, [data-bookmark]:active{ transform: translateY(1px); }
a[class*=bg-emerald-6]:hover, a[class*=bg-amber-5]:hover,
button[class*=bg-emerald-6]:hover, button[class*=bg-amber-5]:hover{ box-shadow: var(--imdad-shadow-md); }

/* .hover-lift (referenced in markup but previously undefined) */
.hover-lift{ transition: transform .25s var(--imdad-ease), box-shadow .25s var(--imdad-ease); }
.hover-lift:hover{ transform: translateY(-4px); }

/* Card depth - targets the existing card pattern only */
.bg-white.rounded-xl.shadow-sm, .bg-white.rounded-2xl.shadow-sm{ transition: box-shadow .25s var(--imdad-ease), transform .25s var(--imdad-ease); }
.bg-white.rounded-xl.shadow-sm:hover, .bg-white.rounded-2xl.shadow-sm:hover{ box-shadow: var(--imdad-shadow-lg); }

/* Sticky header elevation on scroll */
#imdad-header{ transition: box-shadow .3s var(--imdad-ease), background-color .3s var(--imdad-ease); }
#imdad-header.imdad-header-scrolled{ box-shadow: 0 6px 24px rgba(16,24,40,.08); background-color: rgba(255,255,255,.9) !important; }

/* Premium scrollbar */
@media (pointer:fine){
  *{ scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:transparent; }
  ::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:9999px; border:2px solid transparent; background-clip:content-box; }
  ::-webkit-scrollbar-thumb:hover{ background:#94a3b8; background-clip:content-box; }
}

/* Brand selection */
::selection{ background: rgba(5,150,105,.18); color:#064e3b; }

/* Accessible focus rings (complements existing keyboard-nav system) */
a:focus-visible, button:focus-visible, [role=tab]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid #047857; outline-offset: 2px; border-radius: 6px;
}

/* Skip-to-content link */
.imdad-skip-link{ position:absolute; left:50%; top:-64px; transform:translateX(-50%); z-index:1000; background:#047857; color:#fff; padding:.6rem 1rem; border-radius:0 0 .5rem .5rem; font-size:.875rem; font-weight:600; text-decoration:none; transition: top .2s var(--imdad-ease); }
.imdad-skip-link:focus{ top:0; outline:none; }

/* Reveal hint */
.observe-animate{ will-change: opacity, transform; }

/* Smooth in-page scroll */
@media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth; } }

/* Reduced motion: neutralize added motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto !important; }
}
/* PREMIUM-CARD-GLASS - premium soft-glass scheme cards (category colour stays on pill/icon) */
.scheme-card{ position:relative; background:linear-gradient(180deg, rgba(255,255,255,0.97), rgba(255,255,255,0.88)) !important; border:1px solid rgba(15,23,42,0.06) !important; border-radius:16px !important; box-shadow:0 1px 2px rgba(16,24,40,.05), 0 10px 26px rgba(16,24,40,.07); transition:transform .25s var(--imdad-ease), box-shadow .25s var(--imdad-ease); }
.scheme-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(16,24,40,.14), 0 6px 14px rgba(16,24,40,.07); }
.scheme-card .scheme-icon{ box-shadow:0 2px 6px rgba(16,24,40,.07); }
.scheme-card::after{ content:''; position:absolute; inset:0; border-radius:16px; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,0.7); }

/* PREMIUM-BROWSE-CARD - premium soft-glass look for browse listing cards (category colours stay) */
.scheme-browse-card > a{ border-radius:18px !important; border:1px solid rgba(15,23,42,0.07); box-shadow:0 1px 2px rgba(16,24,40,.05), 0 12px 30px rgba(16,24,40,.09) !important; transition:box-shadow .28s var(--imdad-ease) !important; }
.scheme-browse-card:hover > a{ box-shadow:0 22px 48px rgba(16,24,40,.17), 0 8px 16px rgba(16,24,40,.09) !important; }
.scheme-browse-card > a > div:first-child{ box-shadow: inset 0 1px 0 rgba(255,255,255,0.55); }
.scheme-browse-card a div.rounded-2xl{ box-shadow:0 8px 18px rgba(16,24,40,.14), inset 0 1px 0 rgba(255,255,255,0.5) !important; }

.scheme-cta{ transition:filter .2s; } .scheme-cta:hover{ filter:brightness(1.08); }

/* =========================================
   MOBILE LAYOUT FIXES v2.0
   ========================================= */
@media (max-width: 767px) {

  /* 1. Main content: pad so it clears the fixed bottom nav bar */
  #main-content {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 2. Footer: NO margin-bottom - the spacer div handles this cleanly */
  footer {
    margin-bottom: 0 !important;
  }

  /* 3. Spacer inside footer that sits BEHIND the fixed nav bar */
  .imdad-footer-mobile-spacer {
    height: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    display: block;
  }

  /* 4. html/body: no extra padding that causes white gap */
  html, body {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 5. .min-h-screen wrapper: must not add extra space */
  .min-h-screen {
    padding-bottom: 0 !important;
  }
}

/* Desktop: hide the spacer */
@media (min-width: 768px) {
  .imdad-footer-mobile-spacer { display: none; }
}