/* 06-responsive.css
 * ─────────────────────────────────────────────────────────
 * All media-query overrides for Dodo theme
 */

/* Tablet & up: adjust site-branding, header spacing, nav padding */
@media screen and (min-width: 768px) {
  .site-branding .site-title a {
    font-size: 2.1em;
    letter-spacing: -2px;
  }
  .site-branding .site-description {
    font-size: 1em;
  }
  .site-branding,
  .site-search,
  .site-header-cart,
  .site-logo-anchor,
  .custom-logo-link {
    margin-bottom: 0;
  }
  .main-navigation ul.menu > li > a,
  .main-navigation ul.nav-menu > li > a,
  .site-header-cart .cart-contents {
    padding-bottom: 0.875em !important;
    padding-top: 0.875em;
  }
  .site-content .col-full,
  .site-footer .col-full,
  .header-widget-region .col-full {
    padding: 1.618em 5.874em;
  }
  .site-header {
    padding-top: 2em;
  }
  /* tab padding & border*/
  .woocommerce-tabs ul.tabs li a {
    padding-left: 1em !important;
    border-left: 1px solid #fff !important;
    border-right: 1px solid #fff !important;
  }
}

/* Desktop & up: headings, widget titles, captions */
@media screen and (min-width: 1024px) {
  h1 {
    font-size: 2em;
  }
  h2,
  h3 {
    font-size: 1.618em;
  }
  .widget .widget-title {
    font-size: 2.1133em;
  }
  /* image captions */
  .wp-block-cover p {
    font-size: 1.618em !important;
    line-height: 1.2em;
  }
}

/* Desktop accordion: rebuild WooCommerce tabs into a flex row */
@media (min-width: 1024px) {
  .woocommerce-tabs ul.tabs {
    display: flex !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }
  .woocommerce-tabs ul.tabs li {
    width: 33.3333% !important;
    border-bottom: none !important;
    margin: 0;
  }
}

/* Tablet accordion tweaks (≤1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .woocommerce-tabs ul.tabs {
    display: flex !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }
  .woocommerce-tabs ul.tabs li {
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    border-bottom: none !important;
  }
}