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

@layer base {
  /* ================================================================
     GLOBAL TYPOGRAPHY RULES — Enforced across all pages
     ================================================================ */
  html {
    font-family: "Inter", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    height: 100%;
  }

  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: "Noto Serif", serif;
  }

  h1, .font-size-h1 {
    @apply text-4xl md:text-[5rem] lg:text-[6rem] leading-[1.1] font-headline tracking-tighter;
  }
  h2, .font-size-h2 {
    @apply text-3xl md:text-5xl lg:text-6xl leading-tight font-headline tracking-tight;
  }
  h3, .font-size-h3 {
    @apply text-xl md:text-2xl lg:text-3xl leading-snug font-headline;
  }
  h4, .font-size-h4 {
    @apply text-lg md:text-xl font-headline;
  }
  .subtitle {
    @apply text-[10px] md:text-xs font-label tracking-[0.3em] uppercase text-secondary font-bold;
  }
  p, .font-size-body {
    @apply text-base md:text-lg font-light leading-relaxed font-body text-surface-variant;
  }
}

/* ================================================================
   MATERIAL SYMBOLS
   ================================================================ */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ================================================================
   UNIFORM HERO SECTION HEIGHT (Inner Pages)
   ================================================================ */
.hero-section {
    min-height: 85vh;
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .hero-section {
        min-height: 70vh;
    }
}

/* Inner page hero headings — reduced 20% for minimal, non-dominating look */
.hero-section h1 {
    font-size: 3rem !important;
    line-height: 1.1 !important;
}
@media (min-width: 768px) {
    .hero-section h1 {
        font-size: 4rem !important;
    }
}
@media (min-width: 1024px) {
    .hero-section h1 {
        font-size: 5rem !important;
    }
}

/* Section heading gold accent line */
.section-heading-accent {
    width: 4rem;
    height: 2px;
    background-color: #C9A84C;
    margin-top: 1.5rem;
}

/* Section headings — uniform style across all pages */
.section-title {
    font-family: "Noto Serif", serif;
    font-weight: 700;
    color: #1B2A4A;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* ================================================================
   SCROLL ANIMATIONS
   ================================================================ */
.animate-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.animate-scale {
    transform: scale(1.05);
    transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-scale.is-visible {
    transform: scale(1);
}

.animate-reveal {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.animate-reveal.is-visible {
    clip-path: inset(0 0 0 0);
}

/* ================================================================
   GLASSMORPHISM
   ================================================================ */
.glass-panel {
    background: rgba(254, 249, 241, 0.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none !important;
}

/* ================================================================
   ARCHITECT OVERLAY (overlap effect)
   ================================================================ */
.architect-overlay {
    position: relative;
    z-index: 10;
    margin-top: -10%; 
    background-color: var(--surface-container-highest, #e7e2da);
}

/* General typographic polish */
.tracking-tight-architect {
    letter-spacing: -0.02em;
}

/* ================================================================
   FAQ SECTION — Smooth open/close + visible answers
   ================================================================ */
.faq-item summary {
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary::marker {
    display: none;
    content: '';
}

.faq-answer {
    animation: faqReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes faqReveal {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================================
   MOBILE NAV
   ================================================================ */
.nav-links {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(100%);
}
.nav-links.open {
    transform: translateX(0);
}
.nav-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.nav-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Mobile nav active link — gold left border accent */
.mobile-nav-link.active {
    color: #C9A84C !important;
    border-left-color: #C9A84C !important;
    opacity: 1 !important;
}

/* Mobile nav link stagger animation */
.nav-links.open .mobile-nav-link {
    animation: mobileNavSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.nav-links.open .mobile-nav-link:nth-child(1) { animation-delay: 0.05s; }
.nav-links.open .mobile-nav-link:nth-child(2) { animation-delay: 0.1s; }
.nav-links.open .mobile-nav-link:nth-child(3) { animation-delay: 0.15s; }
.nav-links.open .mobile-nav-link:nth-child(4) { animation-delay: 0.2s; }
.nav-links.open .mobile-nav-link:nth-child(5) { animation-delay: 0.25s; }

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

/* Hamburger → X Animation */
.nav-toggle span {
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: block;
}
.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}
.nav-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
}

/* ================================================================
   NAVBAR SCROLLED STATE
   ================================================================ */
.navbar {
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
.navbar.scrolled {
    background-color: #FEF9F1;
    box-shadow: 0 4px 20px rgba(27, 42, 74, 0.05);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* ================================================================
   MOBILE BOTTOM NAVIGATION BAR
   ================================================================ */
.mobile-bottom-nav {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.bottom-nav-link {
    transition: color 0.3s ease;
}

.bottom-nav-link.active {
    color: #C9A84C !important;
}

.bottom-nav-link.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background-color: #C9A84C;
    border-radius: 0 0 2px 2px;
}

/* ================================================================
   WHATSAPP FLOATING BUTTON
   ================================================================ */
.whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: whatsappPulse 2s infinite;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.6);
}
.whatsapp-float svg {
    width: 32px;
    height: 32px;
    fill: #ffffff;
}

/* On mobile screens, elevate WhatsApp float above the 64px bottom nav bar */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 5.25rem !important;
        right: 1rem !important;
        width: 50px !important;
        height: 50px !important;
    }
    .whatsapp-float svg {
        width: 26px !important;
        height: 26px !important;
    }
}

/* ================================================================
   MOBILE RESPONSIVE REFINEMENTS
   ================================================================ */

/* --- Extra small screens (phones ≤480px) --- */
@media (max-width: 480px) {
    .hero-section h1, .hero-section .font-size-h1 {
        font-size: 2rem !important;
        line-height: 1.15 !important;
    }

    /* Homepage hero title */
    h1.font-size-h1 {
        font-size: 2.5rem !important;
    }
}

/* --- Mobile screens (≤768px) --- */
@media (max-width: 768px) {
    /* Tighter padding on mobile */
    .navbar {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Better footer spacing on mobile */
    footer {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: 6.5rem !important; /* Pushes content above bottom nav and preserves dark navy bg */
    }

    /* Bottom padding for content above bottom nav - removed to avoid white space below footer */
    body {
        padding-bottom: 0;
    }

    /* Reposition WhatsApp button above bottom nav */
    .whatsapp-float {
        bottom: 5.5rem;
    }

    /* Fix philosophy section floating badge overflow */
    .architect-overlay {
        margin-top: -5%;
    }

    /* FAQ section better mobile padding */
    .faq-item {
        padding: 1.25rem !important;
    }
    .faq-item summary {
        font-size: 1rem !important;
    }

    /* Fix footer copyright bar wrapping */
    footer .md\:col-span-4 {
        gap: 0.75rem;
    }

    /* Projects filter bar horizontal scroll */
    .filter-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .filter-bar::-webkit-scrollbar {
        display: none;
    }
}

/* --- Tablet screens (769px - 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Slightly smaller hero heading for tablets */
    .hero-section h1 {
        font-size: 3.5rem !important;
    }

    /* Adjust service card grid for tablet */
    .grid.grid-cols-1.md\:grid-cols-2 {
        gap: 1.5rem;
    }
}