/* Polaris footer (polaris_footer/footer.html). Self-contained: it renders the
   same on marketing pages and inside Tabler or other frameworks. Hosts can
   retheme it with the --pf-* custom properties. */

.pf-footer {
  --pf-bg: #17221A;
  --pf-text: #C9D1BF;
  --pf-brand: #F3F0E7;
  --pf-link: #E1E4D9;
  --pf-link-hover: #C7DABB;
  --pf-focus: #A9C29A;
  --pf-muted: #8E9A8A;
  --pf-separator: #56685A;
  --pf-line: #2E3B31;
  --pf-top-line: transparent;
  --pf-social-filter: grayscale(1) brightness(1.8);
  --pf-social-opacity: .8;
  --pf-logo-size: 44px;
  --pf-max-width: 1296px;
  --pf-gutter: 16px;
  --pf-font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  padding: 72px 0 40px;
  border-top: 1px solid var(--pf-top-line);
  background: var(--pf-bg);
  color: var(--pf-text);
  font-family: var(--pf-font);
  font-size: 15px;
  line-height: 1.5;
}
.pf-inner { width: min(100% - 2 * var(--pf-gutter), var(--pf-max-width)); margin-inline: auto; display: flex; flex-direction: column; gap: 56px; }
.pf-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; }
.pf-brand { display: flex; flex-direction: column; gap: 14px; color: var(--pf-brand); }
.pf-brand img { width: var(--pf-logo-size); height: var(--pf-logo-size); object-fit: contain; }
.pf-col { display: flex; flex-direction: column; gap: 12px; }
.pf-col h2 {
  margin: 0;
  color: var(--pf-muted);
  font-family: var(--pf-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.4;
  text-transform: uppercase;
}
.pf-footer a { color: var(--pf-link); text-decoration: none; }
.pf-footer a:hover { color: var(--pf-link-hover); text-decoration: underline; }
.pf-footer a:focus-visible { outline: 3px solid var(--pf-focus); outline-offset: 3px; border-radius: 4px; }
.pf-pair span[aria-hidden] { color: var(--pf-separator); }
.pf-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--pf-line);
  color: var(--pf-muted);
  font-size: 14px;
}
.pf-updated::before { content: "· "; }
.pf-social { display: flex; align-items: center; gap: 14px; }
.pf-social a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.pf-social img { width: auto; height: 22px; filter: var(--pf-social-filter); opacity: var(--pf-social-opacity); }
.pf-social a:hover img { opacity: 1; }

@media (max-width: 900px) {
  .pf-footer { padding: 48px 0 32px; }
  .pf-inner { gap: 32px; }
  .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 32px; }
  .pf-brand { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; }
  .pf-bottom { flex-direction: column; align-items: flex-start; font-size: 13px; }
  .pf-updated { display: block; }
  .pf-updated::before { content: ""; }
}

/* Compact footer (polaris_footer/footer_compact.html): one line with the
   copyright and a "Jogi" menu that opens upwards, so it never reaches below
   the footer (e.g. under a host's fixed bottom bar). */
.pf-footer.pf-compact { padding: 6px 0; font-size: 14px; }
.pf-compact .pf-inner { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.pf-compact .pf-copy { color: var(--pf-muted); }
.pf-compact .pf-dot { color: var(--pf-separator); }
.pf-legal { position: relative; }
.pf-legal summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 4px;
  color: var(--pf-link);
  cursor: pointer;
  list-style: none;
}
.pf-legal summary::-webkit-details-marker { display: none; }
.pf-legal summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: 3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-135deg);
  transition: transform .15s ease;
}
.pf-legal[open] summary::after { margin-top: -3px; transform: rotate(45deg); }
.pf-legal summary:hover { color: var(--pf-link-hover); }
.pf-legal summary:focus-visible { outline: 3px solid var(--pf-focus); outline-offset: 2px; border-radius: 4px; }
.pf-legal-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  /* Anchored to the "Jogi" button's right edge: it grows towards the copyright
     text, never past a narrow screen's edge. */
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--pf-line);
  border-radius: 10px;
  background: var(--pf-bg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
}
.pf-legal-menu a { display: block; padding: 10px 12px; border-radius: 6px; white-space: nowrap; }
.pf-legal-menu a:hover { background: var(--pf-line); text-decoration: none; }