/* ==========================================================================
   Bryt Energy portal - shared styles for the login and forgot-password pages
   ERV-29310. Extracted from the two pages' inline <style> blocks so they stay
   in step; layered on top of Bootstrap 5.3.

   Brand palette (Brand Book 2024):
     Bryt Orange      #FF5800   (hover #C74500)
     Bryt Charcoal    #545859
     Bryt Light Grey  #9D9D9D
   ========================================================================== */

/* Headings are Anton in capitals. Self-hosted (SIL Open Font Licence - see
   fonts/anton/OFL.txt) rather than pulled from the Google CDN, so the login
   page has no external dependency. Same convention as fonts/poppins. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../../fonts/anton/Anton-Regular.woff2') format('woff2'),
       url('../../../fonts/anton/Anton-Regular.ttf') format('truetype');
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #fff;
}

/* The 32px gutter matches the Bryt portal and keeps the header logo aligned
   with the page heading below it. It is also what gives the logo its brand
   exclusion zone - see header.bryt-header. */
.bryt-container {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* the master's body is h-100 flex-column - stop it shrink-clipping our sections */
header.bryt-header, .bryt-rip, main.main, footer.bryt-footer {
  flex-shrink: 0;
}

.bryt-heading {
  font-family: Anton, system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}

/* Brand exclusion zone: the logo needs clear space of half the height of its
   "B" on every side. In bryt-logo-*-horizontal.svg the B is 80.2% of the image
   height (viewBox 39.89 -381.68 763.54 170.75; the B spans -381.68 to -244.75,
   so 136.93 of 170.75), which at a 35px logo is a 28px B and a 14px exclusion
   zone. 96px of bar around a 35px logo leaves 30.5px above and below, and the
   container gives 32px to the left - all clear. */
header.bryt-header {
  background-color: #545859;
  padding: 1rem 0;
}

/* The flexing goes on the container, not the header: as a flex item the
   container would shrink to fit its contents and its auto margins would
   centre the logo instead of keeping it at the left edge. 64px + the
   header's 2 x 16px padding is the 96px bar, which leaves 30.5px of clear
   space above and below a 35px logo. */
header.bryt-header > .bryt-container {
  min-height: 64px;
  display: flex;
  align-items: center;
}

/* torn-edge (rip) textures - Bryt brand */
.bryt-rip {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -1px;
}

h1.bryt-heading {
  font-size: 3rem;
  line-height: 1.5;
  margin: 2.5rem 0 1.5rem 0;
}

h1 .bryt-orange {
  color: #FF5800;
}

h1 .bryt-charcoal {
  color: #545859;
}

.bryt-page-icon {
  width: 170px;
  height: auto;
  margin-top: 1.5rem;
}

.bryt-form-col {
  width: 375px;
  max-width: 100%;
  margin: 0 auto;
}

.bryt-body-text {
  font-size: .875rem;
  color: #545859;
}

.form-label {
  font-weight: 600 !important;
  color: #545859;
  font-size: .875rem;
  margin-bottom: .25rem;
}

.input-group > .form-control {
  border-radius: 0;
  border: 1px solid #545859;
}

.input-group > .form-control:focus {
  border-color: #FF5800;
  box-shadow: 0 0 0 .25rem rgba(255, 88, 0, .25);
}

.form-control::placeholder {
  color: #9D9D9D;
  opacity: 1;              /* Firefox dims placeholders by default */
}

/* Fields stay white once filled. jQuery Validate (the SmartAdmin build at
   SmartAdmin/js/plugin/jquery-validate) hard-codes an unhighlight that puts
   state-success on the input's parent; we simply do not colour it. The
   autofill rules stop Chrome repainting the field its own pale blue. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #545859 !important;
  -webkit-box-shadow: 0 0 0 30px #fff inset !important;
  caret-color: #545859;
}

.btn-eye {
  border: 1px solid #545859;
  border-left: 0;
  border-radius: 0;
  background: #fff;
  color: #545859;
}

.btn-eye:hover {
  background: #f3f2f1;
  color: #545859;
}

/* Field-level validation message, styled to read like the browser's own
   "Please fill in this field" bubble but rendered by us, so it looks the same
   in every browser. jQuery Validate places this <em> after the .input-group. */
.state-error + em {
  position: relative;
  display: inline-block;
  margin-top: 10px;
  padding: .5rem .75rem .5rem 2.125rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='3' fill='%23FF5800'/%3E%3Cpath d='M8 3.2a1 1 0 0 1 1 1v4.4a1 1 0 0 1-2 0V4.2a1 1 0 0 1 1-1zm0 7.4a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3z' fill='%23fff'/%3E%3C/svg%3E") no-repeat .625rem center;
  background-size: 1rem 1rem;
  border: 1px solid #d9d9d9;
  border-radius: .25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
  font-style: normal;
  font-size: .8125rem;
  line-height: 1.35;
  color: #545859;
}

/* the pointer: a border-coloured triangle with a white one laid over it */
.state-error + em::before,
.state-error + em::after {
  content: "";
  position: absolute;
  left: 14px;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}

.state-error + em::before {
  top: -8px;
  border-bottom: 8px solid #d9d9d9;
}

.state-error + em::after {
  top: -7px;
  border-bottom: 8px solid #fff;
}

.btn-bryt {
  display: block;
  width: 100%;
  font-weight: 700;
  text-transform: uppercase;
  color: #FFFFFF;
  background-color: #FF5800;
  border-radius: .1875rem;
}

.btn-bryt:hover {
  color: #FFFFFF;
  background-color: #C74500;
}

.btn-bryt-grey {
  display: block;
  width: 100%;
  font-weight: 500;
  color: #000;
  background-color: #f3f2f1;
  box-shadow: 0 2px 0 #929191;
  border-radius: .1875rem;
}

.btn-bryt-grey:hover {
  color: #000;
  background-color: #b1b4b6;
}

/* hyperlinks in Bryt Orange and bold per the brand book */
.bryt-link, .bryt-smallprint a {
  color: #FF5800;
  font-weight: 700;
  text-decoration: none;
}

.bryt-link:hover, .bryt-smallprint a:hover {
  color: #C74500;
  text-decoration: underline;
}

.bryt-smallprint {
  font-size: .75rem;
  color: #545859;
  text-align: center;
}

.alert, .diagnostic {
  width: 375px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Status banner. The shared javascripts/smartadminclient/login.js swaps
   alert-info / alert-success / alert-danger on this element, so only the
   error state is restyled; the heading sits on its own line above the
   message, and the cross appears on errors only. */
/* The markup carries a Font Awesome <i> for the status icon, but these pages
   never load Font Awesome, so it has always rendered as nothing. Now that the
   heading is a block it would otherwise leave an empty line above it. */
.alert > i {
  display: none;
}

.alert strong {
  display: block;
  font-size: 1.125rem;
  margin-bottom: .25rem;
}

.alert > span {
  display: block;
}

.alert-danger {
  background-color: #FF5800;
  border-color: #FF5800;
  color: #fff;
  position: relative;
  padding-right: 2.75rem;
}

.alert-danger a {
  color: #fff;
}

.alert .btn-close {
  display: none;
  position: absolute;
  top: .75rem;
  right: .75rem;
}

.alert-danger .btn-close {
  display: block;
}

/* footer follows the brytenergy.co.uk site footer */
/* mt-auto on the footer pushes it to the bottom of the viewport when the
   page content is shorter than the window (the master's body is a flex column) */
footer.bryt-footer {
  background-color: #545859;
  color: #f8f8f8;
  padding-bottom: 40px;
}

footer.bryt-footer .bryt-heading {
  color: #fff;
  font-size: 1.375rem;
  margin-bottom: 1rem;
}

footer.bryt-footer ul {
  list-style: none;
  padding-left: 0;
}

footer.bryt-footer li {
  margin-bottom: .5rem;
}

footer.bryt-footer a {
  color: #f8f8f8;
  text-decoration: none;
  transition: color .15s ease-in-out;
}

/* orange hover with no underline, matching brytenergy.co.uk and the portal.
   The social icons are inline SVGs filled with currentColor, so they follow. */
footer.bryt-footer a:hover {
  color: #FF5800;
  text-decoration: none;
}

.bryt-footer-strong {
  font-weight: 700;
}

.bryt-footer-logo {
  height: 1.375rem; /* match the MENU/CONTACT heading size */
  width: auto;
  margin: 2rem 0 2rem 0;
}

.bryt-footer-small {
  font-size: .75rem;
}

.bryt-footer-small li {
  display: inline-block;
  margin-right: 1.25rem;
  margin-bottom: .75rem;
}

.bryt-social a {
  display: inline-block;
  margin-right: .75rem;
}

.bryt-logo:hover {
  opacity: 0.5;
}

@media (max-width: 40.0625em) {
  .bryt-container {
    padding-left: 20px;
    padding-right: 20px;
  }

  h1.bryt-heading {
    font-size: 2rem;
  }

  .bryt-page-icon {
    width: 110px;
  }

  .bryt-form-col, .alert, .diagnostic {
    width: 100%;
  }
}