:root {
  /* Brand palette with RGB for utilities */
  --bs-primary: #202549;
  --bs-primary-rgb: 32, 37, 73;

  --bs-secondary: #2C7A7B;
  --bs-secondary-rgb: 44, 122, 123;

  --bs-info: #5FB2B2;
  --bs-info-rgb: 95, 178, 178;

  --bs-success: #2E7D32;
  --bs-success-rgb: 46, 125, 50;

  --bs-warning: #F59E0B;
  --bs-warning-rgb: 245, 158, 11;

  --bs-danger: #D32F2F;
  --bs-danger-rgb: 211, 47, 47;

  /* Base surfaces and text */
  --bs-body-bg: #F5F6FA;
  --bs-body-color: #1F2937;
  --bs-border-color: #E5E7EB;

  /* Links */
  --bs-link-color: var(--bs-secondary);
  --bs-link-hover-color: #1F6A6B;

  /* Headings */
  --bs-heading-color: #191D39;
}

/* --- Button overrides --- */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: color-mix(in oklab, var(--bs-primary) 88%, black 12%);
  --bs-btn-hover-border-color: color-mix(in oklab, var(--bs-primary) 84%, black 16%);

  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in oklab, var(--bs-primary) 80%, black 20%);
  --bs-btn-active-border-color: color-mix(in oklab, var(--bs-primary) 76%, black 24%);

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);

  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in oklab, var(--bs-primary) 85%, black 15%);
  --bs-btn-active-border-color: color-mix(in oklab, var(--bs-primary) 85%, black 15%);

  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
}

/* --- Ensure other components follow the brand --- */
.bg-primary        { background-color: rgb(var(--bs-primary-rgb)) !important; }
.text-primary      { color: var(--bs-primary) !important; }
.border-primary    { border-color: rgb(var(--bs-primary-rgb)) !important; }
.badge.bg-primary  { background-color: rgb(var(--bs-primary-rgb)) !important; }
.link-primary      { color: var(--bs-primary) !important; }
/* JetBrains Mono – Thin (100) */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-Thin.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-ThinItalic.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-ThinItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
}

/* ExtraLight (200) */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-ExtraLight.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-ExtraLightItalic.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-ExtraLightItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
}

/* Light (300) */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-Light.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-LightItalic.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
}

/* Regular (400) */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-Regular.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-Italic.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
}

/* Medium (500) */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-Medium.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-MediumItalic.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
}

/* SemiBold (600) */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-SemiBold.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-SemiBoldItalic.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-SemiBoldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
}

/* Bold (700) */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-Bold.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-BoldItalic.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
}

/* ExtraBold (800) */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-ExtraBold.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('webfonts/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2'),
       url('webfonts/JetBrainsMono-ExtraBoldItalic.woff') format('woff');
  font-weight: 800;
  font-style: italic;
}


.f-jetbrainsmono,
pre,
code {
  font-family: 'JetBrains Mono', monospace;
}
.navbar-brand {
  
}
.logo-img {
  height: 80px; /* mobile default */
}
@media (min-width: 992px) { /* lg breakpoint */
  .logo-img {
    height: 140px;
  }
}

/* Default nav links inside header */
header.bg-primary .nav-link {
  color: #fff;
  transition: all .15s ease-in-out;
  border-radius: .25rem;
}

/* Hover state (pill look) */
header.bg-primary .nav-link:hover {
  background-color: #fff;
  color: #202549; /* brand blue */
}

/* Active state (pill look) */
header.bg-primary .nav-link.active {
  background-color: #fff;
  color: #202549;
}

/* When hovering another link, active loses pill */
header.bg-primary .nav:hover .nav-link.active {
  background-color: transparent;
  color: #fff;
}

.masthead {
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
#masthead-home {
  background-image: url("_img/sloop60.jpg");
}
#masthead-stay {
  background-image: url("_img/stay/hero.jpg");
}
.bg-white-80 {
  background-color: rgba(255, 255, 255, 0.8);
}

h4 span {
  margin-left: auto;
}