/* ============================================================
   GEM — WordPress adapter layer
   The original site design ships verbatim in website.css.
   This file only maps WordPress-generated block markup (nav
   items, buttons, site logo, admin bar) onto those exact
   selectors, so the block editor output renders identically.
   ============================================================ */

/* ---------- Admin bar: keep fixed nav below it when logged in ---------- */
body.admin-bar .gem-nav { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .gem-nav { top: 46px; }
}

/* ---------- Nav: WP Navigation block items styled as .gem-nav-link ---------- */
.gem-nav-links .wp-block-navigation { font-family: "DM Mono", monospace; }
.gem-nav-links .wp-block-navigation .wp-block-navigation__container {
  display: flex; gap: 40px; align-items: center;
}
.gem-nav-links .wp-block-navigation-item__content {
  color: var(--warm-gray);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color 0.3s var(--ease);
  position: relative;
  text-decoration: none;
}
.gem-nav-links .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 1px;
  background: var(--antique-gold);
  transition: width 0.3s var(--ease);
}
.gem-nav-links .wp-block-navigation-item__content:hover { color: var(--antique-gold); }
.gem-nav-links .wp-block-navigation-item__content:hover::after { width: 100%; }
/* Mobile overlay open/close buttons pick up brand color */
.gem-nav-links .wp-block-navigation__responsive-container-open,
.gem-nav-links .wp-block-navigation__responsive-container-close { color: var(--warm-white); }

/* ---------- Site logo block inside nav / footer ---------- */
.gem-nav-logo .wp-block-site-logo,
.gem-footer-brand .wp-block-site-logo { margin: 0; }
.gem-nav-logo .wp-block-site-logo img { width: 210px; height: auto; display: block; }
.gem-footer-brand .wp-block-site-logo img { width: 220px; height: auto; display: block; }
/* If no custom logo is set yet, hide WP's "Add site logo" placeholder chrome on the front end */
.gem-nav-logo .wp-block-site-logo a { display: block; }

/* ---------- Buttons: core button markup → .btn-primary / .btn-secondary ---------- */
.wp-block-button.btn-primary .wp-block-button__link {
  display: inline-block;
  font-family: "DM Mono", monospace;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  padding: 16px 36px;
  background: var(--antique-gold); color: var(--onyx);
  font-weight: 500; border: none; border-radius: 0;
  transition: all 0.3s var(--ease); cursor: pointer;
}
.wp-block-button.btn-primary .wp-block-button__link:hover {
  background: var(--antique-gold-hover);
  transform: translateY(-2px);
}
.wp-block-button.btn-secondary .wp-block-button__link {
  display: inline-block;
  font-family: "DM Mono", monospace;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  padding: 16px 36px;
  background: transparent; color: var(--warm-white);
  border: 1px solid rgba(var(--ink), 0.12); border-radius: 0;
  transition: all 0.3s var(--ease); cursor: pointer;
}
.wp-block-button.btn-secondary .wp-block-button__link:hover {
  border-color: var(--antique-gold);
  color: var(--antique-gold);
}
/* ---------- blockGap is globally 0 so WP never disturbs the precision
   components; these rules restore explicit spacing where it's wanted ---------- */
.gem-nav-links { display: flex; gap: 40px; align-items: center; }
.hero-ctas.wp-block-buttons,
.gem-cta-actions.wp-block-buttons { gap: 20px; }
.wp-block-post-template.is-layout-grid { gap: 24px; }
.wp-block-columns.is-layout-flex { gap: 32px; }
/* NOTE: generic flow-rhythm rules were removed here — they injected
   phantom margins into the exact design components (e.g. staggered tag
   chips). Editorial rhythm lives only under .gem-page-content, which the
   exact "Full Canvas" pages never use. */

/* ---------- Blocks inside the design keep original tag-agnostic look ---------- */
/* Paragraph/heading blocks reset — website.css already zeroes * margin, this
   guards against editor-injected block gaps inside precision components */
.shifts-slide-text > *,
.perf-fund > *,
.gem-footer-col > * { margin-top: 0; margin-bottom: 0; }

/* Group blocks used as flex rows should not get WP's default block gap */
.gem-nav.wp-block-group,
.shifts-slide-tags.wp-block-group,
.gem-footer-cols.wp-block-group { gap: 0; }
.shifts-slide-tags.wp-block-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* Per-slide caption source (copied into .shifts-visual-caption by JS) */
.shifts-slide-text .shifts-slide-caption { display: none; }

/* ============================================================
   Inner pages — the same editorial language as the homepage,
   built from the brand's own primitives (gold line, mono labels,
   Playfair display headings, hairline dividers).
   ============================================================ */

/* Page shell: clear the fixed nav, editorial vertical rhythm */
.gem-page-main { padding: 190px 0 140px; }
@media (max-width: 900px) { .gem-page-main { padding: 150px 0 100px; } }

/* The gold line opens every page, then the label, then the title */
.gem-page-main .gold-line { margin-bottom: 40px; }
.gem-page-main .section-label { margin-bottom: 28px; }

/* Page / post title — Playfair display scale, exactly like the site's H2s */
.gem-page-title,
h1.gem-page-title,
.wp-block-post-title.gem-page-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--warm-white);
  margin-bottom: 40px;
}
.gem-page-title em { color: var(--antique-gold); font-style: italic; }

/* Post meta (date, terms) — mono uppercase */
.gem-post-meta,
.wp-block-post-date.gem-post-meta,
.wp-block-post-terms.gem-post-meta {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--warm-gray);
  text-transform: uppercase;
  margin-bottom: 40px;
}
.gem-post-meta a { color: var(--warm-gray); }
.gem-post-meta a:hover { color: var(--antique-gold); }

.gem-post-hero-image { margin: 0 0 56px; }
.gem-post-hero-image img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); }

/* Content flow: design-system.css already types bare h2/h3/p exactly to
   brand; this only supplies rhythm and the few structural extras */
.gem-page-content > * + * { margin-block-start: 28px; }
.gem-page-content h2, .gem-page-content h3 { margin-block-start: 56px; }
.gem-page-content ul, .gem-page-content ol {
  color: var(--warm-gray);
  font-size: 15px;
  line-height: 1.9;
  font-weight: 300;
  padding-left: 22px;
}
.gem-page-content li + li { margin-top: 10px; }
.gem-page-content li::marker { color: var(--antique-gold); }
.gem-page-content blockquote {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.6;
  color: var(--warm-white);
  border-left: 2px solid var(--antique-gold);
  padding-left: 28px;
}
.gem-page-content hr,
.gem-page-content .wp-block-separator {
  border: none;
  border-top: 1px solid var(--hairline);
  margin-block: 56px;
  width: 100%;
}
.gem-page-content a { color: var(--antique-gold); }
.gem-page-content a:hover { color: var(--antique-gold-hover); }
.gem-page-content img { max-width: 100%; height: auto; }

/* Full-bleed brand sections dropped INTO page content (performance,
   shifts, CTA patterns) escape the narrow container to span the viewport */
.gem-page-content > .shifts,
.gem-page-content > .perf,
.gem-page-content > .gem-cta-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Lead sub-line under 404 / simple heroes */
.gem-lead-sub {
  font-size: 17px;
  color: rgba(var(--ink), 0.55);
  line-height: 1.8;
  font-weight: 300;
  max-width: 540px;
}
.gem-404 { text-align: center; padding: 60px 5% 0; }
.gem-404 .gem-lead-sub { margin: 0 auto 48px; }

/* ---------- Insight cards / blog grids ---------- */
.gem-insights-query { margin-top: 24px; }
.gem-insight-card {
  background: var(--charcoal);
  border: 1px solid var(--hairline);
  padding: 32px;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.gem-insight-card:hover {
  transform: translateY(-4px);
  border-color: rgba(190, 168, 125, 0.2);
}
.gem-insight-card .wp-block-post-featured-image { margin-bottom: 24px; }
.gem-insight-card .wp-block-post-featured-image img { display: block; width: 100%; height: auto; }
.gem-card-meta,
.wp-block-post-date.gem-card-meta {
  font-family: "DM Mono", monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--warm-gray);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.gem-card-title,
.wp-block-post-title.gem-card-title {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.3px;
  margin-bottom: 14px;
}
.gem-card-title a { color: var(--warm-white); transition: color 0.3s var(--ease); }
.gem-card-title a:hover { color: var(--antique-gold); }
.gem-card-excerpt,
.wp-block-post-excerpt.gem-card-excerpt {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--warm-gray);
}
.gem-card-excerpt .wp-block-post-excerpt__more-link { color: var(--antique-gold); }

/* Search results as hairline-divided rows */
.gem-search { max-width: 480px; margin-bottom: 64px; }
.gem-search .wp-block-search__input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(var(--ink), 0.12);
  color: var(--warm-white);
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  padding: 12px 0;
  border-radius: 0;
}
.gem-search .wp-block-search__button {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--antique-gold);
  color: var(--onyx);
  border: none;
  border-radius: 0;
  padding: 12px 24px;
  cursor: pointer;
}
.gem-search-result {
  padding: 32px 0;
  border-bottom: 1px solid var(--hairline);
}

/* Pagination — mono, gold on hover */
.gem-pagination { margin-top: 72px; gap: 24px; }
.gem-pagination a, .gem-pagination .page-numbers {
  font-family: "DM Mono", monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--warm-gray);
}
.gem-pagination a:hover { color: var(--antique-gold); }
.gem-pagination .current { color: var(--antique-gold); }

/* Contact form fields inherit brand treatment (shortcode markup) */
.gem-contact-form .gem-data-label { display: inline-block; margin-bottom: 4px; }
.gem-contact-form p + p { margin-top: 24px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .animate, .d1, .d2, .d3, .d4, .d5 { animation: none !important; opacity: 1 !important; transform: none !important; }
  .shifts-slide-visual, .shifts-slide-text { transition: none !important; }
}

/* ---------- Exact snapshot pages: static-DOM state toggling ----------
   The source app added/removed panels from the DOM; the theme keeps all
   panels in markup and toggles state, so content stays editable. */
.eq-idx-row:not(.is-open) .eq-idx-panel { display: none; }
.eq-proc-detail[hidden] { display: none; }
.eq-proc-detail.is-hidden { display: none; }
/* Nav CTA as a native button block */
.gem-nav .wp-block-button .wp-block-button__link.gem-nav-cta-link {
  font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; padding: 12px 26px;
  background: var(--antique-gold); color: var(--onyx);
  border: none; border-radius: 0; font-weight: 500;
  transition: all 0.3s var(--ease);
}
.gem-nav .wp-block-button .wp-block-button__link.gem-nav-cta-link:hover {
  background: var(--antique-gold-hover); transform: translateY(-1px);
}
.gem-footer-col .gem-footer-link { margin: 0 0 12px; }
.gem-footer-col .gem-footer-link a { display: inline-block; }

/* Native-block equivalents for the last converted atoms */
.gem-mark-icon { margin: 0; }
.gem-mark-icon img { width: 20px; height: 20px; opacity: 1; display: block; }
.eq-idx-bar, .eq-proc-node { cursor: pointer; }
.gold-line.gem-line-center, .gem-gold-line.gem-line-center { margin-left: auto; margin-right: auto; }

/* ============================================================
   Navigation — exact desktop styling + branded mobile overlay
   ============================================================ */
/* Desktop: enforce the design's 40px link rhythm over WP's flex-gap */
.gem-nav-links .wp-block-navigation,
.gem-nav-links .wp-block-navigation .wp-block-navigation__container {
  gap: 40px;
}

/* Hamburger / close buttons: visible, brand-colored, mobile only */
.gem-nav .wp-block-navigation__responsive-container-open,
.gem-nav .wp-block-navigation__responsive-container-close {
  color: var(--warm-white);
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}
.gem-nav .wp-block-navigation__responsive-container-open svg rect,
.gem-nav .wp-block-navigation__responsive-container-close svg path {
  fill: currentColor;
}
.gem-nav .wp-block-navigation__responsive-container-open:hover,
.gem-nav .wp-block-navigation__responsive-container-close:hover {
  color: var(--antique-gold);
}

}