@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap');

/* =====================================================================
   Healing Heroes Hawaii -- Wufoo form stylesheet (DUAL PURPOSE)
   =====================================================================
   This file serves two contexts:

   CONTEXT 1: Parent-page wrapper
   Loaded by the contact page via:
     <link rel="stylesheet" href="/media/css/wufoo.css">
   Only the `.hhh-wufoo` rules at the top apply -- they style the
   iframe's outside (radius, shadow, max-width, centering).

   CONTEXT 2: Wufoo iframe (the form itself)
   Loaded BY Wufoo INTO the form's iframe. To wire this up:
     Wufoo admin -> Forms -> z1l6unu61s0f1ov -> Form Theme ->
       paste this URL in the "Stylesheet URL" field:

         Production:
           https://www.healingheroeshawaii.org/media/css/wufoo.css

         Dev / staging:
           https://healingheroeshawaii-kakaako.rane.works/media/css/wufoo.css

     Wufoo fetches the URL and applies it inside the iframe. All
     `.hhh-wufoo` rules become no-ops there (no wrapper exists);
     the inner-form rules below target Wufoo's standard markup
     directly.

   IMPORTANT: Wufoo's CSS-URL loader requires HTTPS.
===================================================================== */


/* ===================================================================
   CONTEXT 1 -- Parent-page wrapper rules
   No-ops inside the Wufoo iframe (no `.hhh-wufoo` element there).
=================================================================== */

.hhh-wufoo {
  max-width: 760px;
  margin: 0 auto;
}
.hhh-wufoo > div[id^="wufoo-"] {
  border-radius: 12px;
  overflow: hidden;
}
.hhh-wufoo iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(11, 42, 74, 0.08);
}


/* ===================================================================
   CONTEXT 2 -- Wufoo iframe inner form theme
   Selectors target Wufoo's standard rendered markup directly.
   Specificity is boosted with `!important` because Wufoo ships
   its own default theme stylesheets that load with higher
   ancestor-specificity (body.wufoo, etc.) -- without !important
   our rules lose to theirs in many cases.
=================================================================== */

:root {
  --hhh-deep-navy:   #0B2A4A;
  --hhh-ocean-blue:  #1F6FB2;
  --hhh-aqua:        #5BC0EB;
  --hhh-soft-sand:   #F2EBDC;
  --hhh-muted-gold:  #C8A96A;
  --hhh-text:        #1d2733;
  --hhh-text-muted:  #5a6779;
  --hhh-error:       #b71c1c;
}

/* Iframe body */
body,
body.wufoo,
html body {
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  background: transparent !important;
  color: var(--hhh-text) !important;
  margin: 0 !important;
  padding: 16px !important;
  -webkit-font-smoothing: antialiased;
}

/* Wufoo's container wrappers */
.wufoo,
form#form1,
form.wufoo,
#container1,
#container {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Hide the form-title header (page already shows "Send us a message.") */
header.info,
#header.info,
.info {
  display: none !important;
}

/* Section dividers */
li.section {
  margin: 28px 0 14px !important;
  padding: 0 0 8px !important;
  border-bottom: 1px solid rgba(11, 42, 74, 0.10) !important;
  background: transparent !important;
}
li.section h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: var(--hhh-deep-navy) !important;
  font-size: 1.05rem !important;
  margin: 0 0 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
li.section div {
  color: var(--hhh-text-muted) !important;
  font-size: 0.9rem !important;
}

/* Field rows */
ul,
form ul,
ul li,
li.notranslate {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
form ul > li {
  margin-bottom: 18px !important;
}

/* Labels -- uppercase tracked Montserrat eyebrow */
label.desc,
legend.desc {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  color: var(--hhh-deep-navy) !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 6px !important;
}

/* Per-option labels on radio/checkbox groups (NOT the field label) */
label.choice {
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 500 !important;
  color: var(--hhh-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.95rem !important;
  padding-left: 6px !important;
  display: inline-block !important;
}

/* Required asterisk */
.req,
label.desc .req,
label .req {
  color: var(--hhh-error) !important;
  font-weight: 700 !important;
  margin-left: 4px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Text inputs / email / tel / number / url / password / date / file / textarea / select */
input.text,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="date"],
input.file,
textarea,
select {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 1rem !important;
  color: var(--hhh-text) !important;
  background: #fff !important;
  border: 1px solid rgba(11, 42, 74, 0.20) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
}
textarea {
  min-height: 140px !important;
  resize: vertical !important;
}

/* Focus ring -- aqua, matches site-wide :focus-visible */
input.text:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  outline: 0 !important;
  border-color: var(--hhh-ocean-blue) !important;
  box-shadow: 0 0 0 3px rgba(91, 192, 235, 0.40) !important;
}

/* Custom dropdown chevron */
select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%230B2A4A' d='M6 8L0 0h12z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}

/* Placeholders */
input::placeholder,
textarea::placeholder {
  color: var(--hhh-text-muted) !important;
  opacity: 1 !important;
}

/* Checkboxes & radios -- use the modern `accent-color` */
input[type="checkbox"],
input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
  accent-color: var(--hhh-ocean-blue) !important;
}

/* Field hints under inputs */
small,
.instruct {
  display: block !important;
  color: var(--hhh-text-muted) !important;
  font-size: 0.82rem !important;
  margin-top: 4px !important;
  font-style: italic !important;
}

/* Submit button row */
li.buttons {
  margin-top: 28px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  text-align: center !important;
}
input.btTxt,
input.btTxt.submit,
button[type="submit"] {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
  background: var(--hhh-ocean-blue) !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(11, 42, 74, 0.08) !important;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
input.btTxt:hover,
input.btTxt.submit:hover,
button[type="submit"]:hover,
input.btTxt:focus,
input.btTxt.submit:focus,
button[type="submit"]:focus {
  background: #1A5E96 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 30px rgba(11, 42, 74, 0.12) !important;
  outline: 0 !important;
}

/* ---------- Validation ---------- */

/* Inline errors under fields */
.error,
.errMsg,
p.errMsg {
  color: var(--hhh-error) !important;
  font-size: 0.85rem !important;
  margin-top: 6px !important;
  display: block !important;
  font-weight: 600 !important;
}
input.error,
textarea.error,
select.error {
  border-color: var(--hhh-error) !important;
  box-shadow: 0 0 0 3px rgba(183, 28, 28, 0.18) !important;
}

/* Top-of-form error summary */
#errorMsg,
.reqMessage,
ul#errorMsg {
  background: #fff5f5 !important;
  border-left: 4px solid var(--hhh-error) !important;
  color: var(--hhh-error) !important;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  margin-bottom: 20px !important;
  font-size: 0.9rem !important;
  list-style: none !important;
}

/* ---------- Confirmation page (post-submit thank-you) ---------- */

.confirm,
#confirm {
  background: rgba(91, 192, 235, 0.10) !important;
  border: 1px solid rgba(91, 192, 235, 0.30) !important;
  border-radius: 12px !important;
  padding: 28px 24px !important;
  text-align: center !important;
  color: var(--hhh-deep-navy) !important;
}
.confirm h2,
#confirm h2 {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--hhh-deep-navy) !important;
  margin: 0 0 8px !important;
}

/* ---------- Wufoo branding footer ----------
   Hidden when the account tier permits it. If your Wufoo plan
   prohibits hiding the credit, comment this block out. */
#wuf-bot,
#footer,
footer#footer,
.wuf-foot {
  display: none !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
  body { padding: 12px !important; }

  input.text, input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="url"], input[type="password"],
  input[type="date"], textarea, select {
    font-size: 16px !important;     /* prevents iOS zoom on focus */
  }

  input.btTxt, input.btTxt.submit, button[type="submit"] {
    width: 100% !important;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  input.btTxt, input.btTxt.submit, button[type="submit"],
  input.text, input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="url"], input[type="password"],
  input[type="date"], textarea, select {
    transition: none !important;
  }
}