/*
Theme Name: GeneratePress Child
Theme URI: 
Description: Custom child theme for GeneratePress - Rise & Shine Garage Doors
Author: 
Author URI: 
Template: generatepress
Version: 1.0.0
*/

/* ==========================================================================
   CUSTOM STYLES (extracted from HTML files)
   ========================================================================== */

html { 
    scroll-behavior: smooth; 
}

/* Modern Gradient Text */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #0f172a, #1e3a8a);
}

/* Hero Mask for "Fun/Modern" shape */
.hero-image-mask {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transition: border-radius 0.5s ease;
}
.hero-image-mask:hover {
    border-radius: 50% 50% 30% 70% / 50% 50% 70% 60%;
}

/* Mobile Menu */
#mobile-menu {
    transition: all 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
#mobile-menu.open {
    max-height: 500px;
    opacity: 1;
}

/* Bento Grid Hover Effects */
.bento-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.bento-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Service Card Hover Effect */
.service-card {
    transition: all 0.3s ease;
}
.service-card:hover {
    transform: translateY(-5px);
    border-color: #FFB800;
}

/* Custom Table Styling for Charity Table */
.charity-table th { 
    background-color: #f1f5f9; 
    color: #0f172a; 
    font-weight: 700; 
}
.charity-table tr:nth-child(even) { 
    background-color: #f8fafc; 
}
.charity-table tr:hover { 
    background-color: #fffbeb; 
}

/* Hide Scrollbar for Review Scroller */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Mask gradient for images (left fade) */
.mask-gradient-left {
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

/* Pattern Dots Background */
.pattern-dots {
    background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
    background-size: 20px 20px;
}