/* =====================================================================
   CLEAR NOTE — Mobile UX layer (loaded last)
   1. Branded splash   2. Compact mobile header   3. Full-screen menu
   4. Temporary reading toolbar   5. Homepage button radius
   6. Mobile scroll-performance fixes
   ===================================================================== */

/* ---------- 1. Splash (visual design lives in nav-redesign.css) ---------- */
.cn-preloader { animation: cn-splash-failsafe .01s linear 3.5s forwards; } /* never trap the page if JS fails */
html.cn-no-splash .cn-preloader { display: none !important; }
@keyframes cn-splash-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Desktop defaults for mobile-only pieces */
.cn-mobile-actions,
.cn-sidemenu-search,
.cn-side-mobile-only,
.cn-reading-bar { display: none; }

/* ---------- Reading progress: GPU-friendly transform instead of width ---------- */
.cn-progress { width: 100% !important; transform: scaleX(0); transform-origin: 0 50%; will-change: transform; }

/* ---------- 5. Homepage buttons: 12px radius ---------- */
body.cn-homepage .cn-btn,
body.cn-homepage .cn-hero-cta a,
body.cn-homepage .cn-newsletter-form button { border-radius: 12px !important; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  /* 2. Compact header: logo left; contextual action + menu right */
  .cn-header .cn-header-left .cn-menu-btn { display: none !important; }
  .cn-header .cn-header-right > :not(.cn-mobile-actions) { display: none !important; }
  .cn-header .cn-header-right .cn-mobile-actions { display: flex; align-items: center; gap: .25rem; }
  .cn-header .cn-header-inner { padding: .5rem .9rem !important; }
  .cn-header .cn-header-right .cn-mobile-actions .cn-icon-btn {
    width: 2.5rem; height: 2.5rem; min-width: 2.5rem; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .cn-header .cn-header-right .cn-mobile-actions .cn-icon-btn > svg,
  .cn-header .cn-header-right .cn-mobile-actions .cn-icon-btn > i { width: 1.3rem; height: 1.3rem; }
  .cn-header .cn-header-right .cn-mobile-actions .cn-avatar-sm { width: 1.7rem; height: 1.7rem; border-radius: 50%; object-fit: cover; }
  .cn-header .cn-logo-premium .cn-clear,
  .cn-header .cn-logo-premium .cn-note { font-size: .95rem; }
  .cn-header .cn-logo-premium > i { font-size: 1rem; }

  /* 3. Full-screen menu */
  .cn-overlay { display: none !important; }
  .cn-sidemenu {
    left: 0 !important;
    width: 100% !important;
    max-width: none;
    height: 100%;
    max-height: 100dvh;
    border-right: 0 !important;
    padding: 1rem 1.1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 9100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .cn-sidemenu.active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .cn-sidemenu-head { margin-bottom: 1rem; }
  .cn-sidemenu-search {
    display: flex; align-items: center; gap: .6rem;
    height: 46px; margin: 0 0 .9rem; padding: 0 .9rem;
    border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
    background: rgba(255,255,255,.05); color: inherit;
  }
  .cn-sidemenu-search input {
    flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
    color: inherit; font: inherit; font-size: 16px; /* 16px stops iOS zoom */
  }
  body.cn-light-theme .cn-sidemenu-search { background: #fff; border-color: rgba(16,24,40,.12); }
  .cn-side-mobile-only { display: flex; }
  .cn-sidemenu .cn-side-link { padding: .95rem .85rem; font-size: 1.05rem; }

  /* 4. Temporary reading toolbar (article + review pages) */
  body[data-cn-reading="1"] .cn-share-float { display: none !important; } /* Share now lives in the header */
  .cn-reading-bar {
    display: flex; align-items: center; gap: .15rem;
    position: fixed; left: 50%; z-index: 55;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    padding: .3rem; border-radius: 14px;
    background: rgba(17,24,20,.96); border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    opacity: 0; pointer-events: none;
    transform: translate(-50%, 18px);
    transition: opacity .22s ease, transform .22s ease;
  }
  .cn-reading-bar.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
  .cn-reading-bar button {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 40px; padding: 0 .85rem; border: 0; border-radius: 10px;
    background: transparent; color: #f7faf8; font-family: inherit; font-weight: 600; font-size: .82rem; line-height: 1; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .cn-reading-bar button:active { background: rgba(255,255,255,.1); }
  .cn-reading-bar .cn-reading-pct { min-width: 2.6rem; justify-content: center; color: #4ade80; cursor: default; }
  body.cn-light-theme .cn-reading-bar { background: rgba(255,255,255,.97); border-color: rgba(16,24,40,.12); box-shadow: 0 8px 24px rgba(16,24,40,.16); }
  body.cn-light-theme .cn-reading-bar button { color: #111827; }
  body.cn-light-theme .cn-reading-bar .cn-reading-pct { color: #15803d; }
}

/* ---------- 6. Scroll performance (phones / tablets) ---------- */
html { scroll-behavior: auto; }                       /* smooth-scroll makes touch scrolling feel laggy */
@media (max-width: 1023px) {
  /* Live backdrop blur on many cards is the main cause of scroll lag on mid-range phones. */
  .cn-card, .cn-glass, .cn-glass-sm,
  body.cn-review-page .cn-card, body.cn-review-page .cn-glass,
  .cn-profile-section-card, .cn-header, .cn-bottomnav,
  .cn-cookie-consent, .cn-overlay, .cn-newsletter-form .cn-input,
  body.cn-light-theme .cn-header, body.cn-light-theme .cn-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .cn-card, .cn-glass, .cn-profile-section-card { box-shadow: 0 6px 18px rgba(0,0,0,.22) !important; }
  .cn-header { background: var(--cn-black); }
  body.cn-light-theme .cn-header { background: #fff; }
  .cn-verify-card::before { animation: none; }
  .cn-catalog-track { animation-duration: 60s; }
}
@media (hover: none) {
  .cn-card:hover, .cn-share-float:hover { transform: none; }
}
.cn-footer { content-visibility: auto; contain-intrinsic-size: auto 520px; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }