/* ============================================================
   Contact Us Editorial Submissions Block — style.css
   All rules scoped under .lx-module-contact-editorial-submission-section
   CF7 output accounted for throughout — <p> tags, wpcf7 wrappers, etc.
============================================================ */

/* ── Section wrapper ── */
.lx-module-contact-editorial-submission-section {
  padding: 64px 0;
  background: #fff;
  color: #000;
  box-sizing: border-box;
}

/* ── Container ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

/* ── Header row ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-header {
  margin-bottom: 40px;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-header h2 {
  font-family: 'Libre Caslon Display', serif;
  font-size: 48px;
  font-weight: normal;
  letter-spacing: initial;
  line-height: 56px;
  color: #000;
  margin: 0;
  padding: 0;
}

/* ── Two-column grid ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 24px;
  align-items: start;
}

/* ============================================================
   LEFT COLUMN
============================================================ */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-left {
  font-family: 'Instrument Sans', sans-serif;
}

/* ── Eyebrow label ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-eyebrow {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  line-height: 16px;
  color: #000;
  margin: 0 0 16px 0;
  display: block;
}

/* ── Intro text ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-intro {
  font-family: 'Libre Caslon Display', serif;
  font-size: 32px;
  font-weight: normal;
  letter-spacing: initial;
  line-height: 40px;
  color: #000;
  margin: 0 0 40px 0;
  padding: 0;
}

/* ── Tab panel item headings (h4) ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-tab-panel h4 {
  font-family: 'Libre Caslon Display', serif;
  font-size: 24px;
  font-weight: normal;
  letter-spacing: initial;
  line-height: 32px;
  color: #000;
  margin: 0;
  padding: 0 0 8px 0;
}

/* ── Tab panel item text ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-tab-panel .lx-module-contact-editorial-submission-item-text {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: initial;
  line-height: 24px;
  color: #000;
  margin: 0;
  padding: 0;
}

/* ── Tab panel inline links ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-tab-panel a:not(.lx-module-contact-editorial-submission-btn) {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: initial;
  text-decoration: none;
  line-height: 24px;
  color: #000;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-tab-panel a:not(.lx-module-contact-editorial-submission-btn):hover {
  text-decoration: underline;
}

/* ── Tab panel HR dividers ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  border: none;
  outline: none;
  margin-top: 24px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* ============================================================
   TAB BUTTONS — pill style
============================================================ */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-tab-btn {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: none;
  color: #000;
  background: #fff;
  border: 1px solid #000;
  border-radius: 100px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
  white-space: nowrap;
  box-sizing: border-box;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-tab-btn:hover,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-tab-btn.active {
  background: #000;
  color: #fff;
}

/* ── Tab content panels ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-tab-panel {
  display: none;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-tab-panel.active {
  display: block;
}

/* ============================================================
   ACTION BUTTON — CTA
============================================================ */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-btn {
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 1.8px;
  line-height: 16px;
  text-transform: uppercase;
  text-decoration: none;
  color: #000;
  border: 1px solid #000;
  padding: 0 32px;
  height: 48px;
  min-width: 64px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
  background: #fff;
  box-sizing: border-box;
  margin-top: 24px;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-btn:hover {
  background-color: #000;
  color: #fff;
}

/* ============================================================
   RIGHT COLUMN — FORM WRAPPER
   Targets CF7's actual rendered output structure.
============================================================ */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper {
  width: 100%;
}

/* ── All links inside the form wrapper — force black ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper a,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper a:link,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper a:visited,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper a:hover {
  color: #000 !important;
}

/* ── Strip all CF7 / theme <p> margins inside the form ─────────────────────
   CF7 wraps nearly every field in a <p>. We flatten them so our
   col divs and spacing rules take full control.                           ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .wpcf7 form p,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .wpcf7-form p,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-form p {
  margin: 0;
  padding: 0;
  display: contents; /* makes <p> invisible to layout — children behave as direct children of parent */
}

/* ── Hidden fields container ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hidden-fields-container {
  display: none;
}

/* ── Top-level form resets ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .wpcf7,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .wpcf7 form {
  margin: 0;
  padding: 0;
}

/* ── lx-module-contact-editorial-submission-form div (CF7 wraps in this) ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Column layout rows ─────────────────────────────────────────────────────
   CF7 outputs .lx-module-contact-editorial-submission-cols-1 and -cols-2
   as <div> wrappers. Each gets bottom spacing.                            ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-cols-1,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-cols-2 {
  margin-bottom: 16px;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px !important;
}

/* ── Field container ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-field {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* ── wpcf7-form-control-wrap — inline by default in CF7, make block ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* ── All text / email / url / tel / select inputs ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper input[type="text"],
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper input[type="email"],
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper input[type="url"],
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper input[type="tel"] {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #000;
  background: #fff;
  background-image: none !important;  /* kill GF orbital theme select icon injection */
  border: 1px solid #ccc;
  border-radius: 0 !important;
  padding: 14px;
  height: 48px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  display: block;
  box-shadow: none !important;
}

/* ── Select — same base style but no padding ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper select {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #000;
  background: #fff;
  background-image: none !important;
  border: 1px solid #ccc !important;
  border-radius: 0 !important;
  padding: 0 8px 0 8px !important;
  height: 48px !important;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  display: block;
  box-shadow: none !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper input[type="text"]:focus,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper input[type="email"]:focus,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper input[type="url"]:focus,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper input[type="tel"]:focus,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper select:focus {
  border-color: #000 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}

/* ── Select hover — prevent GF tinting the select background on hover ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper select:hover {
  background: #fff !important;
  background-image: none !important;
  border-color: #999 !important;
  box-shadow: none !important;
}

/* ── Direct override for GF's .gform-theme--framework select:hover rule ──
   GF specificity: (0,2,1). Ours below: (0,3,1) — wins without needing
   to touch GF's stylesheet.                                               ── */
.lx-module-contact-editorial-submission-section
.lx-module-contact-editorial-submission-form-wrapper
.gform-theme--framework select:hover {
  background-image: none !important;
  background-color: #fff !important;
}

/* ── Select: placeholder (first option) — muted color ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper select.gfield_select option.gf_placeholder,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper select option[value=""] {
  color: #999;
}

/* ── Select: native option list — reset any GF-injected tinting ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper select option {
  color: #000;
  background: #fff;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
}

/* CF7 sometimes uses value= for placeholder text instead of placeholder= */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper input[type="text"]::placeholder,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper input[type="email"]::placeholder,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper input[type="url"]::placeholder,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper input[type="tel"]::placeholder {
  color: #999;
}

/* ── Textarea ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper textarea {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #000;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #ccc !important;
  border-radius: 0 !important;
  padding: 12px 14px;
  width: 100%;
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
  resize: none !important;
  line-height: 24px;
  display: block;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
}

/* Higher specificity textarea rule to override GF orbital theme rows="10" defaults */
.lx-module-contact-editorial-submission-section
.lx-module-contact-editorial-submission-form-wrapper
.gform_wrapper.gform-theme
.ginput_container_textarea
textarea {
  height: 96px !important;
  min-height: 96px !important;
  max-height: 96px !important;
  resize: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid #ccc !important;
}
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper textarea:focus {
  border-color: #000;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper textarea::placeholder {
  color: #999;
}

/* ── Select: custom arrow ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-select-wrap {
  position: relative;
  display: block;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-select-wrap::after {
  content: '';
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
}

/* Select placeholder state — first option selected */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper select option[value=""] {
  color: #999;
}

/* ── Input with leading icon (Sharable Link) ────────────────────────────────
   CF7 wraps the icon <span> and input inside a <p> which we set to
   display:contents, so .input-icon-wrap becomes the flex parent directly. ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-input-icon-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* The icon span sits absolutely inside the wrap */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
  /* CF7 adds a <br> before the SVG — hide any stray line breaks */
  line-height: 0;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-icon br {
  display: none;
}

/* The wpcf7-form-control-wrap inside the icon wrap must be block + full width */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-input-icon-wrap .wpcf7-form-control-wrap {
  flex: 1;
  min-width: 0;
}

/* Pad the input to make room for the icon */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-input-icon-wrap input[type="url"],
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-input-icon-wrap input[type="text"] {
  padding-left: 40px;
}

/* ── Agreement row ──────────────────────────────────────────────────────────
   CF7 renders: .agree-row > <p display:contents> > .wpcf7-form-control-wrap
   + <br> + <label>. The <p> is display:contents so .agree-row is the
   flex parent of the checkbox span and label directly.                    ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-agree-row {
  display: flex;
  align-items: flex-start;
  gap: 8px !important;
  margin-bottom: 24px;
  flex-wrap: nowrap;
}

/* Hide the <br> CF7 inserts between checkbox and label */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-agree-row br {
  display: none;
}

/* CF7 acceptance control wrapper — make it shrink to checkbox size */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-agree-row .wpcf7-form-control-wrap,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-agree-row .wpcf7-acceptance,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-agree-row .wpcf7-list-item {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  width: auto;
  margin: 0;
  padding: 0;
}

/* The actual checkbox */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-agree-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1px solid #999;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
  padding: 0;
  margin: 3px 0 0 0;
  flex-shrink: 0;
  box-sizing: border-box;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-agree-row input[type="checkbox"]:checked {
  background: #000;
  border-color: #000;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-agree-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* Agreement label */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-agree-label {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  color: #555;
  cursor: pointer;
  flex: 1;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-agree-label a {
  color: #000;
  font-size: 14px;
  line-height: 20px;
  text-decoration: underline;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-agree-label a:hover {
  text-decoration: none;
}

/* Hide <br> tags CF7 inserts inside the label */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-agree-label br {
  display: none;
}

/* ── Submit row ──────────────────────────────────────────────────────────────
   CF7 renders: .submit-row > <p display:contents> > input[type=submit] + .wpcf7-spinner
   display:contents on <p> makes .submit-row the flex parent directly.
   Spinner uses order:0, button uses order:1 so spinner appears to the LEFT.  ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-submit-row {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

/* CF7 spinner — before the button */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-submit-row .wpcf7-spinner,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .wpcf7-spinner {
  order: 0;
  flex-shrink: 0;
}

/* CF7 submit button — after the spinner */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-submit-row input[type="submit"],
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-submit-row .wpcf7-submit {
  order: 1;
}

/* ── Submit button ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper input[type="submit"],
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .wpcf7-submit,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-submit-btn {
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 1.8px;
  line-height: 16px;
  text-transform: uppercase;
  color: #000;
  border: 1px solid #000;
  padding: 0 32px;
  height: 48px;
  min-width: 64px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
  background: #fff;
  box-sizing: border-box;
  flex-shrink: 0;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper input[type="submit"]:hover,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .wpcf7-submit:hover,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-submit-btn:hover {
  background-color: #000;
  color: #fff;
}

/* ── CF7 validation error tips ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .wpcf7-not-valid-tip {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  color: #c00;
  margin-top: 4px;
  display: block;
}

/* ── CF7 response output bar ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .wpcf7-response-output {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  line-height: 20px;
  margin: 16px 0 0 0;
  padding: 10px 14px;
  border-radius: 0;
  border-width: 1px;
  border-style: solid;
}

/* ── Editor preview placeholder ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-placeholder {
  padding: 24px;
  border: 1px dashed #ccc;
  color: #666;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  line-height: 20px;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-placeholder p {
  margin: 0;
}

/* ============================================================
   GRAVITY FORMS OVERRIDES
   All rules scoped under .lx-module-contact-editorial-submission-form-wrapper
   so GF's rendered output exactly matches the CF7 design above.
   Field-level notes explain which CF7 pattern each block mirrors.
============================================================ */

/* ── Top-level GF wrapper + form resets ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_wrapper,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_wrapper form {
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Reset ALL GF "orbital" theme CSS variables to our black/white palette ──
   GF injects --gf-color-primary: #204ce5 (blue) and icon SVGs via an inline
   <style> tag scoped to #gform_wrapper_N.gform-theme. These variables drive
   border colours, focus rings, button tints, and crucially the select/number
   control icons that produce the zigzag/wave background on the dropdown.    ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_wrapper {
  --gf-color-primary:                  #000 !important;
  --gf-color-primary-rgb:              0, 0, 0 !important;
  --gf-color-primary-contrast:         #fff !important;
  --gf-color-primary-contrast-rgb:     255, 255, 255 !important;
  --gf-color-primary-darker:           #000 !important;
  --gf-color-primary-lighter:          #444 !important;
  --gf-color-in-ctrl-primary:          #000 !important;
  --gf-color-in-ctrl-primary-rgb:      0, 0, 0 !important;
  --gf-color-in-ctrl-primary-contrast: #fff !important;
  --gf-color-in-ctrl-primary-darker:   #000 !important;
  --gf-color-in-ctrl-primary-lighter:  #444 !important;
  --gf-ctrl-border-color:              #ccc !important;
  --gf-radius:                         0px !important;
  --gf-color-secondary:                #fff !important;
  --gf-color-secondary-darker:         #f5f5f5 !important;
  --gf-color-out-ctrl-light-darker:    rgba(0,0,0,0.25) !important;
  /* Kill GF's built-in SVG icon tokens — these get applied as background-images
     on <select> and number fields, producing the broken zigzag pattern.        */
  --gf-icon-ctrl-select:              none !important;
  --gf-icon-ctrl-number:              none !important;
  --gf-icon-ctrl-search:              none !important;
  /* Kill the hover/focus variants that GF applies via .gform-theme--framework
     select:hover { background-image: var(--gf-ctrl-select-icon-hover) }      */
  --gf-ctrl-select-icon:              none !important;
  --gf-ctrl-select-icon-hover:        none !important;
  --gf-ctrl-select-icon-focus:        none !important;
  --gf-ctrl-select-icon-active:       none !important;
}

/* ── Hide the GF AJAX iframe (used internally for submission; not visible by design) ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .luxe-iframe-wrap,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper iframe[name^="gform_ajax_frame"] {
  display: none !important;
}

/* ── GF body — full width ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_body {
  width: 100%;
}

/* ── GF fields list ──────────────────────────────────────────────────────────
   We use FLEXBOX (not grid) so adjacent half-width fields sit side-by-side
   reliably even when GF's orbital theme sets its own grid with !important.
   Specificity is deliberately boosted by including .gform-theme in the chain
   to beat GF's external stylesheet rules without needing IDs.               ── */
.lx-module-contact-editorial-submission-section
.lx-module-contact-editorial-submission-form-wrapper
.gform_wrapper.gform-theme
.gform_fields {
  display: flex !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  grid-template-columns: unset !important; /* neutralise any GF grid shorthand */
}

/* ── Every GF field: full-width by default ── */
.lx-module-contact-editorial-submission-section
.lx-module-contact-editorial-submission-form-wrapper
.gform_wrapper.gform-theme
.gfield {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  grid-column: unset !important; /* prevent any lingering GF grid-column */
  float: none !important;
}

/* ── Half-width fields — sit side-by-side (e.g. First Name / Last Name) ──
   24px column gap split equally: each field = calc(50% - 12px).            ── */
.lx-module-contact-editorial-submission-section
.lx-module-contact-editorial-submission-form-wrapper
.gform_wrapper.gform-theme
.gfield--width-half {
  flex: 0 0 calc(50% - 12px) !important;
  width: calc(50% - 12px) !important;
  max-width: calc(50% - 12px) !important;
}

/* 24px gap between the two half-width siblings */
.lx-module-contact-editorial-submission-section
.lx-module-contact-editorial-submission-form-wrapper
.gform_wrapper.gform-theme
.gfield--width-half + .gfield--width-half {
  margin-left: 24px !important;
}

/* Clearfix so the next full-width field starts below the floated pair */
.lx-module-contact-editorial-submission-section
.lx-module-contact-editorial-submission-form-wrapper
.gform_wrapper.gform-theme
.gform_body {
  width: 100%;
}

/* ── Hide GF field labels — design uses placeholders only ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield_label,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield_label_before_complex,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_wrapper .gfield_label,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_wrapper .gfield_label_before_complex {
  display: none !important;
}

/* ── GF required indicator — hidden with label ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield_required,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_wrapper .gfield_required {
  display: none !important;
}

/* ── GF input containers — full width block ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .ginput_container,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_wrapper .ginput_container {
  width: 100%;
  margin: 0 !important;
}

/* ── GF select wrapper — mirrors .lx-module-contact-editorial-submission-select-wrap ──
   GF wraps <select> in .ginput_container_select. We add the custom arrow via ::after.  */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .ginput_container_select {
  position: relative;
  display: block;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .ginput_container_select::after {
  content: '';
  pointer-events: none;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 6px;
  /* Simple chevron matching correct_styling screenshot */
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.293 0.293a1 1 0 0 1 1.414 0L5 3.586 8.293.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414z' fill='%23000'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border: none;
}

/* ── Explicitly kill GF orbital theme's background-image on <select> ──
   GF applies its --gf-icon-ctrl-select SVG as a background-image directly
   on the <select> element. appearance:none removes the native arrow but
   does NOT remove explicit background-image rules — we must do that here. ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_wrapper select,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_wrapper select.gfield_select {
  background-image: none !important;
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #000 !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 14px !important;
  height: 48px !important;
  padding: 4px 12px 0 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
  -webkit-appearance: none !important;
}

/* ── GF Name field — mirrors .cols-2 two-column grid ──
   GF renders first/last inside .ginput_container_name > span.name_first + span.name_last */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .ginput_container_name {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .ginput_container_name span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Hide the per-sub-field labels GF adds inside the Name field */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .ginput_container_name label,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .name_first label,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .name_last label {
  display: none !important;
}

/* ── GF URL / Sharable Link field — mirrors .lx-module-contact-editorial-submission-input-icon-wrap ──
   Add CSS class "lx-es-gf-link-field" to this GF field in Gravity Forms > Field Settings > CSS Class.
   The SVG link icon is injected as a pseudo-element so no template changes are needed.              */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-es-gf-link-field .ginput_container {
  position: relative;
  display: flex;
  align-items: center;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-es-gf-link-field .ginput_container::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  /* Inline SVG — identical path to the CF7 template icon */
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.714 9.694a3.75 3.75 0 0 0 5.25.756c.142-.104.277-.224.404-.351l2.25-2.25a3.751 3.751 0 0 0-5.303-5.303l-1.29 1.284m1.688 4.365a3.75 3.75 0 0 0-5.25-.756 3.536 3.536 0 0 0-.404.351l-2.25 2.25a3.75 3.75 0 1 0 5.303 5.303l1.283-1.284' stroke='%23aaa' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

/* Pad the input left to clear the icon */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-es-gf-link-field input[type="url"],
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-es-gf-link-field input[type="text"] {
  padding-left: 40px;
}

/* ── GF Consent / checkbox field — mirrors .lx-module-contact-editorial-submission-agree-row ──
   GF renders: .ginput_container_consent > input[type=checkbox] + label                          */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield_consent,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield--type-consent {
  margin-bottom: 24px !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .ginput_container_consent {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 8px !important;
  flex-wrap: nowrap;
}

/* Show the consent label (overrides the global label-hide above) */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .ginput_container_consent label {
  display: block !important;
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  color: #555;
  cursor: pointer;
  flex: 1;
  margin: 0 !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .ginput_container_consent label a {
  color: #000;
  font-size: 14px;
  line-height: 20px;
  text-decoration: underline;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .ginput_container_consent label a:hover {
  text-decoration: none;
}

/* GF consent checkbox — mirrors the CF7 custom checkbox style */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .ginput_container_consent input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  border: 1px solid #999 !important;
  border-radius: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #fff !important;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
  padding: 0 !important;
  margin: 3px 0 0 0 !important;
  flex-shrink: 0;
  box-sizing: border-box;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .ginput_container_consent input[type="checkbox"]:checked {
  background: #000 !important;
  border-color: #000 !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .ginput_container_consent input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* ── GF standard checkbox field (gfield--type-checkbox) — used for Legal / agree ──
   GF renders: fieldset.gfield > ginput_container_checkbox > div.gfield_checkbox >
               div.gchoice > input[type=checkbox] + label                         ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield--type-checkbox {
  margin-bottom: 24px !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield_checkbox {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gchoice {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

/* Show the gchoice label (the global .gfield_label hide must NOT apply here) */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gchoice label,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform-field-label--type-inline {
  display: block !important;
  font-family: 'Instrument Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: normal !important;
  line-height: 20px !important;
  color: #555 !important;
  cursor: pointer;
  flex: 1;
  margin: 0 0 0 8px !important; /* 8px left margin as fallback when gap isn't applied */
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gchoice label a,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform-field-label--type-inline a {
  color: #000 !important;
  font-size: 14px !important;
  text-decoration: underline !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gchoice label a:hover,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform-field-label--type-inline a:hover {
  text-decoration: none !important;
}

/* Custom square checkbox — identical to CF7 and consent field treatment */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield--type-checkbox input[type="checkbox"],
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield-choice-input {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  border: 1px solid #999 !important;
  border-radius: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #fff !important;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
  padding: 0 !important;
  margin: 3px 0 0 0 !important;
  flex-shrink: 0;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield--type-checkbox input[type="checkbox"]:checked,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield-choice-input:checked {
  background: #000 !important;
  border-color: #000 !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield--type-checkbox input[type="checkbox"]:checked::after,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield-choice-input:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* ── GF footer (submit area) ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_footer,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_page_footer {
  margin-top: 8px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Spinner sits to the LEFT of the submit button */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_footer .gform_ajax_spinner,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_page_footer .gform_ajax_spinner {
  order: 0 !important;
  flex-shrink: 0;
}

/* Submit button sits to the RIGHT of the spinner */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_footer .gform_button,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_footer input[type="submit"],
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_page_footer .gform_button,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_page_footer input[type="submit"] {
  order: 1 !important;
  margin-left: 0 !important;
}

/* ── GF submit button — mirrors CF7 .wpcf7-submit / input[type=submit] ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_button,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper button[type="submit"].gform_button {
  font-family: "Instrument Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: normal !important;
  letter-spacing: 1.8px !important;
  line-height: 16px !important;
  text-transform: uppercase !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  padding: 0 32px !important;
  height: 48px !important;
  min-width: 64px !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
  background: #fff !important;
  box-sizing: border-box;
  flex-shrink: 0;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_button:hover,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper button[type="submit"].gform_button:hover {
  background-color: #000 !important;
  color: #fff !important;
}

/* ── GF field-level validation errors — mirrors .wpcf7-not-valid-tip ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield_validation_message,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .validation_message {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  color: #c00;
  margin-top: 4px;
  display: block;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* ── GF field error state — highlight border red ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield_error input[type="text"],
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield_error input[type="email"],
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield_error input[type="url"],
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield_error input[type="tel"],
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield_error select,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gfield_error textarea {
  border-color: #c00 !important;
}

/* ── GF form-level validation header — mirrors .wpcf7-response-output ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_validation_errors {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  line-height: 20px;
  margin: 0 0 16px 0 !important;
  padding: 10px 14px !important;
  border-radius: 0 !important;
  border: 1px solid #c00 !important;
  background: none !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_validation_errors h2 {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  margin: 0;
  padding: 0;
}

/* ── GF confirmation / success message — mirrors .wpcf7-response-output ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_confirmation_wrapper {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  line-height: 20px;
  margin: 16px 0 0 0;
  padding: 10px 14px;
  border: 1px solid #ccc;
}

/* ── GF AJAX spinner — hidden until GF activates it; order handled in .gform_footer above ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .gform_ajax_spinner {
  flex-shrink: 0;
}

/* ============================================================
   HUBSPOT FORMS OVERRIDES
   All rules scoped under .lx-module-contact-editorial-submission-form-wrapper
   so HubSpot's inline-rendered output matches the CF7 / GF design.
   Requires the form to be embedded as an inline hbspt.forms.create() script
   (not an iframe). HubSpot renders inside a <form class="hs-form">.
============================================================ */

/* ── HubSpot form resets ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form fieldset {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  border: none !important;
}

/* ── HubSpot field rows — strip flex/grid HubSpot applies, use block flow ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-form-field {
  margin-bottom: 16px !important;
  padding: 0 !important;
  width: 100% !important;
  float: none !important;
}

/* ── HubSpot fieldset columns — two fields side-by-side (e.g. First + Last name)
   HubSpot groups them in <fieldset class="form-columns-2"> ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .form-columns-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .form-columns-2 .hs-form-field {
  margin-bottom: 0 !important;
  width: auto !important;
}

/* Single-column fieldset — full width */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .form-columns-1 {
  margin-bottom: 16px !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .form-columns-1 .hs-form-field {
  margin-bottom: 0 !important;
  width: 100% !important;
}

/* ── Hide HubSpot field labels — design uses placeholders ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form label:not(.hs-form-booleancheckbox-display):not(.hs-error-msg) {
  display: none !important;
}

/* ── HubSpot input container — strip extra wrapper margins ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .input {
  margin: 0 !important;
}

/* ── HubSpot select wrapper — custom arrow ──
   HubSpot wraps <select> in .input; we target .hs-fieldtype-select .input. ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-fieldtype-select .input {
  position: relative;
  display: block;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-fieldtype-select .input::after {
  content: '';
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000;
}

/* ── HubSpot URL / Sharable Link field icon ──
   Add CSS class "lx-es-hs-link-field" to this field in HubSpot's form editor
   (Field Options > CSS Classes). The icon is injected as a pseudo-element.  ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .lx-es-hs-link-field .input {
  position: relative;
  display: flex;
  align-items: center;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .lx-es-hs-link-field .input::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.714 9.694a3.75 3.75 0 0 0 5.25.756c.142-.104.277-.224.404-.351l2.25-2.25a3.751 3.751 0 0 0-5.303-5.303l-1.29 1.284m1.688 4.365a3.75 3.75 0 0 0-5.25-.756 3.536 3.536 0 0 0-.404.351l-2.25 2.25a3.75 3.75 0 1 0 5.303 5.303l1.283-1.284' stroke='%23aaa' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 1;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .lx-es-hs-link-field input[type="url"],
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .lx-es-hs-link-field input[type="text"] {
  padding-left: 40px;
}

/* ── HubSpot checkbox / consent — mirrors .lx-module-contact-editorial-submission-agree-row ──
   HubSpot renders: .hs-fieldtype-booleancheckbox > .input > ul > li > label > input + span ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-fieldtype-booleancheckbox .input ul,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-fieldtype-checkbox .input ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-fieldtype-booleancheckbox .input ul li,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-fieldtype-checkbox .input ul li {
  display: flex;
  align-items: flex-start;
  gap: 8px !important;
}

/* Show the checkbox label (overrides the global label-hide above) */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-form-booleancheckbox-display,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-form-checkbox-display {
  display: flex !important;
  align-items: flex-start;
  gap: 8px !important;
  cursor: pointer;
  flex: 1;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-form-booleancheckbox-display > span,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-form-checkbox-display > span {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  line-height: 20px;
  color: #555;
  flex: 1;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-form-booleancheckbox-display > span a,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-form-checkbox-display > span a {
  color: #000;
  font-size: 14px;
  line-height: 20px;
  text-decoration: underline;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-form-booleancheckbox-display > span a:hover,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-form-checkbox-display > span a:hover {
  text-decoration: none;
}

/* HubSpot checkbox input — same custom style as CF7 / GF */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-fieldtype-booleancheckbox input[type="checkbox"],
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-fieldtype-checkbox input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  border: 1px solid #999 !important;
  border-radius: 0 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #fff !important;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
  padding: 0 !important;
  margin: 3px 0 0 0 !important;
  flex-shrink: 0;
  box-sizing: border-box;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-fieldtype-booleancheckbox input[type="checkbox"]:checked,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-fieldtype-checkbox input[type="checkbox"]:checked {
  background: #000 !important;
  border-color: #000 !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-fieldtype-booleancheckbox input[type="checkbox"]:checked::after,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-fieldtype-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* ── HubSpot submit actions row — mirrors .lx-module-contact-editorial-submission-submit-row ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-submit {
  margin-top: 8px;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-submit .actions {
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 0 !important;
}

/* ── HubSpot submit button — mirrors CF7 / GF submit style ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-button {
  font-family: "Instrument Sans", sans-serif !important;
  font-size: 14px !important;
  font-weight: normal !important;
  letter-spacing: 1.8px !important;
  line-height: 16px !important;
  text-transform: uppercase !important;
  color: #000 !important;
  border: 1px solid #000 !important;
  padding: 0 32px !important;
  height: 48px !important;
  min-width: 64px !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, color 0.3s;
  cursor: pointer;
  background: #fff !important;
  box-sizing: border-box;
  flex-shrink: 0;
  box-shadow: none !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-button:hover {
  background-color: #000 !important;
  color: #fff !important;
}

/* ── HubSpot field-level errors — mirrors .wpcf7-not-valid-tip / .gfield_validation_message ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-error-msgs {
  list-style: none !important;
  margin: 4px 0 0 0 !important;
  padding: 0 !important;
}

.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-error-msgs li,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-error-msg {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 12px;
  color: #c00;
  display: block;
}

/* ── HubSpot field error state — red border ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-input.invalid,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .hs-input.error {
  border-color: #c00 !important;
}

/* ── HubSpot success / submitted message — mirrors .wpcf7-response-output ── */
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .submitted-message,
.lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .submitted-message {
  font-family: 'Instrument Sans', sans-serif;
  font-size: 14px;
  line-height: 20px;
  margin: 16px 0 0 0;
  padding: 10px 14px;
  border: 1px solid #ccc;
}

/* ============================================================
   MOBILE
============================================================ */
@media (max-width: 1024px) {

  .lx-module-contact-editorial-submission-section {
    padding: 32px 0;
  }

  .lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-header {
    margin-bottom: 32px;
  }

  .lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-header h2 {
    font-size: 32px;
    line-height: 40px;
  }

  .lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-grid {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }

  .lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-intro {
    font-size: 24px;
    line-height: 32px;
  }

  .lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-right {
    padding-top: 16px;
  }

  /* CF7 two-column row collapses to single column */
  .lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .lx-module-contact-editorial-submission-cols-2 {
    grid-template-columns: 1fr;
  }

  /* GF Name field collapses to single column on mobile */
  .lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .ginput_container_name {
    grid-template-columns: 1fr !important;
  }

  /* GF half-width fields stack to full-width on mobile */
  .lx-module-contact-editorial-submission-section
  .lx-module-contact-editorial-submission-form-wrapper
  .gform_wrapper.gform-theme
  .gform_fields {
    display: flex !important;
  }

  .lx-module-contact-editorial-submission-section
  .lx-module-contact-editorial-submission-form-wrapper
  .gform_wrapper.gform-theme
  .gfield--width-half {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 24px !important; /* 24px row gap when stacked */
  }

  .lx-module-contact-editorial-submission-section
  .lx-module-contact-editorial-submission-form-wrapper
  .gform_wrapper.gform-theme
  .gfield--width-half + .gfield--width-half {
    margin-left: 0 !important;
  }

  /* All GF fields get 24px row gap on mobile */
  .lx-module-contact-editorial-submission-section
  .lx-module-contact-editorial-submission-form-wrapper
  .gform_wrapper.gform-theme
  .gfield {
    margin-bottom: 24px !important;
  }

  /* HubSpot two-column fieldset collapses to single column on mobile */
  .lx-module-contact-editorial-submission-section .lx-module-contact-editorial-submission-form-wrapper .hs-form .form-columns-2 {
    grid-template-columns: 1fr !important;
  }
}