/* theme.css — WordPress-only additions (inner pages, hero text overlay, honeypot, admin bar, star rating).
   Loaded after the component CSS and BEFORE responsive.css. */

/* ---------- inquiry honeypot (hidden from humans) ---------- */
.ycx-hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- hero slide text overlay (only rendered when a slide has text) ---------- */
.index_b_lunbo .swiper-slide{position:relative}
.ycx_hero_text{position:absolute;inset:0;display:flex;align-items:center;pointer-events:none;z-index:1}
.ycx_hero_text .wrap{flex:0 1 auto}
.ycx_hero_inner{max-width:calc(720px + 10vw);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.25);padding:0 10vw}
.ycx_hero_small{margin-bottom:12px;letter-spacing:.02em}
.ycx_hero_title{line-height:1.15;margin-bottom:16px}
.ycx_hero_sub{line-height:1.6;margin-bottom:28px;opacity:.95}
.ycx_hero_btn{pointer-events:auto;text-shadow:none}
.ycx_hero_btn .public_page_btn1,.ycx_404 .public_page_btn1{display:inline-block}
@media (max-width:767px){
  .ycx_hero_inner{padding:0 18vw}
  .ycx_hero_title{font-size:18px;margin-bottom:6px}
  .ycx_hero_small{font-size:12px;margin-bottom:4px}
  .ycx_hero_sub{display:none}
  .ycx_hero_btn .public_page_btn1{height:28px;line-height:26px;font-size:12px;padding:0 12px}
}

/* ---------- partial star rating (1–4 stars clip the 5-star image) ---------- */
.ycx_stars{display:inline-block;overflow:hidden;vertical-align:middle;white-space:nowrap}
.ycx_stars img{max-width:none}

/* ---------- admin bar offsets for fixed headers ---------- */
.admin-bar .pc_header_bot.active{top:32px}
.admin-bar .mobile_header_top{top:32px}
@media screen and (max-width:782px){
  .admin-bar .mobile_header_top{top:46px}
}

/* ---------- inner pages (page.php / index.php / 404.php) ---------- */
.ycx_page_banner{background:linear-gradient(120deg,var(--hue-dark) 0%,var(--hue) 55%,var(--hue-2) 100%);color:#fff;padding:60px 0 56px}
.ycx_page_banner .title{margin:0;line-height:1.2;font-weight:400}
.ycx_page_banner .crumbs{margin-top:12px;font-size:14px;opacity:.9}
.ycx_page_banner .crumbs a{color:#fff}
.ycx_page_banner .crumbs a:hover{text-decoration:underline}
.ycx_page_main{padding-top:60px;padding-bottom:80px}
.ycx_entry{color:#444;font-size:16px;line-height:1.8;word-wrap:break-word}
.ycx_entry>*:first-child{margin-top:0}
.ycx_entry h1,.ycx_entry h2,.ycx_entry h3,.ycx_entry h4,.ycx_entry h5,.ycx_entry h6{font-family:"Onest-Bold","Inter-Bold",Arial,sans-serif;font-weight:400;color:#222;line-height:1.3;margin:1.6em 0 .6em}
.ycx_entry h1{font-size:36px}.ycx_entry h2{font-size:30px}.ycx_entry h3{font-size:24px}.ycx_entry h4{font-size:20px}.ycx_entry h5,.ycx_entry h6{font-size:17px}
.ycx_entry p{margin:0 0 1.2em}
.ycx_entry a{color:var(--hue)}
.ycx_entry a:hover{text-decoration:underline}
.ycx_entry ul,.ycx_entry ol{margin:0 0 1.2em;padding-left:1.6em}
.ycx_entry ul{list-style:disc}.ycx_entry ol{list-style:decimal}
.ycx_entry li{margin-bottom:.4em}
.ycx_entry img{max-width:100%;height:auto}
.ycx_entry figure{margin:0 0 1.4em}
.ycx_entry figcaption{font-size:14px;color:#64748b;text-align:center;margin-top:6px}
.ycx_entry blockquote{margin:0 0 1.4em;padding:14px 22px;border-left:4px solid var(--hue);background:#f5f8fc;color:#555}
.ycx_entry table{width:100%;border-collapse:collapse;margin:0 0 1.4em}
.ycx_entry th,.ycx_entry td{border:1px solid #ddd;padding:10px 12px;text-align:left}
.ycx_entry th{background:#f5f8fc}
.ycx_entry iframe,.ycx_entry video{max-width:100%}
.ycx_entry .alignleft{float:left;margin:0 1.5em 1em 0}
.ycx_entry .alignright{float:right;margin:0 0 1em 1.5em}
.ycx_entry .aligncenter{margin-left:auto;margin-right:auto}
.ycx_entry .alignwide,.ycx_entry .alignfull{max-width:100%}
.ycx_entry::after{content:"";display:table;clear:both}
.ycx_entry .wp-block-button__link{background:var(--hue);color:#fff;border-radius:4px;padding:12px 28px;text-decoration:none}
.ycx_meta{color:#64748b;font-size:14px;margin-bottom:24px}

/* post lists (blog, archive, search) */
.ycx_list{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.ycx_card{background:#fff;border:1px solid #eee;border-radius:6px;overflow:hidden;transition:box-shadow .3s}
.ycx_card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08)}
.ycx_card .img_box{display:block;aspect-ratio:4/3;overflow:hidden;background:#f0f4f9}
.ycx_card .img_box img{width:100%;height:100%;object-fit:cover}
.ycx_card:hover .img_box img{transform:scale(1.05)}
.ycx_card .bot_box{padding:20px 22px 24px}
.ycx_card .title{font-size:18px;line-height:1.4;margin:0 0 8px;font-weight:400}
.ycx_card .title a{color:#222}
.ycx_card .title a:hover{color:var(--hue)}
.ycx_card .date{font-size:14px;color:#64748b;margin-bottom:10px}
.ycx_card .text{font-size:15px;color:#666;line-height:1.6}
.ycx_pagination{margin-top:50px;text-align:center}
.ycx_pagination .page-numbers{display:inline-block;min-width:40px;height:40px;line-height:40px;padding:0 12px;margin:0 3px;border:1px solid #ddd;border-radius:4px;color:#444}
.ycx_pagination .page-numbers.current,.ycx_pagination a.page-numbers:hover{background:var(--hue);border-color:var(--hue);color:#fff}
.ycx_empty{text-align:center;color:#666;padding:40px 0}
.ycx_search_form{display:flex;max-width:520px;margin:24px auto 0}
.ycx_search_form input{flex:1;height:46px;border:1px solid #ccc;border-right:0;padding:0 14px;font-size:15px;border-radius:4px 0 0 4px}
.ycx_search_form button{height:46px;padding:0 22px;border:0;background:var(--hue);color:#fff;font-size:15px;border-radius:0 4px 4px 0}
.ycx_404{text-align:center;padding:40px 0 20px}
.ycx_404 .num{font-size:120px;line-height:1;color:var(--hue);font-family:"Onest-Bold",Arial,sans-serif}
.ycx_404 .tip{font-size:18px;color:#555;margin:16px 0 28px}
.ycx_post_nav{display:flex;justify-content:space-between;gap:20px;margin-top:40px;padding-top:24px;border-top:1px solid #eee;font-size:15px}
.ycx_post_nav a{color:var(--hue)}
@media (max-width:1024px){.ycx_list{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){
  .ycx_list{grid-template-columns:1fr}
  .ycx_page_banner{padding:36px 0 32px}
  .ycx_page_banner .title{font-size:26px}
  .ycx_page_main{padding-top:36px;padding-bottom:50px}
  .ycx_entry h1{font-size:28px}.ycx_entry h2{font-size:24px}.ycx_entry h3{font-size:20px}
  .ycx_404 .num{font-size:80px}
}

/* ---------- keep layout stable when the user uploads images with other proportions ----------
   (ratios = the original images, so the default look is unchanged; other images are cropped to fit) */
.index_b_lunbo a img{aspect-ratio:1918/699;object-fit:cover}
/* 2.2.16: aspect-ratio lives on .img_box in home.css / header.css (keeps empty slots same height) */
.indOne2_01_item a .img_box img,.header_pro_item .img_box img{object-fit:cover}
.indTwo1_item a .img_box img{aspect-ratio:700/430;object-fit:cover}
.indFour2_item .img_box img{aspect-ratio:345/267;object-fit:cover}
.indThree1_r_01>img{aspect-ratio:700/467;object-fit:cover}
.indSix1_item_02 .img_box img{aspect-ratio:1/1;object-fit:cover}
.indSeven1_r_01_item a .img_box img.ycx-fit{aspect-ratio:1445/1089;object-fit:cover;width:100%}

/* comments */
#comments .comment-list{list-style:none;padding:0}
#comments .comment-body{padding:16px 0;border-bottom:1px solid #eee}
#comments .comment-form input[type=text],#comments .comment-form input[type=email],#comments .comment-form input[type=url],#comments .comment-form textarea{width:100%;max-width:640px;border:1px solid #ccc;border-radius:4px;padding:10px 12px;font-size:15px;display:block}
#comments .comment-form label{display:block;margin-bottom:4px}
#comments .comment-form .comment-form-cookies-consent label{display:inline}
#comments .comment-form input[type=submit]{background:var(--hue);color:#fff;border:0;border-radius:4px;padding:12px 28px;font-size:15px;cursor:pointer}

/* =====================================================================
   Hengyou brand additions (v2.0)
   ===================================================================== */
.public_page_btn2:hover{background:var(--hue-2)}
.public_page_btn1{transition:all .3s}

/* logo + brand name: vertical stack (mark above, Hengyou Chemical below) on navy bar (2.2.25) */
.header_bot_w .logo{width:auto;flex:0 0 auto;max-width:240px}
.header_bot_w .logo a.ycx_brand_link,
.header_bot_w .logo .ycx_brand_link{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;text-decoration:none;line-height:1.15
}
.header_bot_w .logo .ycx_brand_img,
.header_bot_w .logo a img{width:auto;height:46px;display:block;object-fit:contain}
.header_bot_w .logo .ycx_brand_name{
  display:block;color:#fff;font-size:14px;font-weight:600;letter-spacing:.02em;
  white-space:nowrap;line-height:1.15
}
.pc_header_bot.active .header_bot_w .logo .ycx_brand_img,
.pc_header_bot.active .header_bot_w .logo a img{height:38px}
.pc_header_bot.active .header_bot_w .logo .ycx_brand_name{font-size:12px}
.mobile_logo.ycx_brand{display:flex;align-items:center}
.mobile_logo .ycx_brand_link{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;text-decoration:none;line-height:1.1
}
.mobile_logo .ycx_brand_img,
.mobile_logo img{height:28px;width:auto;display:block;object-fit:contain}
.mobile_logo .ycx_brand_name{
  display:block;color:#fff;font-size:10px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;line-height:1.15
}
/* 2.2.27: footer brand stack sized in footer.css; keep override light */
.footer_logo{width:auto;max-width:11rem}
@media screen and (min-width:1025px){
  .header_bot_r{width:auto;flex:1 1 auto;margin-left:28px}
}
@media screen and (min-width:1025px) and (max-width:1410px){
  .header_bot_w .logo{width:auto;max-width:200px}
  .header_bot_w .logo .ycx_brand_img,
  .header_bot_w .logo a img{height:42px}
  .header_bot_w .logo .ycx_brand_name{font-size:13px}
}

/* hero overlay: light scheme = white text on a navy fade; dark scheme = navy text near the top of a light image */
.ycx_hero_light .ycx_hero_text{background:linear-gradient(90deg,rgba(6,29,66,.78) 0%,rgba(6,29,66,.55) 38%,rgba(6,29,66,0) 72%)}
.ycx_hero_dark .ycx_hero_text{align-items:flex-start;padding-top:4.2%;background:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.75) 34%,rgba(255,255,255,0) 60%)}
.ycx_hero_dark .ycx_hero_title{max-width:620px}
.ycx_hero_dark .ycx_hero_inner{color:var(--hue);text-shadow:none}
.ycx_hero_dark .ycx_hero_small{color:var(--hue-2)}
.ycx_hero_dark .ycx_hero_sub{color:#3d4b61;max-width:540px}
.ycx_hero_light .ycx_hero_btn .public_page_btn1{background:var(--hue-2);border-color:var(--hue-2);color:#fff}
.ycx_hero_light .ycx_hero_btn .public_page_btn1:hover{background:#fff;border-color:#fff;color:var(--hue)}
.ycx_hero_dark .ycx_hero_btn .public_page_btn1{background:var(--hue);color:#fff}
.ycx_hero_dark .ycx_hero_btn .public_page_btn1:hover{background:var(--hue-2);border-color:var(--hue-2)}
.ycx_hero_small{text-transform:uppercase;letter-spacing:.08em;font-size:clamp(.75rem,.6rem + .5vw,1.125rem)}
.ycx_hero_title{font-size:clamp(1.25rem,.7rem + 2.2vw,3rem)}
@media (max-width:767px){
  .ycx_hero_inner{padding:0 15vw}
  .ycx_hero_dark .ycx_hero_text{padding-top:3%}
  .ycx_hero_dark .ycx_hero_title{font-size:15px}
  .ycx_hero_btn{display:none}
}

/* products: inactive category button */
.indOne1_r_01 .item:not(.hover):hover{background:var(--hue-2)}

/* capacity: text highlights instead of big numbers */
.indFour1_item.is-text .number{font-size:clamp(1.25rem,.95rem + 1.25vw,2.25rem);line-height:1.2;min-height:1.2em}
.indFour1_item.is-text{padding:clamp(1rem,.8rem + .8vw,1.75rem) 12px;border:1px solid #dfe5ee;border-radius:8px;background:#fff;transition:box-shadow .3s,border-color .3s}
.indFour1_item.is-text:hover{border-color:var(--hue-2);box-shadow:0 10px 24px rgba(11,47,102,.08)}

/* why choose us: up to 6 items */
.indThree1_l_01{row-gap:clamp(.9rem,.75rem + .6vw,1.4rem)}
.indThree1_l_01 .item .icon{width:clamp(2.5rem,2.3rem + .8vw,3.25rem)}
.indThree1_l_01 .item .r_box{width:calc(100% - clamp(2.5rem,2.3rem + .8vw,3.25rem))}
.indThree1_l_01 .item .r_box .text{opacity:.85}
.indThree1_r_01{border-radius:6px}

/* honors: text badges */
.ycx_badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ycx_badge{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid #c9d4e5;border-radius:999px;background:#fff;color:var(--hue);font-size:14px;line-height:1.2}
.ycx_badge svg{color:var(--hue-2);flex:0 0 auto}
.indFive1_r_01{margin-top:26px}

/* contact banner without photo */
.footer_content1_l .img_box:empty{display:none}

/* footer: company description + opening hours (2.2.28 high-contrast on navy) */
.footer_top1_desc{color:#E8EEF5;line-height:1.7;padding-top:12px;max-width:360px}
.footer_top1_02 .item .ycx_icon_clock{width:clamp(1.75rem,1.712rem + .16vw,1.875rem);color:#E8EEF5;padding-top:3px;flex:0 0 auto}
.footer_top1_02 .item{margin-bottom:10px}
.footer_bot1 .ycx_footer_legal a{opacity:.95}

.index_banner{overflow:hidden}

/* dropdown menus: keep long item names on one line */
.publicTwo_stage_nav{width:auto;min-width:240px}
.publicTwo_stage_nav .everyOne a{white-space:nowrap}
body{overflow-x:clip}

/* 2.2.5: grouped dropdown (Applications: category headings + their applications) */
.publicTwo_stage_nav.ycx_nav_grouped{min-width:300px;padding-right:24px}
.publicTwo_stage_nav .ycx_nav_group{margin-bottom:6px}
.publicTwo_stage_nav .ycx_nav_group:not(:first-child){margin-top:16px}
.publicTwo_stage_nav .ycx_nav_group a{display:flex;align-items:center;column-gap:6px;font-family:"Inter-SemiBold",Arial,sans-serif;color:#222}
.publicTwo_stage_nav .ycx_nav_group .iconfont{font-size:14px;line-height:1;color:var(--hue)}
.publicTwo_stage_nav .ycx_nav_child{padding-left:20px;margin-bottom:6px}
.publicTwo_stage_nav .ycx_nav_child a{font-size:15px;color:#555}
.publicTwo_stage_nav .ycx_nav_group a:hover,.publicTwo_stage_nav .ycx_nav_child a:hover{color:var(--hue)}
.publicTwo_stage_nav .ycx_nav_after{margin-top:16px;padding-top:12px;border-top:1px solid #e3e3e3}

/* 2.2.5: mobile menu third level (collapsible) */
.mobile_menu_down_clm{margin-bottom:0}
.mobile_menu_down_clm_tt .icon{background:none;border:0;padding:0;cursor:pointer;color:#555;font-size:14px;transform:none;-webkit-transform:none}
.mobile_menu_down_clm.hover .mobile_menu_down_clm_tt .icon{transform:rotateZ(90deg);-webkit-transform:rotateZ(90deg)}
.mobile_menu_down_clm.hover .mobile_menu_down_clm_tt .tt{color:var(--hue)}
.mobile_menu_down_clm_list{padding:0 0 8px 12px}
.mobile_menu_down_clm_list a{font-size:13px;color:#555}
.mobile_menu_down_clm_list a::before{width:4px;height:4px;margin-top:-2px;background:#9aa3ad}

/* 2.2.34: align footer column widths with footer.css 2.2.31 intent.
   theme.css loads AFTER footer.css — old 2.2.5 widths (24/17/36/17) + grid on
   .footer_top3 forced Resources to wrap under brand at ~1280px.
   Target: brand ~28% | Products/Quick Links/Resources ~22% each; no 2-col grid on top3.
   Contrast/legal rules from 2.2.28 kept. Column content unchanged.
   Desktop ≥1025: flex-nowrap + flex basis so % + column-gap cannot wrap Resources. */
.footer_top_w{column-gap:clamp(.75rem,.4rem + .9vw,1.5rem)}
.footer_top1{width:28%}
.footer_top2{width:22%;display:block}
.footer_top3{width:22%;display:block;grid-template-columns:none;column-gap:0}
.footer_top4{width:22%;display:block}
.footer_bot1 .ycx_footer_legal{white-space:nowrap}
.footer_bot1 .ycx_footer_legal .sep{margin:0 .6em;opacity:.6}
@media screen and (min-width:1025px){
  .footer_top_w{flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap}
  .footer_top1{width:auto;flex:0 1 28%;max-width:30%;min-width:0}
  .footer_top2{width:auto;flex:1 1 0;min-width:0;display:block}
  .footer_top3{width:auto;flex:1 1 0;min-width:0;display:block;grid-template-columns:none;column-gap:0}
  .footer_top4{width:auto;flex:1 1 0;min-width:0;display:block}
  .footer_top_list{font-size:15px}
}
@media screen and (min-width:768px) and (max-width:1024px){
  .footer_top_w{flex-wrap:wrap}
  .footer_top1{width:34%;flex:none}
  .footer_top1_desc{max-width:none}
  .footer_top2{display:block;width:20%;flex:none}
  .footer_top3{display:block;width:20%;flex:none;grid-template-columns:none}
  .footer_top4{display:block;width:20%;flex:none}
  .footer_top_list{font-size:15px}
}
@media screen and (max-width:767px){
  .footer_top_w{flex-wrap:wrap}
  .footer_top1{width:100%;flex:none}
  .footer_top2{display:block;width:100%;margin-top:28px;flex:none}
  .footer_top3{display:block;width:100%;margin-top:16px;grid-template-columns:none;order:unset;flex:none}
  .footer_top4{display:block;width:100%;margin-top:16px;order:unset;flex:none}
  .footer_top_list{font-size:14px}
  .footer_top_list a{margin-bottom:5px}
}

/* 2.2.23: soft navy scrim so hero text stays readable on material photos */
.index_banner .swiper-slide {
  position: relative;
}
.index_banner .swiper-slide > a {
  position: relative;
  display: block;
  z-index: 0;
}
.index_banner .swiper-slide > a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 29, 66, 0.45) 0%, rgba(6, 29, 66, 0.22) 42%, rgba(6, 29, 66, 0.05) 72%);
  pointer-events: none;
  z-index: 1;
}
.index_banner .swiper-slide.ycx_hero_light > a::after,
.index_banner .swiper-slide.ycx_hero_dark > a::after {
  background: none; /* scheme classes already bring their own overlay on .ycx_hero_text */
}