:root {
  --color-bg: #ffebe0;
  --color-text: #014A3EF2;
  --color-accent: #2596be;
  --color-cream: #FFF6F0F5;
  --color-pink: #F6CCCFBD;
  --color-orange: #FF5E1BEB;
  
}
body {
  
}


 
 /* Basic reset / global */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body {
    font-family: sans-serif;
    line-height: 1.6;
    background-color: var(--color-bg);
    color: var(--color-text);
}

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

body { font-family: "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif }

header {
    display: flex;
    justify-content: flex-start;   /* keeps title + nav closer together */
    align-items: center;
    gap: 150px;                     /* controls spacing BETWEEN title + nav */
    padding: 0.8rem 2.5rem;        /* increased padding = wider/taller header */
    border-bottom: 2px solid var(--color-text);
    left: calc(-100vw + 100%);
    background: var(--color-bg);
}

    /* Indent the title */
header .site-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: 1px; 
    margin-left: 100px;             /* <-- INDENTS the title */
}

/* Nav stays closer to title */
header nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;  
    font-weight: 400;
    letter-spacing: 0.8px;
}

header nav a {
    text-decoration: none;
    color: var(--color-text);
    font-size: 18px;
}

header nav a:hover {
    color: var(--color-orange);
}
    
#home p {
    font-size: 18px; 
    line-height: 1.75;            
    max-width: 800px;           
    margin: 1.5rem auto 3rem auto;  
    margin-bottom: 150px;       
    padding: 0 1rem;              
    color: var(--color-text);     
    text-align: left;
    letter-spacing: 0.8px; 
    font-weight: 350;
    font-family: "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  
}

img {
    display: block;          /* allows margin auto to work */
    margin: 2rem auto;       /* centers the image horizontally */
    max-width: 800px;        /* controls how small it should be — adjust as you like */
    width: 100%;             /* responsive scaling */
    height: auto;            /* keeps proportions correct */
    }

.section1 {
  border-top: 2px solid var(--color-text);

}

    /* Footer */
footer {
    text-align: center;
    padding: 30px;
    font-size: 18px;
    color: var(--color-text);
    border-top: 2px solid var(--color-text);
    font-weight: 350;
    letter-spacing: 0.8px;
    }

footer a {
  color: var(--color-text);      
  text-decoration: underline;         
  margin: 0 0.5rem;             
}

footer a:hover {
  color: var(--color-orange);   
  text-decoration:none;    
}

/* CONTACT FORM STYLES */


#contact h2 {
  position: relative;
  font-size: 20px;
  font-weight: bold;
  color: var(--color-text);
  letter-spacing: 1px;
  margin-left: 150px;
  margin-bottom: 2rem;
  padding-bottom: 0.75rem;
}


#contact h2::after {
  content: "";
  position: absolute;
  bottom: 0;

  /* FULL WIDTH LINE */
  width: 100vw;
  height: 2px;
  background: var(--color-text);

  /* force it to span the viewport */
  left: calc(-100vw + 100%);
}


  
/*
#contact-form .form-field {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
}

#contact-form {
  max-width: 600px;
  margin: 2rem auto;
  padding: 0 1rem;
}

#contact-form label {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: var(--color-text);
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 3px solid var(--color-text);
  font-family: inherit;
  font-size: 1rem;
  background: var(--color-bg);      /* light background for fields 
  color: var(--color-text);
} 

#contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

#contact-form button {
  padding: 0.9rem 1.8rem;
  background: var(--color-text);
  color: var(--color-bg);
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.3s ease;
}

#contact-form button:hover {
  background: var(--color-orange);
}

/* optional: input / textarea focus style */
/*#contact-form input:focus,
#contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(37, 150, 190, 0.2);
}*/


/* Container for the form */
#contact-form {
  max-width: 650px;
  margin: 0 auto;
  padding: 1rem;
}

/* Each row */
#contact-form .form-row {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
}

/* Labels */
#contact-form label {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: 0.4rem;
}

/* Inputs & Selects & Textarea */
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form select,
#contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 2px solid var(--color-text);
  border-radius: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
}

/* Focus states */
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(37, 150, 190, 0.15);
}

/* Checkboxes in line */
#contact-form .checkbox-row {
  flex-direction: row;
  align-items: center;
}

#contact-form .checkbox-row input[type="checkbox"] {
  margin-right: 0.5rem;
}

/* Submit button */
#contact-form button {
  background: var(--color-text);
  color: var(--color-pink);
  width: 85px;
  height: 40px;
  border: none;
  border-radius: 5%;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

#contact-form button:hover {
  background: var(--color-text);
}


/* ------------------------------
   MOBILE / SMALL SCREEN STYLES
---------------------------------*/
@media (max-width: 768px) {

  /* HEADER */
  header {
    flex-direction: row;       /* keep in one line */
    justify-content: space-between; /* title left, nav right */
    padding: 0.5rem 1rem;     /* less padding */
    gap: 1rem;
     left: calc(-100vw + 100%);
  }

  header .site-title {
    font-size: 16px;          /* smaller text */
    margin-left: 0;           /* no extra indent */
  }

  header nav a {
    font-size: 14px;          /* smaller nav links */
  }

  /* CONTACT SECTION */
  #contact {
    padding: 1rem;            /* reduce side padding */
  }

  /* CONTACT HEADING */
  #contact h2 {
    margin-left: 1rem;        /* smaller indent */
    font-size: 18px;          /* smaller text */
    padding-right: 1rem;
  }

  #contact h2::after {
    left: 0;                  /* start at left of viewport */
    width: 100vw;             /* full width underline */
     left: calc(-100vw + 100%);
  }

  /* FORM CONTAINER */
  #contact-form {
    max-width: 100%;          /* full width */
    padding: 0.5rem 1rem;     /* reduce padding */
  }

  /* FORM FIELDS */
  #contact-form input,
  #contact-form select,
  #contact-form textarea {
    font-size: 1rem;
    padding: 0.6rem 0.8rem;
  }

  /* BUTTON */
  #contact-form button {
    width: 100%;              /* full width on mobile */
    max-width: 200px;         /* optional max width */
    margin: 0.5rem auto;      /* center button */
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }

  /* CHECKBOXES */
  #contact-form .checkbox-row {
    flex-direction: column;   /* stack checkbox and label */
    align-items: flex-start;
  }

  #contact-form .checkbox-row input[type="checkbox"] {
    margin-bottom: 0.25rem;
  }

  /* FORM ROWS */
  #contact-form .form-row {
    margin-bottom: 1rem;
  }

  /* IMAGES */
  img {
    max-width: 100%;
    height: auto;
  }

  /* HOME SECTION PARAGRAPH */
  #home p {
    font-size: 18px;
    margin: 1rem auto 2rem auto;
    padding: 0 1rem;
  }
}