/*
Theme Name: Unos Mariscos
Theme URI: https://www.unosmariscosoquerr.com/
Author: Atif Mughal
Author URI: https://atifiy.com
Description: A custom, highly-animated, dynamic WordPress theme built with ACF for Unos Mariscos in Round Rock, TX.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: unos-mariscos
*/

/* 
 * The theme heavily relies on Tailwind CSS via CDN for rapid styling,
 * but custom CSS variables and overrides can be placed here. 
 */

:root {
    --brand-primary: #e63946;
    /* Example red for seafood theme */
    --brand-secondary: #f1faee;
    --brand-dark: #1d3557;
    --brand-accent: #a8dadc;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

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

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

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Tailwind Utilities Layer */
@layer utilities {
    .bg-gradient-sinaloa {
        background: linear-gradient(135deg, rgba(211, 47, 47, 0.95), rgba(0, 0, 0, 0.9));
    }

    .bg-gradient-vibrant {
        background: linear-gradient(135deg, #ca6702, #ee9b00);
    }

    .text-gradient {
        background-image: linear-gradient(135deg, #ca6702, #ee9b00);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .clip-path-slant {
        clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    }

    /* Animated Gradients for Hover States */
    .bg-gradient-animated {
        background: linear-gradient(270deg, #ca6702, #ee9b00, #e9d8a6);
        background-size: 600% 600%;
        animation: GradientAnimation 4s ease infinite;
    }

    @keyframes GradientAnimation {
        0% {
            background-position: 0% 50%
        }

        50% {
            background-position: 100% 50%
        }

        100% {
            background-position: 0% 50%
        }
    }
}

/* ========= CSS MARQUEE / TICKER ========= */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee-scroll 20s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

/* ========= DECORATIVE SECTION FRAME ========= */
.decorative-frame {
    position: relative;
    border: 2px solid rgba(19, 113, 175, 0.15);
    padding: 2.5rem;
    border-radius: 1.5rem;
}

.decorative-frame::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid rgba(202, 103, 2, 0.12);
    border-radius: 1.2rem;
    pointer-events: none;
}

/* Double-line decorative border for headings */
.heading-frame {
    display: inline-block;
    padding: 0.5rem 2.5rem;
    border: 2px solid #0d5585;
    position: relative;
}

.heading-frame::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 1px solid #0d5585;
}

/* ========= COLOR BLOCKS ========= */
.color-block-orange {
    position: relative;
}

.color-block-orange::before {
    content: '';
    position: absolute;
    width: 70%;
    height: 80%;
    background-color: #ca6702;
    border-radius: 1.5rem;
    z-index: 1;
    top: 10%;
    left: 0;
}

.color-block-blue {
    position: relative;
}

.color-block-blue::before {
    content: '';
    position: absolute;
    width: 70%;
    height: 80%;
    background-color: #1371af;
    border-radius: 1.5rem;
    z-index: 1;
    top: 10%;
    right: 0;
}

/* ========= MARITIME PATTERNS ========= */
.pattern-crosshatch {
    background-image: url('assets/images/bg-pattern-white.png');
    background-size: 300px auto;
    background-repeat: repeat;
}

.pattern-blue {
    background-image: url('assets/images/bg-pattern-blue.png');
    background-size: 300px auto;
    background-repeat: repeat;
}

.pattern-faq {
    background-image: url('assets/images/bg-pattern-faq.png');
    background-size: 350px auto;
    background-repeat: repeat;
}

/* ========= IMAGE OVERLAP UTILITY ========= */
.img-overlap {
    position: relative;
    z-index: 10;
    margin-top: -4rem;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.25));
}

/* ========= AOS SAFETY NET ========= */
/* Guarantee ALL content is visible even if AOS fails or is slow */
[data-aos] {
    transition-duration: 400ms !important;
}

/* After page loads, force-show any AOS element that hasn't been triggered */
@keyframes aos-force-show {
    to {
        opacity: 1;
        transform: none;
    }
}

.aos-init:not(.aos-animate) {
    animation: aos-force-show 0.3s ease forwards;
    animation-delay: 1.5s;
}

/* ========= TRUSTINDEX REVIEWS SELECTION STYLING ========= */

/* ========= TRUSTINDEX REVIEWS SELECTION STYLING ========= */

/* 1. Hide unwanted elements (Avatar, Date, Logos, Verified Badges) */
.custom-trustindex-reviews .ti-widget .ti-profile-img,
.custom-trustindex-reviews .ti-widget .ti-image,
.custom-trustindex-reviews .ti-widget .ti-date,
.custom-trustindex-reviews .ti-widget .ti-platform-icon,
.custom-trustindex-reviews .ti-widget .ti-small-logo,
.custom-trustindex-reviews .ti-widget .ti-verified-review {
    display: none !important;
}

/* 2. Outer Card Item Slot (Slider Width Fix) */
.custom-trustindex-reviews .ti-widget.ti-goog .ti-review-item {
    background: transparent !important;
    border: none !important;
    margin: 0 !important; /* ZERO margin protects Flex 100% sliding math accuracy */
    padding: 0.5rem !important; /* Padding creates visual card gaps without dimensions breakouts */
    box-shadow: none !important;
    transition: all 0.3s ease-out !important;
    height: auto !important;
}

/* 3. Inner card wrapper frame (Borders / Background) */
.custom-trustindex-reviews .ti-widget.ti-goog .ti-review-item>.ti-inner {
    background: #ffffff !important;
    border: 2px solid rgba(19, 113, 175, 0.22) !important; /* Continuous blue stroke */
    border-radius: 2rem !important;
    padding: 2.25rem 1.75rem !important; /* Text breathing space inside frame */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    height: 100% !important;
}

/* Hover Effect lifting outer frame */
.custom-trustindex-reviews .ti-widget.ti-goog .ti-review-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(19, 113, 175, 0.08) !important;
}

/* 4. Stars Alignment */
.custom-trustindex-reviews .ti-widget.ti-goog .ti-stars {
    order: -2 !important; /* Force ABSOLUTE top over default 0 orders */
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 0.5rem !important;
}

.custom-trustindex-reviews .ti-widget.ti-goog .ti-stars * {
    color: #ca6702 !important;
    fill: #ca6702 !important;
}

/* 5. Reviewer Name */
.custom-trustindex-reviews .ti-widget.ti-goog .ti-header {
    order: -1 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

.custom-trustindex-reviews .ti-widget.ti-goog .ti-name {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    color: #0d5585 !important; /* unos-darkblue */
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    text-align: center !important;
}

/* 6. Review Text */
.custom-trustindex-reviews .ti-widget.ti-goog .ti-text {
    order: 1 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 1.1rem !important;
    font-style: italic !important;
    color: #4b5563 !important; /* text-gray-600 */
    line-height: 1.625 !important;
    margin-bottom: 0 !important;
}

/* 7. Controls Override for Mobile viewframes - Enable Arrows for Scroll Custom Fix */
@media (max-width: 767px) {
    .custom-trustindex-reviews .ti-widget.ti-goog .ti-controls {
        display: block !important; /* Force visible arrows for JS overrides */
    }
    .custom-trustindex-reviews .ti-widget.ti-goog .ti-controls-line {
        display: none !important; /* Keep dot lines hidden as full continuous sync isn't possible with offset scripts */
    }
}

/* 8. Fix Mobile Slider Cutoff - Continuous Flex with Native Scroll Snapping */
@media (max-width: 767px) {
    /* 8a. Force all buckets inline consecutively */
    .custom-trustindex-reviews .ti-widget.ti-goog .ti-fade-container {
        display: flex !important;
        opacity: 1 !important;
    }

    /* 8b. Bypass broken JS Swipe Translation - Enable Native Elastic Swipe Scroll */
    .custom-trustindex-reviews .ti-widget.ti-goog .ti-reviews-container-wrapper {
        overflow-x: auto !important; /* Enable native horizontal swipe scroll */
        scroll-snap-type: x mandatory !important; /* Lock frames absolute centers */
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important; /* Hide FireFox scrollbar */
        touch-action: pan-x pan-y !important; /* Allow native swipes horizontal natively */
    }

    .custom-trustindex-reviews .ti-widget.ti-goog .ti-reviews-container {
        transform: none !important; /* Bypasses parent transform translate offsets setups */
    }

    .custom-trustindex-reviews .ti-widget.ti-goog .ti-reviews-container-wrapper::-webkit-scrollbar {
        display: none !important; /* Hide Webkit scrollbar trackers */
    }

    /* 8c. Magnet snap points lock card centers cleanly to screen */
    .custom-trustindex-reviews .ti-widget.ti-goog .ti-review-item {
        scroll-snap-align: center !important;
    }
}