:root{
  --dark:#3e503d;
  --accent:#a3c587;
  --light:#f5f0e1;
  --bg:#ece6dc;
  --text:#2b2b2b;

  --racingtips-green:#98fb98;
  --racingtips-blue:#0080bd;
  --lululemon-red:#c80f2e;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased}
.logo h1{margin:0;font-size:1.25rem;letter-spacing:0.5px}
nav{display:flex;gap:12px;align-items:center}
nav a{color:var(--light); text-decoration:none; font-weight:600; font-size:0.95rem; padding:6px 10px; border-radius:6px}
nav a:hover{background:rgba(255,255,255,0.04); color: var(--accent); border: 1px solid var(--accent); padding: 5px 9px; }
.login{background:var(--accent); color:#123012; font-size: .95rem; font-weight: 600; padding: 6px 10px; border-radius: 6px;}
.container{max-width:1150px;margin:0 auto;padding:36px 20px}
.hero{height:64vh; border-radius:10px; overflow:hidden; position:relative; display:flex; align-items:center; justify-content:center; margin:16px 20px}
.hero .img{position:absolute; inset:0; background-size:cover; background-position:center;}
.hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15))}
.hero .inner{position:relative; z-index:2; color:#fff; text-align:center; padding:20px}
.hero h2{margin:0;font-size:2.25rem; text-shadow:0 3px 12px rgba(0,0,0,0.45)}
.hero p{margin:10px 0 0; font-size:1.05rem; max-width:760px}
.hero .cta{margin-top:18px; display:inline-flex; gap:10px; flex-wrap:wrap; justify-content:center}
.btn{background:var(--accent); border:none; padding:10px 18px; border-radius:8px; font-weight:700; cursor:pointer; text-decoration:none; color:#123012; display:inline-block}
.btn.secondary{background:transparent; border:2px solid rgba(255,255,255,0.18); color:#fff}
section{padding:36px 20px}
.section-title{font-size:1.6rem; color:var(--dark); text-align:center; margin-bottom:18px}
.grid{display:grid; gap:20px}
.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){ .three{grid-template-columns:repeat(1,1fr)} .hero{height:48vh} .hero h2{font-size:1.6rem} }
.card{background:var(--light); border-radius:10px; padding:18px; box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.card h3{margin:0 0 8px; color:var(--dark)}
footer{background:var(--dark); color:var(--light); padding:28px 20px; text-align:center; margin-top:30px}
footer a{color:var(--accent); text-decoration:none; margin:0 8px}
.table{width:100%;border-collapse:collapse;background:var(--light);border-radius:8px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
.table th, .table td{padding:12px 14px;border-bottom:1px solid rgba(0,0,0,0.04);text-align:left}
.table th{background:rgba(0,0,0,0.02);color:var(--dark)}
.form-row{display:flex;gap:12px}
.form-row input, textarea{flex:1;padding:10px;border-radius:6px;border:1px solid #ddd}
.map{height:300px;background-size:cover;background-position:center;border-radius:8px}
small.muted{color:#666}

.button, button {
  border: 1px solid grey;
  padding: 5px 10px;
  margin: 0 10px;
  background: #364633;
  color: var(--light);
  border-radius: 10px;
}
.button:hover, button:hover {
  background: var(--light);
  color: #364633;
  border-radius: 10px;
}

header {
  position:sticky; 
  top:0; 
  z-index:120; 
}
header .top-bar {
  width: 100%;
  background:linear-gradient(180deg,var(--dark), #364633); 
  color:var(--light); 
  padding:14px 25px; 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  box-shadow:0 3px 8px rgba(0,0,0,0.15);
}
header .greeting-bar {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

header .greeting-bar > div {
  padding:10px 20px; 
  background:linear-gradient(180deg,var(--dark), #364633); 
  color:var(--light); 
  width: max-content;
}
main.container h1 { font-size: 2em; font-weight: bold; padding: 1em 0;}

main.container h2 {
  font-size: 24px;
  font-weight: bold;
}

main.container p {
  margin-top: 15pt;
  margin-bottom: 15pt;
}

section.top-boxes article.card {
  height: 168px;
}

div.container div.title {
  margin-bottom: 20px;
  font-weight: bold;
}
div.container fieldset {
  border: 1px solid var(--dark);
  padding: 20px;
  width: max-content;
  background-color: white;
}

div.container fieldset form label {
  margin-left: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
  font-size: 1.125rem;
  line-height: 1.418rem;
  width: 100px;
  display: inline-block;
  text-align: right;

}

div.container fieldset form.expand label {
  display: none;
}
div.container fieldset form input {
  background-color: var(--light);
}

div.container fieldset form.expand input[type="password"],
div.container fieldset form.expand input[type="date"],
div.container fieldset form.expand input[type="email"],
div.container fieldset form.expand input[type="text"],
div.container fieldset form.expand textarea,
div.container fieldset form.expand button {
  width: 100%;
}
div.container fieldset form.expand button {
  margin-left: 0;
}

div.container fieldset form > div {
  margin-bottom: 10px;
}

div.container fieldset form button[type="submit"] {
  border: 1px solid var(--dark);
  padding: 5px 10px;
}
div.container fieldset a.forgot-password {
}

div.container {
  display: flex;
  justify-content: center;
}
div.container fieldset {
  border-radius: 5px;
  border: 1px solid var(--dark);
  padding: 20px;
  max-width: 350px;
}
  fieldset form label {
  }
  fieldset form input {
    background-color: var(--light);
  }
  fieldset form > div {
    margin-bottom: 10px;
  }

  fieldset form button[type="submit"] {
    border: 1px solid var(--dark);
    padding: 5px 10px;
  }

div.container div.title {
  font-size: 1.5rem;
  text-align: center;
}
/*
div.container div.title:after {
  content: "";
  display: block;
  height: .25rem;
  width: 1.5rem;
  background-color: #c8102e;
}
*/

div.container fieldset input[type="text"], 
.container fieldset input[type="password"], 
.container fieldset input[type="date"], 
.container fieldset input[type="email"] {
  background-color: white !important;
  border: 2px solid var(--bg);
  line-height:1.375rem;
  height: 3.25rem;
  padding: .875rem 1rem;
  border-radius: 5px;
  font-size: 1.125rem;
}
/* change the input box unfocused background colours */
div.container fieldset input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px white inset;
  box-shadow: 0 0 0 1000px white inset;
}

  .container fieldset input[type="text"]:focus, .container fieldset input[type="password"]:focus {
    box-shadow: 0 0 0 1000px white inset;
  }

/* --- Hamburger icon --- */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 15px;
}

.bar {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 3px 0;
  transition: 0.4s;
}
/* ----------------------- */


nav.mobile {
  display: none;
}

@media screen and (max-width: 950px) {
  nav.desktop {
    display: none;
  }
  nav.mobile {
    display: block;
  }
 .menu {
    display: none;
    flex-direction: column;
    background-color: #333;
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
  }

  .menu.show {
    display: flex;
  }

  .hamburger {
    display: flex;
  }
}