/*
 * Theme overrides — hand-written, loaded after the compiled Vite stylesheet.
 *
 * styles-DM8jWi7n.css is a build artifact from the original redesign and is
 * regenerated wholesale, so nothing hand-edited can live in it. Anything we
 * change after the port goes here instead.
 */

/* ---------------------------------------------------------------------------
 * Desktop hero.
 *
 * The hero loop (hero-loop-*.mp4/webm) is a 1024x1820 phone video — 9:16. The
 * desktop hero is roughly 2:1, so `object-fit: cover` can only ever show about
 * a quarter of the frame's height, and every horizontal slice of those 12
 * seconds puts the practitioner's face beside the patient's bare feet. No
 * object-position value avoids it; the footage is a foot treatment throughout.
 *
 * So desktop gets a real landscape photograph instead. Mobile keeps the video,
 * where a portrait container shows the whole frame and it reads correctly.
 * Replace this block with the video again if landscape footage ever lands.
 * ------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .sc-hero-video {
    background-color: var(--navy);
    background-image: url(reception-WMc9APXr.jpg);
    background-size: cover;
    background-position: center 22%;
    background-repeat: no-repeat;
  }

  /* The <video> stays in the markup (that lives in the WordPress page body,
     not the theme) and is simply not shown at this width. preload="metadata"
     means hiding it costs a few KB, not the 1.3 MB of video. */
  .sc-hero-media {
    display: none;
  }

  /* Slightly deeper scrim: the photo is brighter than the video was, and the
     headline is white. */
  .sc-hero-overlay {
    background: linear-gradient(180deg, rgba(10, 22, 40, .5), rgba(10, 22, 40, .76));
  }
}

/* ---------------------------------------------------------------------------
 * Video library (/videos/)
 * ------------------------------------------------------------------------- */
.sc-video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}

@media (max-width: 1100px) {
  .sc-video-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .sc-video-grid { grid-template-columns: 1fr; gap: 32px; }
}

.sc-video-card {
  display: flex;
  flex-direction: column;
}

/* 16:9 box. aspect-ratio is well past baseline support, and the padding-top
   fallback below keeps older browsers from collapsing the iframe to zero. */
.sc-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--navy);
  border: 1px solid var(--line);
}

@supports not (aspect-ratio: 16 / 9) {
  .sc-video-frame { height: 0; padding-top: 56.25%; }
}

.sc-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.sc-video-title {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--navy);
  margin-top: 18px;
}

.sc-video-meta {
  font-size: 13px;
  color: var(--slate);
  margin-top: 6px;
}

/* ---------------------------------------------------------------------------
 * Logo — larger in the top-left. Scales down on small screens and when the nav
 * shrinks on scroll, keeping the existing proportions.
 * ------------------------------------------------------------------------- */
.sc-logo-img { height: 116px; }
.sc-nav--scrolled .sc-logo-img { height: 72px; }

@media (max-width: 1024px) {
  .sc-logo-img { height: 78px; }
  .sc-nav--scrolled .sc-logo-img { height: 58px; }
}

@media (max-width: 480px) {
  .sc-logo-img { height: 60px; }
}

/* ---------------------------------------------------------------------------
 * Service cards link through to the Services page. The card already sets
 * position: relative, so the link simply covers it — no markup restructuring
 * and no nested interactive elements.
 * ------------------------------------------------------------------------- */
.sc-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  text-indent: -9999px;
  overflow: hidden;
}

.sc-card-link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -3px;
}

/* ---------------------------------------------------------------------------
 * Services page read as a wall of white: white cards on white sections, so the
 * cards had no edge. Drop the sections to paper and let the cards sit on top.
 * ------------------------------------------------------------------------- */
.sc-page-services section[style*="background: white"] {
  background: var(--paper) !important;
}

.sc-page-services [data-service-card] {
  box-shadow: 0 1px 2px rgba(10, 22, 40, .04), 0 10px 28px rgba(10, 22, 40, .06);
}