/*
Theme Name: Astra Lijing
Theme URI: https://lijing.gwmmi.cn/
Description: Child theme for Shanghai Lijing Container Technology Co., Ltd. - Astra parent + Elementor page building. Contains only presentational overrides; every piece of content lives in Elementor data so the client can edit it in the visual editor.
Author: Lijing build
Template: astra
Version: 1.0.0
Text Domain: astra-lijing
*/

/* ============================================================
   1. Design tokens
   ============================================================ */
:root {
  --lj-brand: #175caa;
  --lj-brand-dark: #0e4a8f;
  --lj-dark: #0a1821;
  --lj-slate: #38454a;
  --lj-muted: #6b7a83;
  --lj-line: #e3e8ed;
  --lj-light: #f2f2f2;
  --lj-lighter: #f8f9fb;
  --lj-accent: #f07c22;
  --lj-wrap: 1290px;
  --lj-font: "Mulish", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   2. Typography (matches the reference design language)
   ============================================================ */
body,
.entry-content,
.elementor-widget-text-editor,
.elementor-widget-icon-box {
  font-family: var(--lj-font);
}

body {
  font-size: 18px;
  line-height: 1.65;
  color: var(--lj-slate);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  font-family: var(--lj-font);
  color: var(--lj-dark);
  font-weight: 900;
  margin: 0;
}

.lj-h1 { font-size: 56px; line-height: 1.2; }
.lj-h2 { font-size: 40px; line-height: 1.5; }
.lj-h2-xl { font-size: 60px; line-height: 1.17; }
.lj-h3 { font-size: 30px; line-height: 1.5; }
.lj-h4 { font-size: 22px; line-height: 1.4; }
.lj-lead { font-size: 18px; line-height: 1.65; color: var(--lj-slate); }

/* the classes above sit on the Elementor widget wrapper, so the inner title
   element needs the same metrics */
.lj-h1 .elementor-heading-title { font-size: 56px; line-height: 1.2; }
.lj-h2 .elementor-heading-title { font-size: 40px; line-height: 1.5; }
.lj-h2-xl .elementor-heading-title { font-size: 60px; line-height: 1.17; }
.lj-h3 .elementor-heading-title { font-size: 30px; line-height: 1.5; }
.lj-h4 .elementor-heading-title { font-size: 22px; line-height: 1.4; }
.lj-lead p,
.lj-lead .elementor-widget-container { font-size: 18px; line-height: 1.65; }

@media (max-width: 1024px) {
  .lj-h1, .lj-h1 .elementor-heading-title { font-size: 44px; }
  .lj-h2, .lj-h2 .elementor-heading-title { font-size: 34px; line-height: 1.35; }
  .lj-h2-xl, .lj-h2-xl .elementor-heading-title { font-size: 50px; line-height: 1.4; }
  .lj-h3, .lj-h3 .elementor-heading-title { font-size: 26px; line-height: 1.4; }
}
@media (max-width: 767px) {
  body { font-size: 17px; line-height: 1.6; }
  .lj-h1, .lj-h1 .elementor-heading-title { font-size: 30px; }
  .lj-h2, .lj-h2 .elementor-heading-title { font-size: 22px; line-height: 1.59; }
  .lj-h2-xl, .lj-h2-xl .elementor-heading-title { font-size: 22px; line-height: 1.59; }
  .lj-h3, .lj-h3 .elementor-heading-title { font-size: 20px; line-height: 1.5; }
  .lj-h4, .lj-h4 .elementor-heading-title { font-size: 18px; }
  .lj-lead { font-size: 16px; }
  .lj-lead p { font-size: 16px; }
}

/* ============================================================
   3. Section shell - reference uses 5% gutters capped at 1290px
   ============================================================ */
.lj-sec {
  padding-left: 5% !important;
  padding-right: 5% !important;
}
.lj-sec > .e-con-inner {
  max-width: var(--lj-wrap);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  .lj-sec {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
/* Elementor 4.x prints no .e-con-inner wrapper, so the 1290px content cap is
   done with padding instead: 5% gutters below 1440, centred 1290 above it. */
@media (min-width: 1441px) {
  .lj-sec {
    padding-left: max(5%, calc((100% - var(--lj-wrap)) / 2)) !important;
    padding-right: max(5%, calc((100% - var(--lj-wrap)) / 2)) !important;
  }
}
.lj-bleed { padding-left: 0 !important; padding-right: 0 !important; }
.lj-bleed > .e-con-inner { max-width: none; }

/* ============================================================
   4. Hero - carousel keeps the reference's 1440x675 ratio
   ============================================================ */
.lj-hero { position: relative; overflow: hidden; }
.lj-hero .e-con-inner { padding: 0 !important; }
.lj-hero .elementor-widget-image-carousel { margin: 0 !important; }
.lj-hero .swiper-slide img {
  width: 100%;
  height: 46.875vw;           /* 675 / 1440 - identical ratio to the reference */
  object-fit: cover;
  display: block;
}
.lj-hero .swiper-pagination { bottom: 24px !important; }
.lj-hero .swiper-button-next,
.lj-hero .swiper-button-prev { color: #fff; }

.lj-hero-overlay {
  position: absolute !important;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.lj-hero-overlay a,
.lj-hero-overlay .elementor-widget-button { pointer-events: auto; }
.lj-hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4, 16, 30, .78) 0%, rgba(4, 16, 30, .55) 42%, rgba(4, 16, 30, .12) 72%);
  z-index: -1;
}
.lj-hero-overlay > .e-con-inner { max-width: var(--lj-wrap); margin: 0 auto; padding: 0 5%; }
.lj-hero-title,
.lj-hero-title .elementor-heading-title { color: #fff !important; max-width: 720px; }
.lj-hero-sub,
.lj-hero-sub .elementor-widget-container { color: #dce8f5 !important; max-width: 620px; }

/* centred single-widget rows (Elementor puts justify-content on the element
   itself for nested containers) */
.lj-center { justify-content: center !important; align-items: center !important; }

/* ============================================================
   4b. Layout grids (flex gap + % widths cannot share a row, so
       the repeated card rows are real CSS grids instead)
   ============================================================ */
/* Nested (isInner) Elementor containers are the flex container themselves -
   there is no .e-con-inner wrapper below the top level. */
.lj-grid-2,
.lj-grid-3,
.lj-grid-4 { display: grid !important; align-items: stretch; padding: 0 !important; }
.lj-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.lj-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.lj-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.lj-grid-2 > *,
.lj-grid-3 > *,
.lj-grid-4 > * { width: auto !important; max-width: none; min-width: 0; }

.lj-split { display: grid !important; align-items: center; gap: 60px; padding: 0 !important; }
.lj-split-45 { grid-template-columns: 45fr 55fr; }
.lj-split-40 { grid-template-columns: 40fr 60fr; }
.lj-split-42 { grid-template-columns: 42fr 58fr; }
.lj-split-48 { grid-template-columns: 48fr 52fr; }
.lj-split-55 { grid-template-columns: 55fr 45fr; }
.lj-split-58 { grid-template-columns: 58fr 42fr; }
.lj-split > * { width: auto !important; min-width: 0; }

.lj-foot-grid { display: grid !important; grid-template-columns: 30fr 22fr 20fr 28fr; gap: 40px; align-items: start; padding: 0 !important; }
.lj-foot-grid > * { width: auto !important; min-width: 0; }

@media (max-width: 1024px) {
  .lj-grid-3,
  .lj-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lj-split { grid-template-columns: 1fr !important; gap: 34px; }
  .lj-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .lj-grid-2,
  .lj-grid-3,
  .lj-grid-4,
  .lj-foot-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   5. Cards & grids
   ============================================================ */
.lj-card {
  background: #fff;
  border: 1px solid var(--lj-line);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.lj-card:hover {
  border-color: #cfd9e2;
  box-shadow: 0 14px 34px rgba(10, 24, 33, .09);
  transform: translateY(-2px);
}
.lj-card .elementor-widget-image img { display: block; width: 100%; }
.lj-card .lj-card-title .elementor-heading-title { color: var(--lj-dark); }
.lj-card:hover .lj-card-link .elementor-button-text { color: var(--lj-brand); }

.lj-cat-card .elementor-widget-image img { height: 190px; object-fit: cover; }
.lj-news-card .elementor-widget-image img { height: 210px; object-fit: cover; }
.lj-ind-card .elementor-widget-image img { height: 300px; object-fit: cover; }

@media (max-width: 767px) {
  .lj-cat-card .elementor-widget-image img { height: 180px; }
  .lj-news-card .elementor-widget-image img { height: 200px; }
  .lj-ind-card .elementor-widget-image img { height: 230px; }
}

.lj-card-link .elementor-button {
  background: none !important;
  padding: 0 !important;
  color: var(--lj-brand) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.lj-card-link .elementor-button:hover { color: var(--lj-brand-dark) !important; }

/* ============================================================
   6. Counters (Elementor counter widget in about block)
   ============================================================ */
.lj-counter .elementor-counter-number-wrapper {
  font-size: 44px;
  font-weight: 900;
  color: var(--lj-brand);
  line-height: 1;
  justify-content: flex-start;
}
.lj-counter .elementor-counter-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--lj-muted);
  text-align: left;
  line-height: 1.4;
}
@media (max-width: 767px) {
  .lj-counter .elementor-counter-number-wrapper { font-size: 32px; }
}

/* ============================================================
   7. Icon boxes
   ============================================================ */
.lj-ico .elementor-icon-box-wrapper { padding: 26px 24px; height: 100%; }
.lj-ico .elementor-icon { margin-bottom: 16px; }
.lj-ico { background: #fff; border: 1px solid var(--lj-line); }
.lj-dark-band .lj-ico,
.lj-feature .lj-ico { background: #fff; }
.lj-ico .elementor-icon {
  border-radius: 10px;
  padding: 14px;
  background: rgba(23, 92, 170, .08);
  color: var(--lj-brand) !important;
  font-size: 26px;
}
.lj-ico .elementor-icon svg { fill: var(--lj-brand); }
.lj-ico .elementor-icon-box-title,
.lj-ico .elementor-icon-box-title a { color: var(--lj-dark) !important; }
.lj-dark-band .lj-ico .elementor-icon-box-title { color: #fff !important; }
.lj-ico .elementor-icon-box-description { color: var(--lj-slate); }

/* ============================================================
   8. Dark / image bands
   ============================================================ */
.lj-dark-band .elementor-heading-title { color: #fff; }
.lj-dark-band .lj-lead,
.lj-dark-band .elementor-widget-text-editor { color: #cfdce8; }

.lj-band-bg {
  background-size: cover !important;
  background-position: center !important;
}
.lj-band-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 20, 34, .74);
  z-index: 0;
  pointer-events: none;
}
/* Elementor 4.x containers are flat (no .e-con-inner wrapper), so the overlay
   has to be beaten on the direct children instead - otherwise ::after paints
   over the heading and white text on a white-ish section disappears. */
.lj-band-bg > .e-con-inner,
.lj-band-bg > .e-con,
.lj-band-bg > .elementor-widget { position: relative; z-index: 1; }

/* ============================================================
   9. Buttons
   ============================================================ */
.elementor-button.lj-btn,
.lj-btn .elementor-button {
  font-family: var(--lj-font);
  font-weight: 700;
  border-radius: 0;
  transition: background-color .2s ease, color .2s ease;
}
.lj-btn-ghost .elementor-button {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, .7) !important;
  color: #fff !important;
}
.lj-btn-ghost .elementor-button:hover { background: #fff !important; color: var(--lj-brand) !important; }

/* ============================================================
   10. Header / footer
   ============================================================ */
.lj-header {
  background: #fff;
  border-bottom: 1px solid rgba(10, 24, 33, .07);
}
.lj-header > .e-con-inner { min-height: 80px; height: 80px; flex-wrap: nowrap; }
.lj-header .e-con-inner { flex-wrap: nowrap; }
.lj-header .lj-logo img { max-height: 42px; width: auto; }
.lj-header .hfe-menu-item,
.lj-header .hfe-menu-toggle,
.lj-header .elementor-widget-hfe-navigation-menu a {
  font-family: var(--lj-font);
  font-size: 16px;
  font-weight: 700;
  color: var(--lj-dark);
  white-space: nowrap;
}
.lj-header .hfe-nav-menu .hfe-menu-item:hover,
.lj-header .hfe-nav-menu li.current-menu-item > a { color: var(--lj-brand); }
.lj-header .elementor-widget-button { flex-shrink: 0; }
.lj-header .lj-header-cta .elementor-button { padding: 12px 22px; font-size: 15px; }
/* keep the six-item menu on one line at 1440 */
.lj-header .hfe-nav-menu__layout-horizontal .hfe-nav-menu,
.lj-header .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li { display: flex; flex-wrap: nowrap; }
.lj-header .hfe-nav-menu__layout-horizontal .hfe-nav-menu > li > a.hfe-menu-item {
  padding-left: 9px;
  padding-right: 9px;
  font-size: 15px;
}

.lj-footer { background: #0a1821; color: #aab8c4; }
.lj-footer .elementor-heading-title { color: #fff; font-size: 18px; line-height: 1.4; }
.lj-footer .elementor-widget-text-editor,
.lj-footer .elementor-icon-list-text { color: #8fa0ad; font-size: 15px; line-height: 1.7; }
.lj-footer .elementor-widget-text-editor p { margin: 0 0 8px; }
.lj-footer .lj-foot-links a { display: inline-block; padding: 2px 0; }
.lj-footer a { color: #8fa0ad; text-decoration: none; }
.lj-footer a:hover { color: #fff; }
.lj-footer .elementor-widget-icon-box { margin: 0; }
.lj-copyright { background: #081219; color: #8b9aa6; }
.lj-copyright .elementor-widget-text-editor { color: #8b9aa6; font-size: 15px; }
.lj-copyright .elementor-widget-text-editor p { margin: 0; }

/* ============================================================
   11. Generic page banner
   ============================================================ */
.lj-banner {
  position: relative;
  min-height: 260px;
  background-size: cover !important;
  background-position: center !important;
}
.lj-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 22, 40, .86), rgba(6, 22, 40, .48));
  z-index: 0;
}
.lj-banner > .e-con-inner,
.lj-banner > .e-con,
.lj-banner > .elementor-widget { position: relative; z-index: 1; }
.lj-banner .elementor-heading-title { color: #fff; }
.lj-banner .lj-lead,
.lj-banner .elementor-widget-text-editor { color: #d6e2ee; }

/* ============================================================
   12. Product listing cards
   ============================================================ */
.lj-prod-card .elementor-widget-image img { height: 260px; object-fit: cover; }
@media (max-width: 767px) {
  .lj-prod-card .elementor-widget-image img { height: 220px; }
}

/* ============================================================
   13. Forms (Contact Form 7 inside Elementor shortcode widget)
   ============================================================ */
.lj-form .wpcf7-form p { margin: 0 0 16px; }
.lj-form input[type="text"],
.lj-form input[type="email"],
.lj-form input[type="tel"],
.lj-form select,
.lj-form textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--lj-line);
  border-radius: 0;
  background: #fff;
  font-family: var(--lj-font);
  font-size: 16px;
  color: var(--lj-dark);
}
.lj-form textarea { min-height: 130px; }
.lj-form input:focus,
.lj-form textarea:focus,
.lj-form select:focus { outline: 2px solid rgba(23, 92, 170, .35); border-color: var(--lj-brand); }
.lj-form input[type="submit"] {
  background: var(--lj-brand);
  color: #fff;
  border: 0;
  padding: 15px 30px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--lj-font);
}
.lj-form input[type="submit"]:hover { background: var(--lj-brand-dark); }
.lj-form .wpcf7-not-valid-tip { color: #b3261e; font-size: 14px; }
.lj-form .wpcf7-response-output { border: 0; padding: 10px 0; font-weight: 600; }
.lj-form .wpcf7-spinner { display: none; }
.lj-form .lj-row { display: flex; gap: 16px; flex-wrap: wrap; }
.lj-form .lj-row > span { flex: 1 1 200px; }
/* two-column form: short fields side by side, long fields full width */
.lj-form form.wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.lj-form .lj-field { min-width: 0; }
.lj-form .lj-field:has(textarea),
.lj-form .lj-field:has(select),
.lj-form form.wpcf7-form p { grid-column: 1 / -1; }
.lj-form .lj-field br { display: none; }

/* ============================================================
   14. Blog list (shortcode output) & posts
   ============================================================ */
.lj-posts-grid { display: grid; grid-template-columns: repeat(var(--lj-cols, 3), minmax(0, 1fr)); gap: 30px; }
@media (max-width: 1024px) { .lj-posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lj-posts-grid { grid-template-columns: minmax(0, 1fr); } }
.lj-post-card { background: #fff; border: 1px solid var(--lj-line); display: flex; flex-direction: column; }
.lj-post-card img { width: 100%; height: 210px; object-fit: cover; display: block; }
.lj-post-card .lj-post-body { padding: 22px 24px 26px; }
.lj-post-card .lj-post-date { font-size: 14px; color: var(--lj-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.lj-post-card h3 { font-size: 20px; line-height: 1.4; margin: 8px 0 10px; }
.lj-post-card h3 a { color: var(--lj-dark); text-decoration: none; }
.lj-post-card h3 a:hover { color: var(--lj-brand); }
.lj-post-card p { font-size: 16px; color: var(--lj-slate); margin: 0 0 14px; }
.lj-post-card .lj-more { font-size: 15px; font-weight: 700; color: var(--lj-brand); text-decoration: none; }

.lj-pagination { display: flex; gap: 8px; justify-content: center; padding: 30px 0 0; }
.lj-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--lj-line); color: var(--lj-dark); text-decoration: none; font-weight: 700;
}
.lj-pagination .page-numbers.current,
.lj-pagination .page-numbers:hover { background: var(--lj-brand); border-color: var(--lj-brand); color: #fff; }

/* ============================================================
   15. Astra chrome clean-up on Elementor pages
   ============================================================ */
.elementor-page .entry-header,
.elementor-page .ast-title-bar { display: none; }
.elementor-page .site-content > .ast-container { padding: 0; max-width: none; }
.elementor-page #content .ast-container { padding: 0; max-width: none; }
.elementor-page .entry-content > .elementor { margin: 0; }
.ast-separate-container .elementor-page .site-content,
.ast-plain-container .elementor-page .site-content { padding: 0; }

.elementor-widget-image img { max-width: 100%; height: auto; }

/* ============================================================
   16. Responsive tweaks
   ============================================================ */
@media (max-width: 767px) {
  .lj-header > .e-con-inner { min-height: 70px; }
  .lj-banner { min-height: 200px; }
}