/* Tickr Mobile Responsive Stylesheet */
/* Breakpoint: <= 768px */
/* Author: Tickr CTO via Sonnet */
/* Created: May 8, 2026 */
/* Mission: MRF — Mobile Rendering Fix */
/* Task: M01 — Foundation file. M02-M06 add design rules. */

@media (max-width: 768px) {
  /* Base rules — applied site-wide on mobile */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  body {
    -webkit-text-size-adjust: 100%;
  }
  * {
    box-sizing: border-box;
  }
  img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
  }
}

/* MRF M02 — drawer + hamburger + scroll-lock */
@media (max-width: 768px) {
  /* Hide desktop nav on mobile, show only hamburger */
  .tkr-nav-links {
    display: none !important;
  }
  /* Drawer base state — hidden off-screen right */
  #tkr-mob {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 85vw !important;
    max-width: 380px !important;
    height: 100vh !important;
    background: #fff !important;
    box-shadow: -4px 0 16px rgba(0,0,0,0.2) !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 9999 !important;
    overflow-y: auto !important;
    padding: 60px 20px 24px 20px !important;
    visibility: hidden !important;
    display: block !important;
  }
  #tkr-mob.tkr-mob-open {
    transform: translateX(0) !important;
    visibility: visible !important;
  }
  #tkr-mob-x {
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: none !important;
    font-size: 28px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    color: #1a1a1a !important;
    z-index: 10000 !important;
  }
  /* Drawer nav links */
  #tkr-mob > a {
    display: block !important;
    padding: 16px 4px !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-size: 16px !important;
    border-bottom: 1px solid #eee !important;
  }
  /* Body scroll-lock when drawer open */
  body.tkr-mob-locked {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }

  /* M03: Universal container width fix — eliminate horizontal overflow */
  .container,
  [class*="container"],
  .wrap,
  [class*="wrap"],
  .section,
  [class*="section"],
  .row,
  [class*="row"],
  .tkr-section,
  [class*="tkr-section"],
  main,
  article,
  aside,
  section {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Defensive: any element with fixed pixel width >390px gets capped */
  body * {
    max-width: 100% !important;
  }

  /* M02-ext: Hide brand tagline block from mobile header */
  .tkr-logo-sub {
    display: none !important;
  }
}

@media (min-width: 769px) {
  /* Hide drawer + hamburger on desktop (belt + braces; existing #tkr-ham rule handles hamburger) */
  #tkr-mob {
    display: none !important;
  }
}

/* ============================================================ */
/* MTC — Mobile Trust & Conversion                              */
/* Author: Opus (CTO + CRO + UX Auditor)                        */
/* Date: May 9, 2026                                            */
/* Reference audit: Notion 35b35cc6b4ef819bac8ae4a1ec982928     */
/* Purpose: reduce desperation signals on mobile                */
/* Approach: hide-only, additive, fully reversible              */
/* ============================================================ */

@media (max-width: 768px) {

  /* MTC-1: Hide Lead Capture catalog form section on mobile     */
  /* Reason: "FREE — INSTANT DELIVERY" tag CEO-flagged as fake.  */
  /* Catalog already available via hero "Download Catalog" btn.  */
  /* Removes 700px scroll + 1 redundant WhatsApp CTA + form      */
  /* friction without value. Desktop unchanged.                  */
  #tkr-lead {
    display: none !important;
  }

  /* MTC-2: Hide Why Choose Us header "Talk to Us Now" WhatsApp  */
  /* button on mobile.                                           */
  /* Reason: 6 trust cards already cover the section's purpose.  */
  /* The header CTA was the 4th of 7 WhatsApp CTAs on the page.  */
  /* Floating WA pill remains always-available.                  */
  .tkr-wc-cta-head {
    display: none !important;
  }

  /* MTC-3: Disable pulse animations on mobile                   */
  /* Reason: pulsing dots + pulsing shadow read as "startup",    */
  /* not "industrial manufacturer". B2B buyers respond to calm.  */
  /* Static elements stay visible — only the animation is off.   */
  #tkr-wa,
  .tkr-hero-badge-dot,
  .tkr-lead-trust-dot,
  .tkr-pulse,
  [class*="pulse"] {
    animation: none !important;
  }

  /* MTC-4: Disable hover transforms on mobile                   */
  /* Reason: hover doesn't fire on touch devices, so these       */
  /* transforms are dead code on mobile. But some browsers       */
  /* still animate on tap. Cleaner to disable explicitly.        */
  .tkr-pr-card:hover,
  .tkr-fp-card:hover,
  .tkr-card:hover,
  .tkr-wc-card:hover,
  .tkr-product:hover,
  .tkr-product-card:hover,
  .post-card:hover,
  .tkr-cat-card:hover {
    transform: none !important;
  }

  /* MTC-5: Tap-target minimum 48px on mobile                    */
  /* Reason: Google mobile-friendly audit requires min 48px tap  */
  /* targets. 3 button classes were 38-44px and would fail       */
  /* Semrush mobile blocker.                                     */
  .tkr-pr-btn,
  .tkr-card-details,
  .tkr-card-wa {
    min-height: 48px !important;
  }

}