/* ==========================================================================
   WUJoodi - Visual audit remediation, PHASE 1 (2026-09-25)
   Source: audits/visual-design-audit-2026-09-25.md
   Presentation only. Loaded after theme CSS, Additional CSS and
   wujoodi-ux-refine.css. Roll back: disable wujoodi-visual-phase1.php.
   Breakpoints: mobile <=600 / tablet 601-1024 / desktop >=1025
   ========================================================================== */

/* [2] Form submit buttons: brand font (was Arial) */
body form button,
body form input[type=submit]{font-family:inherit;}

/* [3] Heading scale - page content only (header/footer untouched) */
body main h1, body .wj-about-page h1{font-size:48px !important;}
body main h2, body .wj-about-page h2{font-size:36px !important;}
body main h3, body .wj-about-page h3{font-size:24px !important;}
body main h4{font-size:18px !important;}
body main h1, body main h2, body .wj-about-page h1, body .wj-about-page h2{text-wrap:balance;}
@media (max-width:1024px){
  body main h1, body .wj-about-page h1{font-size:40px !important;}
  body main h2, body .wj-about-page h2{font-size:30px !important;}
  body main h3, body .wj-about-page h3{font-size:22px !important;}
}
@media (max-width:600px){
  body main h1, body .wj-about-page h1{font-size:32px !important;}
  body main h2, body .wj-about-page h2{font-size:26px !important;}
  body main h3, body .wj-about-page h3{font-size:20px !important;}
  body{font-size:16px;}
}

/* [4] Eyebrow labels: no forced uppercase */
body .eyebrow{text-transform:none;}

/* [5] Home hero CTA hierarchy: primary first; equal full-width stack on phones */
body .hero-copy .hero-actions .btn-primary{order:-1;}
@media (max-width:600px){
  body .hero-copy .hero-actions{flex-direction:column; align-items:stretch; max-width:340px; margin-inline:auto;}
  body .hero-copy .hero-actions .btn{width:100%;}
}

/* [6] Home about block: readable measure (H2 size comes from [3]) */
body .about-teaser p{max-width:680px; margin-inline:auto;}

/* [7] Tablet: use the width - 3 value cards per row, 2 LG90 feature cards per row */
@media (min-width:601px) and (max-width:900px){
  body .value-grid{grid-template-columns:repeat(3,1fr); gap:16px;}
  body .value-card{padding:28px 16px;}
  body .feature-list{grid-template-columns:repeat(2,1fr);}
}

/* [8] Floating WhatsApp: clear page end + auto-hide while it overlaps
       a form control, FAQ row or footer link (class set by phase1 JS) */
@media (max-width:900px){
  body footer.site-footer .footer-bottom{padding-bottom:88px;}
}
body .wa-float{transition:opacity .2s ease, transform .25s ease, visibility .2s;}
body .wa-float.wj-wa-hidden{opacity:0; visibility:hidden; pointer-events:none; transform:scale(.85);}

/* [9] Contact: info card matches the form height, content centred inside */
@media (min-width:901px){
  body .contact-grid{align-items:stretch;}
  body .contact-grid .contact-info-card{display:flex; flex-direction:column; justify-content:center;}
}

/* [10] v11: desktop logo upscale (transform:scale(1.28)) removed - explicit logo sizing lives in wujoodi-visual-system.css (v11 block). */
/* current page / section state (reuses the theme's own hover language) */
body .main-nav > li.current-menu-item > a,
body .main-nav > li.current-page-ancestor > a,
body .main-nav > li.current_page_parent > a{color:var(--accent-2, #00C795);}
@media (min-width:961px){
  body .main-nav > li.current-menu-item > a::after,
  body .main-nav > li.current-page-ancestor > a::after,
  body .main-nav > li.current_page_parent > a::after{width:100%; opacity:.7;}
}

/* [11] LG90 hero: H1 is the dominant element, counter demoted below it */
body .lg-hero .counter-num{font-size:40px !important;}
@media (max-width:1024px){ body .lg-hero .counter-num{font-size:34px !important;} }
@media (max-width:600px){ body .lg-hero .counter-num{font-size:28px !important;} }

/* [12] LG90 final banner: WhatsApp action becomes secondary (outline language);
        the form submit stays the only primary green action nearby */
body .cta-banner .cta-actions a.btn-primary[href*="wa.me"]{
  background:transparent; border:1px solid rgba(255,255,255,0.22); color:#fff; box-shadow:none;
}
body .cta-banner .cta-actions a.btn-primary[href*="wa.me"]:hover{
  background:transparent; border-color:var(--accent, #00A37A); color:var(--accent-2, #00C795); box-shadow:none;
}
body .cta-banner .cta-actions a.btn-primary[href*="wa.me"]::after{display:none;}