/**
 * Surety Made Simple — global chrome (header/nav, footer, auth modals)
 * Source: surety-brand-guide.html
 *
 * Restyle-in-place: every selector below already exists in header.php /
 * footer.php / AppUsers modals and is wired to RD Navbar / Bootstrap modal
 * JS. Only colors, fonts, and shape change here — no class or structural
 * renames, so script.js's selectors keep working untouched.
 *
 * Loaded last (see config/asset_compress.ini) so it wins the cascade over
 * style.css/app.css/app-bottom.css at equal specificity.
 */

/* ---------- HEADER / RD NAVBAR ---------- */

.page-head {
  background-color: var(--surface-0);
}

.rd-navbar-corporate-light,
.rd-navbar-corporate-light .rd-navbar-inner,
.rd-navbar-corporate-light .rd-navbar-panel,
.rd-navbar-corporate-light .rd-navbar-group,
.rd-navbar-corporate-light.rd-navbar-static .rd-navbar-group,
.rd-navbar-corporate-light .rd-navbar-nav-wrap {
  background-color: var(--surface-0);
}

.rd-navbar-corporate-light .rd-navbar-aside {
  border-bottom: 1px solid var(--border);
}

.rd-navbar-corporate-light .rd-navbar-nav > li > a {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink-700);
  transition: color var(--duration-base) var(--ease);
}

.rd-navbar-corporate-light .rd-navbar-nav > li > a:hover,
.rd-navbar-corporate-light .rd-navbar-nav > li.focus > a,
.rd-navbar-corporate-light .rd-navbar-nav > li.active > a {
  color: var(--blue-500);
}

/* top utility bar (phone / email) */
.page .icon-cello {
  color: var(--ink-900);
}

.link-secondary {
  color: var(--ink-700);
  font-weight: 600;
}

.link-secondary:hover {
  color: var(--blue-500);
}

/* social icon circles (header = neutral badge, footer = ink badge) */
.page .icon-silver-chalice-filled {
  color: var(--ink-700);
  background: var(--surface-100);
}

.page a.icon-silver-chalice-filled,
.page a.icon-silver-chalice-filled:active,
.page a.icon-silver-chalice-filled:focus {
  color: var(--ink-700);
  background: var(--surface-100);
}

.page a.icon-silver-chalice-filled:hover {
  color: #fff;
  background: var(--ink-900);
}

/* Application (outline) nav CTA */
html .btn-cello-outline,
html .btn-cello-outline:active,
html .btn-cello-outline.active,
html .btn-cello-outline:active:focus,
html .btn-cello-outline.active:focus,
html .btn-cello-outline:focus:active,
html .btn-cello-outline:focus {
  color: var(--ink-700);
  background-color: transparent;
  border-color: var(--ink-700);
}

.open > html .btn-cello-outline.dropdown-toggle,
html .btn-cello-outline:hover {
  color: #fff;
  background-color: var(--blue-500);
  border-color: var(--blue-500);
}

/* home.css's .btn-cello-outline.application-button (equal specificity —
   2 classes each — but earlier in the load order, see asset_compress.ini)
   hardcodes border-radius:4px for this same button; matching the selector
   here lets this rule win the cascade and pill-round it like every other
   .btn. */
.btn-cello-outline.application-button {
  border-radius: 999px;
}

/* Login/Register — a rounded account-icon button (brand green) instead of
   a text pill, replacing the old #btnShowLoginModalAlter.application-button
   blue rectangle in home.css. header.php now gives this link its own
   `account-icon-btn` class instead of `btn`/`application-button`/
   `btn-primary-contrast`, so none of those legacy rules match it any more. */
.account-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background-color: var(--green-500);
  color: #fff;
  font-size: 16px;
  transition: background-color var(--duration-base) var(--ease);
}

.account-icon-btn:hover,
.account-icon-btn:focus {
  color: #fff;
  background-color: var(--green-600);
}

/* .rd-navbar-btn-wrap is a plain (non-flex) block, so its two link children
   — .application-button (inline-block, sized by its text/line-height) and
   .account-icon-btn (inline-flex, just an icon, no text baseline) — were
   laying out via inline baseline alignment, which put the icon circle a few
   pixels higher than the pill and the rest of the nav row. Make it a real
   flex row so both children align on the same center line. */
.rd-navbar-corporate-light.rd-navbar-static .rd-navbar-btn-wrap {
  display: flex;
  align-items: center;
}

/* Mobile flyout (.rd-navbar-fixed): move Application/Login to the bottom of
   the menu instead of the top. Desktop's row-reverse trick (above, in
   .rd-navbar-corporate-light.rd-navbar-static .rd-navbar-nav-inner) relies
   on .rd-navbar-btn-wrap coming before the .rd-navbar-nav <ul> in the HTML,
   so this reorders visually via flex `order` for the mobile context only,
   rather than touching that HTML order. */
.rd-navbar-fixed .rd-navbar-nav-inner {
  display: flex;
  flex-direction: column;
}

.rd-navbar-fixed .rd-navbar-nav-inner > .rd-navbar-nav {
  order: 1;
}

.rd-navbar-fixed .rd-navbar-nav-inner > .rd-navbar-btn-wrap {
  order: 2;
}

html .btn-primary-contrast,
html .btn-primary-contrast:active,
html .btn-primary-contrast.active,
html .btn-primary-contrast:active:focus,
html .btn-primary-contrast.active:focus,
html .btn-primary-contrast:focus:active,
html .btn-primary-contrast:focus {
  color: #fff;
  background-color: var(--ink-700);
  border-color: var(--ink-700);
}

.open > html .btn-primary-contrast.dropdown-toggle,
html .btn-primary-contrast:hover {
  color: #fff;
  background-color: var(--ink-900);
  border-color: var(--ink-900);
}

/* ---------- BONDS BY STATE MEGAMENU ---------- */

/* style.css already ships full `.rd-navbar-megamenu` table-column layout
   and RD Navbar's JS (script.js core.min.js `createNav`) already toggles
   `.rd-navbar-megamenu` open/closed identically to `.rd-navbar-dropdown` —
   display.php picks the megamenu wrapper class whenever a submenu has
   `list`-type children (the states A-I/J-N/O-Z groups), so no JS changes
   were needed here, only brand colors/type and one structural fix below. */

.rd-navbar-megamenu {
  border-top: 2px solid var(--blue-500);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-ambient);
  background: var(--surface-0);
}

.rd-navbar-megamenu > li + li {
  border-left: 1px solid var(--border);
}

/* Three ~17-20-item columns run ~850px tall — taller than the viewport on
   most laptops (measured: overflows below the fold at 1366x768, and even at
   1600x1000 with only ~40px to spare). style.css never caps the panel's
   height, so states past the fold were simply unreachable — scrolling the
   page to reach them loses the hover that keeps the panel open.
   `overflow`/`max-height` are no-ops on `display: table`/`table-cell` boxes
   in every browser (the megamenu and its columns), so the clamp has to go
   on `.rd-navbar-list` — the plain `<ul>` of state links inside each
   column — leaving the "A-I"/"J-N"/"O-Z" header pinned above its own
   independently scrolling column. 300px = 225px (the list's measured `top`
   in the default, non-stuck desktop state — the largest it gets, since the
   stuck/scrolled `.rd-navbar--is-stuck` nav is shorter and starts it
   higher, leaving more room, not less) + 50px (the column's own bottom
   padding, which sits below the list and still counts toward the panel's
   total height) + a margin, so the whole panel clears the viewport bottom
   in both nav states, not just the list itself. */
.rd-navbar-static .rd-navbar-megamenu .rd-navbar-list {
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  overflow-x: hidden;
}

.rd-navbar-static .rd-navbar-megamenu .rd-navbar-list::-webkit-scrollbar {
  width: 6px;
}

.rd-navbar-static .rd-navbar-megamenu .rd-navbar-list::-webkit-scrollbar-track {
  background: transparent;
}

.rd-navbar-static .rd-navbar-megamenu .rd-navbar-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

/* "List of All States" is always the first child ahead of the three
   `list`-type range columns (see FrontendMenuCell::_generateMenu /
   _generateStateVars) — rendered as a full-width bar above the columns via
   `table-caption` instead of becoming a lopsided fourth table-cell column
   next to A-I / J-N / O-Z. Desktop (`.rd-navbar-static`) only: on mobile
   (`.rd-navbar-fixed`) the megamenu is already a plain stacked accordion —
   without this scope, `table-caption`'s shrink-to-fit sizing collapses the
   link's text into single-word-wide lines. */
.rd-navbar-static .rd-navbar-megamenu > li:first-child {
  display: table-caption;
  caption-side: top;
  padding: 16px 30px 14px !important;
  border-bottom: 1px solid var(--border);
  background: var(--surface-50);
}

.rd-navbar-megamenu > li:first-child > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--blue-500);
}

.rd-navbar-megamenu > li:first-child > a:after {
  font-family: 'FontAwesome';
  content: '\f105';
  font-size: 15px;
}

.rd-megamenu-header {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate-500);
}

.rd-navbar-megamenu .rd-navbar-list > li > a {
  color: var(--ink-700);
  font-family: var(--font-body);
}

.rd-navbar-megamenu .rd-navbar-list > li > a:before {
  color: var(--blue-500);
}

.rd-navbar-megamenu .rd-navbar-list > li > a:hover {
  color: var(--blue-500);
}

/* ---------- FOOTER ---------- */

.bg-cello {
  background-color: var(--ink-900);
}

.bg-cello a:hover,
.bg-cello a:focus {
  color: var(--green-500);
}

.list-marked-variant-2 > li > a:before {
  color: var(--green-500);
}

.page .icon-primary {
  color: var(--green-500);
}

.page a.icon-primary,
.page a.icon-primary:active,
.page a.icon-primary:focus {
  color: var(--green-500);
}

.page a.icon-blue-bayoux,
.page a.icon-blue-bayoux:focus,
.page a.icon-blue-bayoux:active {
  color: #fff;
  background-color: var(--ink-700);
}

.page a.icon-blue-bayoux:hover {
  color: #fff;
  background-color: var(--green-600);
}

.page .text-kashmir-blue {
  color: var(--slate-300);
}

.page a.text-kashmir-blue:hover,
.page a.text-kashmir-blue:focus {
  color: #fff;
}

/* ---------- AUTH MODALS (login / roles) ---------- */

.modal-content {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: var(--blue-500);
}

.btn-primary {
  color: #fff;
  background-color: var(--blue-500);
  border-color: var(--blue-500);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.open > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--blue-800);
  border-color: var(--blue-800);
}

.btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus,
.btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus,
fieldset[disabled] .btn-primary:hover,
fieldset[disabled] .btn-primary:focus,
fieldset[disabled] .btn-primary.focus {
  background-color: var(--blue-500);
  border-color: var(--blue-500);
}