/* ==========================================================================
   AK SMART SOLAR - CORPORATE TYPOGRAPHY & BOX DESIGN SYSTEM
   Standardized across Mobile, Tablet, Laptop, and Desktop viewports
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL TYPOGRAPHY SCALE (RESPONSIVE CLAMP BASE)
   -------------------------------------------------------------------------- */

/* H1 - Main Page Hero Headings */
h1, 
.site-h1 {
    font-size: clamp(2.125rem, 5vw, 3.75rem) !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
}

/* H2 - Main Section Titles */
h2, 
.site-h2 {
    font-size: clamp(1.625rem, 3.2vw, 2.75rem) !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: -0.025em !important;
}

/* Subtitle / Lead Paragraph immediately following an H2 */
h2 + p,
.section-subtitle,
.lead-p,
.text-center > h2 + p,
.text-left > h2 + p {
    font-size: clamp(0.9375rem, 1.1vw, 1.125rem) !important;
    line-height: 1.72 !important;
    font-weight: 500 !important;
    max-width: 52rem;
}

/* H3 - Sub-section Headings / Group Titles */
h3:not(.nav-item):not(.footer-item):not(.summary-h3),
.site-h3 {
    font-size: clamp(1.25rem, 1.8vw, 1.75rem) !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* H4 - Feature Box / Card Headings */
h4:not(.footer-title):not(.nav-item),
.site-h4 {
    font-size: clamp(1.125rem, 1.25vw, 1.35rem) !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
}

/* --------------------------------------------------------------------------
   2. CONTENT INSIDE BOXES & CARDS (UNIFIED CORPORATE BODY SIZE)
   -------------------------------------------------------------------------- */

/* All paragraphs and descriptions inside cards, boxes, and grid panels */
.corp-card p:not([class*="text-2xl"]):not([class*="text-3xl"]):not([class*="text-4xl"]):not([class*="text-5xl"]):not(.stat-val),
.hover-lift p:not([class*="text-2xl"]):not([class*="text-3xl"]):not([class*="text-4xl"]):not([class*="text-5xl"]):not(.stat-val),
[class*="rounded-[2"] p:not([class*="text-2xl"]):not([class*="text-3xl"]):not([class*="text-4xl"]):not([class*="text-5xl"]):not(.stat-val),
[class*="rounded-[3"] p:not([class*="text-2xl"]):not([class*="text-3xl"]):not([class*="text-4xl"]):not([class*="text-5xl"]):not(.stat-val),
[class*="rounded-3xl"] p:not([class*="text-2xl"]):not([class*="text-3xl"]):not([class*="text-4xl"]):not([class*="text-5xl"]):not(.stat-val),
[class*="rounded-2xl"] p:not([class*="text-2xl"]):not([class*="text-3xl"]):not([class*="text-4xl"]):not([class*="text-5xl"]):not(.stat-val),
.grid > div p:not([class*="text-2xl"]):not([class*="text-3xl"]):not([class*="text-4xl"]):not([class*="text-5xl"]):not(.stat-val),
.box-content p,
.card-body p {
    font-size: clamp(0.9375rem, 0.4vw + 0.8rem, 1.03125rem) !important;
    line-height: 1.68 !important;
    font-weight: 500 !important;
}

/* Ensure bullet lists inside cards match the exact body size */
.corp-card li,
.hover-lift li,
[class*="rounded-[2"] li,
[class*="rounded-[3"] li,
[class*="rounded-3xl"] li,
[class*="rounded-2xl"] li,
.grid > div li {
    font-size: clamp(0.9375rem, 0.4vw + 0.8rem, 1.03125rem) !important;
    line-height: 1.65 !important;
    font-weight: 500 !important;
}

/* General body text standard across pages */
body, 
p.body-text {
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
}

/* --------------------------------------------------------------------------
   3. CORPORATE-GRADE BOX & CARD DESIGN
   -------------------------------------------------------------------------- */

/* Base transition for smooth elevation */
.corp-card,
.hover-lift,
.box-lift,
.grid > div[class*="rounded-2xl"],
.grid > div[class*="rounded-3xl"],
.grid > div[class*="rounded-xl"],
.grid > div[class*="rounded-[2"],
.grid > div[class*="rounded-[3"] {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.35s ease !important;
    will-change: transform, box-shadow;
}

/* Light Card Hover Elevation & Soft Corporate Shadow */
.hover-lift:hover,
.corp-card:hover,
.box-lift:hover,
.grid > div[class*="rounded-2xl"]:hover,
.grid > div[class*="rounded-3xl"]:hover,
.grid > div[class*="rounded-xl"]:hover,
.grid > div[class*="rounded-[2"]:hover,
.grid > div[class*="rounded-[3"]:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 45px -10px rgba(7, 36, 24, 0.14), 
                0 8px 16px -6px rgba(7, 36, 24, 0.06) !important;
    border-color: rgba(59, 103, 0, 0.35) !important;
}

/* Dark Glassmorphism Cards in Dark Sections */
.bg-white\/5,
[class*="bg-white/5"] {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background-color 0.35s ease,
                border-color 0.35s ease,
                box-shadow 0.35s ease !important;
}

.bg-white\/5:hover,
[class*="bg-white/5"]:hover {
    transform: translateY(-8px) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(44, 226, 143, 0.5) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4) !important;
}

/* Generous Card Padding for Professional Readability */
.card-spacious,
.grid > div[class*="rounded-2xl"]:not([class*="p-"]),
.grid > div[class*="rounded-3xl"]:not([class*="p-"]) {
    padding: clamp(1.5rem, 2.5vw, 2.5rem) !important;
}

/* Ensure flex cards in equal-height grids stay perfectly aligned */
.grid > .hover-lift,
.grid > .corp-card,
.grid > [class*="rounded-[2"],
.grid > [class*="rounded-[3"],
.grid > [class*="rounded-3xl"] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* --------------------------------------------------------------------------
   4. SCOPED EXCEPTIONS (FOOTER, BADGES, NAV, FORMS, STATS)
   -------------------------------------------------------------------------- */

/* Stat numerical callouts */
.text-2xl { font-size: 1.5rem !important; }
.text-3xl { font-size: 1.875rem !important; }
.text-4xl { font-size: 2.25rem !important; }
.text-5xl { font-size: 3rem !important; }

/* Footer Titles & Copyright */
footer h4,
.footer-title {
    font-size: 0.8125rem !important; /* 13px */
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    color: #072418 !important;
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

footer h4::after,
.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 3px;
    background-color: #ff8c00;
    border-radius: 9999px;
    transition: width 0.3s ease, background-color 0.3s ease;
}

footer h4:hover,
.footer-title:hover {
    color: #ff8c00 !important;
    transform: translateX(4px);
}

footer h4:hover::after,
.footer-title:hover::after {
    width: 100%;
}

footer p {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.6 !important;
}

footer li, 
footer a {
    font-size: 0.875rem !important;
}

footer a:hover {
    color: #ff8c00 !important;
    transform: translateX(3px);
    display: inline-flex;
    transition: all 0.2s ease;
}

/* Top bar and navigation badges */
.top-bar-text {
    font-size: 0.75rem !important; /* 12px */
}

/* Form input fields and labels */
label {
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
}
input, select, textarea {
    font-size: 0.9375rem !important;
}

/* FAQ Accordion Summaries & Content */
details summary h3,
summary > h3,
summary h3 {
    font-size: 1.0625rem !important; /* 17px crisp clean */
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: #072418 !important;
}

details summary:hover h3 {
    color: #ff8c00 !important;
    transition: color 0.2s ease;
}

details div p,
details div {
    font-size: 0.9375rem !important; /* 15px clean readable body */
    line-height: 1.65 !important;
}

/* --------------------------------------------------------------------------
   5. DEVICE BREAKPOINT STANDARDIZATION (Mobile, Tablet, Laptop, Desktop)
   -------------------------------------------------------------------------- */

/* Mobile (< 640px) */
@media (max-width: 639px) {
    h1, .site-h1 { font-size: 2.125rem !important; line-height: 1.18 !important; }
    h2, .site-h2 { font-size: 1.625rem !important; line-height: 1.22 !important; }
    h3:not(.nav-item):not(.footer-item):not(.summary-h3), .site-h3 { font-size: 1.25rem !important; line-height: 1.3 !important; }
    h4:not(.footer-title):not(.nav-item), .site-h4 { font-size: 1.125rem !important; line-height: 1.35 !important; }
    h2 + p, .section-subtitle, .lead-p { font-size: 0.9375rem !important; line-height: 1.6 !important; }
    .hover-lift:hover { transform: translateY(-4px) !important; } /* subtle lift on touch */
}

/* Tablet (640px to 1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
    h1, .site-h1 { font-size: 2.75rem !important; line-height: 1.16 !important; }
    h2, .site-h2 { font-size: 2.125rem !important; line-height: 1.2 !important; }
    h3:not(.nav-item):not(.footer-item):not(.summary-h3), .site-h3 { font-size: 1.4rem !important; line-height: 1.3 !important; }
    h4:not(.footer-title):not(.nav-item), .site-h4 { font-size: 1.2rem !important; line-height: 1.35 !important; }
    h2 + p, .section-subtitle, .lead-p { font-size: 1rem !important; line-height: 1.65 !important; }
}

/* Laptop (1024px to 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
    h1, .site-h1 { font-size: 3.25rem !important; line-height: 1.15 !important; }
    h2, .site-h2 { font-size: 2.375rem !important; line-height: 1.18 !important; }
    h3:not(.nav-item):not(.footer-item):not(.summary-h3), .site-h3 { font-size: 1.55rem !important; line-height: 1.3 !important; }
    h4:not(.footer-title):not(.nav-item), .site-h4 { font-size: 1.25rem !important; line-height: 1.35 !important; }
    h2 + p, .section-subtitle, .lead-p { font-size: 1.0625rem !important; line-height: 1.7 !important; }
}

/* Desktop (1280px+) */
@media (min-width: 1280px) {
    h1, .site-h1 { font-size: 3.75rem !important; line-height: 1.14 !important; }
    h2, .site-h2 { font-size: 2.75rem !important; line-height: 1.18 !important; }
    h3:not(.nav-item):not(.footer-item):not(.summary-h3), .site-h3 { font-size: 1.75rem !important; line-height: 1.3 !important; }
    h4:not(.footer-title):not(.nav-item), .site-h4 { font-size: 1.35rem !important; line-height: 1.35 !important; }
    h2 + p, .section-subtitle, .lead-p { font-size: 1.125rem !important; line-height: 1.72 !important; }
}