/* Direction B — the public site.

   The layout and components now come from the shared design system
   (_content/Doctory.Web.Shared/css/doctory-site.css), which is built on
   tokens.css. What is left here is only what makes B a *direction*: the page
   surface it sits on, and how a link behaves.

   There is deliberately no palette in this file. The colours are the tokens'. */

.theme-b {
  margin: 0;
  min-height: 100vh;
  background: var(--surface-page);
  font-family: var(--font-body);
  color: var(--text-strong);
}

.theme-b,
.theme-b * { box-sizing: border-box; }

.theme-b a { color: var(--text-link); text-decoration: none; }
.theme-b a:hover { color: var(--text-link-hover); }

/* Bootstrap ships with the Directory for its grid helpers on older pages and
   sets its own control styling. The design system's controls win inside a
   Direction B page. */
.theme-b .ds-input,
.theme-b .ds-select,
.theme-b .ds-textarea { font-family: var(--font-display); }

/* The platform's three hero images are shared by B and the two skins that use
   its markup. Colour and contrast of the veil are adjusted by each skin. */
.ds-hero--with-media { position:relative; overflow:hidden; isolation:isolate; }
.ds-hero__media,
.ds-hero__veil { position:absolute; inset:0; }
.ds-hero__media { z-index:-2; }
.ds-hero__media img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.04); animation:directoryHeroCycle 18s infinite;
}
.ds-hero__media img:nth-child(2) { animation-delay:6s; }
.ds-hero__media img:nth-child(3) { animation-delay:12s; }
.ds-hero__media img:only-child { opacity:1; animation:none; }
.ds-hero__veil {
  z-index:-1;
  background:linear-gradient(90deg,rgba(8,24,51,.92),rgba(8,24,51,.68));
}
.ds-hero--with-media .ds-hero__content,
.ds-hero--with-media .ds-hero__stats { position:relative; z-index:1; }

@media (max-width: 960px) {
  .theme-b { --gutter-web: 20px; --section-y: 48px; }
}