/**
 * @file theme.css
 * 1A Parco-Service – Markenfarben für das Mercury-Theme (Drupal CMS).
 *
 * Farben aus dem Logo: Cyan #2EADC7 ("1A") und Anthrazit #4F4F4F.
 * Die Primärfarbe ist ein abgedunkeltes Logo-Cyan (#137F96), damit weiße
 * Schrift auf Buttons den WCAG-AA-Kontrast erfüllt.
 *
 * Mercury lädt diese Datei automatisch, weil sie neben index.php liegt.
 * Änderungen sind nach "drush cr" sofort sichtbar.
 */

:root {
  /* Markenfarben */
  --parco-cyan: #2eadc7;
  --parco-cyan-dark: #137f96;
  --parco-cyan-light: #e7f6fa;
  --parco-anthracite: #4f4f4f;
  --parco-anthracite-dark: #333333;

  --background: #ffffff;
  --foreground: #3c3c3c;
  --card: #f4f8fa;
  --card-foreground: #333333;
  --primary: var(--parco-cyan-dark);
  --primary-foreground: #ffffff;
  --secondary: var(--parco-anthracite);
  --secondary-foreground: #ffffff;
  --muted: #f3f5f7;
  --muted-foreground: #3c3c3c;
  --accent: var(--parco-cyan-light);
  --accent-foreground: #333333;
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: #d5dde2;
  --input: #c3ccd2;
  --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: "Inter", Arial, Helvetica, sans-serif;
  --radius: 0.375rem;
  --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;

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

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

.dark {
  --background: #1f2326;
  --foreground: #f2f4f5;
  --card: #2a3035;
  --card-foreground: var(--foreground);
  --primary: var(--parco-cyan);
  --primary-foreground: #1f1f1f;
  --secondary: #d5dde2;
  --secondary-foreground: #1f1f1f;
  --muted: #2a3035;
  --muted-foreground: #f2f4f5;
  --accent: #123f49;
  --accent-foreground: #f2f4f5;
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1 0 0);
  --border: #3d464d;
  --input: #3d464d;
  --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.375rem;
  --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);
}

/**
 * Textseiten (Inhaltstyp "Basisseite": Impressum, Datenschutz, AGB,
 * Cookie-Richtlinie): kompaktere Überschriften für lange Rechtstexte.
 */
.page-node-type-page h1 {
  font-size: clamp(2rem, 1.5rem + 1.5vw, 2.5rem);
  line-height: 1.2;
}
.page-node-type-page main h2 {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  line-height: 1.3;
}
.page-node-type-page main h3 {
  font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  line-height: 1.35;
}
.page-node-type-page main h4 {
  font-size: 1.0625rem;
  line-height: 1.4;
}
.page-node-type-page main table {
  width: 100%;
  margin-block: 1rem 1.5rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.page-node-type-page main th,
.page-node-type-page main td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.page-node-type-page main th {
  background: var(--accent);
  font-weight: 600;
}