/**
 * Anonymous user pages (login / register / password reset) — PUBLIC SITE ONLY.
 *
 * Verbatim port of the D7 PUBLIC fork's css/user-anon.css. This file exists in
 * connexxus-public/sites/all/themes/connexxus/ and has NO counterpart in the
 * main site's fork — the main site never had a themed anonymous login page
 * (it serves a campus-links 403 page to anonymous visitors instead).
 *
 * D7 attached it with drupal_add_css() from connexxus_preprocess_page() for
 * every anonymous non-front request; the D11 equivalent is the
 * connexxus_public/user-anon library, attached from
 * connexxus_public_preprocess_page().
 *
 * ⚠️ Contains UNSCOPED element selectors (h2, p, a, label, img, footer,
 * .container) exactly as the D7 original did. It is safe only because it is
 * attached on the anonymous user pages alone, where the dedicated
 * page--user--login/register template replaces the whole site chrome.
 *
 * Only change from the D7 original: url() paths. The two images it needs
 * (images/bg-map.jpg, images/icons/icon_select_mono.png) — bg-map.jpg already
 * ships in the shared base theme, icon_select_mono.png did not and is shipped
 * in this sub-theme's own images/icons/.
 */

body.section-user {
  background: url('../../connexxus/images/bg-map.jpg') top center no-repeat #5499b8;
  font-size: 16px;
}
@media (min-width: 2201px) {
  body.section-user {
    background-size: cover;
  }
}
@media (max-width: 991px) {
  body.section-user {
    background-size: cover;
  }
}

.container {
  max-width: 970px;
}

@media (min-width: 768px) {
  .flex-md {
    display: flex;
  }

  .flex-md > div {
    float: none;
    display: flex; /* flex needed for its child to have full length*/
    min-width: 50%;
  }

  .flex-md > div > div {
    flex-grow: 1;
  }
}

h2 {
  font-size: 1em;
  margin: 0;
}

p {
  color:#005786;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 0.875em;
}

a {
  color: #1ba0db;
  text-decoration: none;
  font-size: 0.875em;
}

p a {
  font-size: 1em;
}

label {
  font-weight: 500;
  text-transform: uppercase;
}

img {
  display: block;
  margin: 0;
}

img.center {
  margin-left: auto;
  margin-right: auto;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

a.btn, input[type=submit], button {
  font-weight: bold;
  text-transform: none;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

input[type=text], input[type=email], input[type=password], select, textarea {
  border-color: #b1d5e4;
  background-color: #ffffff;
  width: 100%;
}

select.form-select {
  background-image: url('../images/icons/icon_select_mono.png');
  padding-right: 50px;
}

.form-item,
.form-actions {
  margin: 1em 0;
}

.form-item input.error,
.form-item textarea.error,
.form-item select.error {
  border: 2px solid #fbb211;
  background-color: #ffffff;
  color: #4b5250;
}

.form-required {
  color: #fe8730;
}

.messages-inline .messages--error {
  margin: 1em 0;
}
@media (max-width: 767px) {
  .messages-inline .form-item {
    margin-bottom: 0;
  }

  .messages-inline .messages--error {
    margin-top: 0.4em;
  }

  .messages-inline label.empty {
    display: none;
  }
}

#page {
  padding-top: 32px;
}

#page-title {
  color: #1ba0db;
  text-shadow: 0px -1px 1px rgba(255, 255, 255, 1);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.875em;
  line-height: 1;
}

.header__logo {
  float: none;
}

.site-slogan {
  color: #FFB511;
  font-weight: bold;
  font-style: italic;
}

.section-user #content {
  max-width: 750px;
  margin: 0 auto;
  padding-bottom: 0;
  padding-left: 15px;
  padding-right: 15px;
  min-height: 65vh;
}

.has-bg {
  background: rgba(255, 255, 255, 0.7);
  padding: 30px;
  -webkit-box-shadow: 0px 2px 5px 3px rgba(0,0,0,0.22);
  -moz-box-shadow: 0px 2px 5px 3px rgba(0,0,0,0.22);
  box-shadow: 0px 2px 5px 3px rgba(0,0,0,0.22);
  min-height: 300px;
}
@media (max-width: 767px) {
  .has-bg {
    margin-bottom: 2em;
  }
}

footer {
  margin-top: 30px;
  margin-bottom: 3em;
}

#copyright {
  background: none;
  font-size: 0.75em;
}

a.register {
  text-decoration: underline;
  text-transform: uppercase;
  font-weight: bold;
}
/* ---------------------------------------------------------------------------
 * D11 MARKUP ADAPTATIONS (not present in the D7 original)
 *
 * These two rules exist only because Drupal 11 emits different markup than
 * Drupal 7 for the same visual result. They are corrections to the port, not
 * new design.
 * ------------------------------------------------------------------------- */

/* D7 put class="form-required" on the standalone `*` marker only, so the rule
 *   .form-required { color: #fe8730; }
 * (above, verbatim from D7) coloured just the asterisk and left the label grey.
 * D11 core puts `form-required` on the <label> ITSELF and renders the asterisk
 * from a ::after pseudo-element, so the whole label turned orange. Restore the
 * D7 split: grey label, orange asterisk. */
label.form-required {
  color: inherit;
}

label.form-required::after {
  color: #fe8730;
}