/* ============================================================================
   GeneratePress Child Theme — mobile.css
   Print, Media Mobile/Tablet/PC queries, MEDIA PRINT ONLY
   ============================================================================ */

/* PRINT
   ========================================================================== */
.print-only,
.print-footer {
  display: none;
}

/* ==========================================================================
   ==========================================================================
   MEDIA MOBILE ONLY
   ==========================================================================
   ========================================================================== */

/* Scanado page design
   ========================================================================== */
@media only screen and (max-width: 768px) {
  .s5o-h1 {
    font-size: 1.75rem;
    line-height: 1.75rem;
    hyphens: none;
  }

  .s5o-h2 {
    font-size: 1.625rem;
    line-height: 1.625rem;
    hyphens: none;
  }

  .s5o-h3 {
    font-size: 1.625rem;
    line-height: 1.625rem;
    hyphens: none;
  }

  .s5o-h4 {
    font-size: 1.5rem;
    line-height: 1.5rem;
    hyphens: none;
  }

  .s5o-h5 {
    font-size: 1.25rem;
    line-height: 1.25rem;
    hyphens: none;
  }

  .s5o-h6 {
    font-size: 1.25rem;
    line-height: 1.25rem;
    hyphens: none;
  }

  h1 {
    margin-top: 1rem;
    margin-right: 4px;
    margin-left: 4px;
  }

  .s5o-hero .s5o-h1 {
    padding: 0.2em;
  }

  .s5o-hero .s5o-h4 {
    padding: 0.2em;
  }

  .gb-inside-container {
    padding-right: 8px;
    padding-left: 8px;
  }

  .entry-content > .gb-container,
  .site-footer .s5o-footer-products,
  .breadcrumb-bar .grid-container,
  .site-info .inside-site-info.grid-container {
    padding-right: 4px;
    padding-left: 4px;
  }

  .entry-content > .gb-container.woms-container {
    padding-right: 0;
    padding-left: 0;
  }

  .inside-site-info .copyright-bar {
    text-align: center;
  }

  .top-bar {
    display: none;
  }

  .s5o-col2 {
    column-gap: 0;
    column-count: 1;
  }

  /* Topbar
   ========================================================================== */
  .secondary-navigation {
    display: none;
  }

  /* MOD: RankMath TOC
   ========================================================================== */
  .rank-math-review-image img {
    width: 25%;
  }
  .rank-math-review-data p {
    margin-bottom: 0.5rem;
  }

  /* MOD Zammad - Chat
   ========================================================================== */
  .zammad-chat.zammad-chat-is-open {
    height: 75% !important;
  }
  .open-zammad-chat {
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem !important;
  }

  /* s5o product
   ========================================================================== */
  .woms-price.table > tbody > tr {
    margin: 0 !important;
    padding: 0.5rem !important;
  }

  .woms-price.table > tbody > tr > td {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1rem;
  }

  .woms-price.ui.table:not(.unstackable) > thead {
    display: none !important;
  }

  /* BLOCK Productline
   ========================================================================== */
  .s5o-productline .wp-block-columns:where(.is-layout-flex) {
    gap: 12px !important;
  }
  .s5o-productline .tpgb-relative-block {
    width: auto;
  }
}

/* ==========================================================================
   ==========================================================================
   MEDIA MOBILE + TABLET
   ==========================================================================
   ========================================================================== */

@media (max-width: 1024px) {
  /* Menus
   ========================================================================== */
  .main-navigation a,
  .main-navigation .menu-toggle,
  .main-navigation .menu-bar-items {
    font-size: 1.625rem;
  }

  /* other
   ========================================================================== */
  #mobile-header .ico-s5o-local-grocery-store {
    margin-right: 1rem;
  }
  #mobile-header .icon-menu-bars,
  #mobile-header .menu-bar-items a {
    font-size: 1.75rem !important;
  }
  #mobile-header .menu-bar-items p {
    margin-bottom: 0 !important;
  }
}

/* ==========================================================================
   ==========================================================================
   MEDIA TABLET ONLY
   ==========================================================================
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
  .s5o-header-slogan {
    display: none;
  }

  #mega-menu-wrap-primary
    #mega-menu-primary
    > li.mega-menu-item
    > a.mega-menu-link {
    font-size: 1.25rem !important;
  }
}

/* ==========================================================================
   ==========================================================================
   MEDIA TABLET + PC
   ==========================================================================
   ========================================================================== */

@media (min-width: 769px) {
  /* Menus
   ========================================================================== */
  /* Adding buttons in primary navigation*/
  .main-navigation .main-nav ul li.nav-button a {
    margin: auto 1rem;
    background: var(--s5o-cta-primary)
      /* COLMIG: was s5o-c-yellow-1 (1:1 match) */;
    color: black;
    line-height: 45px;
  }

  .s5o-infobox {
    position: relative;
    margin-left: 4px;
    padding: 8px 16px 8px 16px;
  }

  .s5o-infobox.col {
    margin-left: 0;
    padding: 8px 8px 8px 8px;
    font-size: 1rem;
  }

  .s5o-arrow {
    border: 1px solid var(--s5o-neutral-grey-100);
    border-radius: 0.28571429rem;
    background: var(--s5o-neutral-frost);
  }

  .s5o-arrow--top {
    position: relative;
  }

  .s5o-arrow--top:after,
  .s5o-arrow--top:before {
    display: block;
    position: absolute;
    bottom: 100%;
    border: solid transparent;
    width: 0;
    height: 0;
    pointer-events: none;
    content: " ";
  }

  .s5o-arrow--top:after {
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: var(--s5o-neutral-frost);
  }

  .s5o-arrow--top:before {
    left: 50%;
    margin-left: -11px;
    border-width: 11px;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: var(--s5o-neutral-grey-100);
  }

  .s5o-arrow--right {
    position: relative;
  }

  .s5o-arrow--right:after,
  .s5o-arrow--right:before {
    display: block;
    position: absolute;
    left: 100%;
    border: solid transparent;
    width: 0;
    height: 0;
    pointer-events: none;
    content: " ";
  }

  .s5o-arrow--right:after {
    top: 50%;
    margin-top: -10px;
    border-width: 10px;
    border-color: rgba(255, 255, 255, 0);
    border-left-color: var(--s5o-neutral-frost);
  }

  .s5o-arrow--right:before {
    top: 50%;
    margin-top: -11px;
    border-width: 11px;
    border-color: rgba(255, 255, 255, 0);
    border-left-color: var(--s5o-neutral-grey-100);
  }

  .s5o-arrow--bottom {
    position: relative;
  }

  .s5o-arrow--bottom:after,
  .s5o-arrow--bottom:before {
    display: block;
    position: absolute;
    top: 100%;
    border: solid transparent;
    width: 0;
    height: 0;
    pointer-events: none;
    content: " ";
  }

  .s5o-arrow--bottom:after {
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: var(--s5o-neutral-frost);
  }

  .s5o-arrow--bottom:before {
    left: 50%;
    margin-left: -11px;
    border-width: 11px;
    border-color: rgba(255, 255, 255, 0);
    border-top-color: var(--s5o-neutral-grey-100);
  }

  .s5o-arrow--left {
    position: relative;
    margin-left: 0 !important;
  }

  .s5o-arrow--left:after,
  .s5o-arrow--left:before {
    display: block;
    position: absolute;
    top: 22px;
    left: -21px;
    border: solid transparent;
    width: 0;
    height: 0;
    pointer-events: none;
    content: " ";
  }

  .s5o-arrow--left:after {
    margin-top: -11px;
    border-width: 11px;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: var(--s5o-neutral-frost);
  }

  .s5o-arrow--left:before {
    margin-top: -10px;
    border-width: 10px;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: var(--s5o-neutral-grey-100);
  }

  .s5o-arrow-nb {
    border: 0 !important;
  }

  .s5o-arrow-nb.s5o-arrow--top:before {
    border-bottom-color: var(--s5o-neutral-frost) !important;
  }

  .s5o-arrow-nb.s5o-arrow--left:before {
    border-right-color: var(--s5o-neutral-frost) !important;
  }
}

/* ==========================================================================
   ==========================================================================
   MEDIA PRINT ONLY
   ==========================================================================
   ========================================================================== */
@media print {
  /* 1. Page Setup & Global Defaults */
  @page {
    size: A4 portrait;
    margin: 1cm;
  }

  html {
    font-size: 8pt !important;
    line-height: 8pt !important;
  }

  /* Force block display and visible overflow to prevent Firefox from 
     cutting off content or failing to print multiple pages */
  html,
  body,
  #page,
  .site {
    overflow: visible !important;
    display: block !important;
    background: white !important;
    color: black !important;
    margin: 0;
  }

  /* 2. Visibility Control: Elements to Hide */
  .no-print,
  .header-widget,
  .main-navigation,
  #mobile-header,
  .site-footer > div:not(.breadcrumb-bar),
  .sidebar,
  .inside-right-sidebar,
  .inside-left-sidebar,
  .top-bar,
  .footer-bar,
  .s5o-chat-tooltip,
  .s5o-header-slogan,
  #vat-mode-label::before,
  #vat-mode-label::after {
    display: none !important;
  }

  .print-only {
    display: block !important;
  }

  /* 3. Header Construction */
  header,
  .site-header,
  #masthead {
    display: block !important;
    position: relative !important; /* Disables sticky/fixed behavior for print flow */
    float: none !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 1cm !important;
  }

  .inside-header {
    display: block !important;
    padding: 0 !important;
    margin: 0 auto !important;
    text-align: center !important; /* Key for centering content */
  }

  .site-logo {
    display: block !important;
    margin: 0 auto 0 auto !important; /* Centers the container itself */
    text-align: center !important;
  }

  .site-logo img {
    height: 1cm !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto !important; /* Key: Centers the image inside the anchor/div */
  }

  /* 4. Layout & Content Width */
  .site-content,
  .content-area,
  .inside-article {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #page {
    margin-bottom: 2cm !important;
  }

  .entry-header {
    margin-top: 0 !important;
  }

  .wp-block-spacer {
    height: 0.5cm !important;
  }

  /* 5. Typography, Links & Images */
  h1,
  h2,
  h3 {
    page-break-after: avoid;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: black;
    font-weight: bold;
  }

  h1 {
    font-size: 14pt;
  }
  h2 {
    font-size: 12pt;
  }
  h3,
  h4,
  h5,
  h6 {
    font-size: 10pt;
  }

  a {
    color: black;
  }

  .site-main th,
  .site-main td {
    padding: 0 1pt !important;
  }

  /* Append URL after links for reference on paper */
  .site-main a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 6pt;
  }

  .site-main img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
  }

  /* 6. Component Specific Styles (Scanado/S5O) */

  /* Breadcrumb Bar */
  .breadcrumb-bar {
    display: block !important;
    color: black !important;
    background-color: white !important;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding: 4pt 0;
  }

  .breadcrumb-bar p a {
    color: black !important;
    background-color: white !important;
    text-decoration: none !important;
  }

  /* VAT Mode Label */
  #vat-mode-label {
    padding: 0;
    font-weight: bold;
    display: block;
  }

  /* Pricing Accordion Logic */
  .ui.accordion.s5o-price-list .title:not(.active) {
    display: none; /* Hide collapsed accordion tabs to save space */
  }

  .ui.accordion.s5o-price-list .title {
    padding: 4pt !important;
  }

  .ui.accordion.s5o-price-list .title.active {
    color: black !important;
    background-color: white !important;
  }

  .ui.accordion.s5o-price-list h5 {
    padding: 0 !important;
    border-bottom: 2px solid black;
    background-color: inherit !important;
    color: black !important;
  }

  /* 7. Footer Construction */
  footer.site-info {
    color: black !important;
    background-color: white !important;
    height: 1cm !important;
    border-top: 1px solid var(--s5o-print-grey);
  }

  footer .inside-site-info {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: unset !important;
    display: block !important;
    padding: 0;
  }

  footer .copyright-bar {
    margin: 0 !important;
  }
}