/* RASH theme for SimpleSAMLphp 2.5, loaded after the stock stylesheet (see themes/rash/default/_head.twig).
   Colours are taken from the RASH logo. */
:root {
  --rash-red: #d3172e;
  --rash-orange: #f99d1b;
  --rash-grey: #58585a;
  --rash-text: #2b2b2d;
  --rash-muted: #6b6b70;
  --rash-bg: #f3f4f6;
  --rash-border: #dcdde1;
  --rash-gradient: linear-gradient(90deg, var(--rash-orange) 0%, #e5662b 45%, var(--rash-red) 100%);
}

body {
  background: var(--rash-bg);
  color: var(--rash-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--rash-red); }

/* Header: white bar with the logo and a brand-gradient rule underneath. */
#header.rash-header {
  height: auto;
  background: #fff;
  border-bottom: 4px solid transparent;
  border-image: var(--rash-gradient) 1;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .06);
}
.rash-header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
}
.rash-brand img { display: block; height: 56px; width: auto; }
.rash-product {
  color: var(--rash-grey);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Generic pages (errors, logout, admin) get the same calm typography. */
#content h1 { font-size: 1.6em; font-weight: 700; color: var(--rash-text); }
#content h2 { border-bottom-color: var(--rash-border); }

/* Login card */
.rash-card {
  max-width: 28rem;
  margin: 1rem auto 2rem;
  padding: 2rem 2rem 1.5rem;
  background: #fff;
  border: 1px solid var(--rash-border);
  border-top: 4px solid transparent;
  border-image: var(--rash-gradient) 1;
  border-image-slice: 1 0 0 0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(30, 30, 40, .08);
}
.rash-card h1 { margin: 0 0 .25rem; font-size: 1.45em; line-height: 1.25; }
.rash-sp { margin: 0 0 1.25rem; color: var(--rash-muted); }
.rash-sp strong { color: var(--rash-text); }

.rash-form label { margin-top: 1rem; font-weight: 600; font-size: .92rem; color: var(--rash-grey); }
.rash-form input[type="text"],
.rash-form input[type="password"],
.rash-form select {
  height: 2.75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--rash-border);
  border-radius: 6px;
  box-shadow: none;
  font-size: 1rem;
  background-color: #fff;
}
.rash-form input:focus,
.rash-form select:focus {
  border-color: #e5662b;
  outline: 3px solid rgba(249, 157, 27, .25);
  outline-offset: 0;
}
.rash-form .rash-check { font-weight: 400; margin-top: .4rem; }

.pure-button.rash-button,
.pure-button.rash-button:visited {
  margin-top: 1.5rem;
  padding: .75rem 1.25rem;
  border-radius: 6px;
  background: var(--rash-gradient);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}
.pure-button.rash-button:hover,
.pure-button.rash-button:focus {
  background: var(--rash-red);
  color: #fff;
  padding: .75rem 1.25rem;
}
.rash-form .pure-button.rash-button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.rash-error .pure-button.rash-button { margin-top: .25rem; }

.message-box { border-radius: 6px; }
.message-box.error.rash-error { margin: 0 0 .5rem; }
.message-box.error.rash-error h3 { margin-bottom: .25rem; font-weight: 700; color: #8a1020; }
.message-box.error.rash-error p { margin: .25rem 0; }

.rash-help { margin: 1.5rem 0 0; font-size: .9rem; color: var(--rash-muted); text-align: center; }
.rash-help a { overflow-wrap: anywhere; }
.rash-help [hidden] { display: none; }
.rash-links { margin: 1rem 0 0; padding: 0; list-style: none; text-align: center; }

/* Footer: keep the stock heights (they drive the sticky-footer layout), change the colours. */
#footer.rash-footer {
  background: #fff;
  border-top: 1px solid var(--rash-border);
  color: var(--rash-muted);
  font-size: .85rem;
}
#footer.rash-footer p { margin: 0; }
#footer.rash-footer a,
#footer.rash-footer a:visited { color: var(--rash-grey); }
#footer.rash-footer a:hover,
#footer.rash-footer a:focus { background: none; color: var(--rash-red); padding: 0; margin: 0; text-decoration: underline; }

@media (max-width: 40em) {
  .wrap { width: 92%; }
  .rash-brand img { height: 44px; }
  .rash-product { display: none; }
  .rash-card { padding: 1.5rem 1.25rem 1.25rem; border-radius: 0; }
}