/* =========================================================
   Paint Nails London — single post styles
   Headings Instrument Serif 400, body Poppins 300.
   Root font size is 10px, so 1.7rem = 17px.
   ========================================================= */

:root {
  --pnl-brown: #653533;
  --pnl-active: #6E2E2E;
  --pnl-sage: #B4BFB4;
  --pnl-cream: #FEF9ED;
  --pnl-ink: #43332F;          /* body copy, warm near-black */
  --pnl-muted: #6B615C;        /* captions, meta */
  --pnl-rule: rgba(101, 53, 51, 0.18);
  --pnl-rule-soft: rgba(101, 53, 51, 0.10);
}

/* ---------------------------------------------------------
   Measure

   Caps the line length at roughly 68 characters. Delete this
   block if you narrow the content column in the Bricks
   template instead, which is the cleaner fix because the H1
   and byline pull in with it.
   --------------------------------------------------------- */

.brxe-post-content {
  max-width: 68ch;
}

/* ---------------------------------------------------------
   Body copy

   17px / 1.75 (29.75px line height) at every breakpoint.
   Match the intro paragraph element in Bricks to these
   values, since it sits outside this container and inherits
   nothing from here.
   --------------------------------------------------------- */

.brxe-post-content {
  color: var(--pnl-ink);
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-size: 1.7rem;
  line-height: 1.75;
  letter-spacing: normal;
}

.brxe-post-content > *:first-child {
  margin-top: 0;
}

.brxe-post-content p {
  margin: 0 0 2.2rem;
}

.brxe-post-content p:last-child {
  margin-bottom: 0;
}

/* Poppins 600 reads very heavy next to 300. 500 is the site's
   button weight and sits better in running text. */
.brxe-post-content strong,
.brxe-post-content b {
  font-weight: 500;
  color: var(--pnl-brown);
}

.brxe-post-content em,
.brxe-post-content i {
  font-style: italic;
}

/* Byline + date */
.brxe-post-meta {
  font-weight: 300;
  color: var(--pnl-muted);
}

/* ---------------------------------------------------------
   Headings

   Instrument Serif ships at 400 only, so size and spacing
   carry the hierarchy. The size gap between H2 and H3 is
   deliberately modest (36 against 28); the separation comes
   from the margin above each one.

   Optional: if H2 and H3 still read too alike on a long
   post, add font-style: italic to the H3 rule. The site
   already uses italic serif in headings, so it is on brand
   and separates the levels without more size.
   --------------------------------------------------------- */

.brxe-post-content h1,
.brxe-post-content h2,
.brxe-post-content h3,
.brxe-post-content h4,
.brxe-post-content h5,
.brxe-post-content h6 {
  color: var(--pnl-brown);
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  text-wrap: balance;
}

.brxe-post-content h2 {
  font-size: 3.6rem;
  margin: 6rem 0 1.8rem;
}

.brxe-post-content h3 {
  font-size: 2.8rem;
  margin: 4.2rem 0 1.3rem;
}

.brxe-post-content h4 {
  font-size: 2.2rem;
  margin: 3.4rem 0 1.1rem;
}

/* H5 and H6 drop to Poppins small caps so they read as labels
   rather than competing with the serif levels above. */
.brxe-post-content h5,
.brxe-post-content h6 {
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.4;
  margin: 3rem 0 1rem;
}

/* A heading straight after another heading needs less air */
.brxe-post-content h2 + h3,
.brxe-post-content h3 + h4 {
  margin-top: 2.2rem;
}

/* ---------------------------------------------------------
   Links
   --------------------------------------------------------- */

.brxe-post-content a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(101, 53, 51, 0.35);
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

.brxe-post-content a:hover,
.brxe-post-content a:focus-visible {
  color: var(--pnl-active);
  text-decoration-color: var(--pnl-active);
}

.brxe-post-content a:focus-visible {
  outline: 2px solid var(--pnl-brown);
  outline-offset: 3px;
}

/* Non-content links elsewhere on the post template */
body.single-post a {
  text-decoration-color: rgba(101, 53, 51, 0.35);
}

/* ---------------------------------------------------------
   Images and captions

   Square corners match the buttons, nav panel and media
   cards. An image following a heading is pulled up so it
   groups with that heading rather than floating between
   the heading and the paragraph below.
   --------------------------------------------------------- */

.brxe-post-content img {
  border-radius: 0;
  display: block;
  height: auto;
}

.brxe-post-content figure,
.brxe-post-content .wp-block-image {
  margin: 3.5rem 0;
}

.brxe-post-content h2 + figure,
.brxe-post-content h2 + .wp-block-image,
.brxe-post-content h3 + figure,
.brxe-post-content h3 + .wp-block-image,
.brxe-post-content h4 + figure,
.brxe-post-content h4 + .wp-block-image {
  margin-top: 2rem;
}

.brxe-post-content .wp-element-caption {
  margin-top: 10px;
  color: var(--pnl-muted);
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: left;
}

/* ---------------------------------------------------------
   Blockquote
   --------------------------------------------------------- */

.brxe-post-content .wp-block-quote {
  margin: 4rem 0;
  padding: 0 0 0 28px;
  border-left: 1px solid var(--pnl-sage);
  color: var(--pnl-brown);
  font-family: "Instrument Serif", serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.35;
}

.brxe-post-content .wp-block-quote p {
  margin-bottom: 1.2rem;
}

.brxe-post-content .wp-block-quote cite,
.brxe-post-content .wp-block-quote .wp-block-quote__citation {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--pnl-muted);
}

/* ---------------------------------------------------------
   Lists
   --------------------------------------------------------- */

.brxe-post-content ul,
.brxe-post-content ol {
  margin: 0 0 2.2rem;
  padding-left: 1.4em;
  list-style-position: outside;
}

.brxe-post-content ul.wp-block-list,
.brxe-post-content ol.wp-block-list {
  padding-left: 1.4em;
}

.brxe-post-content li {
  padding-left: 0.3em;
}

.brxe-post-content li::marker {
  color: var(--pnl-brown);
}

.brxe-post-content ul li:first-child,
.brxe-post-content ol li:first-child {
  margin-top: 10px;
}

.brxe-post-content ul li:not(:last-child),
.brxe-post-content ol li:not(:last-child) {
  margin-bottom: 14px;
}

.brxe-post-content li > ul,
.brxe-post-content li > ol {
  margin: 14px 0 0;
}

/* ---------------------------------------------------------
   Separator
   --------------------------------------------------------- */

.brxe-post-content hr,
.brxe-post-content .wp-block-separator {
  margin: 5rem 0;
  border: 0;
  border-top: 1px solid var(--pnl-rule);
  height: 0;
}

/* ---------------------------------------------------------
   Tables
   Same structure as the pricing page, recoloured to brand.
   --------------------------------------------------------- */

.brxe-post-content .wp-block-table {
  position: relative;
  width: 100%;
  margin: 4rem 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.brxe-post-content .wp-block-table::-webkit-scrollbar {
  display: none;
}

.brxe-post-content .wp-block-table table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
  width: 100%;
  font-family: "Poppins", sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  background: #fff;
  border: 1px solid var(--pnl-brown);
  border-radius: 0;
  overflow: hidden;
}

@media (max-width: 478px) {
  .brxe-post-content .wp-block-table table {
    font-size: 1.3rem;
  }
}

.brxe-post-content .wp-block-table thead,
.brxe-post-content .wp-block-table tfoot {
  border: none;
}

/* Cells: wrapping allowed, words stay whole */
.brxe-post-content .wp-block-table th,
.brxe-post-content .wp-block-table td {
  border: 0;
  border-bottom: 1px solid var(--pnl-rule);
  padding: 15px;
  text-align: center;
  vertical-align: middle;
  font-weight: 300;
  background: #fff;
  color: var(--pnl-ink);
}

/* Beats Gutenberg's break-word rule */
.brxe-post-content .wp-block-table .has-fixed-layout th,
.brxe-post-content .wp-block-table .has-fixed-layout td {
  word-break: normal;
  overflow-wrap: normal;
}

.brxe-post-content .wp-block-table tbody tr:last-child th,
.brxe-post-content .wp-block-table tbody tr:last-child td {
  border-bottom: 0;
}

.brxe-post-content .wp-block-table thead th,
.brxe-post-content .wp-block-table thead td {
  background: var(--pnl-brown);
  color: var(--pnl-cream);
  font-size: 1.2rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 0;
}

.brxe-post-content .wp-block-table tbody tr:nth-child(even) th,
.brxe-post-content .wp-block-table tbody tr:nth-child(even) td {
  background: rgba(101, 53, 51, 0.04);
}

.brxe-post-content .wp-block-table figcaption {
  margin-top: 10px;
  color: var(--pnl-muted);
  font-size: 1.3rem;
  font-weight: 300;
}

/* Custom scrollbar track */
.brxe-post-content .wp-block-table + .pricelist-scrollbar {
  height: 8px;
  background: var(--pnl-rule-soft);
  border-radius: 0;
  margin: 8px 0 4rem;
  overflow: hidden;
  display: none;
  width: 100%;
  cursor: pointer;
  touch-action: none;
}

.brxe-post-content .wp-block-table + .pricelist-scrollbar > div {
  height: 100%;
  width: 40px;
  background: rgba(101, 53, 51, 0.4);
  border-radius: 0;
  transition: transform 0.1s linear;
  cursor: grab;
}

.brxe-post-content .wp-block-table + .pricelist-scrollbar.is-dragging > div {
  transition: none;
  cursor: grabbing;
}

/* ---------------------------------------------------------
   Responsive
   Body size and line height stay fixed. Only headings,
   spacing and the measure change.
   --------------------------------------------------------- */

@media (max-width: 767px) {
  .brxe-post-content {
    max-width: none;
  }

  .brxe-post-content p,
  .brxe-post-content ul,
  .brxe-post-content ol {
    margin-bottom: 2rem;
  }

  .brxe-post-content h2 {
    font-size: 2.9rem;
    margin-top: 4.6rem;
  }

  .brxe-post-content h3 {
    font-size: 2.4rem;
    margin-top: 3.4rem;
  }

  .brxe-post-content h4 {
    font-size: 2rem;
    margin-top: 2.8rem;
  }

  .brxe-post-content .wp-block-quote {
    font-size: 2.1rem;
    padding-left: 20px;
    margin: 3rem 0;
  }

  .brxe-post-content figure,
  .brxe-post-content .wp-block-image {
    margin: 2.8rem 0;
  }

  .brxe-post-content h2 + figure,
  .brxe-post-content h2 + .wp-block-image,
  .brxe-post-content h3 + figure,
  .brxe-post-content h3 + .wp-block-image,
  .brxe-post-content h4 + figure,
  .brxe-post-content h4 + .wp-block-image {
    margin-top: 1.6rem;
  }
}

@media (max-width: 478px) {
  .brxe-post-content h2 {
    font-size: 2.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brxe-post-content a,
  .brxe-post-content .wp-block-table + .pricelist-scrollbar > div {
    transition: none !important;
  }
}