/*
Theme Name: The Fine Print
Theme URI: https://thefineprint.uk
Description: Child theme of Twenty Twenty-Five for thefineprint.uk — editorial / investigative dossier aesthetic.
Author: The Fine Print
Author URI: https://thefineprint.uk
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: fineprint
*/

/* Block-theme child: most styling lives in theme.json. Keep this file for things
   theme.json can't express (filters, pseudo-elements, block styles, focus). */

/* ============ PAPER GRAIN ============ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ============ FOCUS ============ */
/* Visible focus ring, never the browser default. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--wp--preset--color--redact);
  outline-offset: 2px;
}

/* ============ DISPLAY EMPHASIS ============ */
/* Italic <em> inside display headings takes the redact accent — brand signature. */
h1 em, h2 em, h3 em, h4 em {
  color: var(--wp--preset--color--redact);
  font-style: italic;
  font-weight: 400;
}

/* Fraunces likes its OpenType features on. */
h1, h2, h3, h4 {
  font-feature-settings: "liga", "calt", "kern";
}

/* ============ BLOCK STYLES ============ */
/* Mono label — applies to paragraphs and headings via the "Styles" picker. */
.is-style-mono-label {
  font-family: var(--wp--preset--font-family--mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--wp--preset--color--redact);
  font-weight: 500;
  line-height: 1.2;
}

/* Hard-shadow card — groups get a 1px ink border with a 16px offset shadow. */
.wp-block-group.is-style-hard-shadow {
  border: 1px solid var(--wp--preset--color--ink);
  background: var(--wp--preset--color--paper);
  box-shadow: 16px 16px 0 var(--wp--preset--color--ink);
  padding: var(--wp--preset--spacing--40, 1.5rem);
}

/* Hard-shadow button — smaller offset, nudges on hover. */
.wp-block-button.is-style-hard-shadow > .wp-block-button__link {
  box-shadow: 6px 6px 0 var(--wp--preset--color--ink);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-button.is-style-hard-shadow > .wp-block-button__link:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--wp--preset--color--ink);
}

/* Hairline rules — never a default <hr>. */
.wp-block-separator.is-style-hairline,
.wp-block-separator.is-style-hairline-strong {
  border: none;
  height: 0;
  margin: 2rem 0;
  opacity: 1;
}
.wp-block-separator.is-style-hairline {
  border-top: 1px solid var(--wp--preset--color--rule);
}
.wp-block-separator.is-style-hairline-strong {
  border-top: 1px solid var(--wp--preset--color--rule-strong);
}