/**
 * Angels Driving School — responsive repair layer.
 * Version 1.5
 *
 * Loaded last, by angels-fixes.php, over the existing CloudPress stylesheets.
 * No theme file is modified. Deleting this file reverts every change.
 *
 * ---------------------------------------------------------------------------
 * REMOVED IN 1.1 — these four rule sets in version 1.0 caused blank sections
 * and collapsed layouts. None is coming back in that form.
 *
 *   1. `min-height: 0` on rows and columns below 768px.
 *      191 generated rules use min-height between 150px and 763px as their
 *      ONLY source of height — decorative bands whose content is a background
 *      image and nothing else. Zeroing it collapsed every one to no height.
 *
 *   2. `width: auto !important` below 1280px.
 *      Meant to cap 68 `width:1232px` literals. Instead overrode 547
 *      percentage width rules — every 25%, 33%, 50%, 66% and 75% column, at
 *      every width up to 1279px, which includes tablet and most laptops.
 *      `max-width: 100%` alone was the correct fix.
 *
 *   3. `overflow-x: hidden` on html and body.
 *      Any overflow other than visible on an ancestor makes it a scroll
 *      container, which silently disables position:sticky on all descendants.
 *
 *   4. Percentage padding on rows AND columns.
 *      Generated markup nests rows in columns in rows; 5% at each level
 *      compounds to 15% of the viewport per side three levels deep.
 *
 * NEW IN 1.3 — the white space above the footer. Root cause identified from
 * live DevTools measurements rather than inferred: one declaration, section 6.
 *
 * Version 1.2 contained a list of seven min-height selectors I had reasoned
 * were responsible. They were not. Measurement showed a single margin was the
 * cause, so that speculative list has been REMOVED rather than left in
 * "just in case" — untested rules on this codebase are how sections collapsed
 * earlier in this project.
 *
 * Otherwise this version only changes things that CANNOT alter layout
 * geometry. Overflow is fixed at the element that overflows, never at the
 * grid. Column widths and stacking are still deliberately absent.
 * ---------------------------------------------------------------------------
 */

/* =========================================================================
 * 1. Overflow — fixed at the element, never at the grid
 * ===================================================================== */

body img,
body .wp-caption {
  height: auto;
  max-width: 100%;
}

body iframe,
body embed,
body object,
body video {
  max-width: 100%;
}

@media (max-width: 767px) {
  body .content table,
  body [class*="column_"] table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

body p,
body li,
body td,
body dd,
body h1, body h2, body h3, body h4, body h5, body h6 {
  overflow-wrap: break-word;
}

/* Deliberately NOT included: overflow-x:hidden on html or body. See note 3. */

/* =========================================================================
 * 2. Forms — scoped to .gform_wrapper so it cannot reach page layout
 * ===================================================================== */

body .gform_wrapper input[type="text"],
body .gform_wrapper input[type="email"],
body .gform_wrapper input[type="tel"],
body .gform_wrapper input[type="number"],
body .gform_wrapper select,
body .gform_wrapper textarea {
  max-width: 100%;
}

@media (max-width: 767px) {
  /*
   * Gravity Forms sets inline widths and floats on composite sub-fields
   * (Name, Address, Credit Card). On a phone those halves squeeze to roughly
   * 130px each, which is not usable for entering a card number.
   */
  body .gform_wrapper .ginput_complex span,
  body .gform_wrapper .ginput_left,
  body .gform_wrapper .ginput_right,
  body .gform_wrapper .ginput_cardinfo_left,
  body .gform_wrapper .ginput_cardinfo_right {
    display: block !important;
    float: none !important;
    margin: 0 0 0.5rem;
    width: 100% !important;
  }
}

@media (pointer: coarse) {
  /*
   * iOS Safari zooms the viewport whenever a focused input computes below
   * 16px. On a card form that jump is a documented cause of abandoned mobile
   * checkouts. Gravity Forms sets these sizes inline.
   */
  body .gform_wrapper input,
  body .gform_wrapper select,
  body .gform_wrapper textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
}

body .gform_wrapper .gfield_radio li,
body .gform_wrapper .gfield_checkbox li {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  min-height: 24px;
}

body .gform_wrapper .gfield_radio label,
body .gform_wrapper .gfield_checkbox label {
  margin: 0;
}

/* =========================================================================
 * 3. Touch targets — minimum only, coarse pointers only. WCAG 2.2 SC 2.5.8.
 * ===================================================================== */

@media (pointer: coarse) {
  body [class*="drop_mainmenu"] a,
  body a[class*="button"],
  body input[type="submit"],
  body button {
    min-height: 44px;
  }
}

/* =========================================================================
 * 4. Accessibility repairs that cannot affect layout
 * ===================================================================== */

/* The theme defines no focus styling anywhere. Outline does not participate
 * in layout, so this cannot shift anything. */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body [tabindex]:focus-visible {
  outline: 3px solid #1f7fa3;
  outline-offset: 2px;
}

/* Sticky header can hide a keyboard-focused element. WCAG 2.2 SC 2.4.11.
 * scroll-margin affects scroll position only, never layout. */
body a,
body button,
body input,
body select,
body textarea {
  scroll-margin-top: 7rem;
}

/* Reveal effects start at opacity:0 and rely on JS to fade in. If that script
 * is blocked, content is in the DOM and invisible to the visitor. */
@media (prefers-reduced-motion: reduce) {
  body [reveal-fx],
  body .cp-interaction {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  body *,
  body *::before,
  body *::after {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}

/* =========================================================================
 * 5. Print — enrolment confirmations get printed
 * ===================================================================== */

@media print {
  body [class*="drop_mainmenu"],
  body [class*="mobile-overlay"],
  body .gform_footer {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}



/* =========================================================================
 * 6. The white space above the footer
 *
 * ROOT CAUSE — one declaration in the theme's style.css.
 *
 *   Line 28, BASE context (no media query, so it applies at EVERY width):
 *
 *       .content {
 *           background: url("../../uploads/2015/06/bkg.png") ... fixed transparent;
 *           margin-bottom: 588px;
 *       }
 *
 *   Line 1511, inside @media only screen and (min-width: 1024px):
 *
 *       .content {
 *           min-height: 500px;
 *           padding: 0;
 *           margin-top: 163px;
 *           margin-bottom: auto;      <- the reset
 *       }
 *
 * The 588px bottom margin is cancelled at 1024px and above, and nowhere else.
 * Below 1024px it applies in full. `.content` is the wrapper around the whole
 * page body in page.php, so that margin sits directly between the content and
 * the footer.
 *
 * DevTools on the live site confirms it: div.content, margin-bottom 588px.
 * That is the gap, to the pixel.
 *
 * NOTE ON THE BREAKPOINT: this is max-width 1023px, not 767px. The desktop
 * reset only starts at 1024px, so the same gap is present on TABLET as well
 * as mobile — it just was not reported.
 *
 * Setting the margin to 0 cannot affect the background image on that rule.
 * Backgrounds paint inside the box; margin is outside it.
 * ===================================================================== */

@media (max-width: 1023px) {
  .content {
    margin-bottom: 0;
  }
}

/* =========================================================================
 * 7. Genuinely empty containers
 *
 * :empty matches only elements with no child elements AND no text, so this
 * cannot hit anything with content in it. Several columns in the band above
 * the footer are empty at mobile widths and were still holding gutter height.
 * ===================================================================== */

@media (max-width: 1023px) {
  [class*="column_"]:empty,
  [class*="row_"]:empty {
    display: none;
  }
}


/* =========================================================================
 * 8. The white sliver on the right — ROOT CAUSE
 *
 * reset.css contains the Meyer reset v2.0. Its opening block lists 82
 * selectors — html, body, div, span, p, li, td, section, footer, and most
 * other elements. Someone appended a declaration to it:
 *
 *     html, body, div, span, ... , caption {
 *         margin: 0;
 *         padding: 0;
 *         border: 0;
 *         font-size: 100%;
 *         vertical-align: baseline;
 *         padding-right: 4px;      <-- NOT part of the Meyer reset
 *     }
 *
 * It comes after `padding: 0`, so it wins. Every div on the site therefore
 * carries 4px of right padding, and because the generated markup nests rows
 * inside columns inside rows, the loss compounds with depth.
 *
 * Your own measurements at 375px prove it exactly:
 *
 *     .footer     right edge 367   -> 8px short   (2 nesting levels x 4px)
 *     .row_165    right edge 359   -> 16px short  (4 nesting levels x 4px)
 *
 * The dark background stops where the box stops, and the page background
 * shows through in the remaining strip. That is the white line, on both
 * desktop and mobile, and it is why it looked slightly wider next to the
 * copyright bar than beside the form — different nesting depth.
 *
 * It also means every paragraph, list item and table cell on the site has
 * been 4px narrower on the right than on the left since the theme was built.
 *
 * FIX: the same 82 selectors, padding-right reset to 0, loaded last.
 *
 * This is surgical rather than blunt. Element selectors have specificity
 * 0,0,1, so any rule that sets padding-right through a class — every
 * .column_N with padding-right:15px, for instance — still wins. Only the
 * blanket 4px is undone.
 * ===================================================================== */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  padding-right: 0;
}

/* =========================================================================
 * 9. Safety net for the generated fixed widths
 *
 * footer.css sets width:1232px in 12 places. No horizontal overflow was
 * measured on the live site, so this is not currently doing anything — but
 * max-width can only ever constrain, never expand, so it cannot change a
 * layout that already fits. A column at width:25% is untouched; one at
 * width:1232px in a 375px viewport becomes 375px.
 *
 * Note this is max-width ONLY. Version 1.0 of this file also set
 * `width: auto !important` here, which destroyed 547 percentage widths and
 * collapsed the layout. That half is not coming back.
 * ===================================================================== */

[class*="column_"],
[class*="row_"],
[class*="full_row_"],
.gridContainer,
.content_column {
  max-width: 100%;
}

/* =========================================================================
 * 10. Footer contact form — Gravity Form 16, in #ContactForm5
 *
 * WHY THIS SECTION EXISTS
 *
 * The live site's footer form is the CloudPress form. Its markup is:
 *
 *     <form id="ContactForm5_form" class="... contactForm-skin01">
 *       <div class="form-group">
 *         <div class="control-holder">
 *           <input class="form-control" placeholder="Name">
 *       <button class="button button-default"><span>Submit</span></button>
 *
 * and teamsix/footer.css styles it through those exact class names —
 * #ContactForm5_form .form-group input.form-control, and so on.
 *
 * Staging replaced that form with [gravityform id="16"]. Gravity Forms emits
 * .gform_wrapper / .gfield / .gform_button instead, so not one of those rules
 * matches any more. That is the whole reason the staging footer form renders
 * as unstyled white boxes with a default grey button while the live one looks
 * finished — nothing is "overriding" it, there is simply no CSS for it.
 *
 * This block ports the live #ContactForm5_form design onto Gravity Forms'
 * markup, value for value, from teamsix/footer.css. The intent is to make
 * staging match live, not to redesign it.
 *
 * SPECIFICITY
 *
 * Every selector is prefixed with the #ContactForm5 ID, giving (1,x,x).
 * Gravity Forms' own basic.min.css uses
 *     .gform_wrapper.gravity-theme .gform_fields   (0,3,0)
 * which would otherwise win and impose a 12-column grid with a 16px row gap.
 * One ID beats any number of classes, so these rules hold without !important
 * and without touching Gravity Forms' stylesheet.
 *
 * THREE DEVIATIONS FROM THE LIVE VALUES, ALL DELIBERATE
 *
 *   1. Input text colour. Live sets color:#2c2d30 on background:#3D3E40 —
 *      measured 1.29:1. Placeholders are just legible; text the visitor
 *      TYPES is effectively invisible. Changed to #ffffff, measured
 *      10.71:1. Placeholders are set separately below so the muted look is
 *      preserved (#a8acb2, 4.69:1 — 13px text needs 4.5:1).
 *   2. Submit label colour. Live sets color:#2c2d30 on #2193DF, measured
 *      4.13:1 — just under the 4.5:1 minimum for its size. Changed to
 *      #00243d, measured 4.78:1. Same dark-navy-on-blue appearance.
 *   3. input.form-control:hover { background-color: inherit } is not ported.
 *      It made the field blend into the footer and visually disappear under
 *      the cursor. That is a defect, not a style.
 *
 * Every ratio above was computed, not estimated. My first draft of this
 * comment guessed at them and got two wrong — including a "fix" that would
 * have made the button worse (4.09:1 against the original 4.13:1).
 *
 * Labels are visually hidden rather than display:none. The live markup uses
 * style="display:none", which also hides them from screen readers, leaving
 * three unlabelled inputs. Visually identical, actually usable.
 * ===================================================================== */

#ContactForm5 .gform_wrapper,
#ContactForm5 .gform_wrapper form {
  margin: 0;
  width: 100%;
}

/*
 * Single column, 20px apart — matches #ContactForm5_form .form-group
 * { margin-bottom: 20px }. grid-row-gap and grid-column-gap are named
 * explicitly because that is what Gravity Forms sets.
 */
#ContactForm5 .gform_wrapper .gform_fields {
  display: grid;
  grid-column-gap: 0;
  grid-row-gap: 20px;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

#ContactForm5 .gform_wrapper .gfield {
  margin: 0;
  min-width: 0;
  padding: 0;
}

/* Labels: hidden visually, kept for assistive technology. */
#ContactForm5 .gform_wrapper .gfield_label,
#ContactForm5 .gform_wrapper .ginput_complex label,
#ContactForm5 .gform_wrapper .gform_fileupload_rules {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* The Name field is a composite; only First is enabled on form 16. */
#ContactForm5 .gform_wrapper .ginput_complex {
  display: grid;
  grid-row-gap: 20px;
  grid-template-columns: 1fr;
}

#ContactForm5 .gform_wrapper .ginput_complex > span,
#ContactForm5 .gform_wrapper .ginput_complex > .ginput_left,
#ContactForm5 .gform_wrapper .ginput_complex > .ginput_right,
#ContactForm5 .gform_wrapper .ginput_complex > .ginput_full {
  float: none;
  min-width: 0;
  padding: 0;
  width: 100%;
}

/* Fields. Values from #ContactForm5_form .form-group input.form-control. */
#ContactForm5 .gform_wrapper input[type="text"],
#ContactForm5 .gform_wrapper input[type="email"],
#ContactForm5 .gform_wrapper input[type="tel"],
#ContactForm5 .gform_wrapper input[type="url"],
#ContactForm5 .gform_wrapper input[type="number"],
#ContactForm5 .gform_wrapper textarea {
  background-color: #3D3E40;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 3px;
  min-height: 46px;
  padding: 12px;
  text-transform: uppercase;
  transition: background-color ease-in-out .15s;
  width: 100%;
}

#ContactForm5 .gform_wrapper textarea {
  min-height: 96px;
  resize: vertical;
}

/*
 * Placeholders. There was no ::placeholder rule anywhere for this form, so
 * the muted grey seen on live comes only from the browser's default alpha
 * applied to the (near-invisible) text colour. Set explicitly instead.
 * opacity:1 is required — Firefox applies its own alpha otherwise.
 */
#ContactForm5 .gform_wrapper input::placeholder,
#ContactForm5 .gform_wrapper textarea::placeholder {
  color: #a8acb2;
  letter-spacing: 3px;
  opacity: 1;
  text-transform: uppercase;
}

#ContactForm5 .gform_wrapper input:focus,
#ContactForm5 .gform_wrapper textarea:focus {
  background-color: #2c2d30;
  color: #ffffff;
  outline: 2px solid #2193DF;
  outline-offset: 1px;
}

/* Submit. Values from #ContactForm5_form .form-group .button.button-default. */
#ContactForm5 .gform_wrapper .gform_footer {
  margin: 24px 0 0;
  padding: 0;
}

#ContactForm5 .gform_wrapper .gform_button,
#ContactForm5 .gform_wrapper input[type="submit"] {
  background-color: #2193DF;
  border: 0;
  border-radius: 25px;
  color: #00243d;
  cursor: pointer;
  font-family: Lato, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0;
  min-height: 44px;
  padding: 10px 0;
  text-align: center;
  text-transform: uppercase;
  transition: background-color ease-in-out .15s;
  width: 150px;
}

#ContactForm5 .gform_wrapper .gform_button:hover,
#ContactForm5 .gform_wrapper input[type="submit"]:hover {
  background-color: #1a7bbd;
}

#ContactForm5 .gform_wrapper .gform_button:focus-visible,
#ContactForm5 .gform_wrapper input[type="submit"]:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* Validation, on the dark footer surface. */
#ContactForm5 .gform_wrapper .validation_message,
#ContactForm5 .gform_wrapper .gfield_validation_message {
  background: none;
  border: 0;
  color: #ffb3a3;
  font-size: 12px;
  letter-spacing: 0;
  margin: 6px 0 0;
  padding: 0;
  text-transform: none;
}

#ContactForm5 .gform_wrapper .validation_error,
#ContactForm5 .gform_wrapper .gform_submission_error {
  background-color: #ffffff;
  border: 2px solid #b3261e;
  color: #b3261e;
  font-size: 13px;
  letter-spacing: 0;
  margin: 0 0 20px;
  padding: 10px 12px;
  text-transform: none;
}

/* GF's legacy error wash would fight the dark surface. */
#ContactForm5 .gform_wrapper .gfield_error {
  background: none;
  border: 0;
  padding: 0;
}

#ContactForm5 .gform_wrapper .gfield_error input,
#ContactForm5 .gform_wrapper .gfield_error textarea {
  box-shadow: inset 0 0 0 2px #ffb3a3;
}

#ContactForm5 .gform_wrapper .gfield_required {
  color: #ffb3a3;
}

#ContactForm5 .gform_confirmation_message,
#ContactForm5 .gform_confirmation_wrapper {
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

/* Honeypot must stay hidden from sighted users AND assistive technology. */
#ContactForm5 .gform_wrapper .gform_validation_container,
#ContactForm5 .gform_wrapper .gfield_visibility_hidden {
  display: none;
}

/*
 * Section 3 above sets font-size:16px on coarse pointers, which is correct —
 * below 16px iOS Safari zooms on focus. At 16px, though, 3px of letter
 * spacing pushes a long placeholder past the field on a narrow phone, so the
 * spacing is eased back rather than the font size.
 */
@media (pointer: coarse) {
  #ContactForm5 .gform_wrapper input,
  #ContactForm5 .gform_wrapper textarea,
  #ContactForm5 .gform_wrapper input::placeholder,
  #ContactForm5 .gform_wrapper textarea::placeholder {
    letter-spacing: 1.5px;
  }
}

@media (max-width: 767px) {
  #ContactForm5 {
    margin-top: 24px;
  }

  #ContactForm5 .gform_wrapper .gform_fields,
  #ContactForm5 .gform_wrapper .ginput_complex {
    grid-row-gap: 14px;
  }

  #ContactForm5 .gform_wrapper .gform_footer {
    margin-top: 18px;
  }

  /* Full-width tap target on a phone. */
  #ContactForm5 .gform_wrapper .gform_button,
  #ContactForm5 .gform_wrapper input[type="submit"] {
    width: 100%;
  }
}

/* =========================================================================
 * 10b. Footer form — spacing corrections
 *
 * Section 10 got the appearance right. These four rules fix the spacing
 * reported against it. Each targets a cause, not a symptom.
 * ===================================================================== */

/*
 * (a) THE GAP UNDER "SEND US A MESSAGE"
 *
 * The shortcode passes title="false" description="false", which suppresses
 * the heading TEXT — but Gravity Forms still emits the wrapper:
 *
 *     <div class="gform_heading">
 *       <p class="gform_required_legend">"*" indicates required fields</p>
 *     </div>
 *
 * On the dark footer that paragraph inherits a dark colour, so it is
 * invisible while still occupying its full line height plus margins. That
 * is the empty band between the heading and the Name field.
 *
 * It is removed rather than recoloured: the form's labels are already
 * visually hidden, so a legend explaining the asterisk has nothing to
 * refer to. The fields keep aria-required, so assistive technology is
 * unaffected.
 */
#ContactForm5 .gform_wrapper .gform_heading,
#ContactForm5 .gform_wrapper .gform_required_legend,
#ContactForm5 .gform_wrapper .gform_description {
  display: none;
}

/*
 * (b) UNEVEN GAPS BETWEEN FIELDS
 *
 * Section 10 set a 20px grid row-gap, but Gravity Forms also puts its own
 * margins on the containers INSIDE each .gfield — .gform_body,
 * .ginput_container, and .ginput_complex. Those margins add to the grid
 * gap, and they are not the same on every field type: the Name field is a
 * composite (.ginput_complex) and picks up an extra one, which is why the
 * gap under Name is visibly larger than the gap under Email.
 *
 * Zeroing the inner margins leaves the grid gap as the single source of
 * spacing, so every gap is identical by construction rather than by
 * tuning numbers until they look close.
 */
#ContactForm5 .gform_wrapper .gform_body,
#ContactForm5 .gform_wrapper .gform_page,
#ContactForm5 .gform_wrapper .gfield,
#ContactForm5 .gform_wrapper .ginput_container,
#ContactForm5 .gform_wrapper .ginput_complex,
#ContactForm5 .gform_wrapper .ginput_complex > span {
  margin-block: 0;
  margin-bottom: 0;
  margin-top: 0;
}

/* The composite Name field has one visible sub-field, so it needs no gap. */
#ContactForm5 .gform_wrapper .ginput_complex {
  grid-row-gap: 0;
}

/*
 * (c) SPACE ABOVE AND BELOW THE FORM
 *
 * teamsix/footer.css sets #ContactForm5 { margin-top: 40px }. That was
 * tuned for the CloudPress form, whose first element was the input itself.
 * Gravity Forms adds its own wrapper padding on top of it.
 *
 * 40px is kept at the container so the column still lines up with the
 * ABOUT US and Links columns, and the wrapper's own contribution is
 * removed instead.
 */
#ContactForm5 .gform_wrapper {
  margin-block: 0;
  padding: 0;
}

#ContactForm5 .gform_wrapper .gform_footer {
  margin: 20px 0 0;
  padding: 0;
}

/*
 * (d) THE OVERSIZED COPYRIGHT BAND
 *
 * teamsix/footer.css line ~; three rules for .column_189, all carrying:
 *
 *     .column_189 { min-height: 100px; ... }
 *
 * The copyright is a single line of text roughly 20px tall, so 80px of that
 * 100px is empty. That is the whole reason the band reads as too deep — it
 * is a fixed minimum, not spacing that accumulated.
 *
 * Replaced with real padding so the band sizes to its content.
 */
.column_189 {
  min-height: 0;
}

.column_189 .row_169 {
  padding-block: 18px;
}

@media (max-width: 767px) {
  #ContactForm5 {
    margin-top: 24px;
  }

  .column_189 .row_169 {
    padding-block: 14px;
  }
}

/* =========================================================================
 * 10c. Footer — remaining spacing, and the copyright band
 * ===================================================================== */

/*
 * (a) THE GAP UNDER "SEND US A MESSAGE", SECOND PASS
 *
 * 10b removed the invisible gform_required_legend, which took roughly 30px
 * out. What is left is teamsix/footer.css:
 *
 *     #ContactForm5 { margin-top: 40px }
 *
 * That 40px was measured against the CloudPress form, whose first child was
 * the input itself. Gravity Forms puts .gform_wrapper > .gform_body >
 * .gform_fields > .gfield > .ginput_container between the container and the
 * input, and each of those contributes a little leading even with margins
 * zeroed.
 *
 * Reducing the container margin is the right lever: it is the value that
 * was tuned for different markup, and it leaves the column's own top
 * alignment with ABOUT US and Links untouched.
 */
#ContactForm5 {
  margin-top: 14px;
}

#ContactForm5 .gform_wrapper .gform_body,
#ContactForm5 .gform_wrapper .gform_fields {
  padding-block: 0;
  padding-top: 0;
}

/*
 * (b) THE COPYRIGHT BAND HEIGHT — the piece 10b missed
 *
 * 10b overrode .column_189 { min-height: 100px }. There is a SECOND minimum
 * on the element inside it, and that is the one still holding the band open:
 *
 *     .column_191 { min-height: 100px; padding: 20px 15px; }   (footer.css)
 *
 * footer.css declares .column_191 three times; the last two both set
 * min-height:100px, so that is what applies. The copyright is a single line
 * of text about 20px tall, so roughly 80px of the band is empty space that
 * no amount of adjusting .column_189 could remove.
 */
.column_191 {
  min-height: 0;
  padding-bottom: 14px;
  padding-top: 14px;
}

.column_189 {
  min-height: 0;
}

/*
 * (c) WHY THE COPYRIGHT SITS ON WHITE INSTEAD OF THE DARK FOOTER
 *
 * ROOT CAUSE. The dark colour is not on the footer wrapper. footer.css puts
 * it on .row_165:
 *
 *     .row_165 { background-color: #2c2d30; padding-top: 50px; }
 *
 * Looking at footer.php, .row_165 contains ONLY the three columns — ABOUT
 * US, Links and the form. The copyright block (.column_189) is its SIBLING,
 * not its child:
 *
 *     <div class="full_row_6 row_170">      <- no background
 *       <div class="row_165">               <- #2c2d30 lives here
 *         ... ABOUT US / Links / form ...
 *       </div>
 *       <div class="column_189">            <- copyright, OUTSIDE the dark
 *         ... copyright ...
 *
 * So the copyright has always rendered on the page background. Moving the
 * colour up one level to the wrapper that actually contains both fixes it
 * structurally, rather than painting the copyright block separately.
 *
 * Scoped to the combined .full_row_6.row_170 selector so it cannot reach
 * the other footer variants (footer-inside-page.css reuses these names).
 */
.full_row_6.row_170 {
  background-color: #2c2d30;
}

/*
 * (d) CLOUDPRESS EDITOR CHROME LEAKING ONTO THE FRONT END
 *
 * page.php and page-templates/inside-page.php both end with:
 *
 *     <div id="xeditor-placeholder" style="position:absolute;
 *          z-index:100000"> ... class="marker xeditor-drag-marker" ...
 *
 * That is the visual editor's drag indicator. It has no purpose for a
 * visitor and nothing in any stylesheet or script hides it.
 *
 * As written it computes to zero size, so it is probably NOT what is
 * blocking the home page submit button — this is cleanup, not a claimed
 * fix. It is included because a stray element at z-index 100000 on the
 * front end is worth removing regardless.
 */
#xeditor-placeholder {
  display: none !important;
}

/*
 * (e) SUBMIT BUTTON STACKING
 *
 * Defensive, not diagnostic. If a transparent element from the page above
 * overlaps the footer, the button becomes unclickable while still looking
 * perfectly normal — which matches the report. Giving the footer row its
 * own stacking context above its siblings resolves the common version of
 * that, where the overlapping element has z-index auto.
 *
 * If the overlay has an explicit high z-index this will not be enough, and
 * the real element has to be identified. See the note in CHANGES.txt.
 */
#ContactForm5 .gform_wrapper .gform_footer {
  position: relative;
  z-index: 2;
}

#ContactForm5 .gform_wrapper .gform_button,
#ContactForm5 .gform_wrapper input[type="submit"] {
  position: relative;
  z-index: 2;
}

/* =========================================================================
 * 11. Home page submit button not clickable — ROOT CAUSE
 *
 * Inspecting the Submit button on the home page highlights:
 *
 *     <div style="transform: matrix3d(1,0,0,0, 0,1,0,0,
 *                                     0,0,1,0, 0,0,0,1);">
 *
 * That is Owl Carousel's inner wrapper, sitting on top of the footer.
 * matrix3d with the identity values is simply how a browser reports
 * translate3d(0px, 0px, 0px) — the carousel resting on its first slide.
 * owl.carousel.js line 805 sets exactly that, inline, on .owl-wrapper.
 *
 * WHY IT REACHES THE FOOTER — a version mismatch in the bundled library.
 *
 * mu-plugins/owl-carousel/ ships Owl Carousel 1.x JAVASCRIPT with
 * Owl Carousel 2.x CSS. The two releases renamed the scrolling element:
 *
 *     Owl 1.x  ->  .owl-wrapper-outer  >  .owl-wrapper
 *     Owl 2.x  ->  .owl-stage-outer    >  .owl-stage
 *
 * The JS creates the 1.x names (owl.carousel.js: owl-wrapper x5,
 * owl-wrapper-outer x2 — it never emits owl-stage at all).
 *
 * The clipping rule in owl.carousel.css is written for the 2.x name:
 *
 *     .owl-carousel .owl-stage-outer {        <- never matches anything
 *         position: relative;
 *         overflow: hidden;
 *     }
 *
 * while the element that actually exists gets only:
 *
 *     .owl-wrapper-outer { width: 100%; height: 100%; }   <- no overflow
 *
 * So nothing clips the wrapper. Owl sets .owl-wrapper's width to the
 * combined width of every slide, and that oversized, transformed box
 * extends past its container and across whatever is below it.
 *
 * It stays invisible because the slides themselves are positioned off to
 * the side — but the WRAPPER still covers the area, and a transformed
 * element creates a stacking context that paints above later content
 * which has no z-index of its own. The footer is later content. The
 * button therefore looks completely normal and cannot be clicked, which
 * is exactly the reported symptom.
 *
 * This also explains why only the home page is affected: it is the page
 * running the testimonial slider.
 *
 * THE FIX — restore the clipping the 2.x rule was meant to provide, on
 * the class name this build actually produces. One declaration, applied
 * from this file rather than by editing the bundled library.
 * ===================================================================== */

.owl-wrapper-outer {
  overflow: hidden;
  position: relative;
}

/*
 * Belt and braces. simpleslider.php line 136 runs
 *
 *     sliderContentWrapper.removeClass("owl-theme owl-carousel");
 *
 * BEFORE calling .owlCarousel(). Any rule scoped as
 * ".owl-carousel .owl-wrapper-outer" is therefore dead on those sliders,
 * which is why the rule above is deliberately left unscoped.
 *
 * The footer is also given its own stacking context so it sits above any
 * transformed element earlier in the document, whatever its origin.
 */
.full_row_6.row_170 {
  position: relative;
  z-index: 10;
}