/* Easy CPAP Help Scout Docs Custom Stylesheet
   Upload this file under: Docs > Manage > Custom Code > Upload stylesheet
   Or host it elsewhere and paste the stylesheet URL into Custom stylesheet URL.
*/

:root{
  --ecp-blue:#0d4f87;
  --ecp-blue-dark:#0a3f6c;
  --ecp-green:#a6ce39;
  --ecp-teal:#2e92cc;
  --ecp-bg:#f5fbff;
  --ecp-soft:#eef8ff;
  --ecp-border:#d9e7f2;
  --ecp-text:#172033;
  --ecp-muted:#64748b;
}

body{
  font-family:Arial,Helvetica,sans-serif!important;
  background:#fff!important;
  color:var(--ecp-text)!important;
}

.header,
.site-header,
.docs-header{
  background:#fff!important;
  border-bottom:1px solid #e5e7eb!important;
}

.logo img,
.header .logo img,
.site-header img{
  max-height:95px!important;
  width:auto!important;
}

.nav a,
.header a{
  color:var(--ecp-blue)!important;
}

.hero,
.home .hero,
.homepage-hero,
.jumbotron{
  background:linear-gradient(180deg,#f5fbff 0%,#ffffff 100%)!important;
  padding:52px 20px!important;
  border-bottom:1px solid #edf2f7!important;
}

.hero h1,
.home .hero h1,
.home h1{
  font-size:0!important;
  margin:0 0 18px!important;
  line-height:1.15!important;
}

.hero h1:after,
.home .hero h1:after,
.home h1:after{
  content:"Easy CPAP Resource Centre";
  display:block!important;
  font-size:52px!important;
  font-weight:800!important;
  color:var(--ecp-blue)!important;
  text-align:center!important;
}

.hero p,
.home .hero p{
  max-width:760px!important;
  margin:0 auto!important;
  font-size:18px!important;
  color:var(--ecp-muted)!important;
  text-align:center!important;
}

.search-form,
.search,
.search-wrap,
.searchWrapper,
form[role="search"]{
  max-width:860px!important;
  margin:30px auto!important;
}

.search-form input,
.search input,
.search-wrap input,
input[type="search"]{
  height:64px!important;
  min-height:64px!important;
  font-size:19px!important;
  border:2px solid var(--ecp-border)!important;
  border-radius:14px 0 0 14px!important;
  box-shadow:0 8px 22px rgba(13,79,135,.08)!important;
}

.search-form button,
.search button,
button[type="submit"]{
  height:64px!important;
  min-height:64px!important;
  font-size:18px!important;
  font-weight:700!important;
  background:var(--ecp-blue)!important;
  border-color:var(--ecp-blue)!important;
  border-radius:0 14px 14px 0!important;
  color:#fff!important;
}

.search-form button:hover,
.search button:hover,
button[type="submit"]:hover{
  background:var(--ecp-blue-dark)!important;
  border-color:var(--ecp-blue-dark)!important;
}

/* Category and article sections */
.main,
.content,
.container{
  max-width:1180px!important;
}

.popular-articles,
.article-list{
  max-width:980px!important;
  margin:55px auto 25px!important;
}

.popular-articles h2,
.article-list h2,
.collection-list h2,
.category-list h2{
  color:var(--ecp-blue)!important;
  font-size:34px!important;
  font-weight:700!important;
  text-align:center!important;
}

.popular-articles a,
.article-list a{
  color:#004ea8!important;
  font-weight:500!important;
  text-decoration:none!important;
}

.popular-articles a:hover,
.article-list a:hover{
  text-decoration:underline!important;
}

.category-list,
.collection-category-list,
.collections,
.collection-list{
  max-width:1180px!important;
  margin:50px auto!important;
}

.category-list .category,
.collection-category-list .category,
.collections .collection,
.collection-list .collection{
  border:1px solid #e5edf5!important;
  border-radius:16px!important;
  box-shadow:0 4px 12px rgba(0,0,0,.04)!important;
  transition:transform .2s ease, box-shadow .2s ease!important;
}

.category-list .category:hover,
.collection-category-list .category:hover,
.collections .collection:hover,
.collection-list .collection:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 10px 25px rgba(0,0,0,.08)!important;
}

/* Article pages */
.article,
.article-content,
.docs-article{
  font-size:17px!important;
  line-height:1.65!important;
}

.article h1,
.article-content h1,
.docs-article h1{
  color:var(--ecp-blue)!important;
  font-weight:800!important;
}

.article h2,
.article-content h2,
.docs-article h2{
  color:var(--ecp-blue)!important;
  margin-top:36px!important;
}

.article a,
.article-content a,
.docs-article a{
  color:#004ea8!important;
}

.article blockquote,
.article-content blockquote{
  background:var(--ecp-soft)!important;
  border-left:5px solid var(--ecp-blue)!important;
  padding:18px 22px!important;
  border-radius:10px!important;
}

footer,
.footer{
  margin-top:70px!important;
  background:#f8fafc!important;
  border-top:1px solid #e5e7eb!important;
}

@media(max-width:900px){
  .hero h1:after,
  .home .hero h1:after,
  .home h1:after{
    font-size:36px!important;
  }

  .search-form input,
  .search input,
  input[type="search"]{
    border-radius:12px!important;
  }

  .search-form button,
  .search button,
  button[type="submit"]{
    border-radius:12px!important;
    margin-top:10px!important;
    width:100%!important;
  }
}