﻿/* Link Guard customer portal */
:root {
  --bg-page: #fafaf8;
  --bg-subtle: #f1f3ef;
  --text-primary: #23382e;
  --text-secondary: #66716a;
  --text-muted: #737f75;
  --border-light: #e1e5de;
  --accent-terracotta: #28533e;
  --accent-terracotta-hover: #193d2c;
  --accent-terracotta-subtle: #edf2e9;
  --accent-terracotta-border: #d4dfcd;
  --accent-gold: #28533e;
  --sidebar-bg: #152d24;
  --sidebar-border: #2c4135;
  --sidebar-active-bg: #2c4738;
  --font-heading: 'DM Sans', sans-serif;
}
.sidebar { width: 228px; padding: 26px 18px; }
.brand { padding: 0 8px 26px; margin-bottom: 24px; }
.brand-logo-img { max-width: 158px; padding: 7px; border-radius: 3px; box-shadow: none; }
.nav-item { font-size: .82rem; border-radius: 4px; padding: 12px; }
.nav-item.active { color: #e6eddf; background: #2c4738; }
.nav-item.active::before { display: none; }
.mobile-brand-link { display: none; }
.main-wrapper { min-width: 0; }
.topbar { height: 72px; padding: 0 40px; background: #fff; box-shadow: none; }
.quick-search-box { background: transparent; border: 0; }
.header-support-pill { background: transparent; border: 0; border-radius: 0; padding: 0; color: #46564a; font-size: .76rem; }
.content-scroll { padding: 52px 48px 28px; }
#view-dashboard { max-width: 1060px; margin: 0 auto; }
.tracking-page-heading { margin-bottom: 35px; padding-bottom: 26px; border-bottom: 2px solid #233e2e; }
.tracking-page-heading > p { font-size: .65rem; font-weight: 600; letter-spacing: .1em; color: #768172; margin-bottom: 12px; }
.tracking-page-heading h1 { font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.15; }
.track-hero { display: block; padding: 0 0 42px; }
.track-hero-inner { max-width: 710px; width: 100%; text-align: left; }
.lookup-description { color: #66716a; font-size: .92rem; margin-bottom: 28px; }
.tracking-label { display: block; font-size: .78rem; font-weight: 600; margin-bottom: 9px; }
.track-input-group { background: #fff; border: 1px solid #a9b4a5; border-radius: 4px; box-shadow: none; padding: 5px 5px 5px 14px; gap: 10px; }
.track-input-group:focus-within { border-color: #28533e; box-shadow: 0 0 0 2px #dce7d5; }
.track-input { font-size: .95rem; font-weight: 400; padding: 12px 0; }
.track-input-icon { width: 19px; color: #778472; }
.track-hero .btn-track-submit { border-radius: 3px; background: #28533e; color: #fff; box-shadow: none; padding: 14px 22px; font-size: .8rem; flex-direction: row; }
.track-hero .btn-track-submit:hover { background: #193d2c; }
.btn-track-submit svg { display: none; }
.tracking-hint { color: #7c8579; font-size: .73rem; margin-top: 11px; }
.tracking-help { display: grid; grid-template-columns: 1fr 1.75fr; gap: 40px; padding: 30px 0 40px; border-top: 1px solid #dce2d7; }
.help-heading h2 { font-size: 1.1rem; font-weight: 500; margin-bottom: 8px; letter-spacing: -.02em; }
.help-heading > p { color: #7b8477; font-size: .77rem; line-height: 1.7; }
.help-questions details { border-bottom: 1px solid #e1e5dc; }
.help-questions details:first-child { border-top: 1px solid #e1e5dc; }
.help-questions summary { position: relative; padding: 17px 28px 17px 0; cursor: pointer; list-style: none; font-size: .81rem; font-weight: 500; }
.help-questions summary::-webkit-details-marker { display: none; }
.help-questions summary::after { content: '+'; position: absolute; right: 2px; color: #6a7c61; font-size: 1rem; font-weight: 400; }
.help-questions details[open] summary::after { content: '\2212'; }
.help-questions details p { padding: 0 28px 19px 0; color: #6c7865; font-size: .78rem; line-height: 1.8; }
.tracking-page-footer { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; border-top: 1px solid #e1e5dc; padding-top: 18px; color: #8b9386; font-size: .66rem; }
.tracking-contact { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.tracking-contact a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.shipment-support-email { display: block; margin-top: 6px; color: #132238; font-size: .8rem; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; }
.user-recent-section { margin-bottom: 32px; }
.sidebar .user-profile { gap: 10px; padding: 18px 6px 3px; border-top: 1px solid #cfe1d01f; align-items: center; }
.footer-brand-mark { display: grid; place-items: center; flex: 0 0 30px; height: 34px; color: #a9bc99; }
.sidebar .user-name { font-size: .7rem; font-weight: 500; color: #d7e2d7; }
.sidebar .user-role { color: #8fa99b; font-size: .59rem; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #84a272; outline-offset: 4px; }
@media (max-width: 1100px) { .content-scroll { padding: 40px 30px 24px; } .sidebar { width: 205px; } .tracking-help { gap: 28px; } }
@media (max-width: 768px) {
  .sidebar { width: 260px; }
  .topbar { height: 64px; padding: 0 16px; }
  .mobile-brand-link { display: flex; }
  .header-support-pill { font-size: .66rem; }
  .header-support-pill .support-label { display: none; }
  .content-scroll { padding: 32px 20px 24px; }
  .tracking-page-heading { margin-bottom: 25px; padding-bottom: 22px; }
  .tracking-page-heading h1 { font-size: 2rem; }
  .lookup-description { font-size: .84rem; margin-bottom: 24px; }
  .track-input-group { flex-direction: row; flex-wrap: nowrap; gap: 7px; padding-left: 10px; }
  .track-input { min-width: 0; font-size: .82rem; }
  .track-hero .btn-track-submit { width: auto; margin: 0; padding: 13px 12px; font-size: .72rem; white-space: nowrap; }
  .track-input-icon { display: none; }
  .tracking-help { grid-template-columns: 1fr; gap: 22px; padding-top: 25px; }
  .track-hero { padding-bottom: 32px; }
  .tracking-page-footer { gap: 12px; font-size: .58rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
.track-hero .btn-track-submit, .track-hero .btn-track-submit:hover { color: #fff !important; border-color: #28533e; }
.sidebar .nav-item.active { border-color: #3e5945; }

/* Let the supplied logo sit directly on each navigation background. */
.sidebar .brand-logo-img {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  filter: grayscale(1) invert(1) contrast(1.3);
  mix-blend-mode: screen;
}
.mobile-brand-logo-img {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: multiply;
}
