/* ============================================================
   DanyCars — changes ONLY for the home page (index.html)
   and ONLY for the mobile version.
   Include in <head> AFTER css/style.css.

   1) Hero (first screen) on phones — more compact, text higher up.
   2) Burger menu opens FULL screen in black with centered items;
      closing it returns to the main screen.
   ============================================================ */

/* =========================================================
   1. HERO on phones — shorter, text higher up
   ========================================================= */
@media (max-width: 991.98px) {
  /* Hero becomes compact: height follows content, but not above min-height.
     The top padding moves the text out from under the navbar, keeping it high. */
  /* Hero takes exactly one phone screen: the image adapts to the device
     height, and the next section starts only after it. */
  .hero-wrap {
    height: 100vh !important;
    height: 100dvh !important;
    padding-top: 110px;
    background-position: center bottom;
    overflow: hidden;
  }
  .hero-wrap .overlay {
    height: 100% !important;
  }

  /* Turn the text row into a plain block so it positions predictably */
  .hero-wrap .slider-text {
    height: auto !important;
    display: block !important;
  }
  .hero-wrap .slider-text .col-lg-6 {
    display: block !important;
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Empty spacer columns (needed only on desktop) are hidden on phones */
  .hero-wrap .slider-text > .col-lg-2,
  .hero-wrap .slider-text > .col-lg-4 {
    display: none !important;
  }
}

@media (max-width: 575.98px) {
  .hero-wrap {
    padding-top: 100px;
  }
  .slider-text h1 {
    font-size: 38px;
  }
  .slider-text p {
    font-size: 16px !important;
  }
}

/* =========================================================
   1a. PHONE: protection against horizontal page shifting
   =========================================================
   We do not use 100vw here for elements inside the container —
   in some mobile browsers 100vw can be wider than the actually
   visible area. All hero and navbar elements compute their width
   from the viewport and do not create horizontal scrolling.
   These rules apply to phones only (up to 767.98px).
   ========================================================= */
@media (max-width: 767.98px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  #ftco-navbar {
    padding: 8px 14px !important;
  }

  #ftco-navbar,
  #ftco-navbar > .container,
  .hero-wrap,
  .hero-wrap > .container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  /* Logo and burger always fit on a single line. */
  #ftco-navbar > .container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding-left: 6px;
    padding-right: 6px;
  }
  #ftco-navbar .navbar-brand {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 82px);
    margin-right: 8px;
  }
  #ftco-navbar .navbar-toggler {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
  }

  /* Remove Bootstrap negative margins from the hero row only. */
  .hero-wrap .slider-text {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-wrap .slider-text > .col-lg-6,
  .hero-wrap .slider-text .text,
  .hero-wrap .slider-text .text > * {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .hero-wrap .slider-text .text > p {
    width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .hero-wrap .hero-actions-row,
  .hero-wrap .hero-cta-btn,
  .hero-wrap .hero-badges,
  .hero-wrap .hero-rating-card {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  #ftco-navbar #ftco-nav.show,
  #ftco-navbar #ftco-nav.collapsing {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* =========================================================
   2. FULL-SCREEN BURGER MENU (mobile only)
   ========================================================= */
@media (max-width: 991.98px) {

  /* Keep the logo and the burger button ABOVE the black overlay,
     so the menu can be closed with the same burger button. */
  #ftco-navbar .navbar-brand,
  #ftco-navbar .navbar-toggler {
    position: relative;
    z-index: 9999;
  }

  /* Turn the dropdown menu into a full-screen black overlay */
  #ftco-navbar #ftco-nav.show,
  #ftco-navbar #ftco-nav.collapsing {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    background: #000000;
    z-index: 9990;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: none !important;
    transition: none !important;
    overflow-y: auto;
  }

  /* Menu items — in a column, strictly centered on screen */
  #ftco-navbar #ftco-nav.show .navbar-nav,
  #ftco-navbar #ftco-nav.collapsing .navbar-nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: 0 !important;
    padding: 0;
  }
  #ftco-navbar #ftco-nav.show .nav-item,
  #ftco-navbar #ftco-nav.collapsing .nav-item {
    margin: 7px 0;             /* smaller gap between items */
    width: auto;
  }
  #ftco-navbar #ftco-nav.show .nav-link,
  #ftco-navbar #ftco-nav.collapsing .nav-link {
    color: #ffffff !important;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 24px;           /* slightly smaller font */
    font-weight: 300;          /* thin and clean — like the hero heading */
    letter-spacing: 0.5px;
    line-height: 1.2;
    padding: 6px 24px;
    opacity: 1;
  }
  /* Active item — orange (matching the site), also not bold */
  #ftco-navbar #ftco-nav.show .nav-item.active .nav-link,
  #ftco-navbar #ftco-nav.collapsing .nav-item.active .nav-link {
    color: #ffc107 !important;
    font-weight: 400;
  }

  /* While the menu is open — no background scrolling (browsers supporting :has) */
  body:has(#ftco-navbar #ftco-nav.show) {
    overflow: hidden;
  }
}