/*
Theme Name:   ITLawCo Child
Theme URI:    https://itlawco.com
Description:  Salient child theme for ITLawCo. Field notes article appearance layer, Direction A.
Author:       ITLawCo
Author URI:   https://itlawco.com
Template:     salient/salient
Version:      1.0.2
Text Domain:  itlawco-child
*/

/* ============================================================
   ITLaw/co Field notes. Level 1, appearance only.

   Scope: body.single-post. Pages, the index and the rest of the
   site are untouched. Nothing here changes markup, so it applies
   to all 263 existing posts without editing any of them.

   Written against the live WPBakery markup:
     #page-header-wrap  ... post header and title
     #single-below-header ... byline strip
     .post-content .wpb_text_column ... the prose container
   ============================================================ */

:root{
  /* Direction A */
  --itl-ink:#1F1D1A;
  --itl-bone:#F4EFE6;
  --itl-brass:#8C7547;
  --itl-brass-light:#C9A878;

  /* Derived neutrals. Not in the brand pack. Mixed from ink and bone. */
  --itl-panel:#EAE2D3;
  --itl-rule:#DCD3C1;
  --itl-rule-soft:#E6DECE;
  --itl-ash:#6E6559;

  --itl-serif:"Source Serif 4","Source Serif Pro",Charter,Georgia,serif;
  --itl-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* The measure is a fixed pixel value, not 65ch, deliberately.
     The ch unit resolves against each element's own font, so a shared
     65ch token produced three different widths: 635px on the serif
     body copy, 738px on the title block, and 513px on the Inter
     byline. 636px is 65 characters of Source Serif 4 at 18.48px, and
     it holds the same edge for every element that uses it. */
  --itl-measure:636px;
  --itl-wide:920px;
}

/* ------------------------------------------------------------
   1. Ground
   ------------------------------------------------------------ */
body.single-post,
body.single-post #ajax-content-wrap,
body.single-post .container-wrap,
body.single-post .post-area,
body.single-post .post-content{
  background:var(--itl-bone);
  color:var(--itl-ink);
}

/* ------------------------------------------------------------
   2. Post header. Image out, title stays, set on bone.

   To restore the featured image hero, delete this whole block.
   The image is untouched in the media library and still feeds
   the index cards and the Open Graph tags.
   ------------------------------------------------------------ */
body.single-post #page-header-wrap,
body.single-post #page-header-bg{
  height:auto !important;
  min-height:0 !important;
  background:var(--itl-bone) !important;
}
body.single-post #page-header-bg .page-header-bg-image-wrap,
body.single-post #page-header-bg .page-header-bg-image,
body.single-post #page-header-bg > img,
body.single-post #page-header-bg .page-header-bg-image + img,
body.single-post #page-header-wrap .nectar-particles,
body.single-post #page-header-bg::before,
body.single-post #page-header-bg::after{
  display:none !important;
}
body.single-post #page-header-bg .container{
  padding-top:64px;
  padding-bottom:0;
}
body.single-post #page-header-bg .span_6,
body.single-post #page-header-bg .section-title{
  width:100% !important;
  max-width:var(--itl-measure);
  margin-inline:auto !important;
  float:none !important;
  text-align:left !important;
}

/* Salient pulls the title block upwards to centre it inside the 600px hero.
   With the hero collapsed that offset leaves a void beneath the byline,
   because the row keeps its full height while its content sits above it. */
body.single-post #page-header-bg .section-title{
  margin-top:0 !important;
  top:0 !important;
  transform:none !important;
}
body.single-post #page-header-bg .row{
  height:auto !important;
  min-height:0 !important;
}

/* Salient's standing 80px gap under the header assumed a full-bleed image
   above it. Without one it reads as a dead band. */
body.single-post .container-wrap{
  padding-top:48px !important;
}

/* Title */
body.single-post #page-header-bg h1,
body.single-post h1.entry-title{
  font-family:var(--itl-serif) !important;
  font-weight:400 !important;
  color:var(--itl-ink) !important;
  font-size:clamp(2.05rem,1.35rem + 2.5vw,3.05rem) !important;
  line-height:1.07 !important;
  letter-spacing:-.022em !important;
  text-shadow:none !important;
  text-wrap:balance;
  margin:0 0 .5em;
}

/* Header meta, if Salient prints it inside the header */
body.single-post #page-header-bg .subheader,
body.single-post #page-header-bg .meta-author,
body.single-post #page-header-bg .meta-date,
body.single-post #page-header-bg .meta-category,
body.single-post #page-header-bg span{
  color:var(--itl-ash) !important;
  font-family:var(--itl-sans) !important;
  font-size:12.5px !important;
  letter-spacing:0 !important;
  text-shadow:none !important;
}

/* ------------------------------------------------------------
   3. Byline strip
   ------------------------------------------------------------ */
/* Salient also prints a meta block inside the title column, right
   aligned and narrow. Pull it onto the same left edge as everything
   else. If it turns out to duplicate the byline strip below, hide it
   with display:none instead. */
body.single-post #page-header-bg #single-meta{
  width:100% !important;
  max-width:none !important;
  float:none !important;
  text-align:left !important;
  margin:14px 0 0 !important;
}

body.single-post #single-below-header{
  max-width:var(--itl-measure);
  margin:26px auto 0;
  padding:15px 0;
  border-top:1px solid var(--itl-rule);
  border-bottom:1px solid var(--itl-rule);
  background:transparent;
  font-family:var(--itl-sans);
  font-size:12.5px;
  color:var(--itl-ash);
  text-transform:none;
  letter-spacing:0;
}
body.single-post #single-below-header span,
body.single-post #single-below-header a{
  color:var(--itl-ash);
  font-family:var(--itl-sans);
  letter-spacing:0;
}
body.single-post #single-below-header .meta-author a,
body.single-post #single-below-header .fn a{
  color:var(--itl-ink);
  font-weight:500;
}

/* ------------------------------------------------------------
   4. Reading column

   The WPBakery column stays full width so tables and figures can
   run wider. The measure is applied to the prose elements inside.
   ------------------------------------------------------------ */
body.single-post .post-content .wpb_text_column > p,
body.single-post .post-content .wpb_text_column > h2,
body.single-post .post-content .wpb_text_column > h3,
body.single-post .post-content .wpb_text_column > h4,
body.single-post .post-content .wpb_text_column > ul,
body.single-post .post-content .wpb_text_column > ol,
body.single-post .post-content .wpb_text_column > blockquote,
body.single-post .post-content .wpb_text_column > dl{
  max-width:var(--itl-measure);
  margin-left:auto;
  margin-right:auto;
}
body.single-post .post-content .wpb_text_column > figure,
body.single-post .post-content .wpb_text_column > table,
body.single-post .post-content .wpb_text_column > .wp-block-table,
body.single-post .post-content .wpb_text_column > .itl-wide{
  max-width:var(--itl-wide);
  margin-left:auto;
  margin-right:auto;
}

/* ------------------------------------------------------------
   5. Prose. Serif carries the argument.
   ------------------------------------------------------------ */
body.single-post .post-content .wpb_text_column{
  font-family:var(--itl-serif);
  font-size:1.155rem;
  line-height:1.72;
  color:var(--itl-ink);
}
body.single-post .post-content .wpb_text_column p{
  margin:0 auto 1.35em;           /* auto keeps the column centred; a 0 here
                                     silently cancelled the centring in section 4 */
  font-family:var(--itl-serif);
  font-size:1.155rem;
  line-height:1.72;
  color:var(--itl-ink);
}

/* Headings. Air above, not below. */
body.single-post .post-content .wpb_text_column h2{
  font-family:var(--itl-serif);
  font-weight:400;
  font-size:1.68rem;              /* was 40px against 18px body */
  line-height:1.21;
  letter-spacing:-.016em;
  color:var(--itl-ink);
  margin:2.9em auto .55em;        /* was 10px above, 24px below */
  text-wrap:balance;
}
body.single-post .post-content .wpb_text_column h3{
  font-family:var(--itl-serif);
  font-weight:400;                /* 600 is not loaded. See functions.php. */
  font-size:1.26rem;              /* was 14px, below the body size */
  line-height:1.38;               /* was 14px, equal to the font size */
  letter-spacing:-.006em;
  color:var(--itl-ink);
  margin:2.1em auto .45em;        /* was 0 */
  text-wrap:balance;
}
body.single-post .post-content .wpb_text_column h4{
  font-family:var(--itl-sans);
  font-weight:600;
  font-size:.95rem;
  line-height:1.4;
  color:var(--itl-ink);
  margin:1.9em auto .4em;
}

/* The brass slash marks every section break. No markup needed:
   it is generated from the heading itself, so it appears on all
   263 posts at once. */
body.single-post .post-content .wpb_text_column h2::before{
  content:"/";
  display:block;
  font-family:var(--itl-sans);
  font-size:15px;
  line-height:1;
  color:var(--itl-brass);
  margin-bottom:1.1em;
}
/* Every heading in a WPBakery post opens its own text block, so an
   exclusion for h2:first-child would hide the slash on all of them.
   Only the article's very first heading, if it has one, is exempt. */
body.single-post .post-content .wpb_wrapper > .wpb_text_column:first-child > h2:first-child::before{
  display:none;
}

/* ------------------------------------------------------------
   5b. WPBakery block rhythm

   This article is 22 separate .wpb_text_column blocks inside one
   wrapper, each holding one section. WPBakery gives every block a
   27.72px bottom margin of its own, which stacks on top of the
   heading margins and pushes section gaps to 78px.

   display:flow-root stops child margins escaping the block, so the
   spacing below is arithmetic rather than a collapsing guess:
   block margin 1.35em + heading margin 1.1em = one section gap.
   ------------------------------------------------------------ */
body.single-post .post-content .wpb_text_column{
  display:flow-root;
  margin-bottom:1.35em !important;
}
body.single-post .post-content .wpb_text_column > *:last-child{
  margin-bottom:0 !important;
}
body.single-post .post-content .wpb_text_column > h2:first-child{
  margin-top:1.1em;
}
body.single-post .post-content .wpb_text_column > h3:first-child{
  margin-top:1em;
}
body.single-post .post-content .wpb_row{
  margin-bottom:1.35em !important;
}

/* Links in brass */
body.single-post .post-content .wpb_text_column a{
  color:var(--itl-brass);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:var(--itl-brass-light);
}
body.single-post .post-content .wpb_text_column a:hover{
  color:var(--itl-brass);
  text-decoration-thickness:2px;
  text-decoration-color:var(--itl-brass);
}

body.single-post .post-content .wpb_text_column strong,
body.single-post .post-content .wpb_text_column b{
  font-weight:600;
}
body.single-post .post-content .wpb_text_column em{font-style:italic}

/* ------------------------------------------------------------
   6. Lists
   ------------------------------------------------------------ */
body.single-post .post-content .wpb_text_column ul,
body.single-post .post-content .wpb_text_column ol{
  list-style:none;
  padding-left:0;
  margin-bottom:1.35em;
}
body.single-post .post-content .wpb_text_column li{
  position:relative;
  padding-left:26px;
  margin-bottom:.6em;
  line-height:1.66;
}
body.single-post .post-content .wpb_text_column ul > li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.74em;
  width:9px;
  height:1px;
  background:var(--itl-brass);
}
body.single-post .post-content .wpb_text_column ol{counter-reset:itl}
body.single-post .post-content .wpb_text_column ol > li{counter-increment:itl}
body.single-post .post-content .wpb_text_column ol > li::before{
  content:counter(itl);
  position:absolute;
  left:0;
  top:.3em;
  font-family:var(--itl-sans);
  font-size:11px;
  font-variant-numeric:tabular-nums;
  color:var(--itl-brass);
}

/* ------------------------------------------------------------
   7. Blockquote as pull quote
   ------------------------------------------------------------ */
body.single-post .post-content .wpb_text_column blockquote{
  margin:2.4em auto;
  padding:0 0 0 24px;
  border:0;
  border-left:2px solid var(--itl-brass-light);
  background:none;
  font-family:var(--itl-serif);
  font-size:1.38rem;
  line-height:1.42;
  letter-spacing:-.012em;
  color:var(--itl-ink);
  font-style:normal;
}
body.single-post .post-content .wpb_text_column blockquote p{
  font-size:inherit;
  line-height:inherit;
  margin:0;
}

/* ------------------------------------------------------------
   8. Tables. Apparatus, so Inter.
   ------------------------------------------------------------ */
body.single-post .post-content .wpb_text_column table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--itl-rule);
  font-family:var(--itl-sans);
  font-size:.875rem;
  line-height:1.55;
  margin:2.6em auto;
  background:transparent;
}
body.single-post .post-content .wpb_text_column caption{
  caption-side:top;
  text-align:left;
  padding:14px 18px;
  border:1px solid var(--itl-rule);
  border-bottom:0;
  font-family:var(--itl-sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--itl-brass);
}
body.single-post .post-content .wpb_text_column th,
body.single-post .post-content .wpb_text_column td{
  padding:12px 18px;
  text-align:left;
  vertical-align:top;
  border:0;
  border-bottom:1px solid var(--itl-rule-soft);
}
body.single-post .post-content .wpb_text_column th{
  font-weight:600;
  background:var(--itl-panel);
  color:var(--itl-ink);
}
body.single-post .post-content .wpb_text_column td{color:var(--itl-ash)}
body.single-post .post-content .wpb_text_column td:first-child{color:var(--itl-ink)}
body.single-post .post-content .wpb_text_column tbody tr:last-child td{border-bottom:0}

/* Any table wider than the column scrolls rather than shrinking the type. */
body.single-post .post-content .wpb_text_column .itl-scroll{
  overflow-x:auto;
  max-width:var(--itl-wide);
  margin-inline:auto;
}

/* ------------------------------------------------------------
   9. Figures and captions
   ------------------------------------------------------------ */
body.single-post .post-content .wpb_text_column figure{margin:2.8em auto}
body.single-post .post-content .wpb_text_column img{
  max-width:100%;
  height:auto;
  display:block;
}
body.single-post .post-content .wpb_text_column figcaption,
body.single-post .post-content .wpb_text_column .wp-caption-text{
  font-family:var(--itl-sans);
  font-size:12px;
  line-height:1.55;
  color:var(--itl-ash);
  margin-top:12px;
  text-align:left;
}

/* ------------------------------------------------------------
   10. Optional editor classes.
   Add these in the WPBakery text editor when you want them.
   ------------------------------------------------------------ */
.itl-note{
  max-width:var(--itl-measure);
  margin:2.4em auto;
  padding:24px 26px;
  background:var(--itl-panel);
  border-left:2px solid var(--itl-brass);
  font-family:var(--itl-sans);
  font-size:.95rem;
  line-height:1.62;
  color:var(--itl-ink);
}
.itl-note > :first-child{margin-top:0}
.itl-note > :last-child{margin-bottom:0}
.itl-label{
  font-family:var(--itl-sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--itl-brass);
  display:block;
  margin-bottom:12px;
}
.itl-end::after{
  content:"/";
  display:block;
  font-family:var(--itl-sans);
  font-size:20px;
  line-height:1;
  color:var(--itl-brass);
  margin-top:1.6em;
}

/* ------------------------------------------------------------
   11. Foot of the article
   ------------------------------------------------------------ */
body.single-post .related-post-wrap,
body.single-post #author-bio{
  background:var(--itl-bone);
  border-top:1px solid var(--itl-rule);
  font-family:var(--itl-sans);
}
body.single-post #author-bio h3,
body.single-post .related-post-wrap h3{
  font-family:var(--itl-sans);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--itl-brass);
}

/* ------------------------------------------------------------
   12. Responsive
   ------------------------------------------------------------ */
@media only screen and (max-width:690px){
  body.single-post #page-header-bg .container{padding-top:40px}
  body.single-post .post-content .wpb_text_column,
  body.single-post .post-content .wpb_text_column p{
    font-size:1.09rem;
    line-height:1.68;
  }
  body.single-post .post-content .wpb_text_column h2{font-size:1.44rem}
  body.single-post .post-content .wpb_text_column h3{font-size:1.16rem}
  body.single-post .post-content .wpb_text_column blockquote{font-size:1.2rem}
}

/* ------------------------------------------------------------
   13. Print. Legal, procurement and board work still ends in PDFs.
   ------------------------------------------------------------ */
@media print{
  body.single-post #header-outer,
  body.single-post #page-header-wrap,
  body.single-post .related-post-wrap,
  body.single-post #footer-outer,
  body.single-post .sharing-default-minimal,
  body.single-post #to-top{display:none !important}

  body.single-post,
  body.single-post .post-content .wpb_text_column{
    background:#fff !important;
    color:#000 !important;
    font-size:11pt !important;
    line-height:1.5 !important;
  }
  body.single-post .post-content .wpb_text_column > *{max-width:none !important}
  body.single-post .post-content .wpb_text_column h2,
  body.single-post .post-content .wpb_text_column h3{break-after:avoid}
  body.single-post .post-content .wpb_text_column table,
  body.single-post .post-content .wpb_text_column figure{break-inside:avoid}
  body.single-post .post-content .wpb_text_column a{
    color:#000 !important;
    text-decoration:underline;
  }
  body.single-post .post-content .wpb_text_column a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:8pt;
    color:#444;
    word-break:break-all;
  }
}

/* Comment count and the empty comments block */
body.single-post #single-meta .meta-comment-count,
body.single-post .comments-section,
body.single-post .comment-wrap{
  display:none !important;
}

body.single-post #page-header-bg #single-meta{ display:none !important; }