/*
Theme Name: JBC
Theme URI: http://jordanbakercaldwell.com
Author: Jordan Baker-Caldwell
Author URI: http://jordanbakercaldwell.com
Description: JBC — editorial child theme for jordanbakercaldwell.com
Version: 2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jbc
Template: jbc-studio
*/

/* ============================================================
   JBC DESIGN SYSTEM
   All variables, resets, and global styles live here.
   Template-specific styles go in assets/css/jbc-templates.css
   ============================================================ */

/* ── Global headline overrides for JBC templates ── */
.jbc-homepage h1,
.jbc-homepage h2,
.jbc-homepage h3,
.page-template-templates-template-jbc-homepage h1,
.page-template-templates-template-jbc-homepage h2,
.page-template-templates-template-jbc-homepage h3 {
  color: var(--jbc-paper) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: "DM Sans","Gotham","Gotham SSm","Montserrat",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
}

/* ── Force DM Sans everywhere on JBC templates ── */
.jbc-homepage body,
.jbc-homepage h1,
.jbc-homepage h2,
.jbc-homepage h3,
.jbc-homepage h4,
.jbc-homepage p,
.jbc-homepage a,
.jbc-homepage span,
.jbc-homepage div,
.jbc-homepage button,
.jbc-homepage nav,
.jbc-homepage li,
.page-template-templates-template-jbc-homepage body,
.page-template-templates-template-jbc-homepage h1,
.page-template-templates-template-jbc-homepage h2,
.page-template-templates-template-jbc-homepage h3,
.page-template-templates-template-jbc-homepage p,
.page-template-templates-template-jbc-homepage a,
.page-template-templates-template-jbc-homepage span,
.page-template-templates-template-jbc-homepage div,
.page-template-templates-template-jbc-homepage button,
.page-template-templates-template-jbc-homepage nav,
.page-template-templates-template-jbc-homepage li {
  font-family: "DM Sans","Gotham","Gotham SSm","Montserrat",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
}

:root {
  /* ── Palette ── */
  --jbc-bg:        #0d0c0a;
  --jbc-paper:     #f3eee6;
  --jbc-muted:     rgba(243,238,230,.65);
  --jbc-line:      rgba(243,238,230,.10);
  --jbc-amber:     #C8910A;
  --jbc-amber-dim: rgba(200,145,10,.12);

  /* ── Typography ── */
  --jbc-sans: "DM Sans","Gotham","Gotham SSm","Montserrat",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;

  /* ── Motion ── */
  --jbc-ease:     cubic-bezier(.22,.61,.36,1);
  --jbc-ease-out: cubic-bezier(.16,1,.3,1);
  --jbc-dur-sm:   .4s;
  --jbc-dur-md:   .9s;
  --jbc-dur-lg:   1.4s;

  /* ── Spacing ── */
  --jbc-gutter: clamp(22px,5vw,86px);
  --jbc-gap:    clamp(14px,2.5vw,32px);

  /* ── Per-page overrides (set via body data-attrs or Customizer) ── */
  --page-bg:         var(--jbc-bg);
  --page-text:       var(--jbc-paper);
  --page-text-muted: var(--jbc-muted);
  --page-accent:     var(--jbc-amber);
  --page-line:       var(--jbc-line);
}

/* ── Light page variant ── */
body.jbc-light {
  --page-bg:         var(--jbc-paper);
  --page-text:       var(--jbc-bg);
  --page-text-muted: rgba(13,12,10,.55);
  --page-accent:     var(--jbc-amber);
  --page-line:       rgba(13,12,10,.10);
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--page-bg);
  color: var(--page-text);
  font-family: var(--jbc-sans);
  scroll-behavior: auto; /* Lenis handles smooth scroll */
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--page-text);
  overflow-x: hidden;
  transition: background var(--jbc-dur-md) var(--jbc-ease),
              color      var(--jbc-dur-md) var(--jbc-ease);
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* ── GRAIN OVERLAY ── */
.jbc-grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 99;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ── NAV ── */
.jbc-nav {
  position: fixed; inset: 0 0 auto;
  z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px var(--jbc-gutter);
  mix-blend-mode: difference;
}

.jbc-nav__mark {
  font-family: var(--jbc-sans);
  font-size: 18px; font-weight: 700;
  letter-spacing: .06em;
  color: var(--jbc-paper);
}

.jbc-nav__links {
  display: flex; gap: clamp(16px,3vw,40px);
  list-style: none; margin: 0; padding: 0;
}
.jbc-nav__links a {
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(243,238,230,.8);
  transition: color var(--jbc-dur-sm) var(--jbc-ease);
}
.jbc-nav__links a:hover { color: var(--jbc-paper); }

.jbc-nav__burger {
  display: none;
  width: 36px; height: 24px;
  flex-direction: column; justify-content: space-between;
  background: none; border: none; padding: 0;
  cursor: pointer;
}
.jbc-nav__burger span {
  display: block; height: 1px;
  background: var(--jbc-paper);
  transition: transform var(--jbc-dur-sm) var(--jbc-ease),
              opacity   var(--jbc-dur-sm) var(--jbc-ease);
}

/* ── MOBILE NAV OVERLAY ── */
.jbc-nav-overlay {
  position: fixed; inset: 0;
  background: var(--jbc-bg);
  z-index: 38;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--jbc-dur-md) var(--jbc-ease);
}
.jbc-nav-overlay.open {
  opacity: 1; pointer-events: all;
}
.jbc-nav-overlay ul {
  list-style: none; margin: 0; padding: 0;
  text-align: center;
}
.jbc-nav-overlay ul li { overflow: hidden; }
.jbc-nav-overlay ul a {
  display: block;
  font-size: clamp(36px,8vw,80px);
  font-weight: 800;
  letter-spacing: 0;
  color: var(--jbc-paper);
  line-height: 1.1;
  transform: translateY(110%);
  transition: transform var(--jbc-dur-lg) var(--jbc-ease-out),
              color      var(--jbc-dur-sm) var(--jbc-ease);
}
.jbc-nav-overlay.open ul a { transform: translateY(0); }
.jbc-nav-overlay ul a:hover { color: var(--jbc-amber); }

/* Stagger overlay links */
.jbc-nav-overlay ul li:nth-child(1) a { transition-delay: .05s; }
.jbc-nav-overlay ul li:nth-child(2) a { transition-delay: .10s; }
.jbc-nav-overlay ul li:nth-child(3) a { transition-delay: .15s; }
.jbc-nav-overlay ul li:nth-child(4) a { transition-delay: .20s; }
.jbc-nav-overlay ul li:nth-child(5) a { transition-delay: .25s; }
.jbc-nav-overlay ul li:nth-child(6) a { transition-delay: .30s; }

/* Burger → X */
.jbc-nav--open .jbc-nav__burger span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.jbc-nav--open .jbc-nav__burger span:nth-child(2) { opacity: 0; }
.jbc-nav--open .jbc-nav__burger span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* ── PAGE TRANSITION CURTAIN ── */
.jbc-curtain {
  position: fixed; inset: 0;
  background: var(--jbc-bg);
  z-index: 200;
  transform: translateY(100%); /* hidden below viewport on load */
  pointer-events: none;
  will-change: transform;
}

/* ── TYPOGRAPHY UTILITIES ── */
.jbc-eyebrow {
  font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--page-text-muted);
  margin: 0 0 20px;
}

.jbc-headline {
  font-family: var(--jbc-sans);
  font-size: clamp(48px,6.5vw,116px);
  font-weight: 800;
  line-height: .93;
  letter-spacing: 0;
  margin: 0;
}

.jbc-subhead {
  font-size: clamp(22px,2.8vw,42px);
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: 0;
}

.jbc-body {
  font-size: clamp(16px,1.4vw,20px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--page-text-muted);
}

/* ── BUTTON ── */
.jbc-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px;
  border: 1px solid rgba(243,238,230,.3);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--page-text);
  background: transparent;
  transition: background var(--jbc-dur-sm) var(--jbc-ease),
              color      var(--jbc-dur-sm) var(--jbc-ease),
              border-color var(--jbc-dur-sm) var(--jbc-ease);
}
.jbc-btn:hover {
  background: var(--jbc-paper);
  color: var(--jbc-bg);
  border-color: var(--jbc-paper);
}
.jbc-btn--amber {
  border-color: var(--jbc-amber);
  color: var(--jbc-amber);
}
.jbc-btn--amber:hover {
  background: var(--jbc-amber);
  color: var(--jbc-bg);
}

/* ── MARQUEE ── */
.jbc-marquee {
  overflow: hidden;
  border-top: 1px solid var(--page-line);
  border-bottom: 1px solid var(--page-line);
  padding: 24px 0;
}
.jbc-marquee__track {
  display: flex;
  animation: jbc-mq 45s linear infinite;
  width: max-content;
}
.jbc-marquee__item {
  font-size: 11px; font-weight: 600;
  letter-spacing: .25em; text-transform: uppercase;
  color: rgba(243,238,230,.13);
  padding: 0 30px; flex-shrink: 0;
}
.jbc-marquee__item b { color: var(--jbc-amber); font-weight: 400; }

/* ── FOOTER ── */
.jbc-footer {
  display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 36px var(--jbc-gutter);
  font-size: 12px; color: var(--page-text-muted);
}

/* ── HIDE PARENT THEME ELEMENTS on JBC templates ── */
.page-template-template-jbc-homepage #masthead,
.page-template-template-jbc-homepage .site-header,
.page-template-template-jbc-homepage #page > .site-header {
  display: none;
}
.page-template-template-jbc-homepage #content {
  padding: 0 !important;
}
.page-template-template-jbc-homepage .rasa-container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* ── ARTWORK GRID ── */
.jbc-artwork-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--jbc-gap);
  padding: 0 var(--jbc-gutter) 14vh;
}
.jbc-artwork-card {
  position: relative; overflow: hidden;
  aspect-ratio: 3/4;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--page-line);
  cursor: pointer;
}
.jbc-artwork-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 6s var(--jbc-ease);
}
.jbc-artwork-card:hover img { transform: scale(1); }
.jbc-artwork-card__info {
  position: absolute; inset: auto 0 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(13,12,10,.85), transparent);
  transform: translateY(100%);
  transition: transform var(--jbc-dur-md) var(--jbc-ease);
}
.jbc-artwork-card:hover .jbc-artwork-card__info { transform: translateY(0); }
.jbc-artwork-card__title {
  font-size: 14px; font-weight: 600;
  color: var(--jbc-paper); margin: 0 0 4px;
}
.jbc-artwork-card__meta {
  font-size: 11px; color: var(--jbc-amber);
  letter-spacing: .12em; text-transform: uppercase;
}

/* ── LIGHTBOX ── */
.jbc-lightbox {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(13,12,10,.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--jbc-dur-md) var(--jbc-ease);
}
.jbc-lightbox.open { opacity: 1; pointer-events: all; }
.jbc-lightbox__img {
  max-width: 90vw; max-height: 90vh;
  object-fit: contain;
}
.jbc-lightbox__close {
  position: absolute; top: 28px; right: 32px;
  background: none; border: none;
  color: var(--jbc-paper); font-size: 28px; line-height: 1;
  cursor: pointer; opacity: .6;
  transition: opacity var(--jbc-dur-sm);
}
.jbc-lightbox__close:hover { opacity: 1; }
.jbc-lightbox__caption {
  position: absolute; bottom: 36px; left: 50%;
  transform: translateX(-50%);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--jbc-muted);
}

/* ── ANIMATIONS ── */
@keyframes jbc-mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

.jbc-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--jbc-dur-lg) var(--jbc-ease),
              transform var(--jbc-dur-lg) var(--jbc-ease);
}
.jbc-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── FOOTER: suppress parent theme borders and HR on homepage ── */
.jbc-homepage .site-footer,
.jbc-homepage #colophon,
.page-template-templates-template-jbc-homepage .site-footer,
.page-template-templates-template-jbc-homepage #colophon {
  border-top: none !important;
  border: none !important;
}
.jbc-homepage .site-footer hr,
.jbc-homepage .site-footer::before,
.jbc-homepage #colophon hr,
.jbc-homepage #colophon::before,
.page-template-templates-template-jbc-homepage .site-footer hr,
.page-template-templates-template-jbc-homepage #colophon hr,
.page-template-templates-template-jbc-homepage .site-footer::before,
.page-template-templates-template-jbc-homepage #colophon::before {
  display: none !important;
  border: none !important;
  background: none !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .jbc-nav__links { display: none; }
  .jbc-nav__burger { display: flex; }

  .jbc-artwork-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .jbc-artwork-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL INNER PAGES — nav, typography, backgrounds
   ═══════════════════════════════════════════════════════════════ */

/* ── Hide parent theme header everywhere ── */
#masthead, .site-header { display: none !important; }

/* ── Global JBC nav sizing for inner pages ── */
.jbc-nav {
  position: fixed; inset: 0 0 auto; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px clamp(22px,4vw,70px);
}

/* Inner pages: nav sits on transparent bg, adapts to page color */
body:not(.jbc-homepage) .jbc-nav {
  mix-blend-mode: normal;
}
body:not(.jbc-homepage) .jbc-nav__mark,
body:not(.jbc-homepage) .jbc-nav__links a,
body:not(.jbc-homepage) .jbc-nav__burger span {
  /* Inherits from page color vars set per-page */
}

/* ── Content offset removed — each page manages its own top spacing ── */

/* ── NEWS / BLOG — white background ── */
.blog body,
.single-post body,
.category body,
.tag body {
  background: #ffffff !important;
}
.blog .jbc-nav__mark,
.blog .jbc-nav__links a,
.single-post .jbc-nav__mark,
.single-post .jbc-nav__links a,
.category .jbc-nav__mark,
.category .jbc-nav__links a {
  color: #0d0c0a !important;
}
.blog .jbc-nav__burger span,
.single-post .jbc-nav__burger span,
.category .jbc-nav__burger span { background: #0d0c0a !important; }

/* ── SINGLE POST: hide all parent theme chrome ────────────────────── */
/* Our single.php owns the entire layout — suppress everything the
   parent theme outputs so nothing duplicates. */

/* The rasa theme outputs the title + entry-meta BOTH in .page-header
   (above #content) AND inside .entry-header (inside #content).
   Kill both locations. */
.single-post .page-header,
.single-post .entry-header,
.single-post .entry-meta,
.single-post .entry-footer,
.single-post .post-navigation,
.single-post .post-navigation *,
.single-post h1.entry-title,
.single-post h2.entry-title,
.single-post .page-title,
.single-post .entry-thumbnail,
.single-post .post-thumbnail,
.single-post .rasa-breadcrumbs,
.single-post .breadcrumbs,
.single-post .breadcrumb,
/* The rasa theme wraps title+meta in .page-header outside #primary */
.single-post #page > .page-header,
.single-post #content > .page-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Collapse all wrappers — jbc-article handles its own spacing */
.single-post #content,
.single-post .site-content,
.single-post #primary,
.single-post .content-area,
.single-post .entry-content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
}
.single-post .container,
.single-post .rasa-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}

/* ── SINGLE POST: article layout ─────────────────────────────────── */
.jbc-single-post { background: #fff; min-height: 100vh; }

.jbc-article {
  max-width: 1020px;
  margin: 0 auto;
  padding: clamp(100px, 14vh, 160px) clamp(24px, 7vw, 100px) clamp(80px, 10vh, 120px);
}

/* Eyebrow: publication · date */
.jbc-article__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0 0 20px;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: rgba(13,12,10,.4) !important;
  line-height: 1.4 !important;
}
.jbc-article__eyebrow .sep {
  opacity: .3;
}

/* Headline */
.jbc-article__title {
  font-size: clamp(32px, 5vw, 64px) !important;
  font-weight: 800 !important;
  line-height: .95 !important;
  letter-spacing: -.01em !important;
  color: #0d0c0a !important;
  margin: 0 0 clamp(14px, 2vh, 24px) !important;
  text-transform: none !important;
}

/* Byline */
.jbc-article__byline {
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: .02em !important;
  color: rgba(13,12,10,.5) !important;
  margin: 0 0 clamp(28px, 4vh, 48px) !important;
  line-height: 1.5 !important;
  text-transform: none !important;
}
.jbc-article__byline strong {
  color: #0d0c0a !important;
  font-weight: 600 !important;
}

/* Divider */
.jbc-article__divider {
  border: none;
  border-top: 1px solid rgba(13,12,10,.1);
  margin: 0 0 clamp(36px, 5vh, 64px);
}

/* Featured image */
.jbc-article__featured-img {
  width: 100%;
  margin: 0 0 clamp(36px, 5vh, 64px);
}
.jbc-article__featured-img img {
  width: 100%;
  height: auto;
  display: block;
}
.jbc-article__featured-img figcaption {
  font-size: 12px !important;
  color: rgba(13,12,10,.45) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  margin-top: 12px;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

/* Body copy */
.jbc-article__body {
  font-size: clamp(17px, 1.4vw, 20px) !important;
  line-height: 1.85 !important;
  font-weight: 300 !important;
  color: #0d0c0a !important;
}
.jbc-article__body > * + * { margin-top: 1.5em; }
.jbc-article__body p {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  margin: 0 0 1.6em !important;
}
.jbc-article__body p:last-child { margin-bottom: 0 !important; }

.jbc-article__body h2 {
  font-size: clamp(22px, 2.8vw, 36px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: #0d0c0a !important;
  margin: 2.2em 0 .6em !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.jbc-article__body h3 {
  font-size: clamp(18px, 1.8vw, 26px) !important;
  font-weight: 700 !important;
  color: #0d0c0a !important;
  margin: 1.8em 0 .5em !important;
  text-transform: none !important;
}
.jbc-article__body a {
  color: #0d0c0a !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(13,12,10,.3);
}
.jbc-article__body a:hover {
  text-decoration-color: #C8910A;
}
.jbc-article__body blockquote {
  border-left: 3px solid #C8910A;
  padding: 4px 0 4px 24px;
  margin: 2em 0;
  font-style: italic;
  color: rgba(13,12,10,.65) !important;
}
.jbc-article__body figure {
  margin: 2.4em 0;
}
.jbc-article__body figure img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
}
.jbc-article__body figure figcaption {
  font-size: 12px !important;
  color: rgba(13,12,10,.45) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  margin-top: 10px;
  line-height: 1.5 !important;
  font-style: italic;
}
.jbc-article__body img:not(figure img) {
  width: 100%;
  height: auto;
  display: block;
  margin: 2.4em 0;
}
/* em/italic captions below images (parent theme uses <em> for captions) */
.jbc-article__body p > em:only-child,
.jbc-article__body p:has(> em:only-child) {
  font-size: 12px !important;
  color: rgba(13,12,10,.45) !important;
  letter-spacing: .06em !important;
  font-style: italic;
  display: block;
  margin-top: -1.2em;
}

/* WordPress caption shortcodes — force full width */
.jbc-article__body .wp-caption,
.jbc-article__body .wp-caption-text,
.jbc-article__body figure.wp-caption {
  width: 100% !important;
  max-width: 100% !important;
}
.jbc-article__body .wp-caption img,
.jbc-article__body figure.wp-caption img {
  width: 100% !important;
  height: auto !important;
  display: block;
}
.jbc-article__body .wp-caption-text {
  font-size: 12px !important;
  color: rgba(13,12,10,.45) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  font-style: italic;
  line-height: 1.5 !important;
  margin: 10px 0 0 !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* Mobile */
@media (max-width: 680px) {
  .jbc-article {
    padding-top: 88px;
  }
  .jbc-article__body {
    font-size: 17px !important;
    line-height: 1.75 !important;
  }
}

/* Remove sidebar — force full-width content column */
.blog #primary,
.archive #primary,
.single-post #primary,
.category #primary,
.tag #primary {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}
.blog #secondary,
.archive #secondary,
.single-post #secondary,
.category #secondary,
.tag #secondary {
  display: none !important;
}
/* Remove sidebar layout class padding */
.sidebar-single-right .content-area,
.sidebar-single-left .content-area {
  width: 100% !important;
}

/* ── EXHIBITIONS — dark background, white text ── */
.post-type-archive-portfolio body,
.single-portfolio body,
.page-id-exhibitions body {
  background: #ffffff !important;
  color: #0d0c0a !important;
}
.post-type-archive-portfolio h1,
.post-type-archive-portfolio h2,
.post-type-archive-portfolio h3,
.post-type-archive-portfolio p,
.post-type-archive-portfolio a,
.single-portfolio h1,
.single-portfolio h2,
.single-portfolio p {
  color: #0d0c0a !important;
}

/* ── PRESS / NEWS: fix broken images ── */
.entry-thumbnail img,
.post-thumbnail img,
.attachment-post-thumbnail,
img.attachment-rasa-blog-thumbnail,
img.attachment-rasa-blog-grid {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
/* Force images to load — prevent display:none from parent theme */
#main img, .entry-content img, .post-thumbnail img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

/* ── PERFORMANCE: contain layout shifts ── */
img {
  content-visibility: auto;
}
.entry-thumbnail, .post-thumbnail {
  background: #f0f0f0;
  min-height: 200px;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY — consistent with homepage across all pages
   ═══════════════════════════════════════════════════════════════ */

/* Headings — match homepage scale */
h1 { font-size: clamp(36px,5.5vw,80px) !important; font-weight: 800 !important; letter-spacing: 0 !important; line-height: .93 !important; }
h2 { font-size: clamp(28px,4vw,56px)   !important; font-weight: 800 !important; letter-spacing: 0 !important; line-height: 1.05 !important; }
h3 { font-size: clamp(20px,2.5vw,36px) !important; font-weight: 700 !important; letter-spacing: 0 !important; margin: 0 0 5px !important; }
h4 { font-size: clamp(16px,1.8vw,24px) !important; font-weight: 600 !important; }

/* No all-caps on headings site-wide */
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title, .archive-title,
.widget-title, .site-title {
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Body text */
p, li, td, th, label, input, textarea {
  font-size: clamp(15px,1.3vw,18px) !important;
  line-height: 1.75 !important;
  font-weight: 300 !important;
}

/* Navigation links — small caps style consistent with homepage */
.jbc-nav__links a,
.jbc-nav__mark {
  font-size: 12px !important;
  letter-spacing: .12em !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}
.jbc-nav__mark {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: none !important;
}

/* Post meta, dates, categories */
.entry-meta, .posted-on, .byline, .cat-links, .tags-links {
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════════ */
.page-template-default.page-id-contact body,
.page-template-default body.page-slug-contact,
body[class*="page-id-"] .page-slug-contact,
.page-template-default:not(.jbc-homepage) body {
  /* handled below via .contact class if WordPress adds it */
}

/* WordPress adds .page-[slug] to body */
body.page-template-default {
  background: #ffffff !important;
  color: #0d0c0a !important;
}
body.page-template-default .jbc-nav__mark,
body.page-template-default .jbc-nav__links a {
  color: #0d0c0a !important;
}
body.page-template-default .jbc-nav__burger span { background: #0d0c0a !important; }

/* Contact specifically */
.page-slug-contact body,
body.contact {
  background: #ffffff !important;
  color: #0d0c0a !important;
}

/* ── Square form inputs site-wide ── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select,
.wpcf7-text,
.wpcf7-email,
.wpcf7-textarea,
.wpcf7-select,
.nf-element,
.ninja-forms-field {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

/* ── Submit button — square, consistent with JBC style ── */
input[type="submit"],
button[type="submit"],
.wpcf7-submit,
.nf-element[type="submit"] {
  border-radius: 0 !important;
  font-family: "DM Sans","Gotham","Gotham SSm","Montserrat",-apple-system,sans-serif !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE — white bg, black text, more top padding
   ═══════════════════════════════════════════════════════════════ */
.page-slug-about body,
body.about {
  background: #ffffff !important;
  color: #0d0c0a !important;
}
.page-slug-about .jbc-nav__mark,
.page-slug-about .jbc-nav__links a,
body.about .jbc-nav__mark,
body.about .jbc-nav__links a {
  color: #0d0c0a !important;
}
.page-slug-about .jbc-nav__burger span,
body.about .jbc-nav__burger span { background: #0d0c0a !important; }

/* More top padding on About */
.page-slug-about #content,
.page-slug-about .site-content,
body.about #content,
body.about .site-content {
  /* Single tight nav clearance (was 140px — stacked with other wrappers,
     pushing the About title far too low). ~110px lands the title a touch
     below the fixed nav, matching Exhibitions' gap. */
  padding-top: 110px !important;
}
.page-slug-about #primary,
body.about #primary {
  padding-top: 0 !important;
}
.page-slug-about p,
.page-slug-about h1,
.page-slug-about h2,
.page-slug-about h3,
body.about p,
body.about h1,
body.about h2,
body.about h3 {
  color: #0d0c0a !important;
}

/* ═══════════════════════════════════════════════════════════════
   EXHIBITIONS PAGE — tighter spacing between title and subtext
   ═══════════════════════════════════════════════════════════════ */
.post-type-archive-portfolio .entry-header,
.post-type-archive-portfolio .entry-title,
.archive-portfolio .entry-header,
.archive-portfolio .entry-title {
  margin-bottom: 4px !important;
  padding-bottom: 0 !important;
}
.post-type-archive-portfolio .entry-summary,
.post-type-archive-portfolio .entry-content,
.archive-portfolio .entry-summary,
.archive-portfolio .entry-content {
  margin-top: 4px !important;
  padding-top: 0 !important;
}
.post-type-archive-portfolio article,
.archive-portfolio article {
  margin-bottom: 24px !important;
  padding-bottom: 16px !important;
}
/* Tighten the portfolio list item spacing */
.archive-portfolio .content-art-collection,
.post-type-archive-portfolio .content-art-collection {
  padding: 6px 0 !important;
  margin: 0 0 8px !important;
}
.archive-portfolio h2.entry-title,
.post-type-archive-portfolio h2.entry-title {
  margin: 0 0 2px !important;
  line-height: 1.1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE FOOTER — fix white HR and ensure correct rendering
   ═══════════════════════════════════════════════════════════════ */
.jbc-homepage #colophon,
.jbc-homepage .site-footer,
.page-template-templates-template-jbc-homepage #colophon,
.page-template-templates-template-jbc-homepage .site-footer {
  background: var(--jbc-bg, #0d0c0a) !important;
  border: none !important;
  border-top: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Kill every possible white line */
.jbc-homepage .site-footer *,
.page-template-templates-template-jbc-homepage .site-footer * {
  border-top: none !important;
  border-bottom: none !important;
}
.jbc-homepage hr,
.page-template-templates-template-jbc-homepage hr,
.jbc-homepage .site-footer::before,
.jbc-homepage .site-footer::after,
.page-template-templates-template-jbc-homepage .site-footer::before,
.page-template-templates-template-jbc-homepage .site-footer::after {
  display: none !important;
  border: none !important;
  background: none !important;
  height: 0 !important;
}
/* Footer content on homepage — minimal copyright line */
.jbc-homepage .footer-info,
.jbc-homepage .footer-widgets,
.page-template-templates-template-jbc-homepage .footer-info,
.page-template-templates-template-jbc-homepage .footer-widgets {
  background: var(--jbc-bg, #0d0c0a) !important;
  color: rgba(243,238,230,.35) !important;
  padding: 28px clamp(22px,5vw,86px) !important;
}
.jbc-homepage .footer-info *,
.page-template-templates-template-jbc-homepage .footer-info * {
  color: rgba(243,238,230,.35) !important;
  font-size: 12px !important;
  font-family: "DM Sans","Helvetica Neue",sans-serif !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   ARTWORK ARCHIVE — jbc_artwork CPT archive page
   ═══════════════════════════════════════════════════════════════ */

/* White background, black text */
.post-type-archive-jbc_artwork body {
  background: #ffffff !important;
  color: #0d0c0a !important;
}

/* Nav links black */
.post-type-archive-jbc_artwork .jbc-nav__mark,
.post-type-archive-jbc_artwork .jbc-nav__links a {
  color: #0d0c0a !important;
}
.post-type-archive-jbc_artwork .jbc-nav__burger span {
  background: #0d0c0a !important;
}

/* Hide the page-header block (title + breadcrumb) entirely */
.post-type-archive-jbc_artwork .page-header,
.post-type-archive-jbc_artwork .page-header * {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Zero top padding on content — override the global 80px rule */
.post-type-archive-jbc_artwork #content,
.post-type-archive-jbc_artwork .site-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL .page-header SUPPRESSION
   Hide the rasa theme's page-header (title + breadcrumb) on ALL
   non-homepage pages — it renders outside our templates
   ═══════════════════════════════════════════════════════════════ */

body:not(.jbc-homepage) .page-header,
body:not(.jbc-homepage) .page-header * {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL DARK-TO-LIGHT: pages using Art Collection template
   and any other page with category-collections class
   ═══════════════════════════════════════════════════════════════ */

/* Any page using the Art Collection template */
.page-template-templates-page-art body,
.page-template-page-art-php body,
/* Any page tagged with collections category */
body.category-collections {
  background: #ffffff !important;
  color: #0d0c0a !important;
}
.page-template-templates-page-art .jbc-nav__mark,
.page-template-templates-page-art .jbc-nav__links a,
.page-template-page-art-php .jbc-nav__mark,
.page-template-page-art-php .jbc-nav__links a,
body.category-collections .jbc-nav__mark,
body.category-collections .jbc-nav__links a {
  color: #0d0c0a !important;
}
.page-template-templates-page-art .jbc-nav__burger span,
.page-template-page-art-php .jbc-nav__burger span,
body.category-collections .jbc-nav__burger span {
  background: #0d0c0a !important;
}

/* ═══════════════════════════════════════════════════════════════
   ALSO: any page with jbc-dark body class that should be white
   Override the dark default for inner content pages
   ═══════════════════════════════════════════════════════════════ */

/* The parent theme adds .jbc-dark to body — override for inner pages */
body.jbc-dark:not(.jbc-homepage) {
  background: var(--jbc-bg, #0d0c0a);
}
/* But for collection/art pages specifically, force white */
body.jbc-dark.category-collections,
body.jbc-dark.page-template-page-art-php,
body.jbc-dark.page-template-templates-page-art {
  background: #ffffff !important;
  color: #0d0c0a !important;
}

/* ═══════════════════════════════════════════════════════════════
   FORCE WHITE BACKGROUND — artwork archive + art collection pages
   Target the body AND the #page wrapper which holds the dark bg
   ═══════════════════════════════════════════════════════════════ */

/* Artwork archive */
body.post-type-archive-jbc_artwork,
body.post-type-archive-jbc_artwork #page,
body.post-type-archive-jbc_artwork .site {
  background: #ffffff !important;
}

/* Art Collection template — all variants of body class WP generates */
body.page-template-page-art-php,
body.page-template-page-art-php #page,
body.page-template-page-art-php .site,
body.page-template-templates-page-art,
body.page-template-templates-page-art #page,
body.page-template-templates-page-art .site {
  background: #ffffff !important;
  color: #0d0c0a !important;
}

/* Any page with category-collections class */
body.category-collections,
body.category-collections #page,
body.category-collections .site {
  background: #ffffff !important;
  color: #0d0c0a !important;
}

/* Kill the grain overlay dark tint on these pages */
body.post-type-archive-jbc_artwork .jbc-grain,
body.page-template-page-art-php .jbc-grain,
body.page-template-templates-page-art .jbc-grain,
body.category-collections .jbc-grain {
  display: none !important;
}

/* Also kill body gradient that creates dark bg */
body.post-type-archive-jbc_artwork,
body.page-template-page-art-php,
body.page-template-templates-page-art,
body.category-collections {
  background-image: none !important;
  background: #ffffff !important;
}

/* The rasa-inline-css sets .page-header background-image — null it */
body.post-type-archive-jbc_artwork .page-header,
body.page-template-page-art-php .page-header,
body.page-template-templates-page-art .page-header,
body.category-collections .page-header {
  display: none !important;
  background: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   NEWS / BLOG — left-align all text
   ═══════════════════════════════════════════════════════════════ */

.blog .entry-content,
.single-post .entry-content,
.archive.category .entry-content,
.archive.tag .entry-content,
.blog .entry-title,
.single-post .entry-title,
.archive.category .entry-title,
.archive.tag .entry-title,
.blog .entry-meta,
.single-post .entry-meta,
.blog p, .single-post p,
.blog h1, .blog h2, .blog h3, .blog h4,
.single-post h1, .single-post h2, .single-post h3, .single-post h4,
.blog .site-content,
.single-post .site-content {
  text-align: left !important;
}

/* ── News listing meta (child template-parts/content.php) — author/pub/date
   stacked, uppercase eyebrow style, matching the single-article eyebrow. ── */
.blog .jbc-news-meta {
  display: block;
  margin: 10px 0 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--page-text-muted, rgba(13,12,10,.55));
  line-height: 1.7;
}
.blog .jbc-news-meta span { display: block; }

/* News excerpt: show at most TWO full lines, ending in the "…" the PHP added. */
.blog .jbc-news-summary p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
  max-height: calc(1.6em * 2);
}

/* ═══════════════════════════════════════════════════════════════
   SHOP / WOOCOMMERCE — left-align all text
   ═══════════════════════════════════════════════════════════════ */

.woocommerce .entry-title,
.woocommerce-page .entry-title,
.woocommerce h1, .woocommerce h2, .woocommerce h3, .woocommerce h4,
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3, .woocommerce-page h4,
.woocommerce p, .woocommerce-page p,
.woocommerce .woocommerce-loop-product__title,
.woocommerce-page .woocommerce-loop-product__title,
.woocommerce .product_title,
.woocommerce-page .product_title,
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering,
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count,
.woocommerce .woocommerce-cart-form,
.woocommerce .cart-collaterals,
.woocommerce .woocommerce-checkout,
.woocommerce .woocommerce-account,
.woocommerce-page .woocommerce-account,
.woocommerce .entry-summary,
.woocommerce-page .entry-summary,
.woocommerce-page .site-content,
.woocommerce .site-content {
  text-align: left !important;
}

/* ═══════════════════════════════════════════════════════════════
   INDIVIDUAL ARTWORK PAGES — image fits viewport, compact layout
   Targets the old Art Collection template pages (single artwork)
   ═══════════════════════════════════════════════════════════════ */

/* ── SINGLE ARTWORK PAGES (Art Collection template) ────────────────── */
/* Body classes: page-template-page-art-collection
                 page-template-templatespage-art-collection-php       */

.page-template-page-art-collection #content,
.page-template-page-art-collection .site-content,
.page-template-templatespage-art-collection-php #content,
.page-template-templatespage-art-collection-php .site-content {
  padding-top: 0 !important;
}

.page-template-page-art-collection .post-summary,
.page-template-templatespage-art-collection-php .post-summary {
  padding-top: clamp(88px, 12vw, 120px) !important;
}

/* Image capped at viewport height */
.page-template-page-art-collection .entry-content img,
.page-template-templatespage-art-collection-php .entry-content img,
.page-template-page-art-collection .alignnone,
.page-template-templatespage-art-collection-php .alignnone {
  max-height: 52vh !important;
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain !important;
}

/* Art info — compact */
.page-template-page-art-collection .art-info,
.page-template-templatespage-art-collection-php .art-info {
  margin-top: 12px !important;
}

/* Title — small */
.page-template-page-art-collection .art-info h1,
.page-template-templatespage-art-collection-php .art-info h1 {
  font-size: clamp(1.1rem, 2vw, 1.5rem) !important;
  font-weight: 700 !important;
  margin: 0 0 4px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #0d0c0a !important;
}

/* Medium info text */
.page-template-page-art-collection .art-info p,
.page-template-templatespage-art-collection-php .art-info p {
  font-size: clamp(0.75rem, 1.2vw, 0.9rem) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  color: #0d0c0a !important;
}

/* Parent series nav */
.page-template-page-art-collection .nav-menu-parent,
.page-template-templatespage-art-collection-php .nav-menu-parent {
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  display: block !important;
  margin-bottom: 10px !important;
}
.page-template-page-art-collection .nav-menu-parent a,
.page-template-templatespage-art-collection-php .nav-menu-parent a {
  color: #888 !important;
  text-decoration: none !important;
}

/* Prev/next nav */
.page-template-page-art-collection .nav-pages,
.page-template-templatespage-art-collection-php .nav-pages {
  font-size: 0.75rem !important;
  margin-bottom: 10px !important;
}
.page-template-page-art-collection .nav-pages a,
.page-template-templatespage-art-collection-php .nav-pages a {
  color: #888 !important;
  text-decoration: none !important;
}
.page-template-page-art-collection .nav-pages a:hover,
.page-template-templatespage-art-collection-php .nav-pages a:hover {
  color: #C8910A !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MUSEUM REFINEMENT — style.css overrides
   Supersedes earlier artwork page constraints with editorial sizing
   ═══════════════════════════════════════════════════════════════════ */

/* SINGLE ARTWORK — hero image: large, centered, no forced crop */
.page-template-page-art-collection .col-md-8,
.page-template-templatespage-art-collection-php .col-md-8 {
  float: none !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 900px !important;
  padding: 0 clamp(20px, 5vw, 60px) !important;
}

.page-template-page-art-collection .row,
.page-template-templatespage-art-collection-php .row {
  display: block !important;
}

/* Remove forced 52vh — now handled by 72vh in jbc-templates.css */
.page-template-page-art-collection .entry-content img,
.page-template-templatespage-art-collection-php .entry-content img,
.page-template-page-art-collection .alignnone,
.page-template-templatespage-art-collection-php .alignnone {
  max-height: 72vh !important;
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

/* Art title: editorial scale */
.page-template-page-art-collection .art-info h1,
.page-template-templatespage-art-collection-php .art-info h1 {
  font-size: clamp(24px, 3.5vw, 44px) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  margin: 0 0 10px !important;
}

/* Art metadata: lighter, more readable */
.page-template-page-art-collection .art-info p,
.page-template-templatespage-art-collection-php .art-info p {
  font-size: clamp(13px, 1.4vw, 15px) !important;
  line-height: 1.75 !important;
  color: #666 !important;
}

/* ARCHIVE — ensure grid is white background, full-width */
.post-type-archive-jbc_artwork #primary,
.post-type-archive-jbc_artwork .site-main {
  background: #ffffff !important;
  padding-top: clamp(70px, 10vw, 90px) !important;
}


/* ── CANONICAL ARTWORK PAGE — override old art-collection constraints ──
   The new page-art-collection.php uses jbc-ca-* classes exclusively.
   These rules ensure the old col-md-8 / 72vh / post-summary rules
   do not interfere when the new template is active.             ────── */

.jbc-canonical-artwork .jbc-ca-img,
.jbc-canonical-artwork .jbc-ca-image-panel img {
  max-height: calc(100vh - 64px) !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
}

/* Ensure the layout wrapper takes full width despite Bootstrap columns */
.jbc-canonical-artwork #primary,
.jbc-canonical-artwork .site-main,
.jbc-canonical-artwork .jbc-ca-layout {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

/* Kill Bootstrap row/col interference */
.jbc-canonical-artwork .row,
.jbc-canonical-artwork .col-md-8,
.jbc-canonical-artwork .col-md-offset-2 {
  display: contents !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: auto !important;
}

/* ── Canonical artwork page: clear Bootstrap container top padding ── */
.jbc-canonical-artwork,
.jbc-canonical-artwork .container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* The .jbc-canonical-artwork wrapper itself carries the 64px nav clearance */
.page-template-page-art-collection-php .jbc-canonical-artwork,
.page-template-templatespage-art-collection-php .jbc-canonical-artwork {
  padding-top: 64px !important;
  min-height: 100vh;
}

/* Title CSS in jbc-templates.css */

/* ── Artwork title: beat the global h1 !important rule on line ~570 ──
   Using h1.jbc-ca-title gives element+class specificity which wins over
   plain h1 at the same !important level (specificity tiebreak).         */
h1.jbc-ca-title {
  /* Smaller, readable scale — sidebar usable width ~200-270px */
  font-size: clamp(36px, 3vw, 56px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  /* Never break mid-word under any circumstance */
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  white-space: normal !important;
  /* Contain within sidebar */
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* ── Old VC Grid artwork series pages (page-art template) — clear fixed nav ── */
.page-template-page-art-php #content,
.page-template-templatespage-art-php #content,
.page-template-page-art-php .site-content,
/* About (page-art template) clearance: ONE tight nav clearance on the outer
   .site-content; the body has NO `about`/`page-slug-about` class so it must be
   targeted by template. Inner .entry-content stays at 0 so it doesn't stack. */
.page-template-page-art-php .site-content,
.page-template-templatespage-art-php .site-content {
  /* 70px lands the About title at the same height as Exhibitions/Contact
     (#primary 60px clearance) — was 110px, which sat the title ~40px lower. */
  padding-top: 70px !important;
}
.page-template-page-art-php .entry-content,
.page-template-templatespage-art-php .entry-content {
  padding-top: 0 !important;
}

/* ── Homepage gallery: video and GIF support ── */
.jbc-card--video,
.jbc-card--youtube,
.jbc-card--gif {
  overflow: hidden;
}

/* YouTube iframe wrapper — 16:9 aspect ratio */
.jbc-card__video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #000;
}

.jbc-card__video-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
  pointer-events: none; /* allow card click passthrough */
}

/* Self-hosted video — fill card like an image */
.jbc-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* GIF — display at natural size, no distortion */
.jbc-card--gif img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE NAV OVERLAY — legibility fix (added 2026-05-21)

   White-background inner pages (news, about, contact, shop, artwork)
   inject per-page <style> blocks that force `a { color:#0d0c0a
   !important }` and `.jbc-nav__burger span { background:#0d0c0a
   !important }` so the nav is readable on white. The mobile menu
   overlay, however, uses a DARK background — so when it opens, the dark
   burger "X" and the dark menu links land dark-on-dark and vanish.

   These rules re-assert the overlay's own light colors. Selectors are
   specific enough (and !important) to beat the per-page overrides on
   every page type, regardless of stylesheet source order.
   ════════════════════════════════════════════════════════════════════ */

/* Overlay menu links — always light against the dark overlay */
body .jbc-nav-overlay ul a {
  color: var(--jbc-paper) !important;
}
body .jbc-nav-overlay ul a:hover {
  color: var(--jbc-amber) !important;
}

/* Burger "X" — light while the overlay is open, on every page type.
   Specificity (0,3,2) beats the artwork-page rule `body
   .jbc-nav__burger span` (0,2,1) and all lighter per-page overrides. */
body .jbc-nav.jbc-nav--open .jbc-nav__burger span {
  background: var(--jbc-paper) !important;
}

/* ── Burger button — clean rendering on mobile (revised 2026-05-21) ───
   The earlier translateZ/backface-visibility layer hack caused a black
   compositing-layer artifact on iOS, so it is removed. iOS Safari also
   renders <button> with native chrome unless `appearance:none` is set,
   which produced a black box above the burger. This resets the burger
   to a fully transparent, native-chrome-free control.               */
.jbc-nav__burger {
  -webkit-appearance: none !important;
          appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Middle burger bar fully collapses when the menu opens — prevents the
   leftover dots / line fragments beside the X after the transition.   */
.jbc-nav--open .jbc-nav__burger span:nth-child(2) {
  opacity: 0 !important;
  transform: scaleX(0) !important;
}

/* Footer — remove the thin hairline above the footer, site-wide.      */
.jbc-footer,
#colophon,
.site-footer {
  border-top: 0 !important;
  box-shadow: none !important;
}
/* The parent (Rasa) theme also draws a hairline via :before pseudo-
   elements on the inner footer sections — remove those globally too.  */
.site-footer .footer-widgets::before,
.site-footer .footer-content::before,
.site-footer .footer-info::before,
.site-footer .footer-widgets:before,
.site-footer .footer-content:before,
.site-footer .footer-info:before,
#colophon .footer-widgets::before,
#colophon .footer-content::before,
#colophon .footer-info::before {
  display: none !important;
  border-top: 0 !important;
  content: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   GLOBAL CONTACT FORM 7 STYLING (added 2026-05-21)
   Consistent, large, modern form fields and a standard submit button
   for every CF7 form on the site (Contact page and beyond). Field
   dimensions match the Connect page. The Connect page keeps its own
   dark / yellow treatment via page-scoped #jbc-connect-page rules,
   which out-rank these on ID specificity.
   ════════════════════════════════════════════════════════════════════ */

/* Text fields, email, tel, textarea, select — large, square, modern.  */
.wpcf7-form input.wpcf7-text,
.wpcf7-form input.wpcf7-email,
.wpcf7-form input.wpcf7-tel,
.wpcf7-form input.wpcf7-number,
.wpcf7-form input.wpcf7-date,
.wpcf7-form input.wpcf7-url,
.wpcf7-form textarea.wpcf7-textarea,
.wpcf7-form select.wpcf7-select {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 18px 20px !important;
  font-size: 17px !important;
  font-family: inherit !important;
  line-height: 1.3 !important;
  min-height: 56px !important;
  color: #0d0c0a !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(13,12,10,.28) !important;
  border-radius: 0 !important;
  -webkit-appearance: none !important;
          appearance: none !important;
  transition: border-color .18s ease !important;
}
.wpcf7-form textarea.wpcf7-textarea {
  min-height: 150px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}
.wpcf7-form input.wpcf7-text:focus,
.wpcf7-form input.wpcf7-email:focus,
.wpcf7-form input.wpcf7-tel:focus,
.wpcf7-form textarea.wpcf7-textarea:focus,
.wpcf7-form select.wpcf7-select:focus {
  border-color: #0d0c0a !important;
  outline: 2px solid var(--jbc-amber, #C8910A) !important;
  outline-offset: 0 !important;
}
/* Select — keep a visible chevron after appearance:none.              */
.wpcf7-form select.wpcf7-select {
  padding-right: 48px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%230d0c0a' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
}

/* Consistent spacing between fields, including BOA form-builder rows.  */
.wpcf7-form .boa-form-group { margin-bottom: 18px !important; }
.wpcf7-form .boa-form-group p { margin: 0 !important; }

/* Submit button — left-aligned, auto width, standard modern size.
   Matches the Connect "Join" button proportions; black on light pages. */
.wpcf7-form input.wpcf7-submit,
.wpcf7-form button.wpcf7-submit {
  display: inline-block !important;
  width: auto !important;
  max-width: 100% !important;
  min-height: 54px !important;
  margin: 10px 0 0 0 !important;
  padding: 17px 46px !important;
  background: #0d0c0a !important;
  background-color: #0d0c0a !important;
  background-image: none !important;
  color: #f3eee6 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
          appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background-color .2s ease, color .2s ease !important;
}
.wpcf7-form input.wpcf7-submit:hover,
.wpcf7-form button.wpcf7-submit:hover {
  background: var(--jbc-amber, #C8910A) !important;
  background-color: var(--jbc-amber, #C8910A) !important;
  color: #0d0c0a !important;
}

/* ============================================================
   JBC PAGE TITLE BLOCK
   Default page-title display for non-homepage pages.
   Rendered by jbc_render_page_title() in functions.php.
   ============================================================ */
.jbc-page-title-block {
  max-width: 1320px;
  margin: 0 auto;
  /* Tight top + bottom space so the title sits close under the fixed nav and
     close to the body below (was 72px top / 40-80px bottom = too much). */
  padding: clamp(48px, 6vh, 64px) var(--jbc-gutter, clamp(22px,5vw,86px))
           clamp(20px, 2.5vh, 32px);
  color: var(--page-text, var(--jbc-bg));
}
.jbc-page-title-block__eyebrow {
  display: inline-block;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--page-text-muted, rgba(13,12,10,.55));
}
.jbc-page-title-block__title {
  font-size: clamp(40px, 6.5vw, 96px) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  margin: 0 !important;
  color: #0d0c0a !important; /* all default-template page titles black (desktop + mobile) */
  max-width: 22ch;
}
.jbc-page-title-block__rule {
  display: block;
  width: clamp(48px, 6vw, 88px);
  height: 1px;
  margin-top: clamp(16px, 2vw, 26px);
  background: var(--page-accent, var(--jbc-amber));
  opacity: 0.85;
}
@media (max-width: 860px) {
  /* Tight gap under the fixed nav on mobile (was clamp(88px,12vh,110px) ≈98px
     above the title — too much). */
  .jbc-page-title-block { padding-top: clamp(48px, 9vh, 72px); }
  .jbc-page-title-block__title { max-width: 100%; }
  /* On the page-art template (e.g. About) the title block is nested inside
     parent `.container` which already supplies the gutter, so the block's own
     left/right padding double-indents the title ~22px past the body text.
     Zero it here so About's title lines up with its content like Exhibitions. */
  .page-template-page-art .jbc-page-title-block,
  .page-template-templatespage-art-php .jbc-page-title-block {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Desktop: drop the title block's horizontal gutter (~5vw / 72px) so the page
   title (About / Exhibitions / Contact) lines up flush with the body content
   below it instead of sitting indented to the right. Keep the vertical padding. */
@media (min-width: 861px) {
  .jbc-page-title-block {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================================
   ARTWORK STATUS LINE
   Used on single artwork pages (canonical + CPT single).
   ============================================================ */
.jbc-ca-status,
.jbc-artwork-meta__status {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.jbc-ca-status__dot,
.jbc-artwork-meta__status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-1px);
  flex-shrink: 0;
}
/* State variants — colour only, no extra weight */
.jbc-ca-status--available,
.jbc-artwork-meta__status--available { color: var(--jbc-amber, #C8910A); }

.jbc-ca-status--sold,
.jbc-ca-status--private_collection,
.jbc-ca-status--on_loan,
.jbc-ca-status--commissioned,
.jbc-artwork-meta__status--sold,
.jbc-artwork-meta__status--private_collection,
.jbc-artwork-meta__status--on_loan,
.jbc-artwork-meta__status--commissioned {
  color: var(--page-text-muted, rgba(13,12,10,.55));
}
.jbc-ca-status--sold .jbc-ca-status__dot,
.jbc-ca-status--private_collection .jbc-ca-status__dot,
.jbc-ca-status--on_loan .jbc-ca-status__dot,
.jbc-ca-status--commissioned .jbc-ca-status__dot,
.jbc-artwork-meta__status--sold .jbc-artwork-meta__status-dot,
.jbc-artwork-meta__status--private_collection .jbc-artwork-meta__status-dot,
.jbc-artwork-meta__status--on_loan .jbc-artwork-meta__status-dot,
.jbc-artwork-meta__status--commissioned .jbc-artwork-meta__status-dot {
  display: none;
}