/* Cobalt Medical Delivery — form landing page (page 9 / front page) */

body.page-id-9 { overflow-x: hidden; background: #fff; }
body.page-id-9 header.wp-block-template-part,
body.page-id-9 footer.wp-block-template-part,
body.page-id-9 .wp-block-post-title { display: none; }
body.page-id-9 .wp-site-blocks { padding: 0; margin: 0; }
body.page-id-9 main { margin: 0 !important; padding: 0 !important; }
body.page-id-9 .wp-block-post-content { margin: 0 !important; padding: 0 !important; }
body.page-id-9 main > .wp-block-group { padding-top: 0 !important; padding-bottom: 0 !important; }
body.page-id-9 .wp-block-post-content > .cmd-page { max-width: none !important; }
html:has(body.page-id-9) { overflow-x: hidden; }

.cmd-page {
  --cmd-bg: #ffffff;
  --cmd-surface: #F4F7FB;
  --cmd-ink: #212529;
  --cmd-accent: #006AE3;
  --cmd-navy: #1D426A;
  --cmd-navy-deep: #16334F;
  --cmd-border: #C9D5E4;
  --cmd-track: #E3ECF7;
  --cmd-link-on-navy: #A9CCF6;
  --cmd-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* One shared content column: top bar, hero, form card and footer all align to it. */
  --cmd-maxw: 800px;
  --cmd-gutter: 24px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  font-family: var(--cmd-font);
  color: var(--cmd-ink);
  font-size: 16px;
  line-height: 1.6;
}
.cmd-page .cmd-inner {
  box-sizing: border-box;
  max-width: calc(var(--cmd-maxw) + var(--cmd-gutter) * 2);
  margin: 0 auto;
  padding-left: var(--cmd-gutter);
  padding-right: var(--cmd-gutter);
}
.cmd-page .cmd-inner > * { box-sizing: border-box; }

/* ---- top bar ---- */
.cmd-topbar { background: #fff; border-bottom: 1px solid var(--cmd-border); }
.cmd-topbar .cmd-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.cmd-logo img { display: block; height: 48px; width: auto; }
.cmd-topbar-contact { display: flex; gap: 28px; flex-wrap: wrap; font-weight: 600; font-size: 0.95rem; }
.cmd-topbar-contact a { color: var(--cmd-navy); text-decoration: none; }
.cmd-topbar-contact a:hover { color: var(--cmd-accent); }

/* ---- the navy sheet: holds the hero and the form band, and carries the
   background image. The scrim uses fixed pixel stops rather than
   percentages so the fade lands in the same place regardless of how tall
   the form is on a given step. ---- */
.cmd-sheet {
  position: relative;
  isolation: isolate;
  background-color: var(--cmd-navy);
}
/* The artwork is viewport-fixed, so its size no longer depends on how tall
   the form happens to be on a given step: `cover` resolves against the
   viewport and the image renders near 1:1 whatever the page height. The
   scrim is a flat wash rather than a fade, because with a fixed image there
   is no "bottom of the artwork" for a fade to land on. */
.cmd-sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(29, 66, 106, 0.46), rgba(29, 66, 106, 0.46)),
    url('/wp-content/uploads/2026/08/cobalt-delivery-bg-web.jpg');
  background-size: auto, cover;
  background-position: center, center center;
  background-attachment: scroll, fixed;
  background-repeat: no-repeat, no-repeat;
}

/* Mobile browsers handle `fixed` backgrounds poorly (iOS in particular), and
   a viewport-tall sheet would upscale the image badly with `scroll`. Bound
   the layer to a banner height there instead so it stays sharp. Reduced-motion
   users get the same treatment, since a fixed background reads as movement. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .cmd-sheet::before {
    inset: 0 0 auto 0;
    height: 460px;
    background-attachment: scroll, scroll;
    background-position: center, center top;
    background-image:
      linear-gradient(to bottom,
        rgba(29, 66, 106, 0.44) 0%,
        rgba(29, 66, 106, 0.52) 62%,
        rgba(29, 66, 106, 0.86) 90%,
        var(--cmd-navy) 100%),
      url('/wp-content/uploads/2026/08/cobalt-delivery-bg-web.jpg');
  }
}

/* ---- hero ---- */
.cmd-hero { background: transparent; color: #fff; }
.cmd-hero .cmd-inner { padding-top: 52px; padding-bottom: 26px; }
.cmd-hero h1 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; margin: 0; color: #fff; }
.cmd-hero-sub { margin: 16px 0 0; font-size: 1.0625rem; line-height: 1.6; color: rgba(255,255,255,0.88); max-width: 62ch; }
.cmd-hero-hint { margin: 18px 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--cmd-link-on-navy); max-width: 70ch; }

/* ---- form band ---- */
.cmd-form-band { background: transparent; padding: 8px 0 88px; }
.cmd-form-card { background: #fff; border: 1px solid var(--cmd-border); border-radius: 10px; padding: clamp(22px, 3.5vw, 40px); box-shadow: 0 18px 44px rgba(8, 20, 35, 0.42); }

/* Gravity Forms: Orbital theme variables */
.cmd-form-card .gform_wrapper.gform-theme.gform-theme--orbital,
.cmd-form-card .gform_wrapper.gform-theme,
.cmd-form-card .gform_wrapper {
  --gf-color-primary: var(--cmd-accent);
  --gf-color-primary-rgb: 0, 106, 227;
  --gf-color-primary-contrast: #ffffff;
  --gf-color-in-ctrl-primary: var(--cmd-accent);
  --gf-ctrl-border-color: var(--cmd-border);
  --gf-ctrl-radius: 6px;
  --gf-ctrl-btn-background-color-primary: var(--cmd-navy);
  --gf-ctrl-btn-background-color-hover-primary: var(--cmd-accent);
  --gf-ctrl-btn-border-color-primary: var(--cmd-navy);
  --gf-ctrl-btn-border-color-hover-primary: var(--cmd-accent);
  --gf-ctrl-btn-radius: 6px;
  --gf-ctrl-label-color-primary: var(--cmd-ink);
  --gf-ctrl-desc-color: rgba(33, 37, 41, 0.68);
  --gf-color-required: var(--cmd-accent);
  /* Tighter vertical rhythm between fields (Orbital ships 40px). */
  --gf-form-gap-y: 22px;
  /* Yes/No option spacing (set via the variable: Orbital's `gap` shorthand
     beats a row-gap override at equal specificity). */
  --gf-field-choice-gap: 8px;
  /* Buttons. Orbital sizes these off a fixed height plus padding-x, so a plain
     `padding` declaration here never lands; set its variables instead. */
  --gf-ctrl-btn-size: 52px;
  --gf-ctrl-btn-size-md: 52px;
  --gf-ctrl-btn-padding-x: 36px;
  --gf-ctrl-btn-padding-x-md: 36px;
  --gf-ctrl-btn-font-size: 16px;
  --gf-ctrl-btn-font-size-md: 16px;
  --gf-ctrl-btn-font-weight: 600;
  font-family: var(--cmd-font);
}

/* Trim the label/description spacing that rides along with each field. */
.cmd-form-card .gform_wrapper .gfield_label,
.cmd-form-card .gform_wrapper legend.gfield_label { margin-bottom: 6px; }
/* Descriptions sit between the label and the input (form-level
   descriptionPlacement is "above"), so they need spacing on both sides. */
.cmd-form-card .gform_wrapper .gfield_description { padding-top: 0; margin-top: 5px; margin-bottom: 8px; }

/* Inline error notice.
   Gravity Forms gives the error element BOTH .gfield_description and
   .gfield_validation_message, so the helper-text rule above was winning and
   errors rendered as ordinary grey hint text. The doubled class below raises
   specificity so the error always beats the description styling.
   Red here is a functional state color, not a second brand accent. */
.cmd-form-card .gform_wrapper .gfield_description.gfield_validation_message,
.cmd-form-card .gform_wrapper .gfield_validation_message,
.cmd-form-card .gform_wrapper .validation_message {
  background: #FDF3F1;
  border: 1px solid rgba(192, 43, 10, 0.28);
  border-left: 3px solid #C02B0A;
  border-radius: 6px;
  padding: 9px 12px;
  margin-top: 8px;
  margin-bottom: 0;
  color: #A32409;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.45;
}

/* Give the control itself a red edge so the eye lands on the right field. */
.cmd-form-card .gform_wrapper .gfield_error input[type='text'],
.cmd-form-card .gform_wrapper .gfield_error input[type='email'],
.cmd-form-card .gform_wrapper .gfield_error input[type='tel'],
.cmd-form-card .gform_wrapper .gfield_error input[type='number'],
.cmd-form-card .gform_wrapper .gfield_error select,
.cmd-form-card .gform_wrapper .gfield_error textarea {
  border-color: rgba(192, 43, 10, 0.55);
}

/* Labels and descriptions */
.cmd-form-card .gform_wrapper .gfield_label,
.cmd-form-card .gform_wrapper legend.gfield_label { font-weight: 600; color: var(--cmd-ink); font-size: 0.95rem; }
.cmd-form-card .gform_wrapper .gfield_required { color: var(--cmd-accent); }
.cmd-form-card .gform_wrapper .gfield_description { color: rgba(33, 37, 41, 0.68); font-size: 0.85rem; }
.cmd-form-card .gform_wrapper .ginput_complex label,
.cmd-form-card .gform_wrapper .gform-field-label--type-sub { font-size: 0.8rem; color: rgba(33, 37, 41, 0.68); }

/* Inputs */
.cmd-form-card .gform_wrapper input[type='text'],
.cmd-form-card .gform_wrapper input[type='email'],
.cmd-form-card .gform_wrapper input[type='tel'],
.cmd-form-card .gform_wrapper input[type='number'],
.cmd-form-card .gform_wrapper select,
.cmd-form-card .gform_wrapper textarea {
  /* background-color, never the `background` shorthand: the shorthand resets
     background-repeat/position/size, and Gravity Forms sets only
     background-image on select:hover, so its dropdown chevron would tile
     across the whole field. */
  background-color: #fff; border: 1px solid var(--cmd-border); border-radius: 6px; color: var(--cmd-ink);
  font-family: var(--cmd-font); font-size: 1rem;
}
/* Pin the dropdown chevron. Gravity Forms paints it on the select as a
   background-image, but does not reliably set repeat/position/size here, so
   without these three the 10x6 arrow tiles across the whole field on hover. */
.cmd-form-card .gform_wrapper select {
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 10px 6px !important;
}

.cmd-form-card .gform_wrapper input:focus,
.cmd-form-card .gform_wrapper select:focus,
.cmd-form-card .gform_wrapper textarea:focus {
  border-color: var(--cmd-accent); box-shadow: 0 0 0 2px rgba(0, 106, 227, 0.22); outline: none;
}
.cmd-form-card .gform_wrapper input[type='radio'],
.cmd-form-card .gform_wrapper input[type='checkbox'] { accent-color: var(--cmd-accent); }

/* Validation summary: Gravity Forms lists each failed field here with a link
   to it. Keep its red (it is a functional error color, not a brand accent)
   and just match the form's radius and type. */
.cmd-form-card .gform_wrapper .gform_validation_errors {
  border-radius: 6px;
  font-family: var(--cmd-font);
}
.cmd-form-card .gform_wrapper .gform_validation_errors > h2 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}
.cmd-form-card .gform_wrapper .gform_validation_errors ol,
.cmd-form-card .gform_wrapper .gform_validation_errors ul { margin-top: 8px; }
.cmd-form-card .gform_wrapper .gform_validation_errors a { font-weight: 500; }

/* Section heading: a plain h3, no rule and no padding on the wrapper.
   (Gravity Forms puts a border-bottom on .gsection by default, so `border:
   none` still has to stay.) */
.cmd-form-card .gform_wrapper .gsection { border: none; padding: 0; }
.cmd-form-card .gform_wrapper .gsection .gsection_title { font-weight: 700; color: var(--cmd-navy); font-size: 1.25rem; letter-spacing: -0.01em; }

/* Progress bar */
.cmd-form-card .gf_progressbar_wrapper { margin-bottom: 28px; }
.cmd-form-card .gf_progressbar_title { font-size: 0.85rem; font-weight: 600; color: var(--cmd-navy); }
.cmd-form-card .gf_progressbar { background: var(--cmd-track); border-radius: 6px; overflow: hidden; }
.cmd-form-card .gf_progressbar_percentage { background: var(--cmd-accent) !important; border-radius: 6px; }

/* Buttons: colors here, sizing from the --gf-ctrl-btn-* variables above.
   (important: outrank Orbital's own high-specificity rules) */
.cmd-form-card .gform_wrapper .gform_button,
.cmd-form-card .gform_wrapper .gform_next_button,
.cmd-form-card .gform_wrapper button.gform-theme-button:not(.gform-theme-button--simple):not(.gform-theme-button--secondary),
.cmd-form-card .gform_wrapper input.gform-theme-button:not(.gform-theme-button--secondary),
.cmd-form-card .gform_wrapper input[type='submit'] {
  background: var(--cmd-navy) !important; color: #fff !important; border: 1px solid var(--cmd-navy) !important; border-radius: 6px !important;
  font-family: var(--cmd-font); cursor: pointer; box-shadow: none !important;
}
.cmd-form-card .gform_wrapper .gform_button:hover,
.cmd-form-card .gform_wrapper .gform_next_button:hover,
.cmd-form-card .gform_wrapper button.gform-theme-button:not(.gform-theme-button--simple):not(.gform-theme-button--secondary):hover,
.cmd-form-card .gform_wrapper input.gform-theme-button:not(.gform-theme-button--secondary):hover,
.cmd-form-card .gform_wrapper input[type='submit']:hover { background: var(--cmd-accent) !important; border-color: var(--cmd-accent) !important; }
.cmd-form-card .gform_wrapper .gform_previous_button,
.cmd-form-card .gform_wrapper input.gform_previous_button,
.cmd-form-card .gform_wrapper button.gform-theme-button--secondary {
  background: #fff !important; color: var(--cmd-navy) !important; border: 1px solid var(--cmd-border) !important; border-radius: 6px !important;
  font-family: var(--cmd-font); cursor: pointer; box-shadow: none !important;
}
.cmd-form-card .gform_wrapper .gform_previous_button:hover,
.cmd-form-card .gform_wrapper input.gform_previous_button:hover,
.cmd-form-card .gform_wrapper button.gform-theme-button--secondary:hover { border-color: var(--cmd-navy) !important; }

/* "Save and finish later" comes out taller than the other buttons because
   Orbital sizes it from its own line-height rather than --gf-ctrl-btn-size. */
.cmd-form-card .gform_wrapper .gform_save_link {
  min-height: 52px !important;
  height: 52px !important;
  line-height: 1 !important;
}

/* Delete control on an uploaded file. Gravity Forms marks this button
   `--simple` (a subtle control, not a primary action), so it is excluded from
   the solid navy rule above. Orbital colors the glyph itself rather than
   letting it inherit, so the icon color has to be set explicitly or it stays
   dark grey and disappears against any dark ground. */
.cmd-form-card .gform_wrapper button.gform_delete_file,
.cmd-form-card .gform_wrapper button.gform-theme-button--simple {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--cmd-navy) !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 4px !important;
  cursor: pointer;
}
.cmd-form-card .gform_wrapper button.gform_delete_file .dashicons,
.cmd-form-card .gform_wrapper button.gform-theme-button--simple .dashicons,
.cmd-form-card .gform_wrapper button.gform_delete_file .dashicons::before,
.cmd-form-card .gform_wrapper button.gform-theme-button--simple .dashicons::before,
.cmd-form-card .gform_wrapper button.gform_delete_file::before,
.cmd-form-card .gform_wrapper button.gform-theme-button--simple::before { color: var(--cmd-navy) !important; }

.cmd-form-card .gform_wrapper button.gform_delete_file:hover,
.cmd-form-card .gform_wrapper button.gform-theme-button--simple:hover {
  background: var(--cmd-track) !important;
  border-color: var(--cmd-border) !important;
}
.cmd-form-card .gform_wrapper button.gform_delete_file:hover .dashicons,
.cmd-form-card .gform_wrapper button.gform-theme-button--simple:hover .dashicons,
.cmd-form-card .gform_wrapper button.gform_delete_file:hover .dashicons::before,
.cmd-form-card .gform_wrapper button.gform-theme-button--simple:hover .dashicons::before,
.cmd-form-card .gform_wrapper button.gform_delete_file:hover::before,
.cmd-form-card .gform_wrapper button.gform-theme-button--simple:hover::before { color: var(--cmd-accent) !important; }

/* Download / delete icon links in the saved-file list. */
.cmd-form-card .gform_wrapper .ginput_preview_control { color: var(--cmd-navy); }
.cmd-form-card .gform_wrapper .ginput_preview_control:hover { color: var(--cmd-accent); }
.cmd-form-card .gform_wrapper .gfield_fileupload_filename { color: var(--cmd-ink); }

/* File upload drop area */
.cmd-form-card .gform_wrapper .gform_drop_area {
  border: 1.5px dashed var(--cmd-border); background: #F9FBFE; border-radius: 6px; padding: 28px; text-align: center;
}
.cmd-form-card .gform_wrapper .gform_drop_instructions { color: rgba(33, 37, 41, 0.68); }

/* Confirmation message */
.cmd-form-card .gform_confirmation_message { font-size: 1.125rem; color: var(--cmd-ink); }

/* ---- footer ---- */
.cmd-footer { background: var(--cmd-navy-deep); color: #fff; }
.cmd-footer .cmd-inner { padding-top: 44px; padding-bottom: 22px; }
.cmd-footer-cols { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cmd-footer strong { display: block; font-size: 1.125rem; font-weight: 700; color: #fff; }
.cmd-footer p { margin: 6px 0 0; color: rgba(255,255,255,0.85); font-size: 0.95rem; }
.cmd-footer a { color: var(--cmd-link-on-navy); text-decoration: none; }
.cmd-footer a:hover { color: #fff; text-decoration: underline; }
.cmd-footer-legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.18); font-size: 0.85rem; color: rgba(255,255,255,0.65); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .cmd-hero .cmd-inner { padding-top: 36px; padding-bottom: 20px; }
  .cmd-form-band { padding-top: 4px; padding-bottom: 60px; }
  /* Drop the phone and email from the header on small screens so the logo
     keeps a single clean line. Both are still in the footer. */
  .cmd-topbar-contact { display: none; }
}