/* Interface fixes: readable sidebar labels, opportunity pictures, persistent notification badge */

@media (min-width:901px){
  :root{--sidebar:280px}
}

.side-nav a,
.side-nav-toggle{
  height:auto;
  min-height:48px;
  padding-top:10px;
  padding-bottom:10px;
}

.side-nav-label{
  min-width:0;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.25;
}

.app-notification-button{
  position:relative;
  overflow:visible;
}

.app-notification-button::after{
  content:"";
  position:absolute;
  top:5px;
  right:5px;
  width:11px;
  height:11px;
  border-radius:50%;
  background:#ff304f;
  border:2px solid #080808;
  box-shadow:0 0 0 2px rgba(255,48,79,.12),0 0 12px rgba(255,48,79,.45);
  pointer-events:none;
}

.opportunity-card{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.opportunity-card-media{
  position:relative;
  width:calc(100%+48px);
  margin:-24px -24px 20px;
  aspect-ratio:16/9;
  overflow:hidden;
}

.opportunity-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-width:620px;
  margin:28px auto 10px;
  padding:28px;
  border-radius:24px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}

.contact-form label{
  margin-top:8px;
  font-size:.85rem;
  font-weight:700;
  color:#f4f4f4;
}

.contact-form input,
.contact-form textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:#111;
  color:#fff;
  padding:14px 16px;
  font:inherit;
  outline:none;
  transition:.2s ease;
}

.contact-form textarea{
  resize:vertical;
  min-height:140px;
}

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#ff9d00;
  box-shadow:0 0 0 4px rgba(255,157,0,.15);
}

.contact-form .btn{
  margin-top:14px;
  align-self:flex-start;
  min-width:160px;
}

@media(max-width:900px){
  .side-nav-label{
    overflow:visible;
    text-overflow:clip;
    white-space:normal;
  }

  .contact-form{
    padding:20px;
  }
}