/* ============================================================================
   Simvicious: typographic and layout refinements.

   Loaded AFTER style.css so it refines the OneMusic theme rather than replacing
   it. Kept in its own file on purpose: every rule here is reviewable in one
   place and removable in one line, and the 72KB theme stays untouched.

   The site's own identity is kept: Archivo Narrow, the near-black ink, the
   #e91e63 accent. Nothing here repaints it.

   No JavaScript, no dependency, no font, no network request. Two of the rules
   make the pages cheaper to render than they were.
   ============================================================================ */

/* 1 --------------------------------------------------------------------------
   Editorial hairlines instead of card borders.

   The theme boxes things by default. A hairline and a little air separates
   content just as clearly and stops every block reading as a widget. The rule
   is the accent at low opacity so it belongs to the palette rather than being
   a grey line borrowed from somewhere else. */
.faq-item {
  border-bottom: 1px solid color-mix(in srgb, #e91e63 22%, transparent);
}
.faq-item:last-child {
  border-bottom: 0;
}
.about-me-content + .about-me-content {
  border-top: 1px solid color-mix(in srgb, #232323 12%, transparent);
  padding-top: 28px;
}

/* 2 --------------------------------------------------------------------------
   Wrapping. `balance` stops a heading leaving one orphaned word on its own
   line; `pretty` does the same job for the last line of a paragraph. Both are
   progressive: a browser without them simply wraps as before. */
h1, h2, h3,
.section-heading h2,
.hero-slides-content h1 {
  text-wrap: balance;
}
p, li, dd {
  text-wrap: pretty;
}

/* 3 --------------------------------------------------------------------------
   Measure. Long lines are the single most common readability fault on a wide
   screen, and the theme's 9-column body can run past 100 characters on a
   desktop. Held in `ch` so it tracks the font rather than a guessed pixel
   width. Not applied to headings, which are meant to run wide. */
.about-me-content p,
.about-me-content li,
.faq-item p {
  max-width: 68ch;
}

/* 4 --------------------------------------------------------------------------
   Figures as data. This site is full of numbers that should line up: BPM, key,
   bar counts, sample rates, LUFS targets, licence tiers and prices. Tabular
   lining figures stop them wandering column to column. */
table, .price, .faq-item p, .about-me-content li, time,
.single-price-plan, .service-price {
  font-variant-numeric: tabular-nums lining-nums;
}

/* 5 --------------------------------------------------------------------------
   `:has()` states, no JavaScript.

   When one question is hovered or focused, its siblings step back so the one
   being read is the one that reads. Guarded by @supports, so a browser without
   :has() gets the plain list and loses nothing. */
@supports selector(:has(*)) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .about-me-content:has(.faq-item:hover) .faq-item:not(:hover),
    .about-me-content:has(.faq-item:focus-within) .faq-item:not(:focus-within) {
      opacity: 0.55;
      transition: opacity 180ms ease;
    }
    .faq-item {
      transition: opacity 180ms ease;
    }
  }
}

/* 6 --------------------------------------------------------------------------
   Oversized offset numerals on ordered lists. The figure becomes a typographic
   feature set in the margin rather than a default browser marker. Only above
   the phone breakpoint, where there is a margin to hang it in. */
@media (min-width: 768px) {
  .about-me-content ol {
    list-style: none;
    counter-reset: step;
    padding-left: 0;
  }
  .about-me-content ol > li {
    counter-increment: step;
    position: relative;
    padding-left: 3.4rem;
    margin-bottom: 1.1rem;
  }
  .about-me-content ol > li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: -0.15em;
    font-family: "Archivo Narrow", sans-serif;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    color: color-mix(in srgb, #e91e63 45%, transparent);
    font-variant-numeric: tabular-nums lining-nums;
  }
}

/* 7 --------------------------------------------------------------------------
   Hanging punctuation and a real hyphenation pass.

   Archivo Narrow is a condensed face and the theme sets body copy fairly tight,
   so a narrow column produces ragged, gappy lines. Hyphenation fixes that where
   the browser supports it, and hanging punctuation keeps the left edge of a
   quoted line optically straight instead of visually indented.

   This replaced a `column-rule` rule that matched nothing: every long flat list
   on the site turned out to be navigation or social links, not content. A rule
   styling an element that does not exist is dead weight. */
.about-me-content p,
.faq-item p {
  hyphens: auto;
  hanging-punctuation: first last;
}

/* 8 --------------------------------------------------------------------------
   Deferred rendering on long sections below the fold.

   Two traps avoided here, both found the hard way on sibling sites tonight:

   - `contain-intrinsic-size` contains BOTH axes, so a value like `auto 900px`
     hands 900px to the inline axis and pushes the document past the viewport.
     `contain-intrinsic-block-size` constrains only the block axis, which is the
     one being guessed.
   - It is NOT applied to any section that paints its own background. The dark
     `.featured-artist-area` bands do, and on a deferred element an accessibility
     checker resolves the background from <body> instead, reporting a contrast
     failure that is not real.

   So it goes on the FAQ block alone, which inherits the page ground and sits
   well below the fold. */
.faq-defer {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 700px;
}

/* 9 --------------------------------------------------------------------------
   A texture that belongs to this trade and to nothing else.

   Not a dot grid. This is the dB scale printed down the side of a mixing desk
   fader: long ticks at the marked steps, short ticks between them. Drawn with
   one repeating gradient, so it costs no image request. Sits in the left margin
   of the answer block on wide screens, where there is dead space anyway. */
@media (min-width: 1200px) {
  .page-answer {
    position: relative;
    padding-left: 34px;
  }
  .page-answer::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    bottom: 0.35em;
    width: 14px;
    background-image:
      repeating-linear-gradient(
        to bottom,
        color-mix(in srgb, #232323 34%, transparent) 0 1px,
        transparent 1px 11px
      ),
      repeating-linear-gradient(
        to bottom,
        color-mix(in srgb, #e91e63 55%, transparent) 0 2px,
        transparent 2px 44px
      );
    background-size: 7px 100%, 14px 100%;
    background-position: left top, left top;
    background-repeat: no-repeat;
  }
}

/* 10 -------------------------------------------------------------------------
   Focus ring. The theme relies on the browser default, which disappears against
   both the white body and the dark bands. This one is the accent with a light
   halo behind it, so it stays visible on either. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #e91e63;
  outline-offset: 2px;
  border-radius: 2px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85);
}
.bg-overlay a:focus-visible,
.featured-artist-area a:focus-visible,
.contact-area a:focus-visible {
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.75);
}