/* ==========================================================================
   WEBTALES — fixes-r2.css

   Second UI/UX bug report (tested 21 September 2026). Loaded LAST: after
   main.css, after assets/css/fixes.css, and after the inline <style> blocks
   registered by inc/nav.php and inc/careers.php, so these rules win on
   source order at equal specificity. See inc/uiux-r2.php for how that
   ordering is guaranteed.

   READ THIS FIRST — THERE ARE TWO DIFFERENT BUG NUMBERINGS.
   assets/css/fixes.css and assets/js/fixes.js are tagged Bug_01..Bug_110.
   Those numbers belong to the FIRST report (2026-09-07). Every number in
   THIS file is written "R2 Bug_n" and belongs to the SECOND report
   (2026-09-21). The sequences are unrelated and must never be
   cross-referenced: R2 Bug_17 is horizontal overflow on mobile, whereas
   fixes.css's Bug_17 was making the footer logo a link.

   No rule here uses !important. Every one of them wins by source order at
   equal or lower specificity than the rule it overrides. If a future edit
   seems to need !important, the load order has broken and that is the thing
   to fix — not the specificity.

   THREE REPORTED ITEMS ARE DELIBERATELY ABSENT.
   R2 Bug_1  (empty space at the top of the home page, mobile)
   R2 Bug_4  (first banner image not full width at 1920px)
   R2 Bug_11 (empty blank space below the nav bar, every page, mobile)
   Nothing in this theme's CSS or markup produces those symptoms. Every
   module that could inject markup near the top of <main> was checked
   (inc/restructure.php, inc/content-patches.php, inc/faqs.php,
   inc/performance.php, inc/security.php, inc/chatbot.php; inc/careers.php's
   inline CSS is gated by webtales_careers_needs_assets()), and no rule caps
   the hero image's width at any viewport. Any rule written for these would
   be a guess at spacing nobody can currently verify, so they are left for
   someone with a browser. Do not "finish the set" by adding them blind.
   ========================================================================== */


/* R2 Bug_2 ================================================================
   Symptom: on /services/ — and in fact in the closing CTA of every page —
   the "Start a conversation" button has no visible background or border in
   its default state. It reads as plain text surrounded by empty space and
   only looks like a button on hover.

   Cause: main.css:416 paints .wt-cta with var(--wt-amber), and main.css:196
   paints .wt-btn--primary with that same var(--wt-amber) for BOTH its
   background and its border. Amber on amber is 1:1 contrast — the button is
   literally invisible. main.css:197 swaps hover to var(--wt-amber-lift)
   (#ffc255), which is why hover is the only state that reads. Nothing ever
   scoped the primary button for the amber band; fixes.css only re-scoped
   .wt-cta .wt-btn--ghost.

   Solid ink for the primary, outlined ink for the secondary (fixes.css
   already set the latter). This changes the look of the main CTA
   site-wide, which is accepted: an invisible button is worse.
   ========================================================================== */
.wt-cta .wt-btn--primary {
  background: var(--wt-ink);
  color: #fff;
  border-color: var(--wt-ink);
}
.wt-cta .wt-btn--primary:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}


/* R2 Bug_3 ================================================================
   Symptom: on /digital-marketing-agency/ the breadcrumb appears
   disconnected, sitting in a separate box below the hero.

   Cause: two things at once. templates/template-service.php and single.php
   call webtales_breadcrumbs() AFTER the dark hero, while archive.php,
   page.php and templates/template-services.php call it BEFORE the banner —
   the placement is inconsistent across templates. And fixes.css (its
   Bug_21/57/73 block) gave .wt-crumbs `background: var(--wt-tint)` plus
   `border-bottom: 1px solid var(--wt-rule)`. Under a dark hero that is a
   grey slab with its own bottom rule, followed by the template's own
   `margin-top: var(--wt-s6)` — three separate bands stacked up.

   Making the trail belong to the hero is the smaller change. Moving the PHP
   call to match the other templates is arguably cleaner but would shift the
   trail above the <h1> on two templates, which is a separate decision for
   whoever owns the page structure.
   ========================================================================== */
.wt-svc-hero + .wt-crumbs,
.wt-post-hero + .wt-crumbs,
.wt-about-hero + .wt-crumbs {
  background: var(--wt-ink);
  border-bottom: 0;
  padding-block: var(--wt-s2);
  color: #b9b9b7;
}
.wt-svc-hero + .wt-crumbs a,
.wt-post-hero + .wt-crumbs a,
.wt-about-hero + .wt-crumbs a { color: #dedede; }
/* fixes.css sets `.wt-crumbs a:hover { color: var(--wt-ink) }`, which would
   be ink on ink here. Specificity 0,3,0 beats its 0,2,0. */
.wt-svc-hero + .wt-crumbs a:hover,
.wt-post-hero + .wt-crumbs a:hover,
.wt-about-hero + .wt-crumbs a:hover { color: #fff; }
.wt-svc-hero + .wt-crumbs [aria-current="page"],
.wt-post-hero + .wt-crumbs [aria-current="page"],
.wt-about-hero + .wt-crumbs [aria-current="page"] { color: #fff; }
.wt-svc-hero + .wt-crumbs li:not(:last-child)::after,
.wt-post-hero + .wt-crumbs li:not(:last-child)::after,
.wt-about-hero + .wt-crumbs li:not(:last-child)::after { color: #6a6a68; }


/* R2 Bug_5 ================================================================
   Symptom: on the home page there is not enough vertical space between the
   "Fields marked * are required." note and the first row of form fields.

   Cause: that note is injected by assets/js/fixes.js (decorateForm) with
   class "wt-field__hint wt-req-note" and inserted before the first
   .wt-field / .wt-field-row. Its only spacing is main.css:407,
   `.wt-field__hint { margin-top: var(--wt-s2) }` — margin-TOP only.
   main.css:68 `* { margin: 0 }` has already removed the UA paragraph
   margin, .wt-field-row carries no margin-top, and .wt-field spaces itself
   with margin-bottom. So the note butts straight onto the inputs.
   ========================================================================== */
.wt-req-note {
  margin-top: 0;
  margin-bottom: var(--wt-s4);
}


/* R2 Bug_6 ================================================================
   Symptom: on /blog/ the pagination controls ("1", "2", "Next") render
   oversized.

   Cause: main.css:377 gives .wt-pagination .page-numbers min-width:46px,
   height:46px and no font-size at all, so it inherits --wt-fs-base (17px)
   at font-weight:700 — much heavier than the 12-13px card meta beside it —
   with a 4rem top margin above. fixes.css (its Bug_109) already shrinks
   this to 36px at max-width:700px, so what the report saw must have been
   701px and up.

   DECISION, RECORDED DELIBERATELY RATHER THAN SILENTLY: 46px -> 40px drops
   below the 44x44 CSS px target of WCAG 2.5.5 Target Size (Enhanced, AAA).
   It stays comfortably above the 24x24 minimum of WCAG 2.5.8 (AA) and above
   Lighthouse's tap-target audit threshold. If AAA is a requirement for this
   site, revert to 46px and reduce only the font-size.

   The phone size is re-asserted below. Without that, the unscoped rule
   above would raise phones from fixes.css's 36px back to 40px purely by
   source order, quietly undoing part of the earlier fix.
   ========================================================================== */
.wt-pagination { margin-top: var(--wt-s7); }
.wt-pagination .page-numbers {
  min-width: 40px;
  height: 40px;
  font-size: var(--wt-fs-sm);
}
@media (max-width: 700px) {
  .wt-pagination .page-numbers { min-width: 36px; height: 36px; }
}


/* R2 Bug_7 ================================================================
   Symptom: on blog article pages, and on any page with an FAQ section,
   there is a large empty gap between the Previous/Next navigation cards and
   the "Frequently asked questions" heading.

   Cause: doubled section padding. single.php wraps the article in
   <div class="wt-section" style="padding-top:var(--wt-s6)"> — the inline
   style overrides padding-TOP only, so main.css:110
   `.wt-section { padding-block: var(--wt-section-y) }` still supplies the
   BOTTOM padding. webtales_faqs() then opens
   <section class="wt-section wt-section--tint" id="faqs"> with the same
   token on top. --wt-section-y is clamp(3.5rem, 6.5vw, 6rem), so at desktop
   widths that is 6rem + 6rem = 192px of nothing. The same arithmetic
   applies on page.php (<article class="wt-section"> -> #faqs) and on
   service pages (last .wt-svc-section -> #faqs), which is exactly why the
   report says "and any page with an FAQ section".

   It reads as a desktop symptom on articles because main.css:359 collapses
   .wt-article-layout to one column at <=1000px, which stacks the sticky
   rail between the Prev/Next cards and the FAQ on mobile.

   On service pages the element immediately before #faqs is
   <div class="wt-sticky-cta"> (printed by template-service.php just before
   webtales_faqs()). It occupies no space — display:none above 700px,
   position:fixed below — but it does break the `+` adjacency, hence the
   second selector in each pair.

   :has() keeps the reduction to where the adjacency actually exists;
   browsers without it simply keep today's spacing. Note that on the home
   page #faqs follows another tinted section, so the two tints now sit
   closer together.
   ========================================================================== */
#faqs { padding-top: var(--wt-s6); }
.wt-section:has(+ #faqs),
.wt-section:has(+ .wt-sticky-cta + #faqs),
.wt-svc-section:has(+ #faqs),
.wt-svc-section:has(+ .wt-sticky-cta + #faqs),
.wt-section:has(> .wt-container > .wt-article-layout) {
  padding-bottom: var(--wt-s6);
}


/* R2 Bug_8 ================================================================
   Symptom: the logo marquee under "We grow by continuous learning" has
   inconsistent spacing — after the Udemy logo scrolls out there is a
   noticeable empty gap before Google Ads re-enters.

   Cause: NOT the loop seam, which is already correct.
   parts/logo-marquee.php prints two identical .wt-logo-marquee__group
   blocks, main.css:744 animates the track by translateX(-50%) = exactly one
   group width, and fixes.css (its Bug_09) already set `gap` and
   `padding-right` to the same token, so the distance across the seam equals
   the rhythm inside a group.

   The gap is box versus ink. None of the seven filenames
   parts/logo-marquee.php asks for exists in assets/images/partners/ — that
   directory holds only Property-CRM-Logo.webp, astc_logo.png,
   hostinger-logo.png and watskart-logo.png — and the remote fallbacks were
   emptied, so webtales_legacy_asset() falls through to
   <span class="wt-partner-badge">ALT TEXT</span>. Those badges are wildly
   unequal in width ("Google Ads certified" is about three times "Udemy"),
   fixes.css's min-width:110px letterboxes anything narrower with
   object-fit:contain, and main.css:816 paints the badge #fff — a white pill
   on the section's #f6f6f4 tint, so the badge's own trailing whitespace
   reads as empty space rather than as a tile.

   THE REAL FIX IS THE SEVEN IMAGE FILES: google_ad.png, hubspot.png,
   linkedin.png, EdX_logo.png, harvard.jpg, amazon.png and udemy_logo.png,
   into assets/images/partners/ or into Media Library under the same names.
   The first four also repair the footer partner row — same filenames, one
   upload fixes both. Everything below is interim.

   WARNING: `gap` and `padding-right` on .wt-logo-marquee__group MUST stay
   equal to one another. The seam between the two groups IS the group's
   padding-right; the rhythm inside a group is the gap. Change one without
   the other and the loop visibly jumps once every animation cycle.
   ========================================================================== */
.wt-logo-marquee__group {
  gap: var(--wt-s6);
  padding-right: var(--wt-s6);
}
.wt-logo-marquee img,
.wt-logo-marquee .wt-partner-badge {
  width: 150px;
  min-width: 150px;
  height: 48px;
  justify-content: center;
  text-align: center;
}
.wt-logo-marquee .wt-partner-badge {
  background: #fff;
  border: 1px solid var(--wt-rule);
  padding: 0 10px;
  font-size: var(--wt-fs-xs);
  line-height: 1.2;
}


/* R2 Bug_9 ================================================================
   Symptom: on a laptop, /blog/ renders one blog card large/oversized (the
   featured card) and the rest are pushed down and look cropped.

   Cause: main.css:572-574 gives .wt-post--featured `grid-column: 1 / -1`
   so it spans the whole grid, a thumb with `aspect-ratio: auto;
   height: 100%`, and an h2-scale title — and archive.php feeds it a 45-word
   excerpt with no clamp. fixes.css already de-emphasised it at <=560px and
   at 561-900px (its Bug_74/82/103) but left 901px and up full-bleed.

   This is the design working as written rather than a broken rule, so the
   change is deliberately moderate and trivially reversible: the card stays
   featured, it stops dwarfing the grid. The "cropped" look of the remaining
   cards is main.css:348 `.wt-post__thumb { aspect-ratio:16/10;
   object-fit:cover }` doing intentional cropping, and is left alone.
   ========================================================================== */
@media (min-width: 901px) {
  .wt-post--featured { grid-template-columns: 1.1fr 1fr; }
  .wt-post--featured .wt-post__thumb { height: 100%; max-height: 380px; }
  .wt-post--featured h3 { font-size: var(--wt-fs-h3); }
  .wt-post--featured p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


/* R2 Bug_10 / R2 Bug_26 ===================================================
   Symptom (Bug_10): on /geo-and-aio-company-in-india/, mobile, the CTA
   inside the "Ready to see where your brand stands in AI search?" callout
   renders with excessive padding, disproportionately large.
   Symptom (Bug_26): in "Key Benefits of GEO & AIO Optimization" the
   "Expanded Search Presence" card is misaligned relative to the others.

   Cause: one and the same, and it is in PHP, not CSS.
   webtales_render_service_content() built each card from an <h3> plus every
   sibling node until the next <h3>, so the page's
   <div class="wt-takeaway"> callout — written after the last H3 of that
   section — was body content of "Expanded Search Presence" and was rendered
   INSIDE its .wt-feature card. That made the card several times taller than
   its siblings, and since five cards in a repeat(auto-fit, minmax(240px,
   1fr)) grid leave the fifth alone in the last row, it read as misaligned.
   It also nested main.css:467 `.wt-takeaway { padding: var(--wt-s6) }`
   inside `.wt-feature { padding: var(--wt-s5) }` (fixes.css Bug_68),
   leaving the button roughly 211px of column on a 360px phone — so
   "Request a free AI visibility audit" wrapped to two lines inside a button
   still carrying .7rem/1.15rem padding and the inherited line-height:1.65,
   about 76px tall and 183px wide.

   The real fix is in inc/template-tags.php, which now lifts a
   .wt-takeaway callout out of the card bodies and emits it after the grid.
   The first rule gives it the top margin it needs in that new position (as
   a direct child of .wt-container it has none of its own). The rest keep
   the button sane at any width and stay as a safety net for any callout
   that still ends up nested.
   ========================================================================== */
.wt-features + .wt-takeaway { margin-top: var(--wt-s6); }
.wt-takeaway .wt-btn { line-height: 1.25; }
.wt-feature > .wt-takeaway {
  margin-top: var(--wt-s4);
  padding: var(--wt-s4);
  border-left-width: 4px;
}
@media (max-width: 700px) {
  .wt-takeaway { padding: var(--wt-s5); }
  .wt-takeaway .wt-btn {
    width: 100%;
    padding: .65rem .8rem;
    font-size: var(--wt-fs-xs);
  }
}


/* R2 Bug_14 ===============================================================
   Symptom: on /about-us/, mobile, there is excessive spacing above and
   below every section title.

   Cause: it stacks up. main.css:101 gives every .wt-section-head h2 — and
   every .wt-fold-after — a 56x5 amber rule with `margin-top: var(--wt-s4)`,
   so 1rem plus 5px sits under the heading, and that is never tightened for
   mobile. main.css:98 then adds `margin-top: var(--wt-s4)` to the head's
   paragraph (fixes.css reduces it to --wt-s3 at <=700px), and fixes.css
   sets the head's own `margin-bottom: var(--wt-s6)`. Under a centred title
   that is close to 4rem of rule and air before the content starts.

   SCOPE, DECIDED DELIBERATELY: only the section head is touched here. The
   other half of the original proposal was to redefine --wt-section-y at
   <=700px, which would compress every section on every page of the site.
   That is a design change nobody has been able to look at, so it is not
   taken. --wt-section-y IS the remaining lever if this still reads too
   loose — change it on its own, with eyes on the result.
   ========================================================================== */
@media (max-width: 700px) {
  .wt-section-head { margin-bottom: var(--wt-s5); }
  .wt-section-head h2::after,
  .wt-fold-after::after {
    margin-top: var(--wt-s3);
    width: 44px;
    height: 4px;
  }
  .wt-section-head p { margin-top: var(--wt-s2); }
}


/* R2 Bug_15 ===============================================================
   Symptom: on /blog/, mobile, the blog cards are two per row but each is
   far too tall — large image, excessive spacing between meta, title and
   description.

   Cause: the two-per-row grid is deliberate. fixes.css (its Bug_74/82/103)
   chose it over "one oversized card". What it did not do was clamp
   anything except the FEATURED card's excerpt, and
   webtales_post_card() emits a 22-word excerpt plus a meta line carrying
   both date and author. At a 360px viewport a column is about 153px wide
   (121px of text), so the meta wraps to two lines, the title runs five or
   six, and the excerpt runs about eight — roughly a 1:3 card.

   NOTE THE CONFLICT BETWEEN THE TWO REPORTS: this one asks for shorter
   cards, the previous one asked for two per row. Clamping satisfies both.
   The other way to resolve it is to go back to one card per row below about
   420px; that is a design call rather than a defect fix and is not taken
   here.

   CHANGED FROM THE DIAGNOSIS, ON PURPOSE: the original proposal also hid
   the author <span> at this width. The clamps do essentially all of the
   height saving (about 150px against the meta's 15px), so the author stays
   visible and only the meta gap is tightened. Removing information from the
   card is a bigger call than tightening it and was not worth making blind.

   Clamping .wt-post h3 turns it into a -webkit-box, which blockifies the
   <a> inside it. That is safe: main.css:353 `.wt-post h3 a::after
   { position:absolute; inset:0 }` resolves against .wt-post
   (position:relative, main.css:346), so the whole-card click target
   survives. Do not add position:relative to .wt-post h3 or
   .wt-post__body — see R2 Bug_22 below.
   ========================================================================== */
@media (max-width: 560px) {
  .wt-post__thumb { aspect-ratio: 16 / 9; }
  .wt-post__body { padding: var(--wt-s3); }
  .wt-post h3,
  .wt-post p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .wt-post h3 { -webkit-line-clamp: 3; }
  .wt-post p { -webkit-line-clamp: 3; }
  .wt-post__meta { gap: var(--wt-s1) var(--wt-s2); }
  .wt-post__more { padding-top: var(--wt-s2); }
}


/* R2 Bug_16 ===============================================================
   Symptom: on the home page, mobile, the three footer legal links (Privacy
   policy, Terms of use, Cookie policy) sit in a cramped row with uneven
   gaps, not aligned with the copyright text above.

   Cause: main.css:440 makes .wt-footer__bar a wrapping flex row with
   `justify-content: space-between`, and its two children are the copyright
   <p> and the legal <ul>. They never move onto separate flex lines, because
   their min-content widths (longest word about 55px, longest link about
   70px) sum far below the 323px container — so flex SHRINKS them and keeps
   them side by side instead. At the .75rem fixes.css sets for this bar the
   <p>'s max-content is about 360px and the <ul>'s about 230px; weighted
   shrink leaves the <ul> roughly 120px wide, so its three links wrap onto
   three lines with 1rem gaps, beside a four-line paragraph.
   ========================================================================== */
@media (max-width: 700px) {
  .wt-footer__bar {
    flex-direction: column;
    align-items: flex-start;
    row-gap: var(--wt-s3);
  }
  .wt-footer__bar ul { gap: var(--wt-s2) var(--wt-s4); }
}


/* R2 Bug_17 / R2 Bug_20 — THE FIX ========================================
   Symptom (Bug_17): on mobile the page is not fixed to screen width. It can
   be dragged horizontally, exposing a blank white strip on the right, and
   the header moves with the page instead of staying put.
   Symptom (Bug_20): on every page, mobile, in the "Let's get started" CTA
   above the footer, the phone-number box next to "Start a conversation"
   sits too close to the right edge and is not aligned with the button or
   with the container padding.

   Cause: one box, present on every page. fixes.css (its
   Bug_62/35/50/101 block) sets `.wt-cta__inner .wt-btn-row
   { flex-wrap: nowrap }` and `white-space: nowrap` on both of its buttons.
   That makes the row's automatic minimum size the SUM of the two buttons,
   so it cannot shrink at all:

     "Start a conversation"  ~156px text + 28.8 padding + 4 border ~ 189px
     "+91-98270-08798"       ~135px text + 28.8 padding + 4 border ~ 167px
     gap var(--wt-s3)                                                 12px
                                                         ~ 368px min-content

   .wt-cta__inner is also .wt-container, whose content box at a 360px
   viewport is 360 - 2 x 1.15rem = 323px (fixes.css Bug_102). The row wraps
   onto its own flex line, and with one item on a line
   `justify-content: space-between` places it at flex-start — so it begins
   at the left content edge and ends roughly 26px past the right edge of the
   viewport at 360px, roughly 66px at 320px. Every other section stays
   360px wide, so that extra strip shows the white body background: the
   reported white strip. The same overflow is why the phone button sits past
   the container padding rather than aligned with it.

   flex-wrap:wrap breaks the line only when the buttons genuinely do not
   fit, so the side-by-side arrangement the earlier fix wanted survives
   wherever there is room. .wt-svc-cta-inline is left alone on purpose: its
   row holds a single button and does not overflow.
   ========================================================================== */
@media (max-width: 700px) {
  .wt-cta__inner .wt-btn-row { flex-wrap: wrap; row-gap: var(--wt-s3); }
  .wt-cta__inner .wt-btn-row .wt-btn { flex: 1 1 auto; max-width: 100%; }
}


/* R2 Bug_17 — THE GUARD, WHICH IS NOT THE FIX =============================
   `body { overflow-x: hidden }` ALREADY EXISTS, twice: main.css:70 and the
   block inlined by inc/critical-css.php. <html> has no overflow anywhere in
   this theme, so per CSS Overflow 3 section 3.3 the body value propagates
   to the viewport and the page should never have been draggable. That the
   tester could drag it means one of three things, and it is worth finding
   out which before trusting this guard:
     1. Something outside the theme sets overflow on <html>. That cancels
        the propagation, turns <body> itself into a scroll container, and
        would ALSO explain "the header shifts with the page", because
        .wt-header's position:sticky would then resolve against the body's
        scrollport instead of the viewport.
     2. iOS Safari's long-standing failure to honour a body-only
        overflow-x:hidden.
     3. A cached or stale page.
   Check the computed `overflow` on <html> in DevTools.

   WHY `clip` AND NOT `hidden`: overflow:clip does not create a scroll
   container, so it cannot break position:sticky on .wt-header the way an
   ancestor's overflow:hidden would.

   WHY `body { overflow-x: visible }` IS MANDATORY HERE, NOT OPTIONAL: once
   <html> is no longer `visible`, the body's overflow stops propagating to
   the viewport and is used on the body box instead. `overflow-x: hidden`
   with `overflow-y: visible` computes to `overflow-y: auto`, which makes
   <body> a scroll container — and .wt-header's sticky positioning would
   then resolve against a scrollport that never scrolls, so the header would
   never stick. Resetting the body to visible hands all clipping to the
   root, which is where we want it.

   WHY @supports WRAPS BOTH: they only work as a pair. In an engine that
   does not understand `clip`, the html rule is discarded as invalid; if the
   body reset applied on its own, nothing would clip at all and the page
   would become draggable. @supports makes it all-or-nothing, so such an
   engine keeps today's behaviour exactly.

   WHAT THIS WILL SILENTLY HIDE LATER, and it will do so with no scrollbar
   and no error: any future element that intentionally extends past the
   right edge of the viewport. A full-bleed marquee wider than the page, a
   decorative shape hanging off the edge, a horizontally scrolling gallery
   that relies on document scroll rather than its own overflow. If something
   like that ever "just disappears at the edge", this is why.

   This is a backstop against the NEXT overflow. The rule above is the fix
   for this one.
   ========================================================================== */
@supports (overflow-x: clip) {
  html { overflow-x: clip; }
  body { overflow-x: visible; }
}


/* R2 Bug_18 ===============================================================
   Symptom: on a service page, mobile, the sticky bottom card ("Free audit,
   honest scoping." + "Get a proposal" + close icon) is too large, its
   button text wraps to two lines, and it appears not to be fixed.

   WRONG URL IN THE REPORT: the bar exists only in
   templates/template-service.php, i.e. individual service pages such as
   /digital-marketing-agency/. /services/ renders
   templates/template-services.php, which has no .wt-sticky-cta at all. The
   close button is injected by assets/js/fixes.js (initStickyCta).

   Cause of the size and the wrapping: main.css:733 makes the bar a flex row
   with `justify-content: space-between`, and fixes.css (its Bug_44)
   tightens it to gap .5rem / padding .6rem .75rem and adds a 32px close
   button. Nothing gives the button `flex-shrink: 0` or
   `white-space: nowrap`, and the <span> has no `min-width: 0`. At a 360px
   viewport that is about 336px of content for a ~190px span, a ~110px
   button, a 32px close and two 8px gaps — about 348px. So the BUTTON is
   what shrinks, and "Get a proposal" breaks over two lines, which is also
   what makes the bar tall.

   Cause of "not fixed": unresolved, and it contradicts the code. A
   position:fixed box does not scroll with the document on either axis. Most
   likely the page's horizontal overflow (R2 Bug_17) is sliding the CONTENT
   under a stationary bar. The other possibility is that something has given
   an ancestor of <main> a transform, filter, perspective, will-change or
   contain, which would make that ancestor the containing block for fixed
   descendants — this theme does not do that (content-visibility, the one
   candidate, was neutralised by fixes.css's R1 block), so check the
   computed styles of <body> and <main>.

   body.has-sticky-cta is retuned in step with the new bar height so no gap
   opens above the footer. New height: .5rem x 2 padding + a button of
   .55rem x 2 padding + 13px at line-height 1.2 + 4px border, so about 53px;
   56px leaves a little clearance.
   ========================================================================== */
@media (max-width: 700px) {
  .wt-sticky-cta { padding: .5rem .75rem; gap: .5rem; }
  .wt-sticky-cta > span {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--wt-fs-xs);
    line-height: 1.3;
  }
  .wt-sticky-cta .wt-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    line-height: 1.2;
  }
  .wt-sticky-cta__close { width: 28px; height: 28px; }
  body.has-sticky-cta { padding-bottom: 56px; }
}


/* R2 Bug_19 ===============================================================
   Symptom: on the home page, mobile, after the contact form is submitted
   the thank-you message is light, small and low-contrast. Users may not
   notice it.

   Cause: front-page.php emits
   <p data-wt-form-status class="wt-field__hint" role="status" …></p>, and
   on success assets/js/main.js (initForms) sets
   `status.className = 'wt-field__hint'` and then the text. So the
   confirmation renders with main.css:407 — --wt-fs-xs (13px) in
   --wt-ink-3 (#7a7a7a), about 4.0:1 on white, under the 4.5:1 AA threshold
   for body text.

   fixes.css already ships the style this needs,
   `[data-wt-form-status].wt-field__ok { color:#1b5e20; font-weight:600 }`,
   but main.js never applies the wt-field__ok class — that selector is dead
   code. Styling the class main.js DOES apply fixes it without touching JS.

   The failure path is unaffected: .catch() replaces the class with
   wt-field__error, which fixes.css already styles, and this selector does
   not match it. :not(:empty) matters because the same element carries
   .wt-field__hint before submission, when it is empty and hidden by
   fixes.css's `[data-wt-form-status]:empty { display: none }`.

   Contrast of #14521a on #e7f4e9 is about 8.1:1.

   The cleaner long-term fix is one line in main.js —
   `status.className = 'wt-field__hint wt-field__ok'` — which would light up
   the rule fixes.css already has. main.js is out of scope for this file.
   ========================================================================== */
[data-wt-form-status].wt-field__hint:not(:empty) {
  margin-top: var(--wt-s4);
  padding: var(--wt-s3) var(--wt-s4);
  font-size: var(--wt-fs-sm);
  font-weight: 700;
  color: #14521a;
  background: #e7f4e9;
  border-left: 4px solid #1b5e20;
  border-radius: var(--wt-radius);
}


/* R2 Bug_22 ===============================================================
   Symptom: on /blog/ in iPhone 15 Safari the first blog card's title text
   is drawn on top of the card image, so the heading appears twice and
   overlaps.

   Cause: main.css:573 sets `.wt-post--featured .wt-post__thumb
   { aspect-ratio: auto; height: 100% }`. fixes.css overrides only the
   aspect-ratio at <=560px (to 16/11) and never resets height:100%. That
   leaves a grid item carrying BOTH a percentage height against an
   indefinite auto row AND an aspect-ratio — the combination WebKit has
   historically mis-resolved, producing an image that overflows its row into
   the row below. main.css:346 `.wt-post { overflow: hidden }` clips that at
   the card edge but not at the row boundary, and .wt-post__body has no
   background of its own (only .wt-post does), so the overflowing image
   shows through behind the h3.

   height:auto removes the percentage/aspect-ratio conflict. The background
   means text can never paint over an image even if something else
   overflows later.

   DELIBERATELY NOT `position: relative` ON .wt-post__body: main.css:353
   turns the title link into a whole-card overlay with
   `.wt-post h3 a::after { position: absolute; inset: 0 }`, whose containing
   block is .wt-post (position:relative, main.css:346). Positioning
   .wt-post__body would capture that overlay and shrink the click target
   from the whole card down to the text block. Do not add it.

   If the tester also means the featured image ARTWORK carries the headline,
   that is a content matter and not CSS — those banners are pre-designed
   with the title baked in; see the Bug_95 note in single.php.
   ========================================================================== */
@media (max-width: 900px) {
  .wt-post--featured .wt-post__thumb { height: auto; }
}
.wt-post__body { background: var(--wt-paper); }


/* R2 Bug_24 ===============================================================
   Symptom: on a service page, mobile, there is excessive vertical space
   above and below the section numbering (e.g. "03"), with a large gap
   between the number, its divider line and the section heading.

   WRONG URL IN THE REPORT: /services/ has no section numbering at all. The
   numbers are emitted by webtales_render_service_content(), so this is an
   individual service page.

   Cause: main.css:781 makes .wt-svc-head a one-column grid with
   `gap: var(--wt-s4)`, so the number, the heading and the intro are
   separate grid rows 1rem apart — and fixes.css then adds
   `margin-bottom: var(--wt-s2)` to the number ON TOP of that gap. 1.5rem
   between a kicker and the heading it belongs to. (Note in passing that
   fixes.css's `.wt-svc-head__title h2 { margin-top: 0 }` never matches
   anything: the renderer emits no .wt-svc-head__title wrapper.)
   ========================================================================== */
.wt-svc-head { row-gap: var(--wt-s3); }
.wt-svc-head > .wt-svc-head__n {
  margin-bottom: 0;
  align-self: start;
}
@media (max-width: 700px) {
  .wt-svc-head { row-gap: var(--wt-s2); margin-bottom: var(--wt-s5); }
  .wt-svc-head--full { margin-bottom: var(--wt-s5); }
  .wt-svc-head__n { font-size: .75rem; letter-spacing: .1em; }
  .wt-svc-head__n::after { width: 28px; }
}