/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Haven Theme.
 *
 * 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(0.952 0 89.876);
  --foreground: oklch(0.321 0 89.876);
  --card: oklch(1 0 89.876);
  --card-foreground: oklch(0.321 0 89.876);
  --primary: oklch(58% 40% 149deg);
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(55% 57% 29deg);
  --secondary-foreground: oklch(1 0 89.876);
  --muted: oklch(0.925 0 89.876);
  --muted-foreground: oklch(0.321 0 89.876);
  --accent: oklch(75% 23% 209deg);
  --accent-foreground: oklch(0.321 0 89.876);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.321 0 89.876);
  --input: oklch(0.872 0.009 258.338);
  --font-sans: "Geist", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: "Gelasio", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 1rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* Extra color variants for primary, secondary and accent */
  /* color-mix() blends two colors in a specified color space. */
  /* Syntax: color-mix(in <colorspace>, <color1> <percentage>, <color2>) */
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/color_value/color-mix */
  --primary-light: color-mix(in oklch, var(--primary) 80%, white);
  --primary-dark: color-mix(in oklch, var(--primary) 80%, black);
  --secondary-light: color-mix(in oklch, var(--secondary) 90%, white);
  --secondary-dark: color-mix(in oklch, var(--secondary) 85%, black);
  --accent-light: color-mix(in oklch, var(--accent) 95%, white);
  --accent-dark: color-mix(in oklch, var(--accent) 95%, black);

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

  --logo-width: 45vw;
  @media (min-width: 576px) {
    --logo-width: 220px;
  }
  @media (min-width: 768px) {
    --navbar-height: calc(var(--spacing) * 20);
  }
  @media (min-width: 1280px) {
    --navbar-height: calc(var(--spacing) * 22);
  }
  --logo-oc-width: calc(var(--logo-width) / 3);
}

body { background: linear-gradient(112deg, #62bfcd 0%, #b3d9de 100%); }
body { background: linear-gradient(212deg, #62bfcd 0%, #02923f 70%, #b3d9de 100%) no-repeat; min-height: 100vh; }
.site-footer a { color: black; }
.region-header, .layout-content { background-color: unset; }
.oc-adac { xxoutline: 1px solid blue; margin: 42px 0 21px; }
.oc-adac-h { xxoutline: 1px solid blue; margin: 0 42px; }
.layout-content h1 { text-shadow: 0 0 8px rgba(0, 0, 0, .9); }
.nav-logo { xxbackground: white; xxz-index: 550; }
.xxnavbar { border-bottom: 3px solid orange; box-shadow: 0 0 0 6px #aaa, 0 0 0 12px #888;}
/* :is(.navbar--logo, .navbar--modal-logo) .branding { calc(var(--spacing)*7) } */
:is(.xxxnavbar--logo, .navbar--modal-logo) .branding { height: 180px; }
.xxlayout-content .region-content section:first-of-type { outline: 3px solid orange; }
.xxregion-header { background-color: purple; clip-path: path("M 0 160 L 120 144 C 240 128 480 96 720 106.7 C 960 117 1200 171 1320 197.3 L 1440 224 L 1440 0 L 1320 0 C 1200 0 960 0 720 0 C 480 0 240 0 120 0 L 0 0 Z"); border: 3px solid black;}

.xxregion-header { background-color: orange; clip-path: path("M0.711610 0.000000 L0.000000 0.000000 L0.000000 1.000000 L0.036205 1.000000 C0.236734 1.000000 0.474254 0.995384 0.616300 0.903054 L0.744070 0.837408 L0.832919 0.775213 L0.888889 0.718826 L0.978516 0.642045 L10.056641 0.578125 L10.127663 0.082741 L10.131214 0.006392 L0.711610 0.000000 Z");}
.xxxcontainer-nav-logo {
  position: relative;
  min-height: 370px; /* flexibel statt fixe Höhe */
  margin-bottom: 1rem;
}

/* Basis für beide Bilder */
.xxxcontainer-nav-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Bild 1 (zentriert) */
.xxximg-center {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

/* Bild 2 (rechts) */
.xxximg-right {
  position: absolute;
  left: 0;
  bottom: 0; /* vertikal unten */
  margin-left: 20px; /* Abstand (xy) */
}
.xxximg-right {
  position: absolute;
  left: calc(50% + 90px + 45px); /* Abstand xy */
  transform: translateX(calc(50% + 90px + 45px));
  bottom: 0;
  max-width: 40%; /* verhindert Überlappen auf kleineren Screens */
}

/* Container */
.container-nav-logo {
  position: relative;       /* Anker für absolut positioniertes Bild 2 */
  display: flex;
  align-items: flex-end;    /* Bild 1 vertikal unten */
  justify-content: center;  /* Bild 1 horizontal zentriert */
  padding: 0.5rem 0 1rem;
}
.logo { width: var(--logo-width); }
/* TODO: remove logo size calc stuff, when  r e a l l y  not needed... */
.logo-circle { height: 22rem; }

/* Bild 2 */
.ocadac {
  width: var(--logo-oc-width);
  position: absolute;
  left: calc(50% + var(--logo-width) / 2 + var(--logo-oc-width) / 2); /* 50% + halbe Breite Bild 1 + Abstand xy */
  bottom: 1rem;                       /* vertikal unten bündig */
}
.navbar--modal-top, .navbar--dropdown-menu-wrapper, .navbar--links { background: white; }
.view-sponsorlist a > div { background: white; padding: 0.5rem; margin: 0.5rem; border-radius: 0.5rem; height: 7rem; text-align: center; vertical-align: center; }

/* down from here - copied to haven theme css live ;-) for preview sponsorlist */
@media (max-width: 1024px) {
  .view-sponsorlist .views-view-responsive-grid {
    --views-responsive-grid--column-count: 4 !important;
  }
}
/* Cap at 2 columns on mobile */
@media (max-width: 600px) {
  .view-sponsorlist .views-view-responsive-grid {
    --views-responsive-grid--column-count: 2 !important;
  }
}

/* Normalize all logo cells to a fixed aspect box */
.view-sponsorlist .views-view-responsive-grid__item-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  /* Fixed height box — logos fill it without stretching */
  height: 100px;
  background: #fff;           /* optional: white bg makes transparent logos readable */
  border: 1px solid #eee;     /* optional: subtle card border */
  border-radius: 4px;         /* optional */
}

/* The <a> tag wraps the image — make it fill the cell */
.view-sponsorlist .views-view-responsive-grid__item-inner a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* The magic: images scale to fit their box, never stretch or overflow */
.view-sponsorlist .views-view-responsive-grid__item-inner img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

main nav { display: none; }
.region-content > section > h1 { color: white; text-shadow: 0 0 8px rgba(0, 0, 0, .9); }
body.page-node-type-page main .container, .protected-page, .ach-intern { background-color: rgba(255,255,255,0.9); border-radius: var(--radius); padding-bottom: calc(var(--spacing) * 6); }
body.page-node-type-page main .container h1 { color: var(--color-foreground); text-shadow: unset; padding: 1rem 0; }
.protected-page section { width: min-content; }
.protected-page input { border-width: 1px; margin-bottom: 1rem;}
.ach-intern article { margin-top: 1rem; font-size: var(--text-xl); line-height: 250%; }
.view-events-future .views-row, .view-events-past .views-row { display: flex; flex-direction: row; gap: 1.5rem; margin: 1rem 0; }
.view-events-future h2 { font-size: var(--text-3xl); margin-bottom: 1rem; }
.field--event-date {
  flex: 0 1 160px;
  background-color: rgba(255,255,255,0.9);
  border: 1px solid var(--accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 10rem;
  height: fit-content;
  padding: 1rem;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.field--event-date .event-date-day { font-size: 300%; line-height: 90%; }
.field--event-date .event-date-month { font-size: 170%; }
.field--event-date .event-date-day { line-height: 90%; }
.field--event-date .event-date-time { font-size: 200%; }
.event-location svg { display: inline-block; }

.event-detail .photoswipe-gallery { width: 920px; } /* 'calculated' from views settings 3x 300px + 2x 10px */

@media screen and (max-width: 1289px) {
  .event-detail .photoswipe-gallery { width: 610px; }
}
@media screen and (max-width: 1024px) {
  .event-detail .photoswipe-gallery { width: 300px; }
}
@media screen and (max-width: 767px) {
  .navbar--links { height: 5rem; }
  .view-events-future .views-row, .view-events-past .views-row { flex-direction: column; align-items: center; }
  .event-detail { text-align: center; justify-items: center; }
}

/* TODO: one size fits all... but not nav! see main.min.css */
.view-events-future a, .views-element-container a, main a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--primary); }

section h2, section h3 { margin-top: 1rem; }
.mx-8 { margin-block: calc(var(--spacing)*8); }
/* TODO: print css, no BG color, nice to use for events preview */