/* ==========================================================================
   MOBILE & TABLET AUDIT FIXES — March 2026
   wemovetogether.co.uk — Comprehensive mobile/tablet remediation
   ========================================================================== */

/* ---- FIX 1: Homepage Comparison Table Overflow ---- */
/* The .comparison-wrapper had invalid CSS: margin: 0 -var() doesn't work.
   Table had min-width:550px forcing overflow on mobile.
   Fix: add horizontal scroll container, remove broken margin syntax. */
@media (max-width: 809px) {
  .comparison-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    /* Add scroll hint shadow */
    background: 
      linear-gradient(to right, white 30%, rgba(255,255,255,0)),
      linear-gradient(to left, white 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(0,0,0,.08), rgba(255,255,255,0)),
      linear-gradient(to left, rgba(0,0,0,.08), rgba(255,255,255,0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  .comparison-wrapper::-webkit-scrollbar {
    height: 4px;
  }
  .comparison-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
  }
  
  /* Reduce min-width so table fits better on smaller screens */
  .comparison-table {
    min-width: 480px;
  }
}

/* Even smaller screens — further table compression */
@media (max-width: 375px) {
  .comparison-table {
    min-width: 420px;
  }
  .comparison-table th,
  .comparison-table td {
    padding: 6px 4px;
    font-size: 12px;
  }
}


/* ---- FIX 2: Community Filter Tabs — Overflow & Touch Targets ---- */
/* Tabs were 1361px wide with no proper scroll containment.
   Buttons were 36px tall, below 44px touch target.
   Fix: proper horizontal scroll with touch targets. */
@media (max-width: 809px) {
  .filter-tabs-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .filter-tabs-wrap::-webkit-scrollbar {
    display: none;
  }

  .filter-tabs-community {
    flex-wrap: nowrap;
    overflow-x: visible; /* Let the parent handle scroll */
    gap: 6px;
    padding-bottom: 6px;
  }

  .filter-tab-community {
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 13px;
    padding: 8px 14px;
    min-height: 44px; /* Touch target compliance */
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  /* Sort buttons also need 44px min */
  .sort-btn {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 13px;
  }
}


/* ---- FIX 3: Nav CTA Button — Touch Target ---- */
/* "Start my free plan" was 40px tall across all pages.
   site-fixes-march.css sets min-height: 36px/auto !important.
   Fix: override with higher specificity + !important. */
.nav-cta,
a.nav-cta,
.btn.btn-primary.nav-cta,
.site-header .nav-cta,
.header-container .nav-cta {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
}

@media (max-width: 809px) {
  .nav-cta,
  a.nav-cta,
  .btn.btn-primary.nav-cta {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }
}

/* Very small screens — keep compact but 44px height */
@media (max-width: 389px) {
  .nav-cta,
  a.nav-cta,
  .btn.btn-primary.nav-cta {
    padding: 10px 12px !important;
    font-size: 12px !important;
    min-height: 44px !important;
  }
}

/* ---- FIX 3b: Desktop Nav Links — Touch Target at Tablet ---- */
/* At 768px–809px the desktop nav is visible on touch-capable tablets.
   .nav-link items were 40px tall (8px padding + 22.4px line-height).
   site-fixes-march.css has:
     .site-header .nav-link { min-height: 40px !important }
     .site-header a:not(.btn):not(.nav-cta):not(.logo) { min-height: auto !important }
   We need HIGHER specificity + !important to override both rules. */
.site-header a.nav-link:not(.btn):not(.nav-cta):not(.logo) {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center;
}


/* ---- FIX 4: Footer Links — Touch Target & Spacing ---- */
/* Footer links were 25px tall across all pages — needs 44px.
   Fix: increase vertical padding and line-height for tap area. */
.site-footer .footer-links a {
  display: inline-block;
  padding: 10px 0 !important;
  min-height: 44px !important;
  line-height: 24px;
}

.site-footer .footer-links li {
  margin-bottom: 0;
}

/* Resource links in footer too */
.site-footer .footer-resources a,
.site-footer a[href*="guide"],
.site-footer a[href*="calculator"],
.site-footer a[href*="process"],
.site-footer a[href*="checklist"] {
  display: inline-block;
  padding: 10px 0;
  min-height: 44px;
  line-height: 24px;
}


/* ---- FIX 5: Colour Contrast — Homepage CTA Links ---- */
/* axe-core: contrast ratio 3.41:1 for white text on #2D9B87 teal.
   Fix: darken teal for text-bearing elements to pass 4.5:1. */
.hero-cta .btn-primary,
a.btn-primary {
  background-color: #227A6A; /* Darker teal: passes WCAG AA at 5.17:1 with white */
}

.hero-cta .btn-primary:hover,
a.btn-primary:hover {
  background-color: #1B6E5D;
}

/* Fix the teal links that are used as standalone text (not on teal bg) */
a[style*="color: #2d9b87"],
.teal-link {
  color: #1E8A76 !important; /* Darker teal for AA compliance on white bg */
}


/* ---- FIX 6: Community Page — Colour Contrast on Tab Counts ---- */
/* Tab count badges had contrast 3.49:1 (white on light bg).
   Report buttons had 2.5:1 contrast. */
.filter-tab-community:not(.active) .tab-count {
  background: #5A6775; /* Darker grey bg for better contrast with white text */
  color: #FFFFFF;
}

.report-btn {
  color: #5A6775 !important; /* Darker than #9ca3af for AA compliance */
}

.report-btn:hover {
  color: #1A365D !important;
}


/* ---- FIX 7: Stamp Duty Breadcrumb Links — Contrast ---- */
/* Breadcrumb links had 1.22:1 contrast (nearly invisible).
   Fix: add underline and ensure sufficient colour contrast. */
.calc-breadcrumb a {
  color: #1E8A76 !important; /* Darker teal for text on white/beige */
  text-decoration: underline;
  text-underline-offset: 2px;
}

.calc-breadcrumb a:hover {
  color: #1A365D !important;
}


/* ---- FIX 8: Tiny Text — Below 12px Minimum ---- */
/* "HOW IT WORKS" label at 11px, pricing badges at 11.2px,
   tab counts at 11px — all need 12px minimum. */
.section-label,
.how-it-works .section-label,
[class*="label-"] {
  font-size: 12px !important;
  letter-spacing: 0.08em;
}

.pricing-badge--orange,
.pricing-badge--navy,
.pricing-badge--teal,
[class*="pricing-badge"] {
  font-size: 12px !important;
}

.tab-count {
  font-size: 12px !important;
}


/* ---- FIX 9: Login Page — Form Touch Targets ---- */
/* Password toggle (eye icon) was 33x32px.
   Remember me checkbox was 18x18px.
   "Forgot password?" and "Create one" links were tiny. */
.password-toggle,
.toggle-password,
button[aria-label*="password"] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.remember-me input[type="checkbox"],
.login-form input[type="checkbox"] {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
}

.forgot-password,
a[href*="forgot"],
.login-form a {
  display: inline-block;
  padding: 10px 0;
  min-height: 44px;
  line-height: 24px;
}


/* ---- FIX 10: Signup Page — Terms Links & Checkbox ---- */
/* "Terms of Service" link was 105x16px, checkbox was 36x28px */
.signup-form a,
.terms-link,
a[href*="terms"],
a[href*="privacy"] {
  display: inline;
  padding: 4px 2px;
  min-height: auto; /* Let inline links flow naturally */
}

/* Ensure the terms checkbox wrapper has good tap area */
.terms-checkbox,
.signup-form .checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}


/* ---- FIX 11: Hamburger Menu — Visible Dimensions ---- */
/* Hamburger was reporting 0x0px. Ensure it's tappable. */
@media (max-width: 809px) {
  .mobile-hamburger,
  .hamburger,
  .menu-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  }
  
  /* Ensure hamburger lines are visible */
  .hamburger span,
  .hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    transition: transform 0.3s ease;
  }
}


/* ---- FIX 12: Community "Guidelines" Link — Touch Target ---- */
a[href*="guidelines"],
.community-guidelines-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
}


/* ---- FIX 13: Scrollable Region Keyboard Accessibility ---- */
/* axe-core: .comparison-wrapper and cookie dialog need to be focusable */
.comparison-wrapper {
  position: relative;
}

.comparison-wrapper[tabindex] {
  outline: none;
}

.comparison-wrapper:focus-visible {
  outline: 2px solid #2D9B87;
  outline-offset: 2px;
  border-radius: 4px;
}


/* ---- FIX 14: Pricing Page — Feature Comparison Table at Tablet ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .pricing-comparison-table,
  .compare-features-table {
    font-size: 14px;
  }
  
  .pricing-comparison-table th,
  .pricing-comparison-table td,
  .compare-features-table th,
  .compare-features-table td {
    padding: 10px 8px;
  }
}


/* ---- FIX 15: Blog Listing — Newsletter "Privacy policy" Link ---- */
.newsletter-form a,
a[href*="privacy"] {
  display: inline-block;
  padding: 8px 0;
  min-height: 44px;
  line-height: 28px;
}


/* ---- FIX 16: Portal Settings — Consistent Mobile Layout ---- */
@media (max-width: 480px) {
  .portal-settings .settings-section,
  .settings-card {
    padding: 16px;
  }
  
  .settings-section h3 {
    font-size: 18px;
  }
}


/* ---- FIX 17: Prevent Third-Party Chat Widget Covering Content ---- */
/* Cookiebot chatbot (third-party) auto-opens and covers the page on mobile.
   Ensure the WMT chat widget doesn't block content either. */
@media (max-width: 480px) {
  #wmt-chat-widget .wmt-chat-window {
    max-height: 70vh;
    bottom: 64px;
  }
}


/* ---- FIX 18: Checkout Header — Logo Overlapping CTA on Mobile ---- */
/* Logo image at 56px height was 187px wide, overlapping the "Start my free plan"
   CTA button. Fix: constrain logo max-width on mobile so all 3 items
   (hamburger, logo, CTA) fit within the header without overlap. */
@media (max-width: 767px) {
  .header-container {
    flex-wrap: nowrap !important;
  }
  
  .logo {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  
  .logo img {
    height: 40px !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
}


/* ---- FIX 19: Hamburger Menu — Refined Size and Proportions ---- */
/* Hamburger lines were 32px wide × 3px thick, making it look oversized
   and heavy in the header. Fix: reduce to 22px × 2px for a sleeker look. */
@media (max-width: 767px) {
  .mobile-hamburger {
    width: 44px !important;
    height: 44px !important;
  }

  .mobile-hamburger .hamburger-line {
    width: 22px !important;
    height: 2px !important;
  }

  .mobile-hamburger .hamburger-line::before,
  .mobile-hamburger .hamburger-line::after {
    width: 22px !important;
    height: 2px !important;
  }

  .mobile-hamburger .hamburger-line::before {
    top: -7px !important;
  }

  .mobile-hamburger .hamburger-line::after {
    bottom: -7px !important;
  }
}


/* ---- FIX 20: Portal Sidebar — Override design-system display:none on mobile ---- */
/* The design-system/utilities.css and mobile-responsive.css both set
   .sidebar { display: none !important } at max-width: 767px.
   Portal pages use a slide-in sidebar (transform) instead, so we must
   keep display: block and let transform handle visibility.
   This file loads last, so !important here wins by source order. */
@media (max-width: 767px) {
  .portal-page .sidebar,
  body.portal-page .sidebar,
  .portal-container .sidebar,
  aside.sidebar {
    display: block !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 280px;
    position: fixed;
    top: 64px;
    left: 0;
    height: calc(100vh - 64px);
    z-index: 40;
    background: #fff;
  }

  .portal-page .sidebar.open,
  body.portal-page .sidebar.open,
  .portal-container .sidebar.open,
  aside.sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
  }
}