/*
  volunteer/styles.css — Header Notes & Guidance

  Purpose:
  - This file contains volunteer-page-only styles and small token overrides.
  - DO NOT duplicate shared components (grids, cards, forms, buttons) here.
    Shared UI lives in `../styles.css` and shared design variables live in
    `../tokens.css`. Keep this file small, focused and page-scoped.

  How tokens work (for humans and other AIs):
  - Site-wide tokens: edit `g2g-namecheap/tokens.css` (:root) to change the
    global palette, spacing, radii, shadows, breakpoints and semantic color aliases.
    Changing tokens there will re-theme the entire site.
  - Import order matters: this file must import `../styles.css` (which itself
    imports `tokens.css`). The cascade is:
        tokens.css  -> styles.css (shared rules) -> vendor/volunteer/sponsors page CSS
    Page CSS can override variables by scoping them to a body class (see below).
  - Per-page theming: set CSS custom properties scoped to `body.<page-class>` to
    change only that page without touching global tokens. Example:
        body.volunteer-page { --brand-1: #0b69ff; --highlight: #58a6ff; }
    That keeps styles consistent and avoids changing other pages.

  Best practices:
  - Use existing token names (e.g. --brand-1, --accent-1, --color-bg, --text).
  - Keep selectors scoped to the page (e.g. .volunteer-callout, .contact-section).
  - If you need a new semantic color, add it to `tokens.css` first and then
    reference it from here — this keeps a single source of truth.
  - Avoid !important unless absolutely required for third-party overrides.
  - If you modify tokens, test pages that import `tokens.css` and pages with
    body-scoped overrides (vendor/volunteer/sponsors).

  Guidance for automated agents / AIs:
  - Prefer editing `tokens.css` for global theme changes. Only edit this file
    for volunteer-specific visual adjustments or when adding selectors that
    are unique to the volunteer page markup.
  - When adding page-scoped tokens, set them on `body.volunteer-page`.
  - Before changing shared components, consult `../styles.css` — if a shared
    component needs a tweak, prefer updating the shared file rather than
    copying styles here.
  - Search for variable usage (e.g. grep for \"--brand-1\" or \"var(--text)\")
    to understand downstream effects before changing a token.

  Example: enable an alternate volunteer palette (preferred approach)
    Add to tokens.css or here scoped to body:
      body.volunteer-page {
          --brand-1: #0b69ff;
          --accent-1: #58a6ff;
          --color-bg: #f5f9ff;
      }
    Then refresh pages — shared components will pick up the new values.

  If you are making programmatic edits:
  - Keep commits small and add clear commit messages like:
      \"tokens: add cool-blue theme\" or \"volunteer: minor accessible spacing fix\"
  - If converting inline SVG colors to use tokens, prefer inline SVG with CSS
    variables or use `currentColor` so theme changes apply automatically.

  End header.
*/

@import url("../styles.css");

/* Volunteer-specific design tokens (used by volunteer page markup) */

/* ------------------------------------------------------------------
   Volunteer page specific rules only.
   Shared components (cards, grids, forms, buttons, etc.) live in
   ../styles.css so this file remains small and focused.
   ------------------------------------------------------------------ */

/* Volunteer callout — specific gradient and visual treatment */
.volunteer-callout {
    background: linear-gradient(
        135deg,
        var(--volunteer-accent) 0%,
        var(--volunteer-primary) 100%
    );
    color: #ffffff;
    padding: 2.5rem;
    border-radius: 20px;
    text-align: center;
    margin-bottom: 3rem;
    box-shadow: 0 8px 24px rgba(163, 92, 59, 0.28);
    border: 1px solid rgba(163, 92, 59, 0.08);
}

/* Slightly larger heading treatment inside the volunteer callout */
.volunteer-callout h3,
.volunteer-callout h4 {
    color: #ffffff;
    font-size: clamp(1.5rem, 4vw, 2rem);
    margin: 0 0 0.75rem 0;
    font-family: "Love Ya Like A Sister", cursive;
}

/* Short intro text inside callout */
.volunteer-callout p {
    margin: 0;
    font-size: clamp(1rem, 2.2vw, 1.15rem);
    opacity: 0.95;
}

/* Small helper for role time label used in volunteer cards */
.role-time {
    display: block;
    font-weight: 600;
    color: var(--volunteer-primary);
    margin-bottom: 0.35rem;
    font-size: 0.95rem;
}

/* Requirements section (page-specific background and border) */
.requirements-section {
    background: rgba(
        193,
        197,
        169,
        0.08
    ); /* subtle muted canvas distinct to volunteer page */
    padding: 2.25rem;
    border-radius: 16px;
    margin-bottom: 3rem;
    border: 1px solid rgba(193, 197, 169, 0.3);
}

.requirements-section h2 {
    color: var(--volunteer-primary);
}

.requirements-section li {
    padding-left: 1.8rem;
    position: relative;
    color: #3b2f2f;
}

.requirements-section li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--volunteer-accent);
    font-weight: 700;
    font-size: 1.05rem;
}

/* Contact block adjustments used only on volunteer page (centers & constrains) */
.contact-section {
    background: rgba(193, 197, 169, 0.12);
    width: 80%;
    padding: 2rem;
    border-radius: 16px;
    margin: 0 auto 2.5rem auto;
    border: 1px solid rgba(193, 197, 169, 0.35);
    color: #3b2f2f;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

/* Volunteer-form specific tweaks (legend/fieldset color tokens used in inline markup) */
.volunteer-form legend {
    color: var(--volunteer-primary);
    font-weight: 700;
    padding: 0 0.5rem;
}

/* Accessibility: reduced motion preference stays consistent but scoped */
@media (prefers-reduced-motion: reduce) {
    .volunteer-callout,
    .role-card,
    .benefit-card {
        transition: none !important;
        transform: none !important;
    }
}

/* Mobile-friendly tightening for volunteer page only */
@media (max-width: 640px) {
    .volunteer-callout {
        padding: 1.25rem;
        border-radius: 14px;
    }

    .contact-section {
        width: calc(100% - 32px);
        margin-left: 16px;
        margin-right: 16px;
        padding: 1.25rem;
    }

    .role-card,
    .benefit-card {
        padding: 1.25rem 1rem;
    }
}

/* End of volunteer-specific stylesheet */