/* =====================================================================
   Footer Component
   Source values: jl-foot-bg light=#f9f9fa dark=#020d34,
   title=18px, font=14px, copyright=13px, menu=13px,
   logo=110px, social=38px gap=10px, top-pad=60px,
   bottom-pad=20px, gotop=35px radius=6px
   ===================================================================== */

/* ── CSS Variables ──────────────────────────────────────────────────── */
:root {
  --ftr-bg:          #f9f9fa;
  --ftr-color:       #0a0a0a;
  --ftr-link:        #0a0a0a;
  --ftr-hlink:       #005aff;
  --ftr-head:        #000000;
  --ftr-line:        rgba(136, 136, 136, 0.15);
  --ftr-font-size:   14px;
  --ftr-title-size:  18px;
  --ftr-copyright:   13px;
  --ftr-menu-size:   13px;
  --ftr-logo-w:      160px;
  --ftr-container:   1180px;
  --ftr-social-size: 38px;
  --ftr-social-icon: 15px;
  --ftr-social-gap:  10px;
  --ftr-top-pad:     60px;
  --ftr-bottom-pad:  20px;
  --ftr-primary:     #7118ff;
  --ftr-gotop-r:     6px;
}

body.dark-mode {
  --ftr-bg:    #020d34;
  --ftr-color: #dcdcdc;
  --ftr-link:  #ffffff;
  --ftr-head:  #005aff;
  --ftr-line:  rgba(255,255,255,0.1);
}

/* ── Site Footer ────────────────────────────────────────────────────── */
.site-footer {
  background: var(--ftr-bg);
  color: var(--ftr-color);
  font-size: var(--ftr-font-size);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.site-footer p {
  margin-bottom: 0;
  opacity: 1;
}

.site-footer a {
  color: var(--ftr-link);
  transition: color 0.2s ease;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ftr-hlink);
}

/* ── Footer Container ───────────────────────────────────────────────── */
.ftr-container {
  width: 100%;
  max-width: var(--ftr-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ── Footer Top (3-column grid) ─────────────────────────────────────── */
.ftr-top {
  padding: var(--ftr-top-pad) 0;
}

.ftr-top__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}

/* ── Footer Column base ─────────────────────────────────────────────── */
.ftr-col {
  display: flex;
  flex-direction: column;
}

/* ── Footer Column Heading (h2/h3) ──────────────────────────────────── */
.ftr-col__heading {
  font-family: 'Work Sans', Verdana, Geneva, sans-serif;
  font-size: var(--ftr-title-size);
  font-weight: 700;
  color: var(--ftr-head);
  margin: 0 0 25px 0;
  line-height: 1.2;
  transition: color 0.25s;
}

/* ── Column 1: Brand ────────────────────────────────────────────────── */
.ftr-brand__logo-wrap {
  margin-bottom: 20px;
  display: inline-flex;
  position: relative;
}

.ftr-brand__link {
  display: inline-flex;
  position: relative;
  line-height: 1;
}

.ftr-brand__img {
  display: block;
  width: var(--ftr-logo-w);
  max-width: var(--ftr-logo-w);
  height: auto;
  transition: opacity 0.2s ease;
}

.ftr-brand__img--dark {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

body.dark-mode .ftr-brand__img--light { opacity: 0; }
body.dark-mode .ftr-brand__img--dark  { opacity: 1; }

.ftr-brand__name {
  font-size: 22px;
  font-weight: 700;
  color: var(--ftr-color);
  line-height: 1.2;
  transition: color 0.25s;
}

.ftr-brand__desc {
  font-size: var(--ftr-font-size);
  color: var(--ftr-color);
  line-height: 1.65;
  margin: 0 0 16px 0;
  transition: color 0.25s;
}

/* ── Social Icons ───────────────────────────────────────────────────── */
.ftr-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ftr-social-gap);
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

/* Demo/placeholder social icons: shown when no URLs are configured */
.ftr-social--demo {
  opacity: .4;
  pointer-events: none;
}

.ftr-social li {
  list-style: none;
}

.ftr-social li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ftr-social-size);
  height: var(--ftr-social-size);
  border-radius: 8px;
  font-size: var(--ftr-social-icon);
  background: #444444;
  color: #ffffff;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.ftr-social li a:hover {
  filter: brightness(1.18);
  transform: translateY(-2px);
  color: #ffffff;
}

/* Platform brand colors — specificity (0,2,2) beats base (0,1,2) */
.ftr-social li.ftr-social__facebook a  { background: #1877f2; }
/* X on dark bg: add subtle inset border so the circle is visible */
.ftr-social li.ftr-social__x a         {
  background: #14171a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
/* Instagram official gradient */
.ftr-social li.ftr-social__instagram a {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.ftr-social li.ftr-social__pinterest a { background: #e60023; }
.ftr-social li.ftr-social__youtube a   { background: #ff0000; }
.ftr-social li.ftr-social__spotify a   { background: #1db954; }
/* TikTok: near-black + subtle teal ring */
.ftr-social li.ftr-social__tiktok a    {
  background: #010101;
  box-shadow: inset 0 0 0 1px rgba(105,201,208,0.4);
}
.ftr-social li.ftr-social__linkedin a  { background: #0a66c2; }
.ftr-social li.ftr-social__telegram a  { background: #0088cc; }
.ftr-social li.ftr-social__twitter a   { background: #1da1f2; }
.ftr-social li.ftr-social__rss a       { background: #f26522; }

/* Icon size adjustments — source: stylecfa9.css line 8289-8300 */
.ftr-social li a .jli-x,
.ftr-social li a .jli-youtube,
.ftr-social li a .jli-mail      { font-size: 80%; }
.ftr-social li a .jli-flickr,
.ftr-social li a .jli-twitter,
.ftr-social li a .jli-soundcloud { font-size: 70%; }
.ftr-social li a .jli-telegram,
.ftr-social li a .jli-linkedin,
.ftr-social li a .jli-rss        { font-size: 90%; }

/* ── Column 2: Menu (2-column grid) ────────────────────────────────── */
.ftr-menu__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.ftr-menu__list li {
  list-style: none;
}

.ftr-menu__list li a {
  display: block;
  padding: 6px 0;
  font-size: var(--ftr-font-size);
  color: var(--ftr-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

.ftr-menu__list li a:hover {
  color: var(--ftr-hlink);
}

/* ── Column 3: Newsletter ───────────────────────────────────────────── */
.ftr-newsletter__desc {
  font-size: var(--ftr-font-size);
  color: var(--ftr-color);
  margin: 0 0 20px 0;
  line-height: 1.65;
  transition: color 0.25s;
}

/* Native form layout — mirrors .jl-c7in style */
.ftr-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.ftr-newsletter__row {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  overflow: hidden;
}

body:not(.dark-mode) .ftr-newsletter__row {
  border-color: rgba(0, 0, 0, 0.18);
}

.ftr-newsletter__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 1rem;
  height: 48px;
  font-size: 14px;
  color: var(--ftr-color);
}

.ftr-newsletter__input::placeholder {
  color: var(--ftr-color);
  opacity: 0.6;
}

.ftr-newsletter__submit {
  flex-shrink: 0;
  height: 48px;
  padding: 0 20px;
  background: var(--ftr-primary);
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Work Sans', Verdana, Geneva, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s;
}

.ftr-newsletter__submit:hover {
  background-color: #5a0dd4;
}

.ftr-newsletter__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--ftr-color);
  cursor: pointer;
  line-height: 1.4;
  transition: color 0.25s;
}

.ftr-newsletter__consent input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 15px;
  height: 15px;
  accent-color: var(--ftr-primary);
  cursor: pointer;
}

/* Success message */
.ftr-newsletter__success {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(41, 163, 102, 0.1);
  border: 1px solid rgba(41, 163, 102, 0.3);
  border-radius: 5px;
  color: #29a366;
  font-size: 14px;
}

/* Error message */
.ftr-newsletter__error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(221, 60, 87, 0.1);
  border: 1px solid rgba(221, 60, 87, 0.3);
  border-radius: 5px;
  color: #dd3c57;
  font-size: 14px;
}

/* Shortcode/plugin wrapper */
.ftr-newsletter__shortcode { width: 100%; }

/* ── Footer Bottom ───────────────────────────────────────────────────── */
.ftr-bottom {
  border-top: 1px solid var(--ftr-line);
}

.ftr-bottom__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: var(--ftr-bottom-pad) 0;
}

/* ── Copyright text ─────────────────────────────────────────────────── */
.ftr-copyright {
  font-size: var(--ftr-copyright);
  font-family: 'Work Sans', Verdana, Geneva, sans-serif;
  color: var(--ftr-color);
  line-height: 1.2;
  margin: 0;
  transition: color 0.25s;
}

.ftr-copyright a {
  color: var(--ftr-link);
}

.ftr-copyright a:hover {
  color: var(--ftr-hlink);
}

/* ── Bottom inline menu ─────────────────────────────────────────────── */
.ftr-bottom-menu {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ftr-bottom-menu li {
  list-style: none;
  display: flex;
  line-height: 1.2;
}

.ftr-bottom-menu li a {
  font-size: var(--ftr-menu-size);
  font-family: 'Work Sans', Verdana, Geneva, sans-serif;
  font-weight: 600;
  color: var(--ftr-link);
  text-transform: capitalize;
  text-decoration: none;
  letter-spacing: 0;
  line-height: 1.2;
  transition: color 0.2s;
}

.ftr-bottom-menu li a:hover {
  color: var(--ftr-hlink);
}

/* ── Go-to-Top Button ───────────────────────────────────────────────── */
/* Source: #go-top — fixed bottom:20px right:20px 35×35px bg:#ebebeb
   border-radius:6px font-size:6px hover bg:#7118ff color:#fff
   Uses opacity+visibility for smooth CSS transition (not display toggle) */
.ftr-gotop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, visibility 0.25s, transform 0.25s ease;
  pointer-events: none;
}

.ftr-gotop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.ftr-gotop__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  background: #ebebeb;
  color: #000000;
  border-radius: var(--ftr-gotop-r);
  text-decoration: none;
  font-size: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ftr-gotop__link i {
  font-weight: bold;
}

.ftr-gotop__link:hover {
  background: var(--ftr-primary);
  color: #ffffff;
  text-decoration: none;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ftr-top { padding: 40px 0; }
  .ftr-top__grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  /* Brand spans full width on tablet */
  .ftr-col--brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .ftr-top { padding: 40px 0; }
  .ftr-top__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ftr-col--brand { grid-column: auto; }

  .ftr-bottom__inner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .ftr-bottom-menu {
    justify-content: center;
  }

  .ftr-newsletter__row {
    flex-direction: column;
    border-radius: 5px;
    overflow: visible;
    border: none;
    gap: 10px;
  }

  .ftr-newsletter__input {
    display: block;
    flex: none;
    width: 100%;
    height: 50px;
    min-height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    padding: 0 1rem;
    font-size: 15px;
    box-sizing: border-box;
  }

  /* Light mode: use standard border */
  body:not(.dark-mode) .ftr-newsletter__input {
    border-color: rgba(0, 0, 0, 0.2);
  }

  .ftr-newsletter__submit {
    display: block;
    width: 100%;
    height: 50px;
    font-size: 15px;
    border-radius: 5px;
  }
}