/* ============================================================================
   Bright Wealth — touch target sizes
   ----------------------------------------------------------------------------
   WCAG 2.1 SC 2.5.5 Target Size (AAA) and WCAG 2.2 SC 2.5.8 Target Size
   (Minimum, AA) ask that a pointer target be at least 44x44 CSS px.

   An audit of all 27 pages at 375px, 390px and 414px — with the mobile menu
   both closed and open — found 15 distinct controls under that size. They are
   fixed below.

   METHOD: grow the TARGET, not the type. Every rule here sets a minimum box and
   centres the existing text inside it. No font-size, colour or weight changes,
   so the visual design is untouched; only the tappable area grows.

   SCOPE: `max-width: 900px` — the mobile breakpoint this site already uses.
   Desktop layout is deliberately left byte-identical. The two hero buttons are
   the one exception: they were 43px tall at every width, one pixel short, so
   they are corrected everywhere.

   NOT FIXED, and correctly so — SC 2.5.8 exempts these:
     - Links inside a sentence ("Inline" exception): the ombudsman link in the
       footer small print, the email address in the contact copy, the FCA
       register link. Enlarging these would break the line box of the paragraph
       they sit in, which the exception exists to prevent.
     - #consent on the contact form. The checkbox itself paints at 22x22, but it
       is wrapped in <label class="consent" for="consent"> spanning three lines,
       and the whole label activates it. The real target is already well over
       44px; the checkbox is enlarged to 24px below purely so it is easier to
       hit directly.
   ========================================================================== */

/* The two hero buttons measured 43px tall — one pixel under, at every width. */
.hero-action-primary,
.hero-action-secondary{ min-height: 44px; }

@media (max-width: 900px){

  /* ---- header ------------------------------------------------------------ */
  /* The bar is 52px tall, so a 44px target fits without changing its height.
     The logo image keeps its own 34px height — only the link box grows. */
  .site-header .wordmark,
  .wordmark{
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .nav-cta{ min-height: 44px; }

  /* ---- standalone call-to-action links ----------------------------------- */
  /* These are block-level CTAs sitting on their own line, not links inside a
     sentence, so the "Inline" exception does not apply to them. */
  .text-link,
  .text-link.light,
  .back-link,
  .calc-link,
  .section-action,
  .t-foot,
  .rn-title,
  .service-card > a,
  .home-faq .faq-intro > .text-link,
  .difference > .text-link{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    /* .calc-link and .section-action already set their own display; inline-flex
       preserves the centring they relied on. */
  }

  /* .back-link is a flex row with an arrow; keep its gap intact. */
  .back-link{ gap: 8px; }

  /* A standalone glow link used as a CTA rather than mid-sentence. */
  p > .u-glow-link{ min-height: 0; }          /* mid-sentence: leave alone */
  .u-glow-link:not(p > *){
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ---- form controls ----------------------------------------------------- */
  /* Range sliders painted a 16px box. The thumb is the thing you actually drag,
     and it was well under 44px of vertical grab room. The track stays visually
     centred inside the taller box. */
  input[type="range"]{
    min-height: 44px;
  }

  /* Easier to hit directly, though the wrapping label is the real target. */
  .consent input[type="checkbox"],
  input[type="checkbox"]{
    width: 24px;
    height: 24px;
  }

  /* Text inputs, selects and textareas on the contact form. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea,
  button{
    min-height: 44px;
  }

  /* ---- footer ------------------------------------------------------------ */
  /* Every page's footer. These are standalone navigation links stacked one per
     line, not links inside a sentence, so they get a full target. The small
     print (ombudsman URL) is a sentence link and is left alone. */
  .footer-links div > a,
  .footer-brand > a,
  .regulatory > div a,
  .foot .footer-links div > a,
  .foot .footer-brand > a{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* .footer-links a was display:block with a 12px gap; inline-flex keeps the
     stack but lets the box grow to the target height. fit-content stops each
     link spanning the whole column (which would make neighbouring targets
     ambiguous), and min-width holds short labels like "FAQs" at 44px. */
  .footer-links div > a{
    width: fit-content;
    min-width: 44px;
    justify-content: flex-start;
  }

  /* ---- standalone links elsewhere ---------------------------------------- */
  .d-item p > a[href^="tel:"],
  .d-item p > a[href^="mailto:"],
  p.spec-link > a,
  .legal-jump > a{
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------------
   Consent gate — added when the banner was redesigned into a full-screen card.
   Its secondary "Manage settings" button measured 293x40 on every page: under
   the 44px minimum, and it is one of only three controls available while the
   gate is blocking the rest of the site.
   Outside the mobile media query because the gate is the same size everywhere.
   ------------------------------------------------------------------------ */
/* cookies.css:137 is `.bw-cc .bw-cc-more button { min-height: 40px }` at
   specificity (0,2,1). Matching that weight is required, not optional. */
.bw-cc .bw-cc-card button,
.bw-cc .bw-cc-more button,
.bw-cc .bw-cc-actions button,
.bw-cc-modal .bw-cc-actions button{
  min-height: 44px;
}