/* Override BeerCSS theme colors with brand codes */
:root,
body.light {
  /* Primary – Baksteen (brick red) */
  --primary: #A22C2A;
  --on-primary: #FFFFFF;
  --primary-container: #D99C9A;
  --on-primary-container: #4D1A18;

  /* Secondary – Antraciet (dark grey) */
  --secondary: #121214;
  --on-secondary: #FFFFFF;
  --secondary-container: #333237;
  --on-secondary-container: #FFFFFF;

  /* Tertiary – Beton (concrete grey) */
  --tertiary: #C3BAB8;
  --on-tertiary: #000000;
  --tertiary-container: #E2DDDA;
  --on-tertiary-container: #000000;

  /* Brand white (Kalei) as general background */
  --background: #F6F6F7;
  --on-background: #333333;
  --surface: #FFFFFF;
  --on-surface: #333333;
}

body.dark {
  /* Primary – softened for dark contrast */
  --primary: #E17B79;
  --on-primary: #3F100F;
  --primary-container: #4D1A18;
  --on-primary-container: #D99C9A;

  /* Secondary – Using brand white (Kalei) in dark theme */
  --secondary: #F6F6F7;
  --on-secondary: #121214;
  --secondary-container: #EAEAEA;
  --on-secondary-container: #121214;

  /* Tertiary – concrete grey */
  --tertiary: #C3BAB8;
  --on-tertiary: #000000;
  --tertiary-container: #7F7D7C;
  --on-tertiary-container: #FFFFFF;

  /* Dark theme foundational colors */
  --background: #121214;
  --on-background: #E7E5E4;
  --surface: #1C1917;
  --on-surface: #E7E5E4;
  --surface-variant: #333237;
  --on-surface-variant: #D6D3D1;
  --outline: #78716C;
  --outline-variant: #44403C;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #E7E5E4;
  --inverse-on-surface: #121214;
  --surface-dim: #121214;
  --surface-bright: #333237;
  --surface-container-lowest: #0F0E0D;
  --surface-container-low: #121214;
  --surface-container: #1C1917;
  --surface-container-high: #2E2826;
  --surface-container-highest: #373534;
}

/* Smooth transitions for theme switches */
body.light,
body.dark {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Custom form styling overrides */
fieldset {
  border-radius: 1.75rem;
  border: .0625rem solid var(--outline);
  display: flex;
  flex-direction: column;
}

fieldset > legend {
  font-size: .75rem;
  margin: 0 .5rem;
  padding: .125rem;
}

fieldset > nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  gap: .5rem;
  padding: .0rem .75rem;
}

fieldset > nav label {
  min-height: 1.5rem;
  padding: 0;
}

fieldset > nav label.radio > span {
  padding-left: 0.125rem;
}

/* Custom geocoder styling */
.leaflet-control-geocoder-form input {
  color: #000 !important;
}

.leaflet-control-geocoder-alternatives {
  color: #000 !important;
  background: #fff !important;
}

.leaflet-control-geocoder-alternatives li:hover {
  background-color: #f4f4f4 !important;
}

/* Custom textarea auto-grow styling */
.field.textarea {
  height: auto;
  min-height: var(--_size);
}

.field.textarea textarea {
  resize: none;
  overflow: hidden;
  min-height: var(--_size);
  height: auto;
  box-sizing: border-box;
  line-height: 1.5;
  padding-top: calc(var(--_start) - .5rem);
}

/* Ensure the textarea container grows with its content */
.field.textarea.large {
  height: auto;
  min-height: var(--_size);
}

/* Custom textarea auto-grow styling */
.field.textarea textarea {
  resize: none;
  overflow: hidden;
  height: 2rem;
}

/* Logo theme switching */
.logo-dark {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.logo-light {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

body.dark .logo-dark {
  display: block;
}

body.dark .logo-light {
  display: none;
}

/* Logo container */
.logo-container {
  position: relative;
  display: inline-block;
}