/* Reset browser defauls for consistency */
* {
    margin: 0; /* Removes default outer spacing around elements */
    padding: 0; /* Removes default inner spacing inside elements */
    box-sizing: border-box; /* Makes width/height calculations easier */
}

/* Brand color palette */
:root {
  --ink: #111111;      /* Almost black - for main text */
  --cream: #f5f1e8;    /* Warm off-white - main background */
  --clay: #c3a48c;     /* Pale brown - accent */
  --sage: #a9c3b5;     /* Soft faded green - secondary accent */
  --evergreen: #4e6658;/* Deep muted green - bold accent */
}

/* Base page styling */
html, body {
  background-color: var(--cream);
  color: var(--ink);
  font-family: "EB Garamond", "Baskervville", "IBM Plex Serif",
               "Palatino Linotype", "Book Antiqua", Palatino, serif;
  line-height: 1.7;
  font-size: 100%; /* Base font size */
}

.site-header{
  background-color: var(--cream);
  padding: 10px 20px;
}

.main-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.5rem; /* slightly smaller text for header */
}

.main-header img{
  width: auto; /* fixed width for logo */
  height: 125px; /* maintains aspect ratio */
  padding-left: 5px; /* space between logo and left edge */
  padding-right: 5px; /* space between logo and right edge */
  padding-top: 7px;
  margin: 0; /* removes default margin */
}

.logo-wrapper {
  border-bottom: 1px double var(--ink); /* adds a bottom border to the logo */
  padding-bottom: 0.5rem; /* space between logo and bottom border */
  margin-bottom: 0.5rem; /* space between logo and navigation */
}

.main-header nav ul {
  display: flex;
  list-style: none;
  gap: 1rem; /* space between menu items */
  margin: 0;
  padding: 0;
}

.main-header nav ul li a {
  text-decoration: none;
  text-align: center; /* centers text in each link */
  color: inherit;
  padding: 0.2rem 0.7rem;
  border-radius: 4px; /* keeps hover and focus styles uniform, slightly rounds edges around background */
  transition: background-color 1s ease, outline 1s ease;
}

/* Hover: subtle background change for mouse users */
.main-header nav ul li a:hover {
  background-color: var(--sage);
}

/* Focus-visible: clear outline for keyboard users */
.main-header nav ul li a:focus-visible {
  outline: 1px solid var(--cream);
  outline-offset: 1px;
  background-color: var(--evergreen);
  color: var(--cream); /* optional: better contrast */
}

/* Main content area */
.hero {
  padding-top: 8rem;
  padding-bottom: 15rem;
  padding-left: clamp(1rem, 5vw, 4rem);
  padding-right: clamp(1.5rem, 10.1vw, 5.5rem);
  max-width: 1500px;
  margin: 0;
  text-transform: lowercase;
  letter-spacing: normal; /* normal letter spacing */
  background-image: url('../assets/images/paint.png');
  background-size: 600px; /* covers the entire hero section */
  background-position: 0% -50%; /* centers the background image */
  background-repeat: no-repeat; /* prevents tiling of the background image */
}

.hero-inner {
  flex-direction: column; /* stack elements vertically */
  align-items: center; /* center elements horizontally */
  gap: 0.5rem; /* space between elements */
  max-width: 1200px; /* maximum width for the hero section */
}

.hero h2 {
font-weight: 700; /* bold text */
font-size: 1.5rem; /* smaller text for headings */
  margin-bottom: 0.2rem; /* space below heading */
} 

.hero p {
  font-size: 1.5rem; /* smaller text for paragraphs */
}

.hero a {
  display: inline-flex; /* makes link a clickable area */
  align-items: center; /* centers text vertically */
  color: inherit; /* inherit color from parent */
  font-size: 1.1rem; /* smaller text for links */
  font-weight: 300; /* bold text */
  padding: 0.2rem 0.5rem; /* padding for clickable area */
  border-radius: 4px; /* rounded corners */
  transition: background-color 1s ease; /* smooth background transition */
}

.hero a:hover {
  background-color: var(--sage); /* subtle background change on hover */
  padding: 0.2rem 0.5rem; /* padding for clickable area */
}

.hero a:focus-visible {
  outline: 1px solid var(--cream); /* clear outline for keyboard users */
  outline-offset: 1px; /* space between outline and element */
  background-color: var(--evergreen); /* bold background for focus */
  color: var(--cream); /* better contrast for text */
  padding: 0.2rem 0.5rem; /* padding for clickable area */
}