/* =============================================================================
   SECTIONS.CSS — eurowallet.eu
   The site's own sections, re-implemented on the new boilerplate.
   Tokens live in style.css :root — never hardcode a colour that has one.
   Values are carried over from the legacy front so the design does not move.
   ============================================================================= */


/* =============================================================================
   BUTTONS — the site's shape on top of the boilerplate .btn-* contract
   (legacy .theme-btn-six: 20px type, 55px line, 5px radius, red fill + ripple)
   ============================================================================= */
.btn-one,
.btn-two {
  font-size: var(--fs-lg);
  padding-inline: 2rem;
  padding-block: 0;
  line-height: 3.4375rem;   /* 55px */
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

/* the legacy ripple, kept because it is part of how the buttons read */
.btn-one::before {
  content: '';
  position: absolute;
  inline-size: 100px;
  block-size: 100px;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  margin: -50px 0 0 -50px;
  transform: scale(0);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}
.btn-one:hover::before {
  transform: scale(1);
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .btn-one::before { display: none; }
}


/* =============================================================================
   SECTION TITLE — legacy .title-style-two: light weight, the accent word bold
   ============================================================================= */
.section-title {
  font-weight: 300;
  font-size: clamp(2.375rem, 1.6rem + 2.6vw, 4.25rem);   /* 38 → 68px */
  line-height: 1.05;
  margin-bottom: var(--space-md);
}
.section-title strong,
.section-title .accent {
  color: var(--color-accent);
  font-weight: 800;
  display: inline-block;
}


/* =============================================================================
   HOME — video hero (legacy .video-header + .hero-banner-five heading)
   ============================================================================= */
.hero-video {
  position: relative;
  background-color: #000;
  block-size: 100vh;
  min-block-size: 25rem;
  inline-size: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: #fff;
}
.hero-video video {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  min-inline-size: 100%;
  min-block-size: 100%;
  max-inline-size: fit-content;
  inline-size: auto;
  block-size: auto;
  z-index: 0;
  transform: translateX(-50%) translateY(-50%);
}
.hero-video .hero-overlay {
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: 0.4;
  z-index: 1;
}
.hero-video .container { position: relative; z-index: 2; }
.hero-video .hero-body { max-inline-size: 40rem; }

.hero-title {
  color: #fff;
  line-height: 1.1;
  font-size: clamp(2.25rem, 1.4rem + 2.9vw, 4.375rem);   /* 36 → 70px */
  font-weight: 300;
  margin-bottom: var(--space-sm);
}
.hero-title strong { font-weight: 800; display: block; }

.hero-lead {
  color: #fff;
  font-size: var(--fs-lg);
  line-height: 1.5;
  margin-bottom: var(--space-lg);
}

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

/* devices that cannot play the background video keep a still instead */
@media (pointer: coarse) and (hover: none) {
  .hero-video video { display: none; }
  .hero-video {
    background-image: url('/assets/images/ewbg.jpg');
    background-position: center center;
    background-size: cover;
  }
}


/* =============================================================================
   FEATURE BAND — full-width image band with one text column
   (legacy .hero-banner-five with a background image)
   ============================================================================= */
.feature-band {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 8vw, 9.375rem);   /* → 150px */
  margin-bottom: clamp(3rem, 6vw, 6.25rem);
  background-size: cover;
  background-position: center center;
}
.feature-band .band-body { max-inline-size: 34rem; }
.feature-band p { font-size: var(--fs-lg); line-height: 1.5; }

.trademark-note {
  position: relative;
  padding: 0.625rem 0.625rem 0.625rem 3.75rem;
  background: #e6e6e6;
  border-radius: 5px;
  display: inline-block;
  margin-block-start: var(--space-md);
}
.trademark-note i {
  position: absolute;
  inset-inline-start: 0.625rem;
  inset-block-start: 0.875rem;
  font-size: 2.5rem;
}
.trademark-note h3 { margin-bottom: 2px; font-size: var(--fs-lg); }
.trademark-note p  { margin: 0; font-size: var(--fs-sm); }


/* =============================================================================
   TEXT + MEDIA — two columns, image on the right (legacy .front-text-block-one)
   ============================================================================= */
.text-media {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 7vw, 9.375rem) clamp(3rem, 5vw, 6.25rem);
}
.text-media .row { align-items: center; }
.text-media .text-wrapper { padding-block-start: var(--space-lg); }
.text-media ul {
  padding-inline-start: 1.25rem;
  margin-block-start: var(--space-sm);
}
.text-media ul li { margin-block-end: var(--space-xs); }
.text-media img { border-radius: var(--radius-md); }


/* =============================================================================
   FAQ BAND — light grey band with the accordion (legacy .front-text-block-five)
   ============================================================================= */
.faq-band {
  background: var(--color-bg-alt);
  padding-block: clamp(3.5rem, 8vw, 9.375rem);
}
.faq-band .lead { font-size: var(--fs-lg); margin-bottom: var(--space-md); }

.accordion-one .accordion-item {
  border: none;
  border-radius: 0;
  background: transparent;
}
.accordion-one .accordion-item i {
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  padding: 8px;
  border-radius: 50%;
  margin-inline-end: 10px;
}
.accordion-one .accordion-button {
  font-size: clamp(1.125rem, 0.9rem + 0.7vw, 1.625rem);
  font-weight: var(--fw-semibold);
  padding: var(--space-md) 0;
  box-shadow: none;
  border-radius: 0;
  color: var(--color-heading);
  background: transparent;
  transition: all 0.3s ease-in-out;
}
.accordion-one .accordion-button:not(.collapsed) { padding-bottom: 15px; }
.accordion-one .accordion-body { padding: 0 1.5625rem 1px 0; }
.accordion-one .accordion-body p { font-size: var(--fs-lg); line-height: 1.8; }
.accordion-one .accordion-button::after {
  content: '+';
  font-size: 1.75rem;
  background-image: none;
  inline-size: auto;
  block-size: auto;
}
.accordion-one .accordion-button:not(.collapsed)::after { content: '-'; }


/* =============================================================================
   PAGE HEADER — the subheader hero used by page-header.tpl
   (legacy .hero-wrap.hero-one / .bg-image)
   ============================================================================= */
.subheader {
  position: relative;
  z-index: 1;
  background-color: #F9F2EC;
  background-size: cover;
  background-position: center center;
  padding-block: clamp(7rem, 12vw, 8.75rem) clamp(3rem, 6vw, 6.25rem);
}
.subheader h1 {
  font-weight: normal;
  font-size: clamp(2.25rem, 1.5rem + 2.4vw, 4.5rem);   /* → 72px */
  line-height: 1.16;
  margin-bottom: 0;
}
.subheader .lead { margin-block-start: var(--space-xs); font-size: var(--fs-lg); }

/* with a header image: dark scrim + white type, exactly as before */
.subheader.has-image { color: #fff; }
.subheader.has-image::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #000;
  content: '';
  opacity: 0.36;
}
.subheader.has-image h1,
.subheader.has-image .lead,
.subheader.has-image .breadcrumb-item,
.subheader.has-image .breadcrumb-item a,
.subheader.has-image .breadcrumb-item.active { color: #fff; }


/* =============================================================================
   PAGE BODY — the site reads in a narrow measure
   ============================================================================= */
.page-default-wrap { padding-block-start: clamp(2rem, 5vw, 7.5rem); }
.page-default-wrap .page-body,
.page-header-wrap .page-body {
  max-inline-size: 46rem;
  margin-inline: auto;
}
.page-header-wrap { padding-block-start: clamp(2.5rem, 5vw, 5rem); }

/* editor content — the site's own heading/link treatment */
.rte-content h2 { font-size: 2rem; }
.rte-content h3 {
  font-size: 1.5rem;
  border-inline-start: 2px solid var(--color-accent);
  padding-inline-start: 1.25rem;
  margin-inline-start: -1.25rem;
}
.rte-content p a { color: var(--color-accent); }
.rte-content p a:hover { color: var(--color-heading); }


/* =============================================================================
   HEADER — logo sizing and the language switcher's own look
   ============================================================================= */
.main-menu .logo img { inline-size: 50px; block-size: auto; transition: all 0.4s ease-out; }
.main-menu.fixed .logo img { inline-size: 40px; }

.main-menu .navbar-nav .nav-link {
  text-transform: uppercase;
  font-size: var(--fs-lg);
  font-weight: 800;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: 0 var(--space-md) 0 0;
  padding: 0;
  list-style: none;
  font-weight: var(--fw-semibold);
}
.lang-switch a,
.lang-switch .lang-switch-current { text-decoration: none; }
.lang-switch .lang-switch-current { color: var(--color-accent); }
.lang-switch a { color: var(--color-muted); }
.lang-switch a:hover { color: var(--color-accent); }

.main-menu .mobile-content .address-block { margin-block-start: 2.5rem; }
.main-menu .mobile-content .address-block a { color: inherit; }


/* =============================================================================
   FOOTER — the site's own minimal footer (big phone + e-mail, legal row)
   ============================================================================= */
.site-footer {
  padding-block: clamp(3rem, 6vw, 6.25rem) var(--space-lg);
}
.site-footer .footer-contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md) var(--space-xl);
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
  text-align: center;
}
.site-footer .footer-contacts .label {
  display: block;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--color-accent);
}
.site-footer .footer-contacts a {
  font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem);   /* → 40px */
  font-weight: 200;
  color: var(--color-heading);
  text-decoration: none;
}
.site-footer .footer-contacts a:hover { color: var(--color-accent); }

.site-footer .footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  border-block-start: 1px solid var(--color-border);
  padding-block-start: var(--space-md);
}
.site-footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer .footer-nav a { color: var(--color-text); text-decoration: none; }
.site-footer .footer-nav a:hover { color: var(--color-accent); }
.site-footer .copyright { margin: 0; font-size: var(--fs-sm); }


/* =============================================================================
   CHECKOUT — Turnstile slot
   The widget runs in `interaction-only` mode, so on a normal order Cloudflare
   injects nothing and this slot must take up no room at all. When a challenge
   IS required the injected iframe gives the slot height and the margin below
   applies, so it never sits flush against the submit button.
   ============================================================================= */
.verify-slot { margin: 0; }
.verify-slot:has(iframe) { margin-block: var(--space-md); }
.shop-turnstile:empty { display: none; }


/* =============================================================================
   CONTACT
   ============================================================================= */
#map { block-size: 600px; }


/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 991.98px) {
  .main-menu .navbar-nav .nav-link {
    margin: 0;
    padding: 10px 0;
    font-size: var(--fs-base);
    color: var(--color-heading);
  }
  .text-media .text-wrapper { padding-block-start: 0; }
  .site-footer .footer-legal { justify-content: center; text-align: center; }
}

@media (max-width: 767.98px) {
  #map { block-size: 320px; }
}