/* =====================================================================
   article-body - the parts of a migrated body that must look the same
   whichever content type is holding them.

   Four templates, four body wrappers, but the bodies all came from the same
   old site. Rules shared by more than one of them live here, in one copy,
   rather than the same block repeated in each page stylesheet and drifting.

   Nothing here needs a class on the content: everything is matched by element
   inside the body wrapper, so a plain link or a pasted table gets the site's
   styling with no markup for an editor to learn.

   Scope is deliberate and differs by rule:
     links  - all four bodies, so a link reads the same anywhere on the site.
     tables - Local Insights and Expert Guides only. Industrial Parks have
              their own spec-sheet design (the light grey grid in
              industrial-park-detail.css) which the client asked to keep as it
              came across, so park tables are left alone.

   Loaded on the detail views only (inc/enqueue.php).
   ===================================================================== */

/* ---- inline links --------------------------------------------------------
   Site red, underlined, navy on hover - the same in any body. The old site
   coloured its links teal with a style attribute on the tag itself; that
   attribute is removed on output by og_strip_body_link_colour(), so these
   rules win without !important anywhere.

   `a:not([class])` - running text only. A body wrapper holds more than the
   article: the park page's お問い合わせ button, chips and card links live inside
   it too, and every one of those carries a class of its own. All 412 links that
   came across in the migrated bodies carry none, so the two sets separate
   exactly. Without this the CTA button came out red and underlined on its navy
   ground. ---- */
.ind-body a:not([class]),
.egd-body a:not([class]),
.ipd-body a:not([class]),
.nwd-body a:not([class]) { color: #C8102E; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; word-break: break-word; transition: color .15s ease; }
.ind-body a:not([class]):hover,
.egd-body a:not([class]):hover,
.ipd-body a:not([class]):hover,
.nwd-body a:not([class]):hover { color: #0C2D5E; }

/* A link wrapping an image is not running text - no underline under a photo. */
.ind-body a:not([class]):has(> img),
.egd-body a:not([class]):has(> img),
.ipd-body a:not([class]):has(> img),
.nwd-body a:not([class]):has(> img) { text-decoration: none; }

/* ---- data tables ---------------------------------------------------------
   Local Insights and Expert Guides only - see the scope note above. ---- */
    /* ---- table - clean editorial data table -------------------------------
       Imported bodies carry raw <table> markup; og_format_body_tables() wraps
       each one in the core block's figure and marks the layout tables (an image
       beside a paragraph) separately, so only real data tables get the frame,
       the navy header and the striped rows. ---- */
    .ind-body .wp-block-table,
    .egd-body .wp-block-table { margin: 32px 0; }
    .ind-body .wp-block-table > table,
    .egd-body .wp-block-table > table
    .ind-body > table:not(.og-layout-table),
    .egd-body > table:not(.og-layout-table) { min-width: 560px; }
    /* Fallback for a table the filter did not wrap (DOM extension missing):
       scroll it rather than force the whole page wide on mobile. */
    .ind-body > table:not(.og-layout-table),
    .egd-body > table:not(.og-layout-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .ind-body figure.wp-block-table,
    .egd-body figure.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #E6EAF0; border-radius: 12px; box-shadow: 0 1px 3px rgba(6, 22, 41, 0.05); }
    .ind-body table,
    .egd-body table { width: 100%; border-collapse: collapse; font-family: "Noto Sans JP", system-ui, sans-serif; font-size: 14px; color: #2E3A48; font-variant-numeric: tabular-nums; }
    .ind-body thead th,
    .egd-body thead th { background: #0C2D5E; color: #fff; font-weight: 600; font-size: 12.5px; line-height: 1.5; letter-spacing: 0.02em; text-align: center; padding: 13px 18px; border: 0; border-left: 1px solid rgba(255,255,255,0.11); border-bottom: 1px solid rgba(255,255,255,0.11); vertical-align: middle; }
    /* Bold runs inside a promoted header keep the header's own colour - the
       body's <strong> is near-black and would sit on the navy band. */
    .ind-body thead th strong,
    .egd-body thead th strong
    .ind-body thead th b,
    .egd-body thead th b
    .ind-body thead th span,
    .egd-body thead th span
    .ind-body thead th a,
    .egd-body thead th a { color: inherit; }
    .ind-body thead tr:first-child th:first-child,
    .egd-body thead tr:first-child th:first-child { border-left: 0; }
    .ind-body thead tr:last-child th,
    .egd-body thead tr:last-child th { border-bottom: 0; }
    .ind-body tbody th,
    .egd-body tbody th
    .ind-body tbody td,
    .egd-body tbody td { padding: 13px 18px; border: 0; border-top: 1px solid #EDF0F4; text-align: center; line-height: 1.6; color: #3A4653; vertical-align: top; }
    .ind-body tbody tr > :first-child,
    .egd-body tbody tr > :first-child { text-align: left; font-weight: 700; color: #0C2D5E; }
    /* Row labels are Japanese sentences as often as they are short keys, so they
       wrap inside a tinted stub column instead of forcing the table wide. */
    .ind-body .og-table tbody tr > :first-child,
    .egd-body .og-table tbody tr > :first-child { white-space: normal; background: #F7F9FC; min-width: 132px; }
    .ind-body .og-table tbody tr:nth-child(even) > :first-child,
    .egd-body .og-table tbody tr:nth-child(even) > :first-child { background: #F3F6FB; }
    .ind-body tbody tr:nth-child(even),
    .egd-body tbody tr:nth-child(even) { background: #FAFBFD; }
    .ind-body tbody tr:hover,
    .egd-body tbody tr:hover { background: #F3F6FB; }

    /* Cell contents: the body's 16.5px text and red-dot bullets are too heavy
       inside a column, so lists and paragraphs step down to the table's size. */
    .ind-body .og-table td > ul,
    .egd-body .og-table td > ul
    .ind-body .og-table td > ol,
    .egd-body .og-table td > ol
    .ind-body .og-table th > ul,
    .egd-body .og-table th > ul
    .ind-body .og-table th > ol,
    .egd-body .og-table th > ol { margin: 0; padding-left: 2px; text-align: left; }
    .ind-body .og-table li,
    .egd-body .og-table li { font-size: 13.5px; line-height: 1.75; padding-left: 16px; margin-bottom: 5px; }
    .ind-body .og-table li:last-child,
    .egd-body .og-table li:last-child { margin-bottom: 0; }
    .ind-body .og-table ul > li::before,
    .egd-body .og-table ul > li::before { left: 0; top: 9px; width: 5px; height: 5px; }
    .ind-body .og-table ol > li,
    .egd-body .og-table ol > li { padding-left: 22px; }
    .ind-body .og-table ol > li::before,
    .egd-body .og-table ol > li::before { font-size: 13px; min-width: 18px; }
    .ind-body .og-table p,
    .egd-body .og-table p { font-size: 13.5px; line-height: 1.75; margin: 0 0 8px; }
    .ind-body .og-table p:last-child,
    .egd-body .og-table p:last-child { margin-bottom: 0; }
    .ind-body .og-table img,
    .egd-body .og-table img { border-radius: 4px; }

    /* A cell holding a sentence rather than a value reads left, so its lines
       start on a common edge instead of centring one by one. Marked by
       og_transform_body_tables() from the cell's own text length, so a long
       column reads left while the short columns beside it stay centred.
       The heading above such a column follows it, or the header would sit
       centred over left-aligned text. */
    .ind-body .og-table tbody .og-cell--prose,
    .egd-body .og-table tbody .og-cell--prose { text-align: left; }
    .ind-body .og-table thead .og-cell--prose,
    .egd-body .og-table thead .og-cell--prose { text-align: left; }

    /* A group heading inside the table - 住宅, 事務所 - spanning the width above
       the lines it covers. Its own band, so it reads as a division of the table
       rather than a row with a missing value. */
    .ind-body .og-table tbody .og-row--group > *,
    .egd-body .og-table tbody .og-row--group > * { background: #EEF2F8; text-align: left; font-weight: 700; color: #0C2D5E; padding-top: 11px; padding-bottom: 11px; }
    .ind-body .og-table tbody .og-row--group:hover > *,
    .egd-body .og-table tbody .og-row--group:hover > * { background: #EEF2F8; }
    /* The stub-column tint and the striping both key off the first cell; a
       spanning heading is neither, so it keeps its own colour. */
    .ind-body .og-table tbody tr.og-row--group:nth-child(even) > :first-child,
    .egd-body .og-table tbody tr.og-row--group:nth-child(even) > :first-child { background: #EEF2F8; }

    /* The frame sits hard against the outer cells, so a first-column label and a
       last-column value both start a hairline from the border - and the navy
       header band runs into the rounded corners. Extra padding on the edge
       cells insets the content from the frame on both sides, top row included. */
    .ind-body .og-table > * > tr > :first-child,
    .egd-body .og-table > * > tr > :first-child { padding-left: 26px; }
    .ind-body .og-table > * > tr > :last-child,
    .egd-body .og-table > * > tr > :last-child { padding-right: 26px; }

    /* The header's own band is the top edge of the frame, so it takes the
       rounded corners rather than squaring them off. */
    .ind-body .og-table thead tr:first-child > :first-child,
    .egd-body .og-table thead tr:first-child > :first-child { border-top-left-radius: 11px; }
    .ind-body .og-table thead tr:first-child > :last-child,
    .egd-body .og-table thead tr:first-child > :last-child { border-top-right-radius: 11px; }

    /* Source line under a data table. */
    .ind-body .og-table caption,
    .egd-body .og-table caption { caption-side: top; padding: 0 4px 10px; font-size: 12.5px; line-height: 1.6; color: #6B7280; text-align: left; }
    .ind-body .og-table caption.is-bottom,
    .egd-body .og-table caption.is-bottom { caption-side: bottom; padding: 10px 4px 0; }

    /* ---- layout table - an image beside its paragraph, not data -------------
       Rendered as a plain two-column band: no frame, no stripes, no navy stub
       column, and it stacks on narrow screens. ---- */
    .ind-body .og-layout-table,
    .egd-body .og-layout-table { width: 100%; border-collapse: collapse; margin: 0 0 26px; font-size: 16.5px; color: #3A3A3A; }
    .ind-body .og-layout-table caption,
    .egd-body .og-layout-table caption { caption-side: bottom; padding-top: 10px; font-size: 13px; color: #6B7280; text-align: center; }
    .ind-body .og-layout-table tbody tr,
    .egd-body .og-layout-table tbody tr
    .ind-body .og-layout-table tbody tr:hover,
    .egd-body .og-layout-table tbody tr:hover
    .ind-body .og-layout-table tbody tr:nth-child(even),
    .egd-body .og-layout-table tbody tr:nth-child(even) { background: none; }
    .ind-body .og-layout-table tbody th,
    .egd-body .og-layout-table tbody th
    .ind-body .og-layout-table tbody td,
    .egd-body .og-layout-table tbody td { border: 0; padding: 0 22px 0 0; text-align: left; vertical-align: top; line-height: 1.9; font-size: 15.5px; color: #3A3A3A; background: none; }
    .ind-body .og-layout-table tbody tr > :last-child,
    .egd-body .og-layout-table tbody tr > :last-child { padding-right: 0; }
    .ind-body .og-layout-table tbody tr > :first-child,
    .egd-body .og-layout-table tbody tr > :first-child { font-weight: 400; color: #3A3A3A; white-space: normal; min-width: 0; background: none; }
    .ind-body .og-layout-table tbody tr + tr > *,
    .egd-body .og-layout-table tbody tr + tr > * { padding-top: 22px; }
    .ind-body .og-layout-table img,
    .egd-body .og-layout-table img { display: block; max-width: 100%; height: auto; border-radius: 8px; }

@media (max-width: 768px) {
      .ind-body table,
      .egd-body table { font-size: 13.5px; }
      .ind-body thead th,
      .egd-body thead th,
      .ind-body tbody th,
      .egd-body tbody th,
      .ind-body tbody td,
      .egd-body tbody td { padding: 11px 13px; }
      /* A layout table has no data to line up, so its columns become rows
         rather than two squeezed halves. The old inline widths are overridden
         because they are on the cells themselves. */
      .ind-body .og-layout-table,
      .egd-body .og-layout-table
      .ind-body .og-layout-table tbody,
      .egd-body .og-layout-table tbody
      .ind-body .og-layout-table tbody tr,
      .egd-body .og-layout-table tbody tr
      .ind-body .og-layout-table tbody th,
      .egd-body .og-layout-table tbody th
      .ind-body .og-layout-table tbody td,
      .egd-body .og-layout-table tbody td { display: block; width: 100% !important; }
      .ind-body .og-layout-table tbody td,
      .egd-body .og-layout-table tbody td
      .ind-body .og-layout-table tbody th,
      .egd-body .og-layout-table tbody th { padding: 0 0 18px !important; }
      .ind-body .og-layout-table tbody tr:last-child > :last-child,
      .egd-body .og-layout-table tbody tr:last-child > :last-child { padding-bottom: 0 !important; }
      .ind-body .og-layout-table img,
      .egd-body .og-layout-table img { margin: 0 auto; }
}