:root {
  --brand-green: #4fcf57;
  --brand-green-dark: #3bb544;
  --ink: #1c2128;
  --ink-soft: #2b323c;
  --text: #232830;
  --muted: #6b7280;
  --bg: #f5f6f8;
  --card: #ffffff;
  --border: #e2e5ea;
  --error: #d64545;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 6px 20px rgba(16, 24, 40, 0.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: "Source Sans Pro", "Open Sans", sans-serif;
  color: var(--ink);
  margin: 0 0 .5rem;
  letter-spacing: -0.01em;
}

/* Header */
.site-header {
  background: var(--ink);
  padding: 18px 24px;
  display: flex;
  align-items: center;
}
.site-logo { height: 34px; width: auto; display: block; }

/* Embedded in a page that already has the Olami Together header (the
   WordPress pages at olamitogether.org/volunteer and /join frame this form),
   the form's own logo is a SECOND logo directly under the site's own. It read
   as a doubled logo and was invisible to any inspection from the parent page,
   because it lives inside the cross-origin frame. Standalone visits still get
   the header -- the flag is only set when window.top !== window.self. */
.is-embedded .site-header { display: none; }
/* The embedding page's header is an OVERLAY painted on top of this frame
   (olamitogether.org uses .oxy-overlay-header, 89px tall), so without a top gap
   the form's first heading runs underneath the site nav. Clear it with room to
   spare; this replaces the space the form's own header used to occupy. */
.is-embedded .page { padding-top: 118px; }

/* That site header is TRANSPARENT on every page -- the dark bar you see
   elsewhere is each page's own dark top section showing through it, and its nav
   text is white. A light form behind it left the nav nearly invisible. Paint
   the same dark band across the top of this frame so the overlay has something
   to sit on, exactly as the rest of the site does. Height matches the padding
   above. */
.is-embedded body {
  background-image: linear-gradient(to bottom, var(--ink) 0, var(--ink) 118px, transparent 118px);
  background-repeat: no-repeat;
}

/* Page layout */
.page { max-width: 760px; margin: 0 auto; padding: 28px 18px 64px; }

.intro { margin: 8px 4px 22px; }
.intro h1 { font-size: 2rem; font-weight: 900; }
.lede { color: var(--muted); font-size: 1.05rem; max-width: 60ch; margin: 0; }

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  margin-bottom: 18px;
}
.card h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 14px; }

/* Fields */
.field { display: block; margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .row.two { grid-template-columns: 1fr; } }

.label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--ink-soft); }
.label em { color: var(--error); font-style: normal; }
.label-note { font-weight: 400; color: var(--muted); font-size: .82rem; }

input[type=text], input[type=email], input[type=tel], input[type=password], textarea, select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand-green);
  box-shadow: 0 0 0 3px rgba(79, 207, 87, 0.18);
}
textarea { resize: vertical; }
.hint { display: block; color: var(--muted); font-size: .82rem; margin-top: 6px; }

.generated-email {
  padding: 11px 13px;
  border: 1px dashed var(--border);
  border-radius: 9px;
  background: #f8fafb;
  color: var(--ink);
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Phone */
.phone-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.dial-select { padding-right: 6px; }

/* Address autocomplete */
.autocomplete-results {
  border: 1px solid var(--border);
  border-radius: 9px;
  margin-top: 6px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.autocomplete-results .ac-item {
  padding: 10px 13px;
  cursor: pointer;
  font-size: .92rem;
  border-bottom: 1px solid #f0f1f4;
}
.autocomplete-results .ac-item:last-child { border-bottom: none; }
.autocomplete-results .ac-item:hover, .autocomplete-results .ac-item.active { background: #f2fbf3; }
.chosen-address {
  margin-top: 8px; padding: 10px 13px; background: #f2fbf3;
  border: 1px solid #cdeccf; border-radius: 9px; font-size: .9rem;
}
.chosen-address .tz { color: var(--muted); }

/* Headshot */
.headshot-block { display: flex; gap: 18px; align-items: flex-start; }
@media (max-width: 520px) { .headshot-block { flex-direction: column; } }
.headshot-preview {
  width: 160px; height: 160px; flex: 0 0 160px;
  border-radius: 12px; border: 1px solid var(--border);
  background: #f2f3f5; display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; cursor: grab;
}
.headshot-preview.dragging { cursor: grabbing; }
.headshot-placeholder { color: var(--muted); font-size: .82rem; }
.headshot-controls { flex: 1; }
.headshot-controls input[type=file] { margin-bottom: 12px; }
.zoom-label { display: block; font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.zoom-label input[type=range] { width: 100%; margin-top: 6px; accent-color: var(--brand-green); }

/* Availability grid */
.avail-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 14px; background: #f8fafb; border: 1px solid var(--border);
  border-radius: 10px; margin-bottom: 14px;
}
.avail-toolbar .tb-group { display: flex; flex-direction: column; gap: 4px; }
.avail-toolbar label { font-size: .78rem; font-weight: 600; color: var(--muted); }
.avail-toolbar select { padding: 7px 9px; }
.day-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.day-toggles button {
  border: 1px solid var(--border); background: #fff; border-radius: 7px;
  padding: 6px 10px; font: inherit; font-size: .8rem; cursor: pointer;
}
.day-toggles button.on { background: var(--brand-green); border-color: var(--brand-green); color: #fff; }
.btn-mini {
  border: 1px solid var(--border); background: #fff; border-radius: 8px;
  padding: 8px 12px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
}
.btn-mini:hover { border-color: var(--brand-green); }
.btn-mini.ghost { color: var(--muted); }

.avail-grid-wrap { overflow-x: auto; }
.avail-grid { display: grid; grid-template-columns: 58px repeat(7, minmax(56px, 1fr)); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; user-select: none; }
.avail-grid .cell { border-right: 1px solid #eef0f3; border-bottom: 1px solid #eef0f3; height: 18px; }
.avail-grid .cell:last-child { border-right: none; }
.avail-grid .head {
  background: var(--ink); color: #fff; font-size: .78rem; font-weight: 700;
  text-align: center; padding: 8px 0; height: auto;
}
.avail-grid .time-label {
  font-size: .66rem; color: var(--muted); text-align: right; padding-right: 6px;
  height: 18px; line-height: 16px; border-right: 1px solid #eef0f3; border-bottom: 1px solid #eef0f3;
}
.avail-grid .time-label.hour-start { border-top: 1px solid #dfe2e7; }
.avail-grid .slot { cursor: pointer; }
.avail-grid .slot.on { background: var(--brand-green); }
.avail-grid .slot.on.partial { background: #f4b400; } /* orphaned 30-min slot */
.avail-grid .slot.hour-start { border-top: 1px solid #dfe2e7; }

/* Errors + submit */
.form-error {
  background: #fdecec; border: 1px solid #f5c2c2; color: var(--error);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: .9rem;
}
.submit-row { margin-top: 8px; }
.btn-primary {
  background: var(--brand-green); color: #fff; border: none; border-radius: 10px;
  padding: 14px 26px; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  width: 100%; transition: background .15s;
}
.btn-primary:hover { background: var(--brand-green-dark); }
.btn-primary:disabled { opacity: .6; cursor: default; }

/* Success */
.success { text-align: center; padding: 40px 24px; }
.success-check {
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--brand-green); color: #fff; font-size: 2rem; line-height: 62px; font-weight: 700;
}
.success-email { margin-top: 12px; font-size: 1.05rem; }
.success-email strong { color: var(--brand-green-dark); font-family: ui-monospace, monospace; }
.success-phone { margin-top: 20px; font-size: 1.05rem; }
.success-phone a { color: var(--brand-green-dark); text-decoration: none; }
.success-phone strong { font-family: ui-monospace, monospace; }

.site-footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 24px; }