/* ============================================================
   AK newsletter embed — styling for the systeme optin FORM PAGE
   (the form loaded inside the footer iframe, id "form-container-2").

   This file is loaded by a <link> injected into the FORM PAGE's own
   custom head (NOT the homepage). The page renders inside a transparent
   iframe sitting on the dark (ink) footer, so the form is styled for a
   dark surface: translucent cream input + terracotta button.

   Served from: https://kacperkijno.github.io/august-styles/form-embed.css
   ============================================================ */

/* Let the dark footer show through the iframe */
body { background: transparent !important; }

/* --- Fill the iframe width + compact the layout ----------------------------
   The optin page wraps the form in a ~300px centred container, so the field
   ended up double-inset (300px box centred inside the iframe, on top of the
   homepage's own 16px padding → ~50px from the screen edge). Kill every
   max-width so the form fills the iframe, and drop top spacing / vertical
   centring so the field sits near the top (the iframe auto-sizes to content,
   which also shrinks the gap above it on the homepage). */
html, body { margin: 0 !important; padding: 0 !important; width: 100% !important; }
body div { max-width: 100% !important; }
body > div { min-height: 0 !important; padding-top: 0 !important; justify-content: flex-start !important; }
input:not([type="submit"]):not([type="button"]),
button, [type="submit"] { width: 100% !important; }

/* Email input — translucent on dark, cream text + border (mockup on-dark) */
input:not([type="submit"]):not([type="button"]) {
  background: rgba(249, 247, 241, 0.08) !important;
  border: 1px solid rgba(249, 247, 241, 0.22) !important;
  border-radius: 8px !important;
  height: 54px !important;
  color: #F9F7F1 !important;
  font-size: 15px !important;
  padding: 0 16px !important;
  box-shadow: none !important;
}
input::placeholder { color: rgba(249, 247, 241, 0.55) !important; }
input:focus { outline: none !important; border-color: rgba(249, 247, 241, 0.5) !important; }

/* Submit button — terracotta, matches the input height + brand radius */
button, [type="submit"] {
  background: #B46A3C !important;
  color: #F9F7F1 !important;
  border: none !important;
  border-radius: 8px !important;
  height: 54px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  transition: background .2s ease !important;
}
button:hover, [type="submit"]:hover { background: #9A5530 !important; }