/* teamfile.html */

/* hero: same layout, colors and entrance animation as www.teamfile.com */
#page-title.teamfile-hero { min-height: clamp(560px, 80vh, 880px); background: #15171c url(../../images/products/teamfile-hero.jpg) center 40% / cover no-repeat; }
#page-title.teamfile-hero .bg-overlay { background: linear-gradient(90deg, rgba(13, 15, 19, .92) 0%, rgba(13, 15, 19, .78) 45%, rgba(13, 15, 19, .45) 100%); }
.teamfile-hero .uo-hero-grid { justify-content: space-between; gap: 5vw; }
#page-title.teamfile-hero .tf-hero-eyebrow { display: inline-block; margin-bottom: 18px; font-size: 13px; font-weight: 600; letter-spacing: .3em; color: #f59e2e !important; }
#page-title.teamfile-hero h1 { margin-bottom: 22px; font-size: clamp(34px, 5.6vw, 76px); line-height: 1.15; letter-spacing: .04em; }
#page-title.teamfile-hero h1::after { display: none; }
#page-title.teamfile-hero .tf-hero-lead { max-width: 620px; font-size: clamp(14px, 1.5vw, 17px); line-height: 2; letter-spacing: .04em; word-break: auto-phrase; }
.teamfile-hero .tf-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.teamfile-hero .tf-hero-btn { display: inline-flex; align-items: center; padding: 15px 34px; font-size: 14px; font-weight: 700; letter-spacing: .1em; color: #15171c; background: #f59e2e; transition: background .2s; }
.teamfile-hero .tf-hero-btn:hover { color: #15171c; background: #ffb24f; }
.teamfile-hero .tf-hero-pkg { flex: none; width: clamp(220px, 26vw, 400px); height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .45)); }
.teamfile-hero .tf-hero-scroll { position: absolute; z-index: 2; left: 50%; bottom: 28px; width: 1px; height: 56px; background: rgba(255, 255, 255, .5); }

/* entrance: CSS only, so the hero text never depends on the template's scroll plugin to appear */
@keyframes tf-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.teamfile-hero .tf-rise { animation: tf-rise .9s ease both; }
.teamfile-hero .tf-rise-1 { animation-delay: .2s; }
.teamfile-hero .tf-rise-2 { animation-delay: .4s; }
.teamfile-hero .tf-rise-3 { animation-delay: .6s; }
.teamfile-hero .tf-rise-4 { animation-delay: .7s; }
.teamfile-hero .tf-rise-5 { animation-delay: .9s; }
@media (prefers-reduced-motion: reduce) { .teamfile-hero .tf-rise { animation: none; } }

/* table of contents: Polo page-menu kept in view while reading */
/* the site header stays fixed at 72px, so the menu sits just under it */
.teamfile-page section[id] { scroll-margin-top: 136px; }
.teamfile-page .page-menu { position: sticky; top: 72px; z-index: 30; }
.teamfile-page .page-menu .dropdown-menu { display: none; z-index: 20; }
.teamfile-page .page-menu li.dropdown > a { cursor: pointer; }
.teamfile-page .page-menu li.dropdown:hover > .dropdown-menu,
.teamfile-page .page-menu li.dropdown:focus-within > .dropdown-menu { display: block; }

.teamfile-page .table-compare { min-width: 720px; }
.teamfile-page .table-compare th { white-space: normal; }
/* CTA band in the TeamFile orange; white text is unreadable on it, so text is dark as on www.teamfile.com */
.teamfile-page .call-to-action.call-to-action-colored { background-color: #f59e2e; }
.teamfile-page .call-to-action.call-to-action-colored p { color: #15171c; }
.teamfile-page .call-to-action a.btn.btn-light { text-transform: none; color: #fff !important; background: #15171c !important; border-color: #15171c !important; }
.teamfile-page .call-to-action a.btn.btn-light:hover { background: #2a2e37 !important; border-color: #2a2e37 !important; }
/* same treatment as the www.teamfile.com footer: white on the dark background */
.teamfile-page .tf-footer-logo { width: auto; height: 36px; filter: brightness(0) invert(1); }

@media (max-width: 991.98px) {
  .teamfile-hero .uo-hero-grid { flex-direction: column; align-items: flex-start; gap: 36px; padding: 48px 0 72px; }
  .teamfile-hero .tf-hero-pkg { width: 200px; align-self: center; }
  .teamfile-hero .tf-hero-scroll { display: none; }
  /* phones and tablets: one panel listing every section, no nested taps */
  .teamfile-page .page-menu .menu-title { display: block; float: left; font-size: 13px; font-weight: 500; line-height: 50px; color: #3c4043; }
  .teamfile-page .page-menu nav { width: min(320px, calc(100vw - 32px)); max-height: calc(100vh - 140px); overflow-y: auto; }
  .teamfile-page .page-menu nav > ul > li.dropdown:before { display: none; }
  .teamfile-page .page-menu nav > ul > li.dropdown > a { font-weight: 700; cursor: default; }
  .teamfile-page .page-menu nav > ul > li .dropdown-menu { display: block; position: static; width: 100%; min-width: 0; margin: 0 0 8px; padding: 0 0 0 8px; border: 0 !important; box-shadow: none; }
  .teamfile-page .page-menu nav > ul > li .dropdown-menu > li a { white-space: normal; padding: 6px 10px; }
}

/* phones: the site header scrolls away (amalance.css), so the menu goes to the very top */
@media (max-width: 767px) {
  .teamfile-page section[id] { scroll-margin-top: 64px; }
  .teamfile-page .page-menu { top: 0; }
  .teamfile-page .page-menu nav { max-height: calc(100vh - 64px); }
}

@media (max-width: 575px) {
  #page-title.teamfile-hero { min-height: 0; }
  .teamfile-hero .uo-hero-grid { gap: 28px; padding: 40px 0 56px; }
  .teamfile-hero .tf-hero-pkg { width: 150px; }
  .teamfile-hero .tf-hero-actions .tf-hero-btn { flex: 1 1 100%; justify-content: center; }
}