/* ==========================================================================
   Footer — brand-led dark "stamp"
   ========================================================================== */

.site-footer {
  background-color: var(--jl-ink);
  color: rgba(243, 233, 219, .72);
  padding-top: 64px;
  padding-bottom: 0;
}
/* Mirror Storefront's inline `.site-footer a:not(.button):not(.components-button)`
   (0,3,1) so our colour matches its specificity and wins on source order. */
.site-footer a:not(.button):not(.components-button),
.storefront-handheld-footer-bar a { color: var(--jl-cream); }
.site-footer a:not(.button):not(.components-button):hover { color: var(--jl-brass); }
.storefront-handheld-footer-bar { background-color: var(--jl-ink); }

/* Two-column top: brand + newsletter */
.jl-footer-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: start;
}
.jl-footer-logo { display: flex; align-items: center; gap: 11px; }
.jl-footer-logo span {
  font-family: var(--jl-serif);
  font-weight: 600;
  font-size: 28px;
  color: var(--jl-cream);
}
.jl-footer-tagline {
  max-width: 44ch;
  margin: 20px 0 22px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(243, 233, 219, .6);
}
.jl-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jl-cream);
  border: 1px solid rgba(181, 144, 77, .5);
  border-radius: var(--jl-r-pill);
  padding: 8px 15px;
}
/* Socials row — round bordered icon buttons + e-mail address, under the brand */
.jl-footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.site-footer .jl-footer-social:not(.button):not(.components-button) {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--jl-r-pill);
  border: 1px solid rgba(243, 233, 219, .18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--jl-cream);
  transition: border-color .2s ease, color .2s ease;
}
.site-footer .jl-footer-social:not(.button):not(.components-button):hover {
  border-color: var(--jl-brass);
  color: var(--jl-brass);
}
.site-footer .jl-footer-email:not(.button):not(.components-button) {
  font-size: 13px;
  color: rgba(243, 233, 219, .62);
}
.site-footer .jl-footer-email:not(.button):not(.components-button):hover { color: var(--jl-brass); }

/* Scoped under .site-footer to out-specify Storefront's Customizer rule
   `.site-footer h1…h6 { color }` (0,1,1) — our heading is an <h3>. */
.site-footer .jl-footer-heading {
  font-family: var(--jl-serif);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.05;
  color: var(--jl-cream);
  margin: 4px 0 22px;
}
.jl-footer-heading em { color: var(--jl-brass); font-style: italic; }

/* Newsletter — native MailPoet form widget (form id 1) restyled to match the
   theme's previous newsletter look: translucent pill input + brass button on
   the dark band, laid out inline. MailPoet enforces its own input/button styles
   via inline style attrs + #mailpoet_form_1 <style>, so these need !important
   (same sanctioned exception as the AWS search button). */
.jl-footer-news .footer-widgets { margin: 0; padding: 0; border: 0; width: 100%; }
.jl-footer-news .mailpoet_form { max-width: 440px; }

/* inline layout: email field + button on one row, messages wrap below */
.jl-footer-news form.mailpoet_form_form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 !important; /* drop MailPoet's #mailpoet_form_1 form padding: 20px */
  /* top-align: the email paragraph is taller (holds a hidden per-field error
     span), so centering would drop the button below the input. Both fields are
     50px, so aligning tops lines them up exactly. */
  align-items: flex-start;
}
.jl-footer-news form.mailpoet_form_form .mailpoet_paragraph { flex: 1 1 200px; margin: 0; }
.jl-footer-news form.mailpoet_form_form .mailpoet_paragraph.last { flex: 0 0 auto; }
.jl-footer-news .mailpoet_message { flex: 1 0 100%; margin: 6px 0 0; color: rgba(243, 233, 219, .7); }

.jl-footer-news .mailpoet_form input.mailpoet_text {
  width: 100% !important;
  height: 50px !important;
  box-sizing: border-box !important;
  background: rgba(243, 233, 219, .06) !important;
  border: 1px solid rgba(243, 233, 219, .22) !important;
  border-radius: var(--jl-r-pill) !important;
  padding: 0 18px !important;
  color: var(--jl-cream) !important;
  font: 400 14px var(--jl-sans) !important;
}
.jl-footer-news .mailpoet_form input.mailpoet_text::placeholder { color: rgba(243, 233, 219, .5) !important; }
.jl-footer-news .mailpoet_form input.mailpoet_submit {
  width: auto !important;
  height: 50px !important;
  box-sizing: border-box !important;
  background: var(--jl-brass) !important;
  color: var(--jl-ink) !important;
  border: none !important;
  border-radius: var(--jl-r-pill) !important;
  padding: 0 26px !important;
  font: 600 13px var(--jl-sans) !important;
  letter-spacing: .04em !important;
  box-shadow: none; /* override buttons.css bordeaux drop-shadow on input[submit] */
  cursor: pointer;
}
.jl-footer-news .mailpoet_form input.mailpoet_submit:hover { background: var(--jl-brass-light) !important; }

/* Gold divider — gradient hairline centred on the sparkle */
.jl-footer-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 30px 0 24px;
}
.jl-footer-divider::before,
.jl-footer-divider::after {
  content: "";
  flex: 0 0 auto;
  height: 1px;
  width: 84px;
}
.jl-footer-divider::before { background: linear-gradient(90deg, transparent, rgba(181, 144, 77, .6)); }
.jl-footer-divider::after  { background: linear-gradient(90deg, rgba(181, 144, 77, .6), transparent); }

/* Legal / utility links row (FAQ · Contact · CGV) */
.jl-footer-links { text-align: center; padding: 2px 0 26px; }
.jl-footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jl-footer-nav li { margin: 0; }
/* :not() pattern mirrors the inline rule so this muted colour out-specifies it. */
.site-footer .jl-footer-nav a:not(.button):not(.components-button) {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(243, 233, 219, .6);
}
.site-footer .jl-footer-nav a:not(.button):not(.components-button):hover { color: var(--jl-brass); }

/* Bottom credit bar */
.site-footer .site-info {
  margin: 0;
  padding: 0 0 30px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .05em;
  color: rgba(243, 233, 219, .55);
  border: 0;
}

/* Mobile (JulilovaFooterMobile.dc) — single column, led by the newsletter then
   the brand, with a stacked form and stacked legal links. */
@media (max-width: 768px) {
  .site-footer { padding-top: 48px; }

  .jl-footer-top { grid-template-columns: 1fr; gap: 40px; }
  .jl-footer-news { order: 1; }
  .jl-footer-brand { order: 2; }
  .jl-footer-heading { font-size: 32px; }

  /* Stack the newsletter field + button full-width. */
  .jl-footer-news form.mailpoet_form_form { flex-direction: column; }
  .jl-footer-news form.mailpoet_form_form .mailpoet_paragraph,
  .jl-footer-news form.mailpoet_form_form .mailpoet_paragraph.last { flex: 1 1 auto; width: 100%; }
  .jl-footer-news .mailpoet_form input.mailpoet_submit { width: 100% !important; }

  /* Drop the redundant pill + e-mail text (the mail icon covers it). */
  .jl-pill,
  .site-footer .jl-footer-email:not(.button):not(.components-button) { display: none; }

  /* Stack the legal links, left-aligned. */
  .jl-footer-links { text-align: left; }
  .jl-footer-nav { flex-direction: column; align-items: flex-start; gap: 14px; }
}