/*
Theme Name:        GPIPL EV Mobility
Theme URI:         https://gpiint.com
Author:             GPIPL EV Mobility
Author URI:         https://gpiint.com
Description:        Premium custom WordPress theme for GPIPL EV Mobility — a distributor, sales and service provider of premium electric mobility scooters in India. Built with a native-first architecture, no page builders, fully editable from the WordPress Admin.
Version:             1.0.0
Requires at least:  6.4
Tested up to:        6.6
Requires PHP:        8.0
License:             Proprietary
License URI:         https://gpiint.com
Text Domain:         gpipl-ev
Tags:                custom-theme, electric-vehicles, corporate, premium
*/

/* =========================================================
   ROOT DESIGN TOKENS
   Global CSS custom properties only.
   No component, page, animation or button styles here.
========================================================= */

:root {

	/* -----------------------------------------------------
	   Brand Colors
	----------------------------------------------------- */
	--color-primary: #0a0a0a;
	--color-secondary: #ffffff;
	--color-accent: #00b894;
	--color-accent-dark: #009e7d;

	--color-text-primary: #101010;
	--color-text-secondary: #4a4a4a;
	--color-text-muted: #7a7a7a;
	--color-text-inverse: #ffffff;

	--color-background: #ffffff;
	--color-background-alt: #f7f7f8;
	--color-background-dark: #0a0a0a;

	--color-border: #e5e5e5;
	--color-border-dark: #2a2a2a;

	--color-success: #1fa971;
	--color-warning: #d99a2b;
	--color-error: #d9432b;

	/* -----------------------------------------------------
	   Typography
	----------------------------------------------------- */
	--font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

	--font-size-base: 16px;

	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 2rem;
	--font-size-4xl: 2.5rem;
	--font-size-5xl: 3.25rem;
	--font-size-6xl: 4rem;

	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--line-height-tight: 1.2;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.75;

	--letter-spacing-tight: -0.02em;
	--letter-spacing-normal: 0;
	--letter-spacing-wide: 0.04em;

	/* -----------------------------------------------------
	   Spacing Scale
	----------------------------------------------------- */
	--space-xxs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;
	--space-4xl: 6rem;
	--space-5xl: 8rem;

	/* -----------------------------------------------------
	   Border Radius
	----------------------------------------------------- */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 999px;

	/* -----------------------------------------------------
	   Shadows
	----------------------------------------------------- */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
	--shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.12);

	/* -----------------------------------------------------
	   Container Widths
	----------------------------------------------------- */
	--container-sm: 640px;
	--container-md: 960px;
	--container-lg: 1200px;
	--container-xl: 1440px;
	--container-full: 100%;

	--container-padding-inline: var(--space-lg);

	/* -----------------------------------------------------
	   Breakpoints (reference values — used in media queries)
	----------------------------------------------------- */
	--breakpoint-xs: 375px;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;
	--breakpoint-2xl: 1536px;

	/* -----------------------------------------------------
	   Transitions (tokens only — no animation keyframes)
	----------------------------------------------------- */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 400ms ease;

	/* -----------------------------------------------------
	   Z-Index Scale
	----------------------------------------------------- */
	--z-index-dropdown: 100;
	--z-index-sticky: 200;
	--z-index-overlay: 300;
	--z-index-modal: 400;
	--z-index-toast: 500;
}
/* =========================================================
   GLOBAL LAYOUT SAFETY
   Prevent horizontal overflow across the website
========================================================= */

html {
	max-width: 100%;
	overflow-x: clip;
}

body {
	max-width: 100%;
	overflow-x: clip;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Media should never exceed its parent */
img,
video,
iframe,
svg {
	max-width: 100%;
}

/* WordPress/theme sections stay inside viewport */
.home-sustainability,
.home-accessibility-story,
.home-comparison-teaser,
.home-feature-pillars,
.home-dual-cta {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* =========================================================
   GPIPL EV — GLOBAL TYPOGRAPHY NORMALIZATION
   Keeps typography consistent across all pages
========================================================= */

/* Main website font */
body,
button,
input,
select,
textarea,
label,
p,
li,
a {
	font-family: var(--font-family-primary) !important;
}

/* All headings */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-family-heading) !important;
	font-weight: 700 !important;
	color: var(--color-text-primary);
}

/* Global body text */
body {
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-primary);
}

/* Heading scale */
h1 {
	font-size: clamp(42px, 5vw, 72px) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.035em !important;
}

h2 {
	font-size: clamp(34px, 4vw, 52px) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.03em !important;
}

h3 {
	font-size: clamp(26px, 3vw, 36px) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.02em !important;
}

h4 {
	font-size: 24px !important;
	line-height: 1.25 !important;
}

h5 {
	font-size: 20px !important;
	line-height: 1.3 !important;
}

h6 {
	font-size: 16px !important;
	line-height: 1.4 !important;
}

/* Paragraphs */
p {
	font-size: 17px;
	line-height: 1.75;
}

/* Navigation */
header a,
nav a {
	font-family: var(--font-family-primary) !important;
}

/* Buttons */
button,
.btn,
.button,
a.button,
input[type="submit"],
input[type="button"] {
	font-family: var(--font-family-primary) !important;
	font-weight: 600 !important;
}

/* Form fields */
input,
select,
textarea {
	font-family: var(--font-family-primary) !important;
	font-size: 16px !important;
}

/* Small labels / eyebrow text */
.eyebrow,
.section-label,
.section-tag,
.overline,
[class*="eyebrow"],
[class*="label"] {
	font-family: var(--font-family-primary) !important;
}

/* Don't affect icon fonts */
i,
.icon,
[class*="icon"] {
	font-family: inherit;
}

/* Mobile typography */
@media (max-width: 768px) {

	h1 {
		font-size: clamp(36px, 10vw, 52px) !important;
	}

	h2 {
		font-size: clamp(30px, 8vw, 42px) !important;
	}

	h3 {
		font-size: clamp(24px, 6vw, 32px) !important;
	}

	p {
		font-size: 16px;
		line-height: 1.65;
	}
}

/* =========================================================
   PRODUCT PAGE - BUTTON TEXT SIZE FIX
========================================================= */

.single-product .gpipl-product-actions button,
.single-product .gpipl-product-actions a,
.single-product .gpipl-product-actions .button,
.single-product .gpipl-product-actions span {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

/* Product action buttons */
.single-product .gpipl-product-actions {
    font-size: 15px;
}

.single-product .gpipl-product-actions button,
.single-product .gpipl-product-actions a {
    min-height: 48px;
    padding: 14px 20px;
}

/* Mobile */
@media (max-width: 767px) {
    .single-product .gpipl-product-actions button,
    .single-product .gpipl-product-actions a,
    .single-product .gpipl-product-actions .button,
    .single-product .gpipl-product-actions span {
        font-size: 14px !important;
    }
}


/* =========================================================
   GPIPL EV - SINGLE PRODUCT TYPOGRAPHY & CTA FIX
   Paste at the VERY END of style.css
========================================================= */

/* ---------------------------------------------------------
   1. PRODUCT CTA BUTTONS
--------------------------------------------------------- */

body.single-product .gpipl-product-actions a,
body.single-product .gpipl-product-actions button,
body.single-product .gpipl-product-actions .button,
body.single-product .gpipl-product-actions input[type="submit"] {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Better button height and readability */
body.single-product .gpipl-product-actions a,
body.single-product .gpipl-product-actions button,
body.single-product .gpipl-product-actions .button {
    min-height: 48px !important;
    padding: 13px 20px !important;
}

/* ---------------------------------------------------------
   2. IF CTA BUTTONS USE GPIPL CTA CLASS
--------------------------------------------------------- */

body.single-product .gpipl-cta a,
body.single-product .gpipl-cta button,
body.single-product .gpipl-cta .button,
body.single-product .gpipl-product-cta a,
body.single-product .gpipl-product-cta button,
body.single-product .gpipl-product-cta .button {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

/* ---------------------------------------------------------
   3. PRODUCT MAIN TITLE
   Keep LX-2 / CX-1 etc. strong but not oversized
--------------------------------------------------------- */

body.single-product h1 {
    font-size: clamp(42px, 4.5vw, 64px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.035em !important;
    font-weight: 700 !important;
}

/* ---------------------------------------------------------
   4. PRODUCT SECTION HEADINGS
   Prevent oversized H2 headings
--------------------------------------------------------- */

body.single-product h2 {
    font-size: clamp(34px, 3.5vw, 48px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.025em !important;
    font-weight: 700 !important;
}

/* ---------------------------------------------------------
   5. SPECIFICATIONS HEADING
--------------------------------------------------------- */

body.single-product .specifications h2,
body.single-product .gpipl-specifications h2 {
    font-size: clamp(36px, 4vw, 52px) !important;
    line-height: 1.1 !important;
}

/* ---------------------------------------------------------
   6. FAQ HEADING
--------------------------------------------------------- */

body.single-product .faq h2,
body.single-product .gpipl-faq h2 {
    font-size: clamp(34px, 3.5vw, 48px) !important;
    line-height: 1.12 !important;
}

/* ---------------------------------------------------------
   7. CTA / READY TO MOVE HEADING
--------------------------------------------------------- */

body.single-product .gpipl-product-cta h2,
body.single-product .gpipl-final-cta h2 {
    font-size: clamp(34px, 4vw, 54px) !important;
    line-height: 1.08 !important;
}

/* ---------------------------------------------------------
   8. WARRANTY & SERVICE
--------------------------------------------------------- */

body.single-product .gpipl-warranty h2,
body.single-product .warranty h2 {
    font-size: clamp(34px, 4vw, 52px) !important;
    line-height: 1.1 !important;
}

/* ---------------------------------------------------------
   9. PRODUCT CTA BUTTON TEXT - EXTRA SAFETY
   Catches nested spans inside buttons
--------------------------------------------------------- */

body.single-product .gpipl-product-actions a span,
body.single-product .gpipl-product-actions button span,
body.single-product .gpipl-product-cta a span,
body.single-product .gpipl-product-cta button span {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

/* ---------------------------------------------------------
   10. MOBILE
--------------------------------------------------------- */

@media (max-width: 767px) {

    body.single-product h1 {
        font-size: 38px !important;
        line-height: 1.08 !important;
    }

    body.single-product h2 {
        font-size: 32px !important;
        line-height: 1.12 !important;
    }

    body.single-product .gpipl-product-actions a,
    body.single-product .gpipl-product-actions button,
    body.single-product .gpipl-product-actions .button,
    body.single-product .gpipl-product-cta a,
    body.single-product .gpipl-product-cta button {
        font-size: 14px !important;
        min-height: 46px !important;
        padding: 12px 16px !important;
    }

    body.single-product .gpipl-product-actions a span,
    body.single-product .gpipl-product-actions button span {
        font-size: 14px !important;
    }
}



/* =========================================================
   SINGLE PRODUCT – CTA BUTTON TYPOGRAPHY FIX
   Override existing product/button CSS
========================================================= */

.single-product .wp-block-button__link,
.single-product a.wp-element-button,
.single-product button,
.single-product .button,
.single-product .btn,
.single-product [class*="cta"] a,
.single-product [class*="cta"] button,
.single-product [class*="actions"] a,
.single-product [class*="actions"] button,
.single-product [class*="action"] a,
.single-product [class*="action"] button {
    font-family: var(--font-family-primary, 'Inter', sans-serif) !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}


/* Main product CTA buttons */
.single-product a[href*="quote"],
.single-product a[href*="demo"],
.single-product a[href*="whatsapp"],
.single-product a[href*="compare"],
.single-product a[href*="brochure"],
.single-product button {
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}


/* Make CTA buttons comfortable and premium */
.single-product a[href*="quote"],
.single-product a[href*="demo"],
.single-product a[href*="whatsapp"],
.single-product a[href*="compare"],
.single-product a[href*="brochure"] {
    min-height: 52px !important;
    padding: 15px 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* If button text is inside span */
.single-product a[href*="quote"] span,
.single-product a[href*="demo"] span,
.single-product a[href*="whatsapp"] span,
.single-product a[href*="compare"] span,
.single-product a[href*="brochure"] span,
.single-product button span {
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
}


/* Product configuration buttons/text */
.single-product .product-actions a,
.single-product .product-actions button,
.single-product .product-cta a,
.single-product .product-cta button {
    font-size: 16px !important;
    font-weight: 700 !important;
}


/* Mobile */
@media (max-width: 767px) {

    .single-product a[href*="quote"],
    .single-product a[href*="demo"],
    .single-product a[href*="whatsapp"],
    .single-product a[href*="compare"],
    .single-product a[href*="brochure"],
    .single-product button {
        font-size: 15px !important;
        min-height: 50px !important;
        padding: 14px 18px !important;
    }
}