/* ============================================================================
   TaskSmart Bootstrap Overrides
   Minimal custom CSS - Bootstrap handles most responsive behavior
   ============================================================================ */

/* Brand Colors */
:root {
    --ts-primary: #5E5CE6;
    --ts-primary-dark: #4C4AC6;
    --ts-secondary: #8B5CF6;
    --ts-accent: #10B981;
}

/* Typography - Inter Font */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Instant scroll (native HTML behavior) */
html {
    scroll-behavior: auto;
}

/* Logo Styling */
.logo-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--ts-primary), var(--ts-secondary));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

/* Navbar Customization */
.navbar {
    backdrop-filter: blur(10px);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Transparent navbar on desktop */
@media (min-width: 992px) {
    .navbar {
        background: transparent !important;
        box-shadow: none !important;
    }
    
    /* Add background when scrolled */
    .navbar.scrolled {
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }
}

/* Keep white background on mobile for readability */
@media (max-width: 991.98px) {
    .navbar {
        background: white !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
        min-height: 64px !important;  /* Taller navbar for bigger buttons */
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    .navbar .container {
        flex-wrap: wrap !important;  /* Allow wrapping if needed */
    }
}

.navbar-brand {
    color: var(--ts-primary) !important;
}

/* Gradient Text Effect */
.gradient-text {
    background: linear-gradient(135deg, var(--ts-primary), var(--ts-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom Button Gradients */
.btn-primary {
    background: linear-gradient(135deg, var(--ts-primary), var(--ts-secondary));
    border: none;
    font-weight: 600;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--ts-primary-dark), var(--ts-secondary));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(94,92,230,0.3);
}

.btn-success {
    background-color: var(--ts-accent);
    border-color: var(--ts-accent);
}

/* Hero Section */
.hero {
    padding-top: 80px;
    background: linear-gradient(180deg, #F3F2FF 0%, #FFFFFF 100%);
    min-height: 600px;
}

/* Feature Icons */
.feature-icon-large {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

/* Feature Cards Hover */
.feature-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 12px !important;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(94,92,230,0.15) !important;
}

/* Privacy Section */
.privacy-highlight {
    background: linear-gradient(135deg, var(--ts-primary), var(--ts-secondary));
}

.privacy-icon {
    font-size: 4rem;
}

.check-icon {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* CTA Banner */
.cta-banner {
    background: linear-gradient(135deg, var(--ts-primary), var(--ts-secondary), #A78BFA);
}

/* Page Hero for Features */
.page-hero {
    padding-top: 100px;
    background: #F3F2FF;
}

/* ============================================================================
   Screenshot Carousel Styling - Improved Desktop Behavior
   ============================================================================ */

.screenshots .carousel {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.carousel-item {
    padding: 1rem 0;
    transition: transform 0.6s ease-in-out;
}

/* Ensure proper height */
.screenshots {
    min-height: 700px;
    display: flex;
    align-items: center;
}

/* Screenshot Card Sizing */
.carousel .screenshot-card {
    max-width: 400px;
    margin: 0 auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carousel .screenshot-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(94,92,230,0.2) !important;
}

.carousel .screenshot-card img {
    border-radius: 12px 12px 0 0;
}

/* Carousel Controls - MUCH More Visible on Desktop */
.carousel-control-prev,
.carousel-control-next {
    width: 80px;
    opacity: 1;
    z-index: 10;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 50px;
    height: 50px;
    background-color: var(--ts-primary);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(94,92,230,0.4);
    background-size: 60%;
    background-position: center;
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
    background-color: var(--ts-primary-dark);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(94,92,230,0.5);
}

/* Position controls better */
.carousel-control-prev {
    justify-content: flex-start;
    padding-left: 2rem;
}

.carousel-control-next {
    justify-content: flex-end;
    padding-right: 2rem;
}

/* Carousel Indicators - Larger and more visible */
.carousel-indicators {
    margin-bottom: 0;
    position: relative;
    margin-top: 2rem;
}

.carousel-indicators button {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--ts-primary);
    opacity: 0.4;
    margin: 0 6px;
    border: none;
    transition: all 0.3s ease;
}

.carousel-indicators button.active {
    opacity: 1;
    background-color: var(--ts-primary);
    transform: scale(1.2);
}

.carousel-indicators button:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

/* Fix carousel inner height */
.carousel-inner {
    min-height: 650px;
    display: flex;
    align-items: center;
}

/* Mobile adjustments for carousel - FULL SCREEN */
@media (max-width: 767.98px) {
    .screenshots {
        min-height: 600px;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .screenshots .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
    }
    
    .carousel-inner {
        min-height: 550px;
    }
    
    .carousel-item {
        padding: 0.5rem 0 !important;
    }
    
    /* Carousel controls - larger and more visible */
    .carousel-control-prev,
    .carousel-control-next {
        width: 60px;
        opacity: 0.9;
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 45px;
        height: 45px;
        background-color: var(--ts-primary);
        box-shadow: 0 4px 12px rgba(94,92,230,0.5);
    }
    
    /* Screenshot card - FULL WIDTH */
    .carousel .screenshot-card {
        max-width: 98% !important;
        border-radius: 16px !important;
        margin: 0 auto !important;
    }
    
    .carousel .screenshot-card img {
        border-radius: 16px 16px 0 0 !important;
    }
    
    .carousel .card-body {
        padding: 1.75rem 1.5rem !important;
    }
    
    .carousel-indicators {
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
    }
    
    .carousel-indicators button {
        width: 12px;
        height: 12px;
        margin: 0 5px;
    }
    
    /* Section headers on mobile */
    .section-header {
        padding: 0 1rem !important;
        margin-bottom: 2rem !important;
    }
    
    /* Privacy section - full bleed effect */
    .privacy-highlight {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    
    /* Download buttons - Make them visible and colorful */
    .download .btn-lg,
    .download .btn {
        width: 100% !important;
        margin-bottom: 0.75rem !important;
        min-height: 70px !important;  /* Taller buttons for better visibility */
        padding: 1rem 1.5rem !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    }
    
    /* Play Store button - Black */
    .download-btn-playstore {
        background-color: #000000 !important;
        border-color: #000000 !important;
        color: #ffffff !important;
    }
    
    .download-btn-playstore:hover {
        background-color: #333333 !important;
        border-color: #333333 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* APK Download button - Green */
    .download-btn-apk {
        background-color: #10B981 !important;  /* Using brand accent green */
        border-color: #10B981 !important;
        color: #ffffff !important;
    }
    
    .download-btn-apk:hover {
        background-color: #059669 !important;  /* Darker green on hover */
        border-color: #059669 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4) !important;
    }
    
    .download-btn-apk svg {
        color: #ffffff !important;
    }
}

/* Desktop - reduce card size slightly */
@media (min-width: 992px) {
    .carousel .screenshot-card {
        max-width: 350px;
    }
}

/* Footer */
.footer {
    background: #1C1B1F;
}

.footer a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.footer a:hover {
    color: white;
}

/* Phone Mockup */
.phone-mockup {
    max-width: 400px;
    margin: 0 auto;
}

.phone-screen {
    background: white;
    border-radius: 2rem;
    padding: 1rem;
    box-shadow: 0 20px 40px rgba(94,92,230,0.2);
    border: 8px solid #1C1B1F;
}

/* ============================================================================
   MOBILE-ONLY OPTIMIZATIONS - Samsung S24 Ultra & All Phones
   Desktop remains at Bootstrap defaults
   ============================================================================ */

@media (max-width: 991.98px) {
    /* MOBILE ONLY - Full-Screen Card Design with Dynamic Text */
    
    /* Dynamic Typography - Scales with screen size */
    body {
        font-size: clamp(1.0625rem, 2.5vw, 1.1875rem) !important;  /* 17-19px fluid */
        line-height: 1.7 !important;
    }
    
    h1, .display-3 {
        font-size: clamp(2rem, 7vw, 2.75rem) !important;  /* 32-44px fluid */
        font-weight: 800 !important;
    }
    
    h2, .display-5, .section-title {
        font-size: clamp(1.75rem, 5.5vw, 2.25rem) !important;  /* 28-36px fluid */
        font-weight: 700 !important;
    }
    
    h3, .h5, .card-title {
        font-size: clamp(1.25rem, 4.5vw, 1.625rem) !important;  /* 20-26px fluid */
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }
    
    .fs-5, .card-text, p {
        font-size: clamp(1.0625rem, 2.5vw, 1.1875rem) !important;  /* 17-19px fluid */
        line-height: 1.65 !important;
    }
    
    /* EDGE-TO-EDGE LAYOUT - Cards fill screen */
    .container {
        padding-left: 0.5rem !important;  /* Minimal padding */
        padding-right: 0.5rem !important;
        max-width: 100% !important;
    }
    
    /* Feature Cards - FULL SCREEN WIDTH */
    .features .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .features .col-12 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
    
    .feature-card {
        margin-bottom: 1rem !important;
        border-radius: 20px !important;
        overflow: hidden;
    }
    
    .feature-card .card-body {
        padding: 2.5rem 1.75rem !important;  /* Generous padding inside */
    }
    
    .feature-icon-large {
        font-size: clamp(3.5rem, 10vw, 4.5rem) !important;  /* 56-72px fluid */
        margin-bottom: 1.5rem !important;
        line-height: 1 !important;
    }
    
    /* Section spacing */
    section.py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    .row.g-4 {
        --bs-gutter-y: 1rem !important;
        --bs-gutter-x: 0 !important;  /* No horizontal gap */
    }
    
    /* Buttons - Full width and prominent */
    .btn-lg {
        font-size: clamp(1.125rem, 3.5vw, 1.375rem) !important;  /* 18-22px fluid */
        padding: 1.25rem 2rem !important;
        min-height: 60px;
        border-radius: 14px !important;
        font-weight: 600 !important;
    }
    
    .btn {
        font-size: clamp(1rem, 3vw, 1.125rem) !important;  /* 16-18px fluid */
        padding: 1rem 1.5rem !important;
        min-height: 54px;
        border-radius: 12px !important;
    }
    
    /* Hero buttons - EXTRA LARGE with vertical spacing */
    .hero .btn-lg {
        font-size: clamp(1.25rem, 4vw, 1.5rem) !important;  /* 20-24px - Extra large */
        padding: 2rem 2rem !important;  /* Extra vertical padding */
        min-height: 84px !important;  /* 20% taller (70px * 1.2 = 84px) */
        margin-top: 0.75rem !important;  /* Top spacing */
        margin-bottom: 0.75rem !important;  /* Bottom spacing */
        width: 100% !important;
        border-radius: 16px !important;  /* Slightly more rounded */
        font-weight: 700 !important;
    }
    
    /* Make buttons full-width */
    .d-grid .btn,
    .hero .btn {
        width: 100% !important;
    }
    
    /* Navbar - Always visible, no hamburger */
    .navbar-toggler {
        display: none !important;  /* Hide hamburger menu */
    }
    
    .navbar-collapse {
        display: flex !important;  /* Always show menu */
        flex-basis: auto !important;
    }
    
    .navbar-nav {
        flex-direction: row !important;  /* Horizontal layout like desktop */
        flex-wrap: wrap !important;  /* Allow wrapping if needed */
        gap: 0.25rem !important;  /* Small gap between items */
    }
    
    .navbar-nav .nav-link {
        font-size: clamp(1.125rem, 3.5vw, 1.25rem) !important;  /* 18-20px - LARGER */
        padding: 1.25rem 1rem !important;  /* Taller buttons - more vertical padding */
        min-height: 64px !important;  /* Increased height for easier tapping */
        display: flex !important;
        align-items: center !important;  /* Center text vertically */
        border-radius: 8px !important;  /* Rounded corners */
        transition: background-color 0.2s ease !important;
    }
    
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        background-color: rgba(94, 92, 230, 0.1) !important;  /* Light hover effect */
    }
    
    /* Download button in navbar */
    .navbar-nav .btn {
        min-height: 64px !important;  /* Match nav-link height */
        padding: 1.25rem 1.5rem !important;  /* Taller button */
        font-size: clamp(1.125rem, 3.5vw, 1.25rem) !important;  /* Match nav-link font size */
        display: flex !important;
        align-items: center !important;
        margin-left: 0.5rem !important;
    }
    
    /* Scroll offset for anchor links - account for fixed navbar (taller now, can wrap to 2+ rows) */
    section[id] {
        scroll-margin-top: 200px !important;  /* Large space for navbar that can wrap to multiple rows */
    }
    
    /* Extra padding for download section specifically - ensure it's fully visible */
    section#download {
        padding-top: 4rem !important;  /* Large top padding to push content down */
        scroll-margin-top: 200px !important;  /* Large scroll offset for proper positioning */
        margin-top: 1rem !important;  /* Additional margin for extra clearance */
    }
    
    /* Hero section - EXTRA clearance from top (accounting for taller navbar) */
    .hero {
        padding-top: 200px !important;  /* More space for taller navbar + breathing room */
        padding-bottom: 2.5rem !important;
        min-height: auto !important;  /* Flexible height - no minimum constraint */
        height: auto !important;  /* Allow content to determine height */
    }
    
    .hero .col-lg-6:first-child {
        padding-top: 3rem !important;  /* Additional top padding for content */
        height: auto !important;  /* Flexible height */
        min-height: auto !important;  /* No minimum height constraint */
    }
    
    .hero-title {
        margin-bottom: 1.5rem !important;
    }
    
    .hero-subtitle {
        margin-bottom: 2rem !important;
        font-size: clamp(1.35rem, 7.2vw, 2.25rem) !important;  /* 21.6-36px - Reduced by 10% */
        line-height: 1.6 !important;
        width: 100% !important;  /* Full width */
        max-width: 100% !important;  /* No max-width constraint */
        word-wrap: break-word !important;  /* Allow wrapping */
        overflow-wrap: break-word !important;  /* Modern wrapping */
        hyphens: auto !important;  /* Auto-hyphenate long words */
    }
    
    /* Ensure hero container is flexible */
    .hero .col-lg-6:first-child {
        height: auto !important;  /* Flexible height */
        min-height: auto !important;  /* No minimum height constraint */
    }
    
    /* Phone mockup */
    .phone-mockup {
        max-width: 90% !important;
        margin: 2rem auto !important;
    }
    
    /* CAROUSEL - FULL SCREEN ON MOBILE */
    .screenshots .carousel {
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    .carousel .screenshot-card {
        max-width: 95% !important;  /* Nearly full width */
        margin: 0 auto !important;
        border-radius: 20px !important;
    }
    
    .carousel-item {
        padding: 1rem 0 !important;
    }
    
    .carousel .card-body {
        padding: 1.5rem !important;
    }
    
    .carousel .card-body h5 {
        font-size: clamp(1.125rem, 4vw, 1.375rem) !important;  /* 18-22px fluid */
    }
    
    .carousel .card-body p {
        font-size: clamp(0.9375rem, 2.5vw, 1.0625rem) !important;  /* 15-17px fluid */
    }
}

/* Small phones - Still readable */
@media (max-width: 575.98px) {
    body {
        font-size: 1.0625rem !important;  /* 17px */
    }
    
    h1, .display-3 {
        font-size: 2.25rem !important;  /* 36px */
    }
    
    .feature-card .card-body {
        padding: 1.5rem !important;
    }
}

/* Extra small phones */
@media (max-width: 375px) {
    .logo-text {
        font-size: 0;  /* Hide text, show icon only */
    }
}

/* ============================================================================
   DESKTOP-ONLY ADJUSTMENTS
   ============================================================================ */

@media (min-width: 992px) {
    /* Reduce hero subtitle font on desktop only */
    .hero-subtitle {
        font-size: 0.9rem !important;  /* 14.4px on desktop - Reduced by 10% */
        line-height: 1.6 !important;
    }
    
    /* Reduce phone mockup size on desktop */
    .phone-mockup {
        max-width: 300px !important;  /* Smaller on desktop */
    }
    
    .phone-screen {
        padding: 0.75rem !important;  /* Less padding */
        border-width: 6px !important;  /* Thinner border */
    }
    
    /* Download buttons on desktop - keep them visible */
    .download .btn-lg {
        min-width: 250px !important;  /* Minimum width for desktop */
        width: auto !important;  /* Auto width instead of 100% */
    }
}