/*
Theme Name: Alone
Theme URI: https://alonethemes.com/
Author: Beplusthemes
Author URI: https://beplusthemes.com/
Description: ALONE – Powerful and flexible WordPress theme that comes with 30+ unique and stunning demos, suitable for all your idea and different types of Non-profit Organizations, Ngo, Church, Events, Political, Candidate, Campaign project…
Version: 7.9.1.2
Requires at least: 5.5.X
Tested up to: 6.9.X
Requires PHP: 8.0.X
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alone
Tags: one-column, flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Alone is based on Underscores https://underscores.me/, (C) 2012-2025 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables
# Normalize
# Typography
	## Headings
	## Copy
# Elements
	## Lists
	## Tables
# Forms
	## Buttons
	## Fields
# Navigation
	## Links
	## Menus
	## Next & Previous
# Accessibility
# Alignments
# Clearings
# Layout
# Widgets
# Content
	## Archives
	## Posts and pages
	## Comments
# Blocks
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/
@import "fonts/font.css";
@import "css/normalize.css";
@import "css/alone-main.css";

/* ============================================================
   Sage Housing — Volunteers Page Custom CSS
   Paste into Appearance > Customize > Additional CSS
   or append to your child theme's style.css
   ============================================================ */

/* ----------------------------------------------------------
   Eyebrow / Label text (small uppercase green labels)
   ---------------------------------------------------------- */
.sage-eyebrow,
.elementor-widget-heading .elementor-heading-title.sage-eyebrow {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #5a8a6a;
}

/* ----------------------------------------------------------
   Volunteer opportunity cards — icon-box overrides
   ---------------------------------------------------------- */
.sage-volunteers-cards .elementor-icon-box-wrapper {
  background: #ffffff;
  border: 1px solid #dde8e2;
  border-radius: 6px;
  padding: 24px;
  height: 100%;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sage-volunteers-cards .elementor-icon-box-wrapper:hover {
  box-shadow: 0 6px 24px rgba(45, 106, 79, 0.12);
  transform: translateY(-3px);
}

.sage-volunteers-cards .elementor-icon-box-icon {
  background: #e8f4ee;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.sage-volunteers-cards .elementor-icon-box-icon .elementor-icon {
  color: #2d6a4f !important;
  font-size: 22px !important;
}

.sage-volunteers-cards .elementor-icon-box-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1e3a2f !important;
  margin-bottom: 12px;
}

.sage-volunteers-cards .elementor-icon-box-description {
  font-family: 'Lato', sans-serif !important;
  font-size: 15px !important;
  color: #555555 !important;
  line-height: 1.7 !important;
}

.sage-volunteers-cards .elementor-icon-box-description ul {
  padding-left: 18px;
  margin: 0;
}

.sage-volunteers-cards .elementor-icon-box-description ul li {
  margin-bottom: 6px;
}

/* ----------------------------------------------------------
   Internship callout strip
   ---------------------------------------------------------- */
.sage-intern-callout .elementor-text-editor {
  background: #e8f4ee;
  border-left: 4px solid #2d6a4f;
  border-radius: 0 6px 6px 0;
  padding: 20px 28px;
}

.sage-intern-callout .elementor-text-editor strong {
  color: #1e3a2f;
}

/* ----------------------------------------------------------
   Dark vision section text overrides
   ---------------------------------------------------------- */
.sage-vision-section .elementor-widget-heading .elementor-heading-title {
  color: #ffffff;
}

.sage-vision-section .elementor-widget-text-editor p {
  color: #c8e0d0;
}

.sage-vision-section blockquote,
.sage-vision-section .sage-quote {
  font-style: italic;
  font-size: 22px;
  line-height: 1.65;
  color: #ffffff;
  max-width: 680px;
  margin: 0 auto 24px;
  text-align: center;
}

/* ----------------------------------------------------------
   Button variants
   ---------------------------------------------------------- */

/* White-fill button (for use on dark/green backgrounds) */
.sage-btn-white,
a.sage-btn-white {
  display: inline-block;
  background: #ffffff;
  color: #1e3a2f !important;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 13px 28px;
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.sage-btn-white:hover {
  background: #e8f4ee;
  color: #1e3a2f !important;
}

/* Outlined white button */
.sage-btn-outline-white,
a.sage-btn-outline-white {
  display: inline-block;
  background: transparent;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 11px 28px;
  border-radius: 30px;
  border: 2px solid #ffffff;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.sage-btn-outline-white:hover {
  background: rgba(255,255,255,0.15);
  color: #ffffff !important;
}

/* Purple donate-style button */
.sage-btn-purple,
a.sage-btn-purple {
  display: inline-block;
  background: #6b3fa0;
  color: #ffffff !important;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 13px 28px;
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.2s ease;
}
.sage-btn-purple:hover {
  background: #57318a;
}

/* ----------------------------------------------------------
   CTA section (medium green)
   ---------------------------------------------------------- */
.sage-cta-section .elementor-widget-heading .elementor-heading-title {
  color: #ffffff;
}
.sage-cta-section .elementor-widget-text-editor p {
  color: #c8e0d0;
}

/* ----------------------------------------------------------
   Responsive — stack cards gracefully on tablet/mobile
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .sage-volunteers-cards .elementor-icon-box-wrapper {
    margin-bottom: 16px;
  }

  .sage-vision-section blockquote,
  .sage-vision-section .sage-quote {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .sage-intern-callout .elementor-text-editor {
    padding: 16px 18px;
  }
}