/*
Theme Name: ITM Group
Description: Custom WordPress theme for ITM Group website with Tailwind CSS styling
Version: 1.1
Author: ITM Group
CACHE BUSTER: Typography Update v2.0
*/

/* Typography System - 2025 Best Practices */
:root {
    /* Base typography scale using 1.25 ratio (Major Third) - INCREASED SIZES */
    --font-size-xs: clamp(0.875rem, 1vw, 1rem);          /* 14-16px */
    --font-size-sm: clamp(1rem, 1.125vw, 1.125rem);      /* 16-18px */
    --font-size-base: clamp(1.125rem, 1.25vw, 1.375rem); /* 18-22px */
    --font-size-lg: clamp(1.25rem, 1.5vw, 1.5rem);       /* 20-24px */
    --font-size-xl: clamp(1.5rem, 2vw, 2rem);            /* 24-32px */
    --font-size-2xl: clamp(1.75rem, 2.5vw, 2.25rem);     /* 28-36px */
    --font-size-3xl: clamp(2.25rem, 3.5vw, 3rem);        /* 36-48px */
    --font-size-4xl: clamp(2.5rem, 4vw, 3.5rem);         /* 40-56px */
    --font-size-5xl: clamp(3rem, 5vw, 4rem);             /* 48-64px */
    --font-size-6xl: clamp(4rem, 7vw, 6rem);             /* 64-96px */
    --font-size-hero: clamp(3rem, 7vw, 5rem);            /* 48-80px - Hero specific */
    
    /* Line heights for optimal readability */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    background-color: #EEEEE7; /* Warm Gray */
    color: #334155; /* Dark Gray Text */
}

.text-burgundy { color: #4C0013; }
.bg-burgundy { background-color: #4C0013; }
.bg-orange { background-color: #F97316; }
.text-orange { color: #F97316; }
.border-orange { border-color: #F97316; }
.hover-bg-orange-dark:hover { background-color: #EA580C; }

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.aspect-ratio-16-9 {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Fix vertical alignment and spacing in pillar content */
.pillar-content img {
    margin: 1.5rem 0 1.5rem 1.5rem;
    align-self: center;
}

.pillar-content > div > div {
    align-self: center;
}

/* --- Accordion Icon Styles --- */
.accordion-icon {
    transition: transform 0.3s ease-in-out;
    flex-shrink: 0;
}
.is-active .accordion-icon {
    transform: rotate(180deg);
}
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* --- Content Panel Transition Styles --- */
.content-panel-wrapper {
    position: relative;
}
.pillar-content, .process-content-panel, .solution-content-panel, .test-content-panel {
    transition: opacity 0.4s ease-in-out;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
}
.pillar-content.is-active, .process-content-panel.is-active, .solution-content-panel.is-active, .test-content-panel.is-active {
    opacity: 1;
    position: absolute;
    pointer-events: auto;
}

/* Override for test content panels to maintain padding */
.test-content-panel {
    position: absolute;
    top: 0;
    left: 0;
    padding: 4rem !important;
}
.test-content-panel.is-active {
    position: absolute;
    padding: 4rem !important;
}

/* Apply same fix to production solution content panels */
.solution-content-panel {
    position: absolute;
    top: 0;
    left: 0;
    padding: 4rem !important;
}
.solution-content-panel.is-active {
    position: absolute;
    padding: 4rem !important;
}

/* Process content panels - simple display like Version 1 test */
.process-content-panel {
    display: none;
}
.process-content-panel.is-active {
    display: block;
}

/* Mobile accordion styles - NO TRANSITIONS to prevent interference */
.mobile-accordion-content {
    /* transition: max-height 0.3s ease-out, opacity 0.3s ease-out; DISABLED */
    display: block;
}

.mobile-accordion-content.is-active {
    /* transition: max-height 0.5s ease-in, opacity 0.3s ease-in; DISABLED */
    display: block;
}

/* Mobile process step accordion styles */
.process-step-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.process-step-content.is-active {
    opacity: 1;
    overflow: visible;
    transition: max-height 0.5s ease-in, opacity 0.3s ease-in;
}

.process-step-icon {
    transition: transform 0.3s ease-in-out;
    flex-shrink: 0;
}

.process-step-card {
    transition: border-color 0.3s ease;
}

/* Brand elements */
.bg-brand-warm {
    background-color: #EEEEE7;
}

/* Brand motif - expanding/minimizing brackets */
.brand-motif {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    margin-right: 12px;
    /* Aligns the motif nicely with the large headline text */
    transform: translateY(2px);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.brand-motif:hover {
    transform: translateY(2px) scale(0.6);
}

/* Creates the top and left lines of the bracket using pseudo-elements */
.brand-motif::before,
.brand-motif::after {
    content: '';
    position: absolute;
    background-color: #F97316; /* Uses brand orange color */
}

/* The top line of the bracket */
.brand-motif::before {
    left: 0;
    top: 0;
    width: 100%;
    height: 4px; /* Thickness of the line */
}

/* The left line of the bracket */
.brand-motif::after {
    left: 0;
    top: 0;
    width: 4px; /* Thickness of the line */
    height: 100%;
}

.particle-field-sparse {
    position: relative;
}

.particle-field-sparse::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 15% 25%, #F97316 2px, transparent 3px),
        radial-gradient(circle at 75% 15%, #4C0013 2px, transparent 3px),
        radial-gradient(circle at 25% 75%, #F97316 2px, transparent 3px),
        radial-gradient(circle at 85% 65%, #4C0013 2px, transparent 3px),
        radial-gradient(circle at 45% 35%, #F97316 2px, transparent 3px),
        radial-gradient(circle at 65% 85%, #4C0013 2px, transparent 3px);
    background-size: 400px 400px, 450px 450px, 350px 350px, 500px 500px, 380px 380px, 420px 420px;
    pointer-events: none;
    z-index: 1 !important;
}

/* Ensure ellipse appears above sparse particles */
.particle-field-sparse .span-ellipse::before {
    z-index: 1;
}

/* Ensure content appears above both particles and ellipse */
.particle-field-sparse > * {
    position: relative;
    z-index: 2;
}

/* Left-side elliptical shape */
.span-ellipse-left {
    position: relative;
}

.span-ellipse-left::before {
    content: '';
    position: absolute;
    top: 10%;
    left: -25%;
    width: 36%;
    height: 180%;
    background: linear-gradient(135deg, #F97316 0%, #EA580C 100%);
    border-radius: 50%;
    transform: translateY(0%);
    opacity: 0.12;
    z-index: 1;
}

/* Ensure content appears above the left ellipse */
.span-ellipse-left > * {
    position: relative;
    z-index: 2;
}

/* Ensure left ellipse appears above sparse particles */
.particle-field-sparse .span-ellipse-left::before {
    z-index: 1;
}

/* Geometric shapes for section continuity */

/* Promise section - Diamond pattern */
.geo-diamonds::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 5%;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, rgba(249,115,22,0.08) 0%, rgba(234,88,12,0.12) 100%);
    transform: rotate(45deg);
    z-index: 1;
    pointer-events: none;
}

/* Partners section - Triangle clusters */
.geo-triangles::before {
    content: '';
    position: absolute;
    top: 15%;
    right: 8%;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 52px solid rgba(76,0,19,0.08);
    box-shadow: 25px 55px 0 -17px rgba(249,115,22,0.10);
    z-index: 1;
    pointer-events: none;
}

/* Solutions section - Hexagonal accent */
.geo-hexagon::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 8%;
    width: 50px;
    height: 50px;
    background: rgba(76,0,19,0.08);
    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
    z-index: 1;
    pointer-events: none;
}

/* Process section - Overlapping circles */
.geo-circles::before {
    content: '';
    position: absolute;
    top: 40%;
    right: 6%;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(249,115,22,0.06) 40%, rgba(249,115,22,0.12) 70%, transparent 100%);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* Insights section - Rectangular grid */
.geo-grid::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 6%;
    width: 40px;
    height: 40px;
    background: 
        linear-gradient(90deg, rgba(76,0,19,0.08) 1px, transparent 1px),
        linear-gradient(rgba(76,0,19,0.08) 1px, transparent 1px);
    background-size: 10px 10px;
    z-index: 1;
    pointer-events: none;
}

/* HTML element-based geometric shapes */
.shape-octagon {
    position: absolute;
    top: 60%;
    left: 3%;
    width: 45px;
    height: 45px;
    background: rgba(76,0,19,0.09);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    z-index: 1;
    pointer-events: none;
}

.shape-starburst {
    position: absolute;
    top: 25%;
    right: 1%;
    width: 55px;
    height: 55px;
    background: 
        conic-gradient(from 0deg, 
            rgba(249,115,22,0.10) 0deg 45deg, 
            transparent 45deg 90deg,
            rgba(249,115,22,0.08) 90deg 135deg,
            transparent 135deg 180deg,
            rgba(249,115,22,0.06) 180deg 225deg,
            transparent 225deg 270deg,
            rgba(249,115,22,0.04) 270deg 315deg,
            transparent 315deg 360deg);
    border-radius: 50%;
    z-index: 1;
    pointer-events: none;
}

/* Navigation styles */
.nav-link-active {
    color: #F97316;
}

/* TEST PARTICLE SECTION */
.test-particles {
    position: relative;
}

.test-particles::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 10% 10%, red 8px, transparent 10px),
        radial-gradient(circle at 30% 20%, red 8px, transparent 10px),
        radial-gradient(circle at 50% 30%, red 8px, transparent 10px),
        radial-gradient(circle at 70% 40%, red 8px, transparent 10px),
        radial-gradient(circle at 90% 50%, red 8px, transparent 10px),
        radial-gradient(circle at 20% 60%, red 8px, transparent 10px),
        radial-gradient(circle at 40% 70%, red 8px, transparent 10px),
        radial-gradient(circle at 60% 80%, red 8px, transparent 10px),
        radial-gradient(circle at 80% 90%, red 8px, transparent 10px);
    background-size: 100px 100px;
    pointer-events: none;
    z-index: 1;
}

/* Ensure content appears above test particles */
.test-particles > * {
    position: relative;
    z-index: 2;
}

/* Solution card active state */
.solution-card.is-active {
    background-color: white !important;
    border-left-color: #F97316 !important;
}

.solution-card:not(.is-active) {
    background-color: #f8fafc;
    border-left-color: transparent;
}

/* Pillar card active state - consistent left border styling */
.pillar-card.is-active {
    background-color: white !important;
    border-left-color: #F97316 !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
}

.pillar-card:not(.is-active) {
    background-color: #f8fafc;
    border-left-color: transparent;
}

/* Typography Utility Classes */
.text-fluid-xs { font-size: var(--font-size-xs); line-height: var(--line-height-normal); }
.text-fluid-sm { font-size: var(--font-size-sm); line-height: var(--line-height-normal); }
.text-fluid-base { font-size: var(--font-size-base); line-height: var(--line-height-normal); }
.text-fluid-lg { font-size: var(--font-size-lg); line-height: var(--line-height-normal); }
.text-fluid-xl { font-size: var(--font-size-xl); line-height: var(--line-height-normal); }
.text-fluid-2xl { font-size: var(--font-size-2xl); line-height: var(--line-height-tight); }
.text-fluid-3xl { font-size: var(--font-size-3xl); line-height: var(--line-height-tight); }
.text-fluid-4xl { font-size: var(--font-size-4xl); line-height: var(--line-height-tight); }
.text-fluid-5xl { font-size: var(--font-size-5xl); line-height: var(--line-height-tight); }
.text-fluid-6xl { font-size: var(--font-size-6xl); line-height: var(--line-height-tight); }
.text-fluid-hero { font-size: var(--font-size-hero); line-height: var(--line-height-tight); }

/* Standardized Typography Components - FORCED WITH !IMPORTANT */
.hero-title,
h1.hero-title,
section h1.hero-title {
    font-size: var(--font-size-hero) !important;
    line-height: var(--line-height-tight) !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
}

.section-title {
    font-size: var(--font-size-3xl) !important;
    line-height: var(--line-height-tight) !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
}

.subsection-title {
    font-size: var(--font-size-xl) !important;
    line-height: var(--line-height-normal) !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
}

.content-title {
    font-size: var(--font-size-2xl) !important;
    line-height: var(--line-height-tight) !important;
    font-weight: 700 !important;
    margin-bottom: 0.75rem !important;
}

.body-large {
    font-size: var(--font-size-lg) !important;
    line-height: var(--line-height-relaxed) !important;
    margin-bottom: 1rem !important;
}

.body-text {
    font-size: var(--font-size-base) !important;
    line-height: var(--line-height-normal) !important;
    margin-bottom: 1rem !important;
}

.small-text {
    font-size: var(--font-size-sm) !important;
    line-height: var(--line-height-normal) !important;
}

.micro-text {
    font-size: var(--font-size-xs) !important;
    line-height: var(--line-height-normal) !important;
}

/* Button styles */
.btn-primary {
    background-color: #F97316;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: #EA580C;
}

.btn-secondary {
    background-color: transparent;
    color: #4C0013;
    border: 2px solid #4C0013;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    transition: all 0.3s;
}

.btn-secondary:hover {
    background-color: #4C0013;
    color: white;
}