/*
Theme Name: Dr. Usman Healthcare
Theme URI: https://drusmanhealthcare.com
Author: Antigravity
Author URI: https://drusmanhealthcare.com
Description: Mobile Optimized Healthcare Theme. Custom built for Dr. Usman Healthcare.
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dr-usman-healthcare
*/

/* ==========================================================================
   Import of Original Styles
   ========================================================================== */
:root {
    /* Colors */
    --primary: #2D5A47;
    --primary-light: #E9F0EC;
    --accent: #D4AF37;
    --text-dark: #1A2923;
    --text-muted: #6B7C75;
    --bg-light: #F8FAF9;
    --white: #FFFFFF;
    --glass: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(255, 255, 255, 0.4);

    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing */
    --container-max: 1200px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    margin-top: 0 !important;
    /* WP Admin Bar Fix */
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
.logo {
    font-family: 'Playfair Display', serif;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header & Nav */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    backdrop-filter: blur(10px);
    background: var(--glass);
    border-bottom: 1px solid var(--glass-border);
    padding: 1rem 0;
    transition: var(--transition);
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 2rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--primary);
}

.logo span {
    color: var(--accent);
}

.nav-links {
    display: flex;
    gap: 2.5rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 500;
    transition: var(--transition);
}

.nav-links a:hover {
    color: var(--primary);
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-dark);
    transition: var(--transition);
}

.btn-icon:hover {
    color: var(--primary);
}

/* Buttons */
.btn-primary {
    background: var(--primary);
    color: var(--white);
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-block;
}

.btn-primary:hover {
    background: #1e3d30;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(45, 90, 71, 0.3);
}

.btn-outline {
    background: transparent;
    color: var(--primary);
    padding: 0.8rem 2rem;
    border: 2px solid var(--primary);
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-outline:hover {
    background: var(--primary);
    color: var(--white);
}

/* Hero Section */
.hero {
    padding: 10rem 0 6rem;
    background: radial-gradient(circle at 10% 20%, rgba(45, 90, 71, 0.05) 0%, transparent 50%);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.badge {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary);
    padding: 0.5rem 1.2rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.hero-content h1 {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero-content .accent {
    color: var(--primary);
    font-style: italic;
}

.hero-content p {
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 500px;
}

.hero-btns {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.hero-stats {
    display: flex;
    gap: 3rem;
}

.stat h3 {
    font-size: 2rem;
    color: var(--primary);
}

.stat p {
    font-size: 0.9rem;
    margin: 0;
}

/* Hero Image Stack */
.image-stack {
    position: relative;
    z-index: 2;
    /* Ensure image sits above background */
}

/* Motion Background */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

/* SVG Animation Classes */
.hero-bg svg {
    width: 100%;
    height: 100%;
}

/* Background Pulse/Float Animations */
@keyframes niceBreath {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes gentleWave {
    0% {
        transform: translateX(0) translateY(0);
    }

    33% {
        transform: translateX(10px) translateY(-10px);
    }

    66% {
        transform: translateX(-5px) translateY(5px);
    }

    100% {
        transform: translateX(0) translateY(0);
    }
}

.hero-bg {
    animation: niceBreath 6s ease-in-out infinite;
}

.img-main {
    width: 100%;
    border-radius: 24px;
    box-shadow: 30px 30px 60px rgba(0, 0, 0, 0.1);
}

.glass-card {
    position: absolute;
    bottom: -30px;
    left: -30px;
    background: var(--glass);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

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

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* Text Animations */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    15% {
        opacity: 1;
        transform: translateY(0);
    }

    85% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.anim-text {
    display: inline-block;
    opacity: 0;
    animation: fadeInUp 5s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

/* Features */
.features {
    padding: 6rem 0;
}

.section-header {
    margin-bottom: 4rem;
}

.section-header.center {
    text-align: center;
}

.section-header h2 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.feature-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.feature-card {
    background: var(--white);
    padding: 3rem 2rem;
    border-radius: 24px;
    transition: var(--transition);
    border: 1px solid transparent;
    height: 100%;
}

.feature-card:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: var(--primary);
    box-shadow: 0 30px 60px rgba(45, 90, 71, 0.15);
    background: linear-gradient(to bottom right, var(--white), var(--primary-light));
}

.icon-box {
    width: 60px;
    height: 60px;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    margin-bottom: 1.5rem;
}

.product-img {
    height: 220px;
    background: var(--primary-light);
    border-radius: 18px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img img {
    width: 90%;
    height: 90%;
    object-fit: contain;
    transition: all 0.5s ease;
}

.product-card:hover .product-img img {
    transform: scale(1.15) rotate(5deg);
}

/* Products */
/* Medicine Showcase Section */
.med-showcase {
    padding: 8rem 0;
    background: linear-gradient(to bottom, var(--white), var(--primary-light));
}

.med-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    margin-top: 4rem;
    max-width: 100%;
    margin-inline: auto;
}

.med-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    padding: 3rem 2rem;
    background: var(--white);
    border-radius: 24px;
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(45, 90, 71, 0.1);
    position: relative;
    height: 100%;
}

.med-icon-box {
    background: var(--bg-light);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    flex-shrink: 0;
    border: 1px solid rgba(45, 90, 71, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    margin-bottom: 0.5rem;
}

.med-icon-box img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.med-price {
    display: block;
    font-weight: 700;
    color: var(--primary);
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    margin: 0;
    order: 3;
}

.med-use {
    display: block;
    font-size: 1.1rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    text-align: center;
    order: 2;
}

.med-item:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(45, 90, 71, 0.15);
    border-color: var(--primary);
}

.med-item:hover .med-icon-box {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 15px 30px rgba(45, 90, 71, 0.3);
    transform: scale(1.1);
}

.med-item:hover img {
    transform: scale(1.1);
    filter: brightness(0) invert(1);
}

@media (max-width: 1024px) {
    .med-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 columns on tablet */
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .med-showcase {
        padding: 4rem 0;
    }
}

@media (max-width: 640px) {
    .med-grid {
        grid-template-columns: 1fr;
        /* 1 column on mobile */
        gap: 1.5rem;
        max-width: 400px;
    }

    .med-item {
        padding: 2rem;
    }
}

.products {
    padding: 6rem 0;
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
}

.view-all {
    text-decoration: none;
    color: var(--primary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.product-card {
    background: var(--white);
    border-radius: 24px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(45, 90, 71, 0.05);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(45, 90, 71, 0.15);
}

.product-card {
    background: var(--white);
    position: relative;
    overflow: hidden;
}

.product-card:hover .info-icon {
    opacity: 1 !important;
}



.product-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.product-img {
    height: 250px;
    position: relative;
    overflow: hidden;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.product-card:hover .product-img img {
    transform: scale(1.1);
}

.product-tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--accent);
    color: var(--white);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.product-info {
    padding: 1.5rem;
}

.product-info h4 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.product-info p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.product-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primary);
}

.add-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--primary-light);
    color: var(--primary);
    cursor: pointer;
    transition: var(--transition);
}

.add-btn:hover {
    background: var(--primary);
    color: var(--white);
}

/* Consultation */
.consultation {
    padding: 6rem 0;
    background: var(--primary-light);
    margin: 4rem 0;
}

.consult-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: center;
}

.consult-content h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.consult-list {
    list-style: none;
    margin: 2rem 0;
}

.consult-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.consult-list li i {
    color: var(--primary);
}

.consult-image img {
    width: 100%;
    border-radius: 24px;
}

/* Footer */
.footer {
    background: var(--white);
    padding: 6rem 0 2rem;
    border-top: 1px solid var(--primary-light);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

.footer-brand p {
    margin: 1.5rem 0;
    max-width: 300px;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--primary);
    color: var(--white);
}

.footer-links h4,
.footer-newsletter h4 {
    margin-bottom: 1.5rem;
}

.footer-links ul {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.8rem;
}

.footer-links a {
    text-decoration: none;
    color: var(--text-muted);
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--primary);
}

.newsletter-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.newsletter-form input {
    padding: 0.8rem 1.5rem;
    border: 1px solid var(--primary-light);
    border-radius: 50px;
    flex: 1;
    outline: none;
}

.newsletter-form button {
    background: var(--primary);
    color: var(--white);
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    cursor: pointer;
}

.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid var(--primary-light);
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.footer-legal {
    display: flex;
    gap: 2rem;
}

.footer-legal a {
    text-decoration: none;
    color: var(--text-muted);
}

/* Mobile Toggle */
.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary);
}

/* Responsive */
@media (max-width: 1024px) {
    .feature-grid {
        grid-template-columns: 1fr 1fr;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-content h1 {
        font-size: 3.5rem;
    }
}

@media (max-width: 768px) {

    .nav-links,
    .nav-actions {
        display: none;
    }

    /* Mobile Menu Active States */
    .nav-links.active {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        padding-top: 8rem;
        align-items: center;
        gap: 2rem;
        z-index: 998;
        animation: menuFadeIn 0.3s ease-out;
    }

    .nav-links.active a {
        font-size: 1.5rem;
        color: var(--text-dark);
    }

    .nav-actions.active {
        display: flex;
        position: fixed;
        bottom: 3rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 999;
        gap: 1.5rem;
        width: 100%;
        justify-content: center;
        animation: fadeInUp 0.5s ease-out;
    }

    @keyframes menuFadeIn {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .nav-toggle {
        display: block;
        z-index: 1001;
        /* Above menu */
        font-size: 1.5rem;
    }

    .hero-grid,
    .consult-grid,
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero {
        padding-top: 8rem;
        padding-bottom: 4rem;
    }

    .hero-content {
        text-align: center;
        order: 2;
        /* Text below image on mobile usually looks better or above? Standard is often image top but let's stick to text top if image is background... wait. 
                   The hero has an image stack on the right in desktop. 
                   Mobile: Image stack might be good on top or bottom. 
                   Let's keep text top (default order) for better LCP, or responsive order. 
                   Current implementation has no order set, so text is first. 
                   Let's enforce text first. */
    }

    .hero-image {
        order: 1;
        /* Actually, visuals usually first on mobile for products, but for hero text is key. Let's keep text first. */
        margin-bottom: 2rem;
    }

    .hero-btns {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .glass-card {
        left: 50%;
        transform: translateX(-50%);
        bottom: -20px;
        width: 90%;
        justify-content: center;
    }

    .footer-grid {
        text-align: center;
    }

    .footer-brand p {
        margin: 1.5rem auto;
    }

    .social-links {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        text-align: center;
    }
}

/* Kidney Stone Remedy Page Tags */
.keyword-tag {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--white);
    color: var(--primary);
    padding: 0.7rem 1.4rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid var(--primary-light);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.keyword-tag i {
    width: 18px;
    height: 18px;
    transition: transform 0.4s ease;
}

.keyword-tag:hover {
    transform: translateY(-5px) scale(1.05);
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    box-shadow: 0 15px 30px rgba(45, 90, 71, 0.2);
}

.keyword-tag:hover i {
    transform: rotate(15deg) scale(1.2);
}

/* =========================================
   Mobile Optimization & User Updates 
   ========================================= */

/* Remedy Hero Background (Authentic Vector) */
.remedy-hero {
    background: url('vec_remedy_hero.svg') center/cover no-repeat !important;
    padding: 10rem 0 6rem;
    position: relative;
    text-align: center;
    overflow: hidden;
}

.remedy-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(45, 90, 71, 0.95), rgba(26, 59, 46, 0.9));
    z-index: 1;
}

.remedy-hero>.container {
    position: relative;
    z-index: 2;
}

/* Mobile Fixes */
@media (max-width: 768px) {

    /* Hero Text Size */
    .hero-content h1 {
        font-size: 2.2rem !important;
        line-height: 1.2;
    }

    /* Section Headers */
    .section-header h2 {
        font-size: 1.8rem !important;
        margin-bottom: 0.5rem !important;
        line-height: 1.3;
    }

    .section-header p {
        font-size: 1rem !important;
        max-width: 100%;
        margin-top: 0 !important;
    }

    /* Feature Grid Stacking */
    .feature-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }

    /* Reduce Padding */
    .remedy-hero {
        padding: 6rem 0 4rem;
    }
}