/* ============================================================
   Sydney Executive Plus — Webform custom CSS
   ------------------------------------------------------------
   Paste into: /admin/structure/webform/config/libraries
               ▸ "Custom CSS" textarea

   Scope:
   - Base styles (typography, inputs, labels, buttons, flexbox,
     checkboxes, states) apply to EVERY webform, wherever it
     appears (dedicated page, sidebar block, embedded in node).
   - Card wrapper (max-width, padding, shadow) applies ONLY on
     dedicated webform pages (URLs starting /form/ → body class
     .path-form). Change the selector near the bottom if your
     dedicated webforms live at a different URL prefix.

   Design tokens sourced from the site's main stylesheet — ochre
   palette #d3381f / #c63a1e / #af2b11, Apercu body font, 4px
   radius, 12px 16px input padding, 0.25s transitions.
   ============================================================ */

/* ---------- Design tokens ---------- */
.webform-submission-form {
  --sxp-ochre-100: #d3381f;
  --sxp-ochre-110: #c63a1e;
  --sxp-ochre-120: #af2b11;
  --sxp-ochre-80:  #fdedea;
  --sxp-black:     #141414;
  --sxp-grey-90:   #f7f7f7;
  --sxp-grey-100:  #d2d2d2;
  --sxp-grey-text: #555;
  --sxp-error:     #b80000;
  --sxp-success:   #0c6638;
  --sxp-radius:    4px;
  --sxp-space-xxs: 0.5rem;
  --sxp-space-xs:  0.75rem;
  --sxp-space-sm:  1rem;
  --sxp-space-md:  1.5rem;
  --sxp-space-lg:  2rem;

  /* Inherit site body font — falls back if Apercu is not loaded
     in the current context (e.g. form served in an iframe). */
  font-family: "Apercu", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color: var(--sxp-black);
  line-height: 1.5;
}

/* ---------- Vertical rhythm between fields ---------- */
.webform-submission-form .form-item,
.webform-submission-form .js-form-wrapper {
  margin-bottom: var(--sxp-space-md);
}

/* ---------- Labels ---------- */
.webform-submission-form .form-item > label,
.webform-submission-form fieldset > legend {
  display: block;
  margin-bottom: var(--sxp-space-xxs);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--sxp-black);
}

/* Required asterisk — see scoped rule near the checkbox section that
   restricts ::after to label/legend only, so it can't accidentally
   render after a checkbox input or wrapper. */

/* ---------- Text inputs, textareas, selects ---------- */
.webform-submission-form input[type="text"],
.webform-submission-form input[type="email"],
.webform-submission-form input[type="url"],
.webform-submission-form input[type="tel"],
.webform-submission-form input[type="number"],
.webform-submission-form input[type="password"],
.webform-submission-form input[type="search"],
.webform-submission-form input[type="date"],
.webform-submission-form input[type="datetime-local"],
.webform-submission-form input[type="time"],
.webform-submission-form textarea,
.webform-submission-form select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--sxp-black);
  background: #fff;
  border: 1px solid var(--sxp-grey-100);
  border-radius: var(--sxp-radius);
  transition: border-color 0.25s, box-shadow 0.25s;
  -webkit-appearance: none;
  appearance: none;
}

.webform-submission-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Focus — ochre border with soft halo (mouse), hard outline (keyboard). */
.webform-submission-form input:focus,
.webform-submission-form textarea:focus,
.webform-submission-form select:focus {
  outline: none;
  border-color: var(--sxp-ochre-100);
  box-shadow: 0 0 0 3px rgba(211, 56, 31, 0.15);
}

.webform-submission-form input:focus-visible,
.webform-submission-form textarea:focus-visible,
.webform-submission-form select:focus-visible {
  outline: 2px solid var(--sxp-ochre-100);
  outline-offset: 2px;
}

/* Placeholder — slightly muted. */
.webform-submission-form ::placeholder {
  color: #999;
  opacity: 1;
}

/* ---------- Telephone field (intl-tel-input integration) ----------
   Drupal Webform's `#international: true` wraps the tel input in a
   .iti container with an absolutely positioned flag (and optionally
   a dial code like "+61"). The library normally adds left padding
   on the input via JS so text clears the flag, but our generic
   `padding: 12px 16px` rule overrides it.

   We use !important on the padding-left only — the theme's CSS
   sometimes wins the specificity battle otherwise. Both the modern
   v17+ class names (.iti, .iti--separate-dial-code) and the older
   v13-16 names (.intl-tel-input, .separate-dial-code) are covered. */

.webform-submission-form .iti,
.webform-submission-form .intl-tel-input {
  display: block;
  width: 100%;
  position: relative;
}

/* Flag-only mode — flag area ~50px including arrow. */
.webform-submission-form .iti input[type="tel"],
.webform-submission-form .intl-tel-input input[type="tel"] {
  padding-left: 60px !important;
}

/* Separate-dial-code mode — flag + "+61" together is ~95px wide. */
.webform-submission-form .iti--separate-dial-code input[type="tel"],
.webform-submission-form .intl-tel-input.separate-dial-code input[type="tel"] {
  padding-left: 105px !important;
}

/* Make the flag container span the full input height and align nicely
   inside our 4px-radius input border. */
.webform-submission-form .iti__flag-container,
.webform-submission-form .intl-tel-input .flag-container {
  border-radius: var(--sxp-radius) 0 0 var(--sxp-radius);
  height: auto;
}

.webform-submission-form .iti__selected-flag,
.webform-submission-form .intl-tel-input .selected-flag {
  border-radius: var(--sxp-radius) 0 0 var(--sxp-radius);
  background-color: transparent;
  padding-left: 12px;
}

.webform-submission-form .iti__selected-flag:hover,
.webform-submission-form .iti__selected-flag:focus,
.webform-submission-form .intl-tel-input .selected-flag:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Country dropdown — match form aesthetic. */
.webform-submission-form .iti__country-list,
.webform-submission-form .intl-tel-input .country-list {
  border: 1px solid var(--sxp-grey-100);
  border-radius: var(--sxp-radius);
  font-size: 0.9375rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.webform-submission-form .iti__country.iti__highlight,
.webform-submission-form .intl-tel-input .country.highlight {
  background-color: var(--sxp-ochre-80);
}

/* ---------- Error states ---------- */
.webform-submission-form .form-item--error input,
.webform-submission-form .form-item--error textarea,
.webform-submission-form .form-item--error select,
.webform-submission-form input.error,
.webform-submission-form textarea.error,
.webform-submission-form select.error,
.webform-submission-form [aria-invalid="true"] {
  border-color: var(--sxp-error);
}

.webform-submission-form .form-item--error input:focus,
.webform-submission-form .form-item--error textarea:focus,
.webform-submission-form .form-item--error select:focus,
.webform-submission-form [aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(184, 0, 0, 0.15);
}

.webform-submission-form .form-item--error-message,
.webform-submission-form strong.error {
  display: block;
  margin-top: var(--sxp-space-xxs);
  color: var(--sxp-error);
  font-size: 0.875rem;
  font-weight: 400;
}

/* ---------- Description / help text ---------- */
.webform-submission-form .webform-element-description,
.webform-submission-form .description {
  margin-top: var(--sxp-space-xxs);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--sxp-grey-text);
}

.webform-submission-form .webform-element-description p:first-child { margin-top: 0; }
.webform-submission-form .webform-element-description p:last-child  { margin-bottom: 0; }

/* ---------- Checkboxes & radios ---------- */
.webform-submission-form .form-checkboxes,
.webform-submission-form .form-radios {
  display: flex;
  flex-direction: column;
  gap: var(--sxp-space-xxs);
  margin-top: var(--sxp-space-xxs);
}

/* Checkbox/radio row layout — flex-based.
   Reset margin/padding aggressively across every possible wrapper
   class Drupal might put on a checkbox/radio form-item, so a theme
   stylesheet can't double-indent the row. Then layout each wrapper
   as a flex row with the checkbox + label, and the description (if
   present inside the wrapper) wrapped onto its own line. */

/* Aggressive reset across every wrapper variant. Use !important to
   guarantee we beat any theme rule that adds padding/margin here. */
.webform-submission-form .form-type-checkbox,
.webform-submission-form .form-type-radio,
.webform-submission-form .js-form-type-checkbox,
.webform-submission-form .js-form-type-radio,
.webform-submission-form .form-item--type-checkbox,
.webform-submission-form .form-item--type-radio {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Layout — checkbox in column 1, label in column 2, description (if
   nested) wraps to a new row via flex-basis: 100%. */
.webform-submission-form .form-type-checkbox,
.webform-submission-form .form-type-radio {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 10px;
  row-gap: var(--sxp-space-xxs);
  padding: 0;
  margin: 0;
}

/* Native input — fixed size, ochre tint, doesn't shrink in the flex row. */
.webform-submission-form input[type="checkbox"],
.webform-submission-form input[type="radio"] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 2px 0 0 0;
  accent-color: var(--sxp-ochre-100);
  cursor: pointer;
}

.webform-submission-form input[type="checkbox"]:focus-visible,
.webform-submission-form input[type="radio"]:focus-visible {
  outline: 2px solid var(--sxp-ochre-100);
  outline-offset: 2px;
}

/* Label takes the rest of row 1; min-width: 0 lets it wrap text instead
   of being squeezed into a narrow column. */
.webform-submission-form .form-type-checkbox > label,
.webform-submission-form .form-type-radio > label {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
}

/* Description nested INSIDE the form-item div (Drupal's actual rendering
   for #description_display: after — class is .webform-element-description--after).
   flex-basis: 100% drops it onto a new row of the form-item's flex layout,
   margin-left: 30px aligns the text under the label.

   We give the description ONLY a small top margin (8px) for tight
   coupling under the label. The gap to the NEXT form-item below comes
   naturally from .form-item's existing margin-bottom (24px), set near
   the top of this stylesheet — no separate rule needed. */
.webform-submission-form .form-type-checkbox > .description,
.webform-submission-form .form-type-checkbox > .webform-element-description,
.webform-submission-form .form-type-checkbox > .webform-element-description--after,
.webform-submission-form .form-type-radio > .description,
.webform-submission-form .form-type-radio > .webform-element-description,
.webform-submission-form .form-type-radio > .webform-element-description--after {
  flex-basis: 100%;
  margin: var(--sxp-space-xxs) 0 0 30px;
  padding: 0;
}

/* Reset <p> margins inside any description so the browser's default
   ~16px top/bottom doesn't inflate the gap above or below. */
.webform-submission-form .description p,
.webform-submission-form .webform-element-description p,
.webform-submission-form .webform-element-description--after p {
  margin: 0;
}

/* Stop the required asterisk from leaking into the checkbox row.
   .form-required can be applied to the LABEL (which is what we want —
   "Title *") OR sometimes to other ancestors. Restrict the ::after rule
   to label/legend only so it can't render after the checkbox itself. */
.webform-submission-form label.form-required::after,
.webform-submission-form legend.form-required::after,
.webform-submission-form .form-required.option::after {
  content: "*";
  display: inline;
  margin-left: 0.25em;
  width: auto;
  height: auto;
  background: none;
  color: var(--sxp-ochre-100);
}

/* ---------- Fieldsets ---------- */
.webform-submission-form fieldset {
  margin: 0 0 var(--sxp-space-md);
  padding: 0;
  border: 0;
}

/* ---------- Flexbox layout (Webform's flexbox container element) ----------
   Drupal renders flexbox as:
     <div class="webform-flexbox">
       <div class="webform-flex webform-flex--1">…</div>
       <div class="webform-flex webform-flex--1">…</div>
     </div>
   The webform-flex--N class is the flex-grow value. */
.webform-submission-form .webform-flexbox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sxp-space-sm);
  margin-bottom: var(--sxp-space-md);
}

.webform-submission-form .webform-flexbox > .webform-flex {
  flex: 1 1 200px;  /* Default: equal growth, min 200px before wrapping. */
  min-width: 0;     /* Allows inputs to shrink below intrinsic content width. */
}

.webform-submission-form .webform-flexbox > .webform-flex--1 { flex: 1 1 200px; }
.webform-submission-form .webform-flexbox > .webform-flex--2 { flex: 2 1 200px; }
.webform-submission-form .webform-flexbox > .webform-flex--3 { flex: 3 1 200px; }
.webform-submission-form .webform-flexbox > .webform-flex--4 { flex: 4 1 200px; }

/* No double-margin when a form-item sits directly inside a flex child. */
.webform-submission-form .webform-flexbox > .webform-flex > .form-item,
.webform-submission-form .webform-flexbox > .webform-flex > .js-form-wrapper {
  margin-bottom: 0;
}

/* Hidden flex items shouldn't leave a gap. */
.webform-submission-form .webform-flexbox > .webform-flex.js-webform-states-hidden {
  display: none;
}

/* Stack flex children on narrow screens. */
@media (max-width: 500px) {
  .webform-submission-form .webform-flexbox {
    flex-direction: column;
  }
}

/* ---------- Links (inside processed-text blocks, descriptions) ---------- */
.webform-submission-form a {
  color: var(--sxp-ochre-100);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.webform-submission-form a:hover,
.webform-submission-form a:focus {
  color: var(--sxp-ochre-120);
}

/* ---------- Processed-text elements (policy links etc.) ---------- */
.webform-submission-form .webform-element-processed_text {
  margin-top: var(--sxp-space-md);
}

/* ---------- Submit / action buttons ---------- */
.webform-submission-form .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sxp-space-xs);
  margin-top: var(--sxp-space-lg);
}

.webform-submission-form .form-actions .button,
.webform-submission-form .form-actions button[type="submit"],
.webform-submission-form .form-actions input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
  background: var(--sxp-ochre-100);
  border: 1px solid var(--sxp-ochre-110);
  border-radius: var(--sxp-radius);
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, transform 0.1s;
  -webkit-appearance: none;
  appearance: none;
}

.webform-submission-form .form-actions .button:hover,
.webform-submission-form .form-actions button[type="submit"]:hover,
.webform-submission-form .form-actions input[type="submit"]:hover {
  background: var(--sxp-ochre-120);
  border-color: var(--sxp-ochre-120);
  color: #fff;
}

.webform-submission-form .form-actions .button:focus-visible,
.webform-submission-form .form-actions button[type="submit"]:focus-visible,
.webform-submission-form .form-actions input[type="submit"]:focus-visible {
  outline: 2px solid var(--sxp-ochre-100);
  outline-offset: 3px;
}

.webform-submission-form .form-actions .button:active,
.webform-submission-form .form-actions button[type="submit"]:active,
.webform-submission-form .form-actions input[type="submit"]:active {
  transform: translateY(1px);
}

/* Submitting state — toggled by the companion JS via aria-busy. */
.webform-submission-form .form-actions [aria-busy="true"] {
  opacity: 0.7;
  cursor: wait;
}

/* Full-width button on mobile. */
@media (max-width: 600px) {
  .webform-submission-form .form-actions {
    flex-direction: column;
  }
  .webform-submission-form .form-actions .button,
  .webform-submission-form .form-actions button[type="submit"],
  .webform-submission-form .form-actions input[type="submit"] {
    width: 100%;
  }
}

/* ---------- Smooth #states transitions ----------
   Paired with the companion JS, which adds/removes the helper
   classes below when Drupal toggles js-webform-states-hidden. */
.webform-submission-form .js-form-item,
.webform-submission-form .js-form-wrapper {
  transition: opacity 0.25s ease, max-height 0.3s ease;
}

.webform-submission-form .sxp-states-collapsing {
  opacity: 0;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden;
}

/* ---------- Webform-level messages (confirmation, errors) ---------- */
.webform-submission-form .messages {
  margin-bottom: var(--sxp-space-md);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  border-radius: var(--sxp-radius);
  border: 1px solid transparent;
}

.webform-submission-form .messages--error {
  color: var(--sxp-error);
  background: #fde6e3;
  border-color: var(--sxp-error);
}

.webform-submission-form .messages--status {
  color: var(--sxp-success);
  background: #e6f7ee;
  border-color: var(--sxp-success);
}

/* ============================================================
   Card wrapper — DEDICATED WEBFORM PAGES ONLY
   ------------------------------------------------------------
   .path-form is the body class Drupal adds for URLs starting
   /form/… (the default Webform dedicated URL). If your forms
   live somewhere else, add your own selector below (e.g.
   .page-node-type-landing-page, .path-contact).
   ============================================================ */
.path-form .webform-submission-form,
.path-webform .webform-submission-form {
  max-width: 640px;
  margin: 3rem auto;        /* Breathing room above and below the card. */
  padding: 2rem;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(20, 20, 20, 0.08);
}

@media (max-width: 600px) {
  .path-form .webform-submission-form,
  .path-webform .webform-submission-form {
    margin: 1.5rem auto;    /* Tighter on mobile. */
    padding: 1.25rem;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ============================================================
   Black page background — dedicated webform pages
   ------------------------------------------------------------
   The site's default page header expects a dark background.
   We blacken the body and clear any opaque backgrounds the
   theme may set on main / content wrappers, so the card still
   reads as a white island on black.
   ============================================================ */
body.path-form,
body.path-webform {
  background: #141414;
}

/* Clear theme-level background colours on wrapper elements so the
   body's #141414 shows through. .page-layout-container and
   .dialog-off-canvas-main-canvas are the outermost wrappers in
   this theme; the rest are common Drupal defaults in case the
   markup shifts with a theme update. */
body.path-form .page-layout-container,
body.path-form .dialog-off-canvas-main-canvas,
body.path-form main,
body.path-form .layout-container,
body.path-form .layout-content,
body.path-form .region-content,
body.path-webform .page-layout-container,
body.path-webform .dialog-off-canvas-main-canvas,
body.path-webform main,
body.path-webform .layout-container,
body.path-webform .layout-content,
body.path-webform .region-content {
  background: transparent;
}

/* Give the card a faint rim so it doesn't look cut-out on pure black. */
body.path-form .webform-submission-form,
body.path-webform .webform-submission-form {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   Sticky footer — very large screens only
   ------------------------------------------------------------
   Above 1200px, if content is shorter than the viewport the
   footer drops to the bottom instead of floating mid-page.

   The theme's markup is:
     body
       └ .dialog-off-canvas-main-canvas
           └ .page-layout-container   ← flex parent lives here
               ├ header
               ├ main
               └ footer

   We make .page-layout-container a flex column at least 100vh
   tall, then push the footer down with margin-top:auto.
   ============================================================ */
@media (min-width: 1200px) {
  body.path-form .page-layout-container,
  body.path-webform .page-layout-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  /* Push footer to the bottom. Targets HTML5 <footer>, a .site-footer
     class, or the ARIA contentinfo landmark — one should match. */
  body.path-form .page-layout-container > footer,
  body.path-form .page-layout-container .site-footer,
  body.path-form .page-layout-container [role="contentinfo"],
  body.path-webform .page-layout-container > footer,
  body.path-webform .page-layout-container .site-footer,
  body.path-webform .page-layout-container [role="contentinfo"] {
    margin-top: auto;
  }
}