/* =============================
   Base
   ============================= */

:root {
  --main-color: #2c593a;  /* deep forest green, earthy yet vibrant */
  --hover-color: #24482f; /* slightly darker forest green */
  --background-color: #f5fbee; /* very light pistachio green */
  --text-color: #222; /* neutral dark grey text color for contrast */
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}


/* =============================
   Layout
   ============================= */

.container {
  max-width: 750px;
  margin: 0 auto;
  padding: 2rem 5vw; /* 5% of viewport width as side padding */

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.block {
  text-align: center;
}


/* =============================
   Headings
   ============================= */

h1,
h2 {
  color: var(--main-color);
  margin: 0;
  text-align: center;
  line-height: 2;
}

h1 {
  font-size: 1.7rem;
  font-weight: 700;
}

h2 {
  font-size: 1.3rem;
  font-weight: 700;
}

/* =============================
   Images
   ============================= */

.block img {
  display: block;
  max-width: 365px;
  width: 100%;
  height: auto;

  margin: 0 auto 0 auto;
}

/* =============================
   Body
   ============================= */

p {
  margin-bottom: 1em;   /* separates paragraphs from each other */
  line-height: 1.5;     /* makes text easier to read */
  color: var(--text-color);          /* basic text colour */
  font-size: 1rem;      /* standard readable size */
  text-align: left;
}

/* Matches the heading colour */
.highlight-heading {
  color: var(--main-color);
  font-weight: 700; /* keep it bold */
}

/* =============================
   Subscribe form
   ============================= */

.signup-form {
    text-align: center; /* centers paragraphs, heading, label, button horizontally */
}

.signup-form h2 {
    line-height: 1.5;
}

.signup-form p {
    text-align: center;
    margin-bottom: 1.25rem;
}

.signup-form label {
    display: block;
    margin-bottom: 0.25rem;
}

.signup-form input[type="email"] {
    display: block;       /* stack vertically */
    margin: 0.5rem auto;  /* center horizontally */
    margin-bottom: 1rem;
    width: 75%;           /* constrain width for email field only */
    max-width: 300px;
}

.signup-form input[type="submit"] {
    display: block;                     /* stack below email field */
    margin: 0.5rem auto 0 auto;         /* center horizontally */
    width: auto;                         /* natural button width */
    padding: 0.5rem 1rem;             /* comfortable click area */
    background-color: var(--main-color);           /* brand forest green */
    color: var(--background-color);                      /* pale pistachio text */
    border: none;
    border-radius: 1rem;             /* soft rounded corners */
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease; /* smooth hover effect */
}

.signup-form input[type="submit"]:hover {
    background-color: var(--hover-color); /* slightly darker forest green */
}

.signup-form input[type="submit"]:focus {
    outline: 2px solid var(--hover-color); /* accessibility focus */
    outline-offset: 2px;
}