@import './accessibility.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply text-firm-ink antialiased;
    }

    *:focus-visible {
        @apply outline-2 outline-offset-2 outline-firm-red-500 rounded-sm;
    }
}

@layer components {
    .section-spacing {
        @apply py-16 md:py-20;
    }

    .firm-container {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }

    /* Buttons */
    .btn-primary {
        @apply inline-flex items-center justify-center bg-firm-red-500 text-white px-6 py-3 font-semibold border-2 border-firm-red-500 hover:bg-firm-red-600 hover:border-firm-red-600 transition-colors;
    }

    .btn-secondary {
        @apply inline-flex items-center justify-center bg-white text-firm-ink px-6 py-3 font-semibold border-2 border-firm-ink hover:bg-slate-50 transition-colors;
    }

    .btn-secondary-inverse {
        @apply inline-flex items-center justify-center bg-transparent text-white px-6 py-3 font-semibold border-2 border-white hover:bg-white hover:text-firm-ink transition-colors;
    }

    /* Cards — flat, human, brochure-like */
    .firm-card {
        @apply bg-white border border-slate-200 p-6 sm:p-8 transition-all duration-200;
    }

    .firm-card-accent {
        @apply firm-card border-l-4 border-l-firm-red-500;
    }

    .firm-card-interactive {
        @apply firm-card-accent hover:-translate-y-1 hover:shadow-lg hover:border-firm-red-300 hover:border-l-firm-red-500;
    }

    .firm-card:hover {
        @apply border-slate-300;
    }

    /* Decorative section — solid surface with accent edge */
    .section-texture {
        @apply bg-firm-surface border-t-4 border-firm-red-500/20;
    }

    /* Stat / trust pills */
    .stat-strip {
        @apply bg-white border-y border-slate-200;
    }

    .stat-item {
        @apply flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 py-5 px-4 text-center sm:text-left;
    }

    .stat-value {
        @apply font-serif text-2xl font-bold text-firm-red-500 leading-none;
    }

    .stat-label {
        @apply text-sm text-slate-600 leading-snug;
    }

    /* Pull quote */
    .pull-quote {
        @apply relative pl-6 border-l-4 border-firm-red-500 font-serif text-xl sm:text-2xl text-firm-ink leading-relaxed italic;
    }

    .pull-quote::before {
        content: '\201C';
        @apply absolute -left-1 -top-2 font-serif text-5xl text-firm-red-200 leading-none select-none;
    }

    /* Section heading rule */
    .heading-rule {
        @apply w-12 h-1 bg-firm-red-500 mt-4;
    }

    .heading-rule-center {
        @apply heading-rule mx-auto;
    }

    /* Practice area number */
    .area-number {
        @apply font-serif text-3xl font-bold text-firm-red-200 leading-none mb-3 group-hover:text-firm-red-400 transition-colors;
    }

    /* Testimonial */
    .testimonial-card::before {
        content: '\201C';
        @apply absolute top-4 left-6 font-serif text-5xl text-firm-red-400 leading-none;
    }

    .testimonial-card-dark {
        @apply relative pt-10 bg-white/5 border border-white/10 p-6 sm:p-8 transition-colors hover:bg-white/10;
    }

    .testimonial-card-dark::before {
        content: '\201C';
        @apply absolute top-4 left-6 font-serif text-5xl text-firm-red-400 leading-none;
    }

    /* CTA band */
    .cta-band {
        @apply bg-firm-ink text-white relative overflow-hidden;
    }

    .cta-band-accent {
        @apply absolute top-0 right-0 w-32 h-full bg-firm-red-500 hidden lg:block;
    }

    /* Practice area cards with image backdrop */
    .practice-card {
        @apply firm-card overflow-hidden p-0 hover:border-firm-red-300 transition-all duration-200;
    }

    .practice-card-media {
        @apply relative h-44 overflow-hidden;
    }

    .practice-card-media img {
        @apply absolute inset-0 w-full h-full object-cover transition-transform duration-300;
    }

    .practice-card:hover .practice-card-media img {
        @apply scale-105;
    }

    .practice-card-overlay {
        @apply absolute inset-0 bg-firm-ink/50;
    }

    .practice-card-body {
        @apply p-6 sm:p-7;
    }

    /* Info strip */
    .info-strip {
        @apply bg-white border-y border-slate-200;
    }

    .info-strip-item {
        @apply flex items-start gap-4 py-6 px-4 sm:px-6;
    }

    .info-strip-icon {
        @apply flex-shrink-0 w-10 h-10 bg-slate-100 text-firm-ink flex items-center justify-center;
    }

    /* Forms */
    .firm-input {
        @apply w-full px-4 py-3 border border-slate-300 bg-white text-firm-ink focus:border-firm-red-500 focus:ring-2 focus:ring-firm-red-500/30;
    }

    .firm-label {
        @apply block text-sm font-semibold text-firm-ink mb-2;
    }

    /* Prose */
    .prose-firm {
        @apply text-slate-700 leading-relaxed;
    }

    .prose-firm h2 {
        @apply font-serif text-2xl font-bold text-firm-ink mt-8 mb-4;
    }

    .prose-firm p {
        @apply mb-4;
    }

    /* Icon badge — solid, no gradient */
    .icon-badge {
        @apply w-10 h-10 bg-slate-100 text-firm-ink flex items-center justify-center flex-shrink-0;
    }

    .icon-badge-circle {
        @apply icon-badge rounded-full;
    }

    /* Page transition */
    .page-transition {
        animation: pageFadeIn 0.4s ease-out;
    }

    @keyframes pageFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* FAQ accordion */
    .faq-item {
        @apply bg-white border border-slate-200;
    }

    .faq-item summary {
        @apply cursor-pointer font-semibold text-firm-ink p-5 sm:p-6 list-none flex justify-between items-center gap-4;
    }

    .faq-item summary::-webkit-details-marker {
        display: none;
    }

    .faq-item[open] summary {
        @apply border-b border-slate-200 bg-firm-surface;
    }

    .faq-item .faq-answer {
        @apply p-5 sm:p-6 text-slate-600 leading-relaxed;
    }

    /* Mobile navigation menu */
    .mobile-menu {
        @apply border-t border-slate-200 bg-white overflow-hidden;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transform-origin: top;
        pointer-events: none;
        transition:
            max-height 0.36s ease,
            opacity 0.24s ease,
            transform 0.28s ease,
            visibility 0s linear 0.36s;
    }

    .mobile-menu.mobile-menu-open {
        max-height: 32rem;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
        transition:
            max-height 0.4s ease,
            opacity 0.24s ease,
            transform 0.28s ease,
            visibility 0s linear 0s;
    }

    .mobile-menu-item {
        opacity: 0;
        transform: translateX(-16px);
    }

    .mobile-menu.mobile-menu-open .mobile-menu-item {
        animation: mobileMenuItemIn 0.42s ease-out forwards;
        animation-delay: calc(60ms + (var(--item-index, 0) * 60ms));
    }

    @keyframes mobileMenuItemIn {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .mobile-menu,
        .mobile-menu.mobile-menu-open {
            transition: none;
            transform: none;
        }

        .mobile-menu-item,
        .mobile-menu.mobile-menu-open .mobile-menu-item {
            opacity: 1;
            transform: none;
            animation: none;
        }
    }
}

[x-cloak] {
    display: none;
}