/* BRINE website theme (dark). Replaces Evennia's website.css on every page that
   extends website/base.html: landing, nav, footer, login/register/password,
   characters, channels, help, flatpages, 404/500. /mapeditor/ and the webclient
   have their own stylesheets. Palette: near-black ground, oxidized teal
   accents, rust-orange highlight, salt-white text. */

:root {
  --b-bg: #0a0d0e;
  --b-bg2: #0f1416;
  --b-panel: #131a1c;
  --b-panel2: #192225;
  --b-line: #28373a;
  --b-text: #e8ebe4;      /* salt white */
  --b-dim: #a3b3ad;
  --b-teal: #4cc2ae;      /* oxidized green-teal */
  --b-teal-dk: #1f6b60;
  --b-teal-deep: #123e39;
  --b-rust: #d9692c;      /* rust orange */
  --b-rust-lt: #f08c4e;
  --b-rust-dk: #8f3f16;
  --b-red: #e0655b;
  --b-mono: "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* ---------- page frame: sticky footer without absolute positioning */
html { min-height: 100%; background: var(--b-bg); }
body.brine {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--b-bg) radial-gradient(ellipse at 50% -10%, #12302c 0%, rgba(10, 13, 14, 0) 60%) no-repeat;
  color: var(--b-text);
}
.brine-main { flex: 1 0 auto; padding-bottom: 2.5rem; }
.brine h1, .brine h2, .brine h3, .brine h4, .brine h5, .brine h6 { color: var(--b-text); }
.brine hr { border-top-color: var(--b-line); }
.brine a { color: var(--b-teal); }
.brine a:hover, .brine a:focus { color: var(--b-rust-lt); }
.brine code, .brine kbd, .brine pre { font-family: var(--b-mono); }
.brine code { color: var(--b-rust-lt); background: rgba(217, 105, 44, .08); padding: .05em .35em; border-radius: 3px; }
.brine ::selection { background: var(--b-teal-dk); color: #fff; }
.brine .text-muted, .brine .brine-dim, .brine small.form-text { color: var(--b-dim) !important; }
.brine .text-white { color: var(--b-text) !important; }
.brine .bg-light, .brine .bg-white { background-color: var(--b-panel) !important; }
.brine :focus-visible { outline: 2px solid var(--b-rust-lt); outline-offset: 2px; }

/* ---------- nav */
.brine-nav {
  background: rgba(10, 13, 14, .92);
  border-bottom: 1px solid var(--b-line);
  box-shadow: 0 1px 0 rgba(76, 194, 174, .08), 0 6px 18px rgba(0, 0, 0, .45);
  padding: .5rem 1rem;
}
.brine-brand { display: flex; align-items: center; gap: .75rem; padding: 0; margin-right: 1.5rem; }
.brine-logo-slot { display: inline-flex; align-items: center; height: 40px; min-width: 40px; }
.brine-logo { height: 40px; width: auto; max-width: 200px; display: block; }  /* drop-in: brine_logo.png */
.brine-wordmark {
  font-family: var(--b-mono);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: .32em;
  color: var(--b-teal);
  border: 1px solid var(--b-teal-dk);
  padding: .1rem .2rem .1rem .5rem;   /* letter-spacing leaves room on the right */
  border-radius: 3px;
  line-height: 1.5;
  text-shadow: 0 0 10px rgba(76, 194, 174, .35);
}
.brine-slogan { color: var(--b-dim); font-size: .8rem; font-style: italic; font-weight: 400; }
.brine-nav .nav-link { color: var(--b-text) !important; font-weight: 500; }
.brine-nav .nav-link:hover, .brine-nav .nav-link:focus { color: var(--b-rust-lt) !important; }
.brine-nav .brine-nav-play { color: var(--b-rust-lt) !important; }
.brine-nav .btn-link.nav-link { text-decoration: none; }
.brine-nav .navbar-toggler { border-color: var(--b-line); }

.brine .dropdown-menu { background: var(--b-panel); border: 1px solid var(--b-line); box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.brine .dropdown-item, .brine .dropdown-item-text { color: var(--b-text); }
.brine .dropdown-item:hover, .brine .dropdown-item:focus { background: var(--b-teal-deep); color: #fff; }
.brine .dropdown-divider { border-top-color: var(--b-line); }

/* ---------- footer */
.brine-footer {
  flex-shrink: 0;
  background: var(--b-bg2);
  border-top: 1px solid var(--b-line);
  color: var(--b-dim);
  font-size: .85rem;
  padding: 1rem 0;
}
.brine-footer-name { color: var(--b-teal); font-family: var(--b-mono); letter-spacing: .2em; font-weight: 700; }
.brine-footer-sep { margin: 0 .5rem; color: var(--b-rust); }
.brine-footer-slogan { font-style: italic; }

/* ---------- landing */
.brine-hero { text-align: center; padding: 2.5rem 0 1rem; }
.brine-banner-wrap { max-width: 100%; overflow-x: auto; }
.brine-banner {
  display: inline-block;
  text-align: left;
  margin: 0 auto;
  color: var(--b-teal);                 /* uncoloured banner text = teal */
  font-family: var(--b-mono);
  font-size: clamp(7px, 2.35vw, 17px);  /* 62 columns fit a 360px phone */
  line-height: 1.2;
  white-space: pre;
  background: transparent;
  border: 0;
  padding: 0;
  text-shadow: 0 0 12px rgba(76, 194, 174, .28);
}
/* Evennia colour codes from the connection screen (|b |c |w ...) */
.brine-banner .ec-r { color: #ff6b5e; }
.brine-banner .ec-g { color: #6fdc8c; }
.brine-banner .ec-y { color: #f4d35e; }
.brine-banner .ec-b { color: #4f93c9; }
.brine-banner .ec-m { color: #d77ad7; }
.brine-banner .ec-c { color: #69e0d0; font-weight: 700; }
.brine-banner .ec-w { color: var(--b-text); font-weight: 700; }
.brine-banner .ec-x { color: #6b7775; }
.brine-banner .ec-dk { filter: brightness(.75); font-weight: 400; }

.brine-play-row { margin: 2rem 0 1.25rem; }
.brine a.playbutton {
  display: inline-block;
  min-width: 9.5rem;
  padding: .7rem 2.6rem;
  font-family: var(--b-mono);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em;                    /* balance the letter-spacing */
  text-decoration: none;
  color: #120904;
  background: linear-gradient(180deg, var(--b-rust-lt) 0%, var(--b-rust) 100%);
  border: 1px solid var(--b-rust-dk);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(240, 140, 78, .15), 0 0 24px rgba(217, 105, 44, .35);
  transition: box-shadow .15s, transform .05s;
}
.brine a.playbutton:hover, .brine a.playbutton:focus {
  color: #120904;
  box-shadow: 0 0 0 2px var(--b-teal), 0 0 30px rgba(217, 105, 44, .55);
}
.brine a.playbutton:active { transform: translateY(1px); }
.brine-connect { color: var(--b-dim); font-size: .95rem; }
.brine-connect p { margin-bottom: .35rem; }
.brine-connect code { font-size: 1em; color: var(--b-text); background: var(--b-panel); border: 1px solid var(--b-line); }

/* ---------- bootstrap components on dark */
.brine .card { background: var(--b-panel); border: 1px solid var(--b-line); color: var(--b-text); }
.brine .card-header, .brine .card-footer { background: var(--b-panel2); border-color: var(--b-line); color: var(--b-text); }
.brine .card-title { color: var(--b-text); }
.brine .border-light, .brine .border-dark, .brine .border-secondary { border-color: var(--b-line) !important; }
.brine .card.border-light { background: var(--b-bg2); }
.brine .card-subtitle { color: var(--b-dim); }
.brine .list-group-item { background: transparent; border-color: var(--b-line); color: var(--b-text); }
.brine .list-group-item-action:hover, .brine .list-group-item-action:focus { background: var(--b-teal-deep); color: #fff; }
.brine .list-group-item.active { background: var(--b-teal-dk); border-color: var(--b-teal-dk); }
.brine .breadcrumb { background: var(--b-panel); border: 1px solid var(--b-line); }
.brine .breadcrumb-item, .brine .breadcrumb-item.active { color: var(--b-dim); }
.brine .breadcrumb-item + .breadcrumb-item::before { color: var(--b-line); }
.brine .table { color: var(--b-text); }
.brine .table th, .brine .table td, .brine .table thead th { border-color: var(--b-line); }
.brine .table-striped tbody tr:nth-of-type(odd) { background: rgba(255, 255, 255, .03); }
.brine .table-hover tbody tr:hover { background: var(--b-teal-deep); color: #fff; }
.brine .page-link { background: var(--b-panel); border-color: var(--b-line); color: var(--b-teal); }
.brine .page-link:hover { background: var(--b-panel2); color: var(--b-rust-lt); }
.brine .page-item.active .page-link { background: var(--b-teal-dk); border-color: var(--b-teal-dk); color: #fff; }
.brine .page-item.disabled .page-link { background: var(--b-bg2); border-color: var(--b-line); color: #5d6b67; }
.brine .badge-primary, .brine .badge-info { background: var(--b-teal-dk); }
.brine .badge-secondary { background: var(--b-panel2); color: var(--b-text); }

/* forms */
.brine label { color: var(--b-text); }
.brine .form-control, .brine select, .brine textarea, .brine input[type=text], .brine input[type=password],
.brine input[type=email], .brine input[type=search] {
  background-color: var(--b-bg2);
  border: 1px solid var(--b-line);
  color: var(--b-text);
}
.brine .form-control:focus {
  background-color: var(--b-bg2);
  color: var(--b-text);
  border-color: var(--b-teal);
  box-shadow: 0 0 0 .2rem rgba(76, 194, 174, .25);
}
.brine .form-control::placeholder { color: #6f7f7a; }
.brine .form-control:disabled, .brine .form-control[readonly] { background: var(--b-panel2); color: var(--b-dim); }
.brine .errorlist { color: var(--b-red); padding-left: 1.1rem; }
.brine .helptext, .brine .form-text { color: var(--b-dim); }
.brine .form-text ul { padding-left: 1.1rem; margin: .25rem 0 0; }

/* buttons: teal outline by default, rust for the primary call */
.brine .btn-outline-secondary, .brine .btn-secondary, .brine .btn-light, .brine .btn-info {
  color: var(--b-teal);
  border-color: var(--b-teal-dk);
  background: transparent;
}
.brine .btn-outline-secondary:hover, .brine .btn-secondary:hover, .brine .btn-light:hover,
.brine .btn-outline-secondary:focus, .brine .btn-secondary:focus, .brine .btn-info:hover, .brine .btn-info:focus {
  color: #06100e;
  background: var(--b-teal);
  border-color: var(--b-teal);
}
.brine input[type=submit].btn, .brine button[type=submit].btn:not(.btn-link), .brine .btn-primary {
  color: #120904;
  background: var(--b-rust);
  border-color: var(--b-rust-dk);
  font-weight: 600;
}
.brine input[type=submit].btn:hover, .brine button[type=submit].btn:not(.btn-link):hover, .brine .btn-primary:hover,
.brine input[type=submit].btn:focus, .brine .btn-primary:focus {
  color: #120904;
  background: var(--b-rust-lt);
  border-color: var(--b-rust);
  box-shadow: 0 0 0 .2rem rgba(217, 105, 44, .3);
}
.brine .btn-danger { background: #9b2d25; border-color: #7a211b; color: #fff; }
.brine .btn-link { color: var(--b-teal); }

/* alerts */
.brine .alert { border-width: 1px; }
.brine .alert-info { background: var(--b-teal-deep); border-color: var(--b-teal-dk); color: #d9f4ee; }
.brine .alert-success { background: #12331f; border-color: #1f5c36; color: #d4f3dd; }
.brine .alert-warning { background: #3a2a0e; border-color: #6e4f15; color: #f8e6c0; }
.brine .alert-danger, .brine .alert-error { background: #3a1512; border-color: #7a2a22; color: #fbd9d4; }
.brine .alert-link { color: inherit; text-decoration: underline; }

/* Evennia's auth cards are col-lg-5 offset-lg-3 (off-centre): centre them */
@media (min-width: 992px) {
  #main-copy > .row > .col-lg-5.offset-lg-3 { margin-left: auto; margin-right: auto; }
}

/* help / object text blocks */
.brine .card-text, .brine .card-body p { color: var(--b-text); }
.brine pre:not(.brine-banner) { background: var(--b-bg2); color: var(--b-text); border: 1px solid var(--b-line); padding: .75rem; border-radius: 4px; }

/* ---------- narrow screens */
@media (max-width: 767.98px) {
  .brine-nav .navbar-collapse { border-top: 1px solid var(--b-line); margin-top: .5rem; padding-top: .25rem; }
  .brine-hero { padding-top: 1.5rem; }
  .brine a.playbutton { font-size: 1.2rem; padding: .65rem 2.2rem; }
}