/*
 * How To green-accent skin.
 * This file is deliberately page-scoped so it can be removed without affecting
 * the Path variants or the site's other page skins.
 */
body.how-to-green-light {
    --how-to-green-start: #3f8f49;
    --how-to-green-end: #1f5c34;
    --how-to-green-shadow: rgba(31, 92, 52, 0.26);
}

/* 1. Meditation Events and 3. Online Lessons: buttons only. */
body.how-to-green-light .how-to-meditation .btn-gold,
body.how-to-green-light .how-to-lessons .btn-gold {
    background: linear-gradient(135deg, var(--how-to-green-start), var(--how-to-green-end));
    box-shadow: 0 4px 15px var(--how-to-green-shadow);
}

body.how-to-green-light .how-to-meditation .btn-gold:hover,
body.how-to-green-light .how-to-lessons .btn-gold:hover {
    background: linear-gradient(135deg, #357c40, #184b2a);
    box-shadow: 0 6px 20px rgba(31, 92, 52, 0.34);
}

/* Meditation Events: retain the existing hover effect, changing only its fine edge. */
body.how-to-green-light .how-to-meditation .slender-banner:hover {
    border-color: var(--how-to-green-start);
}

/* 2. Mantra Group: its single vertical accent line. */
body.how-to-green-light .how-to-mantra .mantra-box {
    border-left-color: var(--how-to-green-start);
}

/* Volunteer: green contact details and quiet green icon discs. */
body.how-to-green-light .volunteer-section .contact-box,
body.how-to-green-light .volunteer-section .contact-box a {
    color: var(--gold-accent) !important;
}

body.how-to-green-light .volunteer-section .vol-icon {
    background: #e5f2e7;
    color: var(--how-to-green-end);
}

/* Get in Touch: pale green icon wells with a deeper green interactive state. */
body.how-to-green-light .how-to-contact .contact-item-modern:hover {
    background-color: #f6fbf7;
}

body.how-to-green-light .how-to-contact .contact-icon-modern {
    background: #f1f9f2;
    border-color: #a8cfae;
    color: #2f7540;
}

body.how-to-green-light .how-to-contact .contact-item-modern:hover .contact-icon-modern {
    background: var(--how-to-green-end);
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(31, 92, 52, 0.24);
}

/* Donate: retain the existing light frame, changing only its fine inner border. */
body.how-to-green-light .how-to-donate .donate-inner {
    border-color: var(--how-to-green-start);
}