/* -- Source: style-donate.css -- */
/* --- 12-1-25 Created style-donate-steward.css after adding steward page Application Form Section css: .application-form --- */    

:root {
      --light-bg: #f8faf9;
      --lighter-bg: #ffffff;
      --card-bg: #ffffff;
      --text-primary: #2c3e50;
      --text-secondary: #5a6c7d;
      --accent-green: #2e7d32;
      --accent-brown: #6d4c41;
      --accent-light-green: #4caf50;
      --accent-light-brown: #8d6e63;
      --accent-green-subtle: rgba(46,125,50,0.15);
      --accent-brown-subtle: rgba(109,76,65,0.15);
      --border-color: #e0e7e3;
      --shadow: 0 2px 8px rgba(46,125,50,0.08);
      --hover-shadow: 0 4px 16px rgba(46,125,50,0.12);
      --shadow-soft: 0 1px 4px rgba(0,0,0,0.06);
      --shadow-medium: 0 2px 12px rgba(0,0,0,0.08);
      --shadow-strong: 0 4px 24px rgba(0,0,0,0.12);
      --h1-size: 2.8rem;
      --body-size: 1.1rem;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

  

  html { scroll-behavior: smooth; scroll-padding-top: 4rem; }

    

body {
      font-family: 'Open Sans', sans-serif;
      background: linear-gradient(135deg, #2d5a3d 0%, #1e3d2a 100%);
      color: var(--text-primary);
      line-height: 1.6;
      min-height: 100vh;
    }

    .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

     .main-content { padding-top: 10rem; padding-bottom: 4rem; }

    .page-header { text-align: center; margin-bottom: 4rem; padding: 2rem 0; }
    .page-header h1 { font-family: 'Merriweather', serif; font-size: var(--h1-size); font-weight: 700; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }

    .content-section {
      background: var(--lighter-bg);
      border-radius: 15px;
      padding: 2.5rem;
      margin-bottom: 2rem;
      box-shadow: var(--shadow-soft);
      border: 1px solid var(--border-color);
      position: relative;
      overflow: hidden;
    }

    .content-section::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, var(--accent-green), var(--accent-light-green));
      opacity: 0.6;
    }

    .content-section h1 { font-family: 'Merriweather', serif; color: var(--accent-green); margin-bottom: 1rem; font-size: 2rem; }

    .content-section p, .content-section li { font-size: var(--body-size); color: var(--text-primary); line-height: 1.7; margin-bottom: 1.5rem; }

    .content-section ul { padding-left: 1.5rem; margin-bottom: 1.5rem; }

    .feature-section .feature-grid { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }

    .feature-section .feature-image { flex: 1 1 45%; }
    .feature-section .feature-image img { width: 100%; height: auto; }

    .feature-section .feature-content { flex: 1 1 50%; }

    .btn-container { text-align: center; margin-top: 2rem; }
    .btn {
      display: inline-block;
      padding: 12px 30px;
      background: linear-gradient(45deg, var(--accent-green), var(--accent-light-green));
      color: white; text-decoration: none; border-radius: 25px; font-weight: 600;
      transition: all 0.3s ease; cursor: pointer; box-shadow: var(--shadow);
    }
    .btn:hover { transform: translateY(-2px); box-shadow: var(--hover-shadow); background: linear-gradient(45deg, var(--accent-light-green), var(--accent-green)); }

    .back-to-top { display: block; text-align: center; margin-top: 1rem; color: var(--accent-green); text-decoration: none; font-weight: 600; }
    .back-to-top:hover { color: var(--accent-light-green); }

    footer.footer { background: #1e3d2a; padding: 3rem 0; margin-top: 4rem; border-top: 1px solid var(--accent-green); text-align: center; color: #a8c4a8; font-size: 0.9rem; }

    @media (max-width: 768px) {
      .main-content { padding-top: 22rem; }
      .content-section { padding: 2rem; }
      .page-header h1 { font-size: 2.2rem; }
    }

    @media (max-width: 480px) {
      .content-section { padding: 1.5rem 1rem; }
      .page-header h1 { font-size: 1.8rem; }
    }


            /* Application Form Section - used on steward page */
            .application-form {
              background: var(--lighter-bg);
              border-radius: 15px;
              padding: 2.5rem;
              margin-bottom: 2rem;
              box-shadow: var(--shadow-soft);
              border: 1px solid var(--border-color);
              position: relative;
              overflow: hidden;
          }

          .application-form::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              height: 3px;
              background: linear-gradient(90deg, 
                  var(--accent-green), 
                  var(--accent-light-green));
              opacity: 0.6;
          }

          .application-form h3 {
              font-family: 'Merriweather', serif;
              font-size: 1.4rem;
              font-weight: 600;
              color: var(--accent-green);
              margin-bottom: 1.5rem;
              text-align: center;

            }

            /* Header/Hero Section - does not include responsive design hero class attributes*/
            /* Comparing v3 frm AI, which is not full width like index.html header, I am adding or altering these... 
            using 52vh height (btn index 60 and v3AI 44), margin-top 4rem vs 1.5 so used 3.75 (half diff) and adding ...
                margin-top: 1.5rem;
                border-radius: 18px;
                overflow: hidden; 
            using index.html hero h1 color and text shadow not v3's : .hero-content h1 { color: white; text-shadow: 1px 1px 8px rgba(0,0,0,0.6); } */

            .hero {
                background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 
                            url('images/integral-permanence-1066x675.png');
                background-size: cover;
                background-position: center;
                height: 52vh;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                position: relative;
                margin-top: 3.75rem;
                margin-top: 1.5rem;
                border-radius: 18px;
                overflow: hidden;
            }

            .hero::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(45deg, 
                    rgba(74, 124, 89, 0.3) 0%, 
                    rgba(139, 69, 19, 0.3) 100%);
                z-index: 1;
            }

            .hero-content {
                position: relative;
                z-index: 2;
                max-width: 1200px;
                padding: 0 0px;
            }

            .hero h1 {
                font-family: 'Merriweather', serif;
                font-size: 2.8rem;
                font-weight: 700;
                margin-bottom: 0.8rem;
                color: #ffffff;
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            }

            .hero p {
                font-size: 1.1rem;
                margin-bottom: 1.5rem;
                color: #f0f0f0;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            }