/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for ClubmTheme.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values. Copy this
 * file to your web root, so it sits next to index.php, and clear Drupal's
 * cache. Then, any changes you make in this file should be reflected right away.
 */

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.13 0.043 265.132);
  --card: oklch(0.967 0.003 264.542);
  --card-foreground: oklch(0.21 0.032 264.665);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.9219 0 0);
  --secondary-foreground: oklch(0.28 0.041 260.329);
  --muted: oklch(0.967 0.003 264.542);
  --muted-foreground: oklch(0.373 0.031 259.733);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --moderation-unpublished: #b45309;
  --border: oklch(0.872 0.009 258.338);
  --input: oklch(0.872 0.009 258.338);
  --ebony: #000000;
  --ivory: #eae8db;
  --jade: #1e6465;
  --neutrals-400: #FCFBF4;
  --clubm-page-bg: var(--neutrals-400);
  --clubm-desktop-inline-padding: 6.75rem;
  --clubm-mobile-breakpoint: 48rem;
  --font-keystone-heading: "Zalando Sans Expanded", sans-serif;
  --font-keystone-body: "Montserrat", sans-serif;
  --font-clubm-heading: "Fahkwang", sans-serif;
  --font-clubm-body: "Montserrat", sans-serif;
  --font-clubm-script: "Fahkwang", sans-serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 0.0625rem;
  --shadow-blur: 0.1875rem;
  --shadow-spread: 0rem;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 0.0625rem 0.1875rem 0.0625rem hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 0.0625rem 0.1875rem 0.0625rem hsl(0 0% 0% / 0.05), 0 0.0625rem 0.125rem -0.0625rem hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 0.0625rem 0.1875rem 0.0625rem hsl(0 0% 0% / 0.1), 0 0.125rem 0.25rem -0.0625rem hsl(0 0% 0% / 0.1);
  --shadow: 0 0.0625rem 0.1875rem 0.0625rem hsl(0 0% 0% / 0.1), 0 0.125rem 0.25rem -0.0625rem hsl(0 0% 0% / 0.1);
  --shadow-md: 0 0.0625rem 0.1875rem 0.0625rem hsl(0 0% 0% / 0.1), 0 0.25rem 0.375rem -0.125rem hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 0.0625rem 0.1875rem 0.0625rem hsl(0 0% 0% / 0.1), 0 0.5rem 0.625rem -0.125rem hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 0.0625rem 0.1875rem 0.0625rem hsl(0 0% 0% / 0.1), 0 0.75rem 0.875rem -0.1875rem hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 0.0625rem 0.1875rem 0.0625rem hsl(0 0% 0% / 0.1), 0 1rem 1.125rem -0.1875rem hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Set navbar height for hero billboard overlay */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

/* Scale the collapsed admin sidebar from its 1920px desktop reference. */
@media (min-width: 64rem) {
  html[data-admin-toolbar="collapsed"] body.gin--core-navigation {
    --clubm-admin-sidebar-rem: 0.8333333333vw;
    --admin-toolbar-sidebar-width: calc(4 * var(--clubm-admin-sidebar-rem));
  }

  html[data-admin-toolbar="collapsed"] .admin-toolbar {
    --admin-toolbar-rem: var(--clubm-admin-sidebar-rem);
    --gin-spacing-xxxs: calc(0.125 * var(--clubm-admin-sidebar-rem));
    --gin-spacing-xxs: calc(0.25 * var(--clubm-admin-sidebar-rem));
    --gin-spacing-xs: calc(0.5 * var(--clubm-admin-sidebar-rem));
    --gin-spacing-s: calc(0.75 * var(--clubm-admin-sidebar-rem));
  }

  html[data-admin-toolbar="collapsed"] .admin-toolbar__content {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  html[data-admin-toolbar="collapsed"] .admin-toolbar__content::-webkit-scrollbar {
    display: none;
  }

  html[data-admin-toolbar="collapsed"] :is(#extra-specificity-hack, body.gin--core-navigation [data-drupal-admin-styles]).admin-toolbar .toolbar-button {
    padding-inline: calc(0.625 * var(--clubm-admin-sidebar-rem));
    padding-block: calc(0.5625 * var(--clubm-admin-sidebar-rem));
  }
}

.dark {
  --background: oklch(0.13 0.043 265.132);
  --foreground: oklch(1 0 89.876);
  --card: oklch(0.208 0.042 266.359);
  --card-foreground: var(--foreground);
  --primary: oklch(0.547 0.246 262.866);
  --primary-foreground: var(--foreground);
  --secondary: oklch(0.704 0.04 256.993);
  --secondary-foreground: oklch(0.13 0.043 265.132);
  --muted: oklch(0.28 0.041 260.329);
  --muted-foreground: oklch(0.967 0.003 264.542);
  --accent: oklch(0.932 0.032 255.585);
  --accent-foreground: oklch(0.13 0.043 265.132);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.373 0.031 259.733);
  --input: oklch(0.373 0.031 259.733);
  --font-sans: "Outfit", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 0.0625rem;
  --shadow-blur: 0.1875rem;
  --shadow-spread: 0rem;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 0.0625rem 0.1875rem 0rem hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 0.0625rem 0.1875rem 0rem hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 0.0625rem 0.1875rem 0rem hsl(0 0% 0% / 0.1), 0 0.0625rem 0.125rem -0.0625rem hsl(0 0% 0% / 0.1);
  --shadow: 0 0.0625rem 0.1875rem 0rem hsl(0 0% 0% / 0.1), 0 0.0625rem 0.125rem -0.0625rem hsl(0 0% 0% / 0.1);
  --shadow-md: 0 0.0625rem 0.1875rem 0rem hsl(0 0% 0% / 0.1), 0 0.125rem 0.25rem -0.0625rem hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 0.0625rem 0.1875rem 0rem hsl(0 0% 0% / 0.1), 0 0.25rem 0.375rem -0.0625rem hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 0.0625rem 0.1875rem 0rem hsl(0 0% 0% / 0.1), 0 0.5rem 0.625rem -0.0625rem hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 0.0625rem 0.1875rem 0rem hsl(0 0% 0% / 0.1), 0 0.75rem 0.875rem -0.0625rem hsl(0 0% 0% / 0.1);
}

.roll {
  --roll-duration: 1400ms;
  --roll-easing: cubic-bezier(0.2, 0.7, 0, 1);
  --roll-line-height: 1.25em;
  --roll-entry-delay-gap: 0.28em;
}

.roll__target {
  display: inline-flex;
  vertical-align: top;
}

.roll__clip {
  display: inline-flex;
  overflow: hidden;
  height: var(--roll-line-height);
}

.roll__track {
  display: flex;
  flex-direction: column;
  gap: var(--roll-entry-delay-gap);
  transition: transform var(--roll-duration) var(--roll-easing);
  will-change: transform;
}

.roll__line {
  display: flex;
  align-items: center;
  flex: 0 0 var(--roll-line-height);
  line-height: var(--roll-line-height);
  min-height: var(--roll-line-height);
  white-space: nowrap;
}

.roll.is-roll-active .roll__track {
  transform: translateY(calc(-1 * (var(--roll-line-height) + var(--roll-entry-delay-gap))));
}

button.roll[disabled] .roll__track,
button.roll[aria-disabled="true"] .roll__track {
  transform: none !important;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .roll__track {
    transition: none;
  }
}

.hover-zoom-image {
  overflow: hidden;
}

.hover-zoom-image > img {
  transition: transform 450ms ease;
  transform-origin: center center;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .hover-zoom-image:hover > img {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hover-zoom-image > img {
    transition: none;
  }
}

/*
 * Responsive visibility helpers.
 *
 * Use these instead of Tailwind's `.hidden` utility when mixing responsive
 * display classes in Drupal-rendered markup, because Drupal ships an
 * unlayered `.hidden { display: none; }` rule that can beat Tailwind's
 * layered utilities in the cascade.
 */
@media (max-width: 47.999rem) {
  .desktop-only {
    display: none !important;
  }
}

@media (min-width: 48rem) {
  .mobile-only {
    display: none !important;
  }
}

@media (max-width: 63.999rem) {
  body.not-default-node::after {
    top: 25vh;
    right: 0.75rem;
    min-width: 9.25rem;
    padding: 0.5625rem 0.875rem;
    font-size: 0.6875rem;
  }
}

svg {
  height: 100%;
  width: 100%;
}

.path-frontpage main section {
  margin: auto;
  height: calc(100vh - 7.375rem);
  display: flex;
  align-items: center;
  min-height: 31rem;
}

.path-frontpage:not(:has(.gin--navigation-top-bar)) main section {
  height: calc(100vh - 4rem);
}