/* Rules that belong to every WordPress-backed body, in a file this app owns.
 *
 * The section stylesheets under /assets/css/ are the designer's -- a drop
 * replaces them wholesale, and anything we add there has to be re-applied by
 * hand every time (that is what the deviations ledger is for). What is here is
 * not styling: it is the small set of corrections that follow from the content
 * coming out of WordPress rather than out of a mockup.
 *
 * Loaded from the root layout, so it applies to every section. Most of it is
 * scoped to .cms_body -- the class the detail routes put on the element that
 * holds post_content -- so it cannot reach the designer's own figures. A rule
 * outside that scope has to earn it by naming a class only this app renders
 * (see the 記事送り rule at the bottom). */

/* WordPress writes width and height ATTRIBUTES on every image an editor
 * inserts. The section CSS constrains the width (max-width:100% globally,
 * width:100% inside a news figure) and nothing released the height, so the
 * attribute won: a 595x595 image rendered 500x595 on desktop and 145x595 on a
 * phone -- four times too tall. Editors insert arbitrary ratios, so the height
 * has to follow the width rather than the attribute.
 *
 * /labo/ escaped this because labo.css says the same thing for its own body
 * (task99). This is that rule, moved to where every section gets it. */
.cms_body img {
  height: auto;
}

/* An image an editor inserts fills the text column.
 *
 * WordPress writes the file's own pixel width on the block, so a 450px photo in
 * an 800px body column rendered at 450px hard against the left edge -- read as
 * "the layout is broken", not as "that file is small". news.css and column.css
 * already say width:100% for their own figures; /event/ and /voice/ never got
 * the rule, so the same post looked different depending on the section it was
 * filed under. This is that rule in the one file every section loads.
 *
 * alignleft/alignright are the editor ASKING for a narrow image, so they keep
 * their intrinsic width. .media_card_body is excluded because task 270 settled
 * the opposite question there: a 誌面 scan in a card fits, and never upscales.
 *
 * Note the trade this makes: a file narrower than the column is now scaled UP
 * and gets soft. Upload at 1600px or wider for a full-width photo. */
.cms_body:not(.media_card_body)
  figure.wp-block-image:not(.alignleft):not(.alignright)
  img {
  width: 100%;
}

/* ...and the figure itself spans the column. The browser default is
 * `figure { margin: 1em 40px }`, so without this the image above stops 40px
 * short on each side -- measured 720px inside an 800px /voice/ body while
 * /labo/ ran the full 840, because column.css already zeroes it there. Side
 * margins only: the vertical ones are the spacing between blocks.
 *
 * This one is NOT scoped away from .media_card_body, unlike the width rule
 * above. The default indented the 放映日時 table 40px inside its card, so its
 * rows did not line up with the text they belong to -- measured 1272 against a
 * 1232 card edge. That was reported as a separate defect and approved as part
 * of this change; the width rule stays excluded, because "fits the card" and
 * "fills the column" remain different questions (task 270). */
.cms_body figure {
  margin-left: 0;
  margin-right: 0;
}

/* 記事送り with only one neighbour: draw no divider (task199).
 *
 * .news_detail_nav / .event_detail_nav centre their links and hang the divider
 * off the CONTAINER at left:50%. With both links that lands between them, which
 * is the design. With one it lands on the single link's own edge -- the last
 * お知らせ shipped 「| 次に進む」, a rule dividing nothing.
 *
 * The mockup has no such state: its two links are both href="#", so "an article
 * with a neighbour on one side" never existed on paper. It exists in the data --
 * the newest and the oldest entry of every section are always in it.
 *
 * Here rather than in news.css/event.css because those are the designer's: a
 * drop replaces them wholesale and this would have to be re-applied by hand
 * every time. The selectors name markup only this app emits, so living in the
 * app's own stylesheet costs no reach.
 *
 * The class is REPEATED to buy specificity, not by accident. news.css nests its
 * rule inside .news_detail_area, so the cascade sees .news_detail_area
 * .news_detail_nav::before -- two classes -- and a single-class override loses
 * however late it is loaded. Measured: written once, /event/001/ lost its
 * divider and /news/030/ kept it, because event.css happens to declare the same
 * block at the top level. Repeating the class rather than naming .news_detail_area
 * keeps this working when a drop renames the wrapper; that rename would
 * otherwise put the stray divider back with nothing failing. */
.news_detail_nav.news_detail_nav:not(:has(a + a))::before,
.event_detail_nav.event_detail_nav:not(:has(a + a))::before {
  content: none;
}

/* Blocks an editor inserts that the design never drew (task 267).
 *
 * The section stylesheets were written against the mockups, and the mockups
 * contain paragraphs, headings and figures -- so that is what they style. A list
 * or a quote or a table has no rule anywhere, and one of them is actively
 * broken rather than merely plain: common.css resets `ul li { list-style: none }`
 * for the whole site (nav, footer, cards all rely on it), which strips the
 * markers off an editor's bulleted list too. It reads as a few stray lines.
 *
 * Scoped to .cms_body so the reset keeps working everywhere else, and written
 * here rather than in the section CSS because a designer drop replaces those
 * files wholesale (design ledger). Deliberately small: this restores browser
 * defaults the reset took away, it does not invent a look. */
.cms_body ul,
.cms_body ol {
  margin: 0 0 28px;
  padding-left: 1.5em;
}

.cms_body ul li {
  list-style: disc;
}

.cms_body ol li {
  list-style: decimal;
}

.cms_body li {
  margin-bottom: 8px;
  line-height: 1.75;
}

.cms_body li:last-child {
  margin-bottom: 0;
}

.cms_body blockquote {
  margin: 0 0 28px;
  padding: 12px 20px;
  border-left: 3px solid currentColor;
  opacity: 0.85;
}

/* Gutenberg wraps tables in <figure class="wp-block-table">, which the img rule
 * above already reaches; the table itself has no border by default and reads as
 * loose columns. */
.cms_body table {
  width: 100%;
  margin: 0 0 28px;
  border-collapse: collapse;
}

.cms_body th,
.cms_body td {
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  text-align: left;
  vertical-align: top;
}

.cms_body th {
  font-weight: 600;
  background: rgba(0, 0, 0, 0.04);
}

/* An editor's link has to look like one: only news.css styles anchors in a body,
 * so the same link inherits the body colour with no affordance on /labo/,
 * /event/ and /voice/.
 *
 * :where() drops this to zero specificity on purpose. news.css already styles
 * `a:not(.news_detail_button)` inside its body and a future drop may style the
 * others; the designer must win those without anyone remembering this file
 * exists. Against a bare browser default it still applies, which is the case
 * this is for. */
:where(.cms_body) a {
  text-decoration: underline;
}

:where(.cms_body) a:hover {
  text-decoration: none;
}

/* A table wider than the column must scroll, not push the page sideways. */
.cms_body figure.wp-block-table {
  overflow-x: auto;
}

/* Measured, not guessed: /labo/tax-return-required-documents/ ships a formula in
 * a <pre> and scrolls the whole page 20px sideways at 390px today. <pre> does
 * not wrap, so the widest line becomes the page width -- and the page body is
 * the one thing that must never scroll horizontally. Wrapping suits the content
 * here (prose formulas, not code), with a scroll for anything unbreakable. */
.cms_body pre {
  white-space: pre-wrap;
  overflow-x: auto;
  word-break: break-word;
}

/* The A. marker on a FAQ answer (task 269).
 *
 * faq.css hangs it with `padding-left:26px; text-indent:-26px` on the <p>, and
 * measured at 1440 that puts the marker two pixels OUTSIDE the white box, 26px
 * left of the Q. it should sit under, with the first line of the answer five
 * pixels left of every line below it. All three come from the same place: the
 * negative indent moves the first line off the padding edge instead of pulling
 * the marker back into a column.
 *
 * A negative MARGIN on the marker does what the indent was meant to do. The
 * paragraph keeps one left edge for all its lines, the marker is pulled back to
 * the padding edge -- the same column as Q. -- and the column is the marker's
 * own width plus the 10px gap .faq_question already uses between Q. and the
 * question text, so the two rows share one rhythm.
 *
 * NOT display:flex, which is the obvious fix and is wrong: every inline child
 * becomes a flex item, so an answer containing <a>こちら</a> breaks into four
 * pieces (design ledger C39).
 *
 * A second paragraph needs no rule of its own: with text-indent gone, its text
 * lands on the same padding edge as the first one's.
 *
 * The selector is long on purpose. faq.css nests these rules, so they compile to
 * `.faq_list_area .faq_answer p`, and a plain `.faq_answer p` here LOSES on
 * specificity -- but only for the properties faq.css also sets. Written short,
 * the negative margin below still applied while padding-left and text-indent did
 * not, which moved the marker 31px further out instead of pulling it back. The
 * `.cms_body` half also scopes this to pages this app builds; the static page
 * does not load cms.css at all.
 *
 * Measured at 1440 (guide = the Q. column, 24px in from the box):
 *   before  Q 24 | A -2 | first line 45 | rest 50
 *   after   Q 24 | A 24 | first line 55 | rest 55
 */
.faq_list_area .faq_answer.cms_body p {
  padding-left: 31px;
  text-indent: 0;
}

.faq_list_area .faq_answer.cms_body p span {
  width: 31px;
  margin-left: -31px;
}

/* Same construction in the mobile block's own units: the marker is 5.6vw wide
 * and .faq_question uses a 1.6vw gap. */
@media (max-width: 768px) {
  .faq_list_area .faq_answer.cms_body p {
    padding-left: 7.2vw;
    text-indent: 0;
  }

  .faq_list_area .faq_answer.cms_body p span {
    width: 7.2vw;
    margin-left: -7.2vw;
  }
}

/* メディア掲載 cards, once the body behind them is editable (task 270).
 *
 * media.css nests from .first_wrap, so its rules compile to four and five
 * selectors deep; every rule here carries the same chain plus a doubled class
 * to land above them. .cms_media is on the container for exactly that -- a
 * shorter selector loses silently, and a rule that loses only SOME of its
 * declarations is worse than one that loses all of them (see the FAQ note
 * above, where that produced the opposite of the intended fix).
 *
 * media.css is not edited. It is the designer's file and the next drop
 * overwrites it; these live here so the next drop costs nothing.
 */

/* The expanded height was pinned: 572px base, 904px .large, 983px .xlarge.
 * Those numbers were measured off three fixed bodies. An editor writing a
 * fourth paragraph would have it clipped, and deleting one would leave a hole. */
.first_wrap .media_container.cms_media .media_card.media_card.expanded {
  height: auto;
}

/* A portrait thumbnail on a TOGGLE card was expressed as .xlarge, which pinned
 * the header at 208px on its way to pinning the expanded height. The build
 * emits .tall for a portrait thumbnail and never .xlarge, so the part worth
 * keeping is restored here and the part that fought the content is not. */
.first_wrap .media_container.cms_media .media_card.media_card.tall.toggle_card {
  height: auto;
}

.first_wrap .media_container.cms_media .media_card.media_card.tall.toggle_card
  .media_card_header {
  height: 208px;
}

/* The static page drew the 放映日時 / 番組名 rows as a bespoke div structure.
 * A CMS body has a table block instead, and these rules make the table read as
 * those rows did: a fixed label column, a hairline under each row, and the red
 * tick under the label that .border_line .red_part used to draw. Modelling the
 * rows as meta fields was the alternative and is wrong -- there are three of
 * these cards, they do not share a row set, and nothing says the next one will. */
.media_card_body.cms_body table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.media_card_body.cms_body th,
.media_card_body.cms_body td {
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid #cccfd1;
  font-size: 16px;
  line-height: 24px;
  color: #32373e;
  text-align: left;
  vertical-align: top;
}

.media_card_body.cms_body tr > *:first-child {
  width: 120px;
  padding-right: 20px;
  border-bottom-color: #c50018;
  font-weight: 600;
}

.media_card_body.cms_body tr:not(:last-child) > * {
  padding-bottom: 8px;
}

.media_card_body.cms_body tr + tr > * {
  padding-top: 24px;
}

.media_card_body.cms_body td a {
  color: #0356cb;
  text-decoration: underline;
}

/* An image an editor drops into the body, and the 誌面 scan already in card 14.
 * The static markup gave it explicit width/height; a body image must fit the
 * card whatever size it arrives at. */
.media_card_body.cms_body img {
  max-width: 100%;
  height: auto;
}