/*
Theme Name: HCAD
Theme URI: https://hcad.com.vn
Author: HCAD - Hung Cuong Automation & Digital Solution
Author URI: https://hcad.com.vn
Description: Custom WordPress theme for HCAD - Hung Cuong Automation & Digital Solution. Converted from static HTML. Supports Polylang, custom post types Product & Project, and per-page section options.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hcad
Tags: business, industrial, custom-post-type, multilingual
*/

/* ==========================================================================
   HCAD Brand tokens
   Colors sampled from the official HCAD key visual.
   ========================================================================== */
:root {
	--hcad-blue: #0B3D91;
	--hcad-blue-dark: #062A66;
	--hcad-blue-light: #1B62C4;
	--hcad-red: #C8102E;
	--hcad-red-dark: #9E0C24;
	--hcad-grey: #F3F6FA;
	--hcad-grey-line: #DDE4EE;
	--hcad-text: #1A2536;
	--hcad-text-soft: #5A6779;
	--hcad-white: #FFFFFF;
}

/* ==========================================================================
   Brand overrides on top of the inherited stylesheets.
   Loaded last so these win without editing the original CSS files.
   ========================================================================== */

.change-color,
.detail-consult.change-color,
.consult .submit,
.consult .button.submit {
	background-color: var(--hcad-red) !important;
	border-color: var(--hcad-red) !important;
	color: var(--hcad-white) !important;
}

.change-color:hover,
.consult .button.submit:hover {
	background-color: var(--hcad-red-dark) !important;
	border-color: var(--hcad-red-dark) !important;
}

.nav .nav-menu > li > a:hover,
.nav .nav-menu > li.current-menu-item > a,
.footer-nav dd a:hover,
.detail-nav a:hover {
	color: var(--hcad-blue-light);
}

.contact-us {
	background-color: var(--hcad-blue);
}

.contact-us:hover {
	background-color: var(--hcad-red);
}

footer {
	background-color: var(--hcad-blue-dark);
}

.solution-title,
.product-detail .title2 {
	border-left-color: var(--hcad-red);
}

/* Language switcher (Polylang) */
.hcad-lang {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.hcad-lang a {
	color: inherit;
	opacity: .6;
	text-transform: uppercase;
	font-size: 14px;
	line-height: 1;
	transition: opacity .2s ease;
}

.hcad-lang a:hover,
.hcad-lang a.is-active {
	opacity: 1;
}

.hcad-lang .sep {
	opacity: .35;
}

/* Admin-facing helper: hide empty sections that have no content set */
.hcad-section-empty {
	display: none !important;
}

/* Accessibility */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ==========================================================================
   Theme-only helpers (classes that do not exist in the inherited CSS)
   ========================================================================== */

/* AJAX feedback under the enquiry form */
.consult-message {
	margin-top: 10px;
	font-size: 14px;
	line-height: 1.5;
	min-height: 20px;
}

.consult-message.is-success {
	color: #1c8c4a;
}

.consult-message.is-error {
	color: var(--hcad-red);
}

.consult .submit.is-sending {
	opacity: .6;
	pointer-events: none;
}

/* Editor free content + fallback templates */
.page-free-content {
	padding: 60px 10.9%;
}

/* .content is a shared name: sceneb14d.css makes it a full-height white flex
   column, aboutb14d.css makes it an 80% centred column. Neither suits the
   editor's free content, so reset what those set. */
.page-free-content .content {
	max-width: 1200px;
	margin: 0 auto;
	color: var(--hcad-text);
	line-height: 1.8;
	width: auto;
	height: auto;
	display: block;
	text-align: left;
	padding: 0;
}

.page-free-content img {
	max-width: 100%;
	height: auto;
}

.error-404 {
	min-height: 50vh;
	display: flex;
	align-items: center;
	text-align: center;
}

.error-404 .content {
	width: 100%;
}

/* Pages without a hero: the header is absolute with a white logo, so give it a
   solid background rather than white-on-white. Pages that DO open with a
   full-bleed banner must keep it transparent — that is the whole look of the
   original, the photo runs up behind the header. hcad_has_hero() decides. */
body.hcad-no-hero .nav:not(.active) {
	background: var(--hcad-blue-dark);
}

/* Scenario bands print white text straight onto the photo. The original site
   fed them dark photos from its CMS; the stock images that shipped with the
   static export are pale (pic3* average 230 of 255), so the headline vanished.
   A scrim keeps the text readable whatever the editor uploads. */
.onland.area::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		to bottom,
		rgba( 6, 42, 102, .55 ),
		rgba( 6, 42, 102, .28 ) 45%,
		rgba( 6, 42, 102, .62 )
	);
	pointer-events: none;
}

.onland.area > .content {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   Adjustments to the inherited layout

   The original CSS was written against a fixed set of sections on a fixed
   set of pages. These rules keep the same look while letting the editor
   decide how many items a band holds.
   ========================================================================== */

/* index8327.css hard-codes .bs2-list li at 20%, i.e. exactly five products.
   Share the row out evenly for whatever number the editor adds instead. */
.bs2-list > li {
	width: auto;
	flex: 1 1 0;
}

/* Band 1 takes its height from the <video>, and index8327.css hides the
   poster above 1025px. With no video configured the band collapses to zero
   and the .scene-labelN hotspots pile up in the corner, so let the poster
   carry the height instead.

   The .scene-labelN coordinates are absolute vw values drawn against a 2:1
   frame (the original clip is 2160x1080), so the media must keep that ratio
   whatever the editor uploads — at 3.3:1 the lower hotspots fall clean off
   the picture. 50vw is 2:1 at full viewport width. */
.bs.bs1 .video-poster img {
	width: 100%;
	display: block;
}

@media screen and ( min-width: 1025px ) {
	.bs.bs1 > video,
	.bs.bs1.no-video .video-poster {
		display: block;
		width: 100%;
		height: 50vw;
		object-fit: cover;
	}

	.bs.bs1.no-video .video-poster img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* The "Step into" band is a white one in the original design — dark heading,
   #666 standfirst, white news cards. index8327.css gives .bs3 no background of
   its own, so say it here rather than leaning on the body colour. An image set
   in Page Options still paints over this. */
.bs.bs3 {
	background-color: #fff;
}

/* All .product-bg layers are opaque until theme.js picks one, which flashes
   the last image over the others. Show the first by default instead. */
.bs2 .product-bg {
	opacity: 0;
}

.bs2 .product-bg:first-of-type {
	opacity: 1;
}

/* aboutb14d.css hides .history on the English skin because the original had
   nothing to put there. HCAD uses the band for capability cards, and the
   template only outputs it when there are entries. */
.lan-en .mingyang .history {
	display: block;
}

/* The original banner has a title and pills, no standfirst. */
.mingyang .banner-nav .banner-describe {
	font-size: 1.09vw;
	line-height: 1.61vw;
	margin-bottom: 1.56vw;
	max-width: 42vw;
	opacity: .85;
}

/* .float is fixed-position and would sit on top of the footer once the page
   is scrolled past the last band. theme.js toggles this. */
.float.is-hidden {
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s;
}

@media screen and ( max-width: 1024px ) {
	.mingyang .banner-nav .banner-describe {
		font-size: 0.26rem;
		line-height: 0.4rem;
		max-width: none;
	}

	.float {
		display: none;
	}

	.page-free-content {
		padding: 40px 8%;
	}
}