/* ==========================================================================
   English Pokemon Cards - footer
   Loaded by mu-plugin epc-footer.php, after premium.css.

   The footer markup is an Elementor template (ovic_footer "footer-premium"),
   so the DOM is fixed: this file restyles it, it does not restructure it.
   Every rule is scoped to footer.footer so nothing reaches the rest of the site.

   Element ids referenced below are Elementor's own and were read off the live
   page, not guessed:
     .elementor-element-0fb7fe9  upper band  (Follow Us / Newsletter / Seller)
     .elementor-element-8d7cf7c  lower band  (link columns / about / logo)
   ========================================================================== */

footer.footer {
  /* ---- surface ---- */
  --epcf-deep:  #12141A;   /* base */
  --epcf-band:  #191C23;   /* upper band, one step lighter */
  --epcf-raise: #20242C;   /* input wells and panels */

  /* ---- ink ----  body on band = 7.4:1, heading = 14.1:1 */
  --epcf-ink:   #EDEFF2;
  --epcf-body:  #A7AEBA;
  --epcf-faint: #7A828F;

  --epcf-rule:  rgba(255, 255, 255, .08);
  --epcf-gold:  #FFCB05;
  --epcf-blue:  #0F7FE8;

  background: var(--epcf-deep);
  position: relative;
}

/* --------------------------------------------------------------------------
   Signature: the crimp.
   A sealed booster pack is closed with a serrated foil crimp. That edge is the
   one thing every product in this catalogue physically has in common, so the
   footer opens on it. Two 45-degree gradients cut a row of gold teeth; no
   image, no extra request.
   -------------------------------------------------------------------------- */
footer.footer::before {
  content: "";
  display: block;
  height: 9px;
  background-image:
    linear-gradient(135deg, var(--epcf-gold) 25%, transparent 25.5%),
    linear-gradient(225deg, var(--epcf-gold) 25%, transparent 25.5%);
  background-size: 18px 18px;
  background-position: 0 0;
  background-repeat: repeat-x;
  opacity: .9;
}

/* --------------------------------------------------------------------------
   Colour. premium.css set footer text to `color: inherit`, which walks up to
   body and resolves to --main-cl (#2A2A2E) - dark ink on a dark panel, 1.47:1.
   Colour is therefore set explicitly here rather than inherited.
   -------------------------------------------------------------------------- */
footer.footer,
footer.footer p,
footer.footer li,
footer.footer span,
footer.footer div,
footer.footer td,
footer.footer dd {
  color: var(--epcf-body);
}

footer.footer a {
  color: var(--epcf-body);
  text-decoration: none;
  transition: color .16s ease, transform .16s ease;
}
footer.footer a:hover,
footer.footer a:focus-visible {
  color: var(--epcf-ink);
}
footer.footer a:focus-visible {
  outline: 2px solid var(--epcf-gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Bands. Both Elementor sections paint their own near-black; flatten them onto
   one surface so the footer reads as a single object, with the upper band
   raised a single step rather than boxed.
   -------------------------------------------------------------------------- */
footer.footer .elementor-element-0fb7fe9 {
  background: var(--epcf-band) !important;
  border-bottom: 1px solid var(--epcf-rule);
}
footer.footer .elementor-element-8d7cf7c {
  background: transparent !important;
}

/* Vertical rhythm. The stock footer runs 1163px tall, most of it Elementor's
   default container padding stacked four rows deep. */
footer.footer .e-con-inner,
footer.footer .e-con > .e-con-inner {
  padding-block: 8px;
}
footer.footer .e-con { gap: 10px; }
footer.footer .elementor-widget:not(:last-child) {
  margin-bottom: 6px;
}
footer.footer .elementor-widget-container { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Column headings.
   The gold bar sits ABOVE the label like an index tab, which is also how the
   set symbol sits above the card number on the products themselves.
   -------------------------------------------------------------------------- */
footer.footer h3.widget-title,
footer.footer .widget-title,
footer.footer h1, footer.footer h2, footer.footer h3,
footer.footer h4, footer.footer h5, footer.footer h6 {
  color: var(--epcf-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 11px;
  padding-top: 10px;
  position: relative;
}
footer.footer h3.widget-title::before,
footer.footer .widget-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--epcf-gold);
}

/* Link lists */
footer.footer ul { margin: 0; padding: 0; list-style: none; }
footer.footer li { margin: 0; }
footer.footer li a {
  display: inline-block;
  font-size: 14px;
  line-height: 1.72;
  padding-block: 2px;      /* touch target without the leading cost of line-height 2 */
  letter-spacing: .005em;
}
footer.footer li a:hover { transform: translateX(3px); }

/* Body copy: the mission line and the seller blurb */
footer.footer p {
  font-size: 14px;
  line-height: 1.62;
  max-width: 46ch;       /* keeps the mission statement from running the full width */
  margin: 0 0 8px;
}

/* --------------------------------------------------------------------------
   Social. Stock renders four 45px tiles each painted its own brand colour -
   magenta, grey, green, blue in a row, which shouts louder than anything else
   down here. Unify to hairline circles and give the brand colour back on
   hover, where it confirms the destination instead of competing for attention.
   -------------------------------------------------------------------------- */
footer.footer .elementor-social-icon {
  width: 40px;
  height: 40px;
  background-color: transparent !important;
  border: 1px solid var(--epcf-rule);
  border-radius: 50%;
  color: var(--epcf-body) !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
footer.footer .elementor-social-icon svg,
footer.footer .elementor-social-icon i { fill: currentColor; color: currentColor; }
footer.footer .elementor-social-icon:hover { color: #fff !important; border-color: transparent; }
footer.footer .elementor-social-icon-instagram:hover { background-color: #E230A5 !important; }
footer.footer .elementor-social-icon-tiktok:hover    { background-color: #69727D !important; }
footer.footer .elementor-social-icon-whatsapp:hover  { background-color: #25D366 !important; }
footer.footer .elementor-social-icon-telegram:hover  { background-color: #2CA5E0 !important; }
footer.footer .elementor-grid { gap: 8px; }

/* --------------------------------------------------------------------------
   Newsletter. The stock field is a plain white box dropped on the dark panel.
   -------------------------------------------------------------------------- */
footer.footer label.text-field.field-email {
  background: var(--epcf-raise) !important;
  border: 1px solid var(--epcf-rule);
  border-radius: 8px 0 0 8px;
  padding: 0 14px;
}
footer.footer label.text-field.field-email input {
  background: transparent !important;
  border: 0;
  color: var(--epcf-ink);
  font-size: 14px;
  height: 46px;
}
footer.footer label.text-field.field-email input::placeholder { color: var(--epcf-faint); }
footer.footer label.text-field.field-email:focus-within {
  border-color: var(--epcf-blue);
  box-shadow: 0 0 0 3px rgba(15, 127, 232, .22);
}
footer.footer button.submit-newsletter {
  background: var(--epcf-gold) !important;
  color: #12141A !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: filter .16s ease;
}
footer.footer button.submit-newsletter:hover { filter: brightness(1.08); }

/* --------------------------------------------------------------------------
   Contact block. The phone number is the one figure a trade buyer acts on, so
   it gets tabular numerals and the gold.
   -------------------------------------------------------------------------- */
footer.footer a[href^="tel:"],
footer.footer a[href*="wa.me"],
footer.footer a[href*="whatsapp"] {
  color: var(--epcf-gold);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
footer.footer a[href^="tel:"]:hover,
footer.footer a[href*="wa.me"]:hover { color: #fff; }

/* Logo: stock renders it oversized in its own row */
footer.footer img { max-width: 100%; height: auto; }
footer.footer .elementor-widget-image img { max-height: 56px; width: auto; }

/* --------------------------------------------------------------------------
   Copyright rule
   -------------------------------------------------------------------------- */
footer.footer .elementor-element-8d7cf7c > .e-con-inner > .e-con:last-child {
  border-top: 1px solid var(--epcf-rule);
  margin-top: 8px;
}
footer.footer .elementor-element-8d7cf7c > .e-con-inner > .e-con:last-child p,
footer.footer .elementor-element-8d7cf7c > .e-con-inner > .e-con:last-child a {
  font-size: 12.5px;
  color: var(--epcf-faint);
}

/* --------------------------------------------------------------------------
   Responsive + motion
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  footer.footer .e-con-inner,
  footer.footer .e-con > .e-con-inner { padding-block: 26px; }
  footer.footer h3.widget-title,
  footer.footer .widget-title { margin-bottom: 12px; }
  footer.footer li a { line-height: 2.1; }   /* larger touch targets */
  footer.footer p { max-width: none; }
  footer.footer label.text-field.field-email { border-radius: 8px; }
  footer.footer button.submit-newsletter { border-radius: 8px; width: 100%; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  footer.footer a,
  footer.footer .elementor-social-icon,
  footer.footer button.submit-newsletter { transition: none; }
  footer.footer li a:hover { transform: none; }
}