/*
Theme Name: Bike FixUp Theme
Author: Tsega
Description: A modern, high-performance WordPress theme for Bike FixUp.
Version: 1.0
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700;800&display=swap");

:root {
    /* Base Colors from Lovable */
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 348 90% 35%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 100%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 100% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 348 90% 35%;
    --radius: 0.75rem;

    /* Custom tokens */
    --crimson-deep: hsl(348, 95%, 25%);
    --crimson-base: hsl(348, 90%, 45%);
    --crimson-bright: hsl(355, 100%, 60%);
    --metallic-red: linear-gradient(
      180deg,
      var(--crimson-bright) 0%,
      var(--crimson-base) 50%,
      var(--crimson-deep) 100%
    );
    --gradient-primary: var(--metallic-red);
    --gradient-dark: linear-gradient(180deg, hsl(0, 0%, 98%), hsl(0, 0%, 100%));
    --gradient-card: linear-gradient(145deg, hsl(0, 0%, 100%), hsl(0, 0%, 98%));
    --shadow-glow: 0 10px 30px -10px hsla(348, 100%, 35%, 0.5);
    --shadow-card: 0 20px 50px -12px hsl(0 0% 0% / 0.15);
    --glass-bg: hsla(0, 0%, 100%, 0.7);
    --glass-border: hsla(0, 0%, 0%, 0.08);
    
    /* Transitions */
    --theme-transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark Mode Tokens */
.dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;
    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;
    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;
    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;
    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;
    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;
    --border: 216 34% 17%;
    --input: 216 34% 17%;
    --ring: 216 34% 17%;
    
    --glass-bg: hsla(224, 71%, 4%, 0.7);
    --glass-border: hsla(213, 31%, 91%, 0.1);
    --gradient-dark: linear-gradient(180deg, hsl(224, 71%, 4%), hsl(224, 71%, 8%));
    --gradient-card: linear-gradient(145deg, hsl(224, 71%, 6%), hsl(224, 71%, 4%));
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: var(--theme-transition);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', sans-serif;
    transition: var(--theme-transition);
}

.font-display {
    font-family: 'Manrope', sans-serif;
}

/* Navigation & List Resets */
nav ul, nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-item, .mobile-menu-item {
    list-style: none;
}

/* Custom Components */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    transition: var(--theme-transition);
}

.gradient-text {
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: 0.15em;
    margin-right: -0.15em;
}

.gradient-bg {
    background-image: var(--gradient-primary);
}

.section-padding {
    padding: 5rem 1rem;
}

@media (min-width: 768px) {
    .section-padding {
        padding: 7rem 2rem;
    }
}

.container-custom {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-reverse {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-slide-up { animation: slideUp 0.6s ease-out; }
.animate-marquee { animation: marquee 30s linear infinite; }
.animate-marquee-reverse { animation: marquee-reverse 30s linear infinite; }

/* Responsive Grid Helpers */
.grid-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Global Fixed Header Spacer */
body:not(.home) .site-main {
    margin-top: 48px;
}

@media (min-width: 1024px) {
    body:not(.home) .site-main {
        margin-top: 64px;
    }
}


/* User Account Dropdown */
/* Scoped Dropdown (if needed, but header uses Tailwind) */
.user-account-dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.absolute.invisible {
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-container img {
    transition: transform 0.3s ease;
}

.logo-container:hover img {
    transform: scale(1.05);
}

/* Footer SEO Section */
#seo-content-wrapper {
    transition: max-height 0.5s cubic-bezier(0, 0, 0.2, 1);
}

#seo-overlay {
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#toggle-seo-content svg {
    transition: transform 0.3s ease;
}

.dark #seo-overlay {
    background: linear-gradient(to top, hsl(224, 71%, 4%), transparent);
}


/* Footer Enhancements */
footer .prose p { margin-bottom: 0.5rem; }
footer .prose .dark p { color: #9ca3af; }

/* Custom Details Accordion */
footer details summary::-webkit-details-marker { display: none; }
footer details > summary { list-style: none; }

footer details[open] summary svg { transform: rotate(180deg); color: hsl(var(--primary)); }
footer details summary:hover { color: hsl(var(--primary)); }

/* Animation-like feel for details */
footer details > div {
    animation: slideDown 0.3s ease-out;
}

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

/* SEO Toggle Arrow */
#toggle-seo-content.active svg { transform: rotate(180deg); }