/*
 * MetalicArt — încheierea site-ului.
 *
 * Singura sursă de stil pentru footer. Culorile de bază sunt tokenurile temei — `iron`, `cream`,
 * `copper` —, aceleași pe care le cere macheta; se adaugă doar cele două tonuri pe care paleta nu
 * le are: suprafața panoului și textul secundar cald.
 *
 * Tokenurile se declară aici, nu în `style.css`: foile de secțiune sunt versionate după `mtime`,
 * iar `style.css` după antetul temei, deci o foaie care ar depinde de un token din cealaltă se
 * rupe de fiecare dată când cele două nu ajung împreună în browser.
 */

.ma-footer {
  --ma-iron: var(--wp--preset--color--iron, #0d0e0f);
  --ma-panel: #151713;
  --ma-cream: var(--wp--preset--color--cream, #f2eadc);
  --ma-muted: #b7afa3;
  --ma-copper: var(--wp--preset--color--copper, #b86f3d);
  --ma-gold: var(--metalicart-text-accent, #e1b270);
  --ma-line: rgb(225 178 112 / .22);
  --ma-hair: .75px;

  position: relative;
  box-sizing: border-box;
  padding: 0;
  color: var(--ma-cream);
  background-color: var(--ma-iron);
  font-family: var(--wp--preset--font-family--body);
}

.ma-footer *,
.ma-footer *::before,
.ma-footer *::after { box-sizing: border-box; }

/*
 * Trecerea din secțiunea de dinainte.
 *
 * O umbră foarte lungă în capul footerului, nu o linie: secțiunea de deasupra se termină pe
 * închis, iar footerul preia tonul fără o muchie vizibilă.
 */
.ma-footer::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(180deg, rgb(17 19 15 / .85), rgb(13 14 15 / 0));
  content: "";
  pointer-events: none;
}

/*
 * Ornamentul deschide footerul, deci marginea de sus este scurtă: separă de formularul de ofertă
 * fără să lase un gol între două secțiuni.
 */
.ma-footer__shell {
  position: relative;
  z-index: 1;
  width: min(100% - 40px, 1240px);
  margin-inline: auto;
  padding-block: clamp(32px, 3.4vw, 48px) 0;
}

/* ---------------------------------------------------------------------- Ornamentul */

/*
 * Linia fină cu rombul central, desenată din CSS. Rombul este un pătrat rotit, nu o imagine: la
 * mărire rămâne curat și nu mai adaugă o cerere de rețea.
 */
/*
 * Ornamentul stă pe trecerea dintre ultima secțiune și footer, nu în capul footerului: acolo
 * plutea la 48 px sub muchie. Scos din flux, el nu mută nimic din footer — conținutul pornea oricum
 * de la aceeași înălțime.
 *
 * Linia e centrată pe muchie (jumătate de pixel deasupra, jumătate dedesubt), iar rombul odată cu
 * ea. Footerul stă pe un strat peste conținutul paginii (mai jos), altfel jumătatea de sus intra sub
 * ultima secțiune.
 */
.ma-footer__ornament {
  position: absolute;
  z-index: 2;
  top: 0;
  transform: translateY(-50%);
  right: 0;
  left: 0;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  height: 1px;
  margin-block: 0;
}
.ma-footer__ornament::before,
.ma-footer__ornament::after {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ma-line) 22%, var(--ma-line) 78%, transparent);
  content: "";
}
/* Marginile negative țin rândul la 1 px: altfel rombul îl creștea la 7 și linia cobora cu 3 px sub muchie. */
.ma-footer__ornament span {
  display: block;
  width: 7px;
  height: 7px;
  margin-block: -3px;
  border: 1px solid var(--ma-gold);
  transform: rotate(45deg);
}

/* ------------------------------------------------------------------ Zona principală */

/*
 * Cele patru coloane vin din zone, nu din ordinea din cod.
 *
 * În cod, ordinea este cea de citit pe telefon: identitate, telefon și WhatsApp, portofoliu,
 * atelier, contacte. Pe desktop macheta cere altă așezare, iar `grid-template-areas` o dă fără
 * `order` — deci ce se vede și ce se aude rămân în aceeași ordine.
 */
.ma-footer__main {
  display: grid;
  gap: clamp(28px, 3.4vw, 56px);
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(36px, 4vw, 56px);
}

/*
 * Zonele se dau numai acolo unde sunt folosite.
 *
 * Scrise o dată, pentru toate lățimile, ar fi trebuit anulate pe telefon — iar selectorii care
 * le puneau erau mai puternici decât cei care le scoteau, deci coloanele se suprapuneau peste
 * logo. Fiecare interval își descrie singur așezarea; sub 620 px nu există nicio zonă, deci
 * rămâne ordinea din cod.
 */
@media (min-width: 1025px) {
  .ma-footer__main {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, .9fr);
    grid-template-areas:
      "identitate portofoliu atelier contact"
      "actiuni    portofoliu atelier contact";
    grid-template-rows: auto 1fr;
    row-gap: 18px;
  }
  .ma-footer__identity { grid-area: identitate; }
  .ma-footer__actions { grid-area: actiuni; align-self: start; }
  .ma-footer__group.is-two-column { grid-area: portofoliu; }
  .ma-footer__main > .ma-footer__group:not(.is-two-column):not(.ma-footer__group--contact) { grid-area: atelier; }
  .ma-footer__group--contact { grid-area: contact; }
}

/* ------------------------------------------------------------ Acțiunile principale */

/*
 * Telefonul și WhatsApp-ul, singurele două lucruri din subsol pe care cineva chiar le apasă.
 *
 * Nu este o zonă de conversie nouă: sunt aceleași linkuri care stăteau în lista de contacte,
 * scoase în față, cu toată suprafața apăsabilă și cu ținta cerută de deget.
 */
.ma-footer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.ma-footer__action {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  color: var(--ma-cream);
  border: 1px solid var(--ma-line);
  font-size: var(--ma-fs-md, .92rem);
  text-decoration: none;
}
.ma-footer__action .ma-footer__icon { color: var(--ma-copper); }
.ma-footer__action:hover,
.ma-footer__action:focus-visible {
  color: var(--ma-gold);
  border-color: rgb(225 178 112 / .55);
}
.ma-footer__action--phone { font-variant-numeric: tabular-nums; }

/*
 * Mărimea logoului nu se scrie aici.
 *
 * Era scrisă: 220 px, aceiași oriunde. Dar este aceeași marcă și aceeași imagine ca în antet, iar
 * antetul se strânge pe ecrane mici, deci în subsol ieșea cu 26 px mai mare pe ecran lat și cu
 * până la 94 px mai mare pe telefon. Regulile sunt acum comune, în foaia temei, lângă cele ale
 * antetului: o singură mărime, ascultătoare de același cursor din administrare.
 */
.ma-footer__logo { display: inline-block; }

/*
 * Semnătura editorială.
 *
 * Este singurul text cu greutate din footer, dar nu are voie să concureze cu titlurile paginii:
 * de aceea rămâne sub dimensiunea unui H2 și fără chenar în jur.
 */
.ma-footer__signature {
  max-width: 26ch;
  margin: 22px 0 0;
  color: var(--ma-cream);
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  font-weight: 400;
  line-height: 1.24;
}
.ma-footer__signature em {
  color: var(--ma-gold);
  font-style: italic;
}

.ma-footer__promise {
  max-width: 34ch;
  margin: 14px 0 0;
  color: var(--ma-muted);
  font-size: var(--ma-fs-md, .875rem);
  line-height: 1.65;
}

.ma-footer__location {
  display: flex;
  align-items: start;
  gap: 10px;
  margin: 18px 0 0;
  color: var(--ma-muted);
  font-size: var(--ma-fs-md, .875rem);
  line-height: 1.5;
}
.ma-footer__location .ma-footer__icon { margin-top: 2px; color: var(--ma-copper); }

/* „București, 032258” pleacă pe rândul următor împreună, nu codul singur. */
.ma-footer__locality { white-space: nowrap; }
/* Rândul de contact fără link — adresa — nu are stările unui link, dar păstrează așezarea. */
.ma-footer__contact-row--static { margin: 0; cursor: default; }

.ma-footer__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 18px;
  padding: 0;
  color: var(--ma-gold);
  font-family: var(--wp--preset--font-family--display);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}
/* Semnul acordeonului nu are ce căuta pe desktop, unde grupurile sunt mereu deschise. */
.ma-footer__heading .ma-footer__sign { display: none; }

/*
 * Pasul dintre rânduri, nu doar distanța dintre ele.
 *
 * Macheta are 30 px de la un link la următorul; aici erau 37. Diferența nu venea din `gap` — 10
 * față de 11 —, ci din rândul însuși: text de 14,7 px în loc de 13 și încă 4 px de margine
 * interioară pusă pentru linia de subliniere. Textul revine la dimensiunea din machetă, iar linia
 * coboară sub el în loc să împingă rândul.
 */
.ma-footer__links {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * `flex`, nu afișarea implicită.
 *
 * Cu linkul `inline-block`, `<li>`-ul își păstra propria cutie de linie — moștenită de la corpul
 * paginii — și rândul ieșea de 26 px în loc de 20, deși textul avea 19,7. Din asta veneau cei
 * șapte pixeli în plus față de machetă la fiecare rând.
 */
.ma-footer__links li {
  display: flex;
  font-size: var(--ma-fs-sm, .82rem);
  line-height: 1.5;
}
.ma-footer__group.is-two-column .ma-footer__links {
  gap: 10px clamp(16px, 2vw, 34px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/*
 * Linia de cupru care crește sub link la hover și la focus. Este singura mișcare din footer, și
 * dispare cu totul când sistemul cere mai puțină mișcare.
 */
.ma-footer__link {
  position: relative;
  display: inline-block;
  color: var(--ma-cream);
  /* 14 px: pragul de sub care un text funcțional nu mai este comod de citit pe desktop. */
  font-size: var(--ma-fs-md, .875rem);
  line-height: 1.55;
  text-decoration: none;
}
.ma-footer__link::after {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--ma-copper);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}
.ma-footer__link:hover::after,
.ma-footer__link:focus-visible::after { transform: scaleX(1); }
.ma-footer__link--all { color: var(--ma-gold); }

.ma-footer__contact {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ma-footer__contact-row {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  /* Adresa de email este un singur cuvânt lung: la zoom mare trebuie să se poată rupe. */
  overflow-wrap: anywhere;
  color: var(--ma-cream);
  /* 14 px: pragul de sub care un text funcțional nu mai este comod de citit pe desktop. */
  font-size: var(--ma-fs-md, .875rem);
  line-height: 1.55;
  text-decoration: none;
}
.ma-footer__contact-row .ma-footer__icon { color: var(--ma-copper); transition: color .2s ease; }
.ma-footer__contact-row:hover { color: var(--ma-gold); }
.ma-footer__contact-row:hover .ma-footer__icon { color: var(--ma-gold); }

/* --------------------------------------------------------------------- Bara de jos */

.ma-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: clamp(20px, 2.2vw, 26px);
  border-top: 1px solid var(--ma-line);
  color: var(--ma-muted);
  font-size: var(--ma-fs-sm, .8rem);
}
.ma-footer__copyright { margin: 0; line-height: 1.6; }
/*
 * Inima, în jarul temei.
 *
 * Emoji-ul o desena fiecare sistem cu fontul lui — roșu aprins pe un telefon, altă nuanță pe
 * altul. Desenată, ia culoarea de aici și arată la fel peste tot.
 */
.ma-footer__heart {
  width: 1em;
  height: .95em;
  display: inline-block;
  color: var(--ma-copper);
  vertical-align: -.1em;
}

.ma-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(14px, 1.6vw, 24px);
}
/* Cele trei linkuri juridice sunt mici prin natura lor; marginea le duce peste minimul de 24 px. */
.ma-footer__legal-link {
  display: inline-block;
  padding-block: 4px;
  color: var(--ma-muted);
  /* 14 px: sub atât, un rând de text funcțional devine greu de citit, oricât ar fi de secundar. */
  font-size: var(--ma-fs-md, .875rem);
  text-decoration: none;
  transition: color .2s ease;
}
.ma-footer__legal-link:hover { color: var(--ma-gold); }

/* --------------------------------------------------------------------------- Focus */

/* Pe fundal închis, un contur auriu gros este singurul care se vede din prima. */
.ma-footer a:focus-visible,
.ma-footer button:focus-visible,
.ma-footer summary:focus-visible {
  outline: 3px solid var(--ma-gold);
  outline-offset: 3px;
}

/* ------------------------------------------------------------------------- Tabletă */

@media (min-width: 621px) and (max-width: 1024px) {
  /*
   * Pe tabletă: identitatea și acțiunile pe toată lățimea, apoi două coloane.
   *
   * „Contact” se așază explicit sub „Atelier”, coloana mai scurtă. Lăsat la voia grilei, ajungea
   * singur pe un rând nou, cu jumătate de lățime goală lângă el.
   */
  .ma-footer__main {
    gap: clamp(28px, 4vw, 44px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "identitate identitate"
      "actiuni    actiuni"
      "portofoliu atelier"
      "portofoliu contact";
    grid-template-rows: auto auto auto 1fr;
    row-gap: 22px;
  }
  .ma-footer__identity { grid-area: identitate; }
  .ma-footer__actions { grid-area: actiuni; }
  .ma-footer__group.is-two-column { grid-area: portofoliu; }
  .ma-footer__main > .ma-footer__group:not(.is-two-column):not(.ma-footer__group--contact) { grid-area: atelier; }
  .ma-footer__group--contact { grid-area: contact; }
}

/*
 * Peste prag nu mai este nimic de desfăcut.
 *
 * Grupurile sunt un titlu și o navigație, vizibile din start. Înainte erau `<details>` închise,
 * pe care CSS-ul le arăta oricum: pe ecran linkurile se vedeau, dar elementul rămânea semantic
 * închis, iar `summary` rămânea o oprire de tabulare care, apăsată, nu schimba nimic.
 *
 * Semnul plus/minus apare numai când scriptul face din titlu un buton, sub 620 px.
 */

/* --------------------------------------------------------------------------- Mobil */

@media (max-width: 620px) {
  .ma-footer__shell { width: calc(100% - 32px); }

  /* O coloană, în ordinea din cod: nicio zonă nu ajunge până aici. */
  .ma-footer__main { gap: 0; }
  .ma-footer__identity { padding-bottom: 22px; }

  /* Cele două acțiuni pe toată lățimea: prima țintă a degetului în subsol. */
  .ma-footer__actions {
    display: grid;
    gap: 8px;
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 22px;
  }
  .ma-footer__action {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    font-size: 1rem;
  }

  /*
   * Acordeoanele.
   *
   * Titlul devine buton numai aici, prin scriptul temei: are `aria-expanded`, `aria-controls` și
   * toată lățimea ca țintă. Fără script rămâne titlu, iar lista rămâne la vedere — nu se pierde
   * nimic și nu apare niciun control care nu face nimic.
   */
  .ma-footer__group {
    border-top: 1px solid var(--ma-line);
  }
  .ma-footer__group--contact { padding-top: 18px; }

  .ma-footer__group > .ma-footer__heading { margin: 0; }
  .ma-footer__toggle {
    min-height: 52px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    color: inherit;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
  }
  /* Lista strânsă iese și din ordinea de tabulare, nu doar din ecran. */
  .ma-footer-acordeon .ma-footer__group [data-ma-footer-panel] { display: none; }
  .ma-footer-acordeon .ma-footer__group.is-open [data-ma-footer-panel] { display: block; }
  /*
   * Semnul apare numai unde există butonul care îl comandă.
   *
   * Legat de titlu, se desena și acolo unde scriptul nu ajunsese — un plus care nu răspundea la
   * atingere. Legat de buton, nu poate exista fără controlul lui.
   */
  .ma-footer__toggle .ma-footer__sign { display: block; }

  /*
   * Plus închis, minus deschis — semnul folosit deja la întrebările frecvente.
   *
   * Este desenat din două linii: bara verticală se strânge la deschidere și rămâne cea
   * orizontală. Cele două se suprapun exact în centru, deci semnul nu sare între stări.
   */
  .ma-footer__toggle .ma-footer__sign {
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    flex: none;
  }
  .ma-footer__toggle .ma-footer__sign::before,
  .ma-footer__toggle .ma-footer__sign::after {
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--ma-copper);
    content: "";
    transition: transform .25s ease;
  }
  .ma-footer__toggle .ma-footer__sign::before {
    width: 14px;
    height: 1.5px;
    transform: translate(-50%, -50%);
  }
  .ma-footer__toggle .ma-footer__sign::after {
    width: 1.5px;
    height: 14px;
    transform: translate(-50%, -50%) scaleY(1);
  }
  .ma-footer__group.is-open .ma-footer__toggle .ma-footer__sign::after { transform: translate(-50%, -50%) scaleY(0); }

  .ma-footer__group > nav { padding-bottom: 20px; }
  /* Ținta de atingere, nu doar textul: 44 px este minimul pentru un deget. */
  /*
   * Rândurile rămân strânse și pe telefon, aproape de ritmul machetei.
   *
   * Ținta tactilă cerută de WCAG 2.2 AA este 24×24 px; 34 o depășește confortabil. Cele 44 px de
   * dinainte veneau din recomandarea AAA și umflau fiecare acordeon deschis cu vreo sută de pixeli.
   * Comenzile principale — capetele de acordeon — rămân la 52 px.
   */
  /*
   * Ținte de deget, nu doar text.
   *
   * Sub 620 px fiecare link din subsol trece de 44 px pe înălțime și de 16 px ca literă. Cele
   * 34 px de dinainte veneau din pragul minim al WCAG, dar între două linkuri lipite un deget
   * gros apasă vecinul; 44 lasă loc de greșeală.
   */
  .ma-footer__link,
  .ma-footer__contact-row {
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: 1rem;
  }
  .ma-footer__link { padding-block: 10px; }
  .ma-footer__links { gap: 0; }
  /* Pe un ecran îngust două coloane ar lăsa linkurile pe câte două rânduri fiecare. */
  .ma-footer__group.is-two-column .ma-footer__links { grid-template-columns: 1fr; }

  /*
   * Pe coloană, bara de jos se așază pe mijloc.
   *
   * Aliniate la stânga, copyrightul și linkurile juridice atârnau într-o parte, cu un gol lung în
   * dreapta: pe ecran îngust ele sunt tot ce mai rămâne din bară, deci mijlocul este locul lor.
   * Cele două butoane își păstrează capetele — cookie-urile la stânga, „înapoi sus” la dreapta —
   * fiindcă perechea lor se citește tocmai din faptul că stau față în față.
   */
  /*
   * Pe coloană, dar cu butoanele pe același rând.
   *
   * Textele stau pe mijloc, fiecare pe rândul lui; cele două butoane împart ultimul rând, unul la
   * stânga, celălalt la dreapta. Pe rânduri separate se despărțeau — pe telefon, andocate, unul
   * ajungea la 89 px de talpa ecranului și celălalt dincolo de ea — iar bara creștea cu două
   * rânduri în loc de unul când le primea.
   */
  .ma-footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
  }
  .ma-footer__copyright,
  .ma-footer__legal { width: 100%; }
  .ma-footer__cookies {
    width: calc(50% - 7px);
    justify-content: flex-start;
    /* Pe rânduri, marginea automată n-ar mai împinge nimic: cele două umplu singure ultimul rând. */
    margin-inline: 0;
  }
  /* Linkurile juridice: sub textul de corp, dar peste pragul de citit, cu țintă de deget. */
  .ma-footer__legal { justify-content: center; gap: 4px 18px; }
  .ma-footer__legal-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    font-size: var(--ma-fs-md, .9rem);
  }
}

@media (max-width: 360px) {
  .ma-footer__shell { width: calc(100% - 24px); }
}

/* ------------------------------------------------------------------ Mișcare redusă */

@media (prefers-reduced-motion: reduce) {
  .ma-footer *,
  .ma-footer *::before,
  .ma-footer *::after {
    animation: none !important;
    transition: none !important;
  }
  .ma-footer__link::after { transform: scaleX(1); opacity: 0; }
  .ma-footer__link:hover::after,
  .ma-footer__link:focus-visible::after { opacity: 1; }
}

/* ------------------------------------------------------------- Pagina curentă */

/*
 * Unde ești, spus discret.
 *
 * Cititorul de ecran află din `aria-current`; ochiul, dintr-o schimbare de culoare și din linia
 * scurtă de sub link, deja desenată. Fără buton plin, fără chenar, fără ornament nou.
 */
.ma-footer__link.is-current,
.ma-footer__legal-link.is-current {
  color: var(--ma-gold);
}
.ma-footer__link.is-current::after { transform: scaleX(1); opacity: 1; }

/* --------------------------------------------------- Butonul „înapoi sus”, andocat */

/*
 * Locul rezervat din bara de jos.
 *
 * Gol cât timp butonul plutește; când subsolul intră în ecran, scriptul mută butonul aici. Locul
 * nu are dimensiune proprie: nu lasă o gaură în bară cât timp este gol.
 */
/*
 * Cele două butoane stau împreună, la capătul din dreapta al barei.
 *
 * Marginea automată este pe cel dintâi dintre ele: ea înghite tot spațiul liber, iar perechea
 * rămâne lipită, despărțită doar de golul barei. Pusă pe al doilea, cum era înainte, cel dintâi
 * ar fi plutit undeva la mijloc.
 */
.ma-footer__cookies { margin-left: auto; }

.ma-footer__to-top {
  display: flex;
  align-items: center;
}

/*
 * Locul butonului de cookie-uri, pereche cu cel de mai sus, dar în stânga.
 *
 * Gol, nu există: `:empty` îl scoate din curgere, altfel golul dintre elementele barei i-ar fi
 * lăsat un spațiu de douăzeci de pixeli înaintea copyrightului, cât timp butonul încă plutește.
 */
/*
 * Semnul după care se andochează butoanele: un fir de un pixel, tras înapoi cu tot atât, deci fără
 * urmă în așezare. Este observat în locul locurilor lor, fiindcă el nu se mișcă atunci când bara de
 * jos crește sub el.
 */
.ma-footer__dock-mark { height: 1px; margin-bottom: -1px; pointer-events: none; }

.ma-footer__cookies {
  display: flex;
  align-items: center;
}
/*
 * Gol, locul nu lasă gaură — dar nici nu dispare.
 *
 * `display: none` ar fi fost mai simplu, însă observatorul care mută butonul se uită chiar la acest
 * element: un element ascuns nu intră niciodată în ecran, deci butonul n-ar fi coborât niciodată în
 * subsol. Rămâne în curgere, fără lățime, iar golul pe care bara îl pune între elemente i se scade
 * la loc — douăzeci de pixeli pe rând, paisprezece pe coloană, exact cât pune `gap`.
 */
.ma-footer__cookies:empty { margin-inline-end: -20px; }

@media (max-width: 620px) {
  /* Pe coloană golul barei este de paisprezece pixeli, iar el se scade pe verticală, nu pe lățime. */
  .ma-footer__cookies:empty { margin-inline-end: 0; margin-block-end: -14px; }
  /* Butonul „înapoi sus” ține jumătatea din dreapta a aceluiași rând. */
  .ma-footer__to-top {
    width: calc(50% - 7px);
    justify-content: flex-end;
    margin-left: 0;
  }
}

/*
 * Fără spațiu între conținutul paginii și footer.
 *
 * Distanța implicită dintre blocurile șablonului (~11 px) lăsa între ultima secțiune și footer o
 * bandă din fundalul paginii, de altă nuanță decât amândouă.
 */
:where(.wp-site-blocks) > footer.wp-block-template-part:has(> .ma-footer) {
  position: relative;
  /*
   * Peste conținutul paginii, ca ornamentul de pe muchie să nu intre sub ultima secțiune:
   * textul cadrelor din „Despre noi” e un element de grilă cu z-index 2 și îl acoperea. Sub antetul
   * fix (1000), butonul „sus” și bannerul de cookie-uri.
   */
  z-index: 4;
  margin-block-start: 0;
}