/* Theme: NATURE | Preset: A */

:root {
    /* Color Palette - Natural Earthy tones */
    --herb-root-bg: #F4F6F0; /* Light creamy green/gray for background */
    --herb-root-surface: #FFFFFF; /* White for cards */
    --herb-root-tone: #5D8249; /* Natural Leaf Green */
    --herb-root-tone-hover: #486937; /* Darker Green for hover states */
    --herb-root-ink: #2C3526; /* Dark earthy tone for text */
    --herb-root-border: #DDE5D5; /* Soft border color */
    --herb-gradient: linear-gradient(135deg, #5D8249 0%, #7CA662 100%);
    
    /* Typography */
    --font-display: 'Nunito', sans-serif;
    --font-body: 'Mulish', sans-serif;
    
    /* Shadows - Raised */
    --herb-shadow-raised: 0 4px 6px -1px rgba(93, 130, 73, 0.1), 0 2px 4px -1px rgba(93, 130, 73, 0.06);
    --herb-shadow-hover: 0 10px 15px -3px rgba(93, 130, 73, 0.2), 0 4px 6px -2px rgba(93, 130, 73, 0.1);
}

/* Base Reset & Typography specific rules */
body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase; /* Heading Case: uppercase */
}

/* Gallery CSS Logic */
.slide-1, .slide-2, .slide-3, .slide-4 {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 1;
}

.dande-main-view {
    padding-bottom: 100%; /* Maintain aspect ratio for the main view */
}

#pic1:checked ~ .dande-main-view .slide-1,
#pic2:checked ~ .dande-main-view .slide-2,
#pic3:checked ~ .dande-main-view .slide-3,
#pic4:checked ~ .dande-main-view .slide-4 {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Thumbnail Selection Styling */
#pic1:checked ~ .dande-thumb-row label[for="pic1"],
#pic2:checked ~ .dande-thumb-row label[for="pic2"],
#pic3:checked ~ .dande-thumb-row label[for="pic3"],
#pic4:checked ~ .dande-thumb-row label[for="pic4"] {
    border-color: var(--herb-root-tone);
    opacity: 1;
}

.dande-thumb-row label {
    opacity: 0.6;
}
.dande-thumb-row label:hover {
    opacity: 1;
}

/* CTA Button Styles (Preset A: Hover shadow) */
.dande-cta-btn {
    box-shadow: var(--herb-shadow-raised);
    text-decoration: none;
}

.dande-cta-btn:hover {
    background: linear-gradient(135deg, var(--herb-root-tone-hover) 0%, #5D8249 100%) !important;
    box-shadow: var(--herb-shadow-hover);
    transform: translateY(-2px);
}

/* Link transitions */
a {
    transition: color 0.2s ease;
}
a:hover {
    color: var(--herb-root-tone);
}