/*
Theme Name: SCG Clone
Theme URI: https://localhost:8083
Author: Codex
Author URI: https://openai.com
Description: Custom WordPress theme that recreates the SCG VLXD visual system with dynamic content, WooCommerce templates, blog templates, and project templates.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.1
Text Domain: scg-clone
*/

/* Source parity overrides */
body {
  background-color: #ffffff;
  background-image: url("/wp-content/uploads/2024/04/body-bg.svg");
  background-repeat: repeat;
  background-position: top center;
}

.tm-headerbar-top.tm-headerbar-default,
.tm-header .uk-navbar-container:not(.uk-navbar-transparent),
.tm-header-mobile .uk-navbar-container {
  background-color: rgba(255, 255, 255, 0.92);
  background-image: url("/wp-content/uploads/2024/04/body-bg.svg");
  background-repeat: repeat;
  background-position: top center;
}

.uk-h2 {
  width: fit-content;
  margin: 0 auto;
  text-align: center;
}

.uk-h2::after {
  content: "";
  width: 80%;
  height: 3px;
  background-color: #ec1c24;
  display: block;
  margin: 0 auto;
}

#page\#5 .uk-panel.uk-h2,
#page\#5 .uk-panel.uk-h2 h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 480px) {
  .uk-h2::after {
    height: 1.5px;
  }
}
.uk-navbar-nav > li > a::before {
    padding: 0 50px;
    border-radius: 100px 20px;
    left: -20px;
    right: -20px;
}
/* Header gradient parity with source */
.uk-navbar-container .uk-container {
  background: rgb(233, 35, 43) !important;
  background: linear-gradient(
    0deg,
    rgba(233, 35, 43, 1) 0%,
    rgba(156, 64, 66, 1) 33%,
    rgba(156, 64, 66, 1) 66%,
    rgba(227, 37, 38, 1) 100%
  ) !important;
  border-radius: 100px 20px !important;
}

@media (max-width: 960px) {
  .uk-navbar-container .uk-container {
    background: none !important;
    border-radius: 0 !important;
  }
}

/* Home products: use same card system as shop and equalize via flex (no fixed height) */
#page\#8 .uk-slider-items {
  align-items: stretch;
}

#page\#8 .uk-slider-items > li {
  display: flex;
}

#page\#8 .uk-slider-items > li > .el-item {
  width: 100%;
  display: flex;
}

#page\#8 .uk-slider-items > li .scg-shop-product-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#page\#8 .scg-shop-product-title {
  margin-top: 8px;
}

#page\#8 .scg-shop-product-price {
  margin-top: auto;
  padding-top: 10px;
}

/* Home projects: equal height cards + 2 items/tablet without fixed heights */
#page\#12 .uk-slider-items,
#page\#14 .uk-slider-items,
#page\#16 .uk-slider-items {
  align-items: stretch;
}

#page\#12 .uk-slider-items > li,
#page\#14 .uk-slider-items > li,
#page\#16 .uk-slider-items > li {
  display: flex;
}

#page\#12 .uk-slider-items > li .el-item,
#page\#14 .uk-slider-items > li .el-item,
#page\#16 .uk-slider-items > li .el-item {
  width: 100%;
  display: flex;
}

#page\#12 .uk-slider-items > li .uk-card,
#page\#14 .uk-slider-items > li .uk-card,
#page\#16 .uk-slider-items > li .uk-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

#page\#12 .uk-inline-clip,
#page\#14 .uk-inline-clip,
#page\#16 .uk-inline-clip {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

#page\#12 .uk-inline-clip .el-image,
#page\#12 .uk-inline-clip img,
#page\#14 .uk-inline-clip .el-image,
#page\#14 .uk-inline-clip img,
#page\#16 .uk-inline-clip .el-image,
#page\#16 .uk-inline-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#page\#12 .el-title,
#page\#14 .el-title,
#page\#16 .el-title {
  margin-top: 10px !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
  flex: 1;
}

/* News section: harmonize featured + side image ratios */
#page\#27 .el-item > a > .el-image,
#page\#27 .el-item > a > img,
#page\#27 .el-item > a picture img {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

#page\#29 .uk-inline-clip {
  width: 100px;
  height: 75px;
  overflow: hidden;
  border-radius: 6px;
}

#page\#29 .uk-inline-clip .el-image,
#page\#29 .uk-inline-clip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

#page\#29 .el-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

/* Home intro stats: fix mobile responsiveness */
@media (max-width: 639px) {
  #thongtin_scg .uk-grid {
    margin-left: 0 !important;
    row-gap: 12px;
  }

  #thongtin_scg .uk-grid > * {
    width: 100% !important;
    padding-left: 0 !important;
  }

  #thongtin_scg .uk-card {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
  }

  #thongtin_scg .el-title.uk-text-lead {
    font-size: 24px;
    line-height: 1.25;
  }
}

/* Home ecosystem block: tablet should render 2 items per row */
@media (min-width: 640px) and (max-width: 959px) {
  #page\#6 .uk-grid > * {
    width: 50% !important;
  }
}

/* Tablet/mobile offcanvas menu: keep sidebar above sticky header */
#tm-dialog-mobile,
#tm-dialog-mobile.uk-offcanvas {
  z-index: 2200 !important;
}

#tm-dialog-mobile .uk-offcanvas-bar {
  z-index: 2201 !important;
}

body.uk-offcanvas-page .tm-header-mobile [uk-sticky],
body.uk-offcanvas-page .tm-header-mobile .uk-navbar-sticky,
body.uk-offcanvas-page .tm-header-mobile .uk-navbar-container {
  z-index: 1 !important;
}

/* Keep YOOtheme header placeholder disabled to avoid top blank gap */
.tm-header-placeholder {
  display: none !important;
}

.tm-header > [uk-sticky] > .uk-navbar-container {
  min-height: 72px;
}

.tm-header-mobile > [uk-sticky] > .uk-navbar-container {
  min-height: 64px;
}

/* Home hero: remove hardcoded top gap from source fragment */
body.home #page\#2,
body.front-page #page\#2 {
  margin-top: 0 !important;
}