/*
Theme Name: Clairice
Theme URI: https://github.com/plamentodd/Clairice-web
Author: CLAIRICE
Author URI: https://github.com/plamentodd
Description: Child theme of Twenty Twenty-Five carrying the CLAIRICE palette, type scale and spacing. Colour, type and layout live in theme.json; this file holds only what theme.json cannot express.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clairice
*/

/* ------------------------------------------------------------------
   1. Font aliases

   Several block patterns were authored against the design style sheet
   and set font-family:var(--f-display) inline. theme.json publishes
   those families as --wp--preset--font-family--*, so without these
   three lines those patterns fall back to the browser default.
   ------------------------------------------------------------------ */
:root,
.editor-styles-wrapper {
  --f-display: var(--wp--preset--font-family--display);
  --f-body:    var(--wp--preset--font-family--body);
  --f-mono:    var(--wp--preset--font-family--mono);
}

/* ------------------------------------------------------------------
   2. Buttons

   The filled and the outline button must occupy the same box, or they
   sit at different heights side by side. Core gives the outline style a
   border and the filled style none, so the filled one is 2px shorter
   and its baseline drifts. Giving both a 1px border - transparent on
   the filled one - makes the two boxes identical.

   The flex centring also puts each label in the middle of its button
   rather than on the text baseline, and min-height carries the 44px
   touch target on every device rather than only on narrow ones.
   ------------------------------------------------------------------ */
.wp-block-buttons {
  align-items: stretch;
}
.wp-block-button__link,
.wp-block-button .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid transparent;
  text-align: center;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
  background-color: transparent;
  border-color: rgba(13, 23, 19, 0.28);
  color: var(--wp--preset--color--text);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
  background-color: transparent;
}

/* ------------------------------------------------------------------
   3. Measure

   Body copy needs a line length, or it runs the full 1140px and becomes
   hard to read. This used to be an inline max-width inside each pattern,
   which broke every one of those blocks: WordPress regenerates a block's
   HTML from its attributes and compares, and max-width is not a block
   attribute, so the extra declaration made the block invalid on insert.

   Doing it here instead is invisible to block validation. The hooks are
   the preset classes theme.json already generates, so nothing in the
   patterns had to gain a class.
   ------------------------------------------------------------------ */
.wp-block-post-content .has-medium-font-size,
.entry-content .has-medium-font-size {
  max-width: 56ch;
}
.wp-block-post-content .has-small-font-size,
.entry-content .has-small-font-size {
  max-width: 68ch;
}
/* A max-width on a child of a constrained-layout group makes WordPress
   centre it. That is wrong for body copy and for the small mono links
   under a column block, which must sit at the left edge. */
.wp-block-post-content .has-medium-font-size,
.wp-block-post-content .has-small-font-size,
.wp-block-post-content .has-body-font-family,
.entry-content .has-medium-font-size,
.entry-content .has-small-font-size,
.entry-content .has-body-font-family {
  margin-inline-start: 0;
  margin-inline-end: auto;
}
.wp-block-post-content .has-body-font-family,
.entry-content .has-body-font-family {
  max-width: 42ch;
}
/* inside a column the column is already the measure */
.wp-block-column .has-medium-font-size,
.wp-block-column .has-small-font-size,
.wp-block-column .has-body-font-family {
  max-width: none;
}

/* ------------------------------------------------------------------
   4. Sections

   Sections are separated by a hairline rule and whitespace, not by a
   tinted panel. The tinted panels were removed: at this ground colour
   they read as a smudge rather than a deliberate band, and a panel
   whose text is not inset on all four sides looks unfinished.

   The rules themselves live on the blocks as style.border.top, which
   is safe - it is style.border.color, the shorthand, that requires a
   has-border-color class and breaks validation without it.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   5. The opening animation's neighbours

   The intro locks scrolling while it plays. Reserving the scrollbar
   gutter means releasing that lock cannot shift the page sideways —
   the bug that produced the visible "jump" in the earlier build.
   ------------------------------------------------------------------ */
html {
  scrollbar-gutter: stable;
}

/* ------------------------------------------------------------------
   6. Site identity

   The wordmark is vector outlines and must never be re-set in a font
   or boxed. 150px is the width it was drawn for.
   ------------------------------------------------------------------ */
.wp-block-site-logo img {
  width: 150px;
  height: auto;
}

/* The slogan sits under the wordmark, centred on it.

   The width and offset are percentages of the group that holds the logo,
   and that group is sized by the logo — so the slogan centres on the
   wordmark's actual letters rather than on the image box. The PNG's ink
   occupies 96.6% of the file, starting 1.5% in; measured from the file.

   A child with a percentage width does not contribute to its parent's
   intrinsic width, so the two never chase each other, and this stays
   correct if the logo size changes. */
.clairice-slogan {
  width: 96.6%;
  margin: 4px 0 0 1.5% !important;  /* !important: the group's block-gap
                                       sets the top margin otherwise */
  font-family: var(--wp--preset--font-family--mono);
  font-size: 10.5px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-indent: 0.14em;              /* letter-spacing is added after the
                                       last glyph; this re-centres it */
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  text-align: center;
}
@media (max-width: 860px) {
  .clairice-slogan { font-size: 11px; }
}

/* ------------------------------------------------------------------
   7. Touch targets

   Every link and button reaches 44px on touch devices and narrow
   viewports. Measured at 390x844, 360x640 and 820x1180 in the earlier
   build; this is the rule that made them pass.
   ------------------------------------------------------------------ */
@media (hover: none), (max-width: 860px) {
  .wp-block-navigation a,
  .wp-block-social-link a,
  footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ------------------------------------------------------------------
   8. Reduced motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}