/* Mobile-only layout corrections for SABEQ Legal. Desktop/tablet >= 721px is untouched. */
@media (max-width: 720px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  .site-shell {
    width: 100%;
    overflow-x: clip !important;
  }

  .container {
    width: calc(100% - 20px) !important;
    max-width: none !important;
  }

  /* Compact mobile header and restore RTL physical order. */
  .site-header {
    height: 68px !important;
  }

  .header-row {
    gap: 6px !important;
    min-width: 0;
  }

  .site-shell[dir='rtl'] .header-row {
    direction: rtl !important;
    flex-direction: row !important;
  }

  .site-shell[dir='rtl'] .header-row > .brand {
    order: 0 !important;
    margin: 0 !important;
  }

  .site-shell[dir='rtl'] .header-row > .header-actions {
    order: 1 !important;
    direction: rtl !important;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
  }

  .brand {
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    overflow: hidden;
  }

  .brand img {
    width: 50px !important;
    height: 50px !important;
    object-fit: contain !important;
  }

  .header-actions {
    min-width: 0;
    gap: 5px !important;
  }

  .language-select {
    height: 42px !important;
    min-width: 0;
    padding-inline: 8px 6px !important;
    border-radius: 12px !important;
  }

  .language-select select {
    width: auto !important;
    max-width: 88px !important;
    font-size: 15px !important;
  }

  .menu-toggle,
  .icon-button,
  .header-cta {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
  }

  /* Rebuild hero flow so copy does not sit at the bottom of a huge empty panel. */
  .hero {
    height: auto !important;
    min-height: 0 !important;
    align-items: stretch !important;
    background-image: url('./images/brand/sabeq-hero-kuwait-mobile.jpg') !important;
    background-position: center 35% !important;
    background-size: cover !important;
  }

  .hero-layout {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding-block: 152px 34px !important;
  }

  .hero-brand-block {
    top: 24px !important;
    inset-inline: 14px !important;
  }

  .hero-brand-title {
    max-width: 100%;
    margin-inline: auto !important;
    font-size: clamp(30px, 8.5vw, 38px) !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    text-wrap: balance;
  }

  .hero-brand-tagline {
    max-width: 92%;
    margin: 7px auto 0 !important;
    font-size: clamp(15px, 4.1vw, 18px) !important;
    line-height: 1.5 !important;
  }

  .hero-copy {
    width: 100% !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .hero .eyebrow,
  .eyebrow-light {
    justify-content: center !important;
    margin-bottom: 10px !important;
  }

  .hero-copy h1 {
    max-width: 390px !important;
    margin: 0 auto !important;
    font-size: clamp(28px, 7.7vw, 36px) !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-wrap: balance;
  }

  .hero-copy h1 em {
    display: inline !important;
  }

  .hero-text {
    max-width: 390px !important;
    margin: 14px auto 0 !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    text-align: center !important;
  }

  .hero-actions {
    justify-content: center !important;
    gap: 14px !important;
    margin-top: 18px !important;
  }

  .hero-actions button {
    font-size: 15px !important;
  }

  /* More proportional spacing below the hero. */
  .section,
  .memo-band {
    padding-block: 56px !important;
  }

  .section-heading {
    margin-bottom: 28px !important;
  }

  .section-heading h2,
  .why-intro h2,
  .contact-copy h2,
  .memo-copy h2 {
    font-size: clamp(28px, 7vw, 34px) !important;
    line-height: 1.35 !important;
  }

  /* Narrower drawer, aligned to the RTL side. */
  .drawer-backdrop {
    justify-content: flex-start !important;
  }

  .site-shell[dir='rtl'] .drawer-backdrop {
    justify-content: flex-end !important;
  }

  .mobile-drawer {
    width: min(84vw, 340px) !important;
    padding: 16px !important;
  }

  .drawer-head img {
    width: 54px !important;
    height: 54px !important;
  }

  .mobile-drawer nav {
    margin-top: 12px !important;
  }

  .mobile-drawer nav button {
    padding: 13px 4px !important;
    font-size: 16px !important;
  }

  /* Floating assistant/WhatsApp remain reachable without dominating the viewport. */
  .floating {
    inset-inline-end: 12px !important;
    bottom: 18px !important;
    gap: 7px !important;
  }

  .floating button,
  .floating a {
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 8px 22px rgba(14, 125, 186, .34) !important;
  }

  /* Prevent modal typography and controls from overflowing small screens. */
  .modal-content,
  .memo-modal,
  .memo-result {
    padding: 22px 14px !important;
  }

  .modal-content > h2,
  .memo-modal-title h2,
  .memo-result h2 {
    font-size: 25px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 390px) {
  .container {
    width: calc(100% - 16px) !important;
  }

  .language-select {
    max-width: 126px;
  }

  .language-select select {
    max-width: 70px !important;
    font-size: 14px !important;
  }

  .hero-layout {
    padding-block: 146px 30px !important;
  }

  .hero-brand-title {
    font-size: 29px !important;
  }

  .hero-copy h1 {
    font-size: 27px !important;
  }
}