/* ==========================================================================
   lxera-responsive.css
   Mobile/tablet responsiveness layer for the custom "Lxera" theme pages.
   These pages style layout via INLINE style="" attributes (grids, widths,
   paddings) inside a small <style> block, and do NOT load the base app.css.
   This file targets those inline patterns via attribute selectors so ONE
   shared stylesheet makes every custom page responsive without touching
   the page markup. Desktop (>900px) is left completely untouched.
   ========================================================================== */

/* ---- Tablet & down (<=900px) ---- */
@media (max-width: 900px) {
  /* Kill horizontal overflow site-wide on the custom pages */
  html, body { overflow-x: hidden !important; max-width: 100% !important; }

  /* Any inline CSS grid collapses to a single, then two, readable columns */
  [style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }

  /* Media stays fluid */
  img, video, svg, iframe { max-width: 100% !important; height: auto; }

  /* Oversized inline paddings on cards / bands shrink */
  [style*="padding:54px"],[style*="padding: 54px"],
  [style*="padding:56px"],[style*="padding: 56px"],
  [style*="padding:48px"],[style*="padding: 48px"],
  [style*="padding:64px"],[style*="padding: 64px"],
  [style*="padding:60px"],[style*="padding: 60px"] { padding: 32px 22px !important; }

  /* Large inline gaps tighten */
  [style*="gap:48px"],[style*="gap: 48px"],
  [style*="gap:40px"],[style*="gap: 40px"],
  [style*="gap:56px"],[style*="gap: 56px"] { gap: 24px !important; }

  /* Neutralise fixed pixel widths so nothing exceeds the viewport.
     Matches both `width:NNNpx` and `max-width:NNNpx` (both become fluid). */
  [style*="width:1240px"],[style*="width: 1240px"],
  [style*="width:1200px"],[style*="width: 1200px"],
  [style*="width:1080px"],[style*="width: 1080px"],
  [style*="width:960px"],[style*="width: 960px"],
  [style*="width:880px"],[style*="width: 880px"],
  [style*="width:820px"],[style*="width: 820px"],
  [style*="width:780px"],[style*="width: 780px"],
  [style*="width:720px"],[style*="width: 720px"],
  [style*="width:680px"],[style*="width: 680px"],
  [style*="width:620px"],[style*="width: 620px"],
  [style*="width:600px"],[style*="width: 600px"],
  [style*="width:560px"],[style*="width: 560px"],
  [style*="width:540px"],[style*="width: 540px"],
  [style*="width:520px"],[style*="width: 520px"],
  [style*="width:500px"],[style*="width: 500px"],
  [style*="width:980px"],[style*="width: 980px"],
  [style*="width:940px"],[style*="width: 940px"],
  [style*="width:900px"],[style*="width: 900px"],
  [style*="width:840px"],[style*="width: 840px"],
  [style*="width:800px"],[style*="width: 800px"],
  [style*="width:760px"],[style*="width: 760px"],
  [style*="width:740px"],[style*="width: 740px"],
  [style*="width:700px"],[style*="width: 700px"],
  [style*="width:660px"],[style*="width: 660px"],
  [style*="width:640px"],[style*="width: 640px"],
  [style*="width:580px"],[style*="width: 580px"] { max-width: 100% !important; }

  /* Sidebars / secondary columns (common fixed widths) become full-width */
  [style*="width:480px"],[style*="width: 480px"],
  [style*="width:460px"],[style*="width: 460px"],
  [style*="width:440px"],[style*="width: 440px"],
  [style*="width:420px"],[style*="width: 420px"],
  [style*="width:400px"],[style*="width: 400px"],
  [style*="width:380px"],[style*="width: 380px"],
  [style*="width:360px"],[style*="width: 360px"],
  [style*="width:340px"],[style*="width: 340px"],
  [style*="width:320px"],[style*="width: 320px"],
  [style*="width:300px"],[style*="width: 300px"] { max-width: 100% !important; }
}

/* ---- Phones (<=600px) ---- */
@media (max-width: 600px) {
  /* Decorative hero blobs are hidden on phones so they never overlap the text */
  .lx-blob { display: none !important; }

  /* Single column everywhere on phones */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Rows that were laid out horizontally wrap on phones */
  [style*="display:flex"]:not([style*="column"]),
  [style*="display: flex"]:not([style*="column"]) { flex-wrap: wrap !important; }

  /* Tame very large hero / section headings so they don't overflow */
  [style*="font-size:56px"],[style*="font-size: 56px"],
  [style*="font-size:52px"],[style*="font-size: 52px"],
  [style*="font-size:48px"],[style*="font-size: 48px"],
  [style*="font-size:44px"],[style*="font-size: 44px"],
  [style*="font-size:40px"],[style*="font-size: 40px"] { font-size: 30px !important; line-height: 1.25 !important; }

  [style*="font-size:38px"],[style*="font-size: 38px"],
  [style*="font-size:36px"],[style*="font-size: 36px"],
  [style*="font-size:34px"],[style*="font-size: 34px"],
  [style*="font-size:32px"],[style*="font-size: 32px"] { font-size: 24px !important; line-height: 1.3 !important; }

  /* Further shrink big paddings on phones */
  [style*="padding:54px"],[style*="padding: 54px"],
  [style*="padding:56px"],[style*="padding: 56px"],
  [style*="padding:48px"],[style*="padding: 48px"],
  [style*="padding:64px"],[style*="padding: 64px"],
  [style*="padding:60px"],[style*="padding: 60px"] { padding: 24px 16px !important; }
}

/* ==========================================================================
   MOBILE NAVBAR  (compact bar + slide-in drawer, built by lxera-mobile-nav.js)
   Shown only <=900px; desktop header & rail are hidden at that width.
   ========================================================================== */
.lxm-bar { display: none; }
.lxm-overlay, .lxm-drawer { display: none; }

@media (max-width: 900px) {
  /* hide the original desktop header + category rail */
  nav[style*="position:sticky"] { display: none !important; }
  .lxm-railsrc { display: none !important; }

  /* compact top bar */
  .lxm-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 120;
    background: #fff; padding: 10px 16px; border-bottom: 1px solid #ECEDF1;
  }
  /* Logo on the LEFT, actions on the right, even though the page is RTL and the logo is the
     first child. Done with order rather than by reordering the DOM so the reading order for a
     screen reader still starts with the brand — flex order moves the paint, not the sequence. */
  .lxm-logo { display: flex; align-items: center; gap: 8px; order: 2; }
  .lxm-logo img { height: 24px; width: auto; }

  .lxm-actions { display: flex; align-items: center; gap: 10px; flex: none; order: 1; }
  .lxm-iconbtn {
    width: 44px; height: 44px; flex: none; cursor: pointer;
    border: 1px solid #E4E5E9; border-radius: 12px; background: #F6F7FB;
    display: flex; align-items: center; justify-content: center;
  }

  .lxm-burger {
    width: 44px; height: 44px; flex: none; cursor: pointer;
    border: 1px solid #E4E5E9; border-radius: 12px; background: #F6F7FB;
    display: flex; align-items: center; justify-content: center;
  }
  .lxm-burger span { position: relative; width: 20px; height: 2px; background: #1d1f25; border-radius: 2px; display: block; }
  .lxm-burger span::before, .lxm-burger span::after {
    content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #1d1f25; border-radius: 2px;
  }
  .lxm-burger span::before { top: -6px; }
  .lxm-burger span::after  { top: 6px; }

  /* overlay + drawer */
  .lxm-overlay {
    display: block; position: fixed; inset: 0; z-index: 130;
    background: rgba(11,14,28,.45); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
  }
  .lxm-drawer {
    display: flex; flex-direction: column; position: fixed; top: 0; right: 0; z-index: 140;
    height: 100%; width: 84%; max-width: 340px; padding: 16px 18px 28px;
    background: #fff; box-shadow: -8px 0 40px rgba(0,0,0,.18);
    transform: translateX(100%); transition: transform .26s ease; overflow-y: auto;
  }
  body.lxm-open .lxm-drawer  { transform: translateX(0); }
  body.lxm-open .lxm-overlay { opacity: 1; visibility: visible; }
  body.lxm-open { overflow: hidden; }

  .lxm-close {
    align-self: flex-start; width: 40px; height: 40px; cursor: pointer;
    border: none; background: #F6F7FB; border-radius: 10px; color: #5f6368; font-size: 22px; line-height: 1;
  }
  .lxm-search {
    display: flex !important; align-items: center; gap: 10px; margin: 14px 0 6px;
    background: #fff; border: 1px solid #D8DAE2; border-radius: 999px; padding: 11px 16px;
    max-width: 100% !important; order: 0 !important; flex: none !important;
  }
  .lxm-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 15px; font-family: inherit; }
  .lxm-links { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
  .lxm-links a {
    padding: 13px 14px; border-radius: 12px; text-decoration: none;
    color: #1d1f25; font-weight: 600; font-size: 15px; background: #F6F7FB; white-space: normal;
  }
  .lxm-links a:hover { background: var(--lx-primary-tint); color: var(--lx-primary); }
  .lxm-auth { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .lxm-auth > div { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .lxm-auth a, .lxm-auth button, .lxm-auth form { width: 100%; text-align: center; justify-content: center; }
  .lxm-auth a { padding: 12px 16px !important; border-radius: 999px; }
}


/* ==========================================================================
   ACCESSIBILITY LAYER
   Added during the production readiness audit.
   ========================================================================== */

/* Skip link — WCAG 2.4.1 Bypass Blocks. Hidden until keyboard-focused. */
.lx-skip {
  position: absolute;
  top: -100px;
  inset-inline-start: 12px;
  z-index: 999;
  background: var(--lx-primary);
  color: #fff;
  font: 600 14px/1 'IBM Plex Sans Arabic', system-ui, sans-serif;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  transition: top .15s ease;
}
.lx-skip:focus { top: 0; }

/* Visible keyboard focus. Several controls are authored with outline:none or
   as bare elements; this restores a consistent ring for keyboard users only. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--lx-primary) !important;
  outline-offset: 2px !important;
}

/* Honour the OS "reduce motion" setting. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visually hidden, but available to screen readers and the a11y tree. */
.lx-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Display headings: sizes the original clamp list missed (42/46/50/54/60px).
   Left at their authored size these render far too large on phones.
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  [style*="font-size:60px"],[style*="font-size: 60px"],
  [style*="font-size:54px"],[style*="font-size: 54px"],
  [style*="font-size:50px"],[style*="font-size: 50px"],
  [style*="font-size:46px"],[style*="font-size: 46px"],
  [style*="font-size:42px"],[style*="font-size: 42px"] {
    font-size: 30px !important;
    line-height: 1.25 !important;
  }
}
@media (max-width: 390px) {
  [style*="font-size:60px"],[style*="font-size: 60px"],
  [style*="font-size:54px"],[style*="font-size: 54px"],
  [style*="font-size:50px"],[style*="font-size: 50px"] {
    font-size: 27px !important;
  }
}