/* papasmirnoff — shared custom styles (the bits Tailwind utilities don't cover) */

body {
  background-color: #121414;
  color: #fff;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Subtle film-grain texture over the whole page */
.noise-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/noise.png");
  opacity: 0.05;
  z-index: 50;
}

/* Fade the hero image into the background at the bottom */
.hero-gradient {
  background: linear-gradient(0deg, rgba(18, 20, 20, 1) 0%, rgba(18, 20, 20, 0) 50%);
}

.technical-border {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Input fields: dark charcoal, bottom-only border that glows white on focus.
   Selectors are scoped to the element + class so they outrank the Tailwind
   forms-plugin defaults that target [type='text'] etc. */
input.studio-input,
textarea.studio-input,
select.studio-input {
  background-color: #1b1c1c;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom-width: 2px;
  border-radius: 0;
  color: #e3e2e2;
  width: 100%;
  padding: 16px;
  outline: none;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
input.studio-input::placeholder,
textarea.studio-input::placeholder {
  color: #8e9192;
}
input.studio-input:focus,
textarea.studio-input:focus,
select.studio-input:focus {
  border-bottom-color: #ffffff;
  --tw-ring-color: transparent;
  box-shadow: none;
}

/* Honeypot field — hidden from humans, catches bots */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}