/* =========================================================================
   TZ_FOOTER — Travel Zmarts globala sidfot
   Pass 89 (2026-09-27), ny struktur i pass 105 (2026-09-29):
   "Förslag 1 – Balanserad och ljus".

   Markup: inc/tz-footer.php, utskriven via [tz_footer] i sidfotslayout
   392560, som samtliga fjorton Theme Builder-mallar pekar på.

   FÄRGEN ÄR ETT ÄGARBESLUT: #DBE6DA — samma värde som headerns topprad
   (pass 92). Pass 89:s mörkare remsa (#cedcca) är borttagen: bottenraden
   ligger i samma yta, avskild av en tunn linje. Ingen ny grön.
   (Pass 136, 2026-10-08, testade #FCF9EF på hela ytan; återställt till
   #DBE6DA i pass 139 samma dag efter ägarens bedömning.)

   PASS 139 (2026-10-08): produktionskrediten "Produktion Zmart Webb &
   Reklam" är inte längre en egen centrerad rad under bottenraden utan den
   sista uppgiften i samma informationsrad, direkt efter Swish (markup i
   inc/tz-footer.php). Den ärver därmed radens 13 px / 72 %. Bottenradens
   nedre padding tog över de 18 px som den borttagna raden gav under
   sista textraden, så sidfotens underkant sitter som förut.

   Allt annat är hämtat ur headerns formspråk (css/tz-header.css) så att
   sidfoten läser som samma sajt och inte som ett nytt designsystem:

     text            #1a1a1a          --tzmeny-text
     dämpad text     rgba(26,26,26,.72)   ≈ 6:1 mot bakgrunden
     grön accent     #415321          --tzmeny-gron
     guld / CTA      #8c6a38 → #75592f   vit text ≈ 5:1
     rubriker        Poppins 600      (endast 600 och 700 är självhostade)
     brödtext        Roboto
     rörelse         cubic-bezier(.22, 1, .36, 1)
     satsyta         1400px + clamp(20px, 4vw, 48px)

   LAYOUT
   Markupen står i mobilens läsordning (varumärke, CTA, kontakt,
   resegaranti, länkar, juridik). Desktop och tablet placerar samma celler
   med grid-template-areas, så inget block finns två gånger och
   tabbordningen följer den ordning en mobilanvändare läser i.

   VARFÖR DIVIS OMSLAG NOLLAS
   Kodmodulen ligger i en Divi-sektion → rad → kolumn. style.css tvingar
   varje rad till `width: 90% !important; max-width: 2400px !important`
   (rad 906–914). Sidfoten ska däremot gå fullbredd och hålla sin egen
   satsyta inuti. Selektorerna nedan lägger till `.et-l--footer`, vilket
   ger en klass mer än style.css-regeln och därmed vinner utan att något
   annat på sajten påverkas.
   ========================================================================= */

:root {
  --tzfot-bg:        #dbe6da;
  --tzfot-text:      #1a1a1a;
  --tzfot-svag:      rgba(26, 26, 26, 0.72);
  --tzfot-linje:     rgba(26, 26, 26, 0.12);
  --tzfot-gron:      #415321;
  --tzfot-guld:      #8c6a38;
  --tzfot-guld-hov:  #75592f;
  --tzfot-maxbredd:  1400px;
  --tzfot-sidpad:    clamp(20px, 4vw, 48px);
  --tzfot-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --tzfot-tap:       44px;
}

/* -------------------------------------------------------------------------
   0. Nolla Divis omslag runt kodmodulen
   ---------------------------------------------------------------------- */

body #page-container .et-l--footer .et_pb_section,
body #page-container .et-l--footer .et_pb_row,
body #page-container .et-l--footer .et_pb_column,
body #page-container .et-l--footer .et_pb_module,
body #page-container .et-l--footer .et_pb_code_inner {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

/* Divis globala listregler (disc + padding) gäller `.et-l--footer ul`.
   Sidfotens listor är navigation, inte brödtext. */
body #page-container .et-l--footer .tzfot ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: inherit !important;
}

/* -------------------------------------------------------------------------
   1. Skalet
   ---------------------------------------------------------------------- */

.tzfot {
  background: var(--tzfot-bg);
  font-family: 'Roboto', Arial, sans-serif;
  color: var(--tzfot-text);
  font-size: 15px;
  line-height: 1.6;
}

/* Temats style.css har `p { font-size: 1.2em !important }` (global
   typografi). Den slog igenom på sidfotens stycken — uppmätt 18 px på
   sloganen och 15,6 px i bottenraden, också i pass 89:s sidfot. En
   !important-regel kan bara slås av en annan, så styckenas storlekar
   sätts här med !important och full kedja. */
body #page-container .tzfot .tzfot__slogan       { font-size: 16px !important; line-height: 1.45; }
body #page-container .tzfot .tzfot__trygg-rubrik { font-size: 15px !important; line-height: 1.4; }
body #page-container .tzfot .tzfot__botten p     { font-size: 13px !important; line-height: 1.5; }

.tzfot__inner {
  max-width: var(--tzfot-maxbredd);
  margin-inline: auto;
  padding: clamp(40px, 4.5vw, 64px) var(--tzfot-sidpad) 0;
}

/* Desktop: fem kolumner. Förtroendekolumnen (5) staplar resegaranti,
   CTA och sociala kanaler; övriga celler spänner över alla tre raderna. */
.tzfot__rutnat {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1fr 1.25fr 1.2fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "varumarke resor om kontakt trygg"
    "varumarke resor om kontakt cta"
    "varumarke resor om kontakt sociala";
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: 18px;
  align-items: start;
  padding-bottom: clamp(32px, 3.5vw, 48px);
}

.tzfot__kol--varumarke { grid-area: varumarke; }
.tzfot__kol--cta       { grid-area: cta; }
.tzfot__kol--kontakt   { grid-area: kontakt; }
.tzfot__kol--trygg     { grid-area: trygg; }
.tzfot__kol--resor     { grid-area: resor; }
.tzfot__kol--om        { grid-area: om; }
.tzfot__kol--sociala   { grid-area: sociala; }

/* -------------------------------------------------------------------------
   2. Varumärket
   ---------------------------------------------------------------------- */

.tzfot__logo {
  display: inline-block;
  margin-bottom: 16px;
}

.tzfot__logo img {
  height: 32px;
  width: auto;
  display: block;
}

.tzfot__slogan {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
  color: var(--tzfot-gron);
  margin: 0;
}

/* -------------------------------------------------------------------------
   3. Rubriker, länkar och kontakt
   ---------------------------------------------------------------------- */

.tzfot__rubrik {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--tzfot-gron);
  margin: 0 0 12px;
  padding: 0;
}

.tzfot__lista {
  display: grid;
  gap: 2px;
}

.tzfot__lank {
  color: var(--tzfot-text);
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
  transition: color 160ms var(--tzfot-ease);
}

/* Understrykningen kommer vid hover, med avstånd så att bokstavsstaplarna
   inte skärs av. */
.tzfot__lank:hover,
.tzfot__lank:focus-visible {
  color: var(--tzfot-gron);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.tzfot a:focus-visible {
  outline: 2px solid var(--tzfot-gron);
  outline-offset: 3px;
  border-radius: 3px;
}

.tzfot__kontakt {
  font-style: normal;
  display: grid;
  gap: 6px;
}

.tzfot__rad {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  padding: 4px 0;
  color: var(--tzfot-text);
}

/* E-post- och telefonraderna är BÅDE rad och länk. `.tzfot__lank` sätter
   display: inline-block, vilket slår ut radens grid och klistrar ikonen i
   texten. Två klasser i selektorn (0,2,0) vinner över länkregeln (0,1,0). */
.tzfot__rad.tzfot__lank { display: grid; }

/* Ikonerna är hjälpmedel för skumläsning, inte dekoration. De är därför
   små, dämpade och aldrig ensamma bärare av information. */
.tzfot__ikon {
  color: var(--tzfot-gron);
  opacity: 0.8;
  margin-top: 4px;
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   4. Förtroende, CTA och sociala kanaler
   ---------------------------------------------------------------------- */

.tzfot__trygg-rubrik {
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--tzfot-text);
  margin: 0 0 4px;
  padding: 0;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
}

.tzfot__trygg-rubrik .tzfot__ikon { margin-top: 2px; }

.tzfot__trygg-lank {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 28px;
  padding: 4px 0;
  color: var(--tzfot-gron);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: gap 160ms var(--tzfot-ease), color 160ms var(--tzfot-ease);
}

.tzfot__trygg-lank .tzfot__ikon { margin-top: 0; opacity: 1; }

.tzfot__trygg-lank:hover,
.tzfot__trygg-lank:focus-visible {
  color: var(--tzfot-guld-hov);
  gap: 10px;
}

/* Guldbrun, fylld. Samma ord och mål som headerns CTA. */
.tzfot__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tzfot-tap);
  padding: 10px 22px;
  border-radius: 10px;
  background: var(--tzfot-guld);
  font-family: 'Poppins', Arial, sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  color: #ffffff;
  text-decoration: none;
  transition: background 160ms var(--tzfot-ease), gap 160ms var(--tzfot-ease);
}

.tzfot__cta .tzfot__ikon {
  color: currentColor;
  opacity: 1;
  margin-top: 0;
}

.tzfot__cta:hover,
.tzfot__cta:focus-visible {
  background: var(--tzfot-guld-hov);
  color: #ffffff;
  gap: 12px;
}

.tzfot__sociala {
  display: flex;
  gap: 8px;
}

.tzfot__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tzfot-tap);
  height: var(--tzfot-tap);
  border-radius: 50%;
  border: 1px solid rgba(65, 83, 33, 0.25);
  color: var(--tzfot-gron);
  transition: background 160ms var(--tzfot-ease), color 160ms var(--tzfot-ease);
}

.tzfot__social .tzfot__ikon { width: 18px; height: 18px; margin: 0; opacity: 1; }

.tzfot__social:hover,
.tzfot__social:focus-visible {
  background: var(--tzfot-gron);
  color: #ffffff;
}

/* -------------------------------------------------------------------------
   5. Bottenraden
   ---------------------------------------------------------------------- */

/* Pass 105B: Travel Zmarts egna uppgifter på en rad under linjen —
   företag och betalning till vänster, policysidorna till höger. Sedan
   pass 139 är produktionskrediten den sista uppgiften i samma rad; nedre
   paddingen 18 px motsvarar luften den tidigare egna raden lämnade. */
.tzfot__botten {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  border-top: 1px solid var(--tzfot-linje);
  padding: 18px 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tzfot-svag);
}

.tzfot__botten p { margin: 0; padding: 0; }

.tzfot__foretag {
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
}

/* En uppgift bryts aldrig inuti — bara mellan uppgifterna. */
.tzfot__uppgift { white-space: nowrap; }

.tzfot__uppgift + .tzfot__uppgift::before {
  content: "·";
  margin: 0 10px;
  opacity: 0.6;
}

.tzfot .tzfot__botten .tzfot__lank {
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.tzfot .tzfot__botten .tzfot__lank:hover,
.tzfot .tzfot__botten .tzfot__lank:focus-visible { color: var(--tzfot-gron); }

.tzfot__policy {
  display: flex;
  gap: 24px;
}

/* -------------------------------------------------------------------------
   6. Responsivt
   ---------------------------------------------------------------------- */

/* Tablet: tre kolumner. Varumärket, kontakten och förtroendet på första
   våningen, länkarna och sociala kanaler på den andra. */
@media (max-width: 1100px) {
  .tzfot__rutnat {
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "varumarke kontakt trygg"
      "varumarke kontakt cta"
      "resor     om      sociala";
    row-gap: 18px;
  }

  /* Luft mellan förtroendevåningen och länkvåningen. */
  .tzfot__kol--resor,
  .tzfot__kol--om,
  .tzfot__kol--sociala { margin-top: 14px; }
}

/* Mobil: en kolumn i läsordning — varumärke, CTA, kontakt, resegaranti,
   länkar, juridik. Länkkolumnerna står sida vid sida så att sidfoten inte
   blir en lång lista. */
@media (max-width: 640px) {
  .tzfot__inner { padding-top: 36px; }

  .tzfot__rutnat {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "varumarke varumarke"
      "cta       cta"
      "kontakt   kontakt"
      "trygg     trygg"
      "resor     om"
      "sociala   sociala";
    column-gap: 20px;
    row-gap: 24px;
    padding-bottom: 28px;
  }

  .tzfot__kol--resor,
  .tzfot__kol--om,
  .tzfot__kol--sociala { margin-top: 0; }

  .tzfot__logo { margin-bottom: 12px; }

  .tzfot__cta { width: 100%; }

  /* Touchytor utan att listorna sväller: 36 px rad + 2 px mellanrum. */
  .tzfot__lista .tzfot__lank,
  .tzfot__rad { padding: 7px 0; }

  .tzfot__botten {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 16px;
  }

  /* Uppgifterna bryts naturligt; på mobil utan punkter, som annars kan
     hamna först på en ny rad. */
  .tzfot__foretag { column-gap: 16px; }

  .tzfot__uppgift + .tzfot__uppgift::before { content: none; }
}