/* Sidefod til appen — samme som på figurio.dk (Shopify-temaet):
   nyhedsbrev, sidefod med logo/kolonner og bundlinje.

   Værdierne er læst fra butikkens egen CSS (compiled_assets/styles.css: .fbc og
   .ff, samt .utilities til bundlinjen), så de to sider ser ens ud. Ændrer I
   footeren i temaet, skal den her følge med.

   ALT ligger under #site-footer. Appens egne regler på h2, input, button og a
   kunne ellers ændre udseendet (og omvendt), fordi de har lavere specificitet end
   klasserne herunder. Markup og tekster står i footer.js. */

#site-footer {
  /* Butikkens sider er hvide bag nyhedsbrevets lysegrønne kort. Appens baggrund
     er varm off-white, og så ville kortet forsvinde — derfor et hvidt felt. */
  background: #fff;
  border-top: 1px solid #E7E5E0;
  margin-top: 48px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #12190F;
}
#site-footer *, #site-footer *::before, #site-footer *::after { box-sizing: border-box; }
#site-footer h2, #site-footer h4, #site-footer input, #site-footer button, #site-footer summary { font-family: inherit; }

/* --- Nyhedsbrev (.fbc) ---------------------------------------------------- */
#site-footer .fbc { padding: 64px 24px 40px; }
#site-footer .fbc-wrap { max-width: 1100px; margin: 0 auto; }
#site-footer .fbc-signup {
  background: #F6F5F1; border-radius: 8px; padding: 88px 24px;
  text-align: center; scroll-margin-top: 110px;
}
#site-footer .fbc-signup h2 {
  margin: 0 auto 36px; max-width: 760px;
  font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.15; font-weight: 700;
  letter-spacing: -0.02em; text-wrap: balance; color: #12190F;
}
#site-footer .fbc-form { margin: 0; }
#site-footer .fbc-row { display: flex; justify-content: center; gap: 12px; max-width: 640px; margin: 0 auto; }
#site-footer .fbc-input {
  flex: 1 1 0%; min-width: 0; height: 56px; padding: 0 20px;
  border: 1px solid #DAE1D3; border-radius: 8px; background: #fff; color: #12190F;
  font: inherit; font-size: 1rem;
}
#site-footer .fbc-input:focus { outline: 2px solid #3E5E3A; outline-offset: 2px; }
#site-footer .fbc-submit {
  height: 56px; padding: 0 30px; border: 0; border-radius: 999px;
  background: #3E5E3A; color: #fff;
  font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; white-space: nowrap;
}
#site-footer .fbc-submit:hover { background: #345031; }
#site-footer .fbc-consent { margin: 16px auto 0; max-width: 520px; font-size: 0.78rem; line-height: 1.5; color: #63715A; }
@media (max-width: 600px) {
  #site-footer .fbc { padding: 40px 16px 24px; }
  #site-footer .fbc-signup { padding: 56px 16px; }
  #site-footer .fbc-row { flex-direction: column; }
  /* I en kolonne overstyrer flex-basis højden (feltet klappede sammen), så
     nulstil den og lad feltet fylde bredden. */
  #site-footer .fbc-input { flex: none; width: 100%; }
  #site-footer .fbc-submit { width: 100%; }
}

/* --- Sidefod (.ff) -------------------------------------------------------- */
#site-footer .ff { background: #fff; padding: 80px 24px 72px; border-top: 1px solid #DAE1D3; }
#site-footer .ff-wrap { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; gap: 56px; }
#site-footer .ff-brand img { display: block; height: 104px; width: auto; }
#site-footer .ff-social { display: flex; gap: 20px; margin-top: 28px; }
#site-footer .ff-social a { color: #12190F; display: flex; }
#site-footer .ff-social a:hover { color: #3E5E3A; }
#site-footer .ff-cols { display: flex; gap: 72px; }
#site-footer .ff-col h4 { margin: 0 0 22px; font-size: 0.95rem; font-weight: 500; color: #12190F; }
#site-footer .ff-col a { display: block; margin: 0 0 14px; font-size: 0.88rem; color: #63715A; text-decoration: none; }
#site-footer .ff-col a:hover { color: #12190F; }
#site-footer .ff-company { margin: 0; font-size: 0.88rem; line-height: 1.75; color: #63715A; }
@media (max-width: 900px) {
  #site-footer .ff { padding: 56px 20px 48px; }
  #site-footer .ff-wrap { flex-direction: column; }
  #site-footer .ff-cols { flex-direction: column; gap: 36px; }
}

/* --- Bundlinje (.fu): copyright + "Vilkår og politikker" ------------------- */
#site-footer .fu { background: #fff; padding: 0 24px; }
#site-footer .fu-inner {
  max-width: 1200px; margin: 0 auto; padding: 20px 0 48px;
  border-top: 1px solid #DFDFDF;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  font-size: 0.75rem; color: rgba(0, 0, 0, 0.6);
}
#site-footer .fu-inner a { color: rgba(0, 0, 0, 0.6); text-decoration: none; }
#site-footer .fu-copy a:hover { color: rgba(0, 0, 0, 0.7); }
#site-footer .fu-policies { position: relative; }
#site-footer .fu-policies summary {
  list-style: none; cursor: pointer; font-size: 0.75rem; color: rgba(0, 0, 0, 0.6);
}
#site-footer .fu-policies summary::-webkit-details-marker { display: none; }
#site-footer .fu-policies summary:hover { color: rgba(0, 0, 0, 0.7); }
#site-footer .fu-list {
  position: absolute; bottom: calc(100% + 1rem); left: 50%; transform: translateX(-50%);
  z-index: 20; min-width: 240px; margin: 0; padding: 8px; list-style: none;
  background: #fff; border-radius: 14px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  white-space: nowrap; text-align: left;
}
#site-footer .fu-list li { border-radius: 6px; }
#site-footer .fu-list li:hover, #site-footer .fu-list li:focus-within { background: rgba(0, 0, 0, 0.15); }
#site-footer .fu-list a { display: inline-block; width: 100%; padding: 8px; font-size: 0.75rem; color: #000; }
@media (min-width: 750px) {
  #site-footer .fu-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; text-align: left; }
  #site-footer .fu-policies { justify-self: end; text-align: right; }
  #site-footer .fu-list { left: auto; right: 0; transform: none; }
}