/* Mobile optimization for Alyaa Driving School
   Loaded after theme/Elementor CSS so these rules win. */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

img,
svg,
iframe,
video {
  max-width: 100%;
}

/* ---------------------------------------------------------
   Slide-out mobile menu (ElementsKit offcanvas, <= 1024px)
   Dark panel so the white logo and links stay readable.
   --------------------------------------------------------- */
@media (max-width: 1024px) {
  .elementskit-menu-container.elementskit-menu-offcanvas-elements {
    background-color: #1a1919 !important;
    padding-bottom: 2rem;
  }

  .elementskit-nav-identity-panel {
    background-color: #1a1919 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .elementskit-nav-identity-panel .elementskit-nav-logo {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
  }

  .elementskit-nav-identity-panel .elementskit-nav-logo > img {
    width: auto !important;
    max-width: 150px !important;
    max-height: 76px !important;
    height: auto !important;
  }

  .elementskit-menu-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }

  /* Menu links: bigger tap targets, readable on dark */
  .elementskit-navbar-nav-default .elementskit-navbar-nav > li > a,
  .elementskit-navbar-nav > li > a {
    color: #ffffff !important;
    padding: 16px 20px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    min-height: 52px;
    display: flex !important;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .elementskit-navbar-nav > li > a:hover,
  .elementskit-navbar-nav > li > a:focus,
  .elementskit-navbar-nav > li.current-menu-item > a,
  .elementskit-navbar-nav > li > a.active {
    color: #e98b4a !important;
  }

  /* Hamburger button: comfortable tap size */
  button.elementskit-menu-hamburger {
    width: 46px !important;
    height: 46px !important;
    padding: 10px !important;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }
}

/* ---------------------------------------------------------
   Phone layout: spacing, typography, tap targets
   --------------------------------------------------------- */
@media (max-width: 767px) {
  /* Keep the absolute header from crowding the hero */
  .elementor-15 .elementor-element.elementor-element-3c00d227 {
    --padding-top: 0.75em;
    --padding-bottom: 0.75em;
    --padding-left: 1em;
    --padding-right: 1em;
  }

  /* Header logo: visible but not oversized */
  .elementor-15 .elementor-element.elementor-element-59b35271 img {
    width: auto !important;
    max-width: 130px !important;
    height: auto !important;
  }

  /* Buttons: thumb-friendly height */
  .elementor-button,
  .elementor-button-link {
    min-height: 48px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 22px !important;
    word-break: break-word;
  }

  /* Contact/phone/email list rows are easier to tap */
  .elementor-icon-list-item > a {
    min-height: 44px;
    display: flex !important;
    align-items: center;
    gap: 8px;
  }

  .elementor-icon-list-text {
    word-break: break-word;
  }

  /* Stop long emails/addresses from causing sideways scroll */
  .elementor-heading-title,
  .elementor-widget-text-editor,
  .elementor-icon-box-description {
    overflow-wrap: break-word;
  }

  /* Footer columns stack with breathing room */
  .elementor-16 .e-con-inner {
    row-gap: 1.5rem;
  }

  /* Desktop heading sizes are far too large on a phone.
     Elementor sets these per-element, so !important is required. */
  .elementor-widget-heading h1.elementor-heading-title {
    font-size: 32px !important;
    line-height: 1.18 !important;
  }

  .elementor-widget-heading h2.elementor-heading-title {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }

  .elementor-widget-heading h3.elementor-heading-title {
    font-size: 19px !important;
    line-height: 1.35 !important;
  }

  .elementor-widget-heading h4.elementor-heading-title {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }
}

/* ---------------------------------------------------------
   Compact header on the standalone pages (contact/help/legal)
   Row 1: logo + Contact button. Row 2: section links.
   Keeps the sticky bar from eating the screen on phones.
   --------------------------------------------------------- */
@media (max-width: 860px) {
  .site-header-inner {
    flex-direction: row !important;
    flex-wrap: wrap;
    align-items: center !important;
    justify-content: space-between;
    gap: 0.4rem 0.75rem;
    padding: 0.5rem 0;
  }

  .brand {
    order: 1;
  }

  .brand img {
    width: 56px;
  }

  .nav-cta {
    order: 2;
    padding: 10px 16px;
    font-size: 14px;
    min-height: 44px;
  }

  .nav-links {
    order: 3;
    width: 100%;
    gap: 0.35rem 1rem;
  }

  .nav-links a:not(.nav-cta) {
    padding: 4px 0;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }

  .page-hero {
    padding-top: 2rem;
  }
}

/* ---------------------------------------------------------
   Sticky call bar (phones only)
   --------------------------------------------------------- */
.mobile-action-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-action-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #1a1919;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .mobile-action-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 12px 10px;
    font-family: "DM Sans", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.02em;
  }

  .mobile-action-bar .mab-call {
    background: #e98b4a;
    color: #ffffff;
  }

  .mobile-action-bar .mab-alt {
    background: transparent;
    color: #ffffff;
  }

  .mobile-action-bar a:active {
    filter: brightness(0.94);
  }

  /* Room so the bar never covers the last section.
     !important is needed because Elementor's kit class sits on <body>
     and outranks a plain element selector. */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }
}