/* =============================================================================================
   Timextender shell — components shared verbatim by docs and community so both read as
   timextender.com: header navigation, header label, buttons, bands, cards, footer.
   Platform files only position these; they don't restyle them.
   ============================================================================================= */

/* ---------- header navigation (white header, like timextender.com) ---------- */
.tx-suite { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.tx-suite li { margin: 0; padding: 0; list-style: none; }
.tx-suite__link {
  position: relative; display: inline-block; padding: 6px 0;
  font-family: var(--tx-font); font-size: var(--tx-size-nav); font-weight: 400; line-height: 1.6;
  color: var(--tx-ink) !important; text-decoration: none !important; white-space: nowrap;
  transition: color .15s;
}
.tx-suite__link:hover, .tx-suite__link:focus-visible { color: var(--tx-orange) !important; }
.tx-suite__link--active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px;
  background: var(--tx-orange);
}

/* ---------- buttons ---------- */
.tx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--tx-font); font-weight: 500; line-height: 1.15; text-decoration: none !important;
  border: 0; border-radius: var(--tx-radius); cursor: pointer; white-space: nowrap;
  transition: background-color .15s, box-shadow .15s;
}
.tx-btn--primary { background: var(--tx-orange); color: #fff !important; font-size: 16px; padding: 20px 25px; }
.tx-btn--primary:hover { background: var(--tx-orange-hover); }
.tx-btn--accent { background: var(--tx-dove); color: #fff !important; font-size: 14px; padding: 12px 15px; }
.tx-btn--accent:hover { background: var(--tx-dove-hover); }
.tx-btn--outline-light { background: transparent; color: #fff !important; font-size: 16px; padding: 19px 24px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.tx-btn--outline-light:hover { box-shadow: inset 0 0 0 1px #fff; background: rgba(255,255,255,.06); }
.tx-btn:focus-visible { outline: 2px solid var(--tx-orange); outline-offset: 2px; }

/* ---------- bands and cards ---------- */
.tx-band--crema { background: var(--tx-band-crema); }
.tx-band--dove  { background: var(--tx-band-dove); }
.tx-band--slate { background: var(--tx-slate); color: #fff; }
.tx-card { background: var(--tx-card); border-radius: var(--tx-radius-card); box-shadow: var(--tx-card-shadow); }

/* ---------- footer (as timextender.com: slate, white lockup, orange links) ---------- */
.tx-footer { background: var(--tx-slate); color: rgba(255,255,255,.75); font-family: var(--tx-font); }
.tx-footer__inner {
  max-width: var(--tx-container); margin: 0 auto; padding: 48px var(--tx-gutter) 40px;
  display: grid; grid-template-columns: auto 1fr; gap: 24px 64px; align-items: start;
}
.tx-footer__logo { display: block; width: 200px; height: auto; }
.tx-footer__cols { display: flex; flex-wrap: wrap; gap: 32px 64px; justify-content: flex-end; }
.tx-footer__col h4 { margin: 0 0 12px; font-size: 14px; font-weight: 500; color: #fff; letter-spacing: 0; }
.tx-footer__col ul { list-style: none; margin: 0; padding: 0; }
.tx-footer__col li { margin: 0 0 8px; }
.tx-footer__col a { color: rgba(255,255,255,.75) !important; font-size: 14px; text-decoration: none !important; }
.tx-footer__col a:hover { color: #fff !important; }
.tx-footer__legal {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.14); font-size: 14px;
}
.tx-footer__legal a { color: var(--tx-orange) !important; text-decoration: none !important; }
.tx-footer__legal a:hover { text-decoration: underline !important; }
.tx-footer__legal span { color: rgba(255,255,255,.6); margin-left: auto; }
@media (max-width: 760px) {
  .tx-footer__inner { grid-template-columns: 1fr; }
  .tx-footer__cols { justify-content: flex-start; }
  .tx-footer__legal span { margin-left: 0; }
}