/* -----------------------------------------------
   Mobile — Content Gutters and Full-Bleed Escapes
   Core's wp:navigation block handles its own overlay
   markup/script below its "overlayMenu":"mobile" breakpoint;
   this CSS covers the layout adjustments the narrow viewport
   needs regardless of which header is active.
   ----------------------------------------------- */

@media (max-width: 1000px) {
  /* Constrained layout only caps content at 680px — 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%;
  }

  /* alignfull means edge to edge, so ANY alignfull band sitting directly
     inside the padded .valencia-content escapes both gutters -- the
     featured image, the ticker, the press ribbon, Recent Writing, and
     whatever comes next. This replaces the per-pattern list that stood
     here: each new front-page band needed its own copy of these two
     lines, and Recent Writing shipped without one, which is exactly the
     bug this generalisation removes.

     Percentage margins, not 100vw: a viewport bleed counts the scrollbar
     and reintroduces the horizontal scroll the 2026-09-10 ticker fix
     removed. The containing block is 85% of the viewport at this gutter,
     hence the /0.85.

     NOT the entry content. The post-content block is itself alignfull on
     single and page (so its own bands can escape, next rule), and the
     generalised selector pulled the whole article to the viewport edge:
     its constrained 680px layout centres children but has no side
     padding, so below 680px-plus-gutters the paragraphs sat flush against
     the screen (3.19.4 regression, caught on the 3.20.0 deploy). The
     article keeps main's gutter; the bands inside it still bleed via
     the 100vw rule below, which is relative to the viewport. */
  .valencia-content > .alignfull:not(.valencia-entry-content),
  .valencia-featured-image.alignfull {
    margin-left: calc(-7.5% / 0.85);
    margin-right: calc(-7.5% / 0.85);
  }

  /* Below 1000px core's alignfull handling stops breaking out, leaving
     side gutters on every full-bleed band. Escape ANY alignfull inside
     the entry content to a true viewport bleed — container-independent,
     so it also covers nested bands (marquee, ribbons, CTA bands) that
     the old per-style list missed. */
  .valencia-entry-content .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* Unlike the image full-bleeds above, the emphasis band carries text.
     Escaping to the viewport edge leaves its content flush against the
     screen, so restore the reading gutter as the band's own horizontal
     padding — matching the 7.5% the rest of the mobile content uses. */
  .wp-block-group.valencia-emphasis-band.alignfull {
    padding-left: 7.5%;
    padding-right: 7.5%;
  }

  /* Blog index: drop core's alignwide padding on the card wrapper. The
     page already has its 7.5% gutter from .valencia-content, and core
     adds its own inline padding to an alignwide group inside a
     constrained parent (a generated .wp-container-* rule, not anything
     in this theme). The two stack, so at 390px the lead card measured
     282px in a 390px viewport — 108px of margin — while the list beside
     it sat at 332px. The card's own padding, which holds the title off
     its edge, is a separate rule on .valencia-qcard and stays. */
  .wp-block-group.valencia-qcards.alignwide {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Phone: tighten the gutter to 5%, and add the query list's alignwide
   escape. Measured against comparable blog indexes at 390px on
   2026-09-10 — The Verge /amazon 5.1%, Smashing Magazine 5.3%,
   rachelandrew.co.uk 4.6% — where 7.5% (29px at 390px) sat wider than
   all three; 5% is ~20px, The Verge's number.

   This block is SEPARATE from and after the 1000px block above, not
   nested inside it: the escapes in that block (featured image, ticker,
   entry-content alignfull) apply from 1000px down, and folding this
   query into it strands them below 600px only — which un-bleeds the
   featured image on single posts at 900px. The CSS guard caught exactly
   that on a first attempt.

   The gutter moves on .valencia-content / .valencia-footer only, so the
   heading, lead card, list and pagination keep the single left edge they
   share; moving one element's gutter alone would break that spine. The
   two percentage escapes are restated because they are expressed against
   the 7.5% box (containing block 85% of the viewport); at a 5% gutter the
   containing block is 90%, so the divisor changes with it. */
@media (max-width: 600px) {
  .valencia-content,
  .valencia-footer {
    padding-left: 5%;
    padding-right: 5%;
  }

  /* Same generalisation as the 7.5% block above, restated because the
     divisor tracks the gutter: at 5% the containing block is 90%. */
  .valencia-content > .alignfull:not(.valencia-entry-content),
  .valencia-featured-image.alignfull {
    margin-left: calc(-5% / 0.9);
    margin-right: calc(-5% / 0.9);
  }

  .wp-block-group.valencia-emphasis-band.alignfull {
    padding-left: 5%;
    padding-right: 5%;
  }

  /* The list's rows escape core's alignwide padding on their own, but the
     pagination inside does not, so the pill row sat 25px right of the
     card, list and heading. */
  .wp-block-query.valencia-qlist.alignwide {
    padding-left: 0;
    padding-right: 0;
  }
}


/* matt-blocks' arrow-dark reads the accent token; in Valencia the arrow
   CTA is ink-on-ink. Selector weight mirrors the plugin exactly
   (incl. :link/:visited) — the theme stylesheet loads after the plugin's,
   so the tie breaks our way without !important. */
.wp-block-button.is-style-arrow-dark .wp-block-button__link,
.wp-block-button.is-style-arrow-dark .wp-block-button__link:link,
.wp-block-button.is-style-arrow-dark .wp-block-button__link:visited {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}

.wp-block-button.is-style-arrow-dark .wp-block-button__link:hover,
.wp-block-button.is-style-arrow-dark .wp-block-button__link:focus,
.wp-block-button.is-style-arrow-dark .wp-block-button__link:active {
  background: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  filter: none;
}

/* Matt-blocks chips both nav toggle buttons via base/gray tokens Valencia
   doesn't define; the fallbacks render a white box that swallows the white
   icon. Restate the plain-icon look for both buttons — the :hover variants
   are load-bearing because the plugin also tints on hover and wins the
   tie (note 2). */
.valencia-nav-overlay .wp-block-navigation__responsive-container-open,
.valencia-nav-overlay .wp-block-navigation__responsive-container-open:hover,
.valencia-nav-overlay .wp-block-navigation__responsive-container-close,
.valencia-nav-overlay .wp-block-navigation__responsive-container-close:hover {
  background: none;
  border: 0;
  /* No padding here: the arrow toggle below sets 8px on both buttons
     without a :hover twin, so a `padding: 0` in this hover-inclusive
     reset shrank the button by 8px a side the moment it was touched. */
  color: currentColor;
}

/* Matt-blocks anchors the close mid-screen inside the centered menu
   wrapper — fix it to the viewport instead, on the hamburger's exact spot
   in the top bar (same spacing-lg top offset, 7.5% right gutter) so
   open/close toggle in place. Explicit color because Valencia's `text`
   token slug collides with core's .has-text-color marker class, forcing
   the overlay dark and hiding a currentColor X. The :hover variant
   out-ranks the reset's currentColor hover rule above. */
.valencia-nav-overlay .wp-block-navigation__responsive-container-close,
.valencia-nav-overlay .wp-block-navigation__responsive-container-close:hover {
  position: fixed;
  /* Where the open button sits once the bar is stuck (16px down, md in
     from the right at every width): same spot, so the swap is invisible. */
  top: 16px;
  right: var(--wp--preset--spacing--md);
  z-index: 101; /* defensive; scoped inside the drawer's stacking context */
  color: var(--wp--preset--color--base);
}

/* Logged-in chrome: nudge the fixed close button below the admin bar,
   same reasoning as the masthead and marquee offsets. */
@media (min-width: 601px) { /* admin bar is absolute, not fixed, at 600px and below (core-masthead.css) */
  body.admin-bar .valencia-nav-overlay .wp-block-navigation__responsive-container-close,
  body.admin-bar .valencia-nav-overlay .wp-block-navigation__responsive-container-close:hover {
    top: calc(16px + var(--wp-admin--admin-bar--height, 32px));
  }
}

/* Matt-blocks restyles open-overlay links: an invisible `contrast`
   fallback color, 1.25rem pill shapes, and a :focus ring that core's
   open-the-dialog auto-focus triggers on the first link every time.
   Restore the block's own design — plain white text at a fixed 32px (the
   x-large preset is fluid and dips to ~21px on phones, the one place this
   menu is actually used). */
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation-item a {
  color: var(--wp--preset--color--base);
  font-size: 3rem;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* Current page + hover: accent text, no pill — an understated
   current/hover treatment. */
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .current-menu-item a,
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .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-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation-item a:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 4px;
}

/* On touch devices the ring can only come from core's open-the-dialog
   auto-focus: iOS Safari never focuses the tapped hamburger, so when the
   script focuses the first link there is no prior pointer focus and
   WebKit treats it as keyboard focus. It painted an accent box around
   "About" on every open and read as the current page (3.19.1, 2026-09-11).
   Keyboards on a phone are rare enough that the ring goes; the current
   page is still marked by colour. */
@media (hover: none) and (pointer: coarse) {
  .valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation-item a:focus-visible {
    outline: none;
  }
}

@media (max-width: 500px) {
  /* Post title floored at 27px on mobile. The xx-large preset's fluid clamp
     bottoms out at 22px, which at real phone widths (360-430px) leaves the
     title at only ~24px = ~1.4x the 17px body — below the point a headline
     reads as a distinct level. 27px holds 1.59x the body across all phone
     widths. Rule: the post title stays >=1.5x body at every breakpoint
     (target 1.6x); that ratio is the hierarchy signal. The prior bug was the
     opposite — a 24px override (1.26x the then-19px body) that collapsed it. */
  .valencia-entry-title {
    font-size: 27px;
  }

  /* Page titles keep a floor of their own. The 27px above is tuned to the
     POST title's mixed-case measure against 17px body (1.59x); uppercase at
     800 sets much wider per line, so the same value would wrap a two-word
     page title onto three lines. 32px holds the caps at 1.88x the body and
     still fits "PRESS & SPEAKING" on two lines at 390px.

     Without this the page hero's whole distinction -- caps, weight, scale --
     collapses into the post title on a phone, which is where most readers
     meet it. */
  .valencia-page-title {
    font-size: 32px;
    letter-spacing: 0.005em;
  }

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

  /* 17px, not the desktop 18px: mobile body should read one step SMALLER
     than desktop, not larger (the prior 19px inverted that). 17px is the
     refined reading size, safely above the 16px accessibility floor, and it
     anchors the mobile type scale — the post title's ~27px fluid floor sits
     at 1.59x this, a clear editorial hierarchy. */
  .valencia-entry-content p {
    font-size: 17px;
  }
}

/* ---------------------------------------------------------------
   3.20.0: full-screen panel, wiped down from the top (cydstumpel
   pattern), replacing the 3.19.0 drawer. Core's overlay markup and
   Interactivity script are untouched; this is CSS on core's classes.
   Mockup: valencia-mockups/nav-marquee-masthead-hero.html
   --------------------------------------------------------------- */
/* The panel's look lives on the container itself, NOT on core's
   .is-menu-open: core strips that class the instant the close button is
   tapped, and everything keyed to it vanished with it, so the panel could
   only ever open with a wipe and close with a cut. Now the open class
   carries just `display` and the clip-path, and both transition --
   `display .3s allow-discrete` keeps the box on screen until the wipe
   has finished, @starting-style gives the opening wipe a start value
   where display: none had none. Same mechanism the mockup uses.
   Browsers without allow-discrete (pre-2024) cut on close as before.
   Core's closed state is display: none from its own sheet; nothing here
   sets display on the closed panel.

   .hidden-by-default on every selector: core's open-state rules score
   (0,3,0) (`.is-menu-open:not(.disable-default-overlay)`) and print
   AFTER this sheet, so a plain (0,2,0) container selector lost its
   padding to core's clamp(1rem, var(--wp--style--root--padding-*)) --
   which, with root padding unset, computes to nothing at all. The class
   is always present on an overlayMenu:"always" navigation. */
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default {
  position: fixed;
  inset: 0;
  width: auto;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  /* 8rem / md / 2rem, the mockup's values at every width: the panel is
     its own composition, not the page, so it does not follow the 5% and
     7.5% content gutters. */
  padding: 8rem var(--wp--preset--spacing--md) 2rem;
  /* !important because core's
     `.wp-block-navigation__responsive-container:not(.is-menu-open.is-menu-open)
     { background-color: inherit !important }` fires the moment the open
     class goes, i.e. for the whole closing wipe: the panel went clear and
     its paper links painted over the article underneath. Nothing lighter
     beats an !important, and core's selector scores (0,3,0), so this one
     is restated below at (0,3,0) to win on source order. */
  background-color: var(--wp--preset--color--contrast);
  overflow-y: auto;
  z-index: 100;
  box-shadow: none;
  clip-path: inset(0 0 100%);
  transition:
    clip-path .3s cubic-bezier(.25, 1, .5, 1),
    display .3s allow-discrete;
}
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default {
  background-color: var(--wp--preset--color--contrast) !important; /* see above */
}
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default.is-menu-open {
  display: flex;
  clip-path: inset(0);
  animation: none; /* core's .1s overlay fade-in */
  @starting-style { clip-path: inset(0 0 100%); }
}

/* Logged-in chrome: the panel covers the viewport with inset: 0, so under
   the admin bar it has to start below it instead of at the true top. */
@media (min-width: 601px) {
  body.admin-bar .valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default {
    inset: var(--wp-admin--admin-bar--height, 32px) 0 0;
  }
}

/* Core's overlay wrappers carry their own spacing (dialog margin 0 25px,
   content padding-top 2rem + 24px) that put the first link 25px in and
   56px down from where the mockup has it. The panel's own padding is the
   only spacing. */
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation__responsive-close,
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation__responsive-dialog {
  width: 100%;
  margin: 0;
  padding: 0;
}
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation__responsive-container-content {
  padding: 0;
}

/* The tagline closes the panel, as in the mockup ("the panel repeats it
   at the bottom"). Text comes from Settings > General > Tagline through a
   data attribute functions.php puts on this container, so nothing is
   hard-coded here; a flex column puts the pseudo-element last. */
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default::after {
  content: attr(data-valencia-tagline);
  font-family: var(--wp--preset--font-family--body);
  font-size: .9375rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--wp--preset--color--base) 70%, transparent);
}

/* No scrim: the panel is the whole viewport. (3.19.1's html.has-modal-open::before is gone.) */

.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation__container,
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation__responsive-container-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
}
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation-item {
  border-bottom: 0;
  animation: none;
}
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation-item a {
  display: block;
  padding: 0;
  font-family: var(--wp--preset--font-family--display);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--wp--preset--color--base);
}
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-navigation-item a:hover,
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .current-menu-item a {
  color: var(--wp--preset--color--accent);
}

/* Social Icons live in the shared menu (post 6239): hidden in the inline
   row, shown under the links in the panel. */
.valencia-nav-top .wp-block-social-links { display: none; }
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-social-links {
  display: flex;
  gap: 1.1rem;
  /* 3rem above, 1rem below, then the tagline: the mockup's socials row. */
  margin-top: 3rem;
  padding: 0 0 1rem;
}
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-social-link {
  width: 1.6rem;
  height: 1.6rem;
}
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-social-link a {
  padding: 0;
  display: block;
  /* The link rule above sets 3rem/1.2 on every item's <a>; without this
     the icon sat in a 58px line box and the row was twice its height. */
  font-size: 0;
  line-height: 0;
}
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-social-link svg { width: 100%; height: 100%; fill: var(--wp--preset--color--base); }

/* Flat paper glyphs, no brand chips: core's default Social Icons style
   paints each <li> with the network's colour (threads black, bluesky
   blue...). The panel wants the mockup's monochrome row. */
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default .wp-block-social-links .wp-block-social-link {
  background: transparent;
  color: var(--wp--preset--color--base);
}

/* The panel draws its own wordmark (::before, site name via the same
   data attribute route as the tagline) instead of lifting the bar's
   wordmark above the panel. The bar's is only in the right place once the
   bar is stuck; open the panel at the top of a marquee page and it sat
   109px down, over the first link. The mockup avoids that with a
   scroll-on-open in JS. Pinned at the bar's stuck coordinates (22px down,
   md in) so the swap is invisible whenever the bar IS stuck. */
.valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default::before {
  content: attr(data-valencia-title);
  position: absolute;
  top: 22px;
  left: var(--wp--preset--spacing--md);
  font-family: var(--wp--preset--font-family--mark);
  font-size: 20px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--wp--preset--color--base);
}
@media (min-width: 601px) {
  body.admin-bar .valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default::before {
    top: calc(22px + var(--wp-admin--admin-bar--height, 32px));
  }
}

/* The masthead used to need its backdrop-filter and will-change stripped
   while the panel was open (both make it the containing block for fixed
   descendants). Since 3.20.1 the filter lives on .valencia-masthead::after
   and will-change is gone (core-masthead.css), so the panel measures
   against the viewport in every state, including the closing wipe after
   core has already removed html.has-modal-open. */

/* ---------------------------------------------------------------
   Toggle: Hamburgers "arrow" (Jonathan Suh, MIT) at 0.7 scale: 28x3px
   bars, 7px apart. Core renders two buttons (open, close) and swaps
   them, so the open button shows the flat bars and the close button
   animates its outer bars into the arrow from the flat state. Core's
   SVGs are hidden; the bars are pseudo-elements plus a gradient.
   --------------------------------------------------------------- */
.valencia-nav-overlay .wp-block-navigation__responsive-container-open,
.valencia-nav-overlay .wp-block-navigation__responsive-container-close {
  /* No `position` here. The close button is position: fixed (top-right,
     rule near the top of this sheet) and this shared rule, printing
     later at equal specificity, used to reset it to relative -- while
     the fixed rule's :hover twin still won on hover. So the X sat in the
     panel's flow at the top LEFT, then jumped to the top right the
     instant a finger touched it, and the tap landed on nothing: the
     3.20.0 "flashing close button" on phones and tablets. The open
     button gets its relative below, on its own. */
  width: 28px;
  height: 17px;
  box-sizing: content-box;
  padding: 8px;
  background: linear-gradient(var(--vb-bar) 0 0) center / 28px 3px no-repeat;
  --vb-bar: var(--wp--preset--color--accent-strong);
}
.valencia-nav-overlay .wp-block-navigation__responsive-container-open { position: relative; }
.valencia-nav-overlay .wp-block-navigation__responsive-container-open svg,
.valencia-nav-overlay .wp-block-navigation__responsive-container-close svg { display: none; }
.valencia-nav-overlay .wp-block-navigation__responsive-container-open::before,
.valencia-nav-overlay .wp-block-navigation__responsive-container-open::after,
.valencia-nav-overlay .wp-block-navigation__responsive-container-close::before,
.valencia-nav-overlay .wp-block-navigation__responsive-container-close::after {
  content: "";
  position: absolute;
  left: 8px;
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: var(--vb-bar);
  transition: transform .15s ease;
}
.valencia-nav-overlay .wp-block-navigation__responsive-container-open::before,
.valencia-nav-overlay .wp-block-navigation__responsive-container-close::before { top: 8px; }
.valencia-nav-overlay .wp-block-navigation__responsive-container-open::after,
.valencia-nav-overlay .wp-block-navigation__responsive-container-close::after  { bottom: 8px; }

/* Close: paper bars, outer two folded into the arrow. Keeps 3.19's fixed
   top-right placement (rule above) so open/close sit on the same spot. */
.valencia-nav-overlay .wp-block-navigation__responsive-container-close,
.valencia-nav-overlay .wp-block-navigation__responsive-container-close:hover { --vb-bar: var(--wp--preset--color--base); }
.valencia-nav-overlay .wp-block-navigation__responsive-container-close::before { animation: valencia-arrow-top .15s ease both; }
.valencia-nav-overlay .wp-block-navigation__responsive-container-close::after  { animation: valencia-arrow-bottom .15s ease both; }
@keyframes valencia-arrow-top    { to { transform: translate3d(-6px, 0, 0) rotate(-45deg) scale(0.7, 1); } }
@keyframes valencia-arrow-bottom { to { transform: translate3d(-6px, 0, 0) rotate(45deg) scale(0.7, 1); } }

@media (prefers-reduced-motion: reduce) {
  .valencia-nav-overlay .wp-block-navigation__responsive-container.hidden-by-default { transition: none; }
  .valencia-nav-overlay .wp-block-navigation__responsive-container-close::before,
  .valencia-nav-overlay .wp-block-navigation__responsive-container-close::after { animation: none; }
  .valencia-nav-overlay .wp-block-navigation__responsive-container-close::before { transform: translate3d(-6px, 0, 0) rotate(-45deg) scale(0.7, 1); }
  .valencia-nav-overlay .wp-block-navigation__responsive-container-close::after  { transform: translate3d(-6px, 0, 0) rotate(45deg) scale(0.7, 1); }
}