* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /*Keep width 100% with padding inside */ 
}

html {
  scroll-behavior: smooth; /*Smooth movement when click nav links*/
}

body {
  background-color: #fdfaf7;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header-nav {
  padding: 20px 0;
  width: 100%;
}

.header-nav ul {
  list-style: none;  /* Removes bullet points */
  display: flex; /*Changes vertical list to horizontal row*/
  justify-content: center; /* Centers links horizontally */
  gap: 30px; /* Adds space between links */
}

.header-nav a {
  text-decoration: none; /* Removes blue underline */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.1rem;      /* Sized for readability */
  text-transform: uppercase; /*Capitalizes all letters */
  color: #333;            
  letter-spacing: 1px;
  transition: color 0.3s; /* Smooth glow when hovering */
  display: inline-block; /* Link accepts vertical padding */
  padding: 3px 3px;     /* Makes it easier to tap */
}

.header-nav a:hover {
  color: #d4a373; 
}

.header-cafeintro {
  text-align: center;
  padding: 30px 20px;
}

.cafe-name {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 3.5rem;
  font-weight: 300;
  color: #2c3e50;
  margin-bottom: 10px;
  letter-spacing: 2px;
} 

.cafetagline {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.5rem;
  font-style: italic;
  color: #d4a373;
  letter-spacing: 2px;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 20px;
}

.mobile-break { /* No break regular screens, see media query: cafetagline clean break on mobile */
  display: none;
}

.carousel-container {
  width: 100%;       /* Edge-to-edge width */ /* Flexible on small screens */
  max-width: 700px;  /* Prevents image from taking over screen */
  height: auto;
  margin: 0 auto;    /* Centers the carousel */
  overflow: hidden;  /*Hides waiting images*/
  position: relative; /* Anchors the buttons to the image not website */
}

.carousel-slide {
  display: flex; /* Flexbox creates horizontal stacking */
  transition: transform 0.5s ease-in-out; /* controls individual slide movement */
}

.carousel-slide img {
  width: 100%; /* Shows one image at a time */
  height: auto; /* Height calculates based width */
  flex-shrink: 0; /* Prevents browser from squeezing all images into one view */
  display: block; /* Removes the tiny gap below images */
}

.carousel-button {
   position: absolute; /* Anchors buttons to image */
   top: 50%; /* Move the top of the button to the middle of the container */
   transform: translateY(-50%); /*Pulls the div up by half its height */
   z-index: 10;  /* Ensures buttons stay on top of the images */ 
   width: 100%; /* Div stretches across the whole image */
   display: flex; /* Pushes arrows to the far left/right */
   justify-content: space-between; /* Pushes one arrow left and one right */
   pointer-events: none; /* Allows clicks to "pass through" the div to the buttons */
}

.carousel-button button {
  background-color: transparent;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 4rem;
  font-weight: 50;
  opacity: 0.7;   /* Softens the arrows color */
  transition: opacity 0.2s; /*Gentle transition when hovering */
  cursor: pointer;
  pointer-events: auto; /* Re-enables clicking on the arrows */
}

.carousel-button button:hover {
  opacity: .9; /* Arrow glows when hovering */
}

.container {
  max-width: 1100px; /* Limits text width on big screens */
  margin: 0 auto;
  padding: 0 20px;
}

h1, h2, h3 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #2c3e50;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 2rem;
}

h3 {
  font-size: 1.4rem; 
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #2c3e50;
  margin-bottom: 5px;  
}

p, li, span {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color:#2c3e50;
}

.story {
padding-top: 10px;
}

.story p {
  margin-bottom: 20px;
  line-height: 1.8; /* Increased for better readability */
}

.story ul {
  margin: 20px 0 20px 20px; /* Indents the list */
}

.story li {
  margin-bottom: 10px;
}

.sunrise {
  color: #d4a373;
  letter-spacing: 2px;
  line-height: 1.3;
  font-style: italic;
  font-size: 1.5rem;
  
}

.daybreak-menu {
  margin-bottom: 50px;
}

.menu {
  padding: 40px 0; 
}

.menu-grid {
  display: flex; 
  flex-wrap: wrap; /* Enables menu items to wrap horizontally */
  justify-content: center;
  gap: 35px 40px;
}

.menu-category {
  flex: 1 1 400px; /* Allows categories to grow/shrink, base width 400px */
}

.menu-category h3 {
  border-bottom: 2px solid #d4a373; /* Adds accent line under headers */
  padding-bottom: 10px;
  margin-bottom: 25px;   /* Space between category title and first item */
}

.menu-category p {
  margin-bottom: 20px;   /* Space between each dish */
  display: block;        /* Starts each dish on a new line */
}

.dish-name {
    font-weight: bold;
}

.price {
    font-weight: bold;
    color: #8B5E3C;
    margin-left: 5px;
}

.mhl-tagline {
  color:#d4a373;
  letter-spacing: 2px;
  line-height: 1.3;
  font-style: italic;
  font-size: 1.5rem;
}

.hours-location .container {
  display: flex;
  align-items: stretch; /* Stretches row height, prevents map cut-off */
  max-width: 1100px;
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

.main-hours-location, 
.main-map {
  flex: 1 1 50%; /* Grow, shrink, and set base width to 50% */
}

.main-hours-location {
  text-align: center; /* Horizontal center */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}

.address-block p {
  margin-top: 10px;  
  font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.2; /* Keeps address lines close together */
}

.hours-block {
    letter-spacing: 0.5px;  
}

.hours-block p {
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums; /* Keeps numbers aligned */
}

.main-map {
  max-width: 100%;
  display: flex; /* Makes this div a flex container too */
  justify-content: center; /* Centers the iframe horizontally */
}

.main-map iframe {
  width: 100%;
  aspect-ratio: 1/1; /*Keeps map square */
  border: none;
  display: block;
}

.content-narrow {
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  padding: 40px 0px;
  text-align: center;
  margin-bottom: 20px;
}

.main-touch {
  text-align: left;
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 1px solid #EAE7E1;
}

.main-touch h2 {
  text-align: center;
}

.main-touch p {
  margin-bottom: 5px;
  line-height: 1.2;
}

.contact-info {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #2c3e50;
  margin-bottom: 5px;
}

.contact-us {
  padding-top: 20px; /* Creates separation from the map */
}

.contact-us .content-narrow {
  padding-bottom: 0; 
}

.phone-link, .email-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.phone-link:hover, 
.email-link:hover {
  color: #d4a373;
}

.form-group {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-bottom: 20px; /*Adds space between input box and button*/
}

.form-group label {
  font-weight: 600;
  margin-bottom: 5px;
}

label {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  color:#2c3e50;
  display: block; /* Ensures label sits above the input */
}

label + input, 
label + textarea {
  margin-top: 7px; /*Placing the margin-top here prevents it from adding to the hidden .sr-only content*/
}

textarea {
  min-height: 160px;
  resize: vertical; /*Stretch box vertically if user's needs */
}

textarea, input {
  width: 100%;
  border: 1px solid #D1C7BD;
  border-radius: 5px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:#2c3e50;
  font-size: 1rem;
  line-height: 1.4;
  padding: 8px 12px;
  outline: none;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
  
}

textarea:focus, input:focus {
  border-color: #8B5E3C;
}

input {
  height: auto;
}

.form-group button[type="submit"] {
  width: fit-content; /*Button width defined by text + padding*/
  min-width: 150px; /*Prevents being too tiny on mobile*/
  align-self: center;
  background-color:  #d4a373;
  color: #fff;
  border: 2px solid #d4a373;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .9rem;
  font-weight: 600;
  text-align: center;
  vertical-align: center;
  cursor: pointer;
  padding: 10px 30px;
  display: inline-block;
  transition: all 0.3s ease;
}

.form-group button[type="submit"]:hover {
  background-color: transparent;
  color: #d4a373;
}

.subscribe-section .content-narrow {
  padding-top: 70px; 
}

.subscribe-content p {
    margin-bottom: 5px;
    line-height: 1.4;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.footer {
  background-color: #2c3e50;
  padding: 60px 0 20px 0;
  text-align: center; /* Centers h2, icons, copyright */
}

.footer h2 {
    color: #d4a373;
    margin-bottom: 15px;
}

.footer a {
  margin: 0 10px; /* Adds space between icons */
}

.footer p {
  color: #FAFAF5;
}

.copyright {
  margin-top: 40px;
  font-size: 0.85rem;
  padding-top: 20px;
}

@media (max-width: 768px) { /* Mobile phones, tablets settings */
  
  .header-nav ul {
    flex-wrap: wrap;       /* Allow links to move to a second line when needed */
    justify-content: center;
    gap: 10px 20px;        /* 10px vertical gap, 20px horizontal gap */
  }
  
  .header-nav a {
    font-size: 0.9rem;     /* Slightly smaller text */
  }
  
  .mobile-break {
    display: block; /* Enforces cafe tagline clean break on mobile */
    }

  .hours-location .container {
    flex-direction: column; /* Hours & location + map stack vertically */
  }
  
  .main-hours-location {
    padding: 40px 20px;    /* Space around text */
  }

  .main-map iframe {
    aspect-ratio: 16/9;    /* Make map wider rectangle on mobile */
  }

  .content-narrow {
    padding: 20px 0;
  }

  .form-group {
    margin-bottom: 15px;
  }
}