/**
 * Angels Driving School — responsive repair layer.
 *
 * Loaded last, by angels-fixes.php, over the existing CloudPress stylesheets.
 * Nothing in the theme is modified. Deleting this file reverts every change.
 *
 * ---------------------------------------------------------------------------
 * WHAT THIS FIXES, AND WHAT IT DELIBERATELY DOES NOT
 *
 * The site is already nominally responsive: CloudPress generated a three-tier
 * layout at 768px and 1024px. What it did not do is handle anything between
 * or outside those tiers, and it left a number of fixed pixel widths that
 * overflow a phone.
 *
 * So this file corrects overflow, cramping and touch-target problems. It does
 * NOT restyle, recolour, move or resize anything that currently works. Colours,
 * fonts, spacing and layout are untouched.
 *
 * ON !important
 *
 * Six rule blocks use it, thirteen declarations in total, all of them overflow
 * or inline-style overrides. Every other rule in this file wins on load order
 * alone. Each of the six is commented with what it overrides and why nothing
 * weaker would work.
 *
 * A repair layer sitting on top of machine-generated CSS that sets fixed pixel
 * widths and inline styles is one of the few places !important is the honest
 * tool rather than a shortcut. It is not used anywhere it could be avoided.
 * ---------------------------------------------------------------------------
 */

/* =========================================================================
 * 1. Horizontal overflow
 *
 * The single most visible failure on a phone today. Page content is full of
 * generated fixed widths — width:1232px appears 68 times — and images carry
 * hardcoded pixel dimensions from the visual editor.
 * ===================================================================== */

html,
body {
  overflow-x: hidden; /* last-resort guard; the rules below are the real fix */
}

/* Generated containers and columns: cap rather than fix. */
body [class*="column_"],
body [class*="row_"],
body .gridContainer,
body .content_column,
body [class*="full_row_"] {
  max-width: 100%;
}

@media (max-width: 1279px) {
  /* !important 1 of 6: overrides the generated `width:1232px` literal. */
  body [class*="column_"],
  body .gridContainer,
  body .content_column {
    width: auto !important;
    max-width: 100%;
  }
}

/* Images: fluid regardless of the width/height attributes in content. */
body img,
body .wp-caption {
  height: auto;
  max-width: 100%;
}

/* Long URLs and unbroken strings must not force a scrollbar. */
body p,
body li,
body td,
body h1, body h2, body h3, body h4, body h5, body h6 {
  overflow-wrap: break-word;
}

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

/* Embeds (maps, video) become fluid. */
body iframe,
body embed,
body object,
body video {
  max-width: 100%;
}

body iframe[src*="google.com/maps"],
body iframe[src*="youtube"],
body iframe[src*="vimeo"] {
  aspect-ratio: 16 / 9;
  height: auto;
  width: 100%;
}

/* =========================================================================
 * 2. Tablet and small-desktop gap
 *
 * Between 768px and 1023px everything renders at the tablet tier with no
 * adjustment, and the generated percentage padding (`padding: 2% 15%`,
 * `5% 15%`, `3% 5%`) leaves very little room for content at those widths.
 * ===================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  /* !important 2 of 6: overrides generated percentage padding literals. */
  body [class*="row_"],
  body [class*="column_"] {
    padding-left: 4% !important;
    padding-right: 4% !important;
  }
}

@media (max-width: 767px) {
  /* !important 3 of 6: same, at phone widths where 15% side padding leaves
     roughly half the screen usable. */
  body [class*="row_"],
  body [class*="column_"] {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

/* Between 1024px and 1279px the 80% container plus a 1232px cap can exceed the
 * viewport. Cap to the viewport with a gutter. */
@media (min-width: 1024px) and (max-width: 1279px) {
  body .gridContainer {
    max-width: calc(100vw - 4rem);
  }
}

/* =========================================================================
 * 3. Stacking below the tablet breakpoint
 *
 * CloudPress already stacks most columns on mobile — 79 of 103 are width:100%
 * at base. The remainder are the ones that squeeze. This catches them without
 * changing anything that already stacks.
 * ===================================================================== */

@media (max-width: 767px) {
  body [class*="column_"] {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* Generated min-heights exist to stop floats collapsing. Once floats are
     off they only create dead vertical space on a small screen. */
  body [class*="row_"],
  body [class*="column_"] {
    min-height: 0;
  }

  /* Absolutely positioned decorative elements are the other overflow source. */
  body [class*="column_"] [style*="position: absolute"],
  body [class*="column_"] [style*="position:absolute"] {
    max-width: 100%;
  }
}

/* =========================================================================
 * 4. Typography at small sizes
 *
 * Generated font sizes go up to 72px, set for a 1232px canvas. At 360px a 72px
 * heading is roughly five characters per line. These caps are proportional
 * reductions, not a new type scale — the desktop rendering is untouched.
 * ===================================================================== */

@media (max-width: 767px) {
  body [class*="heading"],
  body h1 { font-size: clamp(1.75rem, 7vw, 2.75rem); }
  body h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  body h3 { font-size: clamp(1.25rem, 5vw, 1.5rem); }

  /* Body copy never drops below 15px on a phone. */
  body [class*="paragraph"],
  body p {
    font-size: max(15px, 1em);
    line-height: 1.6;
  }
}

/* =========================================================================
 * 5. Touch targets
 *
 * WCAG 2.2 requires a 24x24 CSS pixel minimum. Menu items, buttons and links
 * in the generated markup are sized for a mouse.
 * ===================================================================== */

@media (pointer: coarse) {
  body .drop_down_menu_ul a,
  body [class*="menu"] a,
  body .button,
  body a[class*="button"],
  body input[type="submit"],
  body button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  body .site-footer a,
  body [class*="footer"] a {
    display: inline-block;
    min-height: 24px;
  }
}

/* =========================================================================
 * 6. Forms
 *
 * Applies to Gravity Forms on the twelve payment pages and to the footer
 * contact form. Field order, labels and grouping are untouched — this is
 * width and touch sizing only.
 * ===================================================================== */

@media (max-width: 767px) {
  /* !important 4 of 6: Gravity Forms sets inline widths on composite
     sub-fields (Name, Address, Credit Card) which otherwise squeeze into
     unusable halves on a phone. */
  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 !important;
    width: 100% !important;
  }
}

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

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

/* Radio and checkbox rows: the Gender radios and the student checkbox. */
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;
}

/* =========================================================================
 * 7. Navigation
 *
 * The CloudPress drop menu is configured for a mobile overlay below 768px and
 * a tablet treatment below 1024px, and it keeps working. These rules only stop
 * the overlay overflowing and make its items tappable.
 * ===================================================================== */

@media (max-width: 1023px) {
  body [class*="mobile-overlay"],
  body [class*="drop_mainmenu"] {
    max-width: 100vw;
    overflow-x: hidden;
  }

  body [class*="drop_mainmenu"] a {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}

/* =========================================================================
 * 8. Accessibility repairs that require no markup change
 * ===================================================================== */

/*
 * Visible focus. The theme defines none at all, so keyboard users currently
 * have no indication of where they are on any page of the site.
 */
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;
}

/*
 * The header is sticky, so a keyboard-focused element near the top of the
 * viewport can end up underneath it. WCAG 2.2 SC 2.4.11.
 */
body a,
body button,
body input,
body select,
body textarea {
  scroll-margin-top: 7rem;
}

/*
 * !important 6 of 6.
 *
 * Reveal effects start elements at opacity:0 and rely on JavaScript to fade
 * them in. If that script fails or is blocked, the content is present in the
 * DOM, visible to search engines, and invisible to the visitor. This makes the
 * failure mode "no animation" rather than "no content".
 */
@media (prefers-reduced-motion: reduce) {
  body [reveal-fx],
  body .cp-interaction {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

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

/* Parallax degrades to a static background. background-attachment:fixed is
 * ignored on iOS and janky elsewhere, which is why it was reimplemented in
 * JavaScript in the first place. */
@media (max-width: 1023px) {
  body [data-parallax-depth],
  body .parallax-mirror {
    background-attachment: scroll;
  }
}

/* =========================================================================
 * 9. Print
 *
 * Enrolment confirmations get printed. Currently they print the navigation,
 * the footer and every decorative band.
 * ===================================================================== */

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

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

  body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}