/**
 * Fitpedia — Site Footer (Editorial Dark Anchor)
 *
 * Loaded by: includes/class-fp-footer.php
 *
 * Structure: ONE Divi section in the Theme Builder Footer Layout (post
 * 31700) composed of native Divi modules — Image, Text, Social Media
 * Follow — wrapped in `fp-footer-*` CSS classes via `module_class`.
 *
 * Theme DNA: Ink (#0B0B0B) bookend background · Soft White (#F5F5F5)
 * text · Gold (#D4AF37) accents · Fraunces serif for the brand line ·
 * JetBrains Mono for column titles · Inter Tight for list items.
 *
 * Editor workflow: every piece is its own Divi module — David edits
 * tagline, links and social URLs from the Visual Builder. Menus stay
 * editable in Appearance → Menus (Edition = 7558, Service = 113).
 */


/* ====================================================================
 *  TOKENS — section-level so per-module styles inherit cleanly
 * ==================================================================== */
.fp-footer {
  --fpf-ink:        #0B0B0B;
  --fpf-charcoal:   #2C2C2C;
  --fpf-paper:      #F5F5F5;
  --fpf-paper-dim:  rgba(245, 245, 245, 0.62);
  --fpf-paper-faint:rgba(245, 245, 245, 0.38);
  --fpf-gold:       #D4AF37;
  --fpf-rule:       rgba(212, 175, 55, 0.35);
  --fpf-rule-soft:  rgba(245, 245, 245, 0.10);
  --fpf-pad-x:      clamp(20px, 4vw, 56px);
  --fpf-pad-y:      clamp(48px, 5vw, 72px);
  --fpf-wrap:       1320px;

  background: var(--fpf-ink) !important;
  color: var(--fpf-paper) !important;
  position: relative;
  overflow: hidden;
}


/* ====================================================================
 *  SECTION + ROW SCAFFOLD
 *  Section uses grid to guarantee row-centering — Divi's per-section
 *  inline styles were defeating `margin: 0 auto !important` on the row.
 * ==================================================================== */
.fp-footer.et_pb_section {
  padding: var(--fpf-pad-y) var(--fpf-pad-x) !important;
  display: grid !important;
  grid-template-columns: minmax(0, var(--fpf-wrap));
  justify-content: center !important;
  row-gap: clamp(36px, 3.5vw, 56px) !important;
}

.fp-footer .et_pb_row {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fp-footer-main.et_pb_row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: clamp(28px, 3vw, 56px) !important;
  align-items: start !important;
}
.fp-footer-main.et_pb_row::before,
.fp-footer-main.et_pb_row::after { display: none !important; }

.fp-footer .et_pb_column {
  margin: 0 !important;
  flex: 1 1 0%;
  min-width: 0;
}
.fp-footer-brand-col.et_pb_column {
  flex: 1.5 1 0%;     /* slightly wider for the brand block */
}


/* Subtle noise overlay — same DNA as header / mega-menu */
.fp-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='fpfn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fpfn)'/%3E%3C/svg%3E");
  z-index: 0;
}
.fp-footer .et_pb_row { position: relative; z-index: 1; }


/* ====================================================================
 *  COLUMN 1 — Brand
 * ==================================================================== */
.fp-footer-brand-col.et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

/* Override Divi's default image centering — we want the logo flush-left
   with the rest of the brand column content. */
.fp-footer-logo {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.fp-footer-logo .et_pb_image_wrap {
  display: inline-block;
  max-width: 80px;
  margin: 0 !important;
}
.fp-footer-logo img {
  width: 80px !important;
  height: auto !important;
  margin: 0 !important;
  filter: brightness(1.05) contrast(1.05);
}

.fp-footer-tagline {
  font-family: 'Fraunces', 'Times New Roman', serif !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: var(--fpf-paper) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fp-footer-tagline p {
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}
.fp-footer-tagline em,
.fp-footer-tagline .established {
  display: block;
  margin-top: 12px;
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fpf-gold);
  font-style: normal;
}


/* ====================================================================
 *  COLUMNS 2-4 — Lists + Headers (shared style)
 * ==================================================================== */
.fp-footer-col.et_pb_column {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.fp-footer-col-title {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--fpf-gold) !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--fpf-rule) !important;
}
.fp-footer-col-title p {
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
}


/* The list rendered by the [fp_menu_list] shortcode inside a Text module */
.fp-footer-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fp-footer-list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.fp-footer-list a {
  font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--fpf-paper-dim) !important;
  text-decoration: none !important;
  letter-spacing: 0.005em;
  transition: color 200ms ease, padding-left 200ms ease;
  display: inline-block;
  position: relative;
}
.fp-footer-list a::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--fpf-gold);
  opacity: 0;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition: opacity 220ms ease, transform 220ms ease;
}
.fp-footer-list a:hover {
  color: var(--fpf-paper) !important;
  padding-left: 14px;
}
.fp-footer-list a:hover::before {
  opacity: 1;
  transform: translateY(-50%) scaleX(1);
}


/* ====================================================================
 *  SOCIAL ICONS — inline SVGs inside a Text module
 *  (Switched from Divi's Social Media Follow module to inline SVG so the
 *  glyphs render reliably without depending on Divi's icon-font load
 *  order. Each <a> wraps a 16px SVG inside a 38px gold-bordered circle.)
 * ==================================================================== */
.fp-footer-social {
  margin: 0 !important;
  padding: 0 !important;
}
/* Divi's Text module wraps content in `.et_pb_text_inner` — flex+gap have
   to live on that inner wrapper, not on the outer module, otherwise the
   gap applies between the wrapper and (nothing) instead of between icons. */
.fp-footer-social .et_pb_text_inner {
  display: flex !important;
  flex-wrap: wrap;
  gap: 14px;
}


/* ====================================================================
 *  PULL-QUOTE — editorial sign-off block under the social icons
 *  Gold left-rule + italic Fraunces 18px + mono attribution. Carries
 *  the brand voice (Wissen, das den Unterschied macht.) at the bottom
 *  of column 4 to balance the visual weight against the longer EDITION
 *  and RECHT lists.
 * ==================================================================== */
.fp-footer-quote {
  margin-top: 24px !important;
  padding-top: 0 !important;
  display: flex !important;
  flex-direction: column;
  gap: 12px;
}
.fp-footer-quote p {
  margin: 0 !important;
  padding: 0 !important;
}
.fp-footer-quote blockquote {
  margin: 0 !important;
  padding: 0 0 0 18px !important;
  font-family: 'Fraunces', 'Times New Roman', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: 1.3 !important;
  color: var(--fpf-paper) !important;
  border-left: 2px solid var(--fpf-gold) !important;
}
.fp-footer-quote blockquote p {
  font-family: inherit !important;
  font-style: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}
.fp-footer-quote .attrib {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
  font-size: 9px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--fpf-paper-dim) !important;
  padding-left: 18px;
}
.fp-footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--fpf-rule);
  color: var(--fpf-paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: background 240ms ease, border-color 240ms ease, color 240ms ease, transform 240ms ease;
  /* Belt-and-suspenders fallback in case the parent flex+gap is ever
     stripped — explicit per-icon margin guarantees breathing room. */
  margin-right: 6px;
}
.fp-footer-social a:last-child {
  margin-right: 0;
}
.fp-footer-social a svg {
  width: 16px;
  height: 16px;
  display: block;
}
.fp-footer-social a:hover {
  background: var(--fpf-gold);
  border-color: var(--fpf-gold);
  color: var(--fpf-ink);
  transform: translateY(-2px);
}


/* ====================================================================
 *  COLOPHON — copyright row (gold hairline divider above)
 * ==================================================================== */
.fp-footer-bottom.et_pb_row {
  margin-top: clamp(36px, 3.5vw, 56px) !important;
  padding-top: 24px !important;
  padding-bottom: 0 !important;
  border-top: 1px solid var(--fpf-rule-soft);
  position: relative;
  z-index: 1;
}

.fp-footer-colophon {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--fpf-paper-faint) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.fp-footer-colophon p {
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
}
.fp-footer-colophon a {
  color: var(--fpf-paper-dim) !important;
  text-decoration: none !important;
  transition: color 200ms ease;
}
.fp-footer-colophon a:hover {
  color: var(--fpf-gold) !important;
}


/* ====================================================================
 *  RESPONSIVE
 * ==================================================================== */
@media (max-width: 980px) {
  .fp-footer-main.et_pb_row {
    flex-direction: column !important;
    gap: 36px !important;
  }
  .fp-footer-brand-col.et_pb_column,
  .fp-footer-col.et_pb_column {
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  .fp-footer-colophon {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
}


/* ====================================================================
 *  REDUCED MOTION
 * ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fp-footer *,
  .fp-footer *::before {
    transition-duration: 0.01ms !important;
  }
}