/* ------------------------------
   Brand tokens (edit once here)
------------------------------ */
:root{
  --text-color: #1A202C;   /* Slate-ish */
  --brand-teal: #1F7872;   /* Primary */
  --brand-green: #72B095;  /* Accent */
  --brand-beige: #DEDBA7;  /* Neutral accent */
  --brand-red: #D13F31;    /* Destructive */
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --border-color: rgba(17, 24, 39, .08);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 18px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.12);
}

/* ------------------------------
   Global / Typography
------------------------------ */
html, body{
  color: var(--text-color);
  background: var(--surface-2);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.6;
  margin: 0; /* let Bootstrap spacing handle layout */
}

:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--brand-teal) 35%, white);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6{
  color: var(--text-color);
  margin-top: .5rem;
  margin-bottom: .75rem;
  font-weight: 700;
  letter-spacing: .2px;
}

h1{ text-align:center; }
h2{
  text-align:center;
  padding: .5rem .75rem;
  margin-top: .5rem;
  background: color-mix(in srgb, var(--brand-teal) 8%, white);
  border: 1px solid color-mix(in srgb, var(--brand-teal) 18%, white);
  border-radius: .75rem;
}

/* Keep compatibility with capitalized selectors in old CSS */
H1{ margin-top:5px; padding-top:5px; text-align:center; }
H2{
  padding:5px; margin-top:5px; text-align:center; align-self:center;
  border-radius:10px;
  background-color: color-mix(in srgb, var(--brand-teal) 8%, white);
  border:1px solid color-mix(in srgb, var(--brand-teal) 18%, white);
}

/* Subtle helper */
.title-sub{
  font-style: italic;
  text-align: center;
  font-size: .9rem;
  opacity: .85;
}

/* ------------------------------
   Navbar (BS5)
   - Back-compat for .navbar-default
   - New: .navbar-modern, .bg-brand
------------------------------ */
.navbar-default,
.navbar-modern{
  background: linear-gradient(90deg, var(--brand-teal), color-mix(in srgb, var(--brand-green) 55%, var(--brand-teal)));
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.navbar-default .navbar-brand,
.navbar-modern .navbar-brand,
.navbar-default .nav-link,
.navbar-modern .nav-link{ color:#fff; }
.navbar-default .nav-link:hover,
.navbar-modern .nav-link:hover{ color: #f7f7f7; text-decoration: underline; text-underline-offset: .25rem; }

.bg-brand{ background: var(--brand-teal) !important; }
.text-brand{ color: var(--brand-teal) !important; }
.border-brand{ border-color: var(--brand-teal) !important; }

/* Old BS3 spacing quirk on brand in containers (kept for back-compat) */
@media (min-width: 768px){
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand{
    margin-left: -15px; color:#fff;
  }
}

/* ------------------------------
   Buttons
------------------------------ */
.btn{
  font-weight: 600;
  border-radius: .75rem;
  box-shadow: var(--shadow-sm);
  transition: transform .04s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active{ transform: translateY(1px); }

/* Brand buttons */
.btn-brand{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-teal);
  --bs-btn-border-color: var(--brand-teal);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-teal) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-teal) 85%, black);
  --bs-btn-focus-shadow-rgb: 31,120,114;
}
.btn-outline-brand{
  --bs-btn-color: var(--brand-teal);
  --bs-btn-border-color: var(--brand-teal);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-teal);
  --bs-btn-hover-border-color: var(--brand-teal);
  --bs-btn-focus-shadow-rgb: 31,120,114;
}

/* Map Bootstrap defaults to brand if you prefer */
.btn-primary{
  --bs-btn-bg: var(--brand-teal);
  --bs-btn-border-color: var(--brand-teal);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-teal) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-teal) 85%, black);
}

/* Legacy .btn-default mapping */
.btn-default{
  color:#fff !important;
  background: var(--brand-teal);
  border: 1px solid var(--brand-teal);
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.open > .dropdown-toggle.btn-default{
  color: var(--text-color) !important;
  background: var(--brand-green);
  border-color: var(--brand-green);
}

/* ------------------------------
   Imagery
------------------------------ */
img{
  background: #fff;
  border-radius: .5rem;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  margin-right: 20px;
  margin-bottom: 5px;
}

/* ------------------------------
   Content blocks / cards
------------------------------ */
.elevated{
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
}

.jumbotron, /* legacy */
.hero{
  color: color-mix(in srgb, var(--brand-red) 80%, black);
  background: #eef1f7;
  margin: 10px 0;
  padding: 2rem 1.5rem;
  text-align: center;
  border-radius: 1rem;
  border: 1px solid var(--border-color);
}

/* Notes/cards */
.note_card,
.note_card_ext,
.note_card_sm{
  display:block; position:relative; overflow:hidden;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: .75rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease, transform .06s ease;
}
.note_card      { font-size: .95rem; padding: 12px 14px; margin: 8px 6px; width: auto; }
.note_card_ext  { font-size: .9rem;  padding: 12px 14px; margin: 14px 12px; }
.note_card_sm   { font-size: .85rem; padding: 8px 10px;  margin: 6px 0; }

.note_card:hover,
.note_card_ext:hover,
.note_card_sm:hover{
  box-shadow: var(--shadow-lg);
}

/* ------------------------------
   Forms
------------------------------ */
label{
  color: #414B55;
  font-size: .85rem;
}

input, button, textarea, select{ font-size: 1rem; line-height: 1.25rem; }

input, textarea, select{
  padding-top: .35rem; padding-bottom: .35rem;
  box-sizing: border-box; width: 100%;
}

/* Data entry helpers */
.data-entry{ text-align:left; font-size: .9rem; }
.data-entry label{ font-style: normal; text-align:left; font-weight: 500; font-size: .9rem; }

/* Fieldset/legend modern look */
fieldset{
  margin: .5rem 0;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: .75rem;
  background: color-mix(in srgb, var(--brand-beige) 12%, white);
  box-shadow: var(--shadow-sm);
}
legend{
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: .75rem;
  border-bottom: 2px solid var(--brand-teal);
  padding-bottom: .25rem;
}
legend:after{ content: none; } /* remove triangle */

/* Messages */
.message{
  font-style: italic; text-align:center;
  padding: .75rem 0;
}

/* ------------------------------
   Footer
------------------------------ */
.standard-footer{
  height: 56px; width: 100%;
  background: linear-gradient(90deg, var(--brand-teal), color-mix(in srgb, var(--brand-green) 55%, var(--brand-teal)));
  color: #fff;
  position: fixed; left:0; bottom:0;
  display:flex; align-items:center;
  box-shadow: 0 -6px 20px rgba(0,0,0,.06);
  z-index: 1030;
}
.standard-footer p:last-child{ margin-bottom:0; }

/* ------------------------------
   Utilities / Helpers
------------------------------ */
.bg-body-tertiary{
  background-color: color-mix(in srgb, var(--brand-beige) 20%, white) !important;
  padding-left: 15px;
}

.text-danger-brand{ color: var(--brand-red) !important; }
.badge-brand{ background: var(--brand-teal); }
.link-brand{ color: var(--brand-teal); }
.link-brand:hover{ color: color-mix(in srgb, var(--brand-teal) 85%, black); }

/* Code blocks (hljs) */
.hljs{
  display:block; overflow-x:auto;
  background:#fff; color:#4d4d4c; padding:.75rem;
  border: 1px solid var(--border-color);
  border-radius: .5rem;
}

/* Misc legacy selectors kept for compatibility */
.formatted_content code, .torso code{
  font-style: normal; font-weight: normal;
}

bodyText3{ color: darkred; } /* If this is meant to be a class, rename to .body-text-3 */

/* Optional: give .bg-danger/.btn-danger a brand-red hue boost */
.btn-danger{
  --bs-btn-bg: var(--brand-red);
  --bs-btn-border-color: var(--brand-red);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-red) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-red) 85%, black);
}