/* ==========================================================================
   Titan America Brokers — Credentials & Verification
   Additive stylesheet. Does not modify or override existing site rules.
   Link this on EVERY page so the nav button styles apply site-wide:
     <link rel="stylesheet" href="assets/css/credentials.css">
   ========================================================================== */

:root {
  --v-green: #167a4a;
  --v-green-hover: #0f6039;
  --v-bg: #080808;
  --v-surface: #101010;
  --v-surface-2: #141414;
  --v-line: #232323;
  --v-line-strong: #2e2e2e;
  --v-text: #a8a8a8;
  --v-text-strong: #ffffff;
  --v-silver: #d4d4d4;
}

/* ------------------------------------------------ nav: verify button ---- */
.btn-verify {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--v-green);
  color: #fff;
  border: 1px solid var(--v-green);
  border-radius: 6px;
  padding: .7rem 1.15rem;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-verify:hover,
.btn-verify:focus-visible {
  background: var(--v-green-hover);
  border-color: var(--v-green-hover);
  color: #fff;
}
.btn-verify:active { transform: translateY(1px); }
.btn-verify svg { width: 15px; height: 15px; flex: none; }

/* sits to the LEFT of the existing Get a Quote button */
.nav-actions { display: inline-flex; align-items: center; gap: .6rem; }

@media (max-width: 900px) {
  .btn-verify { width: 100%; padding: .85rem 1.15rem; font-size: .95rem; }
  .nav-actions { flex-direction: column; align-items: stretch; width: 100%; gap: .55rem; }
}

/* --------------------------------------------------------- page shell ---- */
.v-page { background: var(--v-bg); color: var(--v-text); }
.v-wrap { width: min(100% - 2.5rem, 1120px); margin-inline: auto; }
.v-section { padding: clamp(3rem, 6vw, 4.75rem) 0; }
.v-section + .v-section { border-top: 1px solid var(--v-line); }

.v-page h1, .v-page h2, .v-page h3 { color: var(--v-text-strong); margin: 0 0 .6rem; line-height: 1.12; }
.v-page h1 { font-size: clamp(2rem, 4.6vw, 3rem); letter-spacing: -.02em; }
.v-page h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); letter-spacing: -.015em; }
.v-page h3 { font-size: 1.08rem; letter-spacing: -.005em; }
.v-page p { margin: 0 0 1rem; }
.v-lead { font-size: 1.06rem; max-width: 68ch; }
.v-eyebrow {
  font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--v-silver); margin: 0 0 1rem;
}

/* ---------------------------------------------------------------- hero --- */
.v-hero {
  position: relative;
  padding: clamp(3.25rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 3.75rem);
  border-bottom: 1px solid var(--v-line);
  /* Optional image: drop assets/img/verification-hero.webp in place and it
     layers under the gradient. If the file is absent the gradient still renders. */
  background-color: var(--v-bg);
 background-image:
  linear-gradient(
    90deg,
    rgba(8, 8, 8, .94) 0%,
    rgba(8, 8, 8, .82) 48%,
    rgba(8, 8, 8, .42) 100%
  ),
  url("../img/verification-hero.webp");
  background-size: cover, contain;
  background-position: center, right center;
  background-repeat: no-repeat;
}
.v-hero__sub { color: var(--v-silver); font-size: 1.1rem; margin-bottom: 1.5rem; }

.v-idline {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  margin: 1.75rem 0 .85rem; padding: 0; list-style: none;
}
.v-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid var(--v-line-strong); border-radius: 999px;
  padding: .45rem .9rem; font-size: .82rem; letter-spacing: .04em;
  color: var(--v-silver); background: var(--v-surface);
}
.v-chip--green { border-color: rgba(22, 122, 74, .55); color: #7fd0a6; }
.v-chip b { color: #fff; font-weight: 600; letter-spacing: .06em; }

.v-reviewed { font-size: .82rem; color: #6f6f6f; margin: 0; }

/* ---------------------------------------------------------- info table --- */
.v-info {
  border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-surface);
  overflow: hidden;
}
.v-info dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.v-info div {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.05rem 1.35rem; border-bottom: 1px solid var(--v-line);
}
.v-info div:nth-child(odd) { border-right: 1px solid var(--v-line); }
.v-info dt {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7a7a7a;
}
.v-info dd { margin: 0; color: #fff; font-size: 1rem; }
.v-info dd a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--v-line-strong); }
.v-info dd a:hover { border-bottom-color: var(--v-silver); }

/* --------------------------------------------------------------- cards --- */
.v-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.v-grid--2 { grid-template-columns: repeat(2, 1fr); }
.v-card {
  display: flex; flex-direction: column;
  background: var(--v-surface); border: 1px solid var(--v-line); border-radius: 10px;
  padding: 1.6rem 1.5rem;
  transition: border-color .2s ease, background .2s ease;
}
.v-card:hover { border-color: var(--v-line-strong); background: var(--v-surface-2); }
.v-card__icon {
  width: 38px; height: 38px; border-radius: 8px; display: grid; place-items: center;
  border: 1px solid var(--v-line-strong); color: var(--v-silver); margin-bottom: 1.1rem;
}
.v-card__icon svg { width: 18px; height: 18px; }
.v-card p { font-size: .95rem; }
.v-card .v-note {
  font-size: .84rem; color: #7f7f7f; border-left: 2px solid var(--v-line-strong);
  padding-left: .75rem; margin: 0 0 1.25rem;
}
.v-card__foot { margin-top: auto; }

.v-tag {
  display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: #8a8a8a; border: 1px solid var(--v-line-strong);
  border-radius: 4px; padding: .28rem .5rem; margin-bottom: .9rem;
}

/* ------------------------------------------------------------- buttons --- */
.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: 6px; padding: .78rem 1.2rem; font-size: .92rem; font-weight: 600;
  line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.v-btn:active { transform: translateY(1px); }
.v-btn svg { width: 15px; height: 15px; flex: none; }
.v-btn--green { background: var(--v-green); color: #fff; border-color: var(--v-green); }
.v-btn--green:hover { background: var(--v-green-hover); border-color: var(--v-green-hover); color: #fff; }
.v-btn--light { background: #fff; color: #080808; border-color: #fff; }
.v-btn--light:hover { background: var(--v-silver); border-color: var(--v-silver); color: #080808; }
.v-btn--outline { background: transparent; color: #fff; border-color: var(--v-line-strong); }
.v-btn--outline:hover { border-color: var(--v-silver); color: #fff; }
.v-btn--block { width: 100%; }
.v-btnrow { display: flex; flex-wrap: wrap; gap: .65rem; }

/* ----------------------------------------------------------- pdf block --- */
.v-doc {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center;
  background: var(--v-surface); border: 1px solid var(--v-line); border-radius: 10px;
  padding: 1.6rem 1.65rem;
}
.v-doc__badge {
  width: 54px; height: 66px; border: 1px solid var(--v-line-strong); border-radius: 6px;
  display: grid; place-items: center; color: var(--v-silver); font-size: .66rem;
  font-weight: 700; letter-spacing: .1em; background: #0c0c0c;
}
.v-doc h3 { margin-bottom: .35rem; }
.v-doc p { margin: 0; font-size: .93rem; }
.v-doc__meta { font-size: .76rem; color: #6f6f6f; letter-spacing: .08em; text-transform: uppercase; margin-top: .5rem !important; }

/* ------------------------------------------------------------- request --- */
.v-reqlist { columns: 2; column-gap: 2.5rem; list-style: none; padding: 0; margin: 0 0 1.75rem; }
.v-reqlist li {
  position: relative; padding-left: 1.35rem; margin-bottom: .6rem;
  break-inside: avoid; font-size: .96rem;
}
.v-reqlist li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 6px; height: 6px; border-radius: 1px; background: var(--v-green);
}

/* ------------------------------------------------------------- contact --- */
.v-contact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.v-contact a {
  display: flex; flex-direction: column; gap: .3rem;
  border: 1px solid var(--v-line); border-radius: 10px; background: var(--v-surface);
  padding: 1.1rem 1.2rem; text-decoration: none; color: #fff;
  transition: border-color .2s ease, background .2s ease;
}
.v-contact a:hover { border-color: var(--v-line-strong); background: var(--v-surface-2); }
.v-contact span {
  font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #7a7a7a;
}
.v-contact b { font-weight: 500; font-size: .97rem; word-break: break-word; }

/* ---------------------------------------------------------- disclaimer --- */
.v-disclaimer {
  border: 1px solid var(--v-line); border-radius: 10px; background: #0c0c0c;
  padding: 1.25rem 1.4rem; font-size: .88rem; color: #7f7f7f; margin: 0;
}

/* --------------------------------------------------- homepage trust line -- */
.v-trustline {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .85rem;
  font-size: .84rem; color: #8a8a8a; letter-spacing: .05em; margin: 1rem 0 0;
}
.v-trustline b { color: #d4d4d4; font-weight: 600; }
.v-trustline a {
  color: #7fd0a6; text-decoration: none; border-bottom: 1px solid rgba(127, 208, 166, .35);
}
.v-trustline a:hover { border-bottom-color: #7fd0a6; }

/* --------------------------------------------------------------- focus --- */
.v-page a:focus-visible, .btn-verify:focus-visible, .v-btn:focus-visible {
  outline: 2px solid #7fd0a6; outline-offset: 3px; border-radius: 4px;
}

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 900px) {
  .v-grid, .v-grid--2 { grid-template-columns: 1fr; }
  .v-contact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .v-info dl { grid-template-columns: 1fr; }
  .v-info div:nth-child(odd) { border-right: none; }
  .v-doc { grid-template-columns: 1fr; gap: 1.1rem; }
  .v-doc__badge { display: none; }
  .v-reqlist { columns: 1; }
  .v-contact { grid-template-columns: 1fr; }
  .v-btnrow .v-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-verify, .v-btn, .v-card, .v-contact a { transition: none; }
}

/* ==========================================================================
   FALLBACK HEADER / FOOTER
   These only style the temporary header and footer inside verification.html
   so the page is presentable before you paste in the site's real ones.
   Once you replace those two blocks with the header/footer from index.html,
   this entire section can be deleted.
   ========================================================================== */
.v-header {
  position: sticky; top: 0; z-index: 50; background: rgba(8, 8, 8, .96);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--v-line);
}
.v-header__inner { display: flex; align-items: center; gap: 1.5rem; height: 76px; }
.v-header img { height: 40px; width: auto; }
.v-nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.v-nav a { color: var(--v-text); font-size: .93rem; text-decoration: none; }
.v-nav a:hover, .v-nav a[aria-current="page"] { color: #fff; }
.v-navtoggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--v-line-strong);
  border-radius: 6px; width: 44px; height: 44px; color: #fff; cursor: pointer; font-size: 1.1rem;
}
.v-footer { background: #050505; border-top: 1px solid var(--v-line); padding: 3rem 0 2rem; }
.v-footer img { height: 46px; width: auto; margin-bottom: 1rem; }
.v-footer p { font-size: .88rem; color: #6f6f6f; max-width: 60ch; }
.v-footer__links { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 1.5rem 0; font-size: .9rem; }
.v-footer__links a { color: var(--v-text); text-decoration: none; }
.v-footer__links a:hover { color: #fff; }
.v-footer__bottom {
  border-top: 1px solid var(--v-line); padding-top: 1.4rem; margin-top: 1.4rem;
  font-size: .82rem; color: #5f5f5f; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: space-between;
}
.v-footer__ids { letter-spacing: .08em; color: #8a8a8a; }
@media (max-width: 900px) {
  .v-nav {
    position: fixed; inset: 76px 0 auto; flex-direction: column; align-items: stretch; gap: 0;
    background: #0a0a0a; border-bottom: 1px solid var(--v-line); padding: .5rem 1.25rem 1.4rem;
    transform: translateY(-130%); transition: transform .26s ease; max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .v-nav.is-open { transform: none; }
  .v-nav > a { padding: .9rem 0; border-bottom: 1px solid var(--v-line); }
  .v-navtoggle { display: block; }
  .v-nav .nav-actions { margin-top: 1rem; }
}

/* screen-reader-only text (used on external links) */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Show the correct navigation actions for each screen size */
@media (min-width: 901px) {
  .nav .nav-actions {
    display: none;
  }
}

@media (max-width: 900px) {
  .header .nav-actions.desktop-cta {
    display: none;
  }

  .nav .nav-actions {
    display: flex;
  }
}

/* ==========================================================================
   APPEND THIS TO THE END OF assets/css/credentials.css
   (that file is already linked on contact.html — no other CSS file changes)
   Social channels section — Contact page
   ========================================================================== */

.tab-social {
  list-style: none;
  padding: 0;
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.tab-social a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  padding: 20px 18px;
  background: #101010;
  border: 1px solid #232323;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.tab-social a:hover {
  background: #141414;
  border-color: rgba(22, 122, 74, .55);
  transform: translateY(-2px);
}

.tab-social a:focus-visible {
  outline: 2px solid #7fd0a6;
  outline-offset: 3px;
  border-color: rgba(22, 122, 74, .55);
}

.tab-social a:hover .tab-social__icon,
.tab-social a:focus-visible .tab-social__icon {
  color: #7fd0a6;
  border-color: rgba(22, 122, 74, .55);
}

.tab-social__icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid #2e2e2e;
  border-radius: 8px;
  color: #a8a8a8;
  transition: color .18s ease, border-color .18s ease;
}

.tab-social__icon svg,
.tab-social a svg,
.tab-social li svg {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  min-width: 0;
  display: block;
  flex: none;
}

.tab-social__label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7a7a7a;
  display: block;
  margin-bottom: 4px;
}

.tab-social__handle {
  font-size: .95rem;
  font-weight: 500;
  color: #fff;
  display: block;
  word-break: break-word;
  line-height: 1.35;
}

/* direct contact line under the cards */
.tab-direct {
  list-style: none;
  padding: 20px 0 0;
  margin: 28px 0 0;
  border-top: 1px solid #232323;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
}

.tab-direct li { display: flex; flex-direction: column; gap: 3px; }

.tab-direct span {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7a7a7a;
}

.tab-direct a {
  color: #fff;
  font-size: .97rem;
  text-decoration: none;
  border-bottom: 1px solid #2e2e2e;
  padding-bottom: 1px;
  transition: border-color .18s ease;
}

.tab-direct a:hover { border-bottom-color: #7fd0a6; }
.tab-direct a:focus-visible { outline: 2px solid #7fd0a6; outline-offset: 3px; }

@media (max-width: 1023px) {
  .tab-social { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .tab-social { grid-template-columns: 1fr; }
  .tab-direct { gap: 16px 0; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .tab-social a { transition: none; }
  .tab-social a:hover { transform: none; }
}