/* -----------------------------------------------
   Single Post
   ----------------------------------------------- */

.valencia-featured-image img {
  width: 100%;
  height: auto;
}

/* Full-bleed featured image sits flush to the top of the content column,
   per the reference design: pull it up past .valencia-content's top
   padding plus the root block gap between header and main. */
.valencia-featured-image.alignfull {
  margin-top: calc(-1 * (var(--wp--preset--spacing--xxl) + var(--wp--style--block-gap, 24px)));
}

.valencia-entry-header {
  margin: var(--wp--preset--spacing--xl) auto var(--wp--preset--spacing--lg);
}

/* Size, weight, tracking, line-height and colour moved to
   styles.elements.h1 in theme.json (3.18.0), which reaches wp:post-title,
   wp:heading level 1 and wp:query-title in one rule and shows up in Global
   Styles. Only what theme.json cannot express stays here. */
.valencia-entry-title {
  margin: 0;
  word-break: break-word;
}

/* Post title hangs left of the measure on desktop, flush below 1000px, so
   the headline reads as a masthead over the text rather than as its first
   line. Meta, body and tags stay on the 680px column.

   140px at 1440 = 2.55x the 55px title. The band is 110-180px: below ~2x
   the title size the offset reads as a misalignment bug, above the
   shell/measure gap (220px per side) it detaches from its column. 140px is
   .64 of that gap. The 10vw arm only binds below ~1400px, keeping the hang
   proportional on narrower laptops.

   On the TITLE, never on .valencia-entry-header -- core generates
   .wp-container-* padding for constrained parents that matches no theme
   selector and shows only in getComputedStyle (the double-inset trap).
   Rationale: DECISIONS.md 2026-09-10. */
@media (min-width: 1000px) {
  .valencia-entry-title:not(.valencia-page-title) {
    /* !important is load-bearing here and is the ONE legitimate use of it
       in this sheet. Core's constrained-layout container emits

         .wp-container-core-group-is-layout-XXXX > :where(:not(.alignleft)…)
           { margin-left: auto !important; margin-right: auto !important }

       which centres every child of .valencia-entry-header. The generated
       class matches no theme selector, so grepping the stylesheets finds
       nothing and the rule shows up only in CSS.getMatchedStylesForNode.
       Without a matching !important the outdent silently does nothing: the
       WIDTH still grows (width is not in core's reset), so the title
       stretches rightward instead of hanging left, which looks like a
       broken clamp rather than a specificity loss. Measured on Local.

       max-width likewise has to beat the container's own max-width:680px. */
    --valencia-outdent: min(10vw, 140px);
    margin-inline-start: calc(-1 * var(--valencia-outdent)) !important;
    width: calc(100% + var(--valencia-outdent));
    max-width: none;
  }
}

/* The page header takes the 1120px shell, matching patterns/press-rows.php
   (see pattern-press-rows.css for the original of this escape). alignwide
   alone caps it at the 900px wideSize, which left the title's left edge at
   270px against the press rows' 160px -- two edges that should be one.

   Three classes for the same reason the press rows need three: core's
   `.wp-container-* > .alignwide` rule is (0,2,0) and prints later. Scoped
   to the page title so single.html's header, which wants the 680px
   measure, is untouched. */
.wp-block-group.valencia-entry-header.alignwide:has(.valencia-page-title) {
  max-width: var(--wp--custom--shell);
}

/* The title and deck take the shell too. The header is constrained, so core
   caps its children at contentSize (680px) and centres them -- the title then
   sat 110px right of the press rows sharing its left edge. Carried here
   rather than as a contentSize attribute on the group: block JSON cannot read
   --wp--custom--shell, so a literal 1120 there duplicates the token and the
   validator rejects it (contentSize disagreeing with theme.json silently
   shadows the measure). No !important needed here -- unlike the outdent's
   margin, core's max-width on constrained children carries none, so the
   child combinator out-specifies it. */
.valencia-entry-header.alignwide > .valencia-page-title,
.valencia-entry-header.alignwide > .valencia-page-deck {
  max-width: var(--wp--custom--shell);
}

/* Below 600px core-base.css pads every .alignwide by `md` (25px) for the
   gutter, but .valencia-content already supplies the 5% phone gutter, so
   the header ended up 25px right of the press rows that share its left
   edge. Drop the doubled padding; the 5% on the content wrapper governs. */
@media (max-width: 600px) {
  .wp-block-group.valencia-entry-header.alignwide:has(.valencia-page-title) {
    padding-left: 0;
    padding-right: 0;
  }
}

/* The page deck (core/post-excerpt) under the page title. Colour and size
   are block attributes in templates/page.html, per "build for the editor
   first"; only what the block cannot express lives here.

   46ch, not the 34ch the press mockup used: at the shell width 34ch left a
   word orphaned on a third line at 1440. The cap is on the measure, not the
   container, so the deck stays a readable column under a title that spans
   the full 1120px.

   core wraps the text in <p class="wp-block-post-excerpt__excerpt"> and adds
   a "Read more" link we do not want in a header; excerptLength caps the
   text and the link is hidden below. */
.valencia-page-deck {
  margin-top: var(--wp--preset--spacing--sm);
}

/* The cap goes on core's inner <p>, not the block wrapper: the wrapper is a
   constrained child of the 1120px header, so capping it there is overridden
   by core's layout rule and the deck ran the full shell width. */
.valencia-page-deck p {
  max-width: 46ch;
  line-height: 1.35;
  margin: 0;
}

.valencia-page-deck .wp-block-post-excerpt__more-text {
  display: none;
}

/* Page titles are the other object: display family UPPERCASE at 800,
   announcing a section rather than opening an article. Colour comes from
   elements.h1 (:where(), so this single class wins). Tracking .01em, not
   the .02em tried at 600 -- bold caps need less tracking, not more. */
.valencia-page-title {
  font-size: clamp(2.6rem, 6.6vw, 5.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* .valencia-meta carries no CSS: colour, size, gap and top margin are
   block attributes in templates/single.html (3.15.1). The old gap rule
   here lost to core's flex-layout gap on source order and the row sat at
   the 24px root blockGap. */

.valencia-entry-content {
  word-break: break-word;
}

.valencia-entry-content p {
  line-height: 1.6;
  margin-bottom: var(--wp--preset--spacing--md);
}

/* :where() keeps specificity at 0-1-1 so existing escapes (e.g. the
   .blog-post-item title rule) still win; buttons are excluded outright —
   the accent underline must not paint over .wp-element-button borders. */
.valencia-entry-content a:where(:not(.wp-element-button)) {
  border-bottom: 2px solid var(--wp--preset--color--accent);
  text-decoration: none;
}

.valencia-entry-content a:where(:not(.wp-element-button)):hover {
  border-bottom-color: var(--wp--preset--color--accent-strong);
}

.valencia-entry-content ul,
.valencia-entry-content ol {
  margin: var(--wp--preset--spacing--md) 0;
  padding-left: 1.5em;
}

.valencia-entry-content li {
  margin-bottom: var(--wp--preset--spacing--sm);
  line-height: 1.6;
}

.valencia-entry-content li:last-child {
  margin-bottom: 0;
}

.valencia-tags {
  margin-top: var(--wp--preset--spacing--lg);
  color: var(--wp--preset--color--muted);
}

.valencia-pagination-links {
  /* Two columns and the gap are the Grid block's own attributes in
     templates/single.html (columnCount, blockGap). Only the margin and
     the lone-panel case live here. */
  margin-top: var(--wp--preset--spacing--xxxl);
}

/* Previous/next as hard-shadow panels (block style valencia-panel on
   core/post-navigation-link). Core's markup is a div holding an arrow
   span, an optional label span and the title link; the div is the
   panel, the link is stretched over it with ::after so the whole box is
   the target. On the newest/oldest post core renders the missing side
   as an EMPTY div: hide it and let the lone panel take the full width. */
.wp-block-post-navigation-link.is-style-valencia-panel {
  position: relative;
  padding: var(--wp--preset--spacing--md);
  border: 2px solid var(--wp--custom--rule);
  background: var(--wp--preset--color--base);
  box-shadow: -6px 6px 0 0 var(--wp--preset--color--accent-strong);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-block-post-navigation-link.is-style-valencia-panel:hover {
  transform: translate(3px, -3px);
  box-shadow: -9px 9px 0 0 var(--wp--preset--color--accent-strong);
}
.wp-block-post-navigation-link.is-style-valencia-panel:empty { display: none; }
/* (0,2,0) beats core's .wp-container-* column rule at (0,1,0); :where()
   keeps the :has() argument from adding to that. */
.wp-block-group.valencia-pagination-links:has(> :where(.wp-block-post-navigation-link:empty)) { grid-template-columns: 1fr; }
.post-navigation-link-next.is-style-valencia-panel { text-align: right; }

/* Eyebrow row: core's own label span ("Previous" / "Next"), mono, muted,
   with the arrow added by ::before/::after so it tracks the word's size
   and colour. Core prints that span only when the block has NO `arrow`
   attribute (with one, showTitle drops the label; verified on Local,
   WP 6.9), which is why the template sets none. */
.is-style-valencia-panel .post-navigation-link__label {
  display: block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}
.post-navigation-link-previous.is-style-valencia-panel .post-navigation-link__label::before { content: "\2190\00a0 "; }
.post-navigation-link-next.is-style-valencia-panel .post-navigation-link__label::after { content: " \00a0\2192"; }

/* Title link: display face at medium, level with the panel, the whole
   panel clickable. (0,1,1) beats the accent underline rule at the same
   specificity because this prints later in the sheet. */
.is-style-valencia-panel a {
  display: block;
  margin-top: var(--wp--preset--spacing--xs);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 1.2;
  text-wrap: balance;
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}
.is-style-valencia-panel a::after { content: ""; position: absolute; inset: 0; }
.is-style-valencia-panel:hover a { color: var(--wp--preset--color--ink-deep); }
.is-style-valencia-panel a:focus-visible { outline: 2px solid var(--wp--preset--color--ink-deep); outline-offset: 4px; }

@media (max-width: 767px) {
  .wp-block-group.valencia-pagination-links { grid-template-columns: 1fr; }
  /* Next stays flush right when stacked, matching desktop, so the arrow
     direction stays legible against Previous above it. The (0,2,0) rule
     further up holds at every width. */
}

.valencia-comments {
  margin-top: var(--wp--preset--spacing--xxxl);
  padding-top: var(--wp--preset--spacing--lg);
  border-top: 1px solid var(--wp--custom--hairline);
}

.valencia-comments .wp-block-comments-title {
  font-size: var(--wp--preset--font-size--large);
  margin: 0 0 var(--wp--preset--spacing--md);
}

/* Comment list — hairline rows, same rhythm as the post list */
.valencia-comments .wp-block-comment-template {
  list-style: none;
  margin: 0;
  padding: 0;
}

.valencia-comments .wp-block-comment-template > li {
  border-top: 1px solid var(--wp--custom--hairline);
  padding: var(--wp--preset--spacing--md) 0;
  margin: 0;
}

.valencia-comments .wp-block-comment-template > li:first-child {
  border-top: none;
  padding-top: 0;
}

/* Nested replies: soft left rule, indented */
.valencia-comments .wp-block-comment-template ol {
  list-style: none;
  margin: var(--wp--preset--spacing--md) 0 0;
  padding-left: var(--wp--preset--spacing--md);
  border-left: 1px solid var(--wp--custom--hairline);
}

.valencia-comments .wp-block-comment-author-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.valencia-comments .wp-block-comment-author-name a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
  border-bottom: none;
}

.valencia-comments .wp-block-comment-date {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
  margin: 2px 0 0;
}

.valencia-comments .wp-block-comment-date a {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
}

.valencia-comments .wp-block-comment-content {
  margin-top: var(--wp--preset--spacing--xs);
}

.valencia-comments .wp-block-comment-content p {
  margin: 0 0 var(--wp--preset--spacing--xs);
}

.valencia-comments .wp-block-comment-content p:last-child {
  margin-bottom: 0;
}

.valencia-comments .wp-block-comments-pagination {
  margin-top: var(--wp--preset--spacing--md);
  font-size: var(--wp--preset--font-size--small);
}

/* Comment form. Selectors carry .wp-block-post-comments-form because
   core's own form rules print after the theme stylesheet and would win
   specificity ties. */
.comment-reply-title {
  font-size: var(--wp--preset--font-size--large);
  margin: var(--wp--preset--spacing--lg) 0 var(--wp--preset--spacing--xs);
}

.valencia-comments .wp-block-post-comments-form .comment-notes,
.valencia-comments .wp-block-post-comments-form .logged-in-as {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
  margin: 0 0 var(--wp--preset--spacing--sm);
}

.valencia-comments .wp-block-post-comments-form label {
  display: block;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--muted);
  margin-bottom: 4px;
}

.valencia-comments .wp-block-post-comments-form input[type="text"],
.valencia-comments .wp-block-post-comments-form input[type="email"],
.valencia-comments .wp-block-post-comments-form input[type="url"],
.valencia-comments .wp-block-post-comments-form textarea {
  width: 100%;
  border: 1px solid var(--wp--custom--hairline);
  border-radius: 4px;
  background: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  box-sizing: border-box;
}

.valencia-comments .wp-block-post-comments-form input:focus-visible,
.valencia-comments .wp-block-post-comments-form textarea:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 1px;
}

.valencia-comments .wp-block-post-comments-form .comment-form-cookies-consent label {
  display: inline;
  margin-left: 6px;
}

/* The submit's look comes from theme.json styles.elements.button via its
   wp-element-button class — same treatment as core/button, one source.
   Only what theme.json can't express lives below. */
.valencia-comments .wp-block-post-comments-form input[type="submit"] {
  cursor: pointer;
}