/* Custom Typography Overrides - Premium legible fonts site-wide */
/* IMPORTANT: This file ONLY overrides font-size, font-weight, line-height, and letter-spacing.
   It does NOT touch color, so that Tailwind's hover color transitions (group-hover:text-white,
   group-hover:text-slate-300, etc.) continue to work perfectly. */

/* ======================================================= */
/* 1. BASE TYPOGRAPHY: Font size/weight/spacing overrides   */
/* ======================================================= */
.group p,
.rounded-2xl p,
.rounded-3xl p,
.shadow-md p,
.shadow-sm p,
.faq-content p,
.faq-item p,
#process-slider-container p,
.process-step p,
#process-section p,
.step-card p,
.card p {
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    line-height: 1.625 !important;
    letter-spacing: 0.01em !important;
}

/* Specific overrides for steps/process list cards */
#process-slider-container p,
#process-section p,
.process-step p {
    font-size: 0.95rem !important;
    font-weight: 400 !important;
}

/* FAQ paragraphs inside answers */
.faq-content p,
.faq-item p {
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    line-height: 1.625 !important;
}

/* Custom h1 Heading Size Reduction - site-wide for cleaner, more premium display */
h1.text-4xl,
h1[class*="text-4xl"],
h1.text-5xl,
h1[class*="text-5xl"],
h1.text-6xl,
h1[class*="text-6xl"] {
    font-size: 2.25rem !important; /* ~36px (from 40px) */
    line-height: 1.25 !important;
}

@media (min-width: 768px) {
    h1.text-4xl,
    h1[class*="text-4xl"],
    h1.text-5xl,
    h1[class*="text-5xl"],
    h1.text-6xl,
    h1[class*="text-6xl"] {
        font-size: 2.75rem !important; /* ~44px (from 48px) */
    }
}

@media (min-width: 1024px) {
    h1.text-4xl,
    h1[class*="text-4xl"],
    h1.text-5xl,
    h1[class*="text-5xl"],
    h1.text-6xl,
    h1[class*="text-6xl"] {
        font-size: 3.25rem !important; /* ~52px (from 60px) */
    }
}

/* ======================================================= */
/* 2. UTILITY CLASS SIZE/WEIGHT OVERRIDES                   */
/*    (no color overrides - Tailwind handles colors)        */
/* ======================================================= */
p.text-xs,
p.text-\[11px\],
p.text-\[13px\],
p.text-\[12px\],
span.text-xs {
    font-size: 0.95rem !important;
    font-weight: 400 !important;
}

p.font-light,
span.font-light {
    font-weight: 400 !important;
}

/* ======================================================= */
/* 3. CARD CONTENT ALIGNMENT IN GRIDS                       */
/*    Forces headings to occupy consistent vertical space   */
/*    so descriptions start at the same position across     */
/*    cards in the same row.                                */
/* ======================================================= */

/* --- 3-column and 2-column grid cards with h3 headings --- */
/* Cards inside grid layouts: lock heading height so content aligns */
.grid > .group > h3,
.grid > .group > div > h3,
.grid > .group > .relative > h3,
.grid > div > .group > h3,
.grid > div > .group > div > h3,
.grid > div > h3 {
    min-height: 4.5rem !important; /* Locked to 72px so even 2-line uppercase titles in case studies align perfectly! */
    display: flex !important;
    align-items: flex-start !important;
}

/* Dark grid cards (like hire pages with numbered boxes) */
.grid > .group h3[class*="uppercase"] {
    min-height: 3.5rem;
    display: flex;
    align-items: flex-start;
}

/* --- 6-card dark grids (hire pages, services offered) with border grids --- */
/* These use p-10 cards inside gap-[1px] grids or border grids */
.grid[class*="gap-[1px]"] > .group h3,
.grid[class*="border"] > .group h3 {
    min-height: 3.5rem;
    display: flex;
    align-items: flex-start;
}

/* --- Cards with h3 text-2xl (expertise sections, testing, architecture) --- */
.grid > .group > h3.text-2xl,
.grid > .group > h3[class*="text-2xl"] {
    min-height: 4.5rem; /* ~72px for larger text-2xl headings */
    display: flex;
    align-items: flex-start;
}

/* --- Cards with h3 text-lg (benefits, AI quality, process cards) --- */
.grid > .group > h3.text-lg,
.grid > .group > h3[class*="text-lg"] {
    min-height: 3rem; /* ~48px for smaller text-lg headings */
    display: flex;
    align-items: flex-start;
}

/* --- Cards with h3 text-xl (key benefits, hire page white cards) --- */
.grid > .group > h3.text-xl,
.grid > .group > h3[class*="text-xl"] {
    min-height: 3.5rem;
    display: flex;
    align-items: flex-start;
}
/* --- Paragraph Alignment inside Grid Cards --- */
/* Remove mt-auto from paragraphs inside grid cards so that they start at the same vertical position */
.grid > .group p,
.grid > div > .group p,
.grid > .group > p,
.grid > div > .group > p,
.grid > .group > div > p,
.grid > div > p {
    margin-top: 1rem !important; /* Forces consistent spacing instead of being pushed to the bottom via mt-auto */
}

/* ======================================================= */
/* 4. MOBILE RESPONSIVE: Remove min-heights on small screens */
/*    so cards stack naturally without wasted whitespace     */
/* ======================================================= */
@media (max-width: 767px) {
    .grid > .group > h3,
    .grid > .group > div > h3,
    .grid > .group > .relative > h3,
    .grid > div > .group > h3,
    .grid > div > .group > div > h3,
    .grid > .group h3[class*="uppercase"],
    .grid[class*="gap-[1px]"] > .group h3,
    .grid[class*="border"] > .group h3,
    .grid > .group > h3.text-2xl,
    .grid > .group > h3[class*="text-2xl"],
    .grid > .group > h3.text-lg,
    .grid > .group > h3[class*="text-lg"],
    .grid > .group > h3.text-xl,
    .grid > .group > h3[class*="text-xl"],
    .grid > div > h3 {
        min-height: unset !important;
        display: block !important;
    }
}

/* ======================================================= */
/* 5. FOOTER RESET: Prevent card layout alignment rules    */
/*    from creating huge gaps in footer columns             */
/* ======================================================= */
#site-footer .grid > div > h3 {
    min-height: unset !important;
    display: block !important;
    margin-bottom: 0 !important;
}

#site-footer .grid > div > p,
#site-footer p {
    margin-top: 0.25rem !important;
}

/* ======================================================= */
/* 6. GLOBAL CORNER RADIUS ADJUSTMENTS                    */
/*    Reduces excessive roundness site-wide to a sleek,   */
/*    modern rounded-2xl (16px) instead of rounded-3xl    */
/* ======================================================= */
[class*="rounded-[3rem]"],
.rounded-\[3rem\] {
    border-radius: 1rem !important; /* ~16px (rounded-2xl) */
}

.rounded-3xl,
[class*="rounded-3xl"] {
    border-radius: 1rem !important; /* ~16px (rounded-2xl) */
}

.rounded-2xl,
[class*="rounded-2xl"] {
    border-radius: 0.75rem !important; /* ~12px (rounded-xl) */
}

/* Reduce FAQ item accordion rounded corners */
.faq-item,
.rounded-2xl.faq-item {
    border-radius: 0.75rem !important; /* ~12px (rounded-xl) */
}