/*
 * Own CSS of schoenberger-diy.de, 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.
 */

/* ------------------------------------------------------------------ site.js (all widths) */

/* sticky menu (GP Premium "both"): stays at the top while scrolling; shadow from GP Premium's .is_stuck */
.sticky-enabled #site-navigation { position: sticky; top: 0; z-index: 500; }

/* catalogue: picture + text "Katalog öffnen" as one link to the PDF (was a Real3D flipbook in a lightbox; same look) */
.micro-flipbook a { text-decoration: none; }
.micro-flipbook img { max-width: 100%; height: auto; }
.micro-flipbook a:hover span, .micro-flipbook a:focus span { text-decoration: underline; }

/* ------------------------------------------------------------------ phones and tablets
 * GeneratePress is responsive already: only what WordPress did wrong on small screens. */

/* tablets: the footer menu is centred with "float + left: 50%"; the list box reaches 160px past the screen
   (WordPress: horizontal scrolling at 768px). Clip it: the links stay where they are. */
@media (min-width: 768px) and (max-width: 1199px) {
  #sgefooter .footercontact .menu { overflow-x: clip; }
}

/* phones: wide tables (Registrierungen) scroll sideways inside the page instead of widening it */
@media (max-width: 767px) {
  #main table.tg { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* e-mail and phone link of the footer: 19px high -> at least 24px tap target */
  #sgefooter .footercontact .kontaktdaten .email a, #sgefooter .footercontact .kontaktdaten .phone a { display: inline-block; padding-top: 3px; padding-bottom: 3px; }
}