/*
Theme Name: Valencia
Theme URI:
Author: Matt DeSiena
Description: A fixed-sidebar editorial blog theme built for speed and SEO.
Version: 1.8.0
Requires at least: 6.6
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: valencia
*/

/* -----------------------------------------------
   Fixed Sidebar
   ----------------------------------------------- */

:root {
  --valencia-sidebar-width: 380px;
}

body {
  padding-left: var(--valencia-sidebar-width);
}

.valencia-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--valencia-sidebar-width);
  background: var(--wp--preset--color--sidebar-bg);
  color: var(--wp--preset--color--text);
  padding: var(--wp--preset--spacing--xxl) var(--wp--preset--spacing--lg) 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 100;
}

.valencia-site-title {
  font-size: 22px;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  margin: 0;
}

.valencia-site-title a {
  color: inherit;
  border-bottom: 1px solid transparent;
  text-decoration: none;
}

.valencia-site-title a:hover {
  border-bottom-color: currentColor;
}

.valencia-site-description {
  color: var(--wp--preset--color--text-muted);
  margin-top: var(--wp--preset--spacing--xs);
  line-height: 1.25;
  font-size: var(--wp--preset--font-size--small);
}

.valencia-nav {
  margin-top: var(--wp--preset--spacing--xl);
  flex: 1 1 auto;
}

/* Mobile hamburger nav (overlayMenu:always) renders at every width by
   design; Valencia shows it only below the 1000px sidebar breakpoint.
   .valencia-sidebar prefix: WP global styles emit `body .is-layout-flex
   { display:flex }` (0,1,1) after theme CSS — a lone class here loses. */
.valencia-sidebar .valencia-nav-mobile {
  display: none;
}

.valencia-nav .wp-block-navigation-item a {
  color: inherit;
  border-bottom: 1px solid transparent;
  text-decoration: none;
  font-size: 16px;
}

.valencia-nav .wp-block-navigation-item a:hover,
.valencia-nav .current-menu-item > a {
  border-bottom-color: currentColor;
}

.valencia-social {
  padding: var(--wp--preset--spacing--sm) 0 var(--wp--preset--spacing--lg);
  font-size: 18px;
}

.valencia-social .wp-social-link {
  background: var(--wp--preset--color--border-soft);
  /* Core sets color:#fff per service for brand-color chips; on Valencia's
     light chips the glyph must be dark or it disappears. */
  color: var(--wp--preset--color--text);
}

/* 18px glyph + 10px padding = 38px chip; 6 chips + 12px gaps = 288px,
   comfortably inside the sidebar's 300px inner width. (11px padding made
   it exactly 300px, and exact-fit flex rows wrap on sub-pixel drift.) */
.valencia-social .wp-social-link a {
  padding: 10px;
}

/* -----------------------------------------------
   Footer — copyright always; social chips appear
   only below 1000px, replacing the sidebar's set
   ----------------------------------------------- */

.valencia-footer {
  border-top: 1px solid var(--wp--preset--color--border);
  margin-top: var(--wp--preset--spacing--xxl);
  padding: var(--wp--preset--spacing--md) 0 var(--wp--preset--spacing--xl);
}

.valencia-footer-credit {
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--small);
  margin: 0;
}

.valencia-footer-social {
  font-size: 18px;
}

.valencia-footer-social .wp-social-link {
  background: var(--wp--preset--color--border-soft);
  color: var(--wp--preset--color--text);
}

.valencia-footer-social .wp-social-link a {
  padding: 11px;
}

.valencia-footer-social .wp-social-link:hover {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--background);
}

@media (min-width: 1001px) {
  /* Double class beats core's `body .is-layout-flex { display: flex }` (0,1,1) */
  .valencia-footer .valencia-footer-social {
    display: none;
  }
}

.valencia-social .wp-social-link:hover {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--background);
}

/* -----------------------------------------------
   Front Page — Reverse-Chron Post List
   ----------------------------------------------- */

.valencia-content {
  padding: var(--wp--preset--spacing--xxl) 0;
}

.valencia-post-item {
  border-top: 1px solid var(--wp--preset--color--border);
  padding: var(--wp--preset--spacing--sm) 0;
}

.valencia-post-item:first-child {
  border-top: none;
}

.valencia-post-item-title {
  font-size: var(--wp--preset--font-size--medium);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
  margin: 0;
}

.valencia-post-item-title a {
  border-bottom: 1px solid transparent;
  text-decoration: none;
  color: var(--wp--preset--color--text);
}

.valencia-post-item-title a:hover {
  border-bottom-color: currentColor;
}

.valencia-post-item-date {
  color: var(--wp--preset--color--text-muted);
  white-space: nowrap;
  font-size: var(--wp--preset--font-size--small);
  margin: 0;
}

.valencia-pagination {
  margin-top: var(--wp--preset--spacing--xxxl);
  display: flex;
  justify-content: space-between;
}

/* -----------------------------------------------
   Month-Grouped Blog Archive
   Hand-authored page content (/blog/) imported from
   mattdesiena.com — markup expects these theme classes.
   ----------------------------------------------- */

.blog-posts-by-month {
  margin-bottom: var(--wp--preset--spacing--lg);
}

.blog-posts-by-month .month-header {
  font-size: var(--wp--preset--font-size--large);
  margin: 0 0 var(--wp--preset--spacing--sm);
}

.blog-post-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--sm);
  padding: var(--wp--preset--spacing--xs) 0;
}

/* Extra specificity: the content sits inside .valencia-entry-content, whose
   link rule would otherwise keep these titles permanently underlined. */
.valencia-entry-content .blog-post-item a {
  border-bottom: 1px solid transparent;
}

.valencia-entry-content .blog-post-item a:hover {
  border-bottom-color: currentColor;
}

.blog-post-item .post-date {
  color: var(--wp--preset--color--text-muted);
  font-size: var(--wp--preset--font-size--small);
  white-space: nowrap;
}

/* -----------------------------------------------
   BLOCK STYLE: core/group — is-style-valencia-blogroll-row
   One blogroll entry. Structure the patterns provide:
   inner flex group (site name link, then domain link),
   optional sibling paragraph as the description.
   All colors/sizes reference theme presets so the rows
   follow Global Styles.
   ----------------------------------------------- */

.wp-block-group.is-style-valencia-blogroll-row {
  padding: var(--wp--preset--spacing--sm) 0;
}

/* Rows separate by their own padding — collapse the block gap between them */
.wp-block-group.is-style-valencia-blogroll-row + .wp-block-group.is-style-valencia-blogroll-row {
  margin-top: 0;
}

.wp-block-group.is-style-valencia-blogroll-row > .wp-block-group:first-child {
  gap: 0.75em;
  align-items: center;
}

/* The inline paragraphs inherit .valencia-entry-content's 25px
   margin-bottom, which inflates the flex row and shoves the description
   down (same root cause Julia hit — see its style.css blogroll notes).
   Zero them at higher specificity. */
.valencia-entry-content .wp-block-group.is-style-valencia-blogroll-row > .wp-block-group:first-child > p {
  margin: 0;
  line-height: 1.25;
}

/* Site name — border-bottom: none overrides the always-on underline
   from .valencia-entry-content a */
.wp-block-group.is-style-valencia-blogroll-row > .wp-block-group:first-child > :first-child,
.wp-block-group.is-style-valencia-blogroll-row > .wp-block-group:first-child > :first-child a {
  font-size: 16px;
  font-weight: 600;
  color: var(--wp--preset--color--text);
  text-decoration: none;
  border-bottom: none;
  transition: color 0.2s ease;
}

.wp-block-group.is-style-valencia-blogroll-row > .wp-block-group:first-child > :first-child a:hover {
  color: var(--wp--preset--color--accent);
  border-bottom: none;
}

/* Accent dash divider, rendered before the domain */
.wp-block-group.is-style-valencia-blogroll-row > .wp-block-group:first-child > :last-child::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--wp--preset--color--accent);
  vertical-align: middle;
  margin-right: 0.75em;
  flex-shrink: 0;
}

/* Domain */
.wp-block-group.is-style-valencia-blogroll-row > .wp-block-group:first-child > :last-child,
.wp-block-group.is-style-valencia-blogroll-row > .wp-block-group:first-child > :last-child a {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 12px;
  color: var(--wp--preset--color--text-muted);
  text-decoration: none;
  border-bottom: none;
  transition: color 0.2s ease;
}

.wp-block-group.is-style-valencia-blogroll-row > .wp-block-group:first-child > :last-child a:hover {
  color: var(--wp--preset--color--accent);
}

/* Description */
.wp-block-group.is-style-valencia-blogroll-row > p {
  margin: 4px 0 0;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--text-muted);
}

/* -----------------------------------------------
   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);
}

.valencia-entry-title {
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: 600;
  letter-spacing: -0.45px;
  line-height: 1.25;
  margin: 0;
  word-break: break-word;
}

.valencia-meta {
  color: var(--wp--preset--color--text-muted);
  margin-top: calc(var(--wp--preset--spacing--md) / 2);
  gap: var(--wp--preset--spacing--xs);
}

.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-dark);
}

.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--text-muted);
}

.valencia-pagination-links {
  display: flex;
  justify-content: space-between;
  margin-top: var(--wp--preset--spacing--xxxl);
}

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

.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--preset--color--border-soft);
  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--preset--color--border-soft);
}

.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--text);
  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--text-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. */
.valencia-comments .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--text-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--text-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--preset--color--border);
  border-radius: 4px;
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--text);
  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;
}

/* -----------------------------------------------
   Buttons
   ----------------------------------------------- */

/* The button look lives in theme.json styles.elements.button. These two
   rules are here only because theme.json can't express transitions or
   :focus-visible. */
.wp-element-button {
  transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear;
}

.wp-element-button:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 1px;
}

/* valencia-ghost hover — companion to the style_data registration in
   functions.php (pseudo-selectors can't live in style_data). */
.wp-block-button.is-style-valencia-ghost .wp-block-button__link:hover {
  background: transparent;
  color: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
}

/* -----------------------------------------------
   Block Styles
   ----------------------------------------------- */

/* Default separator = Valencia hairline. Not a picker style: the theme
   has exactly one kind of rule, so every separator gets it. The :not()
   chain mirrors core's own width rule
   (.wp-block-separator:not(.is-style-wide):not(.is-style-dots), 0,3,0)
   so this wins on specificity — core prints after the theme stylesheet,
   so a bare hr.wp-block-separator loses. */
hr.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  border: none;
  border-top: 1px solid var(--wp--preset--color--border);
  background: none;
  height: auto;
  width: 100%;
  max-width: 100%;
}

/* Pullquote: display serif between hairlines. Left-aligned against
   core's centered default. */
.wp-block-pullquote.is-style-valencia-pullquote {
  border-top: 1px solid var(--wp--preset--color--border);
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding: var(--wp--preset--spacing--md) 0;
  margin: var(--wp--preset--spacing--lg) 0;
  text-align: left;
}

.wp-block-pullquote.is-style-valencia-pullquote blockquote p {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-large);
  line-height: 1.35;
  color: var(--wp--preset--color--heading);
  margin: 0;
}

.wp-block-pullquote.is-style-valencia-pullquote cite {
  display: block;
  margin-top: var(--wp--preset--spacing--xs);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--text-muted);
  font-style: normal;
}

/* Title Reveal (post-title, heading) — opt-in entrance animation.
   Inert until assets/js/title-reveal.js splits the words and adds
   .is-split, so no JS (or reduced motion) means a static title.
   Rise + scale share one keyframe: both animate transform, and two
   animations on one element would override each other. Per-word
   delays are set inline by the splitter. */
@media (prefers-reduced-motion: no-preference) {
  .is-style-valencia-title-reveal.is-split {
    transform-origin: 0 100%;
    animation: valencia-title-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .is-style-valencia-title-reveal.is-split .word {
    display: inline-block;
    opacity: 0;
    filter: blur(4px);
    animation: valencia-word-in 0.5s cubic-bezier(0.11, 0, 0.5, 0) forwards;
  }
}

@keyframes valencia-title-reveal {
  from { transform: translateY(24px) scale(0.96); }
  to   { transform: translateY(0) scale(1); }
}

@keyframes valencia-word-in {
  to { opacity: 1; filter: blur(0); }
}

/* -----------------------------------------------
   PATTERN: Now Page (valencia/now-page)
   Sections divided by hairlines; labels are eyebrow-
   styled paragraphs; manifesto numbers via CSS counter
   in the mono preset. Layout-only where possible —
   type and color come from presets and block styles.
   ----------------------------------------------- */

.valencia-now > * + * {
  margin-block-start: 0;
  border-top: 1px solid var(--wp--preset--color--border);
}

/* The photo separates itself — no hairline above it */
.valencia-now > .valencia-now-photo {
  border-top: none;
}

.valencia-now-section,
.valencia-now-photo {
  padding: var(--wp--preset--spacing--lg) 0;
}

.valencia-now > :first-child {
  padding-top: 0;
}

.valencia-now-title {
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.25;
}

.valencia-now-photo figcaption {
  font-size: 13px;
  font-style: italic;
  color: var(--wp--preset--color--text-muted);
  text-align: right;
  margin-top: 10px;
}

.valencia-now-cols .valencia-now-item {
  margin-block-start: 0;
  border-top: 1px solid var(--wp--preset--color--border-soft);
  padding: 10px 0;
}

.valencia-now-cols .valencia-now-item:first-of-type {
  border-top: none;
  padding-top: 0;
}

.valencia-now-cols .valencia-now-item p {
  margin: 0;
}

.valencia-now-item-meta {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--text-muted);
}

.valencia-entry-content .valencia-now-manifesto {
  list-style: none;
  counter-reset: valencia-manifesto;
  margin: 8px 0 0;
  padding: 0;
}

/* Grid on the li would split its inline text runs into anonymous grid
   items (strong in one cell, trailing text wrapping into the number
   column) — hanging indent + absolute counter instead. */
.valencia-entry-content .valencia-now-manifesto li {
  counter-increment: valencia-manifesto;
  position: relative;
  padding: 12px 0 12px 48px;
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--wp--preset--color--text);
}

.valencia-entry-content .valencia-now-manifesto li::before {
  content: counter(valencia-manifesto, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: calc(12px + 0.55em);
  font-family: var(--wp--preset--font-family--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  line-height: 1;
  color: var(--wp--preset--color--text-muted);
}

/* The three words carry the display serif; the sentences stay in body */
.valencia-now-manifesto strong {
  font-family: var(--wp--preset--font-family--display);
  font-size: 19px;
  color: var(--wp--preset--color--heading);
}

.valencia-now-footer {
  padding-top: var(--wp--preset--spacing--md);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--text-muted);
}

/* -----------------------------------------------
   PATTERN: About Introduction (valencia/about-intro)
   ----------------------------------------------- */

.valencia-about-heading {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.15;
  display: inline-block;
  padding-bottom: 0.18em;
  border-bottom: 5px solid var(--wp--preset--color--accent);
}

.valencia-about > .valencia-about-statement {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.35;
  margin-block-start: var(--wp--preset--spacing--lg);
}

.valencia-about > .valencia-about-columns {
  margin-block-start: var(--wp--preset--spacing--xl);
}

.valencia-about-timeline .valencia-about-event {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  margin-block-start: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--wp--preset--color--border-soft);
}

.valencia-about-timeline .valencia-about-event:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.valencia-about-event > * {
  margin-block-start: 0;
}

.valencia-about-year {
  font-family: var(--wp--preset--font-family--mono);
  font-size: 13px;
  color: var(--wp--preset--color--text-muted);
  margin: 0;
  padding-top: 4px;
}

/* Event titles read as body-font labels, not display headings */
.valencia-about-event-title {
  font-family: var(--wp--preset--font-family--body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wp--preset--color--text);
  margin: 0 0 4px;
}

.valencia-about-event-body .valencia-about-event-desc {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* -----------------------------------------------
   Mobile — Sidebar Collapses to Top Bar
   Core's wp:navigation block handles its own overlay
   markup/script below its "overlayMenu":"mobile" breakpoint;
   this CSS only repositions the sidebar container itself.
   ----------------------------------------------- */

@media (max-width: 1000px) {
  body {
    padding-left: 0;
  }

  .valencia-sidebar {
    position: relative;
    width: 100%;
    height: auto;
    padding: var(--wp--preset--spacing--lg) 7.5%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /* Top bar is identity + hamburger on one row: desktop list swaps out
     for the always-overlay nav, tagline yields the horizontal space.
     .valencia-sidebar prefix beats global-styles `body .is-layout-flex`. */
  .valencia-sidebar .valencia-nav-desktop,
  .valencia-sidebar .valencia-site-description {
    display: none;
  }

  .valencia-sidebar .valencia-nav-mobile {
    display: block;
    flex: 0 0 auto;
    /* Flow-layout blockGap margin survives into this flex row and pushes
       the toggle 24px below the title's vertical center. */
    margin: 0;
  }

  /* Constrained layout only caps content at 560px — below ~600px viewports
     that leaves no gutters. 7.5% matches the top bar's side padding so the
     content and site title left-align. The footer sits outside the content
     wrapper, so it needs the same gutters explicitly. */
  .valencia-content,
  .valencia-footer {
    padding-left: 7.5%;
    padding-right: 7.5%;
  }

  /* Featured image escapes the gutters, edge to edge. Its containing
     block is the padded content box (85% of the viewport), so the
     negative margin is 7.5/0.85, not 7.5%. */
  .valencia-featured-image.alignfull {
    margin-left: calc(-7.5% / 0.85);
    margin-right: calc(-7.5% / 0.85);
  }

  /* Mobile top bar carries identity + hamburger only; social
     moves to the footer below this breakpoint. */
  .valencia-sidebar > .valencia-social {
    display: none;
  }
}

/* Matt-blocks' navigation.css chips both nav toggle buttons — border,
   radius, and background via `base`/`gray` tokens Valencia doesn't define,
   so the fallbacks render a white box (the icon, colored white on the dark
   overlay, disappears into it). Restate the plain-icon look at higher
   specificity for both buttons. The :hover variants are load-bearing:
   matt-blocks also tints the buttons on hover at equal specificity, and
   the plugin's stylesheet loads after this one, so the base-state rule
   alone loses that tie. */
.valencia-nav-mobile .wp-block-navigation__responsive-container-open,
.valencia-nav-mobile .wp-block-navigation__responsive-container-open:hover,
.valencia-nav-mobile .wp-block-navigation__responsive-container-close,
.valencia-nav-mobile .wp-block-navigation__responsive-container-close:hover {
  background: none;
  border: 0;
  padding: 0;
  color: currentColor;
}

/* Matt-blocks anchors the close absolute inside the vertically-centered
   menu wrapper, landing it mid-screen. Fix it to the viewport instead (the
   overlay container is fixed fullscreen, so viewport coords align with it),
   on the exact spot the hamburger occupies in the top bar — same spacing-lg
   top offset and 7.5% right gutter — so open/close toggle in place.
   Explicit color because currentColor is unreliable here: Valencia's `text`
   token slug collides with core's generic .has-text-color marker class, so
   the preset rule forces the overlay container dark and the X vanishes.
   The :hover variant out-ranks the reset's currentColor hover rule above. */
.valencia-nav-mobile .wp-block-navigation__responsive-container-close,
.valencia-nav-mobile .wp-block-navigation__responsive-container-close:hover {
  position: fixed;
  top: var(--wp--preset--spacing--lg);
  right: 7.5%;
  color: var(--wp--preset--color--background);
}

/* Matt-blocks recolors open-overlay links with `contrast` (no such Valencia
   token — the #000 fallback paints them invisible on the dark overlay),
   shrinks them to 1.25rem, and shapes them into padded 6px-radius pills with
   an accent-filled current-menu-item and a box-shadow ring on plain :focus —
   which core's open-the-dialog auto-focus triggers on the first link every
   time. Restore the mobile nav block's own design: plain white text, 32px
   fixed (the x-large preset var is fluid and dips to ~21px on phones, the
   one place this menu is actually used). */
.valencia-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
  color: var(--wp--preset--color--background);
  font-size: 32px;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Current page + hover: accent text, no pill — the overlay's version of the
   sidebar's understated current/hover treatment. */
.valencia-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .current-menu-item a,
.valencia-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover {
  color: var(--wp--preset--color--accent);
}

/* Keyboard focus stays visible (same treatment as the theme's other
   focus-visible styles); tap/click opens no longer paint the first link. */
.valencia-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 4px;
}

@media (max-width: 500px) {
  .valencia-entry-title {
    font-size: 24px;
  }

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

/* Core pads the open nav overlay with clamp(1rem, var(--wp--style--root--padding-*), 20rem),
   but WP only defines those vars when useRootPaddingAwareAlignments is true (Valencia: false).
   Undefined vars invalidate core's padding entirely, jamming the menu into
   the corner. Define the vars so core's own clamp() resolves; nothing else
   consumes them while root-padding-aware alignments stay off.
   Overlay colors themselves are native now — overlayBackgroundColor /
   overlayTextColor attributes on the mobile nav block in parts/header.html. */
:root {
  --wp--style--root--padding-top: var(--wp--preset--spacing--lg);
  --wp--style--root--padding-right: var(--wp--preset--spacing--lg);
  --wp--style--root--padding-bottom: var(--wp--preset--spacing--lg);
  --wp--style--root--padding-left: var(--wp--preset--spacing--lg);
}