/* Bodursan design ↔ CMS bridge
   Loaded after bootstrap + bodursan-theme.css + bdn/main.css.
   Re-points the legacy theme tokens (used by inner-page components) to the new palette. */

:root {
  --bs-navy: #0d1a40;
  --bs-navy-2: #13245a;
  --bs-deep: #081230;
  --bs-blue: #27a9e1;
  --bs-blue-2: #2e3092;
  --bs-accent: #f15a29;
  --bs-sky: #eef0fb;
  --bs-mist: #f3f5fa;
  --bs-ink: #081230;
  --bs-muted: #5a6480;
  --bs-line: #e1e6ef;
  --bs-font: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bs-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --bs-radius: 10px;
  --bs-shadow: 0 1px 2px rgba(8, 18, 48, .06), 0 8px 24px rgba(8, 18, 48, .07);
  --bs-header-h: 84px;
  /* bootstrap */
  --bs-body-font-family: var(--f-body);
  --bs-body-color: var(--text);
  --bs-link-color-rgb: 46, 48, 146;
  --bs-link-hover-color-rgb: 241, 90, 41;
  --bs-primary: #2e3092;
  --bs-primary-rgb: 46, 48, 146;
}

body.bdn-site { font: 400 16px/1.65 var(--f-body); color: var(--text); background: #fff; padding-top: 0 !important; }

/* Bootstrap-icons used where the design had inline SVG */
.bi.i { display: inline-flex; align-items: center; justify-content: center; font-size: 1.15em; line-height: 1; width: auto; height: auto; }
.mega-head .bi.i { font-size: 20px; width: 22px; }
.cat-ic .bi.i { font-size: 26px; }
.why-ic .bi.i { font-size: 22px; }

/* Topbar / header details */
.topbar .i { width: 15px; height: 15px; }
.hdr .nav-btn[aria-current]::after { transform: scaleX(1); }
.mega-in { grid-template-columns: repeat(3, 1fr); }
.mega-col li a { line-height: 1.4; }
.hf-item { color: var(--on-dark); transition: color .2s; }
.hf-item:hover { color: #fff; }
.checks li span { color: var(--text); }
.checks li strong { color: var(--ink); font-weight: 650; }

/* Flash messages */
.bdn-flash { padding-top: 18px; }
.bdn-flash--over { position: absolute; left: 0; right: 0; top: calc(40px + var(--hdr-h)); z-index: 45; }
.bdn-flash .alert { margin: 0; }

/* Page hero (partials/pagehead) */
.phero--compact .phero-in { padding-block: clamp(44px, 6vw, 80px) clamp(36px, 5vw, 60px); }
.phero p.phero-title { font-family: var(--f-head); font-stretch: 108%; font-weight: 650; line-height: 1.12; }
.phero .crumbs a { color: var(--on-dark-mute); }

/* Home FAQ */
.bdn-faq { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.bdn-faq__list { border-top: 1px solid var(--line); }
.bdn-faq__item { border-bottom: 1px solid var(--line); }
.bdn-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 0; cursor: pointer; list-style: none; font: 600 18px/1.35 var(--f-head); font-stretch: 105%; color: var(--ink); }
.bdn-faq__item summary::-webkit-details-marker { display: none; }
.bdn-faq__item summary .i { color: var(--accent); transition: transform .25s var(--ease); }
.bdn-faq__item[open] summary .i { transform: rotate(180deg); }
.bdn-faq__item p { color: var(--muted); padding: 0 40px 22px 0; margin: 0; }

/* Inner pages: legacy components on the new palette */
.is-inner main { min-height: 40vh; }
.bs-section { padding-block: clamp(56px, 7vw, 100px); }
.bs-section--mist { background: var(--tint); }
.bs-eyebrow { color: var(--accent); letter-spacing: .16em; font-weight: 600; font-size: 12.5px; text-transform: uppercase; }
.bs-btn--primary, .bs-btn--accent { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.bs-btn--primary:hover, .bs-btn--accent:hover { background: var(--accent-2) !important; border-color: var(--accent-2) !important; }
.btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-2); --bs-btn-hover-border-color: var(--accent-2); --bs-btn-active-bg: var(--accent-2); }
main :is(h1, h2, h3, h4) { font-family: var(--f-head); font-stretch: 108%; }

@media (max-width: 1000px) {
  .bdn-faq { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .bdn-flash--over { top: calc(40px + var(--hdr-h)); }
  .mega-in { grid-template-columns: 1fr; }
}

/* Port directory */
.sec--dark .link-arrow { color: #fff; }
.cov-list + .link-arrow { margin-top: 26px; }
.tmap .pdot .pt { fill: #fff; stroke: var(--sail); stroke-width: 2; transition: fill .2s; }
.tmap .pdot:hover .pt, .tmap .pdot:focus .pt { fill: var(--accent); stroke: #fff; }
.tmap .pdot.is-on .pt { fill: var(--accent); stroke: #fff; }
.tmap .pdot.is-on .ping { stroke: var(--accent); }
.tmap--ports .port--hq text { font-size: 15px; }
.port-tools { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.port-tools .filters { margin-bottom: 0; }
.port-search input { font: 400 15px var(--f-body); padding: 12px 16px; min-width: 260px; border: 1px solid #cfd6e3; border-radius: 99px; background: #fbfcfe; }
.port-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(46, 48, 146, .1); }
.port-region { margin-bottom: 40px; }
.port-region[hidden], .portcard[hidden] { display: none; }
.port-region-h { font-size: 22px; margin-bottom: 16px; display: flex; gap: 12px; align-items: baseline; }
.port-region-h span { font: 500 13px var(--f-body); color: var(--muted); letter-spacing: .04em; }
.portgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.portcard { display: flex; align-items: center; gap: 10px; padding: 15px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); font-weight: 600; color: var(--ink); transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.portcard .i:first-child { color: var(--accent); }
.portcard span { flex: 1; }
.portcard .i:last-child { color: var(--line); transition: color .2s, transform .2s var(--ease); }
.portcard:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-2px); }
.portcard:hover .i:last-child { color: var(--accent); transform: translateX(3px); }
.port-empty { color: var(--muted); }
.port-empty a { color: var(--brand); text-decoration: underline; }
@media (max-width: 1000px) { .portgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .portgrid { grid-template-columns: 1fr; } .port-search, .port-search input { width: 100%; min-width: 0; } }