/* ============================================================
   Seeds of Success — volunteer.css
   Page-specific styles only. Shared styles are in common.css.
   ============================================================ */

/* ---------------------------------------------------------
       Seeds of Success — Volunteer Page
       --------------------------------------------------------- */

    /* 1. Reset & base */

    /* 2. Header & nav */

    /* 3. Hamburger */

    /* 4. Page hero */

    /* 5. Form section */
    .form-section { padding: 80px 0; background: #f5f9f7; }
    .form-card {
      max-width: 760px;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 20px;
      padding: 50px 48px;
      box-shadow: 0 12px 40px rgba(13,110,79,0.10);
      border: 1px solid #e8efec;
      text-align: center;
    }
    .form-card h2 {
      font-family: "Playfair Display", serif;
      font-size: clamp(26px, 3.5vw, 34px);
      color: #0d6e4f;
      margin-bottom: 16px;
    }
    .form-card .lead {
      width: 60px; height: 4px;
      background: #f5a623;
      border-radius: 2px;
      margin: 0 auto 24px;
    }
    .form-card p {
      color: #3e4d49;
      font-size: 16px;
      margin-bottom: 14px;
    }
    .form-card .note {
      background: #fff8eb;
      border-left: 4px solid #f5a623;
      padding: 14px 20px;
      border-radius: 8px;
      text-align: left;
      margin: 24px 0 30px;
      font-size: 15px;
      color: #5a4a25;
    }
    .form-buttons {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 18px;
    }

    /* Volunteer form fields */
    .vol-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .vol-group { margin-bottom: 16px; }
    .vol-group label {
      display: block;
      font-size: 14px;
      font-weight: 500;
      color: #1f2d2a;
      margin-bottom: 6px;
    }
    .vol-group input,
    .vol-group select,
    .vol-group textarea {
      width: 100%;
      padding: 12px 14px;
      border: 1.5px solid #d8e2dd;
      border-radius: 10px;
      font-size: 15px;
      font-family: inherit;
      color: #1f2d2a;
      background: #ffffff;
      transition: all 0.2s ease;
    }
    .vol-group textarea { min-height: 90px; resize: vertical; }
    .vol-group input:focus,
    .vol-group select:focus,
    .vol-group textarea:focus {
      outline: none;
      border-color: #0d6e4f;
      box-shadow: 0 0 0 3px rgba(13,110,79,0.10);
    }
    @media (max-width: 600px) {
      .vol-row { grid-template-columns: 1fr; }
    }

    /* 6. Quick info row */
    .info-row {
      max-width: 760px;
      margin: 40px auto 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
    }
    .info-tile {
      background: #ffffff;
      border-radius: 14px;
      padding: 22px;
      text-align: center;
      box-shadow: 0 4px 14px rgba(13,110,79,0.06);
      border: 1px solid #e8efec;
    }
    .info-tile .ico {
      width: 50px; height: 50px;
      margin: 0 auto 10px;
      background: linear-gradient(135deg, #0d6e4f, #14906a);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center; justify-content: center;
      font-size: 22px;
    }
    .info-tile h4 {
      font-family: "Playfair Display", serif;
      color: #0d6e4f;
      font-size: 17px;
      margin-bottom: 4px;
    }
    .info-tile p { color: #5a6b66; font-size: 13px; }

    /* 7. Closing thank you */
    .thanks-band {
      padding: 80px 0;
      text-align: center;
      background: #ffffff;
    }
    .thanks-band h2 {
      font-family: "Playfair Display", serif;
      font-size: clamp(24px, 3vw, 32px);
      color: #0d6e4f;
      margin-bottom: 14px;
    }
    .thanks-band p {
      max-width: 620px;
      margin: 0 auto;
      color: #5a6b66;
      font-size: 17px;
    }

    /* 8. Footer */

    /* 9. Responsive */
    
    @media (max-width: 768px) {

      .form-card { padding: 36px 24px; }
      .info-row { grid-template-columns: 1fr; }
      
    }

    /* 10. Page transitions */

    @keyframes pageFadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes pageFadeOut {
      from { opacity: 1; transform: translateY(0); }
      to   { opacity: 0; transform: translateY(-6px); }
    }
/* Volunteer page buttons */
.form-buttons .btn-primary {
  background: #0d6e4f;
  color: #ffffff;
  border: 2px solid #0d6e4f;
}

.form-buttons .btn-primary:hover {
  background: #0a5239;
  border-color: #0a5239;
  color: #ffffff;
  transform: translateY(-2px);
}

.form-buttons .btn-outline {
  background: transparent;
  color: #0d6e4f;
  border: 2px solid #0d6e4f;
}

.form-buttons .btn-outline:hover {
  background: #0d6e4f;
  color: #ffffff;
  transform: translateY(-2px);
}

.auth-footer{
    margin-top:28px;
    text-align:center;
    color:#5a6b66;
    font-size:15px;
}

.auth-footer a{
    color:#0d6e4f;
    font-weight:600;
    text-decoration:none;
    transition:.25s;
}

 .auth-footer a:hover { text-decoration: underline; }