/*
Theme Name: Elite Global Energy Premium Child
Theme URI: https://example.com
Description: Child theme for Blocksy
Author: 24studiofilms
Version: 2.0
Template: blocksy
Text Domain: elite-global-energy-premium-child
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Onest:wght@400;600;700;800&display=swap');

:root {
    /* ==========================
       ELITE GLOBAL ENERGY — LOGO-MATCHED PALETTE
    ========================== */
    --primary: #01204F;        /* Logo Navy */
    --primary-dark: #010F28;   /* Deep Navy (near-black) */
    --secondary: #00D97E;      /* Amplified Logo Green — bold accent */
    --secondary-hover: #00BD6C;

    /* Neutrals */
    --white: #FFFFFF;
    --background: #FDFDFD;     /* Subtle off-white for premium feel */
    --surface: #FFFFFF;
    --heading: #01204F;        /* Navy for headings (matches logo, ties in nicely) */
    --text: #475569;           /* Softened gray for body text */
    --text-light: #94A3B8;
    --border: #E2E8F0;
    --dark: #010F28;

    /* ========================== 
       FLUID TYPOGRAPHY (unchanged)
    ========================== */
    --heading-font: "Onest", sans-serif;
    --body-font: "Inter", sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: clamp(1.75rem, 4vw, 2.25rem);
    --fs-4xl: clamp(2.25rem, 5vw, 3rem);
    --fs-5xl: clamp(2.75rem, 6vw, 4rem);
    --fs-6xl: clamp(3.25rem, 8vw, 5.5rem);
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --lh-heading: 1.05;
    --ls-heading: -0.03em;
    --lh-body: 1.6;

    /* ========================== 
       SPACING & RADIUS (unchanged)
    ========================== */
    --space-unit: 1rem;
    --space-xs: calc(var(--space-unit) * 0.5);
    --space-sm: var(--space-unit);
    --space-md: calc(var(--space-unit) * 2);
    --space-lg: calc(var(--space-unit) * 4);
    --space-xl: calc(var(--space-unit) * 6);
    --space-section: clamp(5rem, 10vw, 10rem);
    --container: 1320px;
    --radius-round: 100px;
    --radius-lg: 24px;
    --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --shadow-premium: 0 20px 40px rgba(1,32,79,0.08);
}
/* ==========================================
   REFINED GLOBAL RESET
========================================== */
*, *::before, *::after {
    margin: 0; padding: 0; box-sizing: border-box;
}

body {
    font-family: var(--body-font);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--text);
    background-color: var(--background);
    -webkit-font-smoothing: antialiased;
}

/* ==========================
   TYPOGRAPHY RULES
========================== */
h1, h2, h3, h4 {
    font-family: var(--heading-font);
    color: var(--heading);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    font-weight: var(--fw-bold);
}

h1 { font-size: var(--fs-6xl); }
h2 { font-size: var(--fs-5xl); }
h3 { font-size: var(--fs-4xl); }

p {
    max-width: 65ch; /* Prevents lines from being too long/hard to read */
    margin-bottom: var(--space-sm);
}

/* ==========================
   PREMIUM BUTTONS (Ref: Biogax Style)
========================== */
.btn-premium {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 36px;
    background: var(--secondary);
    color: var(--primary);
    font-family: var(--heading-font);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-round);
    transition: var(--transition);
    cursor: pointer;
    border: 1px solid var(--secondary);
}

.btn-premium:hover {
    background: var(--primary);
    color: var(--secondary);
    border-color: var(--primary);
    transform: translateY(-3px);
}

/* Dark version of the button (as seen in your 'Click Here' ref) */
.btn-dark {
    background: var(--primary);
    color: var(--white);
    border: 1px solid var(--primary);
}

.btn-dark:hover {
    background: transparent;
    color: var(--primary);
}

/* ==========================
   LAYOUT HELPERS
========================= */
.section-padding {
    padding-block: var(--space-section);
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding-inline: var(--space-md);
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    align-items: center;
}

@media (max-width: 991px) {
    .grid-2 { grid-template-columns: 1fr; }
}