/* styles.css - light polish on top of Materialize */

:root{
  --brand: #1976d2;
  --brand-dark: #125aa1;
}

body{
  background: #f5f7fb;
}

nav{
  background: linear-gradient(90deg, var(--brand), #26a69a);
}

main{
  padding-top: 24px;
  padding-bottom: 48px;
}

.card{
  border-radius: 14px;
}

.card .card-content{
  padding: 24px;
}

.btn, .btn-large, .btn-small{
  border-radius: 10px;
  text-transform: none;
  font-weight: 600;
}

.btn:focus{
  background-color: var(--brand-dark);
}

.input-field input:focus + label,
.input-field textarea:focus + label{
  color: var(--brand) !important;
}

.input-field input:focus,
.input-field textarea:focus{
  border-bottom: 1px solid var(--brand) !important;
  box-shadow: 0 1px 0 0 var(--brand) !important;
}

.collection{
  border-radius: 14px;
  overflow: hidden;
}

.collection .collection-item{
  padding: 14px 18px;
}

.page-title{
  font-weight: 800;
  letter-spacing: -0.02em;
}

.helper-text{
  color: rgba(0,0,0,.6);
}

.section-tight{
  margin-top: 10px;
  margin-bottom: 10px;
}

/* nicer containers on large screens */
.container{
  width: min(1100px, 92%);
}

/* subtle shadow for hero cards/headers */
.elevated{
  box-shadow: 0 10px 25px rgba(20, 30, 60, 0.12);
}