/* gem-download-form.css — page-side styling for slotted controls in
   extended (no-download) forms. Pair with the form bundle:

     <link rel="stylesheet" href="…/static/gem-download-form.css">
     <script type="module" src="…/static/gem-download-form.bundle.js"></script>

   The form component owns the card chrome via shadow DOM. This file owns
   the integrator's slotted controls because shadow CSS can't reach
   descendants of slotted elements (e.g. an <input> inside a <label>).

   v1 download forms (no slotted content) don't need this file; existing
   embeds are unaffected. */

/* Slotted label wrapping an input/select/textarea. Default is column
   ("Field name" above input), which is right for text/email/select/url/
   textarea but wrong for inline checkboxes/radios where the control
   should sit alongside its text. The :has() override below catches
   labels that wrap a checkbox or radio and flips them to row layout. */
gem-download-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-weight: 700; font-size: 16px; color: #0b3a49;
}
gem-download-form label:has(input[type="checkbox"]),
gem-download-form label:has(input[type="radio"]) {
  flex-direction: row; align-items: center; gap: 10px;
  font-weight: 400;
}

/* All text-like inputs by default. Default-type <input> (no type attribute)
   is matched too; checkbox/radio are excluded so they keep native rendering.
   box-sizing: border-box is critical — without it, width:100% + padding adds
   up to MORE than the parent, causing overflow when fields sit inside a
   constrained grid (e.g. a 2-col row). The form's :host sets it for shadow
   descendants but not for slotted light-DOM children. */
gem-download-form input:not([type="checkbox"]):not([type="radio"]),
gem-download-form select,
gem-download-form textarea {
  box-sizing: border-box;
  font: inherit; color: #0b3a49; background: #fff;
  border: 1.5px solid #0f4a5c; border-radius: 10px;
  padding: 14px 16px; width: 100%;
  /* Pin line-height for <input>/<textarea>; <select> ignores line-height
     so its computed height comes from font + browser default. To keep
     them aligned in side-by-side grids, ALSO pin min-height to the
     hand-computed total (padding 14*2 + border 1.5*2 + line content 22). */
  line-height: 1.4;
  min-height: 53px;
}
gem-download-form textarea { min-height: 120px; resize: vertical; }

/* Help-text below a field. Use <small> inside the slotted <label>. */
gem-download-form small {
  font-weight: 400; font-size: 13px; color: #6c8089;
}

/* Fieldset groups — composite name, dataset radios, consent matrix. */
gem-download-form fieldset {
  border: 1.5px solid #d4cdb8; border-radius: 10px;
  padding: 14px 16px; margin: 0;
}
gem-download-form fieldset legend {
  padding: 0 8px; font-weight: 700; color: #0b3a49;
}

/* Optional layout helpers. Add the class on the <fieldset>:
     class="grid"      → 2-column grid of compact items (radios, checkboxes)
     class="composite" → 2-column grid of equal-width labeled fields */
gem-download-form fieldset.grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px;
}
gem-download-form fieldset.grid label {
  flex-direction: row; align-items: center; gap: 8px;
  font-weight: 400; font-size: 14px;
}
gem-download-form fieldset.composite {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

/* Drupal's .embed-width-large wrapper paints its own background, which
   double-stacks under the form's card chrome and breaks the visual.
   Drop the wrapper background when it's hosting a form. */
.embed-width-large:has(gem-download-form) { background-color: transparent; }

/* ─── Section / card / callout / pill primitives ─────────────────────────
   For richer forms (Subscribe, multi-section intake) where the integrator
   needs sub-headers, info callouts, bordered sub-cards inside the form,
   and small "Recommended"-style badges. All scoped under gem-download-form
   so they never leak to non-form descendants of the host page. */

gem-download-form .section-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #6c8089;
  margin: 24px 0 12px;
}

gem-download-form .callout {
  background: #ebe6d6; border-radius: 10px;
  padding: 14px 18px; font-size: 15px; color: #0f4a5c; line-height: 1.5;
  margin-bottom: 20px;
}
gem-download-form .callout strong { color: #0b3a49; }

gem-download-form .form-card {
  background: #fff;
  border: 1.5px solid #d4cdb8; border-radius: 10px;
  padding: 22px 24px; margin-bottom: 16px;
  position: relative;
}
gem-download-form .form-card.recommended { border-color: #0f4a5c; }
gem-download-form .form-card h3 {
  margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #0b3a49;
}
gem-download-form .form-card p {
  margin: 0 0 12px; font-size: 14px; color: #0f4a5c; line-height: 1.5;
}
gem-download-form .form-card label.opt {
  font-weight: 600; font-size: 15px; color: #0b3a49;
}

/* "Recommended" / "New" / "Beta" style badge inside a form-card. */
gem-download-form .pill {
  display: inline-block; background: #ebe6d6; color: #0b3a49;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
  margin-bottom: 10px;
}

/* 2-up grid of form-cards (e.g. "CoalWire | Inside Gas"). */
gem-download-form .cards-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
gem-download-form .cards-2 .form-card { margin: 0; }

/* 2-col row of paired fields (First/Last, Org/Country). */
gem-download-form .row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 14px;
}
/* Full-width labeled field, sized to match siblings in row-2. */
gem-download-form label.full-width {
  display: block; margin-bottom: 14px;
}

/* Custom-marker disclosure. Integrator wraps optional / advanced content
   in <details><summary>…</summary>…</details>. */
gem-download-form details > summary {
  cursor: pointer; font-weight: 700; color: #0b3a49; font-size: 15px;
  padding: 6px 0; list-style: none;
}
gem-download-form details > summary::-webkit-details-marker { display: none; }
gem-download-form details > summary::after { content: ' ▸'; color: #6c8089; }
gem-download-form details[open] > summary::after { content: ' ▾'; }

/* 2-column grid of categorized checkbox groups (e.g. trackers grouped by
   program area inside a <details> on the Subscribe form). */
gem-download-form .tracker-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px;
  padding: 16px 0 4px;
}
gem-download-form .tracker-grid .category h4 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #6c8089;
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #d4cdb8;
}
gem-download-form .tracker-grid .category label {
  font-weight: 400; font-size: 14px; color: #0b3a49;
  padding: 4px 0;
}