/*
filename: about.css
author: Evan Lanza
student id last four: 8804
cs username: elanza05
*/

/* =========================================
   PAGE DEFAULTS
   Removes default browser spacing and
   makes sizing more consistent everywhere
   ========================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* MAIN PAGE STYLING */
body {
  font-family: 'Nunito', sans-serif;
  background-color: #1a3a16;
  color: #1a3a16;
  padding: 20px;
}

/* =========================================
   BACK TO TOP BUTTON
   Button that takes the user to the top
   of the page
   ========================================= */
#goUP {
display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 14px;
  border: 2px solid #1a3a16;
  background: #c2deba;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
  color: #1a3a16;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* BACK TO TOP BUTTON HOVER EFFECT */
#goUP:hover {
  background-color: #678f62;
  color: #eef5ea;
}

/* =========================================
   PAGE LAYOUT
   Grid wrapper for the entire page
   ========================================= */
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

/* =========================================
   HERO SECTION
   Main introduction section of the page
   Contains:
   - Intro content
   - Story content
   ========================================= */
.hero {
  border: 2px solid #1a3a16;
  border-radius: 25px;
  padding: 40px;
  background-color: #c0dd97;
  margin-top: 80px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* WRAPPER FOR HERO TEXT SECTIONS */
.hero-text {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  align-items: center;
}

/* IDENTITY SIDE (LEFT COLUMN) */
.hero-identity-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

/* COMPANY NAME SIDE STYLING */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

/* COMPANT NAME HEADER STYLING */
.intro h1 {
  font-size: 3rem;
  text-transform: uppercase;
  color: #1a3a16;
}

/* SLOGAN TEXT STYLING */
.intro .slogan {
  font-size: 1.25rem;
  line-height: 1.5;;
}

/* =========================================
   LOGO IMAGE BOX
   Container for the Green Thumb logo
   ========================================= */
.plantImg {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* MAIN LOGO IMAGE STYLING */
.plantImg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* =========================================
   STORY SECTION (RIGHT COLUMN)
   Contains background information about
   Green Thumb
   ========================================= */
.story {
  display: flex;
  flex-direction: column;
  gap: 15px;
  text-align: left;
}

/* STORY SECTION HEADING */
.story h2 {
  font-size: 2.2rem;
  text-transform: uppercase;
  color: #1a3a16;
  border-bottom: 2px solid #1a3a16;
  padding-bottom: 8px;
  margin-bottom: 5px;
}

/* STORY PARAGRAPH TEXT */
.story p {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #1a3a16;
}

/* =========================================
   UNIQUE & VALUES & SUSTAINABILITY
   & TRACKER SECTION
   Creates layout for:
   - "What Makes Green Thumb Unique?"
   - "Our Values"
   - "Why Sustainability Matters"
   - "Your Impact Tracker"
   ========================================= */
.unique-values-grid,
.sustainability-tracker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  width: 100%;
}

/* BOX STYLING */
.info-box, .unique, .values, .sustainability, .tracker {
  background-color: #c0dd97;
  border: 2px solid #1a3a16;
  border-radius: 25px;
  padding: 30px;
  color: #1a3a16;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);

}

/* HEADING STYLING */
.info-box h2, .unique h2, .values h2, .sustainability h2, .tracker h2 {
  font-size: 2rem;
  text-transform: uppercase;
  margin-bottom: 15px;
  color: #1a3a16;
}

/* PARAGRAPH STYLING */
.info-box p, .unique p, .values p, .sustainability p {
  font-size: 1.25rem;
  line-height: 1.7;
}

/* SUSTAINABILITY SECTION SUBHEADER STYLING */
.sustainability h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1.75rem;
  color: #1a3a16;
}

/* IMPACT TRACKER CONTAINER FORMATTING */
.tracker-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

/* IMPACT TRACKER NUMBER STYLING */
.impact-number {
    font-size: 2.8rem;
    font-weight: 900;
    color: #1a3a16;
    display: block;
    line-height: 1;
}

/* IMPACT TRACKER DESCRIPTION STYLING */
.impact-label {
    font-size: 1rem;
    font-weight: 600;
    color: #1a3a16;
    margin-top: 5px;
}

/* IMPACT TRACKER FOOTNOTE STYLING */
.tracker-footnote {
    font-size: 0.8rem;
    font-style: italic;
    margin-top: 15px;
    color: #4a5a4a;
}

/* IMPACT TRACKER DIVIDER LINES */
hr {
    border: 0;
    border-top: 1px dashed #1a3a16;
    margin: 0;
}

/* =========================================
   CUSTOM LIST & TEXT STYLING
   Enhances readability and formatting for:
   - Bullet point lists
   - Emphasized text (<strong>)
   ========================================= */
.values ul,
.sustainability ul {
  padding-left: 40px;
  margin-top: 10px;
}

/* LIST STYLING */
.values li,
.sustainability li {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 8px;
}

/* MAKES BOLD TEXT BOLDER */
strong {
  font-weight: 900; 
  color: #1a3a16; 
}

/* =========================================
   RESPONSIVE DESIGN
   Changes layout for tablets and phones
   when screen width is 900px or smaller
   ========================================= */
@media (max-width: 900px) {
  .hero {
    margin-top: 20px;
    padding: 25px;
  }

  .hero-text {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .intro h1 {
    font-size: 2rem;
  }
  
  .unique-values-grid,
  .sustainability-tracker-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}