/* ============================================================
   ALTER ENGINEERS — DESIGN TOKENS
   ============================================================ */
:root {
  /* Brand */
  --accent-color: #5b5dd3;
  --accent-dark:  #3d40b8;
  --bg-color:     #ffffff;
  --text-color:   #1a1a1a;
  --text-light:   #555555;
  --border-color: rgba(91, 93, 211, 0.15);
  --card-bg:      #ffffff;
  --color-mint:   #b6fad1;
  --color-orange: #e0643d;

  /* Shape */
  --border-radius:    0px;
  --border-radius-sm: 0px;

  /* Typography */
  --font-body:    'Satoshi', sans-serif;
  --font-heading: 'Satoshi', sans-serif;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 8rem;
  --max-width:   1200px;

  /* Layout */
  --nav-height:          3rem;   /* fixed header-navigation-bar height */
  --article-width:       820px;  /* max reading width for bloob-shape: article */
  --article-padding-top: calc(var(--nav-height) + var(--spacing-lg));

  /* Article shape — AE brand colors */
  --article-title-color:    var(--accent-color);
  --article-subtitle-color: var(--accent-color);

  /* Article shape — AE sizing (graphic-design pass).
     Satoshi has a tall x-height, so it reads larger than its nominal size.
     Note: AE's legacy theme.min.css forces p{font-size:1rem}, which the shape's
     container-level token can't beat — the .article-body overrides further down
     re-apply --article-body-size at element level so it actually takes effect.
     Shared defaults live in lib/visualizers/article/styles.css.
     Scale (15px body): title 34 · h1 24 · h2 20 · h3 17 · body 15. */
  --article-body-size:        0.9375rem;                  /* 15px reading body */
  --article-body-line-height: 1.65;
  --article-title-size:       clamp(1.6rem, 2.6vw, 2.1rem); /* page title ~26→34px */
  --article-subtitle-size:    1.25rem;                    /* 20px deck under the title */
  --article-h1-size:          1.5rem;                     /* 24px */
  --article-h2-size:          1.25rem;                    /* 20px */
  --article-h3-size:          1.0625rem;                  /* 17px */
}

/* ============================================================
   ARTICLE / PROSE — AE OVERRIDES
   AE's legacy theme.min.css resets defeat two shared defaults:
     • p{font-size:1rem}        → re-apply the body-size token at element level
                                   (.article-body p (0,1,1) beats bare p (0,0,1))
     • li{list-style-type:none} → restore bullets for authored prose lists
   Scoped to content wrappers, so nav/footer menus keep their reset.
   ============================================================ */
.article-body p,
.article-body li {
  font-size: var(--article-body-size, 1rem);
}

/* Restore list markers inside prose (theme.min.css strips them on every li).
   Direct-child scope avoids touching visualizer-generated lists. */
.article-body ul > li,
.page-content ul > li,
.projects-single__text ul > li {
  list-style-type: disc;
}
.article-body ol > li,
.page-content ol > li,
.projects-single__text ol > li {
  list-style-type: decimal;
}

/* List text must match body. theme.min.css leaves li at weight 400 while p is
   500, so list items read as a lighter/different font — match them (links keep
   their accent color + underline, just not a different weight). */
.article-body li,
.article-body li a {
  font-family: var(--font-body);
  font-weight: 500;
}

/* ── Article structural overrides ───────────────────────────────
   IMPORTANT: the shared article shape's CSS (/assets/css/visualizers/
   article.css) loads AFTER this file, so an equal-specificity rule here LOSES
   to it. These rules are therefore scoped under .article-page (the shape's own
   wrapper, an ancestor of every .article-* element) → specificity (0,2,x),
   which beats the shape's bare .article-* / .article-body * rules regardless of
   load order. Don't drop the .article-page prefix or these silently stop
   working. (Sizes are handled via tokens in :root, which the shape reads.) */

/* Header rhythm: title + subtitle as one tight unit; kill the ~6rem pre-body
   void left by the shape's header margin (AE --spacing-lg is 4rem). */
.article-page .article-header {
  padding-bottom: 1.25rem;
  margin-bottom:  1.5rem;
}
.article-page .article-title {
  margin-bottom: 0;         /* gap to subtitle comes from leading, not margin */
  line-height: 1.1;         /* tighten leading so the subtitle sits close */
}
.article-page .article-subtitle {
  margin-top: 0;            /* subtitle tucks right under the title */
  margin-bottom: 1.5rem;    /* breathing room below the title block */
  line-height: 1.25;
  opacity: 0.85;
}

/* More room below in-body ## headings before their content (e.g. the list). */
.article-page .article-body h2 {
  margin-bottom: 1.1rem;    /* shared default is 0.5rem */
}

/* Blockquote accent bar: remove the shape's full-height left border and draw a
   pseudo-bar that stops short of the bottom. */
.article-page .article-body blockquote {
  position: relative;
  border-left: 0;
  padding-left: 1.25rem;
}
.article-page .article-body blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2rem;
  bottom: 1.3rem;           /* ← bar ends above the bottom of the quote */
  width: 3px;
  background: var(--accent-color);
  border-radius: 3px;
}

/* ============================================================
   SECTION CONTAINERS  (for ::: markdown fences)
   Only apply to sections that explicitly opt in with a bg-* class.
   Do NOT use section[class] — it would override theme.min.css backgrounds
   on .hero-block, .projects, .image-text, etc.
   ============================================================ */
/* bg-* token classes — use as bg=<token> on any ::: visualizer fence,
   or as a plain class on any ::: container (e.g. ::: bg-dark).
   !important overrides theme.min.css section defaults.

   Four color roles per token:
     --pair-bg     → section background
     --pair-title  → h1–h4 headings
     --pair-text   → body text (p, li)
     --pair-label  → small section labels (.label) — distinct from headings

   SEMANTIC PAIRS (universal — every theme must define these):
   Visualizer defaults reference only these names so they work across themes.

   Token       Role                          AE value
   ─────────   ────                          ────────
   light       soft brand-tinted background  #b6fad1 (mint)
   featured    bold / hero section           #e0643d (orange)
   dark        dark background               #1a1a1a
   accent      brand primary as bg           var(--accent-color)
   muted       neutral off-white             #f5f5f5
   default     plain white                   #ffffff

   THEME-SPECIFIC PAIRS (AE named colors — for author use in bg= fences):
   Themes may add any named pairs beyond the semantic set.

   Token       AE value         Note
   ─────────   ────────         ────
   green       #b6fad1          alias → light
   orange      #e0643d          alias → featured
   white       #ffffff          alias → default
*/

/* ── Semantic pairs (required by all themes) ─────────────────── */
.bg-light    { --pair-bg: #b6fad1;             --pair-title: var(--accent-color); --pair-text: var(--accent-color); --pair-label: var(--accent-color); }
.bg-featured { --pair-bg: #e0643d;             --pair-title: #ffffff;             --pair-text: #ffffff;             --pair-label: #b6fad1; }
.bg-dark     { --pair-bg: #1a1a1a;             --pair-title: #ffffff;             --pair-text: #ffffff;             --pair-label: #b6fad1; }
.bg-accent   { --pair-bg: var(--accent-color); --pair-title: #ffffff;             --pair-text: #ffffff;             --pair-label: #b6fad1; }
.bg-muted    { --pair-bg: #f5f5f5;             --pair-title: var(--text-color);   --pair-text: var(--text-color);   --pair-label: var(--accent-color); }
.bg-default  { --pair-bg: #ffffff;             --pair-title: var(--text-color);   --pair-text: var(--text-color);   --pair-label: var(--accent-color); }

/* ── Theme-specific aliases (AE only) ────────────────────────── */
.bg-green  { --pair-bg: #b6fad1;             --pair-title: var(--accent-color); --pair-text: var(--accent-color); --pair-label: var(--accent-color); }
.bg-orange { --pair-bg: #e0643d;             --pair-title: #ffffff;             --pair-text: #ffffff;             --pair-label: #b6fad1; }
.bg-white  { --pair-bg: #ffffff;             --pair-title: var(--text-color);   --pair-text: var(--text-color);   --pair-label: var(--accent-color); }

/* Apply pair universally — background, body text, heading, and label cascade */
.bg-light, .bg-featured, .bg-dark, .bg-accent, .bg-muted, .bg-default,
.bg-green, .bg-orange, .bg-white {
  background: var(--pair-bg) !important;
  color: var(--pair-text);
}
.bg-light h1,    .bg-light h2,    .bg-light h3,    .bg-light h4,
.bg-featured h1, .bg-featured h2, .bg-featured h3, .bg-featured h4,
.bg-dark h1,     .bg-dark h2,     .bg-dark h3,     .bg-dark h4,
.bg-accent h1,   .bg-accent h2,   .bg-accent h3,   .bg-accent h4,
.bg-muted h1,    .bg-muted h2,    .bg-muted h3,    .bg-muted h4,
.bg-default h1,  .bg-default h2,  .bg-default h3,  .bg-default h4,
.bg-green h1,    .bg-green h2,    .bg-green h3,    .bg-green h4,
.bg-orange h1,   .bg-orange h2,   .bg-orange h3,   .bg-orange h4,
.bg-white h1,    .bg-white h2,    .bg-white h3,    .bg-white h4 {
  color: var(--pair-title);
}

/* ============================================================
   LABEL — SECTION MARKERS
   Overrides theme.min.css .label (0.625rem mobile, 1.375rem desktop).
   Uses --pair-label so color adapts automatically to any bg-* token.
   Falls back to accent color when no bg token is set (default white page).
   ============================================================ */
.label {
  font-size: 0.875rem;
  color: var(--pair-label, var(--accent-color));
}

/* ============================================================
   FOOTER — BLOOB HAUS CREDIT
   Small-caps + tracked label style (Bauhaus typographic feel).
   ============================================================ */
.footer__bloob-credit,
.footer__bloob-credit a {
  font-variant: small-caps;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent-color) !important;
  text-decoration: none;
}

/* ============================================================
   FOOTER — DESIGN / CREDIT LINE OPACITY
   De-emphasise "Design by Akeo" and "Built with Bloob Haus".
   ============================================================ */
.footer__design-by {
  opacity: 0.4;
}

/* ============================================================
   FOOTER — MOBILE SOCIAL ORDER
   theme.min.css applies column-reverse only at ≥1024px, so on
   mobile DOM order wins: credits appear above LinkedIn. Force
   the same reversed order (LinkedIn first) at all sizes.
   ============================================================ */
@media (max-width: 1023px) {
  .footer__design-social {
    display: flex;
    flex-direction: column-reverse;
  }
}

/* ============================================================
   FOOTER — LINKEDIN LINK SIZE
   Double the font size relative to the default menu-item.
   ============================================================ */
.footer__social .menu-item a {
  font-size: 2em;
}

/* ============================================================
   HOMEPAGE BODY BACKGROUND
   The .hero-block is position: fixed; z-index: -1 — it stays fixed
   while sections scroll over it. body.home needs the matching
   purple background so the hero area appears correctly.
   ============================================================ */
body.home {
  background-color: #5b5dd3;
}

/* ============================================================
   STRIP WORDPRESS ARTIFACTS
   ============================================================ */
html { margin-top: 0 !important; }

/* ============================================================
   HEADING-AND-PARAGRAPH SECTION
   theme.min.css sets color: #5b5dd3 on the section but it can be
   overridden by cascade. Enforce purple text explicitly.
   ============================================================ */
.heading-and-paragraph,
.heading-and-paragraph h1,
.heading-and-paragraph p {
  color: var(--accent-color);
}

/* ============================================================
   TEAM SECTION — COLOR INHERITANCE
   theme.min.css sets color: #5b5dd3 on .team but we want it
   to flow through the CSS variable so token changes propagate.
   ============================================================ */
.team,
.team h1,
.team h3,
.team p {
  color: var(--accent-color);
}

/* ============================================================
   PROJECT SINGLE PAGE — HERO SWIPER IMAGES
   theme.min.css targets .projects-single__image directly; our
   <picture> elements inside the Swiper need equivalent fill rules.
   ============================================================ */
.projects-single__image-container picture,
.projects-single__image-container img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Nav logo sizing — PhotoSwipe wraps the img in <picture><a>, so target by container */
.header-navigation-bar__desktop-logo img,
.header-navigation-bar__desktop-logo picture img {
  height: 48px !important;
  width: auto !important;
  max-width: none !important;
}
.header-navigation-bar__mobile-logo img,
.header-navigation-bar__mobile-logo picture img {
  height: 37px !important;
  width: auto !important;
  max-width: none !important;
}

/* ============================================================
   PROJECT SINGLE — TITLE (building name)
   Default (no subtitle present): the building name IS the page title —
   big, brand-dark, size-capped so it doesn't grow unbounded.
   theme.min.css sets the content area to #5b5dd3; we darken to
   --accent-dark for legibility.
   ============================================================ */
.projects-single__title {
  color: var(--accent-dark);                  /* darker than the theme's #5b5dd3 */
  font-size: clamp(2rem, 5vw, 3.75rem);       /* fluid: grows up to 3.75rem, no larger */
  line-height: 1.15;
}

/* When a ## subtitle follows, the AE hierarchy flips: the building name
   becomes a small orange identifier label (kicker) and the subtitle below
   is the dominant headline. Mirrors the folder-preview card
   (.fp-card__title / .fp-card__subtitle) so the card and the page read the
   same way. H1 stays above H2 in the DOM because it's the building name.
   margin-bottom:0 also collapses theme.min.css's large responsive title
   margin (up to 9.375rem) so the label sits tight above the headline. */
.projects-single__title:has(+ .projects-single__subtitle) {
  color: var(--color-orange);
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0;
}

/* ============================================================
   PROJECT SINGLE — TWO-COLUMN LAYOUT
   theme.min.css uses display:flex with gap:14-28rem on this container.
   Those huge gaps break at medium widths (3 flex items in a row
   at different sizes). We replace with CSS Grid:

   Desktop (>900px): [text / read-more  |  metadata table]
                      1fr column          280px fixed column
   ≤900px: flex column, meta above text (order: -1)

   NOTE on "text wrapping under the table":
   CSS Grid keeps strict columns — text never flows under meta.
   If you want text to flow around and under the meta (newspaper-style),
   use `float: right` on .project-meta instead. Grid is more predictable.
   ============================================================ */
@media (min-width: 901px) {
  .projects-single__main-container {
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-template-rows: auto auto;
    column-gap: 3rem;
    align-items: start;
  }
  .projects-single__text {
    grid-column: 1;
    grid-row: 1;
    width: auto !important;   /* override theme.min.css width: 60% / 49.125rem */
  }
  .projects-single__read-more {
    grid-column: 1;
    grid-row: 2;
  }
  .project-meta {
    grid-column: 2;
    grid-row: 1 / 3;          /* span text and read-more rows */
    order: 0;                 /* reset any mobile order override */
  }
}

@media (max-width: 900px) {
  .projects-single__main-container {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .project-meta {
    order: -1;                /* meta always above text when stacked */
  }
}

/* ============================================================
   PROJECT SINGLE — BODY TEXT & IMAGES
   ============================================================ */

/* Paragraph text */
.projects-single__text p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 1.4rem;
}

/* Headings inside project body text */
.projects-single__text h2 { font-size: 2rem; font-weight: 800; margin-top: 2rem; margin-bottom: 0.4rem; }
.projects-single__text h3 { font-size: 1.1rem;  margin-top: 1.5rem; margin-bottom: 0.35rem; }
.projects-single__text h4 { font-size: 1rem;    margin-top: 1.25rem; margin-bottom: 0.3rem; }
.projects-single__text h2:first-child,
.projects-single__text h3:first-child { margin-top: 0; }
.projects-single__text h2 + h3 { margin-top: 0.25rem; }

/* Body images (below title): full column width.
   In the grid layout the text column is already constrained by 1fr,
   so 100% is the correct width — no need to reduce further. */
.projects-single__text img,
.projects-single__text picture {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
}

/* PhotoSwipe wrapper matches body image sizing */
.projects-single__text .pswp-gallery__item {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1rem 0;
}
.projects-single__text .pswp-gallery__item picture,
.projects-single__text .pswp-gallery__item img {
  width: 100%;
  max-width: 100%;
}

/* ============================================================
   PROJECT SINGLE — METADATA TABLE (rebuilt as <dl>)
   Uses .project-meta / .project-meta__row so we own all spacing.
   Colors match original site: purple border (#5b5dd3), green label chip (#b6fad1).
   ============================================================ */
.project-meta {
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}
.project-meta__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 8px 0;
  border-bottom: 1px solid #5b5dd3;
}
.project-meta__row:first-child {
  border-top: 1px solid #5b5dd3;
}
/* Label: green highlight chip, matches original .projects-single__label */
.project-meta dt {
  margin: 0;
  padding: 2px 6px;
  background-color: #b6fad1;
  display: inline-block;
  /* letter-spacing / uppercase / font-weight inherited from .label in theme.min.css */
}
.project-meta dd {
  margin: 0;
  padding: 0;
  text-align: right;
  font-size: 1rem;
  color: var(--text-color);
}

/* ============================================================
   MORE PROJECTS — BOTTOM PADDING
   ~50% of original theme desktop bottom padding (~6rem)
   ============================================================ */
.articles.more-projects {
  padding-bottom: 3rem !important;
}

/* ============================================================
   FOLDER-PREVIEW SLIDER-CARDS (articles section)
   theme.min.css sets .articles__repeater margin-top up to
   9.3125rem !important — designed for the original WordPress
   DOM. Our folder-preview structure doesn't need this.
   Also contain slides so they don't bleed into adjacent sections.
   ============================================================ */
.articles {
  overflow-x: hidden; /* clip Swiper horizontal overflow; don't clip vertical content */
}
.articles .articles__repeater {
  margin: 1.5rem 0 0 0 !important;
}
.articles .articles__image {
  width: 100%;
  max-width: 100%;
  height: 14rem;
  object-fit: cover;
  display: block;
}

/* ============================================================
   UNIVERSAL BUTTON CLASS
   Applied via markdown-it-attrs: [LINK TEXT](url){.button}
   Every theme defines .button with its own brand treatment.
   This theme matches the original image-text__contact-us style:
   mint/teal background sliding to purple on hover.
   ============================================================ */
.button {
  display: inline-block;
  padding: 0 0.84375rem;
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 2rem;
  color: #5b5dd3;
  background: linear-gradient(to right, #5b5dd3 50%, #b6fad1 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.3s ease-out;
}
.button:hover {
  background-position: left bottom;
  color: #b6fad1;
}

/* ============================================================
   IMAGE-TEXT SECTION — CONTENT STYLING
   theme.min.css handles: background (#e0643d), offset (top: -Xrem),
   flex layout, image height, text-container width.
   These rules style the rendered markdown inside the text column.
   ============================================================ */

/* First h2 → "OUR SOLUTIONS" label (small, spaced, uppercase) */
.image-text__text-container > h2:first-child {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pair-text, #ffffff);
  padding: 1.875rem 0 1.25rem;
  margin: 0;
}

/* h3 → main heading */
.image-text__text-container > h3 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  color: var(--pair-title, #ffffff);
  padding-bottom: 1.875rem;
  margin: 0;
  line-height: 1.15;
}

/* Paragraphs */
.image-text__text-container > p {
  color: var(--pair-text, #ffffff);
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 0.5rem;
}

/* Standalone <p><a> → button (Contact Us pattern).
   :has() is supported in all modern browsers (Chrome 105+, Firefox 121+). */
.image-text__text-container p:has(> a:only-child) {
  margin-top: 2rem;
}
.image-text__text-container p:has(> a:only-child) > a {
  display: inline-block;
  padding: 0 0.84375rem;
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 2rem;
  color: #5b5dd3;
  background: linear-gradient(to right, #5b5dd3 50%, #b6fad1 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.3s ease-out;
}
.image-text__text-container p:has(> a:only-child) > a:hover {
  background-position: left bottom;
  color: #b6fad1;
}

/* image=right: reverse columns via direction trick (DOM order stays image-first
   for screen readers; visual order flips via CSS) */
.image-text--image-right .image-text__wrapper {
  direction: rtl;
}
.image-text--image-right .image-text__text-container {
  direction: ltr;
}

/* --- Iframe embeds --- */
.entry-content iframe,
.entry-content embed {
  width: 100%;
  display: block;
  overflow: hidden;
  margin: 1.5rem 0;
}

/* 16:9 only for video players — other embeds size themselves via JS */
.entry-content iframe[src*="youtube.com"],
.entry-content iframe[src*="vimeo.com"] {
  aspect-ratio: 16 / 9;
  height: auto;
}

/* --- Project hero slideshow ---
   theme.min.css locks the swiper wrapper height at 62.5rem with !important.
   Override to 60% of that; reduce further on narrow screens.
   Images crop symmetrically via object-fit: cover. */

.projects-single__hero {
  position: relative;
}

.projects-single__images-content {
  height: 37.5rem !important;
  max-height: 37.5rem !important;
}

@media (max-width: 768px) {
  .projects-single__images-content {
    height: 22rem !important;
    max-height: 22rem !important;
  }
}

.projects-single__image-container {
  overflow: hidden;
  height: 100%;
}

.projects-single__image-container picture {
  display: block;
  height: 100%;
}

.projects-single__image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Buttons overlaid inside the slide, bottom-left */
.projects-single__buttons-container {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  margin: 0 !important;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* White circle background so buttons are visible over any image */
.projects-single__prev-button,
.projects-single__next-button {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  /* Replace the full SVG (circle + arrow) with arrow-only, accent-coloured */
}

.projects-single__prev-button {
  background-image: url("data:image/svg+xml,%3Csvg width='43' height='43' viewBox='0 0 43 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M26.7578 11.3984L15.7672 17.8096L15.7672 25.3817L26.7578 31.7929L26.7578 26.2617L18.759 21.5957L26.7578 16.9297L26.7578 11.3984Z' fill='%235B5DD3'/%3E%3C/svg%3E") !important;
}

.projects-single__next-button {
  background-image: url("data:image/svg+xml,%3Csvg width='43' height='43' viewBox='0 0 43 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.2422 31.6016L27.2328 25.1904L27.2328 17.6183L16.2422 11.2071L16.2422 16.7383L24.241 21.4043L16.2422 26.0703L16.2422 31.6016Z' fill='%235B5DD3'/%3E%3C/svg%3E") !important;
}

.projects-single__prev-button:hover,
.projects-single__next-button:hover {
  background-color: rgba(255, 255, 255, 1) !important;
}

/* Counter sits next to the buttons */
.projects-single__counter {
  margin: 0 !important;
  padding: 0.15rem 0.6rem;
  background: rgba(255,255,255,0.92);
  font-size: 0.85rem !important;
}

/* Project single — always show full body text; remove WP read-more truncation on mobile.
   theme.min.css sets height:10.625rem + overflow:hidden below 768px and shows
   .projects-single__read-more. We disable both. */
.projects-single__text {
  height: auto !important;
  overflow: visible !important;
}

.projects-single__read-more {
  display: none !important;
}

/* Project single — no hero: offset content below fixed nav */
.projects-single--no-hero .projects-single__main-content {
  padding-top: calc(var(--nav-height) + var(--spacing-md));
}

/* ============================================================
   PROJECT SINGLE — SUBTITLE
   Catching headline from ## H2 immediately after the H1 title.
   Extracted automatically by the preprocessor's title-deduplicator.
   ============================================================ */
/* The ## subtitle is the dominant headline on the project page (the
   building name above it is demoted to a small orange label — see the
   .projects-single__title:has(...) rule in the TITLE section). Big and
   bold in brand-dark; its 0.35rem margin-top gives the tight gap under
   the label. */
.projects-single__subtitle {
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  font-weight: 800;
  color: var(--accent-dark);
  margin-top: 0.35rem;
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* ============================================================
   TAG BADGES — shared style used in project profiles, tag pages,
   and anywhere else tags appear. AE style: mint green chip with
   sharp edges (--border-radius: 0px), accent-colored text.
   Mirrors the project-meta dt label chip for visual consistency.
   ============================================================ */
.tag-badge::before {
  content: "#";
  opacity: 0.6;
  margin-right: 1px;
}

.tag-badge {
  display: inline-block;
  padding: 2px 8px;
  background-color: var(--color-mint, #b6fad1);
  color: var(--accent-color);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.6;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tag-badge:hover {
  background-color: var(--accent-color);
  color: #ffffff;
}

/* ============================================================
   PROJECT TAGS — chip row shown below title + subtitle on
   project profile pages.
   ============================================================ */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.75rem;
}

/* ============================================================
   TAG PAGE — per-tag listing at /tags/[tag]/
   ============================================================ */
.tag-page {
  max-width: var(--max-width, 1200px);
  margin: 0 auto;
  padding: calc(var(--nav-height) + var(--spacing-lg)) var(--spacing-md) var(--spacing-xl);
}

.tag-page__header {
  margin-bottom: 2.5rem;
}

.tag-page__label {
  margin: 0 0 0.4rem;
}

.tag-page__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--accent-dark);
  margin: 0;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tag-page__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tag-page__item {
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 0;
}
.tag-page__item:first-child {
  border-top: 1px solid var(--border-color);
}

.tag-page__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.tag-page__link:hover .tag-page__item-title {
  color: var(--accent-color);
}

.tag-page__item-title {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-color);
  transition: color 0.15s ease;
}

.tag-page__item-subtitle {
  display: block;
  font-size: 0.95rem;
  color: var(--text-light, #555);
  margin-top: 0.2rem;
}

/* --- Generic page layout (page.njk) --- */
.page-article {
  padding-top: calc(var(--nav-height) + var(--spacing-md));
}

.page-header {
  margin-bottom: 2rem;
}


/* ============================================================
   PAGE CONTENT — HEADING HIERARCHY
   Scoped to .page-content so these don't interfere with
   theme.min.css sections (.hero-block, .projects, etc.)
   Pattern mirrors marbles-pouch: clear scale, top gap before
   each heading, small gap after (before the following body text).
   ============================================================ */
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: var(--accent-color);
}

.page-content h1 { font-size: clamp(1.7rem, 4vw, 2.1rem); }
.page-content h2 { font-size: 1.85rem; }
.page-content h3 { font-size: 1.2rem; }
.page-content h4 { font-size: 1rem; }
.page-content h5 { font-size: 0.9rem; }
.page-content h6 { font-size: 0.8rem; }

/* First heading in content: no top gap */
.page-content :is(h1, h2, h3):first-child {
  margin-top: 0;
}

/* H1 with no subtitle following: add breathing room before body */
.page-content h1:first-child:not(:has(+ h2)) {
  margin-bottom: 2.5rem;
}

/* H2 immediately after H1 = subtitle treatment:
   pull tight under h1, accent color, large gap before body begins */
.page-content h1 + h2 {
  margin-top: 0.25rem;
  font-weight: 600;
  font-size: 1.35rem;
  margin-bottom: 2.5rem;
  color: var(--accent-color);
}

/* Consecutive headings: collapse top gap */
.page-content h2 + h3,
.page-content h3 + h4 {
  margin-top: 0.25rem;
}

.page-content p {
  line-height: 1.65;
  margin-bottom: 1rem;
}