/* ==========================================================================
   MunroSpeakUp theme - strictly monochrome (white / grey / black, no colour).

   IMPORTANT: overriding --bs-primary alone is NOT enough. Bootstrap 5.3 compiles
   its blue (#0d6efd) as literal values inside .btn-primary, .btn-outline-primary
   and the form focus styles - those rules never read --bs-primary. Every one of
   them therefore has to be overridden explicitly further down this file.
   ========================================================================== */

:root {
  /* Greyscale ramp - the only colours used anywhere in the app. */
  --msu-white: #ffffff;
  --msu-grey-50: #fafafa;
  --msu-grey-100: #f5f5f5;
  --msu-grey-200: #ebebeb;
  --msu-grey-300: #e0e0e0;
  --msu-grey-400: #c7c7c7;
  --msu-grey-600: #5f5f5f;
  --msu-grey-800: #333333;
  --msu-grey-900: #1a1a1a;
  --msu-black: #000000;

  /* Bootstrap variables that ARE honoured at runtime. */
  --bs-primary: #1a1a1a;
  --bs-primary-rgb: 26, 26, 26;
  --bs-primary-text-emphasis: #1a1a1a;
  --bs-link-color: #1a1a1a;
  --bs-link-color-rgb: 26, 26, 26;
  --bs-link-hover-color: #000000;
  --bs-link-hover-color-rgb: 0, 0, 0;
  --bs-body-color: #1a1a1a;
  --bs-body-bg: #f5f5f5;
  --bs-border-color: #e0e0e0;
  --bs-secondary-color: #5f5f5f;
  /* Bootstrap's neutral utilities (.bg-light, .text-bg-light, .bg-body-tertiary) ship a faintly blue
     grey. Repointed at the greyscale ramp so those classes can be used freely without going off-theme. */
  --bs-light: #f5f5f5;
  --bs-light-rgb: 245, 245, 245;
  --bs-secondary-bg: #ebebeb;
  --bs-tertiary-bg: #f5f5f5;
  --bs-focus-ring-color: rgba(26, 26, 26, 0.25);
  --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --msu-text-muted: #5f5f5f;

  /* The one colour in the palette. Reserved strictly for validation errors - it carries meaning, so it
     is not decoration. #b3261e sits at ~6.7:1 against white, clearing WCAG AA for normal text, which the
     lighter reds (Bootstrap's #dc3545 is ~3.9:1) do not. */
  --msu-error: #b3261e;
  --msu-error-rgb: 179, 38, 30;
  --msu-error-bg: #fdf3f2;
  --msu-error-border: #f0cfcd;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  background-color: var(--msu-grey-100);
  color: var(--msu-grey-900);
}

/* --------------------------------------------------------------------------
   Bootstrap component overrides - these replace hardcoded blue.
   -------------------------------------------------------------------------- */

.btn-primary {
  --bs-btn-color: var(--msu-white);
  --bs-btn-bg: var(--msu-grey-900);
  --bs-btn-border-color: var(--msu-grey-900);
  --bs-btn-hover-color: var(--msu-white);
  --bs-btn-hover-bg: var(--msu-black);
  --bs-btn-hover-border-color: var(--msu-black);
  --bs-btn-focus-shadow-rgb: 26, 26, 26;
  --bs-btn-active-color: var(--msu-white);
  --bs-btn-active-bg: var(--msu-black);
  --bs-btn-active-border-color: var(--msu-black);
  --bs-btn-disabled-color: var(--msu-white);
  --bs-btn-disabled-bg: var(--msu-grey-400);
  --bs-btn-disabled-border-color: var(--msu-grey-400);
}

.btn-outline-primary {
  --bs-btn-color: var(--msu-grey-900);
  --bs-btn-border-color: var(--msu-grey-400);
  --bs-btn-hover-color: var(--msu-white);
  --bs-btn-hover-bg: var(--msu-grey-800);
  --bs-btn-hover-border-color: var(--msu-grey-800);
  --bs-btn-focus-shadow-rgb: 26, 26, 26;
  --bs-btn-active-color: var(--msu-white);
  --bs-btn-active-bg: var(--msu-grey-900);
  --bs-btn-active-border-color: var(--msu-grey-900);
  --bs-btn-disabled-color: var(--msu-grey-600);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--msu-grey-300);
}

.btn-outline-secondary {
  --bs-btn-color: var(--msu-grey-800);
  --bs-btn-border-color: var(--msu-grey-400);
  --bs-btn-hover-color: var(--msu-white);
  --bs-btn-hover-bg: var(--msu-grey-800);
  --bs-btn-hover-border-color: var(--msu-grey-800);
  --bs-btn-focus-shadow-rgb: 26, 26, 26;
  --bs-btn-active-color: var(--msu-white);
  --bs-btn-active-bg: var(--msu-grey-900);
  --bs-btn-active-border-color: var(--msu-grey-900);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--msu-grey-600);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(26, 26, 26, 0.15);
}

.form-check-input:checked {
  background-color: var(--msu-grey-900);
  border-color: var(--msu-grey-900);
}

.form-check-input:focus {
  border-color: var(--msu-grey-600);
  box-shadow: 0 0 0 0.2rem rgba(26, 26, 26, 0.15);
}

.btn:focus-visible,
.btn-check:focus-visible + .btn {
  box-shadow: 0 0 0 0.2rem rgba(26, 26, 26, 0.25);
}

/* Bootstrap hardcodes its blue for the selected dropdown item, and declares it on .dropdown-menu -
   so it has to be overridden there, not on :root, or the component-level value wins. */
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--msu-grey-900);
  --bs-dropdown-link-active-color: var(--msu-white);
  --bs-dropdown-link-hover-bg: var(--msu-grey-100);
}

/* Searchable country dropdown (built in Concern.cshtml from the plain select).
   The toggle carries .form-select, so it inherits the caret and field styling for free. */
.msu-combo-list {
  max-height: 15rem;
  overflow-y: auto;
}

.text-danger {
  color: var(--msu-error) !important;
  font-weight: 600;
}

/* The class jQuery validation (and the server-side tag helper) puts on a field that failed. */
.input-validation-error {
  border-color: var(--msu-error);
  border-width: 2px;
}

/* Without this the focus ring stays grey and contradicts the red border the moment the visitor
   clicks into the field they need to fix. */
.input-validation-error:focus {
  border-color: var(--msu-error);
  box-shadow: 0 0 0 0.2rem rgba(var(--msu-error-rgb), 0.2);
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

/* One centered column, so every page reads as a single focused form rather than
   a multi-section site. */
.msu-shell {
  max-width: 720px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.msu-panel {
  background-color: var(--msu-white);
  border: 1px solid var(--msu-grey-300);
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

@media (max-width: 575.98px) {
  .msu-panel {
    padding: 1.5rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

.msu-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--msu-text-muted);
  margin-bottom: 0.5rem;
}

.msu-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #323232;
    border-bottom: 1px solid var(--msu-grey-300);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.msu-section-title:not(:first-child) {
  margin-top: 2rem;
}

.msu-footer {
  border-top: 1px solid var(--msu-grey-300);
  color: var(--msu-text-muted);
  font-size: 0.8125rem;
  text-align: center;
  padding: 1.5rem 0 2.5rem;
}

/* ASP.NET Core's validation summary tag helper always renders its element; these two
   classes are what it switches between, so the empty/valid state must stay invisible. */
.validation-summary-valid {
  display: none;
}

.validation-summary-errors {
  background-color: var(--msu-error-bg);
  border: 1px solid var(--msu-error-border);
  border-left: 4px solid var(--msu-error);
  color: var(--msu-error);
  font-weight: 600;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
}

.validation-summary-errors ul {
  margin-bottom: 0;
  padding-left: 1.1rem;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* The files the visitor has chosen, listed under the file input. */
.msu-attachments {
  margin: 0.75rem 0 0;
  border: 1px solid var(--msu-grey-300);
  border-radius: 0.375rem;
  overflow: hidden;
}

.msu-attachment {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  background-color: var(--msu-white);
}

.msu-attachment + .msu-attachment {
  border-top: 1px solid var(--msu-grey-200);
}

/* Fixed box so rows line up whether the file is an image or not. */
.msu-attachment-preview {
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--msu-grey-300);
  border-radius: 0.25rem;
  background-color: var(--msu-grey-100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.msu-attachment-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.msu-attachment-ext {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--msu-text-muted);
}

/* min-width:0 lets the name truncate instead of forcing the row wider than its container. */
.msu-attachment-details {
  flex: 1 1 auto;
  min-width: 0;
}

.msu-attachment-name {
  display: block;
  font-size: 0.875rem;
  color: var(--msu-grey-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.msu-attachment-size {
  font-size: 0.75rem;
  color: var(--msu-text-muted);
}

.msu-attachment .btn-close {
  flex: 0 0 auto;
  font-size: 0.75rem;
}

/* Covers the page while a concern is being submitted - attachments are scanned first, so it can take a
   while and the page otherwise looks frozen. Toggled by .d-none, which is display:none !important and so
   still wins over the display:flex below. */
.msu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1090;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: rgba(26, 26, 26, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: msu-overlay-fade 150ms ease-out;
}

@keyframes msu-overlay-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.msu-overlay-card {
  width: 100%;
  max-width: 21rem;
  padding: 2rem 1.75rem;
  background-color: var(--msu-white);
  border-radius: 0.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  text-align: center;
}

.msu-overlay-card .spinner-border {
  width: 2.5rem;
  height: 2.5rem;
  border-width: 0.2rem;
  color: var(--msu-grey-900);
}

.msu-overlay-title {
  margin: 1.25rem 0 0.375rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--msu-grey-900);
}

.msu-overlay-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--msu-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .msu-overlay { animation: none; }
  .msu-overlay-card .spinner-border { animation-duration: 2s; }
}

/* Spam honeypot field - kept off-screen, never shown to real visitors. */
.msu-honeypot {
  position: absolute;
  left: -10000px;
  top: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Admin concern detail: preserves the line breaks in free-typed complaint text. A CSS class rather than
   an inline style="" attribute, because the CSP's style-src has no 'unsafe-inline' - an inline style
   attribute would be silently dropped by the browser rather than rendered. */
.msu-preserve-whitespace {
  white-space: pre-wrap;
}


.h1HeaderTitle {
    font-family: "minion-3-display", serif;
    font-style: normal;
    font-weight: 500;
    line-height: 1.3333333333;
    letter-spacing: -0.01em;
}
body {
    .form-label, .form-text, p.textSubtitle {
        font-style: normal;
        line-height: 1.75;
        letter-spacing: -0.01em;
        font-family: "acumin-pro-semi-condensed", sans-serif;
        font-weight: 400;
        color: #323232 !important;
    }

    .msu-section-title {
        font-family: "minion-3-display", serif !important;
    }
}

.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    font-family: Arial, sans-serif;
}

#divShopFitInfoPopover, #content_contextMenuShopFitInfo{
    display: none;
}

.header__logo svg path {
    fill: #152337;
}

.header__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    padding-top: 10px;
    padding-bottom: 10px;
    background: var(--msu-grey-100);
}