/* *****************************************************
   YooHosting brand accents for twenty-one
   Orange only — no layout overhaul
***************************************************** */

:root {
  --yh-orange: #fd5d07;
  --yh-orange-deep: #d14a06;
}

/* Header logo (source art is tall; keep header compact) */
.logo-img,
img.logo-img {
  max-height: 52px;
  width: auto;
  height: auto;
}

/* Links */
a {
  color: var(--yh-orange);
}
a:hover,
a:focus {
  color: var(--yh-orange-deep);
}

/* Primary buttons */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--yh-orange);
  border-color: var(--yh-orange);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--yh-orange-deep);
  border-color: var(--yh-orange-deep);
}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(253, 93, 7, 0.35);
}

/* Outline primary */
.btn-outline-primary {
  color: var(--yh-orange);
  border-color: var(--yh-orange);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--yh-orange);
  border-color: var(--yh-orange);
  color: #fff;
}

/* Nav active / pills */
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.nav-tabs .nav-link.active {
  color: var(--yh-orange);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--yh-orange);
  color: #fff;
}

/* Pagination active */
.page-item.active .page-link {
  background-color: var(--yh-orange);
  border-color: var(--yh-orange);
}
.page-link {
  color: var(--yh-orange);
}
.page-link:hover {
  color: var(--yh-orange-deep);
}

/* Login / form primary accents */
.logincontainer .btn-primary,
#login .btn-primary,
.providerLink {
  background-color: var(--yh-orange);
  border-color: var(--yh-orange);
}