@import "pico.min.css";
@import "pico.colors.min.css";

:root {
  /* Color scheme matching tierschutz-wsf.de live site */
  --ts-yellow:  var(--pico-color-amber-150);
  --ts-green:   var(--pico-color-green-600);
  --ts-blue:    var(--pico-color-blue-550);
  --ts-jade:    var(--pico-color-jade-600);
  --ts-text:    var(--pico-color-zinc-700);
  --ts-footer-bg: var(--pico-color-grey-50);
  --ts-footer-link: var(--ts-jade);

  /* Typography */
  --pico-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pico-font-size: 110%;

  /* Spacing */
  --pico-spacing: 1rem;

  /* Primary palette (links, buttons) - teal, matching the warm theme */
  --pico-primary:                  var(--ts-jade);
  --pico-primary-background:       var(--ts-jade);
  --pico-primary-border:           var(--ts-jade);
  --pico-primary-hover-background: var(--ts-jade);
  --pico-primary-hover-border:     var(--ts-jade);
  --pico-primary-inverse:          #ffffff;

  /* Page background & base text */
  --pico-background-color: #ffffff;
  --pico-color:            var(--ts-text);

  /* Headings - teal */
  --pico-h1-color: var(--ts-jade);
  --pico-h2-color: var(--ts-jade);
  --pico-h3-color: var(--ts-jade);
  --pico-h4-color: var(--ts-jade);
  --pico-h5-color: var(--ts-jade);
  --pico-h6-color: var(--ts-jade);

  /* Nav spacing */
  --pico-nav-link-spacing-vertical:   0.15rem;
  --pico-nav-link-spacing-horizontal: 0.5rem;

  /* Form elements */
  --pico-form-element-spacing-vertical:   0.25rem;
  --pico-form-element-spacing-horizontal: 0.5rem;
}

:root:not([data-theme=dark]),
[data-theme=light] {
  --pico-primary:                  var(--ts-jade);
  --pico-primary-background:       var(--ts-jade);
  --pico-primary-border:           var(--ts-jade);
  --pico-primary-hover-background: var(--ts-jade);
  --pico-primary-hover-border:     var(--ts-jade);
  --pico-primary-inverse:          #ffffff;

  --pico-h1-color: var(--ts-jade);
  --pico-h2-color: var(--ts-jade);
  --pico-h3-color: var(--ts-jade);
  --pico-h4-color: var(--ts-jade);
  --pico-h5-color: var(--ts-jade);
  --pico-h6-color: var(--ts-jade);
}

body {
  padding: 0;
  background-color: #ffffff;
  color: var(--ts-text);
}

/* Selection - teal accent */
::selection {
  color: #ffffff;
  background: var(--ts-jade);
}

/* Sticky header with yellow navbar */
body > header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: 0;
  background-color: var(--ts-yellow);
}

header > nav {
  background-color: transparent;
  margin: 0;
  padding: 0.5rem 1rem;
}

header > nav a {
  color: var(--ts-jade);
}

header > nav a:hover,
header > nav a:active {
  color: var(--ts-jade);
}

header h1 {
  margin: 0;
  margin-top: 0;
  padding: 0.5rem 1rem;
  --pico-typography-spacing-top: 0;
  display: flex;
  align-items: center;
  gap: 0.4em;
  color: var(--ts-jade);
}

#site-logo {
  height: 3em;
  width: auto;
  vertical-align: middle;
}

header h1 a,
header h1 a:hover,
header h1 a:active {
  color: var(--ts-jade);
  text-decoration: none;
}

/* Page footer */
body > footer {
  background-color: var(--ts-footer-bg);
  border-top: 1px solid var(--pico-color-grey-200);
  padding: 0.5rem 1rem;
}

body > footer a {
  color: var(--ts-footer-link);
}

body > footer form {
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
}

body > footer input[type="text"],
body > footer input[type="submit"] {
  font-size: 0.85rem;
  height: auto;
  margin-bottom: 0;
}

/* Side navigation */
body > aside > nav {
  min-width: 16em;
  padding-left: 1rem;
  background-color: var(--ts-footer-bg);
  --pico-nav-element-spacing-vertical: 0.25rem;
}

body > aside > nav ul {
  margin-block: 0;
}

body > aside > nav li {
  margin-block: 0;
}

body > aside > nav a {
  color: var(--ts-text);
  text-transform: capitalize;
}

body > aside > nav a:hover,
body > aside > nav a:active {
  background-color: var(--ts-jade);
  color: #ffffff;
}

/* Article */
article {
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
}

.grid:has(> article) {
  grid-template-columns: repeat(auto-fill, 200px);
  justify-content: start;
}

.grid > article {
  width: 200px;
  height: 350px;
  overflow: hidden;
}

article h2,
article h3,
article h4 {
  color: var(--ts-jade);
}

body > article {
  padding-left: 3rem;
  background: transparent;
  box-shadow: none;
}

article footer {
  display: flex;
  flex-direction: column;
}

article footer a {
  text-transform: capitalize;
}

.dir-list a {
  text-transform: capitalize;
}

article a:hover,
article a:active {
  background-color: var(--ts-jade);
  color: #ffffff;
  text-decoration: none;
}

/* PayPal donate button (and similar image inputs) - Pico forces
   width:100% and a fixed form-element height on inputs, which
   stretches the image out of proportion. Let it keep its own size. */
article input[type="image"] {
  width: auto;
  height: auto;
  max-width: 100%;
}

/* No dark mode support */