/*
Author: Jen Hutchinson
Date: 5 Mar 2026
File: Nanny Jen 8style.css
*/

/* CSS Reset */
body, header, nav, main, footer, img, h1, h3, ul, li {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Base styles */
body { background-color: #f3f2fc; }

img {
  max-width: 100%;
  display: block;
}

/* Images */
.image-container {
  display: flex;
  justify-content: space-around;
  gap: 10px;
}
.image-container img {
  max-width: 100%;
  height: auto;
  width: 33.33%;
}

/* Mobile-first defaults */
.mobile { display: block; }
.tab-desk { display: none; }

/* Header (mobile) */
.mobile h1 {
  padding: 2%;
  text-align: center;
  font-family: 'Truculenta', sans-serif;
}
.mobile h3 {
  padding: 2%;
  text-align: center;
  font-family: 'Truculenta', sans-serif;
}

/* Main content */
main {
  padding: 2%;
  font-family: 'Truculenta', sans-serif;
}

/* Smaller text on mobile */
main p { font-size: 1.6em; }
main li { font-size: 1.4em; }
.action {
  font-size: 1.4em;
  font-weight: bold;
  text-align: center;
}

main h3 { padding-top: 2%; }

main ul {
  list-style-type: square;
  padding-left: 1.5em;
}

/* Nav (smaller on mobile) */
nav { background-color: #2a1f14; }

nav ul {
  list-style-type: none;
  text-align: center;
}

nav li {
  display: inline-block;
  font-size: 1.05em; /* smaller on mobile */
  font-family: 'Truculenta', Arial, sans-serif;
  font-weight: bold;
  border-top: 0.5px solid #f3f2fc;
}

nav li a {
  display: block;
  color: #f3f2fc;
  padding: 0.4em 0.9em; /* smaller padding on mobile */
  text-decoration: none;
  text-align: center;
}

/* Links & misc */
.link {
  color: #4d3319;
  text-decoration: none;
  font-weight: bold;
  font-style: italic;
}

.round { border-radius: 6px; }

#info ul { margin-left: 10%; }

#contact { text-align: center; }

.tel-link {
  background-color: #2a1f14;
  color: #fff;
  font-weight: bold;
  padding: 2%;
  width: 80%;
  margin: 0 auto;
}

/* Footer */
footer {
  text-align: center;
  font-size: 1.2em; /* smaller on mobile */
  background-color: #2a1f14;
  color: #fff;
  padding: 1% 0;
}
footer a {
  color: #fff;
  text-decoration: none;
}

/* Tablet/Desktop */
@media (min-width: 768px) {
  .tab-desk { display: block; }
  .mobile { display: none; }

  /* Bigger text for larger screens */
  main p { font-size: 3.25em; }
  main li { font-size: 3em; }
  .action { font-size: 2.75em; }

  /* Nav gets bigger on tablet+ */
  nav li {
    border-top: none;
    font-size: 1.25em;
  }
  nav li a { padding: 0.5em; }

  /* Footer bigger on tablet+ */
  footer { font-size: 1.85em; }
}

/* Desktop */
@media (min-width: 1000px) {
  nav li { font-size: 2.5em; }

  nav li a {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    padding-left: 1.5em;
    padding-right: 1.5em;
  }

  nav li a:hover {
    color: #2a1f14;
    background-color: #f3f2fc;
  }

  #info ul { margin-left: 5%; }
}

/* Large Desktop */
@media (min-width: 1921px) {
  body { background: linear-gradient(#d6d4fa, #ffb88c); }

  #wrapper {
    width: 1920px;
    margin: 0 auto;
  }

  main { background-color: #f3f2fc; }
}

/* Print */
@media print {
  body {
    background-color: #fff;
    color: #000;
  }
}