/* ==========================================================================
   Saint Society Scrubs - Base layer
   Fonts, element defaults, typographic classes and the small set of helpers
   the whole theme shares. Nothing here is page specific.

   Ported from the React build. Tailwind Preflight is gone, so this file now
   carries the reset itself rather than layering on top of one.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts, self hosted. No request ever leaves the server for type.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Cross document view transitions

   The concept is a single page app, so navigation there is instant. WordPress
   does real page loads and will feel different: this is the single biggest
   perceptual difference in the whole port. This recovers most of it in
   Chromium and Safari, and is simply ignored everywhere else.

   Deliberately NOT a JavaScript router bolted onto WordPress. That is a large
   amount of fragile work to partially recover something one line mostly
   solves.
   -------------------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: var(--ease-luxe);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  /* clip, not hidden. The closed drawers sit past the right edge on their
     transform and would otherwise widen the document. overflow: hidden would
     also make this a scroll container and break the sticky shop toolbar;
     clip does not. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--color-onyx);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
fieldset {
  margin: 0;
}

fieldset {
  padding: 0;
  border: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

::selection {
  background: var(--color-accent-solid);
  color: var(--color-ink);
}

/* --------------------------------------------------------------------------
   Focus
   Visible, in the accent, and never removed. Keyboard users get a better ring
   than the browser default rather than none at all.
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 1px solid var(--color-gold);
  outline-offset: 4px;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: 0.875rem 1.75rem;
  background: var(--color-gold);
  color: var(--color-onyx);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  transition: transform var(--duration-quick) var(--ease-luxe);
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

/* --------------------------------------------------------------------------
   Typography classes
   -------------------------------------------------------------------------- */
.font-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: 1.04;
}

.t-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: var(--tracking-display);
}

.t-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: var(--tracking-display);
}

.t-title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: var(--tracking-display);
}

.t-heading {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: 400;
  line-height: 1.28;
}

.t-lead {
  font-size: var(--text-lead);
  font-weight: 300;
  line-height: 1.72;
  color: var(--color-ink-muted);
}

.t-small {
  font-size: var(--text-small);
}

/* The small uppercase label that does most of the structural work on a
   luxury layout. Wide tracking is mandatory, not decorative. */
.eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  line-height: 1;
  color: var(--color-ink-muted);
}

.eyebrow-gold {
  color: var(--color-gold);
}

/* Eyebrow with the short accent rule in front of it */
.eyebrow-rule {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
}

.eyebrow-rule::before {
  content: '';
  width: 2.25rem;
  height: 1px;
  background: var(--color-gold);
  flex: none;
}

/* Brand wordmark treatment. Serif caps, very wide tracking, the descriptor
   set smaller beneath. */
.wordmark {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark);
  font-weight: 400;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   The foil
   The accent as a metal, not a flat fill. Clipped to the glyphs so it only
   ever appears as a light response on type or a hairline. .foil is the brand
   accent (burgundy). .foil-gold is the preserved metallic gold, used only by
   the logo lockup so the logo stays gold after the rebrand.
   -------------------------------------------------------------------------- */
.foil {
  background-image: var(--gradient-foil);
  background-size: 220% 100%;
  background-position: 12% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.foil-gold {
  background-image: var(--gradient-foil-gold);
  background-size: 220% 100%;
  background-position: 12% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.foil-sweep {
  animation: foil-sweep 7s var(--ease-drape) infinite;
}

@keyframes foil-sweep {
  0%,
  100% {
    background-position: 8% 0;
  }
  50% {
    background-position: 92% 0;
  }
}

.rule-gold {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-gold-deep) 18%,
    var(--color-gold) 50%,
    var(--color-gold-deep) 82%,
    transparent
  );
}

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--color-rule);
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--spacing-shell);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}

.shell-narrow {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}

.readable {
  max-width: var(--spacing-readable);
}

.section {
  padding-block: var(--spacing-section);
}

.section-tight {
  padding-block: var(--spacing-section-tight);
}

/* --------------------------------------------------------------------------
   Screen reader only
   -------------------------------------------------------------------------- */
.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Scrollbar. Thin, warm, so it does not break the dark surface.
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: var(--color-onyx-sunken);
}

::-webkit-scrollbar-thumb {
  background: var(--color-espresso);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-deep);
}

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* --------------------------------------------------------------------------
   Reduced motion
   Global kill switch. Framer Motion used to handle its own half of this
   through useReducedMotion. Everything is CSS now, so this covers all of it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}