/* Custom CSS Variables - HEALTH Theme Vibe */
:root {
    --coq10-bg: #F0FDF4; /* Very soft mint/health green background */
    --coq10-surface: #FFFFFF;
    --coq10-tone: #059669; /* Trustworthy Emerald Green */
    --coq10-tone-hover: #047857;
    --coq10-ink: #111827;
    --coq10-gradient: linear-gradient(135deg, #059669, #10B981);
    --font-display: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.coq10-main-stage { padding-bottom: 100%;}
/* 
 * CSS-Only Gallery Logic 
 * Uses the :checked pseudo-class on hidden radio inputs to toggle 
 * the opacity and z-index of absolute positioned images.
 */
#coq10-img1:checked ~ .coq10-main-stage #slide-1,
#coq10-img2:checked ~ .coq10-main-stage #slide-2,
#coq10-img3:checked ~ .coq10-main-stage #slide-3,
#coq10-img4:checked ~ .coq10-main-stage #slide-4 {
    opacity: 1;
    z-index: 10;
}

/* 
 * Thumbnail Active State Formatting (Preset A)
 * Highlights the thumbnail corresponding to the active radio button.
 */
#coq10-img1:checked ~ .coq10-thumb-strip label[for="coq10-img1"],
#coq10-img2:checked ~ .coq10-thumb-strip label[for="coq10-img2"],
#coq10-img3:checked ~ .coq10-thumb-strip label[for="coq10-img3"],
#coq10-img4:checked ~ .coq10-thumb-strip label[for="coq10-img4"] {
    border-color: var(--coq10-tone);
    box-shadow: inset 0 0 0 2px var(--coq10-surface);
    opacity: 1;
}

/* Action Button Interactive States */
.coq10-action-trigger {
    text-decoration: none;
    box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.2), 0 2px 4px -1px rgba(5, 150, 105, 0.1);
}

.coq10-action-trigger:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgba(5, 150, 105, 0.3), 0 4px 6px -2px rgba(5, 150, 105, 0.15);
}

.coq10-action-trigger:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px -1px rgba(5, 150, 105, 0.2);
}

/* Smooth transitions for links */
a {
    transition: all 0.2s ease-in-out;
}