/* ==========================================================================
   richter2026 — footer.css
   Modern footer + restyle of the integrated iCustomFooter extension.
   Milestone: 0.2 (ships with header for full page chrome)
   ========================================================================== */

#footer {
  clear: both;
  background: var(--color-graphite);
  color: var(--color-text-on-dark-muted);
  padding: var(--space-12) 0 var(--space-6);
  margin-top: var(--space-12);
  border: none;
}

#footer .richter-footer__columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

#footer .column {
  float: none;
  width: auto;
  min-height: 0;
}

#footer h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #fff;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  height: auto;
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-4) 0;
  padding: 0;
}

#footer h3 img {
  float: none;
  margin: 0;
  width: 22px;
  height: 22px;
  /* richter2026 TODO (v0.9 Polish): these are the original glossy
     1.5-era PNG icons (footer_information.png etc.), kept as-is per
     "avoid unnecessary changes" / "preserve images" — they read fine
     on dark graphite since they carry their own circular backdrop,
     but a flat single-color SVG icon set would match the new visual
     language better. Swap the four files in /image/ when ready;
     no template change needed since header.tpl/footer.tpl reference
     them by filename only. */
}

#footer .column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer .column ul li {
  margin-bottom: var(--space-2);
}

#footer .column a {
  color: var(--color-text-on-dark-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
}

#footer .column a:hover {
  color: #fff;
  text-decoration: underline;
}

#footer .wrapper {
  max-width: var(--container-width);
  margin: var(--space-8) auto 0;
  padding: var(--space-6) var(--container-padding) 0;
  border-top: 1px solid var(--color-graphite-border);
}

#footer .payment-methods {
  min-height: 24px;
  width: 315px;
  max-width: 100%;
  height: 95px;
  background-color: #fff;
  background-image: url("../image/icustomfooter/payment-methods.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border-radius: var(--radius-md);
  box-sizing: content-box;
}

#powered {
  text-align: center;
  background: var(--color-graphite);
  color: var(--color-text-faint);
  font-size: var(--font-size-xs);
  padding: var(--space-4) var(--container-padding) 0;
}

/* ---- Defensive override -------------------------------------------------
   The bundled iCustomFooter extension stylesheet (icustomfooter.css,
   loaded via $this->document->addStyle() inside footer.tpl, untouched
   logic) ships a generic ".clearfix{width:900px}" rule meant for its
   own admin config screen. That selector is too broad and would clip
   any unrelated element carrying a "clearfix" class on the storefront.
   We reset it here rather than edit the third-party extension file. */
.clearfix {
  width: auto !important;
  display: block !important;
}

#iCustomFooter,
#iCustomFooter * {
  box-sizing: border-box;
}

#iCustomFooter {
  max-width: var(--container-width);
  margin: 0 auto var(--space-10);
  padding: 0 var(--container-padding);
}

#iCustomFooter .iWidgets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

#iCustomFooter .iWidget {
  width: auto;
  float: none;
}

#iCustomFooter .iWidgetWrapper {
  background: var(--color-graphite-light);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  height: 100%;
}

#iCustomFooter .iWidgetWrapper h2 {
  color: #fff;
  font-size: var(--font-size-md);
  margin-bottom: var(--space-3);
}

#iCustomFooter .iWidgetWrapper .text,
#iCustomFooter .iWidgetWrapper .text * {
  color: var(--color-text-on-dark-muted);
  font-size: var(--font-size-sm);
}

#iCustomFooter .iContactsListing {
  list-style: none;
  margin: 0;
  padding: 0;
}

#iCustomFooter .iContactsListing li {
  margin-bottom: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-on-dark-muted);
}

#iCustomFooter .iContactFields label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  margin-bottom: var(--space-1);
}

#iCustomFooter .iContactFields input[type="text"],
#iCustomFooter .iContactFields textarea {
  width: 100%;
  margin-bottom: var(--space-3);
  background: var(--color-graphite);
  border: 1px solid var(--color-graphite-border);
  color: #fff;
}

#iCustomFooter .iContactFields hr {
  display: none;
}

#iCustomFooter .iContactFields input[type="submit"] {
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

#iCustomFooter .iContactFields input[type="submit"]:hover {
  background: var(--color-accent-dark);
}

#iCustomFooter .iButtons {
  display: flex;
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
}

@media (max-width: 991px) {
  #footer .richter-footer__columns,
  #iCustomFooter .iWidgets {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 599px) {
  #footer .richter-footer__columns,
  #iCustomFooter .iWidgets {
    grid-template-columns: 1fr;
  }
}

/* ---- Neutralize icustomfooter.css conflicts ----------------------------
   icustomfooter.css (loaded via addStyle() in footer.tpl) ships legacy
   rules targeting #footer and .column that directly conflict with the
   new dark graphite footer. These overrides ensure richter2026 wins
   regardless of stylesheet load order. */

/* The old theme set a yellow background and box-shadow on #footer */
/* v1.1 bugfix — this used to be "padding:0 !important", intended to
   neutralize icustomfooter.css's own #footer padding. But #footer's
   own rule earlier in this file sets "padding:var(--space-12) 0
   var(--space-6)" for breathing room above "Information"/"Service"
   etc. — padding:0 wiped that out too, so the headings sat flush
   against the very top edge of the footer ("headings too much on
   top" bug). Restated explicitly instead of zeroed. */
#footer {
  background: var(--color-graphite) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
  padding: var(--space-12) 0 var(--space-6) !important;
}

/* icustomfooter.css floats .column and sets fixed 220px width */
#footer .column {
  float: none !important;
  width: auto !important;
  min-height: 0 !important;
  margin-bottom: 0 !important;
}

/* icustomfooter.css sets grey link color and adds '» ' before each link */
#footer .column a {
  color: var(--color-text-on-dark-muted) !important;
}

#footer .column a:hover {
  color: #fff !important;
}

/* Remove the '»  ' pseudo-element injected by icustomfooter.css */
.column > ul > li > a:before {
  content: none !important;
  display: none !important;
}

/* icustomfooter.css sets grey h3 color and old padding */
#footer .column h3,
#footer h3 {
  color: #fff !important;
  margin-top: 0 !important;
  padding: 0 0 var(--space-3) 0 !important;
}

/* icustomfooter.css adds padding-left to the ul */
#footer .column ul {
  padding-left: 0 !important;
  list-style: none !important;
}

/* icustomfooter.css adds margin-left to li */
#footer .column ul li {
  margin-left: 0 !important;
  margin-bottom: var(--space-2) !important;
}

/* icustomfooter.css shows #powered — we want it styled our way */
#powered {
  display: block !important;
  background: var(--color-graphite) !important;
  text-align: center !important;
  color: var(--color-text-faint) !important;
  font-size: var(--font-size-xs) !important;
  padding: var(--space-4) var(--container-padding) var(--space-6) !important;
  margin-top: 0 !important;
}

/* ---- More specific iCustomFooter overrides (fighting icustomfooter.css) -
   icustomfooter.css uses .whitebgpattern background image and sets fixed
   widget heights that clip content. These overrides need to match or
   beat the specificity of the original rules. */

#iCustomFooter.iCustomFooter {
  width: auto !important;
  padding-left: 0 !important;
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  margin-bottom: 0 !important;
  background: none !important;
}

/* Remove the white dotted background from the whitebgpattern class */
.iCustomFooter.whitebgpattern {
  background: none !important;
  background-image: none !important;
}

/* Fix iWidget fixed height — was 330px, causing content clipping */
.iCustomFooter .iWidgets .iWidget,
.iWidgets .iWidget {
  height: auto !important;
  overflow: visible !important;
}

/* Override the fixed-width grid columns from icustomfooter.css */
.iCustomFooter .iWidgets {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--space-6) !important;
  width: auto !important;
  padding: var(--container-padding) !important;
  max-width: var(--container-width) !important;
  margin: 0 auto var(--space-8) !important;
}

.iCustomFooter .iWidget {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* Widget text should be light on dark background */
.iCustomFooter .whitebgpattern .iWidgets .iWidget,
.iCustomFooter .whitebgpattern .iWidgets .iWidget p {
  color: var(--color-text-on-dark-muted) !important;
}

.iCustomFooter .whitebgpattern .iWidget h2 {
  color: #fff !important;
  border-bottom: 1px solid var(--color-graphite-border) !important;
}

/* Contact list icons — override background images that won't load */
.iCustomFooter .whitebgpattern .iContactUs .iAddress,
.iCustomFooter .whitebgpattern .iContactUs .iPhone,
.iCustomFooter .whitebgpattern .iContactUs .iFax,
.iCustomFooter .whitebgpattern .iContactUs .iEmail,
.iCustomFooter .whitebgpattern .iContactUs .iSkype {
  background-image: none !important;
  padding-left: 0 !important;
}

@media (max-width: 767px) {
  .iCustomFooter .iWidgets {
    grid-template-columns: 1fr !important;
  }
}