/*
Theme Name: Pacific Citizen Twenty Seven
Template: twentytwentyfive
Description: Child theme of Twenty Twenty-Five for pacificcitizen.org, the newspaper of the Japanese American Citizens League.
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pacific-citizen-twenty-seven
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
*/

/*
 * Styles theme.json can't express. Loaded after Twenty Twenty-Five's stylesheet (see functions.php).
 * Uses native CSS nesting (no build step). Note: "&__suffix" does not work in native CSS; write full class names.
 */

/*
 * Bold in body text. Twenty Twenty-Five sets the body to weight 300, and the browser's default "bolder" for strong
 * only lifts 300 to 400. Lora starts at 400, so strong looked the same as the text around it.
 */
strong,
b {
  font-weight: 700;
}

/*
 * All captions: a little air above and below. Block-editor captions get their font, size and line height from
 * theme.json (elements.caption).
 */
.wp-element-caption,
.wp-caption-text {
  padding-block: 0.25em;
}

/*
 * Classic-editor captions ([caption] shortcode in older posts) aren't covered by theme.json's caption settings,
 * so they repeat them here. Keep these three values in step with theme.json elements.caption.
 */
.wp-caption-text {
  font-family: var(--wp--preset--font-family--inter);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.4;
}

/*
 * Section titles: a light label with a bold name after it, over a thin rule. "Category: News" on archive pages
 * (theme.json blocks.core/query-title) and the "Section title" heading style (styles/blocks/section-title.json) used
 * by the homepage, "More from [category]" and the 404 page. Only the bold part is here: WordPress wraps the archive
 * name in a span, which theme.json can't reach, and the related-posts heading links the category name.
 */
h1.wp-block-query-title span,
.is-style-pc-section a {
  font-weight: 800;
}

.is-style-pc-section a {
  color: inherit;
  text-decoration: none;

  &:hover,
  &:focus-visible {
    text-decoration: underline;
  }
}

/*
 * Previous / next story (patterns/post-navigation.php): a dark rule on top; on wider screens two columns with a thin
 * divider, the next story aligned right. Each link is a small gray capital label over an Inter headline.
 * The arrows are CSS text with empty alt text ("/ ''"), so screen readers skip them.
 */
.pc-post-nav {
  border-top: 1px solid var(--wp--preset--color--contrast);
  display: grid;
  font-family: var(--wp--preset--font-family--inter);

  .wp-block-post-navigation-link {
    margin: 0;
    padding-block: var(--wp--preset--spacing--30);
  }

  a {
    color: var(--wp--preset--color--contrast);
    display: block;
    text-decoration: none;

    &:hover .post-navigation-link__title,
    &:focus-visible .post-navigation-link__title {
      text-decoration: underline;
    }
  }

  .post-navigation-link__label {
    color: var(--wp--preset--color--accent-4);
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-block-end: 0.375rem;
    text-transform: uppercase;
  }

  .post-navigation-link-previous .post-navigation-link__label::before {
    content: "← " / "";
  }

  .post-navigation-link-next .post-navigation-link__label::after {
    content: " →" / "";
  }

  .post-navigation-link__title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    text-wrap: balance;
  }
}

@media (min-width: 600px) {
  .pc-post-nav {
    grid-template-columns: 1fr 1fr;

    .post-navigation-link-previous {
      padding-inline-end: var(--wp--preset--spacing--40);
    }

    .post-navigation-link-next {
      border-inline-start: 1px solid var(--wp--preset--color--accent-6);
      padding-inline-start: var(--wp--preset--spacing--40);
      text-align: end;

      /* Newest story: no next link, so no divider either. */
      &:empty {
        border: 0;
      }
    }
  }
}

/*
 * Page links under the story cards (patterns/post-list.php): the look of .pc-post-nav above, with the same dark rule,
 * small gray capital labels and CSS arrows. A three-column grid keeps the numbers centered on the first and last pages,
 * where Previous or Next is missing. nav in the selector beats core's flex layout rule.
 */
nav.wp-block-query-pagination {
  align-items: center;
  border-top: 1px solid var(--wp--preset--color--contrast);
  display: grid;
  font-family: var(--wp--preset--font-family--inter);
  gap: var(--wp--preset--spacing--20);
  grid-template-columns: 1fr auto 1fr;
  margin-block: var(--wp--preset--spacing--60);
  padding-block-start: var(--wp--preset--spacing--30);

  a {
    text-decoration: none;

    &:hover,
    &:focus-visible {
      text-decoration: underline;
    }
  }

  .wp-block-query-pagination-previous,
  .wp-block-query-pagination-next {
    color: var(--wp--preset--color--accent-4);
    font-size: 0.75rem;
    font-weight: 600;
    grid-row: 1;
    letter-spacing: 0.1em;
    padding-block: 0.5rem; /* a taller tap area than the small text */
    text-transform: uppercase;
  }

  .wp-block-query-pagination-previous {
    grid-column: 1;
    justify-self: start;

    &::before {
      content: "← " / "";
    }
  }

  .wp-block-query-pagination-next {
    grid-column: 3;
    justify-self: end;

    &::after {
      content: " →" / "";
    }
  }

  .wp-block-query-pagination-numbers {
    font-size: 0.875rem;
    font-weight: 600;
    grid-column: 2;
    grid-row: 1;
  }

  .page-numbers {
    color: var(--wp--preset--color--contrast);
    display: inline-block;
    min-width: 2rem;
    padding-block: 0.25rem;
    text-align: center;

    &.current {
      color: var(--wp--preset--color--pc-navy);
      text-decoration: underline;
      text-underline-offset: 0.25em;
    }
  }
}

/* Single post lead photo (templates/single.html). */
.wp-block-post-featured-image.pc-lead-image {
  /* Original shape, never taller than 80% of the screen. Tall photos shrink and center. */
  img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 80vh;
    margin-inline: auto;
  }

  /* Caption lines up with the text column below (the content width, theme.json), not the wider photo. */
  figcaption {
    max-width: var(--wp--style--global--content-size);
    margin-inline: auto;
  }
}

/*
 * Single post header (templates/single.html): kicker, headline, dek, byline and date share one column
 * (theme.json settings.custom.headlineWidth, 724px), a little wider than the 624px text below.
 * Inter's optical size follows the font size on its own (font-optical-sizing is auto), so big headlines get
 * Inter Display's tighter shapes without setting opsz. ss01 = open digits, cv11 = single-storey a.
 * Weight 600 and -0.025em tracking (Oct 26, was 640 and -0.02em) fit more words per line, so fewer line breaks;
 * text-wrap: pretty (Nov 8, was balance) avoids a one-word last line while keeping full lines on top.
 */
.pc-story-header {
  .wp-block-post-title {
    font-size: clamp(2rem, 1.25rem + 3vw, 3.125rem); /* 32px on phones, 50px from about 1000px wide */
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.14;
    font-feature-settings: "ss01", "cv11";
    text-wrap: pretty;
  }

  /* Dek: the editor-written excerpt (filter in functions.php). 18px on phones, 21px on desktop. */
  .wp-block-post-excerpt.pc-dek {
    color: var(--wp--preset--color--accent-4);
    font-family: var(--wp--preset--font-family--inter);
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
    line-height: 1.43;

    p {
      margin: 0;
    }
  }

  /* Byline and date: 14px, a thin rule above. Names bold, titles and date gray. */
  .pc-story-meta {
    border-top: 1px solid var(--wp--preset--color--accent-6);
    font-size: 0.875rem;
    padding-top: var(--wp--preset--spacing--30);

    .pc-byline a {
      color: var(--wp--preset--color--contrast);
      font-weight: 600;
      text-decoration: none;

      &:hover,
      &:focus-visible {
        text-decoration: underline;
      }
    }

    .wp-block-post-date {
      color: var(--wp--preset--color--accent-4);
      font-size: inherit;
    }
  }
}

/*
 * "Filed under" (all categories at the end of the story): larger, in sentence case, after a small gray label.
 * Navy color comes from the category label rule further down; this selector repeats .taxonomy-category to outrank it.
 */
.wp-block-post-terms.taxonomy-category.pc-filed-under {
  align-items: baseline;
  column-gap: 1.25rem;

  a {
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
  }

  .wp-block-post-terms__prefix {
    color: var(--wp--preset--color--accent-4);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

/*
 * Story text (the Post Content block with class pc-story in templates/single.html): a little more space above each
 * paragraph. Line height 1.65 is set on the block itself. Headings keep their own larger space above.
 */
.wp-block-post-content.pc-story > * + p {
  margin-block-start: 1.1em;
}

/* No one-word last line, and a more even right edge. Browsers without text-wrap: pretty wrap as before. */
.wp-block-post-content.pc-story > p {
  text-wrap: pretty;
}

/*
 * End mark: a small PC Blue square after the last paragraph, as magazines do. Only when the story ends with a
 * paragraph; a story ending with a photo or list gets no mark.
 */
.wp-block-post-content.pc-story > p:last-child::after {
  background-color: var(--wp--preset--color--pc-blue);
  content: "";
  display: inline-block;
  height: 0.5em;
  margin-inline-start: 0.4em;
  width: 0.5em;
}

/* Subheadings inside a story: more room above, so each one starts a new section. */
.wp-block-post-content {
  h1,
  h2,
  h3,
  h4 {
    margin-block-start: var(--wp--preset--spacing--50); /* 30px on phones, growing to 50px */
  }
}

/*
 * Subheadings in a single post (Post Content with class pc-story): calmer than Twenty Twenty-Five's, closer to the
 * 18 to 20px body text. h2 22 to 24px, h3 20px, h4 the body size; all Inter 600 instead of 700.
 * Space: 36px above on phones, growing to 56px; 24px below. More above than below, so a subhead belongs to the
 * text it introduces. The space below is set on the paragraph that follows, since sibling margins collapse.
 */
.wp-block-post-content.pc-story {
  :is(h2, h3, h4) {
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin-block-start: clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  }

  h2 {
    font-size: clamp(1.375rem, 1.25rem + 0.5vw, 1.5rem);
  }

  h3 {
    font-size: 1.25rem;
  }

  h4 {
    font-size: inherit;
  }

  > :is(h2, h3, h4) + * {
    margin-block-start: 1.5rem;
  }
}

/*
 * End-of-story print credit ([pc_print_credit] from pc-taxonomies.php), in the "In print" box with the Donate / Join
 * button (group pc-print-box in templates/single.html). Italic, one size step below the body text (16px on phones,
 * 18px on desktop), so it reads as a note on the story. The "In print" label is CSS, so it shows only with a credit.
 */
.pc-print-credit {
  color: var(--wp--preset--color--contrast);
  flex: 1 1 18rem;
  font-size: var(--wp--preset--font-size--medium);
  font-style: italic;
  line-height: 1.6;
  margin: 0;

  &::before {
    color: var(--wp--preset--color--pc-navy);
    content: "In print";
    display: block;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-block-end: 0.5em;
    text-transform: uppercase;
  }
}

/* The box: gray with a navy rule on top, only when there is a print credit. Otherwise the button stands alone. */
.pc-print-box:has(.pc-print-credit) {
  align-items: center;
  background-color: var(--wp--preset--color--light-gray);
  border-top: 3px solid var(--wp--preset--color--pc-navy);
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}

/* Donate / Join: smaller than the default button. Navy comes from theme.json (elements.button). */
/* Phones: logo and menu button side by side, the logo at the left and the button at the right. */
.pc-masthead {
  @media (max-width: 699px) {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;

    .pc-logo {
      flex: 0 1 290px;
      min-width: 0;
    }

    > .wp-block-navigation {
      flex: none;
      margin-block-start: 0;
    }
  }
}

/*
 * Temporary notice under the blue header on the homepage (patterns/header.php, Nov 8): a slim gray bar, small Inter text. Flush
 * with the blue above it. Contrast text on Light Gray is about 17:1. The close button sits at the right, centered on
 * the bar; the text keeps clear of it on both sides so it stays centered.
 */
.pc-notice {
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.875rem;
  line-height: 1.4;
  margin-block-start: 0;
  padding: 0.5rem var(--wp--preset--spacing--30);
  position: relative;

  p {
    margin: 0;
    padding-inline: 2.5rem;
  }
}

/* 32px square: above WCAG's 24px minimum target. */
.pc-notice__close {
  background: none;
  border: 0;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
  font-size: 1.5rem;
  height: 2rem;
  inset-block-start: 50%;
  inset-inline-end: var(--wp--preset--spacing--20);
  line-height: 1;
  margin-block: 0; /* the group's block gap would push it down */
  padding: 0;
  position: absolute;
  transform: translateY(-50%);
  width: 2rem;

  &:hover {
    background-color: var(--wp--preset--color--base);
  }

  &:focus-visible {
    outline: 2px solid var(--wp--preset--color--pc-navy);
    outline-offset: 2px;
  }
}

/*
 * Header logo on narrow screens: 290 by 50, left aligned. max-width because the image block sets its 696px width
 * inline. !important because the constrained layout centers its children with !important. text-align because core
 * centers the image inside an aligncenter figure.
 */
.pc-logo {
  @media (max-width: 999px) {
    display: block;
    margin-inline: 0 !important;
    text-align: start;

    img {
      max-width: min(290px, 100%);
    }
  }
}

/*
 * Header menu: tighter than the body's 1.8. In the row, a small gap when the links wrap onto two lines. In the open
 * overlay menu, a smaller block gap, which core uses between its links; still comfortable tap areas.
 */
header.wp-block-template-part .wp-block-navigation__responsive-container {
  line-height: 1.3;

  &:not(.is-menu-open) .wp-block-navigation__container {
    row-gap: 0.25rem;
  }

  &.is-menu-open {
    --wp--style--block-gap: 0.75rem;

    /* Less empty space above the links than core's, more below Donate / Join, and a break before Search. */
    .wp-block-navigation__responsive-container-content {
      padding-block: 2rem 3rem;
    }

    .wp-block-search {
      margin-block-start: 0.75rem;
    }
  }
}

/*
 * Header menu on narrow screens. Under 1000px it starts at the left, to match the left-aligned logo. Under 800px the
 * gaps get a little smaller so the row still fits. Under 700px the collapsed menu button replaces the row:
 * core's own switch is fixed at 600px, so these two rules move it. An open overlay menu is left alone.
 */
header.wp-block-template-part {
  .wp-block-navigation__responsive-container:not(.is-menu-open) {
    @media (max-width: 999px) {
      --navigation-layout-justification-setting: flex-start;

      .wp-block-navigation__container {
        justify-content: flex-start;
      }
    }

    @media (max-width: 799px) {
      :is(.wp-block-navigation__responsive-container-content, .wp-block-navigation__container) {
        gap: 0.75rem;
      }
    }
  }

  @media (max-width: 699px) {
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
      display: none;
    }

    .wp-block-navigation__responsive-container-open:not(.always-shown) {
      display: flex;
    }
  }
}

/*
 * Search inside a menu (header): a plain icon in the menu's own color, not Twenty Twenty-Five's big dark button.
 * When clicked it opens a small field sized like the menu text: a light blue box (PC Blue mixed with 80% white)
 * with no border, dark text and a gray placeholder, slightly rounded like the other search forms.
 */
.wp-block-navigation .wp-block-search {
  .wp-block-search__button {
    background: transparent;
    border: 0;
    color: inherit;
    margin: 0;
    padding: 0.25rem;

    svg {
      height: 1.25rem;
      width: 1.25rem;
    }
  }

  .wp-block-search__input {
    align-self: center; /* the wrapper is a flex row; without this the field stretches to the icon button's height */
    background-color: color-mix(in srgb, var(--wp--preset--color--base) 80%, var(--wp--preset--color--pc-blue));
    border: 0;
    border-radius: 0.25rem; /* same as .pc-search-form */
    color: var(--wp--preset--color--contrast);
    font-size: 0.875rem;
    line-height: 1.4;
    padding: 0.125rem 0.375rem;

    &::placeholder {
      color: var(--wp--preset--color--accent-4); /* about 4.6:1 on the light blue */
    }

    /* No focus ring: the field only appears when it has focus, and the cursor is in it. */
    &:focus,
    &:focus-visible {
      box-shadow: none;
      outline: none;
    }
  }
}

/*
 * Donate / Join in the header menu (pc27_donate_button() in patterns/header.php): a navy pill at the menu's own
 * font size, so it reads as part of the row. In the phone overlay menu (navy background) it flips to white on navy.
 */
.wp-block-navigation .pc-donate .wp-block-button__link {
  border-radius: 999px;
  font-size: inherit;
  line-height: 1.4; /* the body's 1.8 made the pill tall; the padding is what shapes it */
  padding: 0.2em 1em;
  white-space: nowrap;
}

.wp-block-navigation__responsive-container.is-menu-open .pc-donate .wp-block-button__link {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--pc-navy);
}

/* Homepage "See all Opinion" links under each section (patterns/home.php): small bold Inter, navy, with an arrow. */
.pc-see-all {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  a {
    color: var(--wp--preset--color--pc-navy);
    text-decoration: none;

    &:hover,
    &:focus-visible {
      text-decoration: underline;
    }
  }
}

/*
 * One arrow for "See all" links and the cards' "Read more": the same SVG arrow as the plugin's View issue button
 * (.pc-issue__view::after in pc-taxonomies.css), drawn in the text color through a mask, with the same nudge on hover.
 * An empty pseudo-element, so screen readers say nothing for it.
 */
.pc-see-all a::after,
.pc-card .wp-block-post-excerpt__more-text a::after {
  background-color: currentColor;
  content: "";
  display: inline-block;
  height: 1.1em;
  margin-inline-start: 0.4em;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='M12 5l7 7-7 7'/></svg>") center / contain no-repeat;
  transition: transform 0.15s ease;
  vertical-align: -0.2em;
  width: 1.1em;
}

@media (prefers-reduced-motion: no-preference) {
  .pc-see-all a:hover::after,
  .pc-card .wp-block-post-excerpt__more-text a:hover::after {
    transform: translateX(2px);
  }
}

/*
 * Footer menu (patterns/footer.php): when it wraps, the lines sit close. The space between lines was the body's 1.8
 * line height plus the flex gap (Twenty Twenty-Five's 1.2rem block gap, rows and columns alike). Only the row gap
 * shrinks; the space between links on a line stays.
 */
footer.wp-block-template-part .wp-block-navigation {
  line-height: 1.3;
  row-gap: 0.5rem;
}

/*
 * Social icons (pc27_social_links() in functions.php): white on the header's navy band and the footer's blue. 24px icons
 * with 8px padding make a 40px tap area, the height of the navy band. The two selector classes beat core's logos-only rules.
 */
.wp-block-social-links.pc-social {
  gap: 0;
  margin-block: 0;

  .wp-social-link {
    color: var(--wp--preset--color--base);
  }

  .wp-block-social-link-anchor {
    display: flex;
    padding: 8px;

    &:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: -2px;
    }
  }

  svg {
    height: 24px;
    width: 24px;
  }
}

/*
 * Support box (pc27_support_box() in functions.php): the heading, one line, the Donate / Join button and the "Spread the
 * word" line. Used as the homepage house ad, beside the issue page header and at the top of the footer.
 * Newspaper minimalism (Nov 5): a pale blue panel under a navy rule (the rule matches .pc-print-box), left aligned. A
 * serif heading over Inter text sets it apart from the serif stories around it. A small navy pill is the one solid shape.
 * Same size in all three places.
 */
.pc-support {
  background: color-mix(in srgb, var(--wp--preset--color--pc-blue) 5%, var(--wp--preset--color--base));
  border-top: 3px solid var(--wp--preset--color--pc-navy);
  font-family: var(--wp--preset--font-family--inter);
  padding: var(--wp--preset--spacing--30);

  .wp-block-heading {
    color: var(--wp--preset--color--pc-navy);
    font-family: var(--wp--preset--font-family--lora);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }

  .wp-block-paragraph {
    font-size: 0.875rem;
    line-height: 1.5;
    margin-block-start: 0.5rem;
  }

  .wp-block-buttons {
    margin-block-start: 1rem;
  }

  /* The "Spread the word" line: a quiet footnote under a faint rule. */
  .wp-block-buttons + .wp-block-paragraph {
    border-top: 1px solid var(--wp--preset--color--accent-6);
    color: var(--wp--preset--color--accent-4);
    font-size: 0.8125rem;
    margin-block-start: 1.25rem;
    padding-block-start: 0.75rem;

    strong,
    a {
      color: var(--wp--preset--color--contrast);
    }

    strong {
      font-weight: 600;
    }
  }
}

/* One small Donate / Join pill for the Support box and the end-of-story print box. Navy comes from theme.json (elements.button). */
:is(.pc-support, .pc-print-box) .wp-block-button__link {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5em 1.25em;
}

/*
 * Homepage top section (patterns/home.php): top stories left, latest issue and Support box right. The right column is a
 * fixed 300px (the width of a standard banner); the stories take the rest. Phones: one column, stories first.
 * The 2em gap and the 782px switch match what the Columns block did before.
 */
.pc-home-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2em;

  @media (min-width: 782px) {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

/* Homepage (patterns/home.php): under the latest issue card. */
.pc-home .pc-support {
  margin-block-start: var(--wp--preset--spacing--50);
}

/*
 * Issue page (templates/taxonomy-print_issue.html): the masthead block ([pc_issue_header]) and the Support box share
 * one flex row. Wide screens: the masthead takes two thirds of the spare width, the box one third. Phones: the box
 * wraps under the masthead at full width.
 */
.pc-issue-top {
  .pc-issue-header {
    flex: 2 1 32rem;
  }

  .pc-support {
    flex: 1 1 18rem;
    margin-block-end: 2rem; /* same as the masthead block's bottom margin in pc-taxonomies.css */
  }
}

/* Homepage latest issue card ([pc_issue] from pc-taxonomies.php, max 14rem wide there): centered in its column. */
.pc-home .pc-issue--single {
  margin-inline: auto;
}

/*
 * Cancels `.post.type-post` (box with border, padding and gray background) from the WPBakery Custom CSS saved on the
 * live Home page (page 5). WPBakery prints it into the page head under any theme. Remove this once WPBakery is off.
 * The 2rem puts back the gap between section cards (blockGap in patterns/home.php), which that margin hides.
 */
.pc-home li.post.type-post {
  margin-block: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
}

.pc-home .wp-block-post-template:not(.is-layout-grid) > li.post.type-post + li.post.type-post {
  margin-block-start: 2rem;
}

/* Story cards (pc27_story_card() in functions.php). */
.pc-card {
  /*
   * Headlines: smaller and semibold, so a list reads calmer than a story page. The lead story keeps the heading size
   * and 700. Inter is variable (100 to 900), and its optical size axis adjusts spacing to the size by itself.
   */
  &.pc-card--standard .wp-block-post-title {
    font-size: 1.25rem;
    font-weight: 600;
  }

  &:is(.pc-card--compact, .pc-card--text) .wp-block-post-title {
    font-size: 1.125rem;
    font-weight: 600;
  }

  /* No one-word last line in headlines and excerpts, as in the story text. */
  .wp-block-post-title,
  .wp-block-post-excerpt {
    text-wrap: pretty;
  }

  /* Bylines: 500, a step lighter than Twenty Twenty-Five's 600 for Post Terms, so the headline stays the boldest line. Color unchanged. */
  .wp-block-post-terms.taxonomy-byline {
    font-weight: 500;
  }

  /* Category, byline and date on one line; when it wraps, the lines sit close. */
  .pc-card__meta {
    align-items: baseline;
    column-gap: 0.625rem;
    line-height: 1.3;
    row-gap: 0.125rem;
  }

  /* Excerpts: tighter than the body's 1.8. */
  .wp-block-post-excerpt {
    line-height: 1.5;
  }

  /* "Read more" sits right under the excerpt, aligned right. Its arrow is the shared one (after .pc-see-all). */
  .wp-block-post-excerpt__more-text {
    margin-block-start: 0;
    text-align: right;
  }
}

/*
 * Compact and text cards (text = compact without the image): a tighter headline, and no paragraph margin in the
 * excerpt, so the card stays compact.
 */
.pc-card:is(.pc-card--compact, .pc-card--text) {
  .wp-block-post-title {
    line-height: 1.25;
  }

  .wp-block-post-excerpt p {
    margin: 0;
  }
}

/* Text card excerpt: one line, cut off with "…" where it runs out of room. */
.pc-card--text .wp-block-post-excerpt__excerpt {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Compact card: text on the left, a 110px image on the right spanning the text's three rows (headline, meta line,
 * excerpt). Without a featured image the "auto" column is empty and the text takes the full width.
 */
.pc-card--compact {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.75rem;

  > * {
    grid-column: 1;
  }

  > .wp-block-post-featured-image {
    grid-column: 2;
    grid-row: 1 / span 3;
    width: 110px;
    margin: 0;
  }
}

/*
 * Category labels everywhere (cards, the single post kicker, any Post Terms block set to Categories): PC Navy
 * capitals, 13px, widely spaced, no pill (Oct 26). Inter comes from theme.json (blocks.core/post-terms).
 * Bylines and tags are not affected. Navy on white is about 14:1.
 */
.wp-block-post-terms.taxonomy-category {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.75rem;

  a {
    color: var(--wp--preset--color--pc-navy);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;

    &:hover,
    &:focus-visible {
      text-decoration: underline;
    }
  }

  /* The ", " between categories: the gap separates them. */
  .wp-block-post-terms__separator {
    display: none;
  }
}

/* "No stories found" pages (search, empty archives): keep the footer from riding up to the header. */
.wp-block-query-no-results {
  min-height: 60vh;
}
/*
 * Share button ([pc27_share] in functions.php): a small outlined Inter button. At the end of the story it is
 * centered on its own line. In a flex row (the byline and date row under the headline) it goes to the right end.
 */
.pc-share {
  margin-inline: auto;
  width: fit-content;
}

.is-layout-flex > .pc-share {
  margin-inline: auto 0;
}

.pc-share__button,
.pc-share__copy {
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.pc-share__button {
  align-items: center;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--wp--preset--color--pc-navy);
  display: inline-flex;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;

  &:hover,
  &:focus-visible {
    background-color: var(--wp--preset--color--pc-navy);
    color: var(--wp--preset--color--base);
  }
}

/*
 * The popover menu. Browsers with CSS anchor positioning open it under its button, right edges lined up;
 * others show it centered on the screen (the browser default for popovers).
 */
.pc-share__menu {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--accent-6);
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.8125rem;
  line-height: 1.1;
  min-width: 6rem;
  padding: 0.375rem 0;

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  a,
  .pc-share__copy {
    background: none;
    border: 0;
    box-sizing: border-box; /* padding inside the 100% width, so items never overflow the menu */
    color: var(--wp--preset--color--contrast);
    display: block;
    font-size: inherit;
    padding: 0.375rem 1rem;
    text-align: start;
    text-decoration: none;
    width: 100%;

    &:hover,
    &:focus-visible {
      background-color: var(--wp--preset--color--light-gray);
    }
  }
}

@supports (position-area: block-end) {
  .pc-share__menu {
    margin: 0.25rem 0 0;
    position-area: block-end span-inline-start;
    position-try-fallbacks: flip-block;
  }
}

/*
 * Search forms on the 404 and search results pages (Search blocks with class pc-search-form): slimmer than
 * Twenty Twenty-Five's, with small padding and slight rounding, at most 32rem wide.
 * Button: PC Blue, navy on hover. White on PC Blue is about 3.3:1, which passes only for large text,
 * so the label is bold 19px, the same as the issue page's Download PDF button.
 */
.wp-block-search.pc-search-form {
  max-width: 32rem;

  .wp-block-search__input {
    border: 1px solid var(--wp--preset--color--accent-4);
    border-radius: 0.25rem;
    font-size: 1rem; /* 16px or more, or iOS Safari zooms in on tap */
    padding: 0.5rem 0.75rem;
  }

  .wp-block-search__button {
    background-color: var(--wp--preset--color--pc-blue);
    border: 0;
    border-radius: 0.25rem;
    color: var(--wp--preset--color--base);
    font-family: var(--wp--preset--font-family--inter);
    font-size: 1.1875rem;
    font-weight: 700;
    padding: 0.375rem 1rem;

    &:hover,
    &:focus-visible {
      background-color: var(--wp--preset--color--pc-navy);
    }
  }
}

/* Search block labels ("Search") everywhere: Inter, like other interface text. The label otherwise inherits Lora. */
.wp-block-search__label {
  font-family: var(--wp--preset--font-family--inter);
}

/*
 * Contact Form 7 forms (Nov 9; the plugin is on live only). Salient styled them; CF7's own stylesheet only covers the
 * spinner and messages. Plain and quiet: Inter throughout, fields like the search form (gray border, 0.25rem
 * corners, 16px text so iOS Safari does not zoom), a navy focus ring, the submit as the site's navy pill.
 * Checked against the live subscription form on /about/ (CF7 6.2.4.1 with Conditional Fields): question text, <br>,
 * then span.wpcf7-form-control-wrap holding the field, in <p>s; radio options are span.wpcf7-list-item.
 * Error red #b32d2e is about 6:1 on white. Scoped as .wpcf7 .wpcf7-form so it outranks CF7's own ".wpcf7 form ..."
 * rules for the message box, whichever stylesheet loads last.
 */
.wpcf7 .wpcf7-form {
  --pc-form-error: #b32d2e;
  font-family: var(--wp--preset--font-family--inter);
  font-size: 0.9375rem;
  line-height: 1.4;
  margin-inline: auto;
  max-width: var(--wp--style--global--content-size); /* the text column width, centered */

  /*
   * Question text stays regular weight: on live most questions are plain text in a <p>, not a <label>, so styling
   * labels would bold only some of them. Salient's two-column wrappers (.content-column.one_half) are left alone,
   * so those pairs stack.
   */
  p {
    margin-block: 0 1.25rem;
  }

  .wpcf7-form-control-wrap {
    display: block;
    margin-block-start: 0.375rem;
  }

  :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
    background-color: var(--wp--preset--color--base);
    border: 1px solid var(--wp--preset--color--accent-4);
    border-radius: 0.25rem;
    box-sizing: border-box;
    color: var(--wp--preset--color--contrast);
    font: inherit;
    font-size: 1rem;
    font-weight: 400;
    padding: 0.625rem 0.75rem;
    width: 100%;

    &:focus {
      border-color: var(--wp--preset--color--pc-navy);
      outline: 2px solid var(--wp--preset--color--pc-navy);
      outline-offset: 1px;
    }
  }

  textarea {
    min-height: 10rem;
    resize: vertical;
  }

  /* Checkboxes, radio buttons and the acceptance box: navy when checked, one per line. */
  :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--wp--preset--color--pc-navy);
    height: 1.125rem;
    margin: 0 0.5rem 0 0;
    vertical-align: -0.2em;
    width: 1.125rem;
  }

  .wpcf7-list-item {
    display: block;
    font-weight: 400;
    margin: 0 0 0.375rem;
  }

  .wpcf7-submit {
    background-color: var(--wp--preset--color--pc-navy);
    border: 0;
    border-radius: 999px;
    color: var(--wp--preset--color--base);
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem 1.75rem;

    &:hover {
      background-color: color-mix(in srgb, var(--wp--preset--color--pc-navy) 85%, transparent);
    }

    &:focus-visible {
      outline: 2px solid var(--wp--preset--color--pc-navy);
      outline-offset: 2px;
    }

    &:disabled {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }

  /* Field errors: a red border and a short line under the field. */
  .wpcf7-not-valid {
    border-color: var(--pc-form-error);
  }

  .wpcf7-not-valid-tip {
    color: var(--pc-form-error);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-block-start: 0.375rem;
  }

  /*
   * The message after sending: a left rule instead of CF7's colored box. Navy when sent, red for every problem
   * (missing fields, failed send, spam). Stays empty, and so invisible, until CF7 fills it.
   */
  .wpcf7-response-output {
    border: 0;
    border-inline-start: 3px solid var(--pc-form-error);
    font-size: 0.9375rem;
    margin: 1.5rem 0 0;
    padding: 0.25rem 0 0.25rem 1rem;

    &:empty {
      display: none;
    }
  }

  &.sent .wpcf7-response-output {
    border-inline-start-color: var(--wp--preset--color--pc-navy);
  }
}

/* 404 page message, search box and links (patterns/404.php): centered, with room above and below the search box. */
.pc-404 {
  text-align: center;

  .wp-block-search {
    margin-block: var(--wp--preset--spacing--60);
    margin-inline: auto;
  }
}

/*
 * Issue page masthead ([pc_issue_header] from pc-taxonomies.php): grows with the window, 13px on phones up to
 * 18px from about 1200px wide (13px at 400px, +0.625px per 100px). Overrides the plugin's fixed 0.8125rem;
 * this stylesheet loads after the plugin's, so the same selector wins.
 */
.pc-issue-header__masthead {
  font-size: clamp(0.8125rem, 0.65625rem + 0.625vw, 1.125rem);
}

/* Byline titles on single posts ("By Alex Sample, Staff Writer", filter in functions.php): gray, about 5.7:1 on white. */
.pc-byline__title {
  color: var(--wp--preset--color--accent-4);
}

/*
 * Static pages (templates/page.html): the content area is the page width (theme.json settings.custom.pageWidth) for
 * Columns layouts, but text placed directly on the page (not inside Columns) keeps the content width, centered.
 */
.pc-page-content > :is(p, h2, h3, h4, h5, h6, ul, ol, blockquote) {
  max-width: var(--wp--style--global--content-size);
  margin-inline: auto;
}

/*
 * Left and right aligned images inside a story: float to the edge of the lead photo area (the page width,
 * theme.json settings.custom.pageWidth, same as templates/single.html), not the edge of the window. The story block
 * is full width, so without this a float sits at the far side of a large screen. The margin is half the space outside
 * the page width; on screens narrower than that it is 0. The image then hangs partly into the margin beside the text.
 */
.wp-block-post-content.is-layout-constrained {
  > .alignleft {
    margin-inline-start: max(0px, (100% - var(--wp--custom--page-width)) / 2);
  }

  > .alignright {
    margin-inline-end: max(0px, (100% - var(--wp--custom--page-width)) / 2);
  }

  /*
   * Floated photos need a set width. Core shows them as display: table, which grows to the photo's own size
   * (a 1296px original stays 1296px wide), and "max-width: 100%" on the img can't stop a table from growing.
   * 352px, or half the story width on phones. Photos an editor resized (is-resized) keep the width they chose.
   */
  > .wp-block-image:is(.alignleft, .alignright):not(.is-resized) {
    width: min(22rem, 50%);

    img {
      width: 100%;
    }
  }
}