/* --- Self-hosted Poppins --------------------------------- */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/poppins/poppins-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins/poppins-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins/poppins-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins/poppins-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins/poppins-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/poppins/poppins-latin-700-normal.woff2') format('woff2');
}

:root {
  --brand-primary:    #53aceb;
  --brand-secondary:  #20325D;
  --brand-gray-light: #e5eded;
  --brand-gray:       #b6c8c8;
  --brand-gray-mid:   #6a7c7c;
  --brand-gray-dark:  #4a5c5c;
  --brand-shadow:     0px 4px 15px 0px #000e421a;
  --brand-gold:       #b8860b;
}

/* --- Bootstrap variable overrides ---------------------- */

:root {
  /* bg-dark / btn-dark → brand navy */
  --bs-dark:     #20325D;
  --bs-dark-rgb: 32, 50, 93;

  /* bg-light → brand light gray */
  --bs-light:     #e5eded;
  --bs-light-rgb: 229, 237, 237;

  /* Body */
  --bs-body-font-family: 'Poppins', sans-serif;
  --bs-body-color:       var(--brand-gray-dark);

  /* .text-muted (Bootstrap 5.3 uses --bs-secondary-color) */
  --bs-secondary-color: var(--brand-gray-mid);

  /* Links */
  --bs-link-color:     var(--brand-secondary);
  --bs-link-color-rgb: 32, 50, 93;

  /* Heading color */
  --bs-heading-color: var(--brand-secondary);

  /* Replace Bootstrap's generic shadow-sm with brand shadow */
  --bs-box-shadow-sm: var(--brand-shadow);

  /* Danger → brand red */
  --bs-danger:     #c94e4a;
  --bs-danger-rgb: 201, 78, 74;
}

/* --- Buttons -------------------------------------------- */

/* btn-dark → brand secondary navy */
.btn-dark {
  --bs-btn-bg:                  #20325D;
  --bs-btn-border-color:        #20325D;
  --bs-btn-hover-bg:            #162548;
  --bs-btn-hover-border-color:  #162548;
  --bs-btn-active-bg:           #162548;
  --bs-btn-active-border-color: #162548;
}

.btn-outline-dark {
  --bs-btn-color:               #20325D;
  --bs-btn-border-color:        #20325D;
  --bs-btn-hover-bg:            #20325D;
  --bs-btn-hover-border-color:  #20325D;
}

/* btn-danger → brand danger */
.btn-danger {
  --bs-btn-bg:                  #c94e4a;
  --bs-btn-border-color:        #c94e4a;
  --bs-btn-hover-bg:            #b3403c;
  --bs-btn-hover-border-color:  #b3403c;
  --bs-btn-active-bg:           #b3403c;
  --bs-btn-active-border-color: #b3403c;
}

/* --- Typography ----------------------------------------- */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600;
}

/* --- Prose content -------------------------------------- */

.content h2, .content h3, .content h4 { margin-top: 2rem; }
.content p, .content li { line-height: 1.75; color: var(--brand-gray-dark); }
.content ul, .content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.content a { color: var(--brand-secondary); }
.content figure { margin: 1.5rem 0; }
.content figure img { max-width: 100%; height: auto; display: block; border-radius: .375rem; }

/* --- Card brand icon (matches app tab-one-triage card style) ------------ */

.card-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: -50px;
  margin-top: -50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="214.504" height="214.504"><g data-name="Group 5"><g data-name="Group 1" opacity=".414" style="isolation:isolate"><path fill="%23fff" d="M107.253 145.692a38.251 38.251 0 0 1-17.282-4.107 71.274 71.274 0 0 1-12.638-4.414 71.834 71.834 0 0 1-35.398-95.236 71.852 71.852 0 1 0 99.653 82.6 38.429 38.429 0 0 1-34.332 21.159" data-name="Path 4"/></g><g data-name="Group 2" opacity=".3" style="isolation:isolate"><path fill="%23fff" d="M68.813 107.253a38.277 38.277 0 0 1 4.106-17.282 71.837 71.837 0 0 1 99.656-48.036 71.853 71.853 0 1 0-82.6 99.653 38.428 38.428 0 0 1-21.158-34.332" data-name="Path 5"/></g><g data-name="Group 3" opacity=".2" style="isolation:isolate"><path fill="%23fff" d="M169.768 107.253a71.8 71.8 0 0 0-45.233-34.334 38.43 38.43 0 0 1 17.05 51.616 71.353 71.353 0 0 1-4.414 12.638 71.838 71.838 0 0 1-95.239 35.4 71.846 71.846 0 1 0 127.836-65.322" data-name="Path 6"/></g><g data-name="Group 4" opacity=".1"><path fill="%23fff" d="M172.575 41.935a71.834 71.834 0 0 0-99.656 48.039 38.43 38.43 0 0 1 51.616-17.055 71.841 71.841 0 0 1 48.04 99.656 71.847 71.847 0 0 0 0-130.643" data-name="Path 7"/></g></g></svg>');
}

.card-brand-icon svg {
  width: 28px;
  height: 28px;
  color: white;
}

/* --- Upgrade modal benefit icon (matches app item-media-frame) ----------- */

.benefit-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50rem;
  border: 1px solid var(--brand-gray);
}

.benefit-icon svg {
  width: 22px;
  height: 22px;
}

/* --- Utilities ------------------------------------------ */

/* Two-line text clamp — mirrors app's .clamp-2 */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  min-height: calc(1.4em * 2);
}

/* --- Navigation ----------------------------------------- */

/* Active and hovered nav links → brand primary blue */
.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--brand-primary) !important;
}

/* Hide tab nav when a page has only one tab */
.page-tabs-nav:has(> li:only-child) {
  display: none;
}

/* --- Brand text colors ----------------------------------- */

.text-brand-primary { color: var(--brand-primary); }
.text-brand-gold    { color: var(--brand-gold); }

/* --- Brand backgrounds ----------------------------------- */

.bg-brand-primary  { background-color: var(--brand-primary) !important; }
.bg-brand-gold     { background-color: var(--brand-gold) !important; }
.bg-brand-gradient { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%); }

/* --- Modal hero header ------------------------------------ */

.modal-hero { min-height: 130px; }

.modal-hero-watermark {
  position: absolute;
  right: -60px;
  bottom: -60px;
  opacity: 0.15;
}

/* --- Icon boxes (gradient tile for resource/file lists) --- */

.icon-box,
.icon-box-sm {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .375rem;
  background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
}

.icon-box    { width: 48px; height: 48px; }
.icon-box-sm { width: 44px; height: 44px; }

/* --- Opacity utilities ------------------------------------ */

.opacity-60 { opacity: 0.6; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }

/* --- Icon size utilities ---------------------------------- */

.icon-xl { font-size: 3rem; }
.icon-lg { font-size: 2.5rem; }
.icon-sm { font-size: 0.875rem; }
.icon-xs { font-size: 0.6875rem; }

/* --- Text size utilities ---------------------------------- */

.text-xs   { font-size: 0.75rem; }
.text-fine { font-size: 0.8rem; }

/* --- Letter-spacing --------------------------------------- */

.ls-wide { letter-spacing: 0.05em; }

/* --- Max-width containers --------------------------------- */

.mw-420 { max-width: 420px; }
.mw-480 { max-width: 480px; }
.mw-720 { max-width: 720px; }

/* --- Image utilities -------------------------------------- */

.img-16x9      { aspect-ratio: 16 / 9; object-fit: cover; }
.img-cover-dim { object-fit: cover; filter: brightness(0.35); }

/* --- z-index utilities (ensure Bootstrap 5.3 parity) ------ */

.z-1 { z-index: 1 !important; }
.z-2 { z-index: 2 !important; }
.z-3 { z-index: 3 !important; }

/* --- video.js inside Bootstrap ratio container ------------- */
/* video.js sets inline width/height on its wrapper; !important
   overrides those so the player fills the ratio box correctly. */
.ratio .video-js {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.ratio .vjs-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}