/* ============================================================================
   Mobile corrections for the Colorlib pizza comp.

   Everything here is inside a max-width media query, so DESKTOP RENDERING IS
   UNCHANGED — the comp's own desktop geometry stays byte-identical, which the
   verification pass re-checks after every edit.

   Every rule below fixes something MEASURED on the comp itself at 320/375px,
   not something guessed at. The comp has these problems too; they are fixed
   here because the brief is a design that actually works on a phone.

   Loaded after pizza-style.css, so equal-specificity rules win by order.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   1. iOS Safari zooms the whole viewport when you focus a control smaller than
      16px, and never zooms back out. Measured: every text control in the comp
      is 13px, so tapping any form field yanks the layout sideways.

      Scoped to text-entry controls only. Submit buttons are excluded: they are
      never focused for typing, so they do not trigger the zoom, and bumping
      them would change the comp's button type scale for no reason.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px;
  }

  /* The bare `textarea` selector above is (0,0,1) and loses to the comp's own
     `.appointment-form .form-control` at (0,2,0) — measured: the textarea stayed at 13px while
     every input went to 16px, because those five :not() clauses push the input selector to
     (0,5,1). Naming each form wrapper ties that specificity and wins on load order. */
  .appointment-form .form-control,
  .contact-form .form-control,
  .search-form .form-control,
  textarea.form-control,
  select.form-control {
    font-size: 16px;
  }
}


/* ---------------------------------------------------------------------------
   2. The hamburger is the ONLY way into navigation on a phone, and the comp
      renders it 86x27. 27px is under every touch-target guideline.
      Measured after: 86x44, with the label still on one line.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .ftco_navbar .navbar-toggler {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
}


/* ---------------------------------------------------------------------------
   3. Carousel dots are 18x18 buttons around a 12px visual dot. The dot itself
      is left alone — only the button's hit area grows, so the slider looks
      identical while becoming tappable.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .home-slider .owl-dots .owl-dot {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
  }
}


/* ---------------------------------------------------------------------------
   4. Footer links. The "Recent Blog" meta row renders as 12px inline anchors
      about 17px tall, and the phone/email rows about 24px. Padding gives them
      a real hit area; inline anchors need inline-block first or vertical
      padding does not affect the box.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .ftco-footer .block-21 .meta a {
    display: inline-block;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .ftco-footer .block-23 ul li a {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .ftco-footer .ftco-footer-widget ul li a.py-2 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}


/* ---------------------------------------------------------------------------
   5. Card call-to-action buttons. The comp gives .btn 6px/12px padding at 13px,
      which measures 34px tall — under the touch guideline for the primary
      action on every food card. Scoped to the card buttons only: the hero's
      buttons already measure 54px from their p-3 utilities, and those carry
      !important so a blanket .btn rule would not have reached them anyway.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .services-wrap .price .btn,
  .menu-wrap .text .btn,
  .pricing-entry .btn {
    padding-top: 11px;
    padding-bottom: 11px;
  }
}


/* ---------------------------------------------------------------------------
   6. Social icons. Measured 19x20 in the intro strip and the footer — three
      links small enough to be a coin toss on a phone. The glyph is untouched;
      only the anchor's hit area grows.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .ftco-intro .social-icon li a,
  .ftco-footer .ftco-footer-social li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}


/* ---------------------------------------------------------------------------
   7. The "Hot Pizza Meals" card is a flex ROW at every width in the comp, so
      on a phone the photo and the copy each get half the screen. Measured at
      320px: 160px photo beside a 160px text column whose padding leaves 112px
      of usable width — the price and the Order button no longer fit on one
      line and wrap into a 62px-tall stack.

      Below the Bootstrap sm breakpoint the card becomes a column: photo full
      width at a fixed height, copy full width underneath. `order-lg-last` is
      an lg-and-up utility, so the alternating layout above 992px is untouched.
   --------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .services-wrap {
    flex-direction: column;
  }

  .services-wrap .img {
    width: 100%;
    height: 220px;
    flex: 0 0 220px;
  }

  .services-wrap .text {
    width: 100%;
  }
}