/**
 * Long Life Clinic - Custom Styles
 * Additional styles that complement Tailwind CSS
 * Includes FALLBACK STYLES for when Tailwind CDN is blocked
 */

/* ==================== TAILWIND CDN FALLBACK ==================== */
/* These styles ensure the site looks decent if CDN is blocked */

:root {
    --color-primary: #1a4d3e;
    --color-secondary: #2d5a4a;
    --color-accent: #c9a227;
    --color-light: #f8f6f3;
    --color-dark: #1a1a1a;
    --color-whatsapp: #25D366;
}

/* Basic reset if Tailwind doesn't load */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ==================== BASE STYLES ==================== */
html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.5;
    color: #374151;
    margin: 0;
    padding: 0;
    /* Top padding for fixed header added in mobile breakpoint below */
}

/* Headings fallback */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    line-height: 1.2;
}

/* Container fallback */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Basic link styles */
a {
    color: inherit;
    text-decoration: none;
}

/* Image fallback */
img {
    max-width: 100%;
    height: auto;
}

/* Button fallback */
button {
    cursor: pointer;
    font-family: inherit;
}

/* Header fallback */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
    background-color: var(--color-primary);
    padding: 1rem 0;
    /* Ensure header stays on top (mobile menu is z-index 45) */
}

/* Hidden class fallback */
.hidden {
    display: none !important;
}

/* ==================== MENU VISIBILITY FALLBACK ==================== */
/* Desktop Navigation - show on large screens even without Tailwind */
@media (min-width: 1024px) {
    nav.hidden.lg\:flex,
    .hidden.lg\:flex {
        display: flex !important;
    }
    
    /* Hide mobile menu button on desktop */
    button.lg\:hidden,
    .lg\:hidden {
        display: none !important;
    }
}

/* Mobile Navigation - show mobile button, hide desktop nav */
@media (max-width: 1023px) {
    nav.hidden.lg\:flex,
    .hidden.lg\:flex {
        display: none !important;
    }
    
    /* Show mobile menu button */
    button.lg\:hidden,
    #mobile-menu-btn {
        display: flex !important;
    }
}

/* Header layout fallback */
#header .container > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
}

/* Nav items spacing */
#header nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Dropdown visibility on hover - fallback */
.group:hover > div[class*="absolute"] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Text colors fallback */
.text-white\/90, .text-white {
    color: rgba(255, 255, 255, 0.9);
}

.text-accent {
    color: var(--color-accent);
}

/* Logo image and text visibility */
#header a img {
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
}

#header a span.hidden.sm\:block {
    display: block !important;
}

@media (max-width: 639px) {
    #header a span.hidden.sm\:block {
        display: none !important;
    }
}

/* ==================== HERO IMAGE FALLBACK ==================== */
/* Show hero image on large screens */
@media (min-width: 1024px) {
    .hidden.lg\:block,
    div.hidden.lg\:block {
        display: block !important;
    }
}

/* Grid layout fallback for hero */
.grid.lg\:grid-cols-2 {
    display: grid;
    gap: 3rem;
}

@media (min-width: 1024px) {
    .grid.lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Ensure images display correctly */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Hero image specific styling */
#inicio img {
    border-radius: 1rem;
}

/* Flex fallback */
.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

/* Grid fallback */
.grid {
    display: grid;
}

/* Spacing fallback for sections */
section {
    padding: 4rem 0;
}

/* WhatsApp button fallback */
a[href*="whatsapp"] {
    background-color: var(--color-whatsapp);
    color: white;
    padding: 0.625rem 1.5rem;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Primary button fallback */
.bg-primary {
    background-color: var(--color-primary);
}

.text-white {
    color: white;
}

/* Screen reader only - fallback */
.sr-only:not(:focus):not(:active) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==================== PREVENT SCROLL FLASH ==================== */
* {
    -webkit-tap-highlight-color: transparent;
}

section {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Force GPU layer for colored backgrounds - prevents green line artifact */
.bg-primary,
.bg-secondary,
.bg-gradient-to-br,
.bg-gradient-to-r,
[class*="from-primary"],
[class*="to-primary"],
[class*="from-secondary"],
[class*="to-secondary"] {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

/* Smooth color transitions between sections */
.bg-white, .bg-light, .bg-primary {
    transition: none !important;
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ==================== ANIMATION CLASSES ==================== */
section.animate-in {
    animation: fadeInUp 0.6s ease-out forwards;
}

.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

.slide-in-left {
    animation: slideInLeft 0.5s ease-out forwards;
}

.slide-in-right {
    animation: slideInRight 0.5s ease-out forwards;
}

/* ==================== HEADER STYLES ==================== */
#header {
    transition: all 0.3s ease;
}

#header.scrolled {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
}

/* ==================== DROPDOWN STYLES ==================== */
.group:hover .group-hover\:visible {
    visibility: visible;
    opacity: 1;
}

/* Mobile dropdown animation */
.mobile-dropdown-content {
    transition: all 0.3s ease;
}

.mobile-dropdown-content.hidden {
    max-height: 0;
    overflow: hidden;
    padding: 0;
}

.mobile-dropdown-content:not(.hidden) {
    /* Increased to fit all 12 menu items (Programs dropdown) */
    max-height: 800px;
}

/* ==================== HERO SECTION ==================== */
#inicio::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.95) 0%, rgba(74, 144, 164, 0.8) 100%);
    z-index: 1;
}

/* ==================== SERVICE CARDS ==================== */
.group:hover {
    transform: translateY(-5px);
}

/* Prevent FAQ details elements from getting unwanted hover effects */
details.group {
    transform: none !important;
}

details.group:hover {
    transform: none !important;
}

/* Only apply hover to summary, not entire details */
details summary {
    transition: color 0.2s ease;
}

details summary:hover {
    color: var(--color-secondary);
}

/* ==================== FORMS ==================== */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.2);
}

/* Custom select arrow */
select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.5rem;
    padding-right: 3rem;
}

/* ==================== BUTTONS ==================== */
button,
a.inline-flex,
a[href="#cita"] {
    transition: all 0.3s ease;
}

button:active,
a.inline-flex:active {
    transform: scale(0.98);
}

/* ==================== SCROLLBAR ==================== */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #1e3a5f;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4a90a4;
}

/* ==================== RESPONSIVE UTILITIES ==================== */

/* MOBILE FIRST - Touch-friendly improvements */
@media (max-width: 767px) {
    .hero-text {
        text-align: center;
    }
    
    #inicio {
        min-height: 500px;
    }
    
    /* Larger touch targets (min 44px recommended by Apple/Google) */
    a, button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Better spacing for mobile cards */
    .grid {
        gap: 1rem;
    }
    
    /* Prevent text from being too small */
    body {
        font-size: 16px; /* Prevents zoom on iOS inputs */
    }
    
    /* Full-width buttons on mobile */
    .flex-col a, .flex-col button {
        width: 100%;
        justify-content: center;
    }
    
    /* Better padding for sections */
    section {
        padding: 3rem 0;
    }
    
    /* Fix horizontal overflow */
    .container {
        overflow-x: hidden;
    }
}

/* Tablet breakpoint */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Two columns for cards on tablet */
    .grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1023px) {
    .desktop-nav {
        display: none;
    }
}

/* Mobile menu improvements - REMOVED fixed positioning to prevent conflict with input.css */
/* Mobile menu positioning is handled in input.css (lines 421-444) */
/* Keeping only the overflow and scrolling improvements here */

#mobile-menu a {
    min-height: 48px;
    display: flex;
    align-items: center;
}

.mobile-dropdown button {
    min-height: 48px;
}

/* Mobile menu button fallback - CRITICAL */
#mobile-menu-btn {
    padding: 0.5rem;
    color: white;
    background: transparent;
    border: none;
}

#mobile-menu-btn svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* WhatsApp button in header fallback */
#header a[href*="whatsapp"] {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background-color: var(--color-whatsapp);
    color: white;
    border-radius: 9999px;
    font-weight: 500;
}

@media (max-width: 767px) {
    #header a[href*="whatsapp"].hidden.md\:inline-flex {
        display: none !important;
    }
}

/* ==================== HOVER EFFECTS ==================== */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* ==================== LOADING STATE ==================== */
body:not(.loaded) {
    overflow: hidden;
}

body.loaded {
    overflow-x: hidden;
    overflow-y: auto;
}

/* ==================== ACCESSIBILITY ==================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #1e3a5f;
    outline-offset: 2px;
}

/* ==================== PROTECTION AGAINST SCRIPT OVERWRITES ==================== */
/* Protect critical numbers from being replaced by analytics scripts */
.font-semibold.text-primary,
.text-4xl.font-bold,
.font-bold.text-primary {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Ensure phone numbers and license numbers display correctly */
a[href^="tel:"],
a[href*="whatsapp"] {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Protect credentials section from overwrites */
[class*="credentials"] p.font-semibold,
.bg-white.rounded-lg p.font-semibold {
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 0.01em;
}

/* Protect mobile call button from Clarity/analytics interference */
.mobile-cta-call,
a.mobile-cta-call,
a[href^="tel:"] {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-variant-numeric: lining-nums tabular-nums !important;
    unicode-bidi: plaintext !important;
}

/* ==================== PHILOSOPHY SECTION ICON FIX ==================== */
/* Force icons to be visible in Philosophy section */
.philosophy-section .bg-primary-light svg,
.philosophy-section .bg-secondary-10 svg,
.philosophy-section .bg-accent-light svg {
    stroke: #1a4d3e !important;
    fill: none !important;
    stroke-width: 2 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.philosophy-section .bg-primary-light svg path,
.philosophy-section .bg-secondary-10 svg path,
.philosophy-section .bg-accent-light svg path {
    stroke: #1a4d3e !important;
    fill: none !important;
}

/* ==================== DEAD CLICKS FIX ==================== */
/* Prevent SVG icons inside links/buttons from capturing clicks */
a svg,
button svg,
a svg *,
button svg *,
.cursor-pointer svg,
.cursor-pointer svg *,
[role="button"] svg,
[role="button"] svg * {
    pointer-events: none !important;
}

/* Ensure the parent link/button is clickable */
a,
button,
.cursor-pointer,
[role="button"] {
    cursor: pointer;
}

/* ==================== PROSE STYLES (Blog Content) ==================== */
/* Manual prose styles since @tailwindcss/typography not installed */
.prose {
    color: #374151;
    line-height: 1.75;
}

.prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose h2 {
    color: #1a4d3e;
    font-size: 1.5em;
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.33;
    font-family: 'Playfair Display', serif;
}

.prose h3 {
    color: #1a4d3e;
    font-size: 1.25em;
    font-weight: 600;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    line-height: 1.6;
    font-family: 'Playfair Display', serif;
}

.prose ul, .prose ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
}

.prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose ul > li {
    list-style-type: disc;
}

.prose ol > li {
    list-style-type: decimal;
}

.prose strong {
    color: #111827;
    font-weight: 600;
}

.prose a {
    color: #1a4d3e;
    text-decoration: underline;
    font-weight: 500;
}

.prose a:hover {
    color: #2d5a4a;
}

.prose blockquote {
    font-style: italic;
    border-left: 4px solid #c9a227;
    padding-left: 1em;
    margin: 1.6em 0;
    color: #4b5563;
}

.prose-lg {
    font-size: 1.125rem;
}

.prose-lg p {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.prose .lead {
    font-size: 1.25em;
    color: #4b5563;
    margin-bottom: 1.5em;
}

/* ==================== PRINT STYLES ==================== */
@media print {
    header,
    footer {
        display: none;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    h1, h2, h3 {
        page-break-after: avoid;
    }
}