/* ============================================================
   PHARMACOMPARE — REUSABLE COMPONENTS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-body);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-primary {
  background: var(--gradient-green-brand);
  color: var(--color-white);
  box-shadow: var(--shadow-green-glow);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0, 120, 50, 0.35);
}

.btn-full {
  width: 100%;
}

/* Light variant for CTAs sitting on a green/dark background — same
   base .btn shape, but .btn-primary's green gradient would blend
   straight into a section that's already that color (e.g. the
   How It Works timeline). Solid white pill, brand-green text. */
.btn-white {
  background: var(--color-white);
  color: var(--color-green-primary);
  box-shadow: var(--shadow-md);
}

.btn-white:hover {
  transform: translateY(-3px);
  background: var(--color-green-pale);
  box-shadow: var(--shadow-lg);
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  /* Over the Hero: translucent "watery" glass over the dark photo. */
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background var(--transition-medium), box-shadow var(--transition-medium), backdrop-filter var(--transition-medium), padding var(--transition-medium);
  padding: 1.8rem 0;
}

.site-nav.scrolled {
  /* Past the Hero, over the light content: solid, opaque white. */
  background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 0;
}

.nav-container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  /* Tighter than --space-md (2rem): with the logo pinned to its full
     width (see .nav-logo above), the seven nav links + EN/FR toggle +
     Download button need every spare pixel they can get, especially
     in French (longer labels than English). */
  gap: 1.25rem;
}

.nav-logo {
  /* .nav-container's first grid track ("auto") sizes itself against
     THIS element's (the grid item's) own min-content contribution —
     not the nested <img>'s, so the override has to live here, not on
     .nav-logo-img. Without it: base.css gives every <img> a
     percentage `max-width: 100%`, and an unresolvable percentage in
     grid track-sizing collapses that contribution toward 0 instead
     of the logo's real rendered size. Switching languages made it
     visible — French nav labels (longer than English) need more room
     in the middle 1fr track, so the grid squeezed this track down to
     make space, squashing the logo narrower at the same fixed
     height. Pinning min-width to this item's own max-content size
     gives the track a real floor, so the grid shrinks the nav links
     instead of the logo. */
  min-width: max-content;
}

.nav-logo-img {
  height: 82px;
  width: auto;
  display: block;
  background: transparent;
  /* Logo.png is a real transparent PNG, so no blend trick is needed.
     A soft shadow keeps the white "PHARMA" wordmark legible once the
     nav turns solid white. */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  /* Safety net, not the primary fix: even with the tighter gap above
     and the French-only font nudge below, a narrow-ish desktop window
     (~900–1100px) can still run out of room for seven French links in
     one row. Wrapping to a second line beats the alternative — with
     .nav-logo now pinned to full width (see above), overflow no
     longer has anywhere to silently shrink into, so without this it
     would spill past the nav bar instead. */
  flex-wrap: wrap;
  row-gap: 0.5rem;
}

/* French labels run measurably longer than English (e.g.
   "Fonctionnement" vs "How It Works" wraps sooner, "Télécharger
   l'App" vs "Download App" is wider) — enough that at common laptop
   widths (~1280–1440px) the full-size logo plus full-size French nav
   text no longer both fit on one line without this nudge. Scoped to
   [lang="fr"] (set by i18n.js on <html>) so English keeps its
   original, unshrunk type size. */
html[lang="fr"] .nav-link {
  font-size: 0.9rem;
}

.nav-link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-text-dark);
  position: relative;
  padding: 4px 0;
  transition: color var(--transition-fast);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-green-primary);
  transition: width var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-green-primary);
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link.active {
  color: var(--color-green-primary);
}

.nav-link.active::after {
  width: 100%;
}

/* ── NAV DROPDOWNS — Mission/How It Works/Features/Pages ──
   Desktop: pure-CSS hover reveal (plus :focus-within for keyboard
   users), a fade + slight slide-down, and the chevron rotating 180°.
   The trigger label is a real link (its own page's top) so the
   dropdown is an enhancement, not the only way in. `.is-open` (set
   by nav.js when the chevron button is clicked, and cleared on an
   outside click) mirrors the hover state for touch/click-to-pin use
   on desktop, and is the ONLY way these open at all once
   responsive.css repurposes this same markup into an accordion
   inside the mobile drawer (see the max-width:768px override) —
   touch has no hover to fall back on there. ── */
.nav-item.has-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--color-text-dark);
}

.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: inherit;
}

.nav-dropdown-arrow {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition-fast);
}

.nav-item.has-dropdown:hover .nav-dropdown-arrow,
.nav-item.has-dropdown:focus-within .nav-dropdown-arrow,
.nav-item.has-dropdown.is-open .nav-dropdown-arrow {
  transform: rotate(180deg);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 230px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
  z-index: 1;
}

.nav-item.has-dropdown:hover .nav-dropdown-menu,
.nav-item.has-dropdown:focus-within .nav-dropdown-menu,
.nav-item.has-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-link {
  position: relative;
  display: block;
  /* left padding leaves room for the radio bullet (::before below),
     which pushes the label right so sub-links read as a level below
     the main nav links */
  padding: 10px 14px 10px 40px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--color-text-dark);
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-dropdown-link:hover {
  background: var(--color-green-pale);
  color: var(--color-green-primary);
}

/* Radio-style bullet: an empty ring in the footer's deep green. */
.nav-dropdown-link::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  transform: translateY(-50%);
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--color-green-dark);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.nav-dropdown-link:hover::before {
  transform: translateY(-50%) scale(1.2);
}

.nav-dropdown-link.active {
  color: var(--color-green-primary);
  font-weight: 700;
}

/* ── HERO STATE — while the nav sits over the dark Hero photo
   (.site-nav is NOT .scrolled), links render white and fade to
   dark via the existing `transition: color` on .nav-link once
   .scrolled is added past the Hero. .nav-item.has-dropdown follows
   along so the dropdown-trigger label and its chevron (which reads
   `color: inherit`, see below) match whatever colour state the
   plain links are in. ── */
.site-nav:not(.scrolled) .nav-link,
.site-nav:not(.scrolled) .nav-item.has-dropdown {
  color: var(--color-white);
}

.site-nav:not(.scrolled) .nav-link:hover,
.site-nav:not(.scrolled) .nav-link.active,
.site-nav:not(.scrolled) .nav-item.has-dropdown:hover {
  /* bright mint, not --color-green-bright: over the deep-green Partners
     hero (and the near-black Mission hero) the old green was almost
     invisible */
  color: var(--color-hero-overlay);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  justify-content: flex-end;
}

/* ── LANGUAGE TOGGLE — small segmented pill control, styled like a
   secondary sibling of .btn-nav-download. Desktop copy lives in
   .nav-cta next to the Download button; .lang-toggle-mobile is the
   same control repeated inside the mobile dropdown (.nav-links),
   which is always a solid white panel, so it always uses the
   "light" (pale-green / dark-text) variant regardless of .scrolled
   or .on-dark state — see the explicit override below. ── */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: background var(--transition-medium), border-color var(--transition-medium);
}

.lang-toggle-btn {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  padding: 7px 13px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.lang-toggle-btn:hover {
  color: var(--color-white);
}

.lang-toggle-btn.is-active {
  background: var(--color-white);
  color: var(--color-green-primary);
}

.lang-toggle-btn.is-active:hover {
  color: var(--color-green-primary);
}

.site-nav.scrolled .lang-toggle {
  background: var(--color-green-pale);
  border-color: transparent;
}

.site-nav.scrolled .lang-toggle-btn {
  color: var(--color-text-muted);
}

.site-nav.scrolled .lang-toggle-btn:hover {
  color: var(--color-green-primary);
}

.site-nav.scrolled .lang-toggle-btn.is-active {
  background: var(--gradient-green-brand);
  color: var(--color-white);
}

.site-nav.scrolled .lang-toggle-btn.is-active:hover {
  color: var(--color-white);
}

/* Mobile dropdown copy — always the "scrolled" light styling, since
   .nav-links is a solid white panel on mobile regardless of scroll
   position (mirrors the .site-nav:not(.scrolled) .nav-links .nav-link
   override just above .nav-cta in this file). */
.lang-toggle-mobile {
  display: none;
  background: var(--color-green-pale);
  border-color: transparent;
}

.lang-toggle-mobile .lang-toggle-btn {
  color: var(--color-text-muted);
}

.lang-toggle-mobile .lang-toggle-btn:hover {
  color: var(--color-green-primary);
}

.lang-toggle-mobile .lang-toggle-btn.is-active {
  background: var(--gradient-green-brand);
  color: var(--color-white);
}

.btn-nav-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 48px;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-white);
  background: var(--gradient-green-brand);
  position: relative;
  overflow: visible;
  z-index: 1;
  white-space: nowrap;
}

.btn-nav-download::before,
.btn-nav-download::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: var(--color-green-primary);
  z-index: -1;
  animation: navPulse 2.2s ease-out infinite;
  /* Purely decorative — it scales up to 1.55x the button (see
     navPulse below) and, since the button is overflow:visible, that
     halo visually balloons out over whatever sits next to it (the
     language toggle). Without this it also intercepts clicks there,
     silently triggering the Download button's own #download jump
     instead of the toggle underneath. */
  pointer-events: none;
}

.btn-nav-download::after {
  animation-delay: 0.7s;
}

@keyframes navPulse {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  box-sizing: border-box;
  border: 2px solid var(--color-text-dark);
  border-radius: var(--radius-sm);
  background: var(--color-silver);
  cursor: pointer;
  z-index: 1;
}

.nav-toggle span {
  height: 2.5px;
  width: 22px;
  background: var(--color-text-dark);
  border-radius: 2px;
  transition: all var(--transition-fast);
}

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  transition: opacity var(--transition-medium);
}

.nav-backdrop.open {
  display: block;
  opacity: 1;
}

.nav-close {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--color-text-dark);
  cursor: pointer;
  background: var(--color-green-pale);
  border: none;
  border-radius: 50%;
  z-index: 10;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-close:hover {
  background: var(--color-green-primary);
  color: var(--color-white);
}

.site-nav.on-dark:not(.scrolled) .nav-link,
.site-nav.on-dark:not(.scrolled) .nav-item.has-dropdown {
  color: var(--color-white);
}

.site-nav.on-dark:not(.scrolled) .nav-link:hover,
.site-nav.on-dark:not(.scrolled) .nav-item.has-dropdown:hover {
  color: var(--color-green-bright);
}

.stat-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  text-align: center;
  transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium);
}

.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-green-primary);
}

.stat-title {
  margin: var(--space-sm) 0 var(--space-xs);
}

.stat-desc {
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

.flow-step {
  text-align: center;
  position: relative;
  flex: 1;
  min-width: 160px;
}

.flow-step-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto var(--space-sm);
  background: var(--color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  position: relative;
}

.flow-step-number {
  position: absolute;
  top: -8px;
  right: -4px;
  background: var(--gradient-green-brand);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.7rem;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-white);
}

.flow-step-title {
  color: var(--color-white);
  margin-bottom: 6px;
}

.flow-step-desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-small);
}

.flow-connector {
  flex: 0 0 auto;
  width: 60px;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  align-self: center;
  margin-top: -40px;
  position: relative;
  overflow: hidden;
}

.flow-connector::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: var(--color-green-bright);
  transition: width 0.6s ease;
}

.flow-connector.in-view::after {
  width: 100%;
}

.function-card {
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
  position: relative;
  overflow: hidden;
}

.function-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-green-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-medium);
}

.function-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

.function-card:hover::before {
  transform: scaleX(1);
}

.function-icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-sm);
  background-color: var(--color-green-pale);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.function-title {
  margin-bottom: var(--space-xs);
}

.function-desc {
  font-size: var(--fs-small);
}

.social-icon {
  /* full-colour platform logo (facebook/instagram/tik-tok/twitter .png)
     filling its circular badge — see .footer-socials a */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  transition: transform var(--transition-fast);
}

.social-icon:hover {
  transform: scale(1.12);
}

.banner-break {
  position: relative;
  width: 100%;
  height: 220px;
  margin-top: 40px;
  line-height: 0;
  background: var(--color-content-bg);
  overflow: hidden;
}

.banner-break-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  filter:
    brightness(0)
    saturate(100%)
    invert(30%)
    sepia(90%)
    saturate(1200%)
    hue-rotate(120deg)
    brightness(0.95)
    contrast(1.05);
  -webkit-mask-image: linear-gradient(to top, black 0%, black 25%, transparent 90%);
  mask-image: linear-gradient(to top, black 0%, black 25%, transparent 90%);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.contact-form input,
.contact-form textarea {
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  resize: vertical;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-green-bright);
  background: rgba(255, 255, 255, 0.1);
}

.form-status {
  font-size: var(--fs-small);
  min-height: 1.2em;
}

.form-status.success { color: var(--color-green-bright); }
.form-status.error { color: #e74c3c; }

/* ── SCROLL-TRIGGERED ANIMATION BASE STATES —
   SLOWED transition duration significantly, and travel distances
   increased slightly so the movement itself reads as a visible
   glide, not an instant snap. ── */
[data-animate] {
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1.4s cubic-bezier(0.25, 0.1, 0.25, 1);   /* ✏️ SLOWED from var(--transition-slow) (0.8s) to 1.4s, smoother easing curve */
}

[data-animate="fade-up"] {
  transform: translateY(50px);          /* ✏️ slightly increased travel distance so movement is more visible */
}

[data-animate="fade-left"] {
  transform: translateX(80px);          /* ✏️ INCREASED from 60px */
}

[data-animate="fade-right"] {
  transform: translateX(-80px);         /* ✏️ INCREASED from -60px */
}

[data-animate="fade-in"] {
  transform: none;
}

[data-animate].in-view {
  opacity: 1;
  transform: translate(0, 0);
}

.hero-cta-row {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.store-badge {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.store-badge img {
  height: 52px;
  width: auto;
}

.store-badge:hover {
  transform: translateY(-4px) scale(1.03);
}

/* .footer-logo lives in sections.css alongside the rest of the
   footer's rules (it needs the site's brand-green footer background
   to make sense of, unlike this file's more generic components). */

/* ============================================================
   BACK TO TOP — fixed circular button, bottom-right.
   Sits below the sticky nav's z-index and clear of the mobile
   hamburger (top-right) and nav-close button (inside the menu
   panel), so nothing fixed overlaps it.
   ============================================================ */
.back-to-top {
  position: fixed;
  right: 1.75rem;
  bottom: 1.75rem;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-green-bright), var(--color-green-primary));
  color: var(--color-white);
  /* Soft light-green glow ring around the button, on top of the usual
     drop shadow, so it reads as polished rather than a bare flat disc. */
  box-shadow: 0 8px 24px rgba(0, 120, 50, 0.35), 0 0 0 6px rgba(230, 245, 236, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transition-medium), transform var(--transition-medium), visibility var(--transition-medium), background var(--transition-fast), box-shadow var(--transition-fast);
  /* Below the sticky nav (--z-nav: 1000) and its mobile menu
     backdrop (999) so the open menu always covers it. */
  z-index: 900;
}

/* Soft light glow sitting behind the arrow, inside the button, so the
   icon isn't just sitting bare on a flat solid disc. */
.back-to-top::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 72%);
  pointer-events: none;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: linear-gradient(135deg, var(--color-green-primary), var(--color-green-dark));
  box-shadow: 0 10px 28px rgba(0, 120, 50, 0.45), 0 0 0 7px rgba(230, 245, 236, 0.7);
  transform: translateY(-3px);
}

.back-to-top svg {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 768px) {
  .back-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 46px;
    height: 46px;
  }

  .back-to-top svg {
    width: 24px;
    height: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity var(--transition-fast), visibility var(--transition-fast);
    transform: none;
  }
  .back-to-top.is-visible {
    transform: none;
  }
  .back-to-top:hover {
    transform: none;
  }
}