/*
Theme Name:   Hello Elementor Child – Feltech
Description:  Feltech child theme for Hello Elementor. Global design CSS lives here; functionality lives in the feltech-core plugin.
Template:     hello-elementor
Requires PHP: 8.4
Text Domain:  feltech-child
*/

/* Fonts ------------------------------------------------------------------
 * Gabarito (English) + Sarabun (Thai), both from Google Fonts; loaded in
 * functions.php. Latin text uses Gabarito, Thai letters fall through to Sarabun.
 */

/* Design tokens -----------------------------------------------------------
 * Measured from the 1512px-wide Figma frames.
 */

:root {
	--ft-font: "Gabarito", "Sarabun", system-ui, sans-serif;

	--ft-text: #000;
	--ft-red: #d12e37;
	--ft-grey-bar: #d9d9d9;

	--ft-container: 1372px;
	--ft-gutter: 70px;

	--ft-logo-width: clamp(140px, 9.92vw, 150px);
	--ft-nav-size: clamp(22px, 1.82vw, 24px);
	--ft-nav-gap: clamp(26px, 3.12vw, 50px);
	--ft-icon-size: 22px;

	--ft-footer-title-size: 28px;
	--ft-footer-group-size: 20px;
	--ft-footer-link-size: 18px;
	--ft-footer-link-line: 26px;
	--ft-footer-col-gap: 16px;
}

@media (max-width: 1024px) {
	:root {
		--ft-gutter: 40px;
		--ft-logo-width: 140px;
	}
}

@media (max-width: 767px) {
	:root {
		--ft-gutter: 20px;
		--ft-logo-width: 118px;
		--ft-footer-title-size: 24px;
	}
}

/* Base ------------------------------------------------------------------- */

body {
	color: var(--ft-text);
	font-family: var(--ft-font);
	-webkit-font-smoothing: antialiased;
}

/* Thai body text needs taller lines than Latin (the Thai designs use ≈1.75).
 * Not the header and footer: they stay in English on Thai pages, as designed.
 * :where() keeps the selector's specificity unchanged. */
:lang(th) :is(p, li, dd, dt, td):where(:not(.ft-header *, .ft-site-footer *)) {
	line-height: 1.75;
}

/* Brand link colour (replaces Hello's default pink). */
a {
	color: var(--ft-red);
}

a:hover,
a:active {
	color: var(--ft-text);
}

/* Post content below single templates (project story, product extras).
 * Elementor content brings its own containers; block-editor content gets the
 * site width and gutters here. */
.ft-single-content> :not(.elementor),
.ft-single-extra> :not(.elementor) {
	box-sizing: border-box;
	max-width: calc(var(--ft-container) + 2 * var(--ft-gutter));
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--ft-gutter);
	padding-left: var(--ft-gutter);
}

/* Project page top: the three containers at the top of each project
 * (Container → Feltech style → Layout: "Project top: …", which adds these
 * classes; inc/elementor-styles.php). They set the spacing for every project;
 * a value set on one container or widget in Elementor overrides it there.
 * Side gutters and the 1372 px width come from the site's container defaults. */
.e-con.ft-project-hero .ft-hero {
	height: 726px;
}

.e-con.ft-project-title {
	--padding-top: 69px;
	--padding-bottom: 70px;
}

.e-con.ft-project-details {
	--content-width: min(100%, 720px);
	--gap: 40px;
	--row-gap: 40px;
	--padding-bottom: 70px;
}

/* On desktop the facts are wider (872 px) than the intro image above them
 * (720 px, centred). */
@media (min-width: 1025px) {
	.e-con.ft-project-details {
		--content-width: min(100%, 872px);
	}

	.e-con.ft-project-details>.e-con-inner>.elementor-widget-feltech-post-hero {
		width: 100%;
		max-width: 720px;
		margin-inline: auto;
	}
}

@media (max-width: 1024px) {

	.e-con.ft-project-hero .ft-hero {
		height: 52vw;
	}

	.e-con.ft-project-title {
		--padding-top: 64px;
		--padding-bottom: 48px;
	}

	.e-con.ft-project-details {
		--padding-bottom: 48px;
	}
}

@media (max-width: 767px) {

	.e-con.ft-project-hero .ft-hero {
		height: 60vw;
	}

	.e-con.ft-project-title {
		--padding-top: 40px;
		--padding-bottom: 32px;
	}

	.e-con.ft-project-details {
		--gap: 24px;
		--row-gap: 24px;
		--padding-bottom: 32px;
	}
}

/* Two-column text: Text Editor → Feltech style → Columns: Two columns. */
.elementor-widget-text-editor.ft-cols-2-text {
	columns: 2;
	column-gap: 30px;
}

.ft-cols-2-text p {
	break-inside: avoid-column;
}

@media (max-width: 767px) {

	.elementor-widget-text-editor.ft-cols-2-text {
		columns: 1;
	}
}

/* Story / body text: Text Editor → Feltech style → Text style. */
.ft-body-text {
	font-size: 20px;
	line-height: 1.5;
}

.ft-body-text p {
	margin: 0 0 1.5em;
}

.ft-body-text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.ft-body-text {
		font-size: 18px;
	}
}

/* Elementor Image Carousel in the site style (Feltech style → Site style): one
 * landscape frame for every slide, so portrait photos don't stretch the slider. */
.ft-image-carousel .swiper-slide-image {
	width: 100%;
	aspect-ratio: 1372 / 826;
	object-fit: cover;
}

.ft-image-carousel .elementor-swiper-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border: 3px solid #d9d9d9;
	border-radius: 50%;
	background: #fff;
	color: var(--ft-text);
	font-size: 22px;
}

.ft-image-carousel .elementor-swiper-button svg {
	width: 22px;
	height: 22px;
	/* Elementor's own arrow colour is a faint grey set per widget. */
	fill: currentColor !important;
	stroke: currentColor;
	stroke-width: 40px;
}

.ft-image-carousel .elementor-swiper-button:hover {
	border-color: var(--ft-red);
	color: var(--ft-red);
}

.ft-image-carousel .elementor-swiper-button-prev {
	left: 11px;
}

.ft-image-carousel .elementor-swiper-button-next {
	right: 11px;
}

@media (max-width: 767px) {
	.ft-image-carousel .elementor-swiper-button {
		width: 44px;
		height: 44px;
	}
}

/* Equal-width columns for row containers: Container → Feltech style →
 * Layout: Equal columns. */
.ft-cols-equal>.elementor-element,
.ft-cols-equal>.e-con-inner>.elementor-element {
	flex: 1 1 0;
	min-width: 0;
}

/* Diagram beside a text block (Sound & Thermal Insulation): Container →
 * Layout: Diagram beside text; the text column is 582px wide. */
.e-con.ft-media-text {
	display: grid;
	grid-template-columns: minmax(0, 530px) minmax(0, 582px);
	align-items: center;
	column-gap: 92px;
}

.ft-media-text>.elementor-widget-image {
	text-align: center;
}

@media (max-width: 1024px) {
	.e-con.ft-media-text {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}
}

/* Wrapping 3-column grid of widgets: Container → Layout: Grid: 3 per row. */
.e-con.ft-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 72px 30px;
}

@media (max-width: 1024px) {
	.e-con.ft-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.e-con.ft-grid-3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
}

/* 4-column grid of widgets, 2 columns on phones: Container → Layout: Grid: 4 per row. */
.e-con.ft-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px 30px;
}

@media (max-width: 767px) {
	.e-con.ft-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 20px;
	}
}

/* Image Box titles keep the line breaks typed in them (Title is multi-line). */
.elementor-widget-image-box .elementor-image-box-title {
	white-space: pre-line;
}

/* Certification card: centred logo, bold title, text (Image Box → Style: Certification).
   Every logo sits in the same 190 px area, so the titles in a row line up. */
.ft-cert.elementor-widget-image-box .elementor-image-box-wrapper {
	text-align: left;
}

.ft-cert.elementor-widget-image-box .elementor-image-box-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto !important;
	height: 190px;
	margin: 0 0 24px !important;
}

.ft-cert .elementor-image-box-img img {
	width: auto;
	max-height: 100%;
}

.ft-cert .elementor-image-box-title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.ft-cert .elementor-image-box-description {
	margin: 0;
	font-size: 18px;
	line-height: 1.45;
}

.ft-body-text--small {
	font-size: 18px;
}

/* Letter-spaced heading ("L E E D"): Section Title → Letter-spaced. */
.ft-spaced .ft-heading__text {
	letter-spacing: 0.3em;
}

/* Image Box styled as a card (Products landing category cards, Home):
 * Image Box → Style: Card / Card: text on the left / Small card. */
.ft-image-box.elementor-widget-image-box .elementor-image-box-wrapper {
	text-align: center;
}

.ft-image-box .elementor-image-box-img {
	width: 100% !important;
	margin: 0 0 24px !important;
}

.ft-image-box .elementor-image-box-img img {
	display: block;
	width: 100%;
	aspect-ratio: 437 / 301;
	object-fit: cover;
}

.ft-image-box .elementor-image-box-title {
	margin: 0 0 8px;
	font-size: clamp(22px, 1.85vw, 28px);
	font-weight: 700;
	line-height: 1.2;
}

.ft-image-box .elementor-image-box-title a {
	color: inherit;
}

.ft-image-box .elementor-image-box-title a:hover {
	color: var(--ft-red);
}

.ft-image-box .elementor-image-box-description {
	margin: 0;
	font-size: 18px;
	line-height: 1.45;
}

/* Doubled class beats Elementor's centring on mobile. */
.ft-image-box--left.ft-image-box .elementor-image-box-wrapper {
	text-align: left;
}

.ft-image-box--left .elementor-image-box-img img {
	aspect-ratio: auto;
	object-fit: contain;
}

/* Left-aligned text with more space under the image (Products landing). */
.ft-image-box--start.ft-image-box .elementor-image-box-wrapper {
	text-align: left;
}

.ft-image-box--start .elementor-image-box-img {
	margin-bottom: 60px !important;
}

/* Smaller title and text (sub-category cards, e.g. Acoustic Flooring). */
.ft-image-box--compact .elementor-image-box-title {
	margin-bottom: 4px;
	font-size: 22px;
}

@media (max-width: 767px) {
	.ft-image-box .elementor-image-box-img {
		margin-bottom: 16px !important;
	}
}

/* Icon beside a bold title and text (Image Box → Style: Icon beside a title
 * and text, image position Left; ECOSTEP Performance grid). */
.ft-feature.elementor-widget-image-box .elementor-image-box-wrapper {
	display: flex;
	align-items: flex-start;
	gap: 24px;
	text-align: left;
}

.ft-feature .elementor-image-box-img {
	flex: none;
	width: 96px !important;
	margin: 0 !important;
}

.ft-feature .elementor-image-box-content {
	max-width: 274px;
}

.e-con.ft-grid-3:has(> .ft-feature) {
	row-gap: 96px;
}

.ft-feature .elementor-image-box-img img {
	display: block;
	width: 100%;
	height: auto;
}

.ft-feature .elementor-image-box-title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.ft-feature .elementor-image-box-description {
	margin: 0;
	font-size: 18px;
	line-height: 1.45;
}

@media (max-width: 767px) {
	.ft-feature .elementor-image-box-img {
		width: 64px !important;
	}
}

/* Icon over a short label (Image Box → Style: Icon over a short label; download row). */
.ft-icon-label .elementor-image-box-img {
	width: 154px !important;
	margin: 0 auto 32px !important;
}

.ft-icon-label .elementor-image-box-img img {
	display: block;
	width: 100%;
	height: 154px;
	object-fit: contain;
}

.ft-icon-label .elementor-image-box-title {
	max-width: 230px;
	margin: 0 auto;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.4;
}

@media (max-width: 767px) {
	.ft-icon-label .elementor-image-box-img {
		width: 88px !important;
		margin-bottom: 16px !important;
	}

	.ft-icon-label .elementor-image-box-img img {
		height: 88px;
	}
}

/* Technical text: bold sub-headings over small text, optional data table
 * (Text Editor → Text style: Technical; Acoustic Flooring test results). */
.ft-tech {
	font-size: 18px;
	line-height: 1.45;
}

.ft-tech h3 {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

.ft-tech p {
	margin: 0 0 1.5em;
}

.ft-tech p+h3 {
	margin-top: 48px;
}

.ft-tech ul {
	margin: 0 0 1.5em;
	padding-left: 1.25em;
}

.ft-tech> :last-child {
	margin-bottom: 0;
}

.ft-tech table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

.ft-tech th,
.ft-tech td {
	padding: 6px 4px;
	border: 0;
	border-bottom: 1px solid var(--ft-grey-bar);
	background: none;
	text-align: center;
}

.ft-tech th {
	font-weight: 700;
}

/* Header (template "Header") ---------------------------------------------
 * Logo | nav (centred on the page) | search + language.
 * Height and top padding are set on the template's outer container in
 * Elementor (Layout → Min Height, Advanced → Padding).
 */

.ft-header {
	position: relative;
	z-index: 50;
	background: #fff;
}

.ft-header>.e-con-inner {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}

@media (min-width: 1025px) {
	.ft-header .ft-header__actions {
		--ft-icon-size: 26px;
	}
}

.ft-header .ft-header__logo,
.ft-header .ft-header__actions {
	flex: 1 1 0;
	min-width: 0;
}

.ft-header .ft-header__logo {
	text-align: left;
}

.ft-header .ft-header__logo img {
	display: block;
	width: var(--ft-logo-width);
	height: auto;
}

.ft-header .ft-header__nav {
	flex: 0 0 auto;
	width: auto;
}

.ft-header .ft-header__actions {
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 32px;
}

.ft-header .ft-header__actions>.elementor-widget {
	width: auto;
}

@media (max-width: 1024px) {

	/* Menu button after search + language, spaced like them. `.e-con` beats
	 * Elementor's 20px container gap (.e-con > .e-con-inner). */
	.ft-header.e-con>.e-con-inner {
		gap: 0;
	}

	.ft-header .ft-header__nav {
		order: 3;
		margin-left: 22px;
	}

	.ft-header .ft-header__actions {
		gap: 22px;
	}
}

/* One keyboard focus style for every link and button in the header, the
 * phone menu and the footer (matches the icon buttons). */
.ft-header a:focus-visible,
.ft-site-footer a:focus-visible {
	outline: 2px solid var(--ft-red);
	outline-offset: 2px;
}

/* Footer (template "Footer") ---------------------------------------------- */

.ft-footer>.e-con-inner {
	padding-top: 66px;
	padding-bottom: 60px;
	border-top: 2px solid var(--ft-red);
}

.ft-footer .ft-footer__cols {
	--gap: 0px;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0;
}

.ft-footer .ft-footer__col--projects {
	flex: 0 0 25.73%;
	width: 25.73%;
}

.ft-footer .ft-footer__col--products {
	flex: 0 0 51.1%;
	width: 51.1%;
}

.ft-footer .ft-footer__col--more {
	--gap: 10px;
	flex: 1 1 0;
	gap: 10px;
}

/* The same space below every group, with or without links (About us);
 * Contact's title stays close to its details. */
.ft-footer .ft-footer__col--more> :not(:has(+ .ft-footer__contact)) .ft-links {
	margin-bottom: 22px;
}

.ft-footer .ft-footer__contact p {
	margin: 0;
	font-size: var(--ft-footer-link-size);
	line-height: var(--ft-footer-link-line);
}

.ft-footer .ft-footer__contact a {
	color: inherit;
	text-decoration: none;
}

.ft-footer-bar {
	min-height: 110px;
	background: var(--ft-grey-bar);
}

.ft-footer-bar>.e-con-inner {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.ft-footer-bar .ft-footer-bar__copyright {
	flex: 1 1 0;
}

.ft-footer-bar .ft-footer-bar__copyright p {
	margin: 0;
	font-size: 18px;
}

.ft-footer-bar .ft-footer-bar__social {
	flex: 0 0 23.2%;
	width: 23.2%;
}

.ft-footer-bar .ft-footer-bar__social .elementor-social-icons-wrapper {
	justify-content: flex-start;
	text-align: left;
}

/* Tablets: Sustainability → Contact move under Projects, beside the long
 * Products list, instead of a third row. */
@media (min-width: 768px) and (max-width: 1024px) {
	.ft-footer .ft-footer__cols {
		display: grid;
		grid-template-columns: 33% 67%;
		row-gap: 48px;
	}

	.ft-footer .ft-footer__col--projects,
	.ft-footer .ft-footer__col--products,
	.ft-footer .ft-footer__col--more {
		width: auto;
	}

	.ft-footer .ft-footer__col--products {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.ft-footer .ft-footer__col--more {
		grid-column: 1;
		grid-row: 2;
	}
}

/* Phones: one column of groups divided by lines; the link lists fold (W4). */
@media (max-width: 767px) {
	.ft-footer>.e-con-inner {
		padding-top: 24px;
		padding-bottom: 40px;
	}

	.ft-footer .ft-footer__cols {
		flex-direction: column;
		row-gap: 0;
	}

	.ft-footer .ft-footer__col--projects,
	.ft-footer .ft-footer__col--products {
		flex-basis: auto;
		width: 100%;
	}

	.ft-footer .ft-footer__col--more {
		--gap: 0px;
		gap: 0;
	}

	.ft-footer .ft-links {
		padding: 14px 0;
		border-bottom: 1px solid var(--ft-grey-bar);
	}

	.ft-footer .ft-footer__col--more> :not(:has(+ .ft-footer__contact)) .ft-links {
		margin-bottom: 0;
	}

	.ft-footer .ft-links__nav.is-open {
		padding-bottom: 6px;
	}

	/* Contact: its details follow directly, without a line between. */
	.ft-footer .ft-footer__col--more> :has(+ .ft-footer__contact) .ft-links {
		padding-bottom: 8px;
		border-bottom: 0;
	}

	.ft-footer-bar {
		min-height: 0;
	}

	/* `.e-con` beats Elementor's row direction (.e-con.e-flex > .e-con-inner). */
	.ft-footer-bar.e-con>.e-con-inner {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 20px;
		padding-top: 32px;
		padding-bottom: 32px;
	}

	.ft-footer-bar .ft-footer-bar__copyright {
		flex: none;
	}

	.ft-footer-bar .ft-footer-bar__copyright p {
		font-size: 16px;
	}

	.ft-footer-bar .ft-footer-bar__social {
		flex-basis: auto;
		width: auto;
	}
}