/**
 * Landing Page Custom Styles & Responsive Fixes
 * 
 * @package Mediterranean_Diet
 * @since 2.1.2
 */

/* ========================================
   SHARED ANIMATIONS (from demo.html)
   ======================================== */

.floating {
    animation: floating 6s ease-in-out infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0px);
    }
}

.bubble-float {
    animation: bubbleFloat 8s ease-in-out infinite;
}

@keyframes bubbleFloat {
    0%, 100% {
        transform: scale(1) translateY(0);
    }
    50% {
        transform: scale(1.05) translateY(-10px);
    }
}

/* ========================================
   MOBILE FIXES - HERO SECTION
   ======================================== */

/* Hide floating elements on mobile */
/* Hero heading - 24px */
.hero-text-overlay h1 {
    font-size: 24px !important;
    line-height: 1.3 !important;
}

/* Hero description - 16px */
.hero-text-overlay p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

@media (max-width: 768px) {
    .floating-element {
        display: none !important;
    }
    
    /* Hide all hero decorative images on mobile */
    section img[alt="fresh basil"],
    section img[alt="fresh tomato"],
    section img[alt="mediterranean salad"] {
        display: none !important;
    }
    
    /* Hero text overlay */
    .hero-text-overlay {
        padding: 1.5rem !important;
        border-radius: 1.5rem !important;
        max-width: 100% !important;
    }
    
    /* Keep same font-size on mobile */
    .hero-text-overlay h1 {
        font-size: 24px !important;
    }
    
    .hero-text-overlay p {
        font-size: 16px !important;
    }
    
    /* Hero badge */
    .hero-text-overlay span.text-sm {
        font-size: 14px !important;
    }
    
    /* Hero social proof */
    .hero-text-overlay .flex.items-center.gap-4 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }
}

@media (max-width: 640px) {
    /* Same on small mobile */
    .hero-text-overlay h1 {
        font-size: 24px !important;
    }
    
    .hero-text-overlay p {
        font-size: 16px !important;
    }
}

/* ========================================
   HEADER FIXES
   ======================================== */

/* Mobile Menu Toggle - Hidden on desktop */
.mobile-menu-toggle {
    display: none;
}

/* Mobile Menu - Hidden on desktop */
.mobile-menu {
    display: none;
}

@media (max-width: 768px) {
    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: block;
        background: none;
        border: none;
        padding: 0.5rem;
        cursor: pointer;
    }
    
    .mobile-menu-toggle .material-symbols-outlined {
        font-size: 2rem;
        color: var(--primary);
    }
    
    /* Hide desktop menu on mobile */
    header nav {
        display: none;
    }
    
    /* Mobile menu */
    .mobile-menu {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: white;
        border-bottom: 2px solid var(--primary);
        padding: 1rem;
        display: none;
        z-index: 40;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    .mobile-menu.active {
        display: block;
    }
    
    .mobile-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .mobile-menu li {
        border-bottom: 1px solid #eee;
    }
    
    .mobile-menu li:last-child {
        border-bottom: none;
    }
    
    .mobile-menu a {
        display: block;
        padding: 1rem;
        color: #333;
        text-decoration: none;
        font-weight: 600;
        transition: background 0.2s;
    }
    
    .mobile-menu a:hover {
        background: #f5f5f5;
    }
    
    /* Logo text smaller */
    header h2 {
        font-size: 1.25rem !important;
    }
    
    /* Join button smaller */
    header > div > button {
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
    }
}

/* ========================================
   SECTION SPACING - REDUCED BY HALF
   ======================================== */

/* Reduce all section padding by half */
section.py-24 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
}

section.py-32 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

section.py-16 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

@media (max-width: 768px) {
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    section .max-w-\[1200px\] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ========================================
   TYPOGRAPHY - GLOBAL
   ======================================== */

/* All Section Headings - 24px */
h2.text-4xl,
h2.text-5xl,
h2.text-6xl,
h2.text-7xl,
section h2 {
    font-size: 24px !important;
    line-height: 1.3 !important;
}

/* All Subheadings - 24px */
h3.text-2xl,
h3.text-3xl,
h3.text-xl,
section h3 {
    font-size: 20px !important;
    line-height: 1.4 !important;
}

/* All Card/Item Titles - 24px */
h4.text-xl,
h4.text-2xl,
section h4 {
    font-size: 24px !important;
    line-height: 1.4 !important;
}

/* All Paragraph Text - 16px */
p.text-xl,
p.text-2xl,
p.text-lg,
p.text-base,
section p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Small text - 14px */
p.text-sm,
span.text-sm,
li {
    font-size: 14px !important;
}

@media (max-width: 768px) {
    /* Keep same on mobile */
    h2 { font-size: 24px !important; }
    h3 { font-size: 20px !important; }
    h4 { font-size: 24px !important; }
    
    p, li {
        font-size: 16px !important;
    }
    
    p.text-sm, span.text-sm {
        font-size: 14px !important;
    }
}

/* ========================================
   PRICING SECTION
   ======================================== */

/* Pricing titles - 24px */
#pricing h2,
#pricing h4 {
    font-size: 24px !important;
}

/* Pricing description - 16px */
#pricing p {
    font-size: 16px !important;
}

/* Pricing features - 16px */
#pricing li {
    font-size: 16px !important;
}

/* Price numbers - keep larger */
#pricing .text-5xl,
#pricing .text-6xl {
    font-size: 3rem !important;
}

@media (max-width: 768px) {
    /* Pricing cards */
    .pricing-card {
        transform: none !important;
        margin-bottom: 1.5rem;
    }
    
    /* Featured card scale */
    .scale-105 {
        transform: scale(1) !important;
    }
    
    /* Price text - smaller on mobile */
    #pricing .text-5xl,
    #pricing .text-6xl {
        font-size: 2.5rem !important;
    }
}

/* ========================================
   TESTIMONIALS
   ======================================== */

@media (max-width: 768px) {
    /* Testimonial cards */
    .testimonial-card {
        padding: 1.5rem !important;
    }
    
    /* Avatar */
    .testimonial-card img {
        width: 3rem !important;
        height: 3rem !important;
    }
}

/* ========================================
   FAQ SECTION
   ======================================== */

/* FAQ question - 24px */
details summary span {
    font-size: 18px !important;
}

/* FAQ answer - 16px */
details div p {
    font-size: 16px !important;
}

@media (max-width: 768px) {
    details summary {
        padding: 1rem !important;
    }
    
    details div {
        padding: 1rem !important;
    }
}

/* ========================================
   CTA SECTION
   ======================================== */

/* CTA heading - 24px */
section:has(img[alt="lemon"]) h2 {
    font-size: 24px !important;
    line-height: 1.3 !important;
}

/* CTA description - 16px */
section:has(img[alt="lemon"]) p {
    font-size: 16px !important;
}

@media (max-width: 768px) {
    /* CTA button */
    .cta-section a {
        padding: 0.875rem 1.75rem !important;
        font-size: 16px !important;
    }
}

/* ========================================
   BUTTONS
   ======================================== */

/* All buttons - 16px */
button,
.button,
a[class*="px-"] {
    font-size: 16px !important;
}

@media (max-width: 768px) {
    /* All buttons */
    .button,
    a[class*="px-"] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
        font-size: 16px !important;
    }
    
    /* Hero button specific */
    .hero-text-overlay a {
        padding: 0.75rem 1.5rem !important;
        font-size: 16px !important;
    }
}

/* ========================================
   IMAGES & MEDIA
   ======================================== */

@media (max-width: 768px) {
    /* Responsive images */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Round images */
    .rounded-full,
    .rounded-\[2rem\],
    .rounded-\[3rem\] {
        border-radius: 1rem !important;
    }
}

/* ========================================
   GRID LAYOUTS
   ======================================== */

@media (max-width: 768px) {
    /* Force single column */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .md\:grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
    
    /* Gap reduction */
    .gap-8,
    .gap-12 {
        gap: 1.5rem !important;
    }
}

/* ========================================
   OVERFLOW FIXES
   ======================================== */

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

section {
    overflow-x: hidden;
}

/* ========================================
   TRUST BADGES
   ======================================== */

@media (max-width: 768px) {
    .trust-badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem !important;
    }
    
    .trust-badge {
        font-size: 0.75rem !important;
        padding: 0.5rem 1rem !important;
    }
}

/* ========================================
   BENEFITS SECTION
   ======================================== */

@media (max-width: 768px) {
    /* Benefits cards */
    .benefits-card {
        padding: 1.5rem !important;
    }
    
    /* Icons */
    .material-symbols-outlined {
        font-size: 2rem !important;
    }
}

/* ========================================
   CURRICULUM SECTION
   ======================================== */

@media (max-width: 768px) {
    /* Curriculum cards */
    .curriculum-card {
        padding: 1.5rem !important;
    }
    
    /* Card images */
    .curriculum-card img {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

/* ========================================
   OVERVIEW SECTION
   ======================================== */

/* Fix icon overlap on mobile */
/* Fix rosemary image overlapping title on all devices */
#overview .text-center {
    padding-top: 3rem !important;
}

@media (max-width: 768px) {
    /* Hide decorative images */
    #overview .absolute.-left-20,
    #overview .absolute.-top-10 {
        display: none !important;
    }
    
    /* Reset padding when image is hidden */
    #overview .text-center {
        padding-top: 0 !important;
    }
    
    /* Overview cards */
    .overview-card,
    #overview .group {
        padding: 2rem !important;
    }
    
    /* Icons */
    .overview-card .material-symbols-outlined,
    #overview .material-symbols-outlined {
        font-size: 2.5rem !important;
    }
}

/* ========================================
   FOOTER
   ======================================== */

@media (max-width: 768px) {
    footer {
        padding: 2rem 1rem !important;
    }
    
    footer .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

/* ========================================
   ANIMATIONS - DISABLE ON MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Disable hover effects */
    *:hover {
        transform: none !important;
    }
    
    /* Disable transitions for performance */
    .transition-all,
    .transition-transform {
        transition: none !important;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Touch targets minimum 44px */
@media (max-width: 768px) {
    button,
    a {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ========================================
   LANDSCAPE ORIENTATION
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    /* Reduce hero height */
    .min-h-\[85vh\] {
        min-height: 100vh !important;
    }
    
    /* Reduce section padding */
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
}

/* ========================================
   PROGRAM DETAILS SECTION
   ======================================== */

@media (max-width: 768px) {
    /* Hide decorative tomato image */
    section img[alt="Tomato"],
    #program-details img[alt="Tomato"] {
        display: none !important;
    }
    
    /* Adjust box padding when image is hidden */
    section .bg-background-light.relative {
        padding: 2rem !important;
    }
}

/* ========================================
   BANNER SECTION
   ======================================== */

/* Banner text size fix */
.banner-section p,
#banner p {
    font-size: 1.25rem !important; /* Smaller from 2xl */
}

@media (max-width: 768px) {
    .banner-section p,
    #banner p {
        font-size: 1rem !important;
    }
}

/* ========================================
   SMALL MOBILE (< 375px)
   ======================================== */

@media (max-width: 375px) {
    /* Extra small text */
    .text-sm {
        font-size: 0.75rem !important;
    }
    
    /* Extra small buttons */
    button,
    a[class*="px-"] {
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
    }
    
    /* Reduce gaps */
    .gap-4,
    .gap-6 {
        gap: 0.75rem !important;
    }
}

/* ========================================
   BENEFITS (demo.html colors)
   ======================================== */

.rounded-card {
    border-radius: 1.5rem;
}

.benefits-icon .material-symbols-rounded {
    font-size: 48px;
    color: #417D4C;
}

.orange-gradient {
    background: linear-gradient(135deg, #F59E0B 0%, #EA580C 100%);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.orange-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.4);
}