/* Shared Layout Styles */

/* ---- Branded scrollbars (Firefox + Chromium / Safari desktop) -------- */
:root {
  --scrollbar-track: rgba(30, 58, 95, 0.07);
  --scrollbar-track-hover: rgba(30, 58, 95, 0.1);
  --scrollbar-thumb: #e87a2e;
  --scrollbar-thumb-hover: #d4691a;
  --scrollbar-thumb-active: #c2410c;
  --scrollbar-size: 11px;
  --scrollbar-size-mobile: 7px;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: var(--scrollbar-size-mobile);
    height: var(--scrollbar-size-mobile);
  }

  ::-webkit-scrollbar-thumb {
    border-width: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html,
  * {
    scroll-behavior: auto;
  }
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.container--narrow {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

.container--medium {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}