/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Mercury.
 *
 * 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.9817 0.0136 92.979); /* #FCF9EF */
  --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.13 0.043 265.132);
  --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);
  --border: oklch(0.872 0.009 258.338);
  --input: oklch(0.872 0.009 258.338);
  --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;
  --font-body: "Saira", Arial, Helvetica, sans-serif;
  --radius: 0.5rem;
  --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;

  /* Underline under page titles (h1) and block titles (h3 via
     templates/block/*.html.twig) - kept as separate variables so either
     can be overridden per-page/section later (e.g. the front page having
     its own color) without duplicating the border-bottom rule itself. */
  --page-title-line-color: #afbc66;
  --page-title-line-height: 0.1875rem;
  --block-title-line-color: #afbc66;
  --block-title-line-height: 0.1875rem;

  /* Button color - separate token from the title-line colors above even
     though it currently matches, since these may diverge later. Main
     menu is excluded on purpose - its color/style isn't decided yet and
     may end up being a different treatment entirely, not just a color. */
  --button-primary-color: #4d6b4a;

  /* Document download button (file fields, e.g. field_dokument) - own
     token since it's a visually distinct button type, not the same
     "primary" action as --button-primary-color. */
  --button-document-color: #c97b2b;

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

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

/* Bump base body text from Tailwind's default 16px (1rem) to 18px (1.125rem)
   for readability; line-height stays at the same 1.5 ratio (scales to ~27px).
   font-family explicitly repeated here (not just relying on --font-body's
   value): Tailwind's own compiled preflight sets --default-font-family to
   --font-sans and applies it directly, competing with the body{font-family:
   var(--font-body)} rule that's also inside that same layered build - since
   this file loads unlayered, it wins outright over whichever of those two
   Tailwind's own internal cascade order would otherwise pick. */
body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.5;
}

/*
 * Heading font split: H1-H3 (page titles, major section headers, block
 * titles - including the front-page/Kontakt block headers and the
 * "related content" sidebar headings, since H3 is the generic block-title
 * tag site-wide) get a distinct display font; H4 and smaller fall back to
 * the body font instead - a calligraphy/script face reads poorly at small
 * structural sizes like a link list. Same unlayered-CSS-wins-over-
 * Tailwind's-layers mechanism as the body font-family fix above.
 */
h1,
h2,
h3 {
  font-family: "Ephesis", cursive;
}

/*
 * Ephesis (script face) reads visually smaller than its own font-size
 * number suggests, compared to the sans body text - a 24px/32px H3
 * (Tailwind's responsive text-2xl/xl:text-3xl) actually looked SMALLER
 * than 18px body text at a glance. Bumped to a flat 30px at all
 * breakpoints for now (was 24px mobile / 32px at xl:) - trial value,
 * not responsive yet.
 */
h3 {
  font-size: 1.875rem; /* 30px */
}

h4,
h5,
h6 {
  font-family: var(--font-body);
}

.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: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 12px 14px -1px hsl(0 0% 0% / 0.1);
}

/*
 * Global default: any plain link underlines on hover (front-page column
 * links, body-text links, Views listing titles, sidebar links, etc).
 * Excludes links styled as buttons/nav pills, which keep their own
 * hover treatment (background highlight) instead.
 */
a:hover {
  text-decoration: underline;
}

.primary-menu-wrapper a:hover,
.sundmused-view-all:hover {
  text-decoration: none;
}

/*
 * Accordion title bar: footer cream instead of the base theme's gray
 * (bg-card / hover:bg-muted in components/accordion/accordion.twig).
 * Plain unlayered rule, so it wins over Tailwind's layered utilities.
 */
.accordion--title {
  background-color: #f1ebdd; /* same as .site-footer in footer.css */
  color: var(--foreground);
}

/*
 * The title button sits inside an <h3>, which theme.css sets to Ephesis, and
 * admin-ui.css's ".layout-builder *" rule would also override plain inheritance
 * in the editor preview - so set the body font (bold) on the button itself,
 * with button.accordion--title's extra element specificity to win either way.
 */
button.accordion--title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.35rem;
}

.accordion--title:hover {
  background-color: #e8e0cd;
}