/**
 * Custom CSS overrides for Pico CSS
 * Using CSS variables for higher information density
 */

:root {
  /* Typography - Reduce font sizes */
  --pico-font-size: 14px;
  --pico-line-height: 1.4;
  --pico-font-weight: 400;

  /* Headings - Make them smaller */
  --pico-font-size-h1: 1.5rem;
  --pico-font-size-h2: 1.25rem;
  --pico-font-size-h3: 1.1rem;
  --pico-font-size-h4: 1rem;
  --pico-font-size-h5: 0.95rem;
  --pico-font-size-h6: 0.9rem;

  /* Typography spacing */
  --pico-typography-spacing-vertical: 0.75rem;

  /* Spacing - Reduce padding and margins */
  --pico-spacing: 0.75rem;
  --pico-block-spacing-vertical: 0.75rem;
  --pico-block-spacing-horizontal: 0.75rem;

  /* Form elements - Make them more compact */
  --pico-form-element-spacing-vertical: 0.5rem;
  --pico-form-element-spacing-horizontal: 0.75rem;

  /* Buttons - Make them smaller */
  --pico-border-radius: 0.25rem;

  /* Nav - Reduce padding */
  --pico-nav-element-spacing-vertical: 0.5rem;
  --pico-nav-element-spacing-horizontal: 0.75rem;
  --pico-nav-link-spacing-vertical: 0.5rem;
  --pico-nav-link-spacing-horizontal: 0.75rem;

  /* Tables - More compact */
  --pico-table-border-width: 1px;
}

/* Additional overrides for specific elements */
body {
  font-size: var(--pico-font-size);
  line-height: var(--pico-line-height);
}

/* Compact container */
.container {
  padding: var(--pico-spacing);
}

/* Tighter article spacing */
article {
  padding: var(--pico-spacing);
  margin-bottom: var(--pico-block-spacing-vertical);
}

/* Smaller buttons */
button,
[type="button"],
[type="submit"],
[type="reset"],
[role="button"],
a[role="button"] {
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  font-size: 0.9rem;
}

/* Compact form elements */
input,
select,
textarea {
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  font-size: 0.9rem;
}

/* Tighter hgroup spacing */
hgroup {
  margin-bottom: var(--pico-typography-spacing-vertical);
}

hgroup > * {
  margin-bottom: 0.25rem;
}

/* Compact tables */
table {
  font-size: 0.9rem;
}

th,
td {
  padding: 0.5rem 0.75rem;
}

/* Tighter nav spacing */
nav ul li {
  padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal);
}

/* Smaller footer */
footer {
  padding: var(--pico-spacing);
  font-size: 0.85rem;
}

/* Reduce header/footer margins */
header.container,
footer.container {
  padding-top: var(--pico-spacing);
  padding-bottom: var(--pico-spacing);
}

main.container {
  padding-top: var(--pico-spacing);
  padding-bottom: var(--pico-spacing);
}

/* User avatar dropdown */
.user-avatar {
  padding: 0.5rem;
  width: 42px;
  height: 42px;
  border-radius: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
}

details.dropdown[open] summary {
  margin-bottom: 0;
}

details.dropdown ul {
  min-width: 200px;
}

details.dropdown ul li small {
  display: block;
  padding: 0.25rem 0.5rem;
}