/*
Theme Name: Suria Infiniti Child
Theme URI: https://suriainfiniti.com/
Description: Custom child theme of Hello Elementor for Suria Infiniti — Malaysia's Solar EPC Partner Since 2011.
Author: Suria Infiniti
Author URI: https://suriainfiniti.com/
Template: hello-elementor
Version: 1.0.0
Text Domain: suria-infiniti-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, translation-ready
*/

/* ==========================================================================
   SURIA INFINITI — BRAND TOKENS
   Colors pulled directly from the logo:
   Orange  #F47421
   Navy    #0C2637
   ========================================================================== */

:root {
	--si-orange: #F47421;
	--si-orange-dark: #D9611A;
	--si-navy: #0C2637;
	--si-navy-soft: #2E4356;
	--si-white: #FFFFFF;
	--si-off-white: #FAFAFA;
	--si-border: #ECECEC;

	/* Override Elementor's global CSS variables so widgets built in
	   Elementor Site Settings automatically pick up the brand palette.
	   (Safe no-op if these variables aren't used elsewhere.) */
	--e-global-color-primary: var(--si-orange);
	--e-global-color-secondary: var(--si-navy);
	--e-global-color-text: var(--si-navy);
	--e-global-color-accent: var(--si-orange);
}

/* ==========================================================================
   GLOBAL / MINIMALIST BASE
   ========================================================================== */

body {
	background-color: var(--si-white);
	color: var(--si-navy);
}

a {
	color: var(--si-orange);
	transition: color 0.2s ease;
}

a:hover,
a:focus {
	color: var(--si-orange-dark);
}

/* ==========================================================================
   HEADER — clean, white, minimalist
   Works with Hello Elementor's default header and with the
   Elementor Theme Builder header template if you build one.
   ========================================================================== */

.site-header,
.elementor-location-header {
	background-color: var(--si-white) !important;
	border-bottom: 1px solid var(--si-border);
	box-shadow: none;
}

/* Logo sizing so it stays crisp and doesn't overpower a minimal header */
.site-logo img,
.custom-logo,
.elementor-location-header img.custom-logo {
	max-height: 44px;
	width: auto;
}

/* Primary nav — minimal, uppercase, generous spacing */
.site-navigation a,
.elementor-nav-menu a {
	color: var(--si-navy);
	font-weight: 500;
	letter-spacing: 0.02em;
}

.site-navigation a:hover,
.elementor-nav-menu a:hover,
.elementor-nav-menu li.current-menu-item > a {
	color: var(--si-orange);
}

/* Mobile menu toggle icon color */
.hamburger-icon,
.elementor-menu-toggle {
	color: var(--si-navy);
}

/* ==========================================================================
   BUTTONS — orange primary CTA, navy secondary
   ========================================================================== */

.elementor-button,
button,
input[type="submit"] {
	background-color: var(--si-orange);
	color: var(--si-white);
	border-radius: 6px;
	border: none;
	font-weight: 600;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.elementor-button:hover,
button:hover,
input[type="submit"]:hover {
	background-color: var(--si-orange-dark);
	transform: translateY(-1px);
}

.elementor-button.elementor-button-secondary,
.si-btn-secondary {
	background-color: transparent;
	color: var(--si-navy);
	border: 1.5px solid var(--si-navy);
}

.elementor-button.elementor-button-secondary:hover,
.si-btn-secondary:hover {
	background-color: var(--si-navy);
	color: var(--si-white);
}

/* ==========================================================================
   FOOTER — quiet, off-white separation from body content
   ========================================================================== */

.site-footer,
footer.elementor-location-footer {
	background-color: var(--si-off-white);
	color: var(--si-navy-soft);
	border-top: 1px solid var(--si-border);
}

.site-footer a,
footer.elementor-location-footer a {
	color: var(--si-navy-soft);
}

.site-footer a:hover,
footer.elementor-location-footer a:hover {
	color: var(--si-orange);
}

/* ==========================================================================
   HEADINGS — keep hierarchy tidy and on-brand
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	color: var(--si-navy);
}

/* Eyebrow / label text pattern used across the Suria Infiniti site copy */
.si-eyebrow {
	color: var(--si-orange);
	text-transform: uppercase;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* Add any further custom styles below this line */