/**
 * Angels Driving School — responsive repair layer.
 * Version 1.1 — corrected.
 *
 * 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.
 *
 * 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 deliberately absent — that work needs to be
 * done against rendered pages, not inferred from stylesheets.
 * ---------------------------------------------------------------------------
 */

/* =========================================================================
 * 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;
  }
}