/* =============================================================
   GLOBAL.CSS — Shared base styles for all pages
   Stack: Vanilla HTML/CSS/JS | RTL Hebrew | Desktop 1280px
   ============================================================= */

/* ── Google Fonts ──────────────────────────────────────────── */
/* Micro 5 — pixel/retro font used for tile day numbers */
@import url('https://fonts.googleapis.com/css2?family=Micro+5&display=swap');

/* ── Fonts ─────────────────────────────────────────────────── */
/* MosesText_Inter — variable font (Light 300 → Bold 700) */
@font-face {
  font-family: 'MosesText_Inter';
  src: url('../assets/fonts/MosesText_Inter-VF.ttf?v=1791285426') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* MosesText_Inter Negative — inverted/white variants for use on dark backgrounds
   Use font-family: 'MosesText_Inter-Negative' to access these */
@font-face {
  font-family: 'MosesText_Inter-Negative';
  src: url('../assets/fonts/MosesText_Inter-RgNegative.otf?v=1791285426') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MosesText_Inter-Negative';
  src: url('../assets/fonts/MosesText_Inter-BoldNegative.otf?v=1791285426') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
  --color-bg:           #e2e3e4;
  --color-bg-header:    #ffffff;
  --color-title:        #273999;
  --color-text:         #000001;
  --color-gray-locked:  #c5c5c5;
  --color-blue-done:    #4d69ff;

  --font-display: 'MosesText_Inter', 'Rubik', 'Arial Hebrew', Arial, sans-serif;
  --font-body:    'MosesText_Inter', 'Rubik', 'Arial Hebrew', Arial, sans-serif;

  --layout-max-width:   1294px;
  --desktop-figma-width: 1280px;
  --desktop-figma-height: 720px;

  /* Grid line background — matches Figma 54px newspaper grid */
  --grid-line-color:  rgba(0, 0, 0, 0.07);
  --grid-spacing:     54px;
  --score-tile-width-responsive: clamp(88px, 7vw, 96px);
  --score-tile-height-responsive: clamp(45px, 3.8vw, 49px);
  --score-icon-width-responsive: clamp(24px, 2vw, 27px);
  --score-icon-height-responsive: clamp(26px, 2.15vw, 29px);
  --score-value-size-responsive: clamp(38px, 3.5vw, 45px);
  --back-btn-width-responsive: clamp(138px, 11vw, 150px);
  --back-btn-height-responsive: clamp(46px, 3.9vw, 50px);
  --back-btn-font-size-responsive: clamp(12.8px, 1.04vw, 13.676px);
  --site-header-height-dynamic: var(--header-height, 68px);
  --site-footer-height: 32px;
  --page-overflow-x: 0px;
  --page-overflow-y: 0px;
  --app-available-height: calc(100vh - var(--site-header-height-dynamic) - var(--site-footer-height) - var(--page-overflow-y));
}

@supports (height: 100dvh) {
  :root {
    --app-available-height: calc(100dvh - var(--site-header-height-dynamic) - var(--site-footer-height) - var(--page-overflow-y));
  }
}

@media (max-width: 767px) {
  :root {
    --site-footer-height: 42px;
  }
}

/* ── Reset ──────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ───────────────────────────────────────────────────── */
html {
  direction: rtl;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  /* White side margins when viewport > 1280px */
  background: #ffffff;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow-x: clip;
  overflow-y: auto;
  /* Positioning context for the shared .phone-mockup */
  position: relative;
}

/* ── Mobile: remove all desktop size caps so body fills the full screen ── */
@media (max-width: 767px) {
  /* html background must match the page grid — no white slivers at edges */
  html {
    background: #e2e3e4;
    /* Prevent the html element itself from creating an RTL scroll container
       that shifts content left when absolute children bleed past the right edge */
    overflow-x: clip;
  }

  body {
    width: 100%;          /* force full viewport width */
    max-width: none;      /* remove the 1294px desktop cap entirely */
    min-height: 100vh;    /* fallback */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* Use a single overflow:clip shorthand — mixing clip+visible promotes
       visible→auto (CSS spec), accidentally creating an RTL scroll container */
    overflow: clip;
    margin: 0;
  }
}

@supports (height: 100dvh) {
  body {
    min-height: 100dvh;
  }
}

/* site-footer is a custom element and renders before being upgraded to
   <footer class="site-footer">. Keep it in normal footer flow from first paint. */
site-footer {
  display: block;
  width: 100%;
  min-height: var(--site-footer-height);
  margin-top: auto;
  flex: 0 0 auto;
}

/* Grid-line background pattern — Figma 54px newspaper grid */
.page-layout {
  background-color: var(--color-bg);
  background-image:
    linear-gradient(to right,  var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
  background-size: var(--grid-spacing) var(--grid-spacing);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ── Utilities ──────────────────────────────────────────────── */
.hidden { display: none !important; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* -- Site-wide scrollbar (hide native) ------------------------------------
   Applied to scrollable containers that use a companion custom HTML
   scrollbar element (.word-bank-scrollbar in game.html, .cal-scrollbar
   in homepage.html). The visual scrollbar is rendered by the sibling div.
   -------------------------------------------------------------------- */
.site-scrollbar {
  scrollbar-width: none; /* hide native scrollbar */
}
.site-scrollbar::-webkit-scrollbar { display: none; }

.content-frame-wrap,
.completed-card-scroll,
.word-bank {
  cursor: grab;
}
.content-frame-wrap.is-drag-scrolling,
.completed-card-scroll.is-drag-scrolling,
.word-bank.is-drag-scrolling,
.page-game.is-drag-scrolling,
.page-completed.is-drag-scrolling,
.content-frame-wrap.is-drag-scrolling *,
.completed-card-scroll.is-drag-scrolling *,
.word-bank.is-drag-scrolling * {
  cursor: grabbing !important;
  user-select: none;
}

/* ── Shared decorative scrollbar  (Figma node 460:2186 "Group 46") ──────────
   Three-layer pixel-art scrollbar used across all pages.

   Markup pattern:
     <div class="deco-scrollbar  [page-outer]">          ← positional wrap
       <div class="deco-scrollbar-track  [page-track]">  ← dark charcoal rail
         <div class="deco-scrollbar-thumb  [page-thumb]" id="..."></div>
       </div>
     </div>

   Each page class only overrides: width, height, top/right/left of the wrap;
   and left + width of the track/thumb to match its container size.
   All colours, borders, shadows, transitions and grip-lines live here.
──────────────────────────────────────────────────────────────────────────── */

.deco-scrollbar {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;  /* re-enabled on track+thumb children */
}

/* ── Rail: dark charcoal pole + grey inner channel (::before) ── */
.deco-scrollbar-track {
  position: absolute;
  pointer-events: auto;
  top: 0;
  height: 100%;
  left: var(--deco-scrollbar-track-left, 3px);             /* centre 17px rail inside 23px outer: (23 − 17) / 2 = 3px */
  width: var(--deco-scrollbar-track-width, 17px);           /* Figma "black base" width */
  background: #3f3f3f;   /* Figma "black base" — dark charcoal */
  border-radius: 2px;
}
.deco-scrollbar-track::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 1px;
  width: calc(var(--deco-scrollbar-track-width, 17px) - 2px);           /* Figma "grey space": 1px inset each side of 17px track */
  height: calc(100% - 4px);
  background: #717171;   /* Figma "grey space" — inner channel */
  border-radius: 1px;
}

/* ── Thumb: light rectangle + grip lines ── */
.deco-scrollbar-thumb {
  position: absolute;
  width: var(--deco-scrollbar-thumb-width, 23px);  /* Figma "light space": wider than 17px rail, overlaps rail edges */
  left: calc((var(--deco-scrollbar-track-width, 17px) - var(--deco-scrollbar-thumb-width, 23px)) / 2);   /* child of 17px track (left=3px); −3px centres 23px thumb in 23px outer */
  top: 0;
  background: #d4d4d4;   /* Figma "light space" */
  border: 1.5px solid #555;
  box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.25);
  z-index: 1;
  transition: top 200ms;
  cursor: grab;
  user-select: none;
  touch-action: none;
  height: var(--deco-scrollbar-thumb-height, 107px);
}
.deco-scrollbar-thumb:active {
  cursor: grabbing;
  transition: none;
}
/* Three horizontal grip lines centred in the thumb (Figma "Lines 26–28") —
   shown as CSS on desktop, replaced by SVG imgs (.deco-scrollbar-grip-line) on mobile */
.deco-scrollbar-thumb::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 13px;   /* 3 × 1.5px lines + 2 × 4.75px gaps ≈ 13px */
  background:
    linear-gradient(#444, #444) 0 0    / 12px 1.5px no-repeat,
    linear-gradient(#444, #444) 0 50%  / 12px 1.5px no-repeat,
    linear-gradient(#444, #444) 0 100% / 12px 1.5px no-repeat;
}

/* ── Word-bank scrollbar — positional overrides for game.html ──────────────
   Base visual design (.deco-scrollbar*) is defined above.
   These rules only set: dimensions, position within .word-bank-area.

   .word-bank-area is position:relative, overflow:hidden.
   The scrollbar sits at the physical right edge (direction:ltr container).
   Width matches the 23px right-padding reserved in .word-bank (same as .cal-scrollbar).
   JS (initWordBankScrollbar in game.js) drives thumb top + height.
──────────────────────────────────────────────────────────────────────────── */
.word-bank-scrollbar {
  top: 0;
  right: 0;
  width: 23px;
  height: 100%;
}

.completed-scrollbar {
  top: 0;
  right: 0;
  width: 23px;
  height: 100%;
}

/* ── Calendar scrollbar — positional overrides for homepage.html ───────────
   Figma node 460:2186 "Group 46" — 23×322px, inside .cal-grid-section.
   Composed of (pre-rotation horizontal space):
     black base  — 17px wide × 322px, dark charcoal rail
     grey space  — 15px wide × 318px, medium-grey inner channel (1px inset)
     light space — 23px wide × 107px, light thumb; sits on top
     Lines 26-28 — three 15px horizontal lines spaced 6px apart, centred in thumb
   JS (updateCalScrollbar in calendar.js) drives thumb top + height.
────────────────────────────────────────────────────────────────────────── */
.cal-scrollbar {
  position: absolute;
  top: var(--cal-scrollbar-top, 17px);           /* Figma: top=19.64px */
  left: var(--cal-scrollbar-left, 521px);         /* Figma: left=521px within 564px section */
  right: auto;
  width: var(--cal-scrollbar-width, 23px);
  height: var(--cal-scrollbar-height, 305px);
  --deco-scrollbar-thumb-min-height: 107px;
  z-index: 3;
  overflow: hidden;
}

@media (min-width: 768px) {
  .cal-scrollbar .deco-scrollbar-track,
  .cal-scrollbar .deco-scrollbar-track::before,
  .cal-scrollbar .deco-scrollbar-thumb {
    border-radius: 0;
  }

  .cal-scrollbar .deco-scrollbar-thumb {
    background: #e6e7e8;
    border: 1px solid #121212;
    box-shadow: none;
  }
}

/* SVG grip lines inside thumb — visible on mobile only */
.deco-scrollbar-grip-line {
  display: none;
}

/* Tablet/narrow-desktop override for the homepage calendar scrollbar.
   Below 932px the scaled desktop X coordinate starts drifting, so anchor the
   scrollbar to the section's right edge using the mobile positioning model. */
@media (max-width: 932px) {
  .cal-scrollbar {
    display: block;
    left: auto;
    right: 0;
    top: 8px;
    width: 23px;
    height: calc(100% - 8px);
    overflow: visible;
  }

  .deco-scrollbar-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.46px;
  }

  .deco-scrollbar-thumb::before {
    display: none;
  }

  .deco-scrollbar-grip-line {
    display: block;
    width: 15px;
    height: 2px;
    flex-shrink: 0;
  }
}

/* Mobile overrides for the calendar scrollbar */
@media (max-width: 767px) {
  /* ── Decorative scrollbar: section-relative left=264px
        card-relative: Figma "light space" x=343 − card.x=20 = 323px.
        section-relative: 323 − 59 (section left) = 264px.
        Right edge: 264 + 23 = 287 = section width (right at 346px card-relative). ── */
  .cal-scrollbar {
    display: block;
    position: absolute;
    /* Figma mobile: section width 287, scrollbar x=241, w=23 -> right inset = 23.
       Keep this relation responsive when the section width changes. */
    --cal-mobile-scrollbar-right-inset: 19px;
    left: calc(100% - var(--cal-mobile-scrollbar-right-inset) - 23px);
    right: auto;
    top: 8px;
    width: 23px;
    height: 293px;      /* Figma black-base height = 293px */
    --deco-scrollbar-thumb-width: 23px;
    --deco-scrollbar-thumb-min-height: 96.3634px;
    overflow: visible;
  }

  .cal-scrollbar .deco-scrollbar-track {
    background: #000;
    border-radius: 0;
  }

  .cal-scrollbar .deco-scrollbar-track::before {
    top: 1px;
    left: 1px;
    width: calc(var(--deco-scrollbar-track-width, 17px) - 2px);
    height: calc(100% - 2px);
    background: #65625b;
    border-radius: 0;
  }

  .cal-scrollbar .deco-scrollbar-thumb {
    background: #e6e7e8;
    border: 1px solid #121212;
    box-shadow: none;
  }

  /* Mobile scrollbar thumb: use Figma SVG grip lines instead of CSS ::before lines */
  .cal-scrollbar .deco-scrollbar-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3.46px;   /* 5.46px center-to-center minus 2px line height = 3.46px gap */
  }
  .cal-scrollbar .deco-scrollbar-thumb::before {
    display: none;  /* hide CSS grip lines on mobile */
  }
  .cal-scrollbar .deco-scrollbar-grip-line {
    display: block;
    width: 15px;
    height: 2px;
    flex-shrink: 0;
  }
}

/* ── Score tiles — shared component (score-tile) ────────────────────────────────
   Figma: 96×49px, white bg, 3px solid border, flex-row icon+value.
   Used on game.html (controls-bar) and completedgame.html (summary section).
————————————————————————————————————————————————————————————————————————— */
.score-tile {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  width: var(--score-tile-width-responsive);
  height: var(--score-tile-height-responsive);
  padding: 4px 10px;
  background: #fff;
  border: 3px solid #000;
  cursor: default;
  user-select: none;
  pointer-events: none;
  flex-shrink: 0;
}

.score-icon {
  display: block;
  width: var(--score-icon-width-responsive);
  height: var(--score-icon-height-responsive);
  object-fit: contain;
  flex-shrink: 0;
}

.score-value {
  font-family: 'Micro 5', monospace;
  font-size: var(--score-value-size-responsive);
  line-height: 1;
  flex: 1;
  text-align: center;
}
.score-value--correct { color: #00d7a9; }
.score-value--wrong   { color: #ffa8b9; }

/* ── Pixel-art back button — shared component (pixel-back-btn) ─────────────
   Figma: component Layer, node 5:246, 150×50px.
   Used on: game.html (controls-bar) and completedgame.html (summary section).
────────────────────────────────────────────────────────────────────────── */
.pixel-back-btn {
  position: relative;
  width: var(--back-btn-width-responsive);
  height: auto;
  aspect-ratio: 3 / 1; 
  min-height: calc(var(--back-btn-width-responsive) / 3);
  flex-shrink: 0;
  display: block;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.pixel-back-btn-frame {
  position: absolute;
  pointer-events: none;
  display: block;
  max-width: none;
  object-fit: fill;
  overflow: visible;
}
/* Outer frame fills the 150×50 box 1:1 so the BR chamfer isn't stretched or clipped. */
.pixel-back-btn-frame--outer {
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Inner frame: Figma inset[0,0,12.12%,4.68%] on 150×50 → 6px / 7px, snapped to whole pixels. */
.pixel-back-btn-frame--inner {
  top: 0;
  right: 0;
  bottom: 6px;
  left: 7px;
  width: calc(100% - 7px);
  height: calc(100% - 6px);
}

.pixel-back-btn-fill {
  position: absolute;
  display: none;
  pointer-events: none;
  background: #fff;
}

.pixel-back-btn-text {
  position: absolute;
  z-index: 3;
  font-family: var(--font-body);
  font-size: var(--back-btn-font-size-responsive);
  font-weight: 700;
  letter-spacing: 0;
  color: #000;
  white-space: nowrap;
  text-align: center;
  direction: rtl;
}

.pixel-back-btn-text--desktop {
  inset: 27.46% 3.55% 38.96% 9.12%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.364;
}

@media (min-width: 779px) {
  .pixel-back-btn {
    width: 150px;
    height: 50px;
    min-height: 50px;
    aspect-ratio: auto;
  }

  .pixel-back-btn-text {
    font-size: 13.676px;
  }

  .pixel-back-btn-text--desktop {
    line-height: 18.65px;
  }
}

.pixel-back-btn-text--mobile { display: none; }

/* Desktop frames visible by default; mobile frames hidden */
.pixel-back-btn-frame--desktop { display: block; }
.pixel-back-btn-frame--mobile  { display: none; }

/* Hover + pressed state frames — hide by default (overridden by interactive states below) */
.pixel-back-btn-frame--desktop.pixel-back-btn-frame--hover   { display: none; }
.pixel-back-btn-frame--desktop.pixel-back-btn-frame--pressed { display: none; }

/* Hover: swap to hover frames on pointer devices (Figma node 1274:3641) */
@media (hover: hover) {
  .pixel-back-btn:hover .pixel-back-btn-frame--default { display: none; }
  .pixel-back-btn:hover .pixel-back-btn-frame--hover   { display: block; }
  .pixel-back-btn:hover .pixel-back-btn-text {
    color: #000;
  }
}

/* Active/pressed: swap to pressed frames, text turns white
   Figma node 1274:3649 (desktop 150×50). Mobile portrait uses the same
   frames scaled to the 135×40 390-variant (Figma node 746:3148 / 474:2665). */
@media (min-width: 768px) {
  .pixel-back-btn:active .pixel-back-btn-frame--default,
  .pixel-back-btn:active .pixel-back-btn-frame--hover   { display: none; }
  .pixel-back-btn:active .pixel-back-btn-frame--pressed { display: block; }
  /* Pressed outer: Figma inset[6.59%_2.19%_0.58%_-0.21%] on 150×50 */
  .pixel-back-btn:active .pixel-back-btn-frame--pressed.pixel-back-btn-frame--outer {
    top:    3.3px;
    right:  3.285px;
    bottom: 0.29px;
    left:   -0.315px;
    width:  calc(100% - 2.97px);
    height: calc(100% - 3.585px);
  }
  /* Pressed inner: Figma inset[6.59%_2.19%_5.53%_2.49%] on 150×50 */
  .pixel-back-btn:active .pixel-back-btn-frame--pressed.pixel-back-btn-frame--inner {
    top:    3.3px;
    right:  3.285px;
    bottom: 2.765px;
    left:   3.735px;
    width:  calc(100% - 7.02px);
    height: calc(100% - 6.06px);
  }
  .pixel-back-btn:active .pixel-back-btn-text { color: #fff; }
}

/* ── Mobile back button (Figma 390-variant, 135×40px, node 746:3148) ───────
   Two SVG layers + white fill via ::before.
   All inset % values resolve against the 135×40 button box.
─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .pixel-back-btn {
    width: 135px;
    height: 40px;
    min-height: 40px;
    aspect-ratio: auto;
  }

  .pixel-back-btn-frame--desktop { display: none; }
  .pixel-back-btn-frame--mobile  { display: block; }
  .pixel-back-btn-fill--mobile   { display: block; }
  .pixel-back-btn-text--desktop  { display: none; }
  .pixel-back-btn-text--mobile {
    inset: 25% 4.44% 35% 8.89%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    direction: rtl;
  }

  /* Pink shadow layer: inset[0.01%,0,1.64%,0.62%] on 135×40 */
  .pixel-back-btn-frame--mobile.pixel-back-btn-frame--outer {
    inset: 0.01% 0 1.64% 0.62%;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .pixel-back-btn-fill--mobile {
    inset: 2.5% 0.74% 15% 5.93%;
    z-index: 1;
  }

  /* Black border layer: inset[0,0,12.12%,5.19%] on 135×40 */
  .pixel-back-btn-frame--mobile.pixel-back-btn-frame--inner {
    inset: 0 0 12.12% 5.19%;
    width: 96%;
    height: 88%;
    z-index: 2;
  }

  /* Pressed: same desktop artwork (1274:3649), percentage insets so they
     track the 135×40 box (and --mobile-ui-scale). Portrait only. */
  @media (orientation: portrait) {
    .pixel-back-btn:active .pixel-back-btn-frame--mobile,
    .pixel-back-btn:active .pixel-back-btn-fill--mobile {
      display: none;
    }
    .pixel-back-btn:active .pixel-back-btn-frame--default,
    .pixel-back-btn:active .pixel-back-btn-frame--hover {
      display: none;
    }
    .pixel-back-btn:active .pixel-back-btn-frame--pressed {
      display: block;
    }
    /* Pressed outer: Figma inset[6.59%_2.19%_0.58%_-0.21%] */
    .pixel-back-btn:active .pixel-back-btn-frame--pressed.pixel-back-btn-frame--outer {
      top: 6.59%;
      right: 2.19%;
      bottom: 0.58%;
      left: -0.21%;
      width: calc(100% + 0.21% - 2.19%);
      height: calc(100% - 6.59% - 0.58%);
      z-index: 0;
    }
    /* Pressed inner: Figma inset[6.59%_2.19%_5.53%_2.49%] */
    .pixel-back-btn:active .pixel-back-btn-frame--pressed.pixel-back-btn-frame--inner {
      top: 6.59%;
      right: 2.19%;
      bottom: 5.53%;
      left: 2.49%;
      width: calc(100% - 2.19% - 2.49%);
      height: calc(100% - 6.59% - 5.53%);
      z-index: 2;
    }
    .pixel-back-btn:active .pixel-back-btn-text {
      color: #fff;
    }
  }
}

/* ── MAIN CONTENT AREA ──────────────────────────────────────── */
.page-main {
  position: relative;
  width: 100%;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  min-height: calc(100vh - var(--header-height));
}

/* ── Legal footer (Figma node 3066:3939) ─────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 4;
  display: flex;
  flex: 0 0 auto;
  margin-top: auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #fff;
  padding: 10px clamp(16px, 12.66vw, 162px);
}

.site-footer__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #1e1e1e;
}

.site-footer__links a {
  color: inherit;
  text-decoration: none;
}

.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  text-decoration: underline;
}

.site-footer__sep {
  margin-inline: 6px;
}

@media (max-width: 767px) {
  .site-footer {
    padding-inline: 16px;
  }

  .site-footer__links {
    line-height: 1.3;
  }
}