/* ==========================================================================
   Announcement Popup — popup.css   (VSST theme)
   Author  : Dalia Web & Soft Solution
   Version : 2.0.0

   WHY EVERY RULE IS SCOPED UNDER #anpOverlay
   -----------------------------------------
   css/style.css declares global element rules, notably:

       p { line-height: 1.5; margin: 0 0 20px 0; text-align: justify; }
       h1..h6 { line-height: 1.5; font-weight: 400; color: #212121; }

   A plain class selector (0,1,0) wins on properties it declares, but any
   property it does NOT declare still falls through to the theme — that is
   what pushed the popup's paragraphs to `justify` and broke the layout.
   Scoping under the #anpOverlay id gives every rule (1,1,0) specificity, so
   the popup is fully isolated from the site cascade without a single
   !important.

   Colours are taken from the site palette in css/style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
#anpOverlay {
  /* Brand — sampled from css/style.css */
  --anp-primary: #0f385f;        /* site navy   (.bg-primary)        */
  --anp-primary-mid: #0a2744;    /* gradient midpoint                */
  --anp-primary-soft: #1a3b61;   /* site navy tint                   */
  --anp-accent: #b0cb1f;         /* site lime   (.btn-view)          */
  --anp-accent-light: #c9e04a;
  --anp-accent-dark: #93ab13;

  /* Surfaces */
  --anp-bg: #ffffff;
  --anp-bg-light: #f5f5f5;       /* site .accent-bg                  */
  --anp-border: #e5e5e5;

  /* Text */
  --anp-text: #212121;
  --anp-text-muted: #4a4a4a;
  --anp-on-dark: #ffffff;

  /* Shape & depth */
  --anp-radius: 18px;
  --anp-shadow: 0 15px 40px rgba(0, 0, 0, 0.18);

  /* Motion */
  --anp-ease: cubic-bezier(0.16, 0.84, 0.32, 1);
  --anp-in: 0.4s;                /* opening duration */
  --anp-out: 0.28s;              /* closing duration — a touch faster */

  /* Fluid spacing: one value covers 320px → 4K */
  --anp-pad-x: clamp(20px, 5.2vw, 44px);
  --anp-gutter: clamp(10px, 3.5vw, 32px);

  /* Roboto (already loaded by style.css) for Latin; the browser picks a
     Gujarati face per-glyph from the fallbacks. */
  --anp-font: "Roboto", "Noto Sans Gujarati", "Shruti", "Nirmala UI",
    "Gujarati MT", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. OVERLAY
   Sits above everything: style.css already uses z-index 9999999.
   -------------------------------------------------------------------------- */
#anpOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000000;

  /* The popup itself never scrolls internally. If the content is taller than
     the screen, this overlay scrolls the whole dialog instead — so there is
     no scrollbar inside the popup and nothing is ever cut off.
     `margin: auto` on the dialog (below) centres it without the top-clipping
     that `align-items: center` causes once an overflow container scrolls. */
  display: flex;
  padding: var(--anp-gutter);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  background: rgba(6, 24, 43, 0.64);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  backdrop-filter: blur(6px) saturate(115%);

  font-family: var(--anp-font);
  text-align: center;

  /* Closed state — invisible and unfocusable, but still transitionable */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--anp-out) ease, visibility 0s linear var(--anp-out);
}

/* Opening / open */
#anpOverlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--anp-in) var(--anp-ease), visibility 0s;
}

/* Background scroll lock (JS also compensates for the scrollbar width) */
body.anp-scroll-lock {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   3. DIALOG
   Fluid width, never taller than the viewport, body scrolls internally.
   -------------------------------------------------------------------------- */
#anpOverlay .anp-dialog {
  position: relative;
  box-sizing: border-box;

  width: min(600px, 100%);

  display: flex;
  flex-direction: column;
  overflow: hidden;               /* clips children to the rounded corners */

  margin: auto;                   /* centres both axes, scroll-safe */
  background: var(--anp-bg);
  border-radius: var(--anp-radius);
  box-shadow: var(--anp-shadow);

  font-family: var(--anp-font);
  color: var(--anp-text);
  text-align: center;

  /* Fade + scale in */
  opacity: 0;
  transform: scale(0.92) translateY(14px);
  transition: opacity var(--anp-in) var(--anp-ease),
    transform var(--anp-in) var(--anp-ease);
}

#anpOverlay.is-open .anp-dialog {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Closing: fade out, with only a hint of scale so it feels calm */
#anpOverlay.is-closing .anp-dialog {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--anp-out) ease, transform var(--anp-out) ease;
}

/* The dialog takes focus on open — its own ring would be noise */
#anpOverlay .anp-dialog:focus,
#anpOverlay .anp-dialog:focus-visible {
  outline: none;
}

/* Accent rule along the top edge */
#anpOverlay .anp-dialog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--anp-accent), #d3e86a, var(--anp-accent));
  z-index: 3;
}

/* --------------------------------------------------------------------------
   4. HEADER
   No overflow:hidden here — the dialog already clips, and hiding overflow
   on the header is what risked cutting tall Gujarati matras.
   -------------------------------------------------------------------------- */
#anpOverlay .anp-header {
  position: relative;
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: auto;
  margin: 0;

  padding: clamp(30px, 6vw, 44px) var(--anp-pad-x) clamp(24px, 4vw, 32px);

  /* Two layers in one background: the decorative lime bloom sits on top of
     the navy gradient. Done this way rather than with a positioned ::after
     so nothing can ever extend past the header box and create overflow. */
  background:
    radial-gradient(circle 150px at calc(100% + 10px) -25px,
      rgba(176, 203, 31, 0.34) 0%, rgba(176, 203, 31, 0) 72%),
    linear-gradient(150deg, var(--anp-primary) 0%,
      var(--anp-primary-mid) 60%, var(--anp-primary-soft) 100%);
  color: var(--anp-on-dark);
  text-align: center;
}

/* Icon medallion */
#anpOverlay .anp-icon {
  position: relative;
  z-index: 2;
  box-sizing: border-box;

  width: clamp(52px, 13vw, 68px);
  height: clamp(52px, 13vw, 68px);
  margin: 0 auto clamp(12px, 2.6vw, 18px);

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: linear-gradient(145deg, var(--anp-accent), var(--anp-accent-light));
  box-shadow: 0 10px 24px rgba(176, 203, 31, 0.34),
    0 0 0 10px rgba(255, 255, 255, 0.07);
}

#anpOverlay .anp-icon svg {
  width: 46%;
  height: 46%;
  display: block;
  fill: var(--anp-primary);
}

/* Announcement badge */
#anpOverlay .anp-badge {
  position: relative;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;

  margin: 0 0 clamp(11px, 2.2vw, 16px);
  padding: 7px clamp(12px, 3vw, 17px);

  font-family: inherit;
  font-size: clamp(11px, 2.9vw, 13px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.3px;
  text-align: center;

  color: var(--anp-accent);
  background: rgba(176, 203, 31, 0.14);
  border: 1px solid rgba(176, 203, 31, 0.38);
  border-radius: 999px;
}

#anpOverlay .anp-badge__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--anp-accent);
  animation: anp-pulse 1.9s ease-in-out infinite;
}

@keyframes anp-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;    }
  50%      { transform: scale(1.5); opacity: 0.45; }
}

/* Main heading — generous line-height so Gujarati matras never clip */
#anpOverlay .anp-title {
  position: relative;
  z-index: 2;

  margin: 0 0 clamp(7px, 1.6vw, 11px);
  padding: 0;

  font-family: inherit;
  font-size: clamp(17px, 4.4vw, 25px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--anp-on-dark);
  text-align: center;
  text-transform: none;

  /* Long Gujarati compounds must wrap rather than overflow */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

#anpOverlay .anp-subtitle {
  position: relative;
  z-index: 2;

  margin: 0;
  padding: 0;

  font-family: inherit;
  font-size: clamp(13.5px, 3.5vw, 16.5px);
  font-weight: 500;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   5. CLOSE BUTTON
   -------------------------------------------------------------------------- */
#anpOverlay .anp-close {
  position: absolute;
  top: clamp(10px, 2.4vw, 16px);
  right: clamp(10px, 2.4vw, 16px);
  z-index: 5;

  width: clamp(34px, 9vw, 40px);
  height: clamp(34px, 9vw, 40px);
  padding: 0;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: none;

  transition: background var(--anp-out) ease, color var(--anp-out) ease,
    transform var(--anp-out) ease, border-color var(--anp-out) ease;
  -webkit-tap-highlight-color: transparent;
}

#anpOverlay .anp-close:hover,
#anpOverlay .anp-close:focus-visible {
  background: var(--anp-accent);
  border-color: transparent;
  color: var(--anp-primary);
  transform: rotate(90deg);
}

#anpOverlay .anp-close:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

#anpOverlay .anp-close svg {
  width: 42%;
  height: 42%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. BODY
   -------------------------------------------------------------------------- */
#anpOverlay .anp-body {
  flex: 0 0 auto;
  box-sizing: border-box;

  padding: clamp(22px, 5vw, 32px) var(--anp-pad-x) clamp(22px, 4.5vw, 30px);
  overflow: visible;              /* no scrollbar inside the popup */
  text-align: center;
}

#anpOverlay .anp-text {
  margin: 0 0 clamp(10px, 2vw, 14px);
  padding: 0;

  font-family: inherit;
  font-size: clamp(14px, 3.6vw, 16px);
  font-weight: 400;
  line-height: 1.9;               /* comfortable for Gujarati */
  color: var(--anp-text-muted);
  text-align: center;             /* beats style.css `p { justify }` */
  overflow-wrap: break-word;
}

#anpOverlay .anp-text--lead {
  font-weight: 600;
  color: var(--anp-text);
}

#anpOverlay .anp-text:last-of-type {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   6b. ACTION BAR
   Keeps the CTA in its own band with generous breathing room, visually
   separated from the message above it.
   -------------------------------------------------------------------------- */
#anpOverlay .anp-actions {
  flex: 0 0 auto;
  box-sizing: border-box;

  padding: 0 var(--anp-pad-x) clamp(20px, 4vw, 28px);
  text-align: center;
  background: var(--anp-bg);
}

/* --------------------------------------------------------------------------
   7. CTA — the ONLY element that opens the PDF
   -------------------------------------------------------------------------- */
#anpOverlay .anp-cta {
  position: relative;
  isolation: isolate;             /* keeps the ripple behind the label */
  overflow: hidden;
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  max-width: 100%;
  min-width: min(280px, 100%);
  padding: clamp(13px, 3.2vw, 16px) clamp(20px, 5vw, 34px);

  font-family: inherit;
  font-size: clamp(14.5px, 3.7vw, 16.5px);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  color: var(--anp-primary);

  background: linear-gradient(135deg, var(--anp-accent) 0%, #c6de3f 55%, var(--anp-accent-dark) 100%);
  background-size: 180% 180%;
  background-position: 0% 50%;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(176, 203, 31, 0.38);
  cursor: pointer;

  transition: transform var(--anp-out) var(--anp-ease),
    box-shadow var(--anp-out) var(--anp-ease), background-position 0.45s ease;
  -webkit-tap-highlight-color: transparent;
}

#anpOverlay .anp-cta:hover,
#anpOverlay .anp-cta:focus {
  text-decoration: none;
  color: var(--anp-primary);
}

#anpOverlay .anp-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(176, 203, 31, 0.48);
  background-position: 100% 50%;
}

#anpOverlay .anp-cta:active {
  transform: translateY(-1px);
}

#anpOverlay .anp-cta:focus-visible {
  outline: 3px solid var(--anp-primary);
  outline-offset: 3px;
}

/* Ripple element injected by popup.js */
#anpOverlay .anp-ripple {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  pointer-events: none;
  animation: anp-ripple 0.6s ease-out forwards;
}

@keyframes anp-ripple {
  to { transform: scale(2.6); opacity: 0; }
}

/* Secondary dismiss link */
#anpOverlay .anp-dismiss {
  /* block + auto margins keeps it on its own line under the CTA at every
     width — as an inline-block it sat beside the button on tablets. */
  display: block;
  margin: clamp(12px, 2.6vw, 16px) auto 0;
  padding: 6px 10px;

  font-family: inherit;
  font-size: clamp(13px, 3.3vw, 14px);
  line-height: 1.5;
  color: var(--anp-text-muted);
  background: none;
  border: 0;
  cursor: pointer;

  transition: color var(--anp-out) ease;
}

#anpOverlay .anp-dismiss:hover {
  color: var(--anp-primary);
  text-decoration: underline;
}

#anpOverlay .anp-dismiss:focus-visible {
  outline: 2px solid var(--anp-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
#anpOverlay .anp-footer {
  display: block;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: auto;
  margin: 0;

  padding: clamp(13px, 3vw, 17px) clamp(16px, 4vw, 30px);

  font-family: inherit;
  font-size: clamp(11.5px, 3vw, 13px);
  line-height: 1.75;
  color: var(--anp-text-muted);
  text-align: center;
  overflow-wrap: break-word;

  background: var(--anp-bg-light);
  border-top: 1px solid var(--anp-border);
}

/* --------------------------------------------------------------------------
   9. BREAKPOINTS
   clamp() does most of the work; these handle the genuine layout switches.
   -------------------------------------------------------------------------- */

/* Phones — full-width CTA, tighter gutters */
@media (max-width: 600px) {
  #anpOverlay .anp-dialog {
    border-radius: 16px;
  }

  #anpOverlay .anp-cta {
    display: flex;
    width: 100%;
    min-width: 0;
  }
}

/* Very small phones (320–360px) */
@media (max-width: 360px) {
  #anpOverlay {
    --anp-pad-x: 16px;
    --anp-gutter: 8px;
  }

  #anpOverlay .anp-title  { line-height: 1.6; }
  #anpOverlay .anp-footer { font-size: 11px; }
}

/* Short viewports (small phones, split screens) — shrink the header so the
   message keeps as much room as possible. */
@media (max-height: 700px) {
  #anpOverlay .anp-header {
    padding-top: 22px;
    padding-bottom: 18px;
  }
  #anpOverlay .anp-icon     { width: 46px; height: 46px; margin-bottom: 10px; }
  #anpOverlay .anp-badge    { margin-bottom: 9px; }
  #anpOverlay .anp-title    { font-size: clamp(16px, 4vw, 21px); line-height: 1.6; }
  #anpOverlay .anp-subtitle { font-size: clamp(13px, 3.2vw, 15px); }
  #anpOverlay .anp-body     { padding-top: 18px; padding-bottom: 18px; }
  #anpOverlay .anp-text     { line-height: 1.8; }
}

/* Very short viewports — reclaim the action bar's second line. The × button
   already provides a way out, so the text dismiss is redundant here. */
@media (max-height: 620px) {
  #anpOverlay .anp-dismiss { display: none; }
  #anpOverlay .anp-actions { padding-bottom: 16px; }
}

/* Landscape phones — the tightest case of all */
@media (max-height: 480px) {
  #anpOverlay .anp-icon   { display: none; }
  #anpOverlay .anp-header { padding-top: 18px; padding-bottom: 14px; }
  #anpOverlay .anp-dismiss { margin-top: 8px; }
}

/* Large desktops & 4K — scale up slightly instead of looking lost */
@media (min-width: 1800px) {
  #anpOverlay .anp-dialog { width: min(680px, 100%); }
  #anpOverlay .anp-title    { font-size: 28px; }
  #anpOverlay .anp-subtitle { font-size: 18px; }
  #anpOverlay .anp-text     { font-size: 17px; }
  #anpOverlay .anp-cta      { font-size: 17.5px; }
  #anpOverlay .anp-footer   { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   10. ACCESSIBILITY & PERFORMANCE FALLBACKS
   -------------------------------------------------------------------------- */

/* Respect the OS reduce-motion setting; also spares low-end devices */
@media (prefers-reduced-motion: reduce) {
  #anpOverlay,
  #anpOverlay .anp-dialog,
  #anpOverlay .anp-cta,
  #anpOverlay .anp-close {
    transition-duration: 0.01ms !important;
  }
  #anpOverlay .anp-dialog      { transform: none !important; }
  #anpOverlay .anp-badge__dot  { animation: none; }
  #anpOverlay .anp-ripple      { display: none; }
  #anpOverlay .anp-close:hover { transform: none; }
  #anpOverlay .anp-cta:hover   { transform: none; }
}

/* backdrop-filter is expensive/unsupported in places — darken instead */
@supports not ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  #anpOverlay { background: rgba(6, 24, 43, 0.82); }
}

/* Windows high-contrast mode */
@media (forced-colors: active) {
  #anpOverlay .anp-dialog { border: 1px solid CanvasText; }
  #anpOverlay .anp-cta    { border: 1px solid CanvasText; }
}

/* Visually hidden, still read by screen readers */
#anpOverlay .anp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}