/* WordPress-only styles: the blog pages, plain pages, the 404 page and the
   admin toolbar. css/style.css is the static site's stylesheet, copied over
   unchanged, and its tokens (--orange, --paper, --gutter, --section, the
   --m-* phone scale …) are reused here. */

/* ── WordPress toolbar ──────────────────────────────────────────────
   Logged-in users get the black toolbar fixed to the top of the window,
   so the sticky header pins below it instead of underneath it. Up to
   600px wide the toolbar scrolls away with the page, so the header goes
   back to the top edge. Visitors never see the toolbar. */
.admin-bar .site-header {
  top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
  .admin-bar .site-header {
    top: 0;
  }
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The header carries five links here (the static site had four), and just
   above the tablet breakpoint they wrapped onto two lines. Keep every label
   on one line and tighten the spacing in that range; from 1181px up the
   header is exactly the static site's. */
.desktop-nav a,
.header-cta {
  white-space: nowrap;
}

@media (min-width: 981px) and (max-width: 1180px) {
  .header-inner {
    gap: 22px;
  }

  .desktop-nav {
    gap: 18px;
  }

  .desktop-nav a,
  .header-cta {
    font-size: 15px;
  }

  .header-cta {
    padding-inline: 14px;
  }
}

/* The Blogs link stays underlined anywhere inside the blog. */
.desktop-nav a.is-current::after {
  transform: scaleX(1);
}

.mobile-menu nav a.is-current {
  color: var(--orange);
}

/* Reading width for plain pages. .shell reads --max, so this only changes
   how wide the content runs; the gutters stay the site's. */
.shell--narrow {
  --max: calc(780px + 2 * var(--gutter));
}

/* ── Blog, categories, search ───────────────────────────────────── */

/* The banner is the single post's (.post-hero, further down), at the same
   height, with the page's introduction under the title. */
.post-hero--list .post-hero__image {
  object-position: center 62%;
}

.post-hero__intro {
  max-width: 560px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--copy-size);
  line-height: 1.55;
}

.post-hero__intro > * {
  margin: 0;
}

.post-hero__intro > * + * {
  margin-top: 0.8em;
}

.blog-list {
  padding-block: clamp(56px, 6vw, 96px) var(--section);
}

.post-grid {
  --post-gap: clamp(20px, 2.4vw, 36px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--post-gap);
}

.post-card__link {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--white);
  transition: transform 520ms var(--ease), box-shadow 520ms var(--ease);
}

.post-card__link:hover,
.post-card__link:focus-visible {
  box-shadow: 0 26px 50px rgba(18, 18, 20, 0.12);
  transform: translateY(-6px);
}

/* Post pictures are 16:9 everywhere (cards here, the article's own picture
   below), the shape the client is asked to upload: 1920 x 1080. Other
   shapes are cropped to it around the centre. */
.post-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--dark);
}

.post-card__media > img {
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}

.post-card__link:hover .post-card__media > img,
.post-card__link:focus-visible .post-card__media > img {
  transform: scale(1.05);
}

/* A post without a featured image shows the white logo on the dark panel. */
.post-card__placeholder {
  display: grid;
  height: 100%;
  place-items: center;
}

.post-card__placeholder img {
  width: 36%;
  height: auto;
  opacity: 0.92;
}

.post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 26px 28px 30px;
}

.post-card__meta {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.post-card__title {
  font-size: clamp(22px, 1.7vw, 28px);
  line-height: 1.16;
  letter-spacing: -0.04em;
}

.post-card__excerpt {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.post-card__more {
  margin-top: auto;
  padding-top: 22px;
  color: var(--orange);
  font-weight: 650;
  letter-spacing: -0.02em;
}

.blog-empty {
  margin: 0;
  color: var(--muted);
  font-size: var(--copy-size);
}

.blog-list .pagination {
  margin-top: clamp(40px, 4vw, 64px);
}

.blog-list .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.blog-list .page-numbers {
  display: inline-grid;
  min-width: 46px;
  height: 46px;
  padding: 0 14px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  transition: border-color 220ms ease, background 220ms ease, color 220ms ease;
}

.blog-list a.page-numbers:hover,
.blog-list a.page-numbers:focus-visible {
  border-color: var(--ink);
}

.blog-list .page-numbers.current {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
}

.blog-list .page-numbers.dots {
  border-color: transparent;
}

/* ── Homepage: latest posts ─────────────────────────────────────────
   Between the compliance logos (white) and the contact section (black),
   on the page grey so the white cards stand out. The heading follows the
   compliance and products sections. The cards are flexed rather than
   gridded so that one or two posts sit centred instead of leaving empty
   columns. */
.latest-posts {
  background: var(--paper);
}

.latest-posts__heading {
  margin-bottom: clamp(48px, 4.8vw, 68px);
  text-align: center;
}

.latest-posts__heading h2 {
  max-width: 980px;
  margin-inline: auto;
  font-size: 50px;
  line-height: 0.93;
}

.latest-posts__grid {
  display: flex;
  justify-content: center;
}

.latest-posts__grid > .post-card {
  flex: 0 1 calc((100% - 2 * var(--post-gap)) / 3);
}

.latest-posts__more {
  margin-top: clamp(40px, 4vw, 64px);
  text-align: center;
}

/* ── One post ───────────────────────────────────────────────────────
   A full-width banner (the featured image under a dark wash, the title
   in white), then the article beside a column of the latest posts. */

.post-hero {
  position: relative;
  display: flex;
  min-height: clamp(420px, 64svh, 620px);
  overflow: hidden;
  isolation: isolate;
  background: var(--dark);
  color: #fff;
}

.post-hero__image {
  position: absolute;
  z-index: -2;
  inset: 0;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82);
}

/* Heaviest on the left, under the title, so white text holds up on light
   photographs as well as dark ones. */
.post-hero__shade {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0%, transparent 34%),
    linear-gradient(90deg, rgba(14, 15, 17, 0.84) 0%, rgba(14, 15, 17, 0.62) 46%, rgba(14, 15, 17, 0.34) 100%);
}

.post-hero__inner {
  display: flex;
  padding-block: clamp(56px, 6vw, 96px);
  align-items: center;
}

.post-hero__content {
  max-width: 920px;
}

/* White rather than the usual orange: over a photograph the orange can
   land on orange or red (the bottle caps in one post) and vanish. The
   orange dash keeps the brand colour where it can always be seen. */
.post-hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.88);
  transition: opacity 220ms ease;
}

.post-hero__kicker::before {
  width: 26px;
  height: 2px;
  background: var(--orange);
  content: "";
}

.post-hero__kicker:hover,
.post-hero__kicker:focus-visible {
  opacity: 0.72;
}

/* Balanced lines, so a long title never leaves one word, or half of
   "Food-Grade", alone on the last line. */
.post-hero__title {
  font-size: clamp(40px, 4.2vw, 64px);
  line-height: 1.04;
  text-wrap: balance;
}

.post-layout {
  display: grid;
  padding-block: clamp(48px, 5vw, 80px) var(--section);
  grid-template-columns: minmax(0, 1fr) 320px;
  column-gap: clamp(40px, 4.5vw, 88px);
}

/* No other posts to list: the article runs alone, at reading width. */
.post-layout--single {
  grid-template-columns: minmax(0, 880px);
  justify-content: center;
}

.post-meta {
  display: flex;
  margin: 0 0 24px;
  flex-wrap: wrap;
  gap: 10px 28px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
}

.post-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.post-meta__item i {
  color: var(--orange);
}

.post-meta a {
  transition: color 220ms ease;
}

.post-meta a:hover,
.post-meta a:focus-visible {
  color: var(--orange);
}

.post-cover {
  margin: 0 0 clamp(32px, 3.5vw, 48px);
}

.post-cover img {
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  object-fit: cover;
}

.post-main .entry-content {
  padding-bottom: 0;
}

/* ── Plain pages and 404 ────────────────────────────────────────── */

.post-header {
  padding-block: clamp(56px, 6vw, 96px) clamp(32px, 3.5vw, 56px);
}

.post-title {
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.06;
}

/* ── Post and page text ─────────────────────────────────────────── */

.entry-content {
  padding-bottom: clamp(48px, 5vw, 80px);
  color: #2a2a2d;
  font-size: 18px;
  line-height: 1.75;
  text-align: left;
}

.entry-content > * {
  margin-block: 0;
}

.entry-content > * + * {
  margin-top: 1.3em;
}

.entry-content > :is(h2, h3, h4) {
  margin-top: 1.9em;
}

.entry-content > :is(h2, h3, h4) + * {
  margin-top: 0.7em;
}

.entry-content h2 {
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.14;
  letter-spacing: -0.045em;
}

.entry-content h3 {
  font-size: clamp(21px, 1.8vw, 26px);
  line-height: 1.22;
  letter-spacing: -0.03em;
}

.entry-content h4 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.entry-content :is(h2, h3, h4) {
  color: var(--ink);
}

.entry-content a {
  color: var(--orange-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.entry-content a:hover,
.entry-content a:focus-visible {
  color: var(--ink);
}

.entry-content :is(ul, ol) {
  padding-left: 1.4em;
}

.entry-content li + li {
  margin-top: 0.4em;
}

.entry-content li::marker {
  color: var(--orange);
}

.entry-content blockquote {
  margin-inline: 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--orange);
  color: var(--ink);
  font-size: 1.12em;
}

.entry-content blockquote > * {
  margin: 0;
}

.entry-content blockquote > * + * {
  margin-top: 0.8em;
}

.entry-content blockquote cite {
  color: var(--muted);
  font-size: 15px;
  font-style: normal;
}

/* The site resets every image to full width; in a post an image keeps its
   own size unless the editor stretches it. */
.entry-content img {
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

.entry-content figure {
  margin-inline: 0;
}

.entry-content .aligncenter img {
  margin-inline: auto;
}

.entry-content :is(figcaption, .wp-element-caption) {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.entry-content .alignleft {
  float: left;
  max-width: 50%;
  margin: 0.3em 1.6em 1em 0;
}

.entry-content .alignright {
  float: right;
  max-width: 50%;
  margin: 0.3em 0 1em 1.6em;
}

.entry-content .alignwide {
  width: min(1120px, calc(100vw - 2 * var(--gutter)));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

.entry-content .alignfull {
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

.entry-content .alignfull img {
  width: 100%;
  border-radius: 0;
}

.entry-content hr {
  margin-block: 2.4em;
  border: 0;
  border-top: 1px solid var(--line);
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.entry-content :is(th, td) {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.entry-content :is(pre, code) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.entry-content pre {
  overflow-x: auto;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--white);
}

.entry-content .wp-block-button__link {
  border-radius: 0;
  background: var(--orange);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}

.entry-content .wp-block-button__link:hover,
.entry-content .wp-block-button__link:focus-visible {
  background: var(--orange-dark);
  color: #fff;
}

/* ── End of the article: share, tags, previous / next ───────────── */

.post-footer {
  margin-top: clamp(40px, 4vw, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.post-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.post-share a {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  font-size: 16px;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}

.post-share a:hover,
.post-share a:focus-visible {
  border-color: var(--orange);
  background: var(--orange);
  color: #fff;
}

.post-tags {
  display: flex;
  margin: 24px 0 0;
  flex-wrap: wrap;
  gap: 8px;
}

.post-tags a {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: border-color 220ms ease;
}

.post-tags a:hover,
.post-tags a:focus-visible {
  border-color: var(--ink);
}

.post-nav {
  display: grid;
  margin-top: 32px;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.post-nav a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.3;
  transition: color 220ms ease;
}

.post-nav a span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
}

.post-nav a:hover,
.post-nav a:focus-visible {
  color: var(--orange);
}

.post-nav__next {
  grid-column: 2;
  text-align: right;
}

/* ── Latest posts beside the article ───────────────────────────── */

/* The column stretches to the article's height, so its dividing line runs
   the full length of the article; the posts themselves stay at the top. */
.post-aside {
  padding-left: clamp(28px, 3vw, 48px);
  border-left: 1px solid var(--line);
}

.post-aside__title {
  margin-bottom: 28px;
  font-size: 22px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
}

.post-aside__title::after {
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 14px;
  background: var(--orange);
  content: "";
}

.post-aside__list {
  display: grid;
  gap: 20px;
}

.post-aside .post-card__body {
  padding: 18px 20px 22px;
}

.post-aside .post-card__meta {
  margin-bottom: 8px;
  font-size: 13px;
}

.post-aside .post-card__title {
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.post-aside .post-card__more {
  padding-top: 14px;
  font-size: 14px;
}

/* Closing call to action, in the homepage contact section's colours. */
.post-cta {
  padding-block: var(--section);
  background: #000;
  color: #fff;
}

.post-cta__title {
  font-size: clamp(36px, 3.6vw, 56px);
  letter-spacing: -0.07em;
  line-height: 1;
}

.post-cta__title em {
  color: var(--orange);
  font-style: normal;
}

.post-cta__copy {
  max-width: 520px;
  margin: 24px 0 36px;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--copy-size);
  line-height: 1.5;
}

.not-found {
  padding-bottom: var(--section);
}

.not-found__copy {
  margin: 22px 0 36px;
  color: var(--muted);
  font-size: var(--copy-size);
}

/* ── Phones and tablets ─────────────────────────────────────────────
   Same rules as the homepage: one centred axis and the --m-* type scale.
   The post text itself stays left-aligned for reading. */
@media (max-width: 980px) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-title,
  .post-hero__title {
    font-size: var(--m-h1);
    line-height: 1.08;
  }

  .post-hero__intro,
  .post-cta__copy,
  .not-found__copy,
  .blog-empty {
    font-size: var(--m-base);
  }

  .post-hero__intro,
  .post-cta__copy {
    margin-inline: auto;
  }

  .blog-list {
    padding-block: var(--m-block) var(--m-pad);
  }

  .post-card__body {
    padding: var(--m-card-pad);
  }

  .post-card__title {
    font-size: var(--m-h3);
  }

  .post-card__meta,
  .post-card__excerpt,
  .post-card__more {
    font-size: var(--m-small);
  }

  .post-header {
    padding-block: var(--m-pad) var(--m-block);
  }

  .post-cover img {
    border-radius: var(--m-radius);
  }

  .entry-content {
    font-size: 17px;
  }

  .entry-content h2 {
    font-size: var(--m-h2);
  }

  .entry-content h3 {
    font-size: var(--m-h3);
  }

  /* One post: the banner title centres, as everything on the homepage
     does at this size, under an even wash instead of the left-heavy one.
     The article itself reads left-aligned, and the latest posts move
     below it. */
  .post-hero {
    min-height: clamp(340px, 56svh, 480px);
  }

  .post-hero__shade {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 34%),
      rgba(14, 15, 17, 0.6);
  }

  .post-hero__inner {
    padding-block: var(--m-pad);
    justify-content: center;
    text-align: center;
  }

  .post-layout {
    padding-block: var(--m-block) var(--m-pad);
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--m-pad);
  }

  .post-main {
    text-align: left;
  }

  .post-meta {
    margin-bottom: var(--m-gap);
    font-size: var(--m-small);
  }

  .post-cover {
    margin-bottom: var(--m-block);
  }

  .post-footer {
    margin-top: var(--m-block);
  }

  .post-aside {
    padding: var(--m-pad) 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .post-aside__title {
    margin-bottom: var(--m-block);
    font-size: var(--m-h3);
  }

  .post-aside__title::after {
    margin-inline: auto;
  }

  .post-aside__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--m-gap);
  }

  /* As on the homepage: two posts here, so a tablet row is never half empty. */
  .post-aside .post-card:nth-child(n + 3) {
    display: none;
  }

  .post-aside .post-card__body {
    padding: var(--m-card-pad);
  }

  .post-aside .post-card__title {
    font-size: var(--m-h3);
  }

  .post-aside .post-card__meta,
  .post-aside .post-card__more {
    font-size: var(--m-small);
  }

  .post-cta {
    padding-block: var(--m-pad);
  }

  .post-cta__title {
    font-size: var(--m-h2);
  }

  /* Homepage latest posts: the homepage's own section spacing and type. */
  #latest-posts {
    padding-block: var(--m-pad);
  }

  #latest-posts .latest-posts__heading {
    margin-bottom: var(--m-seam-title-content);
  }

  #latest-posts .latest-posts__heading h2 {
    font-size: var(--m-h2);
    line-height: 1.16;
  }

  #latest-posts .latest-posts__grid {
    --post-gap: var(--m-gap);
  }

  #latest-posts .latest-posts__grid > .post-card {
    flex-basis: calc((100% - var(--post-gap)) / 2);
  }

  /* Two posts are preview enough here; a third would sit alone on a
     tablet row. */
  #latest-posts .latest-posts__grid > .post-card:nth-child(n + 3) {
    display: none;
  }

  #latest-posts .latest-posts__more {
    margin-top: var(--m-block);
  }

  #latest-posts .hero-button {
    font-size: var(--m-button);
  }
}

@media (max-width: 600px) {
  .post-grid {
    grid-template-columns: 1fr;
  }

  .entry-content :is(.alignleft, .alignright) {
    float: none;
    max-width: 100%;
    margin: 0;
  }

  .post-nav {
    grid-template-columns: 1fr;
  }

  .post-nav__next {
    grid-column: auto;
    text-align: inherit;
  }

  .post-aside__list {
    grid-template-columns: 1fr;
  }

  #latest-posts .latest-posts__grid {
    flex-direction: column;
  }

  #latest-posts .latest-posts__grid > .post-card {
    flex-basis: auto;
  }
}