/*
Theme Name: sizrok
Theme URI: https://sizrok.com/
Author: sizrok
Author URI: https://sizrok.com/
Description: Custom theme for sizrok — an AI automation studio in Greater Manchester. A pixel-for-pixel port of the hand-built static site (3D hero, code/node animations, orange brand). The AI audit and forms post to a Cloudflare Worker, so no secrets live in WordPress.
Version: 0.1.19
Requires at least: 6.3
Requires PHP: 7.4
License: All rights reserved
Text Domain: sizrok
*/

/* ------------------------------------------------------------------ *
 * This file is only the WordPress theme header + a small SHIM.
 * The real design lives in assets/css/styles.css (a verbatim copy of the
 * static site's stylesheet) and is enqueued first; this shim layers on top
 * to (a) keep the sticky alert/nav clear of the WP admin bar, and (b) make
 * Gutenberg block output inside .post__body match the hand-authored posts.
 * Keep design changes in assets/css/styles.css; keep WP-only fixes here.
 * ------------------------------------------------------------------ */

/* --- WP admin bar: nudge the sticky chrome down for logged-in users --- */
@media screen {
  .admin-bar .alert { top: 32px; }
  .admin-bar .nav   { top: calc(var(--alert-h) + 32px); }
}
@media screen and (max-width: 782px) {
  .admin-bar .alert { top: 46px; }
  .admin-bar .nav   { top: calc(var(--alert-h) + 46px); }
}

/* --- Gutenberg → .post__body shim (blog + legal pages) --- */
.post__body figure { margin: 32px 0; }
.post__body figure img,
.post__body .wp-block-image img { display: block; width: 100%; height: auto; border-radius: 10px; }
.post__body figcaption,
.post__body .wp-block-image figcaption {
  margin-top: 10px; text-align: center;
  font-size: .82rem; letter-spacing: .01em; color: var(--ink);
  opacity: .6;
}
.post__body .alignwide   { margin-left: calc(50% - 46vw); margin-right: calc(50% - 46vw); max-width: 92vw; }
.post__body .alignfull   { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; }
.post__body .aligncenter { margin-left: auto; margin-right: auto; }

.post__body .wp-block-code,
.post__body pre {
  background: var(--ink); color: var(--cream);
  padding: 20px 22px; border-radius: 10px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem;
}
.post__body .wp-block-button__link,
.post__body .wp-block-button a {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange); color: var(--black);
  padding: 12px 22px; border-radius: 999px; text-decoration: none; font-weight: 600;
}
.post__body .wp-block-separator { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }
.post__body .wp-block-pullquote { border: 0; padding: 0; margin: 40px 0; }

/* ------------------------------------------------------------------ *
 * Featured images on Work case studies (tiles + hero). When a case
 * study has a Featured Image set, it fills its frame; otherwise the
 * designed placeholder frame shows as before.
 * ------------------------------------------------------------------ */
.post-tile__media-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.post-tile__media-tag { z-index: 2; }
.post__hero-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: inherit;
}
.post__hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.post__hero-tag, .post__hero-num { z-index: 2; }

/* ── Tiles and heroes carrying the bundled cover art ────────────────
   Covers are 21:10. They must never be cropped — cover-cropping a pipeline
   diagram cuts the ends off it, which is the whole point of the picture.

   So the FRAME takes the artwork's ratio rather than the artwork being
   letterboxed inside a 4:3 frame. Contained-in-4:3 left the drawing filling
   little more than half the box with padding on top of that, which read as a
   small picture in a big empty tile. Edge to edge at its own ratio is the
   same tile width and a much larger image. */
.post-tile__media--art {
  aspect-ratio: 21 / 10;
  background: var(--paper);
}
.post-tile__media--art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;         /* exact ratio match: nothing is cropped */
}

/* The hero frame goes 4:3 on narrow screens, which would cut a third off
   each end of a 21:10 diagram. Art heroes hold 21:10 at every width. */
.post__hero-frame--art { background: var(--paper); border-color: var(--rule); }
.post__hero-thumb--art img { object-fit: contain; background: var(--paper); }
@media (max-width: 768px) {          /* matches styles.css, where the frame turns 4:3 */
  .post__hero-frame--art { aspect-ratio: 21 / 10; }
}

/* ── Comparison tables in article bodies ────────────────────────────
   Only the two comparison pages carry one (AI vs automation, agent types).
   The wrapper scrolls on its own so a wide table never pushes the page
   sideways on a phone — the body must not scroll horizontally. */
.post__table { overflow-x: auto; margin: 32px 0; -webkit-overflow-scrolling: touch; }
.post__body table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 0.95rem; }
.post__body th,
.post__body td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.post__body th { font-weight: 600; background: var(--cream); border-bottom-color: var(--rule-2); }
.post__body tbody tr:last-child td { border-bottom: none; }

/* ── Industry pages: the cover panel beside the enquiry form ────────
   The page borrows its head from the service pages, its body rail and
   form from the locations, and this one panel from the resources. The
   cover is 21:10 like every other bundled diagram, so it is framed the
   same way the article hero frames one rather than cropped to fit. */
.ind-pitch { padding-top: 8px; }
.ind-cover {
  margin: 0 0 28px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper);
}
.ind-cover img { display: block; width: 100%; height: auto; }
.ind-pitch .loc-hero__intro { margin-top: 0; }

@media (max-width: 900px) {
  /* Form first on a phone: the diagram is supporting material, the form
     is the point of the page. */
  .ind-pitch .loc-hero__grid { display: flex; flex-direction: column; }
  .ind-pitch .loc-form { order: -1; margin-bottom: 28px; }
  .ind-cover { margin-bottom: 20px; }
}

/* ── Industry body: location structure, article typography ─────────
   The section rail from the location pages is the right shape for a
   conversion page — heading left, argument right, one rule between
   sections. But the location prose settings are tuned for short local
   pages: 16.5px, 20px between paragraphs, and --ink-soft rather than
   --ink. An industry page runs two thousand words of argument, and at
   those settings it reads grey and dense next to the blog.

   So the structure stays and the type comes up to what .post__body
   uses on the articles: 18px, 28px between paragraphs, full ink. Scoped
   to .ind-body so the location pages are untouched. */
.ind-body .loc-section__body { max-width: 68ch; }
.ind-body .loc-section__body p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 28px;
}
.ind-body .loc-section__body p:last-child { margin-bottom: 0; }
.ind-body .loc-section__body > h3 {
  font-size: 21px;
  margin: 40px 0 14px;
  color: var(--black);
}
.ind-body .loc-section__head h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  color: var(--black);
}
/* The opening argument, above the first rule, gets the article lede size. */
.ind-body .loc-lead p {
  font-size: 20px;
  line-height: 1.6;
  color: var(--black);
  margin: 0 0 28px;
  max-width: 68ch;
}

/* ── /industries index: a scannable list, not a wall of cover art ──
   One row per sector: family eyebrow, the sector title, and one line of
   what we take off that trade. No thumbnail, because nineteen diagrams at
   tile size read as noise the reader looks past to find their trade. The
   covers still carry the single pages at full size. */
.ind-list { list-style: none; margin: 0; padding: 0; }
.ind-list__item { border-top: 1px solid var(--rule); }
.ind-list__item:last-child { border-bottom: 1px solid var(--rule); }
.ind-list__link {
  display: grid;
  grid-template-columns: minmax(0, 300px) 1fr auto;
  gap: 8px 32px;
  align-items: baseline;
  padding: 26px 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease, padding 0.2s ease;
}
.ind-list__link:hover,
.ind-list__link:focus-visible { background: var(--cream); }
.ind-list__head { min-width: 0; }
/* Sentence case, not the uppercase tracked eyebrow used elsewhere: the brand
   keeps labels lowercase, and the orange dot carries the eyebrow role here. */
.ind-list__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--mid); margin-bottom: 8px;
}
.ind-list__eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); flex-shrink: 0;
}
.ind-list__title {
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 600; line-height: 1.18; margin: 0;
  color: var(--ink);
}
.ind-list__link:hover .ind-list__title,
.ind-list__link:focus-visible .ind-list__title { color: var(--orange); }
.ind-list__blurb {
  font-size: 16.5px; line-height: 1.55;
  color: var(--ink-soft); margin: 0; max-width: 60ch;
}
.ind-list__arrow {
  color: var(--mid); font-size: 20px;
  transition: transform 0.2s ease, color 0.2s ease;
}
.ind-list__link:hover .ind-list__arrow,
.ind-list__link:focus-visible .ind-list__arrow {
  color: var(--orange); transform: translateX(4px);
}

@media (max-width: 720px) {
  .ind-list__link {
    grid-template-columns: 1fr auto;
    gap: 6px 20px;
    padding: 22px 4px;
  }
  /* Title and blurb stack in the first column; the arrow keeps the second. */
  .ind-list__head { grid-row: 1; }
  .ind-list__blurb { grid-column: 1; }
  .ind-list__arrow { grid-column: 2; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ind-list__link, .ind-list__arrow { transition: none; }
}