/* Copthorne Transit Centre: UX batch 1 overrides
   File: wp-content/themes/copthorne/assets/css/ux-overrides.css
   Enqueue after ctc-app. Style only; no markup or logic changes. */

/* UX1-01 Home hero: remove the angled clip below 1024px so CTAs and trust row are not cut off */
@media (max-width: 1023px) {
  main > section.relative > div.relative.animate-in { clip-path: none !important; }
}

/* UX1-02 Show the existing header Get a Quote link on mobile (fixed header, always visible) */
@media (max-width: 767px) {
  header a[href$="/quote/"].hidden.md\:inline-flex {
    display: inline-flex;
    min-height: 44px;
    padding: 0 14px;
    font-size: 14px;
    gap: 0;
  }
  header a[href$="/quote/"].hidden.md\:inline-flex > i { display: none; }
  header a[href="https://copthornetransitcentre.co.uk/"] > img.h-10 { height: 32px; }
  header .js-mobile-toggle { width: 44px; height: 44px; }
  header .flex.items-center.justify-between.h-16 { gap: 8px; }
}

/* UX1-03 Footer and small link tap targets: at least 24px tall, 44px for key links */
footer li > a { display: inline-flex; align-items: center; min-height: 32px; }
footer a[href^="tel:"], footer a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
footer a[aria-label] { width: 44px; height: 44px; }
.js-mobile-menu a, .js-mobile-menu button { min-height: 44px; display: flex; align-items: center; }
a.mt-auto.pt-3.text-xs.font-semibold.text-accent-blue { min-height: 44px; font-size: 14px; }
footer p a { display: inline-flex; align-items: center; min-height: 24px; }
main li > a.inline-flex.items-start { padding-block: 11px; }
main li > a.flex.items-center.justify-between, main div.mt-8 > a.inline-flex.items-center { min-height: 44px; }
main a[href^="tel:"].text-sm { display: inline-flex; align-items: center; min-height: 44px; }
main div.max-w-container.mx-auto > a.hover\:text-accent-blue, main p.text-sm > a.text-accent-blue.font-semibold { display: inline-block; padding-block: 4px; }


/* UX1-04 Contrast fixes (WCAG AA 4.5:1 for small text) */
footer .text-white\/40 { color: rgba(255, 255, 255, .7); }
.text-warning-red { color: #c0392b; }
footer .text-warning-red, .bg-navy-900 .text-warning-red { color: #ff7a6b; }
section[style*="gradient-hero"] .text-accent-blue-light,
div[style*="gradient-hero"] .text-accent-blue-light,
.bg-navy-900 .text-accent-blue-light { color: #8fb8ff; }

/* UX1-05 Readable body copy on money pages: 16px minimum on mobile and desktop */
.page-template-template-seo main p.text-sm,
.page-template-template-seo main li.text-sm,
.home main section p.text-sm {
  font-size: 16px; line-height: 1.65;
}

/* UX1-06 One primary CTA colour: accent blue for all quote buttons */
a[href$="/quote/"].bg-navy-900, button[type="submit"].bg-navy-900 { background-color: rgb(19 87 215); }
a[href$="/quote/"].bg-navy-900:hover, button[type="submit"].bg-navy-900:hover { background-color: rgb(8 27 69); }

/* UX1-07 Logo: reserve space to avoid layout shift */
header img[src*="trans-logo"], footer img[src*="trans-logo"] { aspect-ratio: 1964 / 406; width: auto; }

/* UX1-08 In-content CTA matches the primary button */
a.ctc-cta-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
  padding: 12px 24px; border-radius: 12px; font-size: 16px; font-weight: 600;
  background-color: rgb(19 87 215); color: #fff; text-decoration: none;
}
a.ctc-cta-btn:hover { background-color: rgb(8 27 69); color: #fff; }

/* ---- p3 additions (not part of the UX batch 1 proposal) ---- */
/* p3 item 11: fit logo + Get a Quote + call icon + menu toggle in the mobile header (320-767px) */
@media (max-width: 767px) {
  header .flex.items-center.justify-between.h-16 { gap: 4px; }
  header a[href="https://copthornetransitcentre.co.uk/"] { flex: 0 1 auto; min-width: 0; margin-right: auto; }
  header a[href="https://copthornetransitcentre.co.uk/"] > img.h-10 { max-width: 100%; height: auto; max-height: 32px; }
  header .ctc-mobile-call, header .js-mobile-toggle { flex: 0 0 44px; width: 44px; height: 44px; }
}
@media (max-width: 359px) {
  header .ctc-mobile-call, header .js-mobile-toggle { flex-basis: 40px; width: 40px; }
  header a[href$="/quote/"].hidden.md\:inline-flex { padding: 0 10px; font-size: 13px; }
}
/* p3 item 6: hub links in the desktop nav only where they fit (1280px+); always in the mobile menu */
header nav .ctc-nav-hub { display: none; }
@media (min-width: 1280px) { header nav .ctc-nav-hub { display: block; } }
/* p5 (C1b): utilities used in the new page content that the compiled app.css does not include */
.overflow-x-auto { overflow-x: auto; }
.min-w-\[720px\] { min-width: 720px; }
.align-top { vertical-align: top; }
.max-w-4xl { max-width: 56rem; }
.hover\:underline:hover { text-decoration-line: underline; }
/* p6 (SEO Manager item 4): 4-cell trust bar shown 2x2 below 1024px (12 area pages + Connect) - no left divider on the first cell of each row, as p3 did on the timing chain bar */
@media (max-width: 1023px) {
  .grid.grid-cols-2.lg\:grid-cols-4.divide-x > :nth-child(odd) { border-left-width: 0; }
}


/* ---- UX batch 2: Tailwind v3 utilities used in the theme templates but missing from the compiled app.css ----
   Definitions match Tailwind v3.4 output for the theme palette. Append to the END of ux-overrides.css.
   Style only; no markup, form, booking or tracking changes. */

/* UX2-01 Footer link colour (all templates): text-white/55 is used on about 24 footer links per page.
   Without it the links inherit full white, so hover:text-white has no visible effect.
   rgba(255,255,255,.55) measures 4.8:1 at the lightest point of the footer gradient (rgb 6 50 111)
   and 6.1:1 at the darkest, so it still passes WCAG AA for the 12px links. */
.text-white\/55 { color: rgb(255 255 255 / 0.55); }

/* UX2-02 Warning icon tile in the dark "Oil light on, hard brake pedal or low oil pressure?" call out (service, vehicle, symptom, fault code, areas, area, vehicles hub) */
.place-items-center { place-items: center; }
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-warning-red\/30 { --tw-ring-color: rgb(226 74 59 / 0.3); }

/* UX2-03 Footer two column link lists (all templates, 640px and wider): restore the column gap */
.gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; }

/* UX2-04 Quote form: "(optional)" hint inside labels at normal weight */
.font-normal { font-weight: 400; }

/* UX2-05 Privacy policy body (page template): the theme uses .prose but the typography plugin is not compiled in.
   Subset of @tailwindcss/typography v0.5 spacing, scoped with :where() so it adds no specificity
   beyond .prose and does not touch the H1, which keeps its own utilities. */
.prose { line-height: 1.75; }
.prose :where(p):not(:where([class~="not-prose"] *)) { margin-top: 1.25em; margin-bottom: 1.25em; }
.prose :where(h2):not(:where([class]:not(.wp-block-heading), [class~="not-prose"] *)) {
  font-family: Manrope, sans-serif; font-weight: 700; font-size: 1.5em; line-height: 1.3333333;
  margin-top: 2em; margin-bottom: 1em; color: rgb(15 23 42);
}
.prose :where(h3):not(:where([class]:not(.wp-block-heading), [class~="not-prose"] *)) {
  font-family: Manrope, sans-serif; font-weight: 600; font-size: 1.25em; line-height: 1.6;
  margin-top: 1.6em; margin-bottom: 0.6em; color: rgb(15 23 42);
}
.prose :where(ul):not(:where([class~="not-prose"] *)) { list-style-type: disc; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; }
.prose :where(ol):not(:where([class~="not-prose"] *)) { list-style-type: decimal; margin-top: 1.25em; margin-bottom: 1.25em; padding-inline-start: 1.625em; }
.prose :where(li):not(:where([class~="not-prose"] *)) { margin-top: 0.5em; margin-bottom: 0.5em; }
.prose :where(a):not(:where([class], [class~="not-prose"] *)) { color: rgb(19 87 215); text-decoration: underline; font-weight: 500; }
.prose :where(strong):not(:where([class~="not-prose"] *)) { font-weight: 600; }

/* UX2-06 Tablet header (768px to 1023px). At 768px the header row needs 828px inside a 720px row, so "Get a Quote" is cut off at the right edge and the logo touches the nav. Smaller logo, tighter nav gap and no arrow icon on the header quote button bring it to 720px exactly, with 9px to 10px between logo, nav and button. Home link and all nav items stay. 1024px and up is untouched. */
@media (min-width: 768px) and (max-width: 1023px) {
  header a[href="https://copthornetransitcentre.co.uk/"] > img.h-10 { height: 36px; }
  header nav.md\:flex { gap: 14px; }
  header a[href$="/quote/"].hidden.md\:inline-flex > i { display: none; }
}

/* UX2-07 Long CTA buttons at 320px. "Spotted a Symptom? Get a Free Quote" is whitespace-nowrap and 331px wide, so the timing chain and Transit Connect service pages scroll sideways by 27px at 320px. Let these buttons wrap below 400px. */
@media (max-width: 399px) {
  main a.inline-flex.whitespace-nowrap.rounded-button.px-7 { white-space: normal; justify-content: center; text-align: center; max-width: 100%; }
}

/* UX2-08 Extend UX1-05 (16px body copy) to the custom service pages under /services/ that do not use the SEO page template, such as timing chain replacement (29 paragraphs and list items at 14px). Pages already on the SEO template are unchanged. */
.parent-pageid-9 main p.text-sm,
.parent-pageid-9 main li.text-sm { font-size: 16px; line-height: 1.65; }

/* UX2-09 Links inside body text are told apart by colour alone. Lighthouse flags the home page Connect link (link-in-text-block, 1.04:1 against the surrounding text), which takes home accessibility from 98 to 96. Underline in-text links only; buttons and CTA links are excluded. */
main p > a.text-accent-blue:not(.inline-flex):not(.ctc-cta-btn) { text-decoration-line: underline; text-underline-offset: 2px; }

/* p7 item 9: mobile call link 44x44 at 320 to 359px (the logo shrinks by 4px to make room) */
@media (max-width: 359px) {
  header .ctc-mobile-call { flex-basis: 44px; width: 44px; height: 44px; }
}

/* ==========================================================================
   UX batch 3. Append to assets/css/ux-overrides.css after the p7 hunk.
   Style only. No markup, form, booking, quote or tracking changes.
   ========================================================================== */

/* UX3-01 Privacy policy H1 (page template, /privacy-policy/).
   Since p6 the content prints a bare <h1> inside .prose and the template H1 with
   "font-heading font-bold text-3xl md:text-4xl text-text-dark mb-6" is gone, so the
   page title renders as 16px body text. This restores the batch 2 look using the
   same values from app.css. :where() keeps specificity at one class, in the same
   pattern as UX2-05, so a classed H1 is never touched. */
.prose :where(h1):not(:where([class]:not(.wp-block-heading), [class~="not-prose"] *)) {
  font-family: Manrope, sans-serif; font-weight: 700;
  font-size: 1.875rem; line-height: 2.25rem;
  color: rgb(15 23 42); margin-top: 0; margin-bottom: 24px;
}
@media (min-width: 768px) {
  .prose :where(h1):not(:where([class]:not(.wp-block-heading), [class~="not-prose"] *)) {
    font-size: 2.25rem; line-height: 2.5rem;
  }
}

/* UX3-02 Services hub intro (/services/, page ID 9).
   The p6 intro is four paragraphs of reading text at 14px on mobile
   (text-sm md:text-base). Match the 16px body size used on the SEO templates
   (UX1-05). Desktop is already 16px. Card descriptions are not affected. */
@media (max-width: 767px) {
  .page-id-9 main section > .max-w-3xl > p.font-body.text-sm.leading-relaxed {
    font-size: 1rem; line-height: 1.625;
  }
}

/* UX3-03 Web font swap layout shift.
   Lighthouse attributes the remaining CLS (0.113 services hub desktop, 0.115 post
   desktop, 0.094 area desktop) to the Inter (gf-6) and Manrope (gf-12) swap.
   These fallback faces are metric matched to Arial or Liberation Sans, computed from
   the live woff2 files, so text keeps its size and line boxes when the web font
   arrives. font-display: swap and the font files are unchanged. */
@font-face {
  font-family: "Inter Fallback"; font-weight: 100 500;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 107.1%; ascent-override: 90.5%; descent-override: 22.5%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback"; font-weight: 600;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold");
  size-adjust: 100.5%; ascent-override: 96.4%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback"; font-weight: 700 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold");
  size-adjust: 102.3%; ascent-override: 94.7%; descent-override: 23.6%; line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback"; font-weight: 200 500;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 102.2%; ascent-override: 104.3%; descent-override: 29.4%; line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback"; font-weight: 600 900;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold");
  size-adjust: 101.5%; ascent-override: 105%; descent-override: 29.5%; line-gap-override: 0%;
}
.font-body { font-family: Inter, "Inter Fallback", sans-serif; }
.font-heading { font-family: Manrope, "Manrope Fallback", sans-serif; }
.prose :where(h1, h2, h3):not(:where([class]:not(.wp-block-heading), [class~="not-prose"] *)) {
  font-family: Manrope, "Manrope Fallback", sans-serif;
}

/* UX5-01b Post hero layout shift (single posts only).
   Measured with web fonts delayed: the hero changes height by one line when
   a web font arrives, and the article body below it moves.
   1. H1 (Manrope 800): some titles wrap to a different number of lines in the
      fallback face than in Manrope (for example 3 lines then 2 lines at 412px).
      Below 768px reserve three lines and centre the title in that space.
      Titles of three or more lines are unchanged. Desktop titles are two lines
      in both faces, so no rule is needed there.
   2. Meta row icons (remixicon, not preloaded): each icon is 10.9px wide before
      the icon font loads and 14.6px after, which can push the row onto a second
      line. Give the icon box its loaded width from the start. */
@media (max-width: 767px) {
  body.single-post article > section:first-child h1.font-heading {
    min-height: calc(3 * 1.25em);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
body.single-post article > section:first-child h1 + div > span > i[class*="ri-"] {
  width: 1.0425em;
  flex-shrink: 0;
  text-align: center;
}

/* UX6-01 Post body layout shift on tablet and desktop (single posts).
   Cause: article.css sets .ctc-prose to "Inter, sans-serif" and its headings to
   "Manrope, sans-serif", so post body text skips the metric matched fallback
   faces from UX3-03. Until Inter arrives the body is set in plain Arial or
   Helvetica, which is about 6% narrower than Inter, so paragraphs and list
   items wrap to one line fewer and everything below moves when Inter loads.
   Fix: give the post body the same fallback stacks as the rest of the site.
   The UX3-03 and UX4-01 @font-face metrics are unchanged: a sweep of the
   Inter Fallback 400 size-adjust from 106.6% to 107.5% matched real Inter
   line breaks best at the current 107.1%. */
.ctc-prose { font-family: Inter, "Inter Fallback", sans-serif; }
.ctc-prose h2, .ctc-prose h3, .ctc-cta-box h3 { font-family: Manrope, "Manrope Fallback", sans-serif; }

/* UX7-01 and UX7-02 Post body layout shift on narrow phones (engine code and
   Transit Connect belt posts at 320px).
   Cause: article.css sets .ctc-prose strong to font-weight 700. In the first
   paragraph of both posts the line break right after a bold phrase is a near
   tie at the 288px measure, and the Inter Fallback 700 face (Arial Bold) does
   not land on the same side of it as Inter 700. On the engine code post the
   fallback line is 0.1px too wide and wraps early; on the connect belt post
   the Inter line is 0.5px too wide and wraps late. Either way the paragraph
   changes line count when Inter loads and the content below moves about 30px.
   No size-adjust value fixes both, as they need the bold fallback to move in
   opposite directions.
   Fix: at 330px and below only, set bold text in post bodies at 600, which
   clears both ties. The scope is deliberately narrow: at 340px, 375px and
   412px the same change creates new near ties on other posts (see the test
   notes in ux-batch-7.md).

   UX7-03 Post hero layout shift below 360px (oil pressure and service
   intervals posts, logged as UX6-02).
   Cause: the post title wraps to 3 lines in one face and 4 in the other, in
   opposite directions on the two posts, so the meta row and the section
   below move 30px when Manrope loads. UX5-01b reserves 3 lines, which is not
   enough at this width.
   Fix: reserve 4 lines below 360px. UX5-01b already centres the title in the
   reserved box. */
@media (max-width: 330px) {
  .ctc-prose strong, .ctc-prose b { font-weight: 600; }
}
@media (max-width: 359px) {
  body.single-post article > section:first-child h1.font-heading { min-height: calc(4 * 1.25em); }
}

/* UX batch 8. UX8-01 (raised by the SEO Manager as "UX7-03"; renumbered because batch 7 already uses UX7-03 for the H1 reserve).
   Home hero paragraph (p.max-w-md, 16px, line height 26.4px) sets one line more in Inter Fallback (107.1%) than in Inter at 412px:
   "repairs, low oil pressure faults, hard brake pedal" is 363.1px in Inter and 364.6px in the fallback, against a 364px box.
   The paragraph drops from 7 lines to 6 when Inter arrives, so the buttons, trust row and the next section rise 26px.
   Fix: a fallback face used only by this paragraph, at 106%. Its line count matches Inter at the box widths the site produces
   (272, 327, 364 and 448px, i.e. viewports 320, 375, 412, 768 and 1280). Near ties move from viewports 344 and 409 to 412
   (current 107.1%) to viewports 341 to 343 and 454 to 456. Nothing else on the site uses the new face. */
@font-face {
  font-family: "Inter Hero Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  font-weight: 100 900;
  font-display: swap;
  size-adjust: 106%;
  ascent-override: 91.4%;
  descent-override: 22.7%;
  line-gap-override: 0%;
}
body.home main > section:first-child p.max-w-md { font-family: Inter, "Inter Hero Fallback", sans-serif; }