/* forms.css - shared form styling for every page.
   1) Text-entry fields: dark text on white (readable on any theme)
   2) Brevo newsletter signup block (same look on every page)          */

/* ---- 1. All text-entry fields ---- */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  color: #1a1a1a !important;
  background-color: #ffffff !important;
  caret-color: #1a1a1a;
}
input::placeholder,
textarea::placeholder {
  color: #666666 !important;
  opacity: 1;
}

/* ---- 2. Brevo newsletter block ---- */
:where(.sib-form-message-panel) { display: none; }
:where(.sib-form-message-panel .sib-notification__icon) { width: 20px; height: 20px; }

#sib-form-container, #sib-form-container * {
  font-family: 'Courier New', monospace !important;
}
/* The three nested wrappers Brevo's own stylesheet paints white by default.
   All three need covering: .sib-form is the outermost div, #sib-form-container
   sits inside it, and #sib-container is inside that. An earlier version of
   this file only covered #sib-container, which is why the card still showed
   a white box, the selector for the outer two never matched anything. */
.sib-form,
#sib-form-container,
#sib-container {
  background-color: transparent !important;
}
#sib-container {
  border-color: rgba(255,255,255,0.4) !important;
  border-radius: 0 !important;
}
#sib-container .sib-form-block,
#sib-container .sib-text-form-block,
#sib-container .entry__label,
#sib-container .entry__specification,
#sib-container .sib-form__declaration {
  color: inherit !important;
  background-color: transparent !important;
}
#sib-container input.input {
  color: #1a1a1a !important;
  background-color: #ffffff !important;
  border: 1px solid #888888 !important;
}
#sib-container .sib-form-block__button {
  background-color: transparent !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  color: inherit !important;
}
#sib-container a { text-decoration: underline; color: #2BB2FC; }

/* Text sizes (kept out of inline styles so they can scale up on phones) */
#sib-container .nl-heading   { font-size: 22px; font-weight: 700; text-align: left; }
#sib-container .nl-text      { font-size: 16px; text-align: left; }
#sib-container .nl-label     { font-size: 16px; font-weight: 700; text-align: left; }
#sib-container .nl-consent   { font-size: 15px; text-align: left; }
#sib-container .nl-fineprint { font-size: 13px; text-align: center; display: block; margin-top: 6px; }
#sib-container .nl-declare   { font-size: 12px; text-align: left; opacity: 0.8; }
#sib-container .sib-form-block__button { font-size: 16px; font-weight: 700; }
#sib-form-container .sib-form-message-panel { line-height: 1.4; }

@media (max-width: 640px) {
  #sib-container .nl-heading   { font-size: 22px; }
  #sib-container .nl-text      { font-size: 18px; }
  #sib-container .nl-label     { font-size: 18px; }
  #sib-container .nl-consent   { font-size: 17px; }
  #sib-container .nl-fineprint { font-size: 15px; }
  #sib-container .nl-declare   { font-size: 14px; }
  #sib-container .sib-form-block__button { font-size: 18px; }
  #sib-container input.input   { font-size: 18px; }
  #sib-form-container .sib-form-message-panel { font-size: 18px !important; }
}

/* ---- Click-to-load embed facades (SoundCloud / YouTube) ---- */
.embed-facade {
  border: 1px dashed var(--terminal-green, #39ff14);
  padding: 24px 16px;
  text-align: center;
  background-color: rgba(5, 5, 5, 0.6);
}
.embed-facade p {
  margin: 0 0 10px 0;
  opacity: 0.85;
}
.embed-facade-btn {
  background-color: transparent;
  border: 1px solid var(--terminal-green, #39ff14);
  color: inherit;
  font-family: inherit;
  font-weight: bold;
  padding: 8px 16px;
  cursor: pointer;
}
.embed-facade-btn:hover {
  background-color: var(--terminal-green, #39ff14);
  color: var(--bg-black, #050505);
}
.embed-facade-note {
  font-size: 0.75em;
  opacity: 0.6;
  margin-top: 10px !important;
}