/* ZICOM website red background */
body {
    background-color: #990015;
    background-image: linear-gradient(135deg, #8b0012 0%, #c40020 50%, #76000d 100%);
    background-attachment: fixed;
}

/* Keep website content white */
.container-component,
.container-sidebar-left,
.container-sidebar-right,
.card {
    background-color: #ffffff;
}

/* Add spacing inside the white content areas */
.container-component {
    padding: 20px 25px !important;
    box-sizing: border-box;
}

.container-sidebar-right {
    padding: 15px;
}

/* Fix spacing for Joomla article content */
.container-component > main,
.container-component main,
.com-content-article {
    padding-left: 25px !important;
    padding-right: 25px !important;
}

/* Add spacing inside product article */
.container-component .com-content-article {
    padding: 20px 25px !important;
    box-sizing: border-box;
}

/* Match original ZICOM website width */
body {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
}

/* Keep red background outside website */
html {
    background-color: #990015;
    background-image: linear-gradient(
        135deg,
        #8b0012 0%,
        #c40020 50%,
        #76000d 100%
    );
    background-attachment: fixed;
}

/* Keep header and navigation inside website width */
.container-header {
    width: 100%;
}

/* Centre the entire Joomla website */
body.site {
    width: 100% !important;
    max-width: 960px !important;
    margin: 0 auto !important;
}

/* Prevent Joomla grid from expanding */
.site-grid {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Keep red background on both sides */
html {
    background: linear-gradient(
        135deg,
        #8b0012 0%,
        #c40020 50%,
        #76000d 100%
    ) fixed !important;
}

/* Align header and main content */
body.site {
    max-width: 960px !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.container-header {
    width: 100% !important;
    box-sizing: border-box;
}

.site-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Align Joomla content with header */
.site-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

.site-grid > * {
    grid-column: 1 !important;
}

/* Remove extra spacing around main content */
.container-component {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Remove Joomla grid padding */
.site-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Align main content with header */
.container-component {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ZICOM Homepage Automatic Slideshow */
.zicom-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}

.zicom-slideshow img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: zicomFade 40s infinite;
}

.zicom-slideshow img:nth-child(1) { animation-delay: 0s; }
.zicom-slideshow img:nth-child(2) { animation-delay: 5s; }
.zicom-slideshow img:nth-child(3) { animation-delay: 10s; }
.zicom-slideshow img:nth-child(4) { animation-delay: 15s; }
.zicom-slideshow img:nth-child(5) { animation-delay: 20s; }
.zicom-slideshow img:nth-child(6) { animation-delay: 25s; }
.zicom-slideshow img:nth-child(7) { animation-delay: 30s; }
.zicom-slideshow img:nth-child(8) { animation-delay: 35s; }

@keyframes zicomFade {
  0%   { opacity: 0; }
  2%   { opacity: 1; }
  12%  { opacity: 1; }
  12.5%, 100% { opacity: 0; }
}

/* ZICOM Homepage Product Grid */
.zicom-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 25px;
}

.zicom-product {
  min-width: 0;
}

.zicom-product h3 {
  font-size: 14px;
  font-weight: 600;
  min-height: 42px;
  margin-bottom: 10px;
}

.zicom-product img {
  width: 100%;
  height: 100px;
  object-fit: contain;
}

.zicom-readmore {
  display: inline-block;
  background: linear-gradient(#60758a, #243746);
  color: white !important;
  padding: 5px 12px;
  font-size: 12px;
  text-decoration: none;
  border-radius: 2px;
}

.zicom-readmore:hover {
  background: #990015;
  color: white !important;
}

@media (max-width: 700px) {
  .zicom-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Align homepage product cards */
.zicom-product {
    text-align: center;
}

.zicom-product h3 {
    text-align: left;
}

.zicom-product img {
    display: block;
    margin: 10px auto 0;
}

.zicom-product .zicom-readmore {
    display: inline-block;
    margin-top: 5px;
}

/* Align header contact information beside ZICOM logo */
.container-topbar {
    position: relative;
    z-index: 1;
    margin-bottom: -35px;
}

.container-topbar .zicom-header-contact {
    text-align: right !important;
    padding: 8px 15px !important;
}

.container-header {
    padding-top: 0 !important;
}

/* Align search box with navigation menu */
.container-header .container-search {
    display: flex;
    align-items: center;
}

.container-header .container-search form {
    margin: 0 !important;
}

.container-header .container-search .mod-finder {
    margin: 0 !important;
}


/* Move header search box upward */
.container-header .container-search {
    transform: translateY(-10px);
}

/* Remove border around About ZICOM module */
.container-bottom-a .card,
.container-bottom-b .card,
.container-main-bottom .card {
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

/* Remove About ZICOM module border */
.container-bottom-a,
.container-bottom-b,
.container-main-bottom {
    border: none !important;
    box-shadow: none !important;
}

.container-bottom-a .mod-custom,
.container-bottom-b .mod-custom,
.container-main-bottom .mod-custom {
    border: none !important;
    box-shadow: none !important;
}

/* Remove border around About ZICOM section */
.main-bottom.card {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.main-bottom.card .card-body {
    border: none !important;
    box-shadow: none !important;
}

/* Hide Joomla article title on QHSE page only */
body.view-article .page-header h1 {
    display: none;
}

/* QHSE page text alignment */
body.view-article .container-component .mod-custom {
    line-height: 1.4;
}

/* QHSE article text */
body.view-article .com-content-article__body p {
    margin-bottom: 10px;
}

/* Keep main navigation menu items on one line */
.container-header .mod-menu {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}

.container-header .mod-menu > li > a {
    padding-left: 3px;
    padding-right: 3px;
    white-space: nowrap;
}

/* Keep the navigation links on one line */
.container-header .container-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.container-header .container-nav .mod-menu {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
}

/* Position search beside Certificates */
@media (min-width: 992px) {
    .container-header .container-nav {
        position: relative;
        padding-right: 0;
    }

    .container-header .container-nav .mod-finder,
    .container-header .container-nav .mod-search {
        position: static;
        margin-left: 10px;
        z-index: 10;
    }

    .container-header .container-nav input[type="search"],
    .container-header .container-nav input[type="text"] {
        width: 90px;
    }

    /* Hide Search text, keep magnifying glass icon */
    .container-header .container-nav .mod-finder button,
    .container-header .container-nav .mod-search button {
        font-size: 0;
    }

    .container-header .container-nav .mod-finder button .icon-search,
    .container-header .container-nav .mod-search button .icon-search {
        font-size: 16px;
    }
}
    .container-header .container-nav {
        position: relative;
        padding-right: 0;
    }


    .container-header .container-nav input[type="search"],
    .container-header .container-nav input[type="text"] {
        width: 125px;
    }
}


/* Keep navigation and Search on the same row */
@media (min-width: 992px) {
    .container-header .container-nav {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    .container-header .container-nav .mod-menu {
        display: flex;
        flex-wrap: nowrap;
        gap: 5px;
    }

    .container-header .container-nav .mod-finder,
    .container-header .container-nav .mod-search {
        position: static !important;
        margin-left: 10px;
        flex-shrink: 0;
    }

    .container-header .container-nav input[type="search"],
    .container-header .container-nav input[type="text"] {
        width: 90px;
    }
}