/*
Theme Name: All Sydney Tree Services
Theme URI: https://allsydneytree.com.au
Author: Shreeyash Thapa
Author URI: https://allsydneytree.com.au
Description: Custom WordPress theme for All Sydney Tree Services developed by Shreeyash Thapa.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: all-sydney-tree
*/

/* Custom styles from index.html */
body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* Claymorphism Utilities */
.clay-card {
    background: #f6f8f6;
    box-shadow: 20px 20px 60px #d1d4d1, -20px -20px 60px #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 1rem;
}

.clay-card-strong {
    background: #f6f8f6;
    box-shadow: 20px 20px 60px #d1d4d1, -20px -20px 60px #ffffff, inset 2px 2px 5px rgba(255, 255, 255, 0.5);
    border-radius: 3rem;
}

.clay-card-inset {
    background: #f0f4f0;
    box-shadow: inset 6px 6px 12px #d1d4d1, inset -6px -6px 12px #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.clay-btn {
    background: #11d411;
    /* Brand Green */
    color: white;
    box-shadow: 6px 6px 12px #0ea00e, -6px -6px 12px #ffffff;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.clay-btn:active {
    box-shadow: inset 4px 4px 8px #0ea00e, inset -4px -4px 8px #ffffff;
    transform: scale(0.98);
}

.clay-btn-primary {
    background: #11d411;
    color: white;
    box-shadow: 6px 6px 12px #0ea00e, -6px -6px 12px #ffffff;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* Compatibility Aliases */
.clay-inner {
    background: #f0f4f0;
    box-shadow: inset 6px 6px 12px #d1d4d1, inset -6px -6px 12px #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
}

.clay-button {
    background: #11d411;
    color: white;
    box-shadow: 6px 6px 12px #0ea00e, -6px -6px 12px #ffffff;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.clay-button:hover {
    transform: translateY(-2px);
}

.clay-button:active {
    box-shadow: inset 4px 4px 8px #c9eac9, inset -4px -4px 8px #ffffff;
    transform: scale(0.98);
}

/* Missing Header Styles */
.clay-circle {
    background: #11d411;
    box-shadow: 10px 10px 20px #d1d4d1, -10px -10px 20px #ffffff, inset 4px 4px 8px rgba(255, 255, 255, 0.4);
}

.organic-shape {
    border-radius: 60% 40% 70% 30% / 30% 67% 33% 70%;
}

.organic-blob {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

.clay-input-inset {
    background: #f0f4f0;
    box-shadow: inset 4px 4px 8px #d1d4d1, inset -4px -4px 8px #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.clay-btn-bold {
    background: #11d411;
    box-shadow: 8px 8px 16px #0ea00e, -8px -8px 16px #ffffff;
    border-radius: 1rem;
    transition: all 0.2s ease;
}

.clay-btn-bold:hover {
    transform: translateY(-2px);
    box-shadow: 12px 12px 24px #0ea00e, -12px -12px 24px #ffffff;
}

/* New Blog Template Claymorphism */
.clay-card {
    background: #fdfdfd;
    transition: all 0.3s ease;
}

.dark .clay-card {
    background: #162a16;
}

.clay-button-primary {
    background: #11d411;
    box-shadow: 6px 6px 12px rgba(17, 212, 17, 0.3), inset 4px 4px 8px rgba(255, 255, 255, 0.4), inset -4px -4px 8px rgba(0, 0, 0, 0.1);
    color: white;
}

.clay-badge {
    background: rgba(17, 212, 17, 0.1);
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.5), inset -2px -2px 4px rgba(17, 212, 17, 0.1);
}

/* Gallery Specific Styles */
.clay-card {
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.clay-card:hover {
    transform: translateY(-5px);
}

.filter-btn {
    transition: all 0.2s ease;
}

.filter-btn.active {
    background-color: #11d411;
    /* primary colour */
    color: white;
    box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.2);
}

.bg-blob {
    position: fixed;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(17, 212, 17, 0.1) 0%, rgba(17, 212, 17, 0) 70%);
    filter: blur(60px);
    z-index: -1;
    pointer-events: none;
}

/* Hide default details marker */
details>summary {
    list-style: none;
}

details>summary::-webkit-details-marker {
    display: none;
}