/*
Author: Jen Hutchinson
Date: 15 Mar 2026
File: Wildlife styles.css
*/

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

/* Base styles (mobile-first) */
body { background-color: #f6eee4; }

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

/* Mobile/tablet/desktop visibility (base = mobile) */
.mobile { display: block; }
.tab-desk, .desktop { display: none; }

/* Header (mobile) */
.mobile h1 {
  padding: 2%;
  text-align: center;
  font-family: 'Emblema One', system-ui;
}

.mobile h3 {
  padding: 2%;
  text-align: center;
  font-family: 'Lora', sans-serif;
}

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

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

nav li {
  display: block;              /* stacked on mobile */
  font-size: 1.5em;
  font-family: Geneva, Arial, sans-serif;
  font-weight: bold;
  border-top: 0.5px solid #f6eee4;
}

nav li a {
  display: block;
  color: #f6eee4;
  padding: 0.5em 2em;
  text-decoration: none;
  text-align: center;
}

/* Main (mobile) */
main { padding: 2%; font-family: 'Lora', sans-serif; }

main p { font-size: 1.25em; }
main h3 { padding-top: 2%; }
main ul { list-style-type: square; }

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

.action { font-size: 1.75em; font-weight: bold; text-align: center; }
.round { border-radius: 6px; }

aside {
  text-align: center;
  font-size: 1.5em;
  font-weight: bold;
  text-shadow: 4px 4px 10px #c5a687;
}

/* Tables (works on all sizes; adjust if you only want tablet+) */
table { border: 1px solid #2a1f14; border-collapse: collapse; margin: 0 auto; }
caption { font-size: 1.5em; font-weight: bold; padding: 1%; }
th, td { border: 1px solid #2a1f14; padding: 1%; }
th { background-color: #2a1f14; color: #fff; font-size: 1.15em; }
tr:nth-child(odd) { background-color: #deccba; }

figure {
  border: 4px solid #2a1f14;
  box-shadow: 6px 6px 10px #c5a687;
  max-width: 400px;
  margin: 2% auto;
}

figcaption { padding: 2%; border-top: 4px solid #2a1f14; }

#info ul { margin-left: 10%; }
#contact { text-align: center; }

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

.tel-link a {
  color: #f6eee4;
  text-decoration: none;
  font-weight: bold;
}

/* Forms (mobile) */
#contact, #form h2 { text-align: center; }

fieldset, input, textarea { margin-bottom: 2%; }

fieldset legend { font-weight: bold; font-size: 1.25em; }

label { display: block; padding-top: 2%; }

form #submit {
  margin: 0 auto;
  display: block;
  padding: 2%;
  background-color: #78593a;
  color: #f6eee4;
  font-size: 1.25em;
  border-radius: 10px;
}

/* Footer */
footer {
  text-align: center;
  font-size: 0.85em;
  background-color: #2a1f14;
  color: #f6eee4;
  padding: 1% 0;
}

footer a { color: #f3e6d8; text-decoration: none; }

/* TABLET and up (>= 620px) */
@media screen and (min-width: 620px) {

  /* Switch header: hide mobile header, show image header */
  .mobile { display: none; }
  .tab-desk { display: block; }

  /* Nav: horizontal */
  nav li {
    display: inline-block;
    border-top: none;
    font-size: 1.25em;
  }

  nav li a { padding: 0.5em; }

  /* Layout grid */
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  aside { grid-column: 1 / span 2; }

  /* Form width */
  form { width: 70%; margin: 0 auto; }
}

/* DESKTOP and up (>= 1000px) */
@media screen and (min-width: 1000px) {

  nav li { font-size: 1.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: #f6eee4;
    opacity: 0.5;
  }

  .grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
  }

  aside {
    grid-column: 1 / span 3;
    font-size: 2em;
  }

  form { width: auto; }

  .form-grid {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 20px;
  }

  .btn { grid-column: 1 / span 2; }

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

/* LARGE desktop (>= 1921px) */
@media screen and (min-width: 1921px) {
  body { background: linear-gradient(#f6eee4, #78593a); }

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

  main { background-color: #f6eee4; }

  .grid { grid-template-columns: repeat(4, 1fr); }

  aside { grid-column: 1 / span 4; font-size: 3em; }
}

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