/* 
  ==========================================================================
  Salko Kitchens - Insane Mobile Optimization
  ========================================================================== 
*/

/* 1. Global Resets & Anti-Overflow */
html, body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 991px) {
  /* 2. Fluid Typography */
  h1 { font-size: clamp(34px, 7vw, 48px) !important; line-height: 1.15 !important; letter-spacing: -0.01em; }
  h2, .sec-title h2 { font-size: clamp(28px, 6vw, 36px) !important; line-height: 1.2 !important; letter-spacing: -0.01em; }
  h3 { font-size: clamp(22px, 4vw, 26px) !important; line-height: 1.3 !important; }
  h4 { font-size: 18px !important; line-height: 1.4 !important; }
  p { font-size: 16px !important; line-height: 1.65 !important; }
  
  .sec-title .sub-title {
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 12px !important;
  }

  /* 3. Global Spacing Rhythm */
  .pt_120, .pt_130, .pt_110, .pt_100 { padding-top: 70px !important; }
  .pb_120, .pb_130, .pb_110, .pb_100 { padding-bottom: 70px !important; }
  .mb_70, .mb_60, .mb_50 { margin-bottom: 40px !important; }
  .mt_70, .mt_60, .mt_50 { margin-top: 40px !important; }
  
  .auto-container, .outer-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* 4. Tap Targets & Buttons */
  a, button {
    touch-action: manipulation;
  }
  .theme-btn {
    padding: 14px 28px !important;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px !important;
    color: #1d2a28 !important;
  }
  .theme-btn:hover, .theme-btn:focus-visible { color: #fff !important; }
  .salko-text-link, .footer-widget .links-list li a, .salko-contact-list li a {
    display: inline-block;
    padding: 8px 0;
    min-height: 40px;
  }

  /* 5. Header */
  .main-header .logo-box img {
    max-width: 160px !important;
  }
  .mobile-nav-toggler {
    padding: 12px !important;
  }
  
  /* 6. Hero / Banner */
  .banner-section .banner-carousel .slide-item {
    min-height: auto !important;
    padding: 140px 0 100px !important;
  }
  .banner-carousel .content-box {
    text-align: left;
  }
  .banner-carousel .content-box h1, .banner-carousel .content-box h2 {
    margin-bottom: 16px !important;
  }
  .banner-carousel .content-box p {
    margin-bottom: 24px !important;
    max-width: 100% !important;
  }
  .salko-banner-controls {
    left: 20px !important;
    bottom: 20px !important;
    gap: 10px !important;
  }
  .salko-banner-controls button {
    width: 44px !important;
    height: 44px !important;
    font-size: 24px !important;
  }

  /* 7. Subpage Titles */
  .page-title {
    padding: 80px 0 !important;
  }
  .page-title .content-box h1 {
    font-size: 38px !important;
    margin-bottom: 12px !important;
  }

  /* 8. Project & Gallery Cards */
  .project-section .project-block, .salko-resources .news-block {
    margin-bottom: 20px !important;
  }
  .project-block-one .inner-box {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  }
  .project-block-one .inner-box .image-box .image img,
  .project-block-one .inner-box .image-box .overlay-image img,
  .salko-gallery-card .image img {
    aspect-ratio: 4/3 !important;
    height: auto !important;
    width: 100% !important;
    object-fit: cover !important;
  }
  .project-block-one .inner-box .content-box {
    opacity: 1 !important;
    visibility: visible !important;
  }
  .project-block-one .inner-box .content-box .text-box {
    padding: 24px 20px 20px !important;
    background: linear-gradient(transparent, rgba(14,25,25,0.95) 30%) !important;
  }
  .salko-gallery-card .salko-gallery-caption {
    padding: 16px 20px 20px !important;
    min-height: auto !important;
  }

  /* 9. Process & FAQ Accordions */
  .salko-faq-page .accordion-box .acc-btn,
  .faq-section .accordion-box .acc-btn {
    position: relative !important;
    padding: 18px 56px 18px 0 !important;
    font-size: 17px !important;
    line-height: 1.4 !important;
    min-height: auto !important;
  }
  .salko-faq-page .accordion-box .acc-btn .icon-box,
  .faq-section .accordion-box .acc-btn .icon-box {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(203, 169, 121, 0.1);
    color: #cba979 !important;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 20px !important;
  }
  .salko-faq-page .accordion-box .acc-content,
  .faq-section .accordion-box .acc-content {
    padding: 0 0 20px 0 !important;
  }
  
  /* 10. Feature Sections */
  .salko-feature-card {
    padding: 30px 24px !important;
    border-radius: 8px;
    margin-bottom: 16px;
  }
  .salko-feature-number {
    font-size: 26px !important;
    margin-bottom: 12px !important;
  }
  .salko-section-intro {
    font-size: 17px !important;
    line-height: 1.6 !important;
    padding: 0 10px !important;
    margin-bottom: 40px !important;
  }
  
  /* 11. Process Visual Enhancements */
  .salko-process-visual .video-content {
    margin: 0 !important;
  }
  .salko-process-visual .content-box {
    padding: 32px 24px !important;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    margin-bottom: 24px !important;
  }
  .salko-process-image {
    margin-top: 0 !important;
    border-radius: 6px;
  }
  .salko-process-image img {
    height: auto !important;
    aspect-ratio: 4/3;
  }
  
  /* Working Section (How we work) */
  .working-block-one .inner-box {
    padding: 24px !important;
    margin-bottom: 20px !important;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
  }

  /* 12. Footer */
  .main-footer {
    padding-top: 60px !important;
    padding-bottom: 30px !important;
  }
  .main-footer .footer-widget {
    margin-bottom: 40px !important;
  }
  .main-footer .footer-logo img {
    max-width: 180px !important;
  }
  .main-footer .links-list li a {
    font-size: 16px !important;
  }
  .main-footer .info-list li span {
    font-size: 13px !important;
    margin-bottom: 4px;
    display: block;
  }
  .main-footer .info-list li a {
    font-size: 18px !important;
  }

  /* 13. Service Request Form */
  .salko-service-form-card {
    padding: 30px 20px !important;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.04);
  }
  .salko-form-field label {
    font-size: 15px !important;
  }
  .salko-form-field input, 
  .salko-form-field textarea,
  .salko-form-field select {
    font-size: 16px !important; /* Prevents iOS input auto-zoom */
    padding: 14px 16px !important;
    border-radius: 4px !important;
    min-height: 48px; /* Touch target */
  }
  .salko-radio, .salko-checkbox {
    padding: 12px 20px 12px 0 !important;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
  .salko-radio input, .salko-checkbox input {
    width: 22px !important;
    height: 22px !important;
    margin-right: 12px !important;
  }
  .salko-service-pricing {
    padding: 16px 20px !important;
    margin: 20px 0 !important;
    font-size: 15px !important;
  }
  
  /* Details Page Layout */
  .salko-details-page .content-two,
  .salko-details-page .content-three {
    margin-top: 24px !important;
  }
  .salko-details-page .image-box img {
    height: auto !important;
    aspect-ratio: 4/3;
  }
}

/* --------------------------------------------------------------------------
   Extra Small Devices (< 576px)
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
  /* Ultra-tight spacing */
  .pt_120, .pt_130, .pt_110, .pt_100 { padding-top: 50px !important; }
  .pb_120, .pb_130, .pb_110, .pb_100 { padding-bottom: 50px !important; }
  
  .banner-section .banner-carousel .slide-item {
    padding: 120px 0 90px !important;
  }
  
  .page-title {
    padding: 60px 0 !important;
  }
  
  .salko-contact-band {
    padding: 50px 0 !important;
    text-align: center;
  }
  
  .salko-contact-band-action, .salko-service-form-card button, .salko-details-page .theme-btn {
    width: 100% !important;
    text-align: center !important;
  }
  .salko-contact-band-action .theme-btn {
    width: 100% !important;
    margin-top: 10px;
  }

  /* Form & Contacts */
  .salko-contact-card {
    padding: 24px 20px !important;
  }
  
  /* Map */
  .salko-map-section .map-inner {
    height: 300px !important;
    min-height: 300px !important;
  }
}

/* --------------------------------------------------------------------------
   Mobile Menu Enhancements (Up to 1200px where Kitchnox hides main menu)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .mobile-menu .menu-box {
    background-color: #1d2a28 !important;
    padding: 40px 30px !important;
    width: 320px !important;
    max-width: 100% !important;
  }
  .mobile-menu .close-btn {
    top: 20px !important;
    right: 20px !important;
    color: #cba979 !important;
    border: 1px solid rgba(203, 169, 121, 0.3) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
  }
  .mobile-menu .nav-logo {
    margin-bottom: 40px !important;
  }
  .mobile-menu .nav-logo img {
    max-width: 180px !important;
  }
  .mobile-menu .menu-outer .navigation > li {
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  }
  .mobile-menu .menu-outer .navigation > li > a {
    padding: 16px 0 !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    color: #fff !important;
    text-transform: none !important;
  }
  .mobile-menu .menu-outer .navigation > li > a:hover {
    color: #cba979 !important;
  }
  .mobile-menu a[aria-current="page"] { color: #cba979 !important; }
  .mobile-menu .contact-info {
    margin-top: 40px !important;
    padding-top: 30px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
  }
  .mobile-menu .contact-info h4 {
    color: #cba979 !important;
    font-size: 13px !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
  }
  .mobile-menu .contact-info ul li {
    color: rgba(255,255,255,0.7) !important;
    font-size: 15px !important;
    margin-bottom: 12px !important;
    display: flex;
    flex-direction: column;
  }
  .mobile-menu .contact-info ul li a {
    color: rgba(255,255,255,0.9) !important;
    padding: 6px 0;
  }

  /* Enhanced Mobile Navigation Structure */
  .mobile-menu .menu-outer .navigation {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .salko-mobile-subnav {
    display: block;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .salko-mobile-subnav > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    cursor: pointer;
    list-style: none; /* remove default arrow */
    touch-action: manipulation;
  }
  .salko-mobile-subnav > summary::-webkit-details-marker {
    display: none;
  }
  .salko-mobile-subnav > summary::after {
    content: "+";
    color: #cba979;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    margin-left: 10px;
    transition: transform 0.3s ease;
  }
  .salko-mobile-subnav[open] > summary::after {
    transform: rotate(45deg);
  }
  
  .salko-mobile-subnav > ul {
    margin: 0 0 16px 0;
    padding: 0 0 0 16px;
    list-style: none;
    border-left: 1px solid rgba(203, 169, 121, 0.2);
  }
  .salko-mobile-subnav > ul > li {
    margin: 0;
    padding: 0;
  }
  .salko-mobile-subnav > ul > li > a {
    display: block;
    padding: 12px 0;
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    text-transform: none;
  }
  .salko-mobile-subnav > ul > li > a:hover {
    color: #cba979;
  }

  .salko-mobile-call {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #cba979;
    color: #1d2a28 !important;
    font-weight: 600 !important;
    padding: 16px !important;
    margin-top: 24px;
    border-radius: 6px;
    text-align: center;
    font-size: 16px !important;
  }
}