/**
 * CC Appliance Repair — Mobile Responsive Stylesheet
 * ====================================================
 * Built from exact selectors in style.css + header.php structure.
 *
 * HOW TO INSTALL:
 *   Option A (quickest): WP Admin → Appearance → Customize → Additional CSS
 *   Option B: Plugin "Simple Custom CSS and JS" → Add CSS
 *   Option C: Append to child theme style.css
 *
 * ⚠️  REQUIRED FIX in header.php (line ~9) — change:
 *     <meta name="viewport" content="width=1000px">
 *   TO:
 *     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 *
 * ⚠️  ALSO RECOMMENDED in header.php — uncomment wp_head():
 *     Change:  //wp_head();
 *     To:       wp_head();
 * ====================================================
 */

/* =====================================================
   0. GLOBAL RESET
   ===================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  overflow-x: hidden;
  width: 100%;
}
img {
  max-width: 100%;
  height: auto;
}

/* =====================================================
   1. .block — ROOT 960px CONTAINER
   Original: width:960px; left:50%; margin-left:-480px
   This one rule fixes ~80% of horizontal scroll.
   ===================================================== */
@media (max-width: 1024px) {
  .block {
    position: relative !important;
    left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    float: none !important;
  }
}

/* =====================================================
   2. HEADER
   #header original: height:211px fixed
   ===================================================== */
@media (max-width: 767px) {
  #header {
    height: auto !important;
    padding-bottom: 0 !important;
  }

  /* Top bar row: <div class="block top"> */
  #header .block.top {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 15px !important;
    height: auto !important;
  }

  /* Payment icons — original: position:absolute; top:28px; left:0 */
  #header .payment {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
  }
  .payment img {
    float: none !important;
    width: 32px !important;
    height: auto !important;
    margin-right: 3px !important;
  }

  /* Yelp — original: position:absolute; left:608px */
  .yelp {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    top: auto !important;
    left: auto !important;
  }
  .logo_yelp {
    float: none !important;
    width: 40px !important;
    height: auto !important;
    margin-right: 4px !important;
  }
  .rating {
    float: none !important;
    margin: 0 !important;
  }
  .yelp .review-count {
    float: none !important;
    margin-top: 0 !important;
    font-size: 11px !important;
  }

  /* Social icons — original: position:absolute; left:847px */
  #header .social {
    position: static !important;
    display: flex !important;
    gap: 5px !important;
    top: auto !important;
    left: auto !important;
  }
  .social a { margin-right: 0 !important; }
  .social a img {
    width: 26px !important;
    height: 26px !important;
  }

  /* Logo */
  .logo {
    width: 180px !important;
    height: 56px !important;
    background-size: contain !important;
    background-position: left center !important;
    float: left !important;
    margin-bottom: 8px !important;
  }
  .logo a {
    width: 180px !important;
    height: 56px !important;
  }

  /* Phone — original: position:absolute; top:-2px; right:0 */
  .phone {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px 0 !important;
    background: #21565e !important;
    clear: both !important;
  }
  .phone a {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
  }
  .phone img {
    float: none !important;
    height: 22px !important;
    width: auto !important;
    margin-right: 6px !important;
    filter: brightness(0) invert(1) !important;
  }
  .phone .toll {
    font-size: 13px !important;
    margin-top: 0 !important;
    color: #cce8ea !important;
    float: none !important;
  }
  .phone .phone-index {
    font-size: 16px !important;
    margin-top: 0 !important;
    color: #ffa800 !important;
    float: none !important;
  }
  .phone .phone-number {
    font-size: 22px !important;
    color: #ffa800 !important;
    float: none !important;
  }
}

/* =====================================================
   3. NAVIGATION — .top-menu
   Original: position:absolute; top:46px; right:0
   Hover dropdowns don't work on touch — need hamburger.
   Hamburger button injected by mobile-nav.js
   ===================================================== */

/* Hamburger button styles (element injected by JS) */
.cca-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 700;
}
.cca-hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background: #21565e;
  border-radius: 2px;
  transition: all 0.25s ease;
}
.cca-hamburger.is-open span:nth-child(1) {
  transform: translateY(8.5px) rotate(45deg);
}
.cca-hamburger.is-open span:nth-child(2) { opacity: 0; }
.cca-hamburger.is-open span:nth-child(3) {
  transform: translateY(-8.5px) rotate(-45deg);
}

@media (max-width: 767px) {
  .cca-hamburger { display: flex !important; }

  .top-menu {
    position: relative !important;
    float: none !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #fff !important;
    border-top: 2px solid #21565e !important;
    z-index: 600 !important;
    min-height: 44px !important;
    padding: 0 !important;
  }

  /* The merged <ul> (two menus joined in PHP) — hidden by default */
  .top-menu > ul,
  div.top-menu > ul {
    display: none !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Revealed when JS adds .is-open to .top-menu */
  .top-menu.is-open > ul,
  div.top-menu.is-open > ul {
    display: flex !important;
  }

  /* All nav <li> items */
  .top-menu ul li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #eee !important;
    border-right: 0 !important;
    background: #fff !important;
    min-width: 0 !important;
  }
  .top-menu ul li a {
    display: block !important;
    padding: 13px 15px !important;
    font-size: 15px !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    color: #21565e !important;
  }
  .top-menu ul li a:hover {
    background: #f5f5f5 !important;
  }

  /* Submenus — static, hidden, revealed by JS tap */
  .top-menu ul li ul {
    position: static !important;
    display: none !important;
    top: auto !important;
    left: auto !important;
    border-left: 0 !important;
    background: #f0f7f7 !important;
    padding: 0 !important;
    box-shadow: none !important;
    z-index: auto !important;
  }
  .top-menu ul li.submenu-open > ul {
    display: block !important;
  }
  .top-menu ul li ul li { border-right: 0 !important; min-width: 0 !important; }
  .top-menu ul li ul li a {
    padding-left: 30px !important;
    font-size: 14px !important;
    color: #21565e !important;
    opacity: 0.85 !important;
  }

  /* Sub-sub-menus (e.g. Glendale > Cooktop repair Glendale) */
  .top-menu li ul ul { top: 0 !important; left: 0 !important; background: #dff0ef !important; }
  .top-menu ul li ul li ul li a { padding-left: 45px !important; }

  /* Dropdown toggle arrow */
  .top-menu ul li.menu-item-has-children > a::after {
    content: "+" !important;
    float: right !important;
    font-size: 16px !important;
    color: #21565e !important;
    font-weight: bold !important;
    line-height: 1 !important;
  }
  .top-menu ul li.submenu-open.menu-item-has-children > a::after {
    content: "−" !important;
  }

  /* Disable hover trigger on mobile */
  .top-menu ul li:hover > ul { display: none !important; }
  .top-menu ul li.submenu-open > ul { display: block !important; }
}

/* =====================================================
   4. HERO SLIDER — #request .slider
   Original: width:960px; height:382px
   bxSlider sets inline width with !important — need to match specificity
   ===================================================== */
@media (max-width: 767px) {
  #request { width: 100% !important; }

  /* Remove padding so slider bleeds edge-to-edge */
  #request .block { padding: 0 !important; }

  #request .slider {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    position: relative !important;
  }

  /* bxSlider wrappers */
  .slider .bx-wrapper,
  .slider .bx-window {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
  }
  .slider .bx-viewport { height: auto !important; }

  /* Slide images (from get_main_slider() → <ul class="bxslider"><li><img>) */
  .slider .bxslider li img,
  #request .slider img,
  .slider li img {
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    object-fit: cover !important;
    padding-top: 0 !important;
    display: block !important;
    float: none !important;
  }
  .slider .bxslider { padding: 0 !important; margin: 0 !important; }
  .slider .bxslider li { list-style: none !important; }

  /* Pager dots */
  .slider .bx-pager {
    position: static !important;
    text-align: center !important;
    padding: 8px 0 4px !important;
    left: auto !important;
    top: auto !important;
  }

  /* Text overlay — hide on mobile */
  .slider .bxitem-info { display: none !important; }
}

/* =====================================================
   5. SERVICE REQUEST FORM — #request .send-form
   Original: position:absolute; width:261px; height:350px; right:0; top:4px
   Sits on top of slider — must go below on mobile
   ===================================================== */
@media (max-width: 767px) {
  #request .send-form {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    float: none !important;
    right: auto !important;
    top: auto !important;
    background: #f0f7f7 !important;
    background-image: none !important;
    padding: 20px 15px !important;
    border-top: 3px solid #21565e !important;
    clear: both !important;
  }

  .send-form h1 { font-size: 18px !important; margin: 0 0 4px !important; }
  .send-form p { font-size: 14px !important; margin: 0 0 12px !important; color: #21565e !important; }

  /* Decorative girl image — remove on mobile */
  .send-form img.girl { display: none !important; }
  .send-form form { margin-top: 10px !important; }

  /* Text inputs — full width, clear the sprite backgrounds */
  .send-form input[type="text"] {
    width: 100% !important;
    height: 44px !important;
    padding: 0 15px !important;
    border: 1px solid #b0cdd0 !important;
    border-radius: 4px !important;
    margin-bottom: 10px !important;
    font-size: 15px !important;
    opacity: 1 !important;
    display: block !important;
    background-color: #fff !important;
    background-image: none !important;
    color: #333 !important;
  }
  #captcha {
    width: 100% !important;
    height: 44px !important;
    font-size: 15px !important;
    margin-bottom: 10px !important;
    display: block !important;
  }

  /* Show captcha block on mobile */
  #request .send-form .captcha {
    display: block !important;
    margin-bottom: 10px !important;
  }
  #request .send-form .captcha img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Submit — full width, clear sprite */
  input[type="submit"],
  input[type="button"] {
    width: 100% !important;
    height: 48px !important;
    font-size: 17px !important;
    border-radius: 4px !important;
    background: #21565e !important;
    background-image: none !important;
    color: #fff !important;
    cursor: pointer !important;
    border: none !important;
  }

  /* Custom dropdown toggle arrow — hide it, show list directly */
  .send-form .select img { display: none !important; }

  .select-drop {
    position: static !important;
    display: block !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin-bottom: 12px !important;
    z-index: auto !important;
  }
  .select-drop ul {
    padding: 0 !important;
    border: 1px solid #b0cdd0 !important;
    border-radius: 4px !important;
    background: #fff !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .select-drop ul li {
    width: 100% !important;
    padding: 11px 15px !important;
    font-size: 14px !important;
    color: #21565e !important;
    border-bottom: 1px solid #eef5f5 !important;
    cursor: pointer !important;
  }
  .select-drop ul li:last-child {
    border-bottom: 0 !important;
    padding-bottom: 11px !important;
  }
  .select-drop ul li.selected,
  .select-drop ul li:active {
    background: #e0f0f0 !important;
    font-weight: bold !important;
  }
}

/* =====================================================
   6. ADVERTISING STRIP — .advesting
   ===================================================== */
@media (max-width: 767px) {
  .advesting { width: 100% !important; padding: 0 15px !important; }
  .advesting img {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    display: block !important;
  }
  .action-info {
    position: static !important;
    width: 100% !important;
    font-size: 15px !important;
    text-align: center !important;
    padding: 10px 0 !important;
    left: auto !important;
    top: auto !important;
  }
}

/* =====================================================
   7. TWO-COLUMN LAYOUT — .half-block
   Original: width:50%; float:left
   ===================================================== */
@media (max-width: 767px) {
  .half-block {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    padding: 0 15px !important;
    min-height: 0 !important;
  }
  .half-block h1 { font-size: 16px !important; margin: 15px 0 10px !important; }
  .half-block p { padding-right: 0 !important; }
}

/* =====================================================
   8. DISCOUNT BANNER — .banner-discount
   Original: width:471px; height:150px; float:right
   ===================================================== */
@media (max-width: 767px) {
  .banner-discount {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 10px 0 !important;
    position: relative !important;
    min-height: 120px !important;
  }
  .bg_banner {
    position: absolute !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
  }
  .bg_banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .banner-discount table {
    position: relative !important;
    z-index: 1 !important;
    margin: 12px !important;
    width: calc(100% - 24px) !important;
  }
  .banner-discount .d1 { font-size: 26px !important; width: auto !important; }
  .banner-discount .d2 { font-size: 13px !important; padding-top: 4px !important; }
  .banner-discount .d3 { font-size: 15px !important; }
  .banner-discount .print { right: 8px !important; top: 8px !important; left: auto !important; }
}

/* =====================================================
   9. ADVANTAGES BANNER — .banner-advantage
   Original: width:470px; height:289px; float:left; bg image
   ===================================================== */
@media (max-width: 767px) {
  .banner-advantage {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 10px 0 !important;
    background-size: cover !important;
    background-position: center top !important;
    padding-bottom: 15px !important;
  }
  .banner-advantage .info {
    margin-left: 0 !important;
    margin-top: 0 !important;
    float: none !important;
    width: 100% !important;
    background: rgba(0,0,0,0.6) !important;
    padding: 10px 15px 15px !important;
  }
  .banner-advantage .info h1 {
    padding: 10px 0 5px !important;
    font-size: 18px !important;
    color: #fff !important;
  }
  .banner-advantage .info ul { margin-top: 0 !important; }
  .banner-advantage .info ul li { font-size: 15px !important; padding: 5px 0 !important; }
}

/* =====================================================
   10. BRAND LOGO SLIDER — .sponsor
   Original: .bx-window/.bx-wrapper width:960px !important
   ===================================================== */
@media (max-width: 767px) {
  .sponsor {
    width: 100% !important;
    height: auto !important;
    background-size: cover !important;
    overflow: hidden !important;
  }
  .sponsor .bx-wrapper,
  .sponsor .bx-window,
  .sponsor .bx-wrapper ul li {
    width: 100% !important;
    height: auto !important;
  }
  .sponsor .bxslider { height: auto !important; }
  .sponsor li img {
    width: 90px !important;
    height: auto !important;
    margin: 5px 8px !important;
  }
}

/* =====================================================
   11. SERVICE CARDS — .repair-preview / .item-preview
   Original: width:172px; height:320px; float:left (10 cards)
   ===================================================== */
@media (max-width: 767px) {
  .repair-preview {
    width: 100% !important;
    padding: 0 10px !important;
  }
  /* 2-column grid */
  .repair-preview .item-preview {
    width: calc(50% - 10px) !important;
    height: auto !important;
    float: left !important;
    padding: 10px 5px !important;
    margin: 0 5px 10px 0 !important;
    text-align: center !important;
  }
  .repair-preview .item-preview:nth-child(even) {
    margin-right: 0 !important;
  }
  .item-preview img {
    width: auto !important;
    height: 70px !important;
    margin: 0 auto 8px !important;
    display: block !important;
  }
  .item-preview h2 { font-size: 14px !important; line-height: 1.3 !important; }
  /* Hide description text — cards too small for it */
  .item-preview p { display: none !important; }
}

/* =====================================================
   12. BRANDS SIDEBAR — .all-brands
   Original: width:470px; height:1260px; float:left
   ===================================================== */
@media (max-width: 767px) {
  .all-brands {
    width: 100% !important;
    height: auto !important;
    float: none !important;
    margin: 10px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 10px !important;
    background-size: cover !important;
  }
  .all-brands div {
    float: none !important;
    position: static !important;
  }
  img.brand {
    float: none !important;
    width: 110px !important;
    height: auto !important;
    margin: 5px !important;
  }
  .last-br { margin-left: 0 !important; }

  /* .main-content floats beside .all-brands on desktop */
  .main-content {
    width: 100% !important;
    float: none !important;
    padding-right: 0 !important;
    clear: both !important;
  }
  .main-content h1 { font-size: 16px !important; }
}

/* =====================================================
   13. REVIEW BOX — .review
   Original: width:900px
   ===================================================== */
@media (max-width: 767px) {
  .review {
    width: 100% !important;
    padding: 15px !important;
    margin: 15px 0 20px !important;
    border-radius: 4px !important;
  }
  .review h1 { font-size: 18px !important; }
  .review .rate img {
    float: left !important;
    margin-right: 8px !important;
    height: 20px !important;
    width: auto !important;
  }
  .review .rate span { float: left !important; font-size: 13px !important; }
}

/* =====================================================
   14. FOOTER — #footer
   Original: height:250px; ALL children position:absolute
   ===================================================== */
@media (max-width: 767px) {
  #footer {
    width: 100% !important;
    height: auto !important;
    padding-bottom: 20px !important;
    background-repeat: repeat-x !important;
  }

  /* Bottom menu — original: position:absolute; top:28px; left:0 */
  .bottom-menu {
    position: static !important;
    width: 100% !important;
    float: none !important;
    padding: 15px 15px 0 !important;
    top: auto !important;
    left: auto !important;
  }
  .bottom-menu ul {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  .bottom-menu ul li {
    float: none !important;
    margin: 5px 0 5px 8px !important;
    padding: 0 8px 0 0 !important;
    border-right: 1px solid #ccc !important;
  }
  .bottom-menu ul li:first-child { margin-left: 0 !important; }
  .bottom-menu ul li:last-child { border-right: 0 !important; }
  .bottom-menu ul li a { font-size: 13px !important; }

  /* Footer payment — original: position:absolute; top:35px; left:615px */
  #footer .payment {
    position: static !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 12px 15px 0 !important;
    top: auto !important;
    left: auto !important;
  }

  /* Footer social — original: position:absolute; top:36px; left:846px */
  #footer .social {
    position: static !important;
    display: flex !important;
    gap: 6px !important;
    padding: 12px 15px 0 !important;
    top: auto !important;
    left: auto !important;
  }

  /* Footer bottom section */
  #footer .bottom { margin-top: 15px !important; padding: 0 15px !important; }

  /* Address blocks — original: width:333px; float:left (3-column) */
  .item-addr {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-bottom: 15px !important;
    line-height: 1.6 !important;
  }
  .item-addr .address span { color: #ffa800 !important; }
  .item-addr a { font-size: 14px !important; }

  .aow {
    position: static !important;
    display: block !important;
    margin: 15px 15px 0 !important;
    font-size: 12px !important;
  }
}

/* =====================================================
   15. CONTACTS PAGE — .contacts
   Original: width:693px; float:left; children absolute
   ===================================================== */
@media (max-width: 767px) {
  #request .contacts {
    width: 100% !important;
    float: none !important;
    margin-top: 0 !important;
    padding: 0 15px !important;
  }
  .contacts .map,
  .contacts .info {
    width: 100% !important;
    float: none !important;
    height: 280px !important;
    margin-top: 15px !important;
    position: relative !important;
  }
  .contacts .info {
    height: auto !important;
    padding-left: 0 !important;
  }
}

/* =====================================================
   16. MODAL — #message_block
   Mostly works (position:fixed fullscreen)
   Just prevent content box from overflowing on narrow screens
   ===================================================== */
@media (max-width: 767px) {
  #message_block .message-text {
    width: 88% !important;
    left: 6% !important;
    margin-left: 0 !important;
    top: 80px !important;
    padding: 15px !important;
  }
  #message_block .message-close {
    left: auto !important;
    right: 6% !important;
    margin-left: 0 !important;
    top: 90px !important;
  }
}

/* =====================================================
   17. UTILITY — Catch-all for inline style overrides
   ===================================================== */
@media (max-width: 767px) {
  /* Any element with inline float (from PHP output) */
  [style*="float: left"],
  [style*="float:left"],
  [style*="float: right"],
  [style*="float:right"] {
    float: none !important;
  }
  /* Inline large widths set in HTML attributes or style tags */
  [style*="width: 9"],
  [style*="width: 8"],
  [style*="width: 7"],
  [style*="width: 6"],
  [style*="width: 5"],
  [style*="width: 4"] {
    width: 100% !important;
  }
}