/*
  LA VIDA Brand Identity - Responsive CSS
  Full Navbar + Layout breakpoints
*/

/* =========================================================
   LARGE TABLETS / SMALL DESKTOPS (≤1199px)
   ========================================================= */
@media (max-width: 1199px) {
  /* Shrink navbar pill a bit */
  body header.main-header.lavida-floating-header {
    width: calc(100% - 28px) !important;
    padding: 0 18px !important;
  }
  body header.main-header.lavida-floating-header .navbar-nav .menu-item a {
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
  }
  .banner .title {
    font-size: 3.2rem !important;
  }
  .section-title-wrap .title {
    font-size: 2.4rem;
  }
}

/* =========================================================
   TABLETS (≤991px) — hamburger kicks in, nav links hidden
   ========================================================= */
@media (max-width: 991px) {

  /* ---- Floating capsule navbar ---- */
  body header.main-header.lavida-floating-header {
    top: 10px !important;
    width: calc(100% - 24px) !important;
    height: 62px !important;
    border-radius: 40px !important;
    padding: 0 16px !important;
    overflow: visible !important; /* Keep visible so dropdowns work */
  }

  /* Hide desktop nav links (the aside toggler shows instead) */
  body header.main-header.lavida-floating-header .navbar-nav {
    display: none !important;
  }

  /* Show the hamburger icon */
  body header.main-header.lavida-floating-header .aside-toggler {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(200, 160, 98, 0.18) !important;
    border: 1px solid rgba(200, 160, 98, 0.45) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
  }

  body header.main-header.lavida-floating-header .aside-toggler i {
    color: var(--caramel-color) !important;
    font-size: 1.1rem !important;
  }

  body header.main-header.lavida-floating-header .aside-toggler:hover {
    background: var(--caramel-color) !important;
  }

  body header.main-header.lavida-floating-header .aside-toggler:hover i {
    color: #fff !important;
  }

  /* HIDE ALL controls from capsule on mobile — they live in the aside drawer */
  body header.main-header.lavida-floating-header .header-controls {
    display: none !important;
  }

  /* ---- Mobile aside drawer ---- */
  .main-aside {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 80vw !important;
    height: 100vh !important;
    background: var(--bg-main) !important;
    border-right: 2px solid var(--caramel-color) !important;
    z-index: 9999 !important;
    transform: translateX(-110%) !important;     /* % ensures full hide at any screen width */
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.35s !important;
    overflow-y: auto !important;
    padding-bottom: 40px !important;
  }

  .main-aside.open {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: all !important;
  }

  /* Logo in aside */
  .main-aside .navbar-brand {
    display: block !important;
    padding: 20px 20px 16px !important;
    border-bottom: 1px solid rgba(200, 160, 98, 0.3) !important;
  }

  .main-aside .navbar-brand img {
    max-height: 40px !important;
  }

  /* Aside nav links */
  .main-aside .aside-scroll {
    padding: 16px 12px !important;
  }

  .main-aside .nav.flex-column {
    gap: 4px !important;
  }

  .main-aside .menu-item a.nav-link {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--latte-color) !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
  }

  .main-aside .menu-item a.nav-link:hover,
  .main-aside .menu-item a.nav-link.active {
    background: rgba(200, 160, 98, 0.18) !important;
    color: var(--caramel-color) !important;
    border-color: rgba(200, 160, 98, 0.35) !important;
  }

  /* Aside overlay */
  .aside-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.55) !important;
    z-index: 9998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease !important;
    backdrop-filter: blur(2px) !important;
  }

  /* Show overlay when aside is open — JS adds .open to both .main-aside and .aside-overlay */
  .aside-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* General layout */
  .banner-inner {
    padding: 80px 0 100px !important;
  }
  .banner .title {
    font-size: 2.6rem !important;
  }
  .banner .subtitle {
    font-size: 1.1rem !important;
  }
  .section {
    padding: 60px 0;
  }
  .ct-single-img-wrapper {
    margin-bottom: 35px;
  }
  .lavida-feature-card {
    margin-bottom: 24px;
  }
  .footer-widget {
    margin-bottom: 30px;
  }

  /* Hero adjustments */
  .lavida-hero-section {
    min-height: 75vh !important;
    padding-top: 90px !important;
  }
  .hero-title {
    font-size: 2.8rem !important;
  }
  .hero-plate-frame {
    width: 280px !important;
    height: 280px !important;
    margin: 0 auto;
  }
}

/* =========================================================
   MOBILE (≤767px)
   ========================================================= */
@media (max-width: 767px) {

  /* Navbar capsule slightly narrower margins on mobile */
  body header.main-header.lavida-floating-header {
    width: calc(100% - 16px) !important;
    height: 56px !important;
    border-radius: 28px !important;
    padding: 0 10px !important;
    top: 8px !important;
    overflow: visible !important; /* Keep visible for any dropdowns */
  }

  /* Hamburger: compact icon-only circle */
  body header.main-header.lavida-floating-header .aside-toggler {
    width: 34px !important;
    height: 34px !important;
  }

  /* Logo stays reasonable */
  body header.main-header.lavida-floating-header .navbar-brand img {
    max-height: 32px !important;
  }

  /* Left group (toggler + logo): allow logo to shrink text */
  body header.main-header.lavida-floating-header .d-flex.gap20px {
    gap: 8px !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  /* Header controls: tight, no wrap, icon-only */
  body header.main-header.lavida-floating-header .header-controls {
    flex-shrink: 0 !important;
    min-width: 0 !important;
  }

  body header.main-header.lavida-floating-header .header-controls-inner {
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }

  /* All pills become round icon buttons */
  body header.main-header.lavida-floating-header .header-controls-inner > li,
  body header.main-header.lavida-floating-header .header-controls-inner .cart-trigger,
  body header.main-header.lavida-floating-header .header-controls-inner .menu-item-has-children {
    padding: 0 !important;
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  /* Hide ALL text labels — icons only */
  body header.main-header.lavida-floating-header .header-controls-inner span {
    display: none !important;
  }

  /* Keep cart count badge visible at top-right of circle */
  body header.main-header.lavida-floating-header .cart-item-count {
    position: absolute !important;
    top: -3px !important;
    right: -3px !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    font-size: 9px !important;
    margin: 0 !important;
    line-height: 16px !important;
  }

  /* Hero */
  .lavida-hero-section {
    min-height: 60vh !important;
    padding-top: 80px !important;
  }
  .hero-title {
    font-size: 2.2rem !important;
  }
  .hero-subtitle {
    font-size: 1rem !important;
  }
  .hero-plate-frame {
    width: 220px !important;
    height: 220px !important;
    margin: 0 auto;
  }
  .hero-floating-pill {
    display: none !important;
  }
  .hero-features-row {
    justify-content: center !important;
  }

  /* Buttons */
  .btn-custom {
    padding: 11px 22px !important;
    font-size: 0.85rem !important;
  }

  /* Section headings */
  .section-title-wrap .title {
    font-size: 2rem;
  }
  .banner .title {
    font-size: 2.1rem !important;
  }
  .banner .subtitle {
    font-size: 1rem !important;
  }

  /* Menu card stacking */
  .ct-mini-menu-top {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  /* Gallery grid */
  .lavida-gallery-section .owl-item .gallery-img {
    height: 220px !important;
  }

  /* Footer */
  .footer-middle {
    padding: 50px 0 30px !important;
  }
}

/* =========================================================
   SMALL PHONES (≤480px)
   ========================================================= */
@media (max-width: 480px) {

  body header.main-header.lavida-floating-header {
    border-radius: 24px !important;
  }

  .hero-title {
    font-size: 1.9rem !important;
  }
  .hero-plate-frame {
    width: 180px !important;
    height: 180px !important;
  }

  .banner .title {
    font-size: 1.8rem !important;
  }
  .section-title-wrap .title {
    font-size: 1.7rem;
  }

  .lavida-hero-badge .badge-text {
    font-size: 0.7rem !important;
    letter-spacing: 0.08em !important;
  }

  /* Wider aside on very small screens */
  .main-aside {
    width: 100vw !important;
    max-width: 100vw !important;
    border-right: none !important;
  }
}