/* Siegel-Gittens sign-on styling.
 * Injected by the auth.siegel-gittens.com vhost; see style_authelia.py.
 * Palette matches the family portal: warm page, white card, forest green
 * actions, berry links, alongside the maroon of the sign-on seal.
 */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/sg-assets/playfair-display-latin.woff2') format('woff2');
}

:root {
  --sg-page: #f8f8f6;
  --sg-surface: #ffffff;
  --sg-ink: #242423;
  --sg-line: #dedfd9;
  --sg-forest: #245c45;
  --sg-forest-dark: #174634;
  --sg-berry: #8f3d55;
}

body, #root {
  background: var(--sg-page) !important;
  color: var(--sg-ink) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, sans-serif !important;
}

/* Give the centred container a surface so it reads as a card. */
#first-factor-stage .MuiContainer-root,
#second-factor-stage .MuiContainer-root {
  background: var(--sg-surface);
  border: 1px solid var(--sg-line);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(36, 36, 35, .10);
  padding: 34px 28px 26px !important;
  margin-top: 6vh;
}

/* Draw the seal from the vector. Authelia serves only logo.png from its
   asset_path, so the src cannot be changed; `content:` swaps what the element
   paints and leaves the src as the fallback for anything that ignores it. */
img#logo, img[alt="Logo"] {
  content: url("/sg-assets/siegel-sign-on.svg");
  width: 128px !important;
  height: 128px !important;
  max-width: 128px !important;
  margin-bottom: 8px;
}

.MuiTypography-h5 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -.01em;
  color: var(--sg-ink) !important;
}

/* Both fields are required, so the asterisks mark everything and say nothing. */
.MuiFormLabel-asterisk { display: none !important; }

.MuiOutlinedInput-root { border-radius: 8px !important; background: #fbfbfa; }
.MuiOutlinedInput-notchedOutline { border-color: var(--sg-line) !important; }
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--sg-forest) !important;
  border-width: 2px !important;
}
.MuiInputLabel-root.Mui-focused { color: var(--sg-forest) !important; }

.MuiButton-contained {
  background: var(--sg-forest) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}
.MuiButton-contained:hover { background: var(--sg-forest-dark) !important; }

a.MuiLink-root, .MuiLink-root { color: var(--sg-berry) !important; }
.MuiCheckbox-root.Mui-checked { color: var(--sg-forest) !important; }

/* Vendor footer. Attribute selector so it survives an Authelia upgrade. */
#root a[href*="authelia.com"] { display: none !important; }


/* Stacked help links in place of the app-store badges. */
.sg-code-help {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
}
.sg-help-link {
  color: #8b2c2c;
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
}
.sg-help-link:hover { text-decoration: underline; }

/* ---- Two-factor settings: a chooser, not two grey boxes ------------------
   Scoped to .sg-2fa-settings, which sg-portal.js adds only after it has found
   and tagged the cards. Authelia nests each piece in its own MuiGrid wrapper
   inside a flex row, so ordering is applied to those wrappers. */
body.sg-2fa-settings .sg-2fa-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (min-width: 880px) {
  body.sg-2fa-settings .sg-2fa-grid { grid-template-columns: 1fr 1fr; }
}
body.sg-2fa-settings .sg-2fa-item {
  max-width: none !important;
  flex-basis: auto !important;
  padding: 0 !important;
  width: 100% !important;
}

body.sg-2fa-settings .sg-2fa-card {
  height: 100%;
  border: 1px solid #e4e2dd !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(28, 24, 20, .05), 0 10px 26px rgba(28, 24, 20, .06) !important;
  padding: 30px 26px 26px !important;
  position: relative;
  transition: box-shadow .18s ease, border-color .18s ease;
}
body.sg-2fa-settings .sg-2fa-card:hover {
  border-color: #d8d4cc !important;
  box-shadow: 0 2px 4px rgba(28, 24, 20, .06), 0 16px 38px rgba(28, 24, 20, .10) !important;
}
body.sg-2fa-settings .sg-2fa-passkey {
  border-color: #dcc9c2 !important;
  background: linear-gradient(#fffdfc, #fdf7f5) !important;
}

/* The inner grid is already flex; make it a column and order the wrappers. */
body.sg-2fa-settings .sg-2fa-card > *:first-child {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  flex-wrap: nowrap !important;
}
body.sg-2fa-settings .sg-2fa-icon   { order: 1; }
body.sg-2fa-settings .sg-2fa-title  { order: 2; }
body.sg-2fa-settings .sg-2fa-desc   { order: 3; }
body.sg-2fa-settings .sg-2fa-action { order: 4; margin-top: auto !important; padding-top: 18px; }
body.sg-2fa-settings .sg-2fa-title,
body.sg-2fa-settings .sg-2fa-desc,
body.sg-2fa-settings .sg-2fa-action { width: 100% !important; max-width: none !important; }

/* Big illustration, distinct per method. */
body.sg-2fa-settings .sg-2fa-icon {
  width: 112px; height: 112px;
  display: grid; place-items: center;
  margin: 0 0 20px;
  border-radius: 24px;
  background: #f6efec;
  color: #8b2c2c;
}
body.sg-2fa-settings .sg-2fa-code .sg-2fa-icon { background: #edf2ef; color: #1a5c3a; }
body.sg-2fa-settings .sg-2fa-icon svg { width: 68px; height: 68px; display: block; }

body.sg-2fa-settings .sg-2fa-badge {
  position: absolute; top: 18px; right: 18px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #8b2c2c; background: #f7ebe7; border: 1px solid #e8d5cf;
  padding: 4px 10px; border-radius: 999px;
}

body.sg-2fa-settings .sg-2fa-card .MuiTypography-h5 {
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: 1.42rem !important;
  color: #1c1815 !important;
  margin: 0 0 8px !important;
}
body.sg-2fa-settings .sg-2fa-card .MuiTypography-subtitle2 {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: #5b5b66 !important;
  font-weight: 400 !important;
}

body.sg-2fa-settings .sg-2fa-card .MuiButton-root {
  padding: 10px 26px !important;
  border-radius: 9px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  font-size: 14.5px !important;
  border: 0 !important;
  color: #fff !important;
  background: #1a5c3a !important;
  box-shadow: none !important;
}
body.sg-2fa-settings .sg-2fa-passkey .MuiButton-root { background: #8b2c2c !important; }
body.sg-2fa-settings .sg-2fa-card .MuiButton-root:hover { filter: brightness(1.08); }

@media (max-width: 700px) {
  body.sg-2fa-settings .sg-2fa-icon { width: 92px; height: 92px; border-radius: 20px; }
  body.sg-2fa-settings .sg-2fa-icon svg { width: 56px; height: 56px; }
}