/* ============================================================
   YM · mobile readability pass                 2026-09-15
   Phones only (<= 767px). Desktop is deliberately untouched.

   MEASURED PROBLEM (390x844, before this file):
     - body <p> rendered at 20px with line-height:normal (~1.2),
       giving ~25-30 characters per line against a readable
       optimum of 45-75. One sentence took four lines.
     - h1/h2 rendered at 36.3px with line-height 33.8px - the
       leading was SMALLER than the type size, so headings
       wrapped to three cramped lines.
     - .content-container carried padding-left:48px, eating 12%
       of the screen width on every indented paragraph.
   Net effect: 44 words of copy filled four screens.
   ============================================================ */

@media (max-width: 767px) {

  /* ---------- body copy ---------- */
  .fusion-body #main p,
  .fusion-body #main li {
    font-size: 17px;
    line-height: 1.6;
  }

  /* ---------- headings ----------
     Avada sizes every heading from a per-element `--fontSize` (the desktop
     px value) through its own viewport interpolation. Setting flat sizes
     here does two bad things: it loses to Avada's calc, and where it wins it
     FLATTENS the hierarchy, so a section title and its sub-title end up the
     same size.

     Instead, scale from Avada's own variable. Relative sizes are preserved
     (--fontSize 64 stays visibly bigger than 54), everything comes down to
     mobile proportions, and max() guarantees no heading ever falls to or
     below the 17px body size.

     Multiplier raised 0.46 -> 0.52 on 2026-09-15: every bullet heading on the
     site declares --fontSize:54, which at 0.46 rendered 24.8px against 17px
     body - only a 1.46x ratio, so section headings did not read as headings.

        --fontSize 64 -> ~33px      --fontSize 36 -> 20px (floor)
        --fontSize 54 -> ~28px      body          -> 17px  (1.65x)
  */
  .fusion-body #main h1,
  .fusion-body #main h2,
  .fusion-body #main h3,
  .fusion-body #main h4,
  .fusion-body #main h5,
  .fusion-body #main h6,
  .fusion-body #main .fusion-title-heading,
  .fusion-body #main .content-box-heading {
    font-size: max(20px, calc(var(--fontSize, 26) * 0.52px)) !important;
  }

  /* the leading was below 1, which is what made these feel cramped */
  .fusion-body #main h1,
  .fusion-body #main h2,
  .fusion-body #main .fusion-title-heading,
  .fusion-body #main .content-box-heading {
    line-height: 1.22 !important;
  }
  .fusion-body #main h3,
  .fusion-body #main h4,
  .fusion-body #main h5,
  .fusion-body #main h6 {
    line-height: 1.3 !important;
  }

  /* ---------- reclaim the indent, but keep the two edges aligned ----------
     The bullet <h2> carries an INLINE padding-left:48px, while the paragraph
     below it is indented by --awb-content-padding-left. Changing only one of
     them knocks the heading and its text out of line. Both are set to the
     same value here, and !important is required to beat the inline style.
     36px clears the 28px bullet icon. */
  .fusion-body #main .content-box-heading {
    padding-left: 36px !important;
  }
  .fusion-body #main .content-container {
    padding-left: 36px;
  }

  /* ---------- headings must stay bigger than body copy ----------
     Avada nests <p> inside its title elements, so the generic
     "#main p { font-size: 17px }" above was flattening whole headings
     down to body size. Re-inherit inside anything that is a heading. */
  .fusion-body #main h1 p,
  .fusion-body #main h2 p,
  .fusion-body #main h3 p,
  .fusion-body #main h4 p,
  .fusion-body #main h5 p,
  .fusion-body #main h6 p,
  .fusion-body #main .fusion-title-heading p,
  .fusion-body #main .content-box-heading p,
  .fusion-body #main .title-heading-left p,
  .fusion-body #main .title-heading-center p {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
  }

  /* ---------- spacing ---------- */
  .fusion-body #main p {
    margin-bottom: 1em;
  }

  /* ---------- tap targets ---------- */
  /* audit found 13 sub-40px targets on Happy Clients, 4 on The Author */
  .fusion-body #main a.fusion-button,
  .fusion-body #main button,
  .fusion-body #main input[type="submit"] {
    min-height: 44px;
  }


  /* ---------- brochure form labels ----------
     These four forms render placeholder-only on desktop, but Avada shows the
     <label> on mobile, where it duplicates the placeholder ("Email address" vs
     "Enter your email address") AND sits on a section whose background differs
     per placement - so no single label colour is readable everywhere. White was
     invisible on the white section; the theme default was near-invisible on the
     grey one.

     The label is therefore visually hidden and kept for assistive tech, which
     also matches the desktop design and tightens the block. Scoped to the four
     brochure forms so the Contact form is untouched. */
  .fusion-body #main .fusion-form-13594 .fusion-form-label,
  .fusion-body #main .fusion-form-13595 .fusion-form-label,
  .fusion-body #main .fusion-form-13596 .fusion-form-label,
  .fusion-body #main .fusion-form-13597 .fusion-form-label,
  .fusion-body #main .fusion-form-13594 .fusion-form-field > label,
  .fusion-body #main .fusion-form-13595 .fusion-form-field > label,
  .fusion-body #main .fusion-form-13596 .fusion-form-field > label,
  .fusion-body #main .fusion-form-13597 .fusion-form-field > label {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* tighten the form block now the label no longer occupies a row */
  .fusion-body #main .fusion-form .fusion-form-field {
    margin-bottom: 14px;
  }

  /* ============================================================
     Hand-built blocks set their own scale with clamp(); the
     generic rules above would otherwise flatten them. Re-assert
     after, so each keeps its intended size.
     ============================================================ */
  /* quote text is body copy - keep it at the sitewide 17px, not a
     block-specific size, or Happy Clients reads smaller than every
     other page. */
  .fusion-body #main .ym-testi .ymt-body,
  .fusion-body #main .ym-testi .ymt-body p {
    font-size: 17px;
    line-height: 1.6;
  }
  .fusion-body #main .ym-testi .ymt-name { font-size: 16.5px; }
  .fusion-body #main .ym-testi .ymt-role,
  .fusion-body #main .ym-testi .ymt-org  { font-size: 13.5px; }

  /* episode titles are <h3>: must read as headings, so above the 17px body */
  .fusion-body #main .ym-pods .ymp-title { font-size: 19.5px; line-height: 1.3; }
  .fusion-body #main .ym-pods .ymp-sub   { font-size: 15px; }

  .fusion-body #main .ym-abook .yma-title   { font-size: 21px; line-height: 1.22; }
  .fusion-body #main .ym-abook .yma-tagline { font-size: 17px; }
  /* a byline, not body copy - one clear step down, shared with captions */
  .fusion-body #main .ym-abook .yma-meta    { font-size: 15px; }

  .fusion-body #main .ym-video .ymv-name { font-size: 18px; }
  .fusion-body #main .ym-video .ymv-role,
  .fusion-body #main .ym-video .ymv-org  { font-size: 14px; }

  .fusion-body #main .ym-clients .ymc-name { font-size: 13px; line-height: 1.4; }

  .fusion-body #main .ym-dlwrap .ymd-lead { font-size: 18px; }
  .fusion-body #main .ym-dlwrap .ymd-sub  { font-size: 17px; }
}

/* ============================================================
   "Read more" collapsing (paired with ym-mobile-readmore.js).
   The clamp is max-height, not display:none - the full text
   stays in the DOM and remains indexable.
   ============================================================ */
@media (max-width: 767px) {
  .fusion-body #main .ym-rm {
    overflow: hidden;
    position: relative;
    /* No height animation. Avada sizes these sections' backgrounds with
       `cover`, so animating the height made the background rescale over
       ~0.3s - read as the background sliding/zooming. Expanding instantly
       makes it a single repaint instead of a visible slide. */
  }
  /* No fade. The collapse height is snapped to a whole element in
     ym-mobile-readmore.js, so nothing is ever cut mid-line and there is
     no partial text to mask. The previous gradient was hardcoded to a
     light colour and painted a white haze over dark/grey sections. */
  .fusion-body #main .ym-rm-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    margin: 12px 0 4px;
    padding: 11px 22px;
    min-height: 44px;
    border: 0;
    border-radius: 999px;
    background: #e8402a;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
  }
  .fusion-body #main .ym-rm-btn:focus-visible {
    outline: 3px solid #23262b;
    outline-offset: 3px;
  }

  /* Background overrides for .ym-rm-bg were REMOVED 2026-09-15.

     Three attempts all made things worse, because Avada's `cover` is what
     keeps adjacent sections looking identical: it zooms into a small, uniform
     patch of the texture, so every section shows the same flat grey.

       background-size: auto        -> tile ran out, hard band under the button
       background-size: 100% auto   -> each section showed the texture's FULL
                                       vertical gradient, so every section
                                       boundary became a visible step ("tiles")
       background-size: 100% 100%   -> same gradient problem, stretched

     Measured: the texture's own seam/step is only ~0.35/255 (invisible), but
     its top-to-bottom gradient spans ~12/255 - and that is what shows at a
     boundary once a section renders the whole image instead of a zoomed crop.

     Avada's own rendering is therefore left alone. The expand jump is handled
     by removing the height animation instead (see .ym-rm below). */

}

@media (prefers-reduced-motion: reduce) {
  .fusion-body #main .ym-rm { transition: none; }
}