/*
 * Own CSS of julius-mayer.com, loaded last by layout.php: styles for site.js and the layer for phones and tablets.
 * Phone/tablet rules only inside @media (max-width: …): the desktop view stays as it was.
 */

/* ------------------------------------------------------------------ all widths */

/* shop link of the main menu: script.js of the child theme put the cart icon and a second link into the link;
   the text is a span now (a link inside a link is invalid HTML), same size as that inner link */
#primary-menu .shoplink .micro-shoplink-text { display: inline-block; padding: 0 20px; line-height: 80px; }

/* carousel without JavaScript: the pictures below each other (owl.carousel.css hides .owl-carousel until it is built) */
html:not(.js) .lgx-carousel .item img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------ phones (theme breakpoint 767px) */

@media (max-width: 767px) {
  /* footer bar: 11px links and copyright of the theme -> 13px */
  .footer-bar .li-agb-menu, .footer-bar .li-agb-menu-ohne, .footer-bar .copyright-footer { font-size: 13px; }
  /* product tables: 10px text of the theme -> 12px */
  .entry-content th, .entry-content td { font-size: 12px; }
}

/* very small phones: wide tables scroll sideways instead of widening the page (WordPress: 332px at 320px) */
@media (max-width: 359px) {
  .entry-content table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* phones and tablets (GeneratePress mobile/tablet up to 1024px): taller tap targets in the footer */
@media (max-width: 1024px) {
  #footer-widgets .menu a, #footer-widgets .text-footer-kontakt a { display: inline-block; padding: 4px 0; }
  .footer-bar li a { display: inline-block; padding: 8px 0; }
}