/* ==========================================================================
   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__company { margin-top: 14px; font-size: .8125rem; line-height: 1.6; color: rgba(255, 255, 255, .55); }
.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; }
}

/* ==========================================================================
   V4 shared blocks (PDC-Visa-Website-Design_V4.pdf)
   ========================================================================== */

/* Top bar: company line on the left, direct contact on the right. */
.topbar { background: var(--brand-950); color: rgba(255, 255, 255, .72); font-size: .8125rem; }
.topbar .container { max-width: 1440px; padding-inline: clamp(20px, 2.6vw, 40px); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 6px 24px; min-height: 38px; }
/* One row in every language: the company line gives way (ellipsis) before the links wrap. */
.topbar__company { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__links { display: flex; flex: none; flex-wrap: wrap; gap: 4px 20px; white-space: nowrap; }
.topbar a { color: #fff; font-weight: 600; }
.topbar a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Footer: brand, two link columns, contact. */
@media (min-width: 1024px) {
  .footer__grid { grid-template-columns: minmax(220px, 1.4fr) repeat(2, minmax(150px, .9fr)) minmax(280px, 1.5fr); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.footer__legal .footer__note { flex-basis: 100%; order: -1; color: rgba(255, 255, 255, .62); }

/* Office cards (src/partials/offices.html) */
.offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(16px, 2vw, 24px); }
.office {
  display: flex; flex-direction: column; gap: 8px; padding: 22px;
  background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius);
}
.office--head { border-color: var(--brand-900); box-shadow: inset 0 0 0 1px var(--brand-900); }
.office__tag { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta-600); }
.office h3 { font-size: 1.375rem; }
.office p { font-size: .9375rem; line-height: 1.6; color: var(--muted); }
.office .link-cta { margin-top: auto; padding-top: 6px; }

/* "Talk to us directly" + head office (src/partials/direct-contact.html) */
.direct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(14px, 1.6vw, 20px); }
.direct__card { padding: clamp(22px, 2.6vw, 32px); background: var(--brand-950); border-radius: var(--hp-radius); color: #fff; }
.direct__card h3 { font-size: 1.5rem; color: #fff; }
.direct__card dl { display: grid; gap: 14px; margin-top: 18px; }
.direct__card dt { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #C9C2F2; }
.direct__card dd { margin: 3px 0 0; font-size: 1.0625rem; line-height: 1.5; color: #fff; }
.direct__card dd a { color: #fff; font-weight: 600; }
.direct__card dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.direct__card dd span { display: block; font-size: .875rem; color: rgba(255, 255, 255, .7); }
.direct__card dd a { white-space: nowrap; }
.direct__card dd a + a::before { content: "·"; display: inline-block; margin: 0 10px; color: rgba(255, 255, 255, .45); font-weight: 400; }
/* LINE: QR code beside the link for desktop visitors to scan with their phone. */
.direct__line dd { display: flex; align-items: center; gap: 16px; }
.direct__qr { flex: none; width: 92px; height: 92px; padding: 4px; background: #fff; border-radius: 8px; }
.direct__office {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 12px;
  padding: clamp(22px, 2.6vw, 32px); background: var(--hp-surface); border: 1px solid var(--hp-line); border-radius: var(--hp-radius);
}
.direct__office .ico { width: 34px; height: 34px; color: var(--magenta-600); }
.direct__office h3 { font-size: 1.5rem; }
.direct__office p { max-width: 40ch; line-height: 1.6; color: var(--hp-text-soft); }
.direct__office .btn { margin-top: 6px; }

/* Company card beside the booking form */
.company-card { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 16px 18px; background: #fff; border: 1px solid var(--hp-line); border-radius: 14px; }
.company-card img { flex: none; width: 92px; height: auto; }
.company-card p { display: grid; gap: 2px; font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.company-card strong { color: var(--brand-950); font-weight: 600; }

.form__alt { font-size: .9375rem; color: var(--muted); }
.form__alt a { font-weight: 600; color: var(--brand-900); }
.form__legal a { color: var(--brand-900); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1199px) {
  /* The company name is already beside the header logo, and the line would push the
     contact links onto a second row. */
  .topbar__company { display: none; }
  .topbar__inner { justify-content: center; }
}
@media (max-width: 1023px) {
  .offices { grid-template-columns: 1fr 1fr; }
  .direct { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .topbar__inner { min-height: 34px; }
  .offices { grid-template-columns: 1fr; }
}

/* edit_1: company name beside the header logo, and the "We speak" flags in the top bar. */
.site-header .brand__text { display: grid; gap: 1px; }
.site-header .brand__name { font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--brand-950); white-space: nowrap; }
.site-header .brand__tagline { display: block; margin: 0; font-family: var(--font-body); font-size: .75rem; font-style: normal; line-height: 1.3; color: var(--muted); }
.topbar__langs { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .72); }
/* Each flag is a button that translates the page (script.js, section 7). */
.topbar__lang { position: relative; display: inline-flex; padding: 0; border: 0; border-radius: 2px; background: none; line-height: 0; cursor: pointer; }
.topbar__lang::after { content: ""; position: absolute; inset: -8px -2px; }   /* bigger tap area, same layout */
.topbar__lang:hover .flag { box-shadow: 0 0 0 1px #fff; }
.topbar__lang[aria-pressed="true"] .flag { box-shadow: 0 0 0 2px #fff; }
.topbar__lang:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Google Translate: the flags are the language switcher, so Google's own toolbar, the
   offset it adds to the page, and its hover tooltip and highlight are hidden. */
iframe.skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight, .VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q { background: none !important; box-shadow: none !important; }
.topbar__langs .flag { width: 21px; height: 14px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.topbar__links a { white-space: nowrap; }
.topbar__ico { display: none; }
@media (max-width: 767px) {
  .site-header .brand { gap: 8px; }
  .site-header .brand__name { font-size: .75rem; }
  .site-header .brand__tagline { font-size: .6875rem; }
  /* Phones: one row — flags, WhatsApp number, LINE, email. Words give way to icons
     ("We speak" to the flags), so the row fits in every language the flags offer. */
  .topbar__links { flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0 14px; }
  .topbar__langs > span[aria-hidden] { display: none; }
  .topbar__langs { gap: 4px; }
  .topbar__langs .flag { width: 18px; height: 12px; }
  .topbar__word { display: none; }
  .topbar__links a { display: inline-flex; align-items: center; gap: 5px; }
  .topbar__ico { display: block; flex: none; width: 14px; height: 14px; }
  .direct__qr { display: none; }   /* on a phone the link opens LINE directly */
}
@media (max-width: 359px) {
  .topbar { font-size: .75rem; }
  .topbar__links { gap: 0 10px; }
  .topbar .container { padding-inline: 12px; }
  /* The company name wraps onto two lines so the menu button keeps its place. */
  .site-header .brand__text { max-width: 8.5rem; }
  .site-header .brand__name { white-space: normal; }
}