@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@900&display=swap'); /* MJ Quinn Bootstrap 5 theme layer*/

:root,
[data-bs-theme="light"] {
  /* Brand */
  /*  Primary */
  --mjq-primary: #80160E;
  --mjq-primary-rgb: 128, 22, 14;
  /*  Text */
  --mjq-text: #1D1D1B;
  /*  Info */
  --mjq-info: #1F7A8C;
  --mjq-info-rgb: 31, 122, 140;
  /*  Success */
  --mjq-success: #2E8B57;
  --mjq-success-rgb: 46, 139, 87;
  /*  Warning */
  --mjq-warning: #E09F3E;
  --mjq-warning-rgb: 224, 159, 62;
  /* Danger */
  --mjq-danger: #C0392B;
  --mjq-danger-rgb: 192, 57, 43;
  /* Secondary */
  --mjq-secondary: #6C757D;
  --mjq-secondary-rgb: 108, 117, 125;
  /*  Light */
  --mjq-light: #F8F9FA;
  --mjq-light-rgb: 248, 249, 250;
  /*  Dark */
  --mjq-dark: #212529;
  --mjq-dark-rgb: 33, 37, 41;
  /**/

  /* Map into Bootstrap variables */
  --bs-primary: var(--mjq-primary);
  --bs-primary-rgb: var(--mjq-primary-rgb);
  --bs-info: var(--mjq-info);
  --bs-info-rgb: var(--mjq-info-rgb);
  --bs-success: var(--mjq-success);
  --bs-success-rgb: var(--mjq-success-rgb);
  --bs-warning: var(--mjq-warning);
  --bs-warning-rgb: var(--mjq-warning-rgb);
  --bs-danger: var(--mjq-danger);
  --bs-danger-rgb: var(--mjq-danger-rgb);
  --bs-secondary: var(--mjq-secondary);
  --bs-secondary-rgb: var(--mjq-secondary-rgb);
  --bs-light: var(--mjq-light);
  --bs-light-rgb: var(--mjq-light-rgb);
  --bs-body-color: var(--mjq-text);
  --bs-body-color-rgb: 29, 29, 27;
  /* Typography */
  --bs-font-sans-serif: canada-type-gibson, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Optional “feel” tweaks (safe defaults) */
  --bs-border-radius: .5rem;
  --bs-focus-ring-color: rgba(var(--mjq-primary-rgb), .25);
}

/* Make sure body uses their font + sizing baseline */
body{
  font-family: var(--bs-font-sans-serif), sans-serif;
  color: var(--bs-body-color);
  font-size: 14px; /* matches their site baseline */
}

/* Their global link style: underline reveal on hover */
a{
  display:inline-block;
  position:relative;
  text-decoration:none;
  color: inherit;
}
a::before{
  content:'';
  position:absolute;
  left:0;
  width:100%;
  height:1em;
  border-bottom:1px solid currentColor;
  margin-top:5px;
  opacity:0;
  transform:scale(0,1);
  transition:opacity .35s, transform .35s;
  pointer-events:none; /* prevent pseudo-element intercepting clicks */
}
a:hover::before{
  opacity:1;
  transform:scale(1,1);
}
a.btn:hover::before {
  opacity: 0 !important;
  transform: scale(0, 1) !important;
  border-bottom: 0 !important;
  content: none; /* optional: fully remove it */
}

/* Ensure Bootstrap navbar & dropdown links are never broken by the global a{} rule */
.navbar a,
.dropdown-menu a{
  display:block; /* Bootstrap dropdowns require block, not inline-block */
}
.navbar a::before,
.dropdown-menu a::before{
  display:none;  /* remove hover underline pseudo-element inside nav */
}

/* Buttons: ensure primary feels on-brand */
.btn-primary{
  --bs-btn-bg: var(--mjq-primary);
  --bs-btn-border-color: var(--mjq-primary);
  --bs-btn-hover-bg: #80140e;
  --bs-btn-hover-border-color: #80140e;
  --bs-btn-focus-shadow-rgb: var(--mjq-primary-rgb);
  font-weight: 600;
}
.btn-outline-primary{
  --bs-btn-color: var(--mjq-primary);
  --bs-btn-border-color: var(--mjq-primary);
  --bs-btn-hover-bg: var(--mjq-primary);
  --bs-btn-hover-border-color: var(--mjq-primary);
  font-weight: 600;
}
.btn-info{
  --bs-btn-bg: var(--mjq-info);
  --bs-btn-border-color: var(--mjq-info);
  --bs-btn-hover-bg: #176272;          /* seen on their buttons */
  --bs-btn-hover-border-color: #80140e;
  --bs-btn-focus-shadow-rgb: var(--mjq-info-rgb);
  --bs-btn-color: #FFFFFF;
  font-weight: 600;
}
.btn-outline-info{
  --bs-btn-color: var(--mjq-info);
  --bs-btn-border-color: var(--mjq-info);
  --bs-btn-hover-bg: var(--mjq-info);
  --bs-btn-hover-border-color: var(--mjq-info);
  font-weight: 600;
}
.btn-success{
  --bs-btn-bg: var(--mjq-success);
  --bs-btn-border-color: var(--mjq-success);
  --bs-btn-hover-bg: #256F46;          /* seen on their buttons */
  --bs-btn-hover-border-color: #256F46;
  --bs-btn-focus-shadow-rgb: var(--mjq-success-rgb);
  font-weight: 600;
}
.btn-outline-success{
  --bs-btn-color: var(--mjq-success);
  --bs-btn-border-color: var(--mjq-success);
  --bs-btn-hover-bg: var(--mjq-success);
  --bs-btn-hover-border-color: var(--mjq-success);
  font-weight: 600;
}
.btn-warning{
  --bs-btn-bg: var(--mjq-warning);
  --bs-btn-border-color: var(--mjq-warning);
  --bs-btn-hover-bg: #256F46;          /* seen on their buttons */
  --bs-btn-hover-border-color: #256F46;
  --bs-btn-focus-shadow-rgb: var(--mjq-warning-rgb);
  font-weight: 600;
}
.btn-outline-warning{
  --bs-btn-color: var(--mjq-warning);
  --bs-btn-border-color: var(--mjq-warning);
  --bs-btn-hover-bg: var(--mjq-warning);
  --bs-btn-hover-border-color: var(--mjq-warning);
  font-weight: 600;
}



/* Forms: brand-tinted focus (Bootstrap 5.3 uses focus-ring vars too) */
.form-control:focus,
.form-select:focus{
  border-color: var(--mjq-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--mjq-primary-rgb), .25);
}
/* =====================================================
   MJ Quinn Navbar
   ===================================================== */

/* Navbar background */
.navbar-mjq{
  background-color: #fff;
  border-bottom: 3px solid var(--mjq-primary);
}

/* Brand */
.navbar-mjq .navbar-brand{
  font-weight:600;
  letter-spacing:.04em;
  color: var(--mjq-primary);
}

/* Top level links */
.navbar-mjq .nav-link{
  color:#1D1D1B;
  font-weight:500;
  padding:.9rem 1rem;
  position:relative;
}

/* Hover underline animation (same feel as website) */
.navbar-mjq .nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:6px;
  width:100%;
  height:2px;
  background:var(--mjq-primary);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
  pointer-events:none; /* never block clicks on nav links */
}

.navbar-mjq .nav-link:hover::after,
.navbar-mjq .nav-link.active::after{
  transform:scaleX(1);
}

/* Dropdown menu */
.navbar-mjq .dropdown-menu{
  border-radius:.4rem;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:.5rem 0;
}

/* Dropdown items */
.navbar-mjq .dropdown-item{
  padding:.5rem 1.25rem;
  font-weight:500;
}

.navbar-mjq .dropdown-item:hover{
  background: rgba(var(--mjq-primary-rgb), .06);
  color: var(--mjq-primary);
}

/* Mobile toggle color */
.navbar-mjq .navbar-toggler{
  border:none;
}
.navbar-mjq .navbar-toggler:focus{
  box-shadow:0 0 0 .25rem rgba(var(--mjq-primary-rgb), .25);
}


/*
 * UK Rear Number Plate Styles
 * ─────────────────────────────────────────────────────────────────
 * Usage:  <span class="uk-plate">AB12 CDE</span>
 *
 * Font note: The official DVLA typeface is "Charles Wright" (licensed).
 * If you have the font, add it via @font-face and update font-family.
 * The fallback stack below gives a passable approximation in any browser.
 *
 * For a free web alternative that is closer than system fonts, you can
 * self-host "Mandatory" (free for personal use) or use a service that
 * provides "UKNumberPlate".
 * ─────────────────────────────────────────────────────────────────
 */

.uk-plate {
  /* ── Layout ── */
  display: inline-block;
  white-space: nowrap;

  /* ── Sizing — scales with font-size, override as needed ── */
  font-size: 3rem;           /* adjust to taste */
  padding: 0.15em 0.45em;

  /* ── Typography ── */
  /*
   * Ideal:   font-family: 'CharlesWright', 'Mandatory', sans-serif;
   * Fallback below uses Source Sans 3 (900 weight) — reasonably close
   * in weight and proportion to the real thing.
   */
  font-family: 'Source Sans 3', 'Arial Black', 'Franklin Gothic Heavy', sans-serif;
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #000;

  /* ── Plate colour (BS381C:355 — approximately) ── */
  background-color: #F5D327;

  /* ── Border: thin black outer + narrow inset margin ── */
  border: 2.5px solid #000;

  /*
   * The inset "margin" on a real plate is achieved with a second
   * thin black rule just inside the edge. We use box-shadow for this
   * so the span's own border stays clean.
   *
   * Layer order (outermost → innermost):
   *   1. The element border (solid black, above)
   *   2. A 3px yellow gap   — box-shadow spread 0, inset
   *   3. A 1.5px black rule — box-shadow spread, inset
   */
  box-shadow:
          inset 0 0 0 3px  #F5D327,   /* gap between outer border and inner rule */
          inset 0 0 0 4.5px #000;     /* inner black rule */

  border-radius: 4px;

  /* ── Text rendering ── */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* ─────────────────────────────────────────────────────────────────
 * Optional size variants
 * ─────────────────────────────────────────────────────────────────
 */

.uk-plate--sm  { font-size: 1.5rem; }
.uk-plate--md  { font-size: 3rem;   }   /* default */
.uk-plate--lg  { font-size: 5rem;   }
.uk-plate--xl  { font-size: 7rem;   }


/* ─────────────────────────────────────────────────────────────────
 * Front plate variant (white background)
 * ─────────────────────────────────────────────────────────────────
 */

.uk-plate--front {
  background-color: #fff;
}