@import url('/css/variables.css');
@import url('/css/overlay-hamburger.css');
@import url('/css/tag-dropdown.css');

*, *::before, *::after{ box-sizing:border-box; }

body{
  margin:0;
  font-family:var(--primary-font-family, "Poppins", sans-serif);
  color:var(--secoundary-text-color);
  background:var(--electric-blue);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

main{
  flex:1 0 auto;
  display:flex;
  justify-content:center;
  padding:3rem 1rem 4rem;
  background-color: var(--secoundary-blue-color);
}

.site-header{
  background:var(--secoundary-blue-color);
  padding:0.75rem 1rem;
  display:flex;
  align-items:center;
  gap:1rem;
}

.site-header img{ height:38px; }

.site-title{
  margin:0;
  font-size:1.25rem;
  font-weight:600;
  color:var(--secoundary-text-color);
}

.md-toolbar button.active {
  background: var(--primary-blue-color);
  color: var(--secoundary-text-color);
}
  
.post-form{
  background:var(--secoundary-blue-color);
  border-color: var(--primary-blue-color);
  box-shadow: 0 0 10px 2px var(--BabyBlue);
  width:100%;
  max-width:720px;
  padding:2rem 2.5rem;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}

.field{ display:flex; flex-direction:column; gap:0.5rem; }

.field-label{
  font-size:0.9rem;
  font-weight:500;
  color:var(--primary-blue-color);
}

.md-toolbar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
  
.md-toolbar button {
  background: var(--secoundary-blue-color);
  color: var(--secoundary-text-color);
  border: 1px solid var(--secoundary-text-color);
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font: bold 0.85rem/1 var(--primary-font-family);
  cursor: pointer;
}
  
.md-toolbar button:hover {
  background: var(--primary-blue-color);
  color: var(--secoundary-text-color);
}

.input-text,
.input-textarea{
  width:100%;
  padding:0.6rem 0.8rem;
  border:1px solid var(--secoundary-blue-color);
  border-color: var(--secoundary-text-color);
  border-radius:4px;
  background:var(--secoundary-blue-color);
  color:var(--secoundary-text-color);
  font:inherit;
}

.input-text:focus,
.input-textarea:focus{
  outline:none;
  border-color:var(--primary-blue-color);
  box-shadow:0 0 0 2px rgba(30,122,255,.35);
}

.two-col{
  display:grid;
  gap:1rem;
}

.form-actions{
  margin-top:0.5rem;
  display:flex;
  gap:1rem;
  justify-content:flex-end;
}

.btn{
  font:600 0.9rem/1 var(--primary-font-family, Arial, sans-serif);
  padding:0.55rem 1.3rem;
  color:var(--secoundary-text-color);
  background:var(--primary-blue-color);
  border:none;
  border-radius:4px;
  cursor:pointer;
  transition:background .2s;
}

.btn:hover{ background:var(--primary-blue-color); }
.btn.primary{ background:var(--Green); }
.btn.primary:hover{ background:#39d37e; }


@media (min-width:480px){
  .banner-text,
  .banner-colour{
    flex-direction:row;
    align-items:center;
  }
  .banner-text span,
  .banner-colour span{
    width:110px;
  }
  .two-col{ grid-template-columns:1fr 1fr; }
}