/*
 * Gameify Footer · sidfoten
 * ────────────────────────────────────────────────────────────────────────────
 * Bygger skissen "Gameify Startsida" (dc-projektet), sidfoten längst ned.
 * Tre band, åtskilda av 1px-linjer:
 *
 *   1. Nyhetsbrev   rubrik + text till vänster, formulär till höger
 *   2. Länkkolumner PRODUKTER · MERKER · BUTIKK · HJELP · GAMEIFY
 *   3. Bottenrad    logotyp + företagsuppgifter · sociala, juridik, språk
 *
 * ── SIDFOTEN ÄR MÖRK I BÅDA FÄRGLÄGENA, OCH DET FINNS EN FÄLLA ──────────────
 * ACSS deklarerar om hela sin palett på .footer (uploads/automatic-css/
 * automatic-variables.css rad 2), så ACSS-variabler är låsta till mörka lägets
 * värden här inne. Temats EGNA tokens (--bg-sunken, --bg-page, --ink …) är
 * däremot deklarerade på :root och ÄRVER rakt in — de vänder med färgläget.
 *
 * Det gick fel en gång: sidfotens yta sattes på var(--bg-sunken), som är
 * #0e0e0e i mörkt läge men #E5E8E1 i ljust. Sidfoten blev ett nästan vitt band.
 *
 * REGELN: inne i .footer duger BARA en ACSS-variabel (pinnad, kan inte vända)
 * eller en literal. En temaToken ser rätt ut i mörkt läge och går sönder i
 * ljust, utan att något varnar. Literalerna nedan är alltså medvetna.
 */


/* ═══════════════════════════════════════════════════════════════════════════
   0. YTAN
   --footer-bg deklareras på .footer och inte på :root, just för att
   light-mode.css inte ska kunna nå den. Bricks bakgrundsinställning på globala
   klassen `footer` pekar på den, så färgen är fortfarande ett enda ställe att
   ändra och syns i byggaren.
   ═══════════════════════════════════════════════════════════════════════════ */

.footer {
  --footer-bg:   #0d0d0d;
  --footer-line: rgba(242, 242, 242, .08);

  padding: 0;                       /* banden bär sin egen padding */
  background-color: var(--footer-bg);
  border-top: 1px solid var(--footer-line);
}

/* Containern ska inte begränsa bredden — banden är fullbredd och centrerar sitt
   INNEHÅLL var för sig, så linjerna mellan dem går kant till kant. */
.footer > .brxe-container {
  width: 100%;
  max-width: none;
  padding: 0;
}

/* Gemensamt innermått för alla tre banden. 1440px matchar skissen och sidans
   övriga innehållsbredd; 48px är skissens sidopadding. */
.footer .footer__newsletter,
.footer .footer__links,
.footer .footer__bottom {
  width: 100%;
  max-width: calc(1440px + 96px);
  margin-inline: auto;
  padding-inline: 48px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   1. BAND 1 · NYHETSBREVET
   Skissen delar raden i två: rubrik + brödtext till vänster, formulär till
   höger, lodrätt centrerade mot varandra.

   Komponenten [gameify_newsletter] renderar allt i EN kolumn (rubrik, text,
   formulär, samtyckesrad). Den staplingen görs om till ett tvåkolumnsrutnät
   här i stället för att komponenten skrivs om — samma markup används av
   nyhetsbrevet var det än placeras, och det är bara i sidfoten det ska ligga
   som en rad.
   ═══════════════════════════════════════════════════════════════════════════ */

.footer .footer__newsletter {
  padding-block: 44px;
  border-bottom: 1px solid var(--footer-line);
}

.footer .gnl {
  /* Baskomponenten har max-width: 60ch för läsbar radlängd när nyhetsbrevet
     står som en ensam spalt. Här är den en rad tvärs över sidfoten, och taket
     klämde ihop rutnätet till 380px + 166px. Radlängden hålls i stället av
     vänsterkolumnens egen bredd. */
  max-width: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 24px 64px;
  align-items: center;
}

/* KOMPONENTENS FAKTISKA STRUKTUR — viktig, för den är inte platt:
     .gnl
       .gnl__intro
         h2.gnl__heading
         p.gnl__text
       form.gnl__form
         .gnl__hp      (honeypot)
         .gnl__row     ← label + input + knapp
         p.gnl__consent
         p.gnl__status

   Samtyckesraden ligger alltså INUTI formuläret, och input och knapp i
   .gnl__row. Rutnätet har därför bara TVÅ barn: introt och formuläret.

   .gnl__intro lades till i komponenten för den här layoutens skull. Rubrik och
   text är syskon, och varken grid eller flex kan hålla ihop två syskon som ett
   block — utan wrappern hamnade de i var sin rutnätsrad och drevs 32px isär av
   formulärets höjd, trots att radgapet var noll. */
.footer .gnl__intro { grid-column: 1; }

.footer .gnl__heading {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.2;
}

.footer .gnl__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(242, 242, 242, .55);
}

.footer .gnl__form {
  grid-column: 2;
  margin: 0;
}

/* Under brytpunkten lägger auto-fit kolumnerna på varandra, och då måste
   placeringen släppa — annars står allt kvar i en tom andra kolumn. */
@media (max-width: 860px) {
  .footer .gnl__intro,
  .footer .gnl__form { grid-column: 1; }
}

/* Raden med fält och knapp. */
.footer .gnl__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0;
}

.footer .gnl__consent {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(242, 242, 242, .4);
}

.footer .gnl__input {
  flex: 1 1 220px;
  min-width: 0;
  height: 48px;
  padding: 0 16px;
  border-radius: 4px;
  background: #161616;
  border: 1px solid rgba(242, 242, 242, .14);
  color: #f2f2f2;
  font-size: 14.5px;
}
.footer .gnl__input::placeholder { color: rgba(242, 242, 242, .38); }

/* Knappen bär ACSS btn--primary från komponenten: brand-grönt som FYLLNING med
   mörkt bläck, och typografin från designsystemet. Bara måtten sätts här, så
   den linjerar med fältet bredvid. */
.footer .gnl__btn {
  height: 48px;
  padding: 0 22px;
  border-radius: 3px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.footer .gnl__link { color: rgba(242, 242, 242, .6); text-decoration: underline; text-underline-offset: 3px; }
.footer .gnl__link:hover { color: var(--green); }


/* ═══════════════════════════════════════════════════════════════════════════
   2. BAND 2 · LÄNKKOLUMNERNA
   Fem spalter som ligger på rad så länge var och en får minst 136px, annars
   radbryter de av sig själva. auto-fit + minmax klarar det utan brytpunkter.

   min(100%, 136px) och inte bara 136px: på en smal skärm är 136px bredare än
   spalten får vara när sidopaddingen räknats bort, och minmax hade då tvingat
   fram vågrätt spill.
   ═══════════════════════════════════════════════════════════════════════════ */

.footer .footer__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 136px), 1fr));
  gap: 40px 24px;
  padding-block: 56px 48px;
  align-items: start;
}

/* Kolumnrubrikerna är Bricks heading-element (h2) och behåller sin semantik.
   INGEN font-family sätts här: rubriktypsnittet ägs av designsystemet och ärvs.
   Att upprepa det vore att hårdkoda något ramverket redan bestämmer, och det
   skulle sluta följa med om typografin byts. Bara storlek, vikt och spärr. */
.footer .footer__menu-heading {
  margin: 0 0 16px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(242, 242, 242, .42);
}

/* Listorna renderas av [gameify_header_menu], samma komponent som sidhuvudets
   megameny. I panelen är raderna 14,5px med en hover-platta; här vill skissen
   ha 14px, 10px mellan raderna och ingen platta — en sidfot ska läsa som en
   lista, inte som en meny man pekar i. */
.footer .ghdrmenu__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.footer .ghdrmenu__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--grid-gap);
  padding: 0;
  border-radius: 0;

  font-weight: 500;
  line-height: 1.35;
  color: rgba(242, 242, 242, .68);
}

.footer .ghdrmenu__item:hover,
.footer .ghdrmenu__item:focus-visible {
  background: none;
  color: var(--green);
}

/* Antalet står KVAR i sidfoten i den här skissen. Det sitter tätt intill namnet
   på baslinjen, inte högerställt som i megamenyn — därför flex-start ovan. */
.footer .ghdrmenu__count {
  font-size: 10px;
  font-weight: 700;
  color: rgba(242, 242, 242, .32);
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. BAND 3 · BOTTENRADEN
   ═══════════════════════════════════════════════════════════════════════════ */

.footer .footer__bottom {
  display: flex;
  /* Bricks .brxe-block har flex-direction: column som default — utan den här
     stod logotypraden och högergruppen på var sin rad, centrerade, och
     space-between fick ingenting att fördela. */
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
  padding-block: 22px;
  border-top: 1px solid var(--footer-line);
}

.footer .footer__bottom-left,
.footer .footer__bottom-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: auto;
}
.footer .footer__bottom-left  { gap: 22px; }
.footer .footer__bottom-right { gap: 20px; }

.footer .footer__bottom-left .bricks-site-logo {
  height: 30px;
  width: auto;
}

/* Företagsuppgifterna på EN rad: "Gameify AS · Org.nr … · Freserveien 33 …".
   Shortcoden körs med layout="inline", mu-pluginens egen radvariant. */
.footer .footer__legal,
.footer .footer__legal p {
  margin: 0;
  font-size: var(--text-s);
  line-height: 1.5;
  color: rgba(242, 242, 242, .42);
}
.footer .footer__legal a { color: rgba(242, 242, 242, .68); }
.footer .footer__legal a:hover { color: var(--green); }

.footer .footer__fineprint {
  font-size: var(--text-s);
  color: rgba(242, 242, 242, .5);
}
.footer .footer__fineprint:hover { color: var(--green); }

/* Sociala ikoner. Bara Instagram är publicerad — YouTube och Facebook ligger
   kvar dolda i mallen tills kontona finns.

   Ikonens vilofärg sätts på elementet i Bricks (rgba(242,242,242,.6)); hover
   hör hemma här. Den låg tidigare på var(--primary), alltså brand-grönt som
   FYLLNING, och blev en grön platta i bottenraden i stället för ett dämpat
   tecken. */
.footer .footer__social-container { display: flex; align-items: center; gap: 14px; }
.footer .footer__icon svg { width: 18px; height: 18px; }
.footer .footer__icon:hover svg,
.footer .footer__icon:hover svg * { fill: var(--green); }


/* ── Språkväljaren i bottenraden ────────────────────────────────────────────
   [gameify_lang_switcher variant="footer"] — samma komponent som sidhuvudets,
   utan knapp och utan utfällning. Den bär med sig TranslatePress översatta
   slugs, vilket tre handskrivna länkar i Bricks inte hade gjort: /en/nyheter/
   är i själva verket /en/blog/, och en naiv prefixväxling ger en 301 per länk.

   Skissen visar NO / SV / EN på en rad med avdelare emellan. Komponenten
   renderar både språknamn och kod; här visas koden och namnet göms visuellt —
   inte med display:none, för namnet är länkens tillgängliga namn. */

.footer .gflang--footer { display: block; width: auto; }

.footer .gflang--footer .gflang__list {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  list-style: none;
}

/* Avdelaren "/" mellan språken. Ett pseudoelement i stället för tecken i
   markup: separatorn är dekor och ska inte läsas upp eller kopieras med. */
.footer .gflang--footer .gflang__list > li { display: flex; align-items: center; }
.footer .gflang--footer .gflang__list > li + li::before {
  content: "/";
  margin-right: 6px;
  color: rgba(242, 242, 242, .2);
  font-size: 11px;
}

.footer .gflang--footer .gflang__item {
  display: block;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  color: rgba(242, 242, 242, .5);
  background: none;
}
.footer .gflang--footer .gflang__item:hover { background: none; color: #f2f2f2; }
.footer .gflang--footer .gflang__item.is-active { color: var(--green); }

/* Koden visas, flaggan göms. Språknamnet KLIPPS i stället för att döljas: det
   är det enda som ger länken ett tillgängligt namn, och "NO" ensamt säger inte
   vilket språk det är för en skärmläsare. */
.footer .gflang--footer .gflang__itemcode { display: inline; }
.footer .gflang--footer .gflang__flag { display: none; }
.footer .gflang--footer .gflang__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Koden renderas i alla varianter men hör bara hemma i sidfoten. */
.gflang__itemcode { display: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   4. SMALA SKÄRMAR
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .footer .footer__newsletter,
  .footer .footer__links,
  .footer .footer__bottom { padding-inline: 24px; }

  .footer .footer__links  { padding-block: 40px 32px; }
  .footer .footer__bottom { align-items: flex-start; }

  .footer .footer__bottom-left,
  .footer .footer__bottom-right { gap: 14px; }
}