/**
 * Project overrides on top of the ported stylesheet.
 *
 * assets/css/main.css is generated -- put every hand-written rule here instead so a
 * CSS rebuild never clobbers it.
 *
 * @package Mitsubishi_Binh_Phuoc
 */

/* -------------------------------------------------------------------------
 * WordPress admin bar
 * The ported header is position:fixed and sits under the admin bar otherwise.
 * ---------------------------------------------------------------------- */
body.admin-bar .gw-header-fix {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .gw-header-fix {
		top: 46px;
	}
}

/* -------------------------------------------------------------------------
 * Lead forms
 *
 * Contact Form 7 replaces the original CMS form renderer. These rules map CF7's
 * markup onto the look the ported stylesheet gives .gw-document-form fields, so
 * a form in a popup is indistinguishable from the original.
 * ---------------------------------------------------------------------- */
#gw-form-all {
	display: none;
}

.gw-form-module {
	width: 550px;
	max-width: 100%;
}

.gw-form-module .gw-document-title {
	color: #fff;
	font-size: 1.1rem;
	font-weight: 700;
	padding: 10px 15px;
	background-color: var(--main-color);
}

.gw-form-module .gw-document-intro {
	padding: 15px 15px 0;
}

.gw-form-module .wpcf7 {
	padding: 15px;
}

.gw-form-module .wpcf7-form p {
	margin: 0 0 12px;
}

.gw-form-module .wpcf7-form label {
	display: block;
	color: var(--color-field);
	font-size: .9rem;
	margin-bottom: 4px;
}

.gw-form-module .wpcf7-form input[type="text"],
.gw-form-module .wpcf7-form input[type="tel"],
.gw-form-module .wpcf7-form input[type="email"],
.gw-form-module .wpcf7-form input[type="number"],
.gw-form-module .wpcf7-form select,
.gw-form-module .wpcf7-form textarea {
	width: 100%;
	color: var(--color-field);
	font-size: 1rem;
	padding: 8px 10px;
	border: solid 1px #ccc;
	border-radius: 3px;
	box-sizing: border-box;
	background-color: #fff;
}

.gw-form-module .wpcf7-form textarea {
	height: 90px;
}

.gw-form-module .wpcf7-form input:focus,
.gw-form-module .wpcf7-form select:focus,
.gw-form-module .wpcf7-form textarea:focus {
	border-color: var(--main-color);
	outline: none;
}

.gw-form-module .wpcf7-form .wpcf7-submit {
	width: 100%;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	padding: 12px;
	border: none;
	border-radius: 3px;
	background-color: var(--main-color);
	cursor: pointer;
}

.gw-form-module .wpcf7-form .wpcf7-submit:hover {
	opacity: .9;
}

.gw-form-module .wpcf7-not-valid-tip {
	color: var(--color-error);
	font-size: .85rem;
	margin-top: 3px;
}

.gw-form-module .wpcf7-response-output {
	font-size: .95rem;
	margin: 10px 0 0;
	padding: 10px;
	border-radius: 3px;
}

.gw-form-module .wpcf7-form.invalid .wpcf7-response-output,
.gw-form-module .wpcf7-form.failed .wpcf7-response-output {
	color: var(--color-error);
	border: solid 1px var(--color-error);
}

.gw-form-module .wpcf7-form.sent .wpcf7-response-output {
	color: var(--color-message);
	border: solid 1px var(--color-message);
}

/* Inline placements get no popup chrome. */
.gw-form-lead .gw-form-module {
	width: 100%;
}

/*
 * Card thumbnails fill their aspect box.
 *
 * `mbp-thumb` is a hard 400x225 crop, i.e. 16:9, but the article cards frame it with
 * `.img-4x3`. main.css gives the image `width: 100%` and no height, so `object-fit`
 * had nothing to work against: the 16:9 image sat inside the 4:3 box and left a gap
 * whose size varied with the column width. Giving the anchor and the image the box's
 * full height lets `cover` crop instead. The box itself is sized by `aspect-ratio`,
 * so every card stays identical at any viewport width without a media query.
 *
 * Product cards get the same treatment: their box already matches the thumbnail at
 * 16:9, but the WooCommerce placeholder used when a post has no featured image does
 * not, and it would break the row the same way.
 */
.gw-article .item .img,
.gw-product .item .img {
	display: block;
}

.gw-article .item .img > a,
.gw-product .item .img > a {
	display: block;
	width: 100%;
	height: 100%;
}

.gw-article .item .img img,
.gw-product .item .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * News cards align to the top of their row, not the bottom.
 *
 * main.css carries the original's `.gw-article .item{max-width:350px;margin:auto auto
 * 35px auto}`. That top `auto` is a block-axis auto margin, which cancels the grid's
 * default `stretch`: the card is sized to its content and the auto margin absorbs every
 * pixel of leftover track, so each card is pushed to the *bottom* of its row. The result
 * is flush bottoms and ragged tops -- at 1223px the eight home-page cards started at four
 * different heights, up to 45px apart, so the photos, headings and dates in one row never
 * lined up. Only margin-top is reset; the left/right autos still centre a card in a
 * column wider than 350px.
 *
 * The height difference itself comes from the copy: a heading wraps to 2 or 3 lines
 * (56px vs 79px) and mbp_post_summary() trims to 25 words rather than to a line count
 * (68px vs 90px). Clamping both makes every card identical, which is what keeps the date
 * rows aligned as well. The clamp sits on the heading's <a>, not on .name itself -- .name
 * is .gw-title-sub, which has padding-bottom and a border, and overflow clips at the
 * padding edge, so clamping the padded box leaks a sliver of the cut line under the rule.
 */
.gw-article .item {
	margin-top: 0;
}

.gw-article .item .name a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.gw-article .item .info {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/*
 * Social icons beside the copyright line. The original had no social row -- these only
 * appear once a dealer fills Link Facebook / Link YouTube / Link Zalo on Thông tin đại lý,
 * so an untouched install renders exactly as before.
 */
.gw-footer-copyright .gw-social {
	margin: 8px 0 0;
}

.gw-footer-copyright .gw-social-link {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	margin: 0 3px;
	text-align: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: inherit;
}

.gw-footer-copyright .gw-social-link:hover {
	background: rgba(255, 255, 255, 0.3);
}

/*
 * Room for the pinned quick-action bar.
 *
 * Below 980px .gw-menu-quick becomes a full-width bar at bottom:0 with position:fixed,
 * about 59px tall once the enlarged centre icon is counted. Nothing reserved space for
 * it, so the last thing on every page -- the copyright line -- sat underneath it. On
 * wider screens the bar is a vertical strip pinned to the right instead and needs none.
 */
@media only screen and (max-width: 980px) {
	body {
		padding-bottom: 4.5rem;
	}
}

/*
 * Parallax off on touch widths.
 *
 * .gw-parallax uses background-attachment:fixed with background-size:cover. iOS Safari
 * has never supported that pairing: it sizes the image to the viewport instead of the
 * element, so the after-sales block shows a blown-up crop that does not line up with the
 * box. Android honours it but repaints the whole background on every scroll frame.
 * Desktop keeps the effect.
 */
@media only screen and (max-width: 980px) {
	.gw-parallax,
	.gw-parallax-image {
		background-attachment: scroll;
	}
}

/*
 * Pagination.
 *
 * The original CMS rendered its own pager; this theme uses paginate_links() instead, and
 * nothing ever styled the result -- `.page-numbers` appears nowhere in main.css. So page
 * "2" was a bare 10x20px text link, well under any usable tap target, and the current
 * page was indistinguishable from the rest.
 */
.gw-article-page .page-numbers,
.gw-view-post .page-numbers {
	display: inline-block;
	min-width: 44px;
	margin: 0 4px 8px 0;
	padding: 10px 12px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: var(--color-body);
	background: #fff;
	border: solid 1px #ddd;
	border-radius: 3px;
}

.gw-article-page a.page-numbers:hover,
.gw-view-post a.page-numbers:hover {
	color: #fff;
	background: var(--main-color);
	border-color: var(--main-color);
}

.gw-article-page .page-numbers.current,
.gw-view-post .page-numbers.current {
	color: #fff;
	font-weight: 700;
	background: var(--main-color);
	border-color: var(--main-color);
}

.gw-article-page .page-numbers.dots,
.gw-view-post .page-numbers.dots {
	min-width: 0;
	background: none;
	border: none;
}

/*
 * Horizontally scrollable tables.
 *
 * At 360px the four-column Destinator price table squeezed its columns to 56px, which
 * wraps "Giá niêm yết" onto three lines. Rather than forcing every table to scroll -- the
 * three-column ones fit fine and scrolling them would be a regression -- each cell gets a
 * floor of 6rem. Three columns still fit inside a 331px container; four cannot, so only
 * that table scrolls, and it does so with columns wide enough to read.
 *
 * The shadow on the right edge is the only affordance saying "there is more"; it is
 * painted with a background-attachment trick so it disappears once scrolled to the end.
 */
.gw-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background:
		linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center,
		linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center,
		radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0)) left center,
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0)) right center;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

.gw-table-scroll > table {
	margin-bottom: 0;
}

.gw-table-scroll td,
.gw-table-scroll th {
	min-width: 6rem;
}

/* The spec tables are two columns of prose; a floor there just wastes the label column. */
.gw-product-detail .gw-table-scroll td,
.gw-product-detail .gw-table-scroll th {
	min-width: 0;
}