/* ==========================================================================
   PDC Visa International — site-wide overrides (loaded on every page after
   styles.css). Quiets the decorative effects from styles.css (gradients,
   sheens, hover lifts) so every page shares the clean, trustworthy look of
   the redesigned homepage. Page layouts live in home.css / pages.css.
   ========================================================================== */

/* Everything is sized in rem, so a 95% root size scales type, buttons and spacing together. */
html { font-size: 95%; }

:root {
  --header-h: 84px;
  --space-section: clamp(3rem, 5vw, 4.5rem);
  --space-feature: clamp(3.5rem, 6vw, 5.5rem);
  --space-small: clamp(2.5rem, 1.8rem + 3vw, 3.75rem);
  --hp-radius: 18px;
  --hp-line: #E4E1F0;
  --hp-surface: #F8F7FC;
  --hp-text-soft: #4A4569;
  --hp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326237E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}

/* ------------------------------------------------ Quieter shared primitives */
.btn::after { display: none; }
.btn {
  min-height: 52px; padding: 14px 26px;
  border-radius: 12px; font-size: 1rem; box-shadow: none;
}
.btn:hover { transform: none; box-shadow: none; }
.btn--primary { background: var(--brand-900); }
.btn--primary:hover { background: var(--brand-950); }
.btn--ghost { background: #fff; color: var(--brand-900); border-color: #CBC6E6; }
.btn--ghost:hover { background: #fff; border-color: var(--brand-900); }
.btn--outline { border-color: #CBC6E6; }
.btn--outline:hover { background: #fff; border-color: var(--brand-900); }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: .9375rem; }
.btn--lg { min-height: 56px; padding: 16px 32px; font-size: 1.0625rem; }
.link-cta { font-size: 1rem; }
.eyebrow { color: var(--brand-800); font-size: .8125rem; letter-spacing: .06em; margin-bottom: 16px; }

/* Header sits on white, in normal flow. */
.site-header { background: #fff; border-bottom-color: var(--hp-line); }
.site-header.is-stuck { box-shadow: 0 4px 18px -16px rgba(28, 26, 94, .5); }

/* Header */
.brand__logo { height: 62px; }

/* Footer */
.footer { padding-top: clamp(3rem, 4vw, 4.5rem); }
.footer__grid { padding-bottom: clamp(1.75rem, 2vw, 2.25rem); }
.footer__desc { margin-top: 14px; }
.footer__col ul { gap: 8px; }

/* Forms */
.form__grid { gap: 18px; }
.consult { gap: clamp(28px, 3.5vw, 52px); }
.consult__points { margin-top: 28px; gap: 12px; }
.channels { margin-top: 30px; padding-top: 24px; }
.footer__lotus { display: none; }
.footer__col ul a { display: inline-block; padding-block: 2px; }

/* Floating controls: on desktop they share one column in the bottom-right corner,
   with back-to-top sitting above the contact widget. (Phones already stack that way in
   styles.css.) While the widget is open its buttons fill that column, so back-to-top
   steps out of the way rather than colliding with them. */
@media (min-width: 768px) {
  .contact-rail { bottom: 22px; }
  .to-top { bottom: 80px; }
}
.contact-rail.is-open ~ .to-top { display: none; }

/* Contact widget: flat brand colour instead of the gradient */
.contact-rail__toggle { background: var(--brand-900); }
.contact-rail__toggle:hover, .contact-rail__toggle:focus-visible { filter: none; background: var(--brand-950); }

@media (max-width: 1199px) { :root { --header-h: 72px; } }
@media (max-width: 767px) {
  :root { --hp-radius: 14px; --header-h: 66px; --space-section: 2.5rem; --space-feature: 2.75rem; --space-small: 2rem; }
  .brand__logo { height: 46px; }
  .footer { padding-top: 28px; }
  .footer__grid { gap: 0; padding-bottom: 20px; }
  .footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 20px;
    text-align: center;
  }
  .footer__brand .brand--footer { justify-content: center; }
  .footer__brand .footer__desc { max-width: 32ch; margin: 12px auto 0; }
  .footer__grid > .footer__col:not(.footer__col--contact) { display: none; }
  .footer__col--contact { width: min(100%, 320px); margin-inline: auto; padding-top: 12px; }
  .footer__col--contact .footer__heading { text-align: left; }
  .footer__col--contact .footer__contact { width: 100%; margin: 0; }
  .footer__legal {
    align-items: center;
    gap: 8px;
    padding: 16px 0 calc(140px + env(safe-area-inset-bottom, 0px));
    text-align: center;
  }
  .footer__legal ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
    width: 100%;
  }
  .footer__legal li { display: flex; justify-content: center; }
  .footer__legal p { width: 100%; max-width: 36ch; margin-inline: auto; line-height: 1.6; }
  .contact-rail__toggle { background: var(--brand-900); }

  /* Mobile contact actions stay as separate circular icon buttons. */
  .contact-rail__toggle,
  .contact-rail__btn {
    display: grid;
    align-items: center;
    justify-content: center;
    place-items: center;
    place-content: center;
    width: 48px;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
  }
  .contact-rail__btn .ico { margin: 0; }
  .contact-rail__actions { width: auto; gap: 10px; bottom: calc(100% + 12px); padding: 0; background: transparent; border: 0; box-shadow: none; }
  .contact-rail__btn--wa { background: #25D366; color: #fff; }
  .contact-rail__btn--line { background: #06C755; color: #fff; }
  .contact-rail__btn--phone { background: var(--brand-800); color: #fff; }
  .contact-rail__btn--mail { background: var(--magenta-600); color: #fff; }
  .contact-rail__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    background: transparent;
    opacity: 0;
  }
  .contact-rail .ico { width: 21px; height: 21px; }
}