/*
Theme Name: Metal Calcs 2025
Theme URI: https://metalcalcs.com/
Description: Dark, gold-accented Twenty Twenty-Five child theme for Metal Calcs. Italic uppercase Inter typography, 1200px content width, full-width hero, gold accent system. Includes one-click homepage builder that creates a Home page from existing brand content while leaving all other posts and pages untouched.
Author: BuyerGain
Author URI: https://buyergain.com
Template: twentytwentyfive
Version: 1.3.1
Tags: dark, gold, finance, full-site-editing, block-theme
Text Domain: metalcalcs-2025
*/

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  --mc-bg:           #0a0a0a;
  --mc-bg-alt:       #111113;
  --mc-bg-card:      #161618;
  --mc-bg-card-2:    #1a1a1c;
  --mc-border:       #2D3748;
  --mc-border-soft:  rgba(255,255,255,0.06);

  --mc-gold:         #be8f14;
  --mc-gold-dark:    #b28104;
  --mc-gold-light:   #d4a418;
  --mc-gold-rgb:     190,143,20;
  --mc-gold-gradient: linear-gradient(135deg, #be8f14 0%, #b28104 100%);

  --mc-text:         #ffffff;
  --mc-text-muted:   #9da4b0;
  --mc-text-dim:     #9ca3af;
  --mc-text-faint:   #a3a3a3;

  --mc-font-body:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mc-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --mc-container:    1200px;
  --mc-radius:       12px;
  --mc-radius-lg:    15px;
  --mc-radius-pill:  300px;

  --mc-transition:   0.3s cubic-bezier(.2,.7,.2,1);
  --mc-shadow:       0 10px 30px rgba(0,0,0,0.45);
  --mc-shadow-gold:  0 8px 28px rgba(190,143,20,0.28);
}

/* ============================================================
   2. BASE / GLOBAL
   ============================================================ */
html, body {
  background: var(--mc-bg) !important;
  color: var(--mc-text);
  font-family: var(--mc-font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wp-site-blocks { background: var(--mc-bg); }

/* Kill phantom horizontal scroll: the off-canvas mobile nav (translateX(100%))
   and GutenKit alignfull blocks push the document past the viewport. `clip`
   (not `hidden`) leaves the sticky header intact. */
html, body { overflow-x: clip; }

/* ---- Reading rhythm package (posts AND pages) ----------------------
   Three problems fixed together here:
   a) Pages ran body copy the full 1200px column (155 real chars/line).
   b) Posts were capped at 30rem, a 510px text column sitting inside a
      1200px figure, so the two never lined up.
   c) theme.json blockGap:0 emits an unlayered `.is-layout-flow > *
      {margin-block:0}`, so consecutive paragraphs had a measured 0px gap.
      These rules are UNLAYERED + !important so they beat it.
   Prose caps at 36rem (~75 chars at 18px Inter) and is CENTERED, sharing one
   center axis with the full-width figures, tables and calculator widget.
   v1.2.1 left-aligned this column instead (one left edge); live it read as
   everything shoved left, 120px left margin vs 708px right, because the wide
   elements are symmetric. In-content page H1s are centered below for the
   same reason, matching the post-title treatment. */
:is(.entry-content, .wp-block-post-content) > :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6),
:is(.entry-content, .wp-block-post-content) > article > :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6) {
  max-width: 36rem;
  margin-inline: auto !important;
}

:is(.entry-content, .wp-block-post-content) > :is(p, ul, ol),
:is(.entry-content, .wp-block-post-content) > article > :is(p, ul, ol) {
  margin-block: 0 1.5em !important;
}

:is(.entry-content, .wp-block-post-content) > blockquote,
:is(.entry-content, .wp-block-post-content) > article > blockquote {
  margin-block: 2.25rem !important;
}

:is(.entry-content, .wp-block-post-content) > :is(h2, h3, h4, h5, h6),
:is(.entry-content, .wp-block-post-content) > article > :is(h2, h3, h4, h5, h6) {
  margin-block: 2.75rem 0.75em !important;
}

:is(.entry-content, .wp-block-post-content) > :is(h2, h3, h4):first-child,
:is(.entry-content, .wp-block-post-content) > article > :is(h2, h3, h4):first-child {
  margin-block-start: 0 !important;
}

/* Page H1: centered like the post titles, so pages and posts share the same
   axis. Gap to the lede measured 34px before, tight for a title.
   !important because About's H1 carries an editor-set has-text-align-left
   class that otherwise wins. */
:is(.entry-content, .wp-block-post-content) > h1,
:is(.entry-content, .wp-block-post-content) > article > h1 {
  margin-block: 0 3rem !important;
  text-align: center !important;
}

/* Content images are natural-width (800px) inside full-width figures; the
   default inline flow pins them to the figure's left edge, which reads as
   left-leaning on the centered axis. Center them within their figures. */
:is(.entry-content, .wp-block-post-content) figure img {
  display: block;
  margin-inline: auto;
}

/* Images and figures were flush against the next paragraph (measured 0px). */
:is(.entry-content, .wp-block-post-content) :is(figure, .wp-block-image),
:is(.entry-content, .wp-block-post-content) > img {
  margin-block: 3rem !important;
}
:is(.entry-content, .wp-block-post-content) figcaption {
  margin-block-start: 0.9rem !important;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.62);
}

/* The calculator widget and data tables keep the wide column. */
:is(.entry-content, .wp-block-post-content) > :is(.calc-wrapper, .wp-block-table) {
  max-width: 100%;
  margin-block: 3rem !important;
}

@media (max-width: 600px) {
  :is(.entry-content, .wp-block-post-content) :is(figure, .wp-block-image),
  :is(.entry-content, .wp-block-post-content) > img {
    margin-block: 2rem !important;
  }
  :is(.entry-content, .wp-block-post-content) > :is(h2, h3, h4, h5, h6),
  :is(.entry-content, .wp-block-post-content) > article > :is(h2, h3, h4, h5, h6) {
    margin-block: 2rem 0.7em !important;
  }
}

/* Breathing room under the sticky header on interior routes (index/archive/404
   set their own inline top padding and are unaffected). */
.mc-main-inner { padding-top: 48px; }

/* Main wrapper - full width so 100vw sections actually break out */
.mc-main {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

::selection { background: rgba(190,143,20,0.35); color: #fff; }

img { max-width: 100%; height: auto; }

/* Container helper */
.mc-container {
  max-width: var(--mc-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 4vw, 32px);
  padding-right: clamp(20px, 4vw, 32px);
}

/* WordPress alignfull */
.alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ============================================================
   3. TYPOGRAPHY - italic uppercase distinctive headings
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--mc-font-heading);
  color: var(--mc-text);
  font-style: italic;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.15;
  margin: 0 0 0.6em;
}

h1 {
  font-size: clamp(29px, 4.8vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

h2 {
  font-size: clamp(22px, 3.2vw, 37px);
  font-weight: 300;
  line-height: 1.1;
}

h3 {
  font-size: clamp(16px, 1.76vw, 21px);
  font-weight: 300;
  line-height: 1.25;
}

h4 { font-size: 20px; font-weight: 400; }
h5 { font-size: 18px; font-weight: 400; }
h6 {
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--mc-text-muted);
  text-transform: uppercase;
}

p {
  color: var(--mc-text-muted);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 1.1em;
}
p.has-large-font-size { font-size: 18px; color: var(--mc-text-dim); }
strong, b { color: #fff; font-weight: 600; }

a {
  color: var(--mc-gold);
  text-decoration: none;
  transition: color var(--mc-transition);
}
a:hover { color: var(--mc-gold-light); }

/* ============================================================
   4. HEADER + NAV
   ============================================================ */
.site-header,
header.wp-block-template-part.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mc-border-soft);
  transition: background var(--mc-transition), border-color var(--mc-transition);
  width: 100%;
}

.site-header.scrolled {
  background: rgba(10,10,10,0.98);
  border-bottom-color: var(--mc-border);
}

.mc-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: var(--mc-container);
  margin: 0 auto;
  padding: 18px clamp(20px, 4vw, 32px);
}

.mc-logo {
  font-family: var(--mc-font-heading);
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 22px;
  letter-spacing: 0.03em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.mc-logo:hover { color: var(--mc-gold); text-decoration: none; }
.mc-logo span { color: var(--mc-gold); }

/* Hamburger toggle (mobile only) */
.mc-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--mc-border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  flex-direction: column;
  gap: 4px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  transition: border-color var(--mc-transition);
}
.mc-nav-toggle:hover { border-color: var(--mc-gold); }
.mc-nav-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.mc-nav-toggle[aria-expanded="true"] .mc-nav-toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.mc-nav-toggle[aria-expanded="true"] .mc-nav-toggle-bar:nth-child(2) { opacity: 0; }
.mc-nav-toggle[aria-expanded="true"] .mc-nav-toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Nav list - desktop */
.mc-nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.mc-nav-item {
  position: relative;
}

.mc-nav-item > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  font-family: var(--mc-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  border-radius: 6px;
  transition: color var(--mc-transition), background var(--mc-transition);
}
.mc-nav-item > a:hover {
  color: var(--mc-gold);
  background: rgba(190,143,20,0.06);
  text-decoration: none;
}
.mc-caret {
  font-size: 10px;
  opacity: 0.7;
  transition: transform var(--mc-transition);
}
.mc-nav-item.has-submenu:hover > a .mc-caret {
  transform: rotate(180deg);
}

/* Submenu - desktop */
.mc-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 280px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: var(--mc-bg-card);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  box-shadow: var(--mc-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 200;
}
.mc-nav-item.has-submenu:hover > .mc-submenu,
.mc-nav-item.has-submenu:focus-within > .mc-submenu,
.mc-nav-item.has-submenu.is-open > .mc-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mc-submenu li { margin: 0; }
.mc-submenu a {
  display: block;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  border-radius: 6px;
  transition: background var(--mc-transition), color var(--mc-transition);
}
.mc-submenu a:hover {
  background: rgba(190,143,20,0.1);
  color: var(--mc-gold);
}

/* Mobile nav */
@media (max-width: 900px) {
  .mc-nav-toggle { display: flex; }
  .mc-nav {
    position: fixed;
    inset: 0;
    background: var(--mc-bg);
    padding: 100px 24px 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(.2,.7,.2,1);
    z-index: 99;
  }
  .mc-nav.is-open { transform: translateX(0); }
  .mc-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .mc-nav-item { width: 100%; }
  .mc-nav-item > a {
    padding: 16px 20px;
    font-size: 14px;
    border-bottom: 1px solid var(--mc-border-soft);
    border-radius: 0;
    justify-content: space-between;
  }
  /* Always expanded on mobile: the CSS-only menu has no JS to toggle submenus. */
  .mc-submenu {
    position: static;
    background: rgba(255,255,255,0.02);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 4px 0 12px 16px;
    max-height: none;
    overflow: visible;
  }
  .mc-submenu a {
    padding: 12px 16px;
    font-size: 13px;
  }
}

/* ============================================================
   5. HERO - full-bleed dark with gold gradient + bullion image
   ============================================================ */
.mc-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: var(--mc-bg);
  overflow: hidden;
  padding: clamp(80px, 14vw, 180px) 0 clamp(70px, 12vw, 140px);
  isolation: isolate;
}

.mc-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 75% 40%, rgba(190,143,20,0.22) 0%, rgba(190,143,20,0) 60%),
    radial-gradient(ellipse 60% 50% at 15% 80%, rgba(178,129,4,0.15) 0%, rgba(178,129,4,0) 70%),
    linear-gradient(180deg, #0a0a0a 0%, #111113 100%);
  z-index: -2;
}

.mc-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(190,143,20,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190,143,20,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  z-index: -1;
  opacity: 0.6;
}

.mc-hero-inner {
  max-width: var(--mc-container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
  position: relative;
  text-align: center;
}

.mc-hero-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-gold);
  margin-bottom: 24px;
  padding: 8px 20px;
  border: 1px solid rgba(190,143,20,0.35);
  border-radius: 100px;
  background: rgba(190,143,20,0.05);
}

.mc-hero h1 {
  font-size: clamp(29px, 5.6vw, 62px);
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.015em;
  max-width: 1000px;
  margin: 0 auto 28px;
  text-align: center;
}

.mc-hero h1 .mc-gold-text {
  background: var(--mc-gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.mc-hero p.mc-hero-sub {
  font-size: clamp(16px, 1.6vw, 20px);
  color: rgba(255,255,255,0.72);
  max-width: 680px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.mc-hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   6. BUTTONS
   ============================================================ */
.mc-btn,
.wp-block-button.is-style-mc-primary .wp-block-button__link,
.wp-block-button .wp-block-button__link.has-gold-background-color {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 36px;
  font-family: var(--mc-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--mc-gold-gradient);
  color: #000 !important;
  border: 1px solid var(--mc-gold);
  border-radius: var(--mc-radius-pill);
  cursor: pointer;
  transition: transform var(--mc-transition), box-shadow var(--mc-transition), border-color var(--mc-transition);
}

.mc-btn:hover,
.wp-block-button.is-style-mc-primary .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.has-gold-background-color:hover {
  transform: translateY(-2px);
  box-shadow: var(--mc-shadow-gold);
  color: #000 !important;
  text-decoration: none;
}

.mc-btn-ghost {
  background: transparent;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.25);
}
.mc-btn-ghost:hover {
  background: var(--mc-bg-card);
  border-color: var(--mc-gold);
  color: var(--mc-gold) !important;
}

.mc-btn::after,
.mc-btn-ghost::after { content: '→'; font-style: normal; transition: transform var(--mc-transition); }
.mc-btn:hover::after,
.mc-btn-ghost:hover::after { transform: translateX(4px); }

/* ============================================================
   7. SECTIONS
   ============================================================ */
.mc-section {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(60px, 10vw, 110px) 0;
  background: var(--mc-bg);
}
.mc-section.is-alt { background: var(--mc-bg-alt); }
.mc-section.is-darker { background: #050505; }

.mc-section-inner {
  max-width: var(--mc-container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
}

.mc-section-header {
  text-align: center;
  margin: 0 auto clamp(40px, 6vw, 70px);
  max-width: 760px;
}

.mc-section-header > * {
  margin-left: auto;
  margin-right: auto;
}

.mc-section-header .mc-eyebrow,
.mc-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mc-gold);
  margin-bottom: 16px;
  font-style: normal;
}

.mc-section-header h2 {
  font-size: clamp(22px, 4vw, 45px);
  margin: 0 0 18px;
}

.mc-section-header p {
  max-width: 640px;
  margin: 0 auto;
  font-size: 17px;
  color: rgba(255,255,255,0.62);
}

/* ============================================================
   8. CARDS GRID - "Why the market is broken"
   ============================================================ */
.mc-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mc-card {
  background: var(--mc-bg-card);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-lg);
  padding: 44px 36px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform var(--mc-transition), border-color var(--mc-transition), box-shadow var(--mc-transition);
}

.mc-card:hover {
  transform: translateY(-4px);
  border-color: var(--mc-gold);
  box-shadow: var(--mc-shadow);
}

.mc-card-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: var(--mc-gold);
  background: rgba(190,143,20,0.08);
  border-radius: 14px;
  border: 1px solid rgba(190,143,20,0.2);
}
.mc-card-icon svg { width: 28px; height: 28px; fill: currentColor; }

.mc-card h3 {
  font-size: 22px;
  margin: 0 0 14px;
  font-weight: 300;
}

.mc-card p {
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  color: var(--mc-text-dim);
  max-width: 32ch;
}

/* ============================================================
   9. SPLIT SECTION - "Your assets are yours"
   ============================================================ */
.mc-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.mc-split-image {
  position: relative;
  border-radius: var(--mc-radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1c 0%, #0a0a0a 100%);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--mc-border);
}
.mc-split-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(190,143,20,0.4), transparent 60%),
    linear-gradient(135deg, rgba(190,143,20,0.15), transparent);
}
.mc-split-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 30px);
}
.mc-split-image img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: 0.95;
}

.mc-split-content h2 {
  font-size: clamp(22px, 3.2vw, 37px);
  margin-bottom: 28px;
}

.mc-feature-list {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
}
.mc-feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--mc-border-soft);
  color: var(--mc-text-dim);
  font-size: 15px;
  line-height: 1.6;
}
.mc-feature-list li::before {
  content: '✓';
  color: var(--mc-gold);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.mc-feature-list li strong {
  color: #fff;
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
}

/* ============================================================
   10. TESTIMONIAL
   ============================================================ */
.mc-testimonial {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  background: var(--mc-bg-card-2);
  border: 1px solid var(--mc-border);
  border-radius: 70px;
  padding: clamp(50px, 8vw, 80px) clamp(30px, 5vw, 70px);
  position: relative;
}

.mc-testimonial::before {
  content: '"';
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-size: 80px;
  color: var(--mc-gold);
  line-height: 1;
  opacity: 0.6;
  font-style: italic;
}

.mc-testimonial blockquote,
.mc-testimonial h3 {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 300;
  font-style: italic;
  text-transform: uppercase;
  color: #fff;
  margin: 30px 0 24px;
  line-height: 1.3;
  border: 0;
  padding: 0;
}

.mc-testimonial cite,
.mc-testimonial p.mc-author {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-gold);
  font-style: normal;
  margin: 0;
}

/* ============================================================
   11. POSTS GRID - "Related Posts"
   ============================================================ */
.mc-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mc-post-card {
  background: var(--mc-bg-card);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-lg);
  overflow: hidden;
  transition: transform var(--mc-transition), border-color var(--mc-transition);
  display: flex;
  flex-direction: column;
}
.mc-post-card:hover {
  transform: translateY(-4px);
  border-color: var(--mc-gold);
}

.mc-post-thumb {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #1a1a1c, #0a0a0a);
  position: relative;
  overflow: hidden;
}
.mc-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, opacity var(--mc-transition);
}
.mc-post-card:hover .mc-post-thumb img {
  transform: scale(1.05);
  opacity: 0.85;
}
.mc-post-thumb-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mc-gold);
  opacity: 0.4;
  font-size: 60px;
}

.mc-post-body {
  padding: 30px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mc-post-meta,
.mc-post-body .wp-block-post-date,
.mc-post-body .wp-block-post-date time {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mc-text-faint) !important;
  margin-bottom: 14px;
  display: block;
  text-decoration: none;
}

/* Title - fixed 3-line box so dates and excerpts line up across cards */
.mc-post-card h3,
.mc-post-card h2,
.mc-post-card .wp-block-post-title {
  font-size: 20px;
  font-weight: 300;
  font-style: italic;
  text-transform: uppercase;
  margin: 0 0 14px;
  line-height: 1.3;
  min-height: calc(20px * 1.3 * 3); /* 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mc-post-card h3 a,
.mc-post-card h2 a,
.mc-post-card .wp-block-post-title a {
  color: #fff !important;
  text-decoration: none;
}
.mc-post-card h3 a:visited,
.mc-post-card h2 a:visited,
.mc-post-card .wp-block-post-title a:visited {
  color: #fff !important;
}
.mc-post-card h3 a:hover,
.mc-post-card h2 a:hover,
.mc-post-card .wp-block-post-title a:hover {
  color: var(--mc-gold) !important;
}

/* Excerpt - fixed 3-line box */
.mc-post-card p,
.mc-post-card .wp-block-post-excerpt,
.mc-post-card .wp-block-post-excerpt p,
.mc-post-card .wp-block-post-excerpt__excerpt {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mc-text-dim);
  margin: 0 0 20px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(14px * 1.65 * 3); /* 3 lines */
}

.mc-post-link {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mc-gold);
  text-decoration: none;
  margin-top: auto;
}
.mc-post-link::after { content: ' →'; transition: transform var(--mc-transition); display: inline-block; }
.mc-post-link:hover::after { transform: translateX(4px); }

/* ============================================================
   12. FAQ ACCORDION
   ============================================================ */
.mc-faq {
  max-width: 820px;
  margin: 0 auto;
}

.mc-faq details {
  background: var(--mc-bg-card);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color var(--mc-transition);
}
.mc-faq details[open] { border-color: var(--mc-gold); }

.mc-faq summary {
  cursor: pointer;
  padding: 22px 28px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color var(--mc-transition);
}
.mc-faq summary::-webkit-details-marker { display: none; }
.mc-faq summary:hover { color: var(--mc-gold); }

.mc-faq summary::after {
  content: '+';
  font-size: 28px;
  font-weight: 300;
  color: var(--mc-gold);
  line-height: 1;
  transition: transform var(--mc-transition);
}
.mc-faq details[open] summary::after { transform: rotate(45deg); }

.mc-faq-body {
  padding: 10px 28px 26px;
  color: var(--mc-text-dim);
  font-size: 15px;
  line-height: 1.7;
  border-top: 1px solid var(--mc-border-soft);
  margin-top: 4px;
}
.mc-faq-body p { color: var(--mc-text-dim); margin: 0; padding-top: 8px; }

/* ============================================================
   13. FOOTER
   ============================================================ */
footer.wp-block-template-part,
.mc-footer {
  background: #050505;
  border-top: 1px solid var(--mc-border-soft);
  padding: 80px 0 30px;
  margin-top: 60px;
  width: 100%;
}

.mc-footer-inner {
  max-width: var(--mc-container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
}

.mc-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 60px;
}

.mc-footer-brand h3 {
  font-size: 20px;
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: 0.04em;
}

.mc-footer-brand p {
  font-size: 14px;
  color: var(--mc-text-faint);
  line-height: 1.65;
  max-width: 360px;
}
.mc-footer-brand a { color: var(--mc-gold); }

.mc-footer-col h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55) !important;
  font-style: normal;
  margin: 0 0 20px;
}

.mc-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mc-footer-col li { margin-bottom: 12px; }
.mc-footer-col a {
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  text-decoration: none;
  transition: color var(--mc-transition);
}
.mc-footer-col a:hover { color: var(--mc-gold); }

.mc-footer-bottom {
  padding-top: 30px;
  border-top: 1px solid var(--mc-border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.mc-footer-bottom p {
  margin: 0;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
}
.mc-footer-bottom ul {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mc-footer-bottom a {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}
.mc-footer-bottom a:hover { color: var(--mc-gold); }

/* ============================================================
   14. POST / PAGE CONTENT (subpage styling)
   ============================================================ */
.entry-content,
.wp-block-post-content {
  max-width: var(--mc-container);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 32px);
  color: var(--mc-text-muted);
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}
.entry-content h1:first-child,
.entry-content h2:first-child { margin-top: 0; }

.entry-content p { font-size: 18px; line-height: 1.75; }

.entry-content ul,
.entry-content ol { color: var(--mc-text-muted); padding-left: 24px; font-size: 18px; }
.entry-content li { margin-bottom: 10px; line-height: 1.7; }

.entry-content blockquote {
  border-left: 3px solid var(--mc-gold);
  padding: 6px 0 6px 24px;
  margin: 30px 0;
  font-style: italic;
  color: rgba(255,255,255,0.85);
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0;
  background: var(--mc-bg-card);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius);
  overflow: hidden;
}
.entry-content th,
.entry-content td {
  padding: 18px 20px;
  font-size: 16px;
  line-height: 1.6;
  border-bottom: 1px solid var(--mc-border-soft);
  text-align: left;
}
.entry-content th {
  background: var(--mc-bg-alt);
  color: var(--mc-gold);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.entry-content code,
.entry-content pre {
  background: var(--mc-bg-card);
  border: 1px solid var(--mc-border);
  border-radius: 6px;
  padding: 2px 8px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 14px;
  color: var(--mc-gold-light);
}
.entry-content pre { padding: 18px; overflow-x: auto; }

.entry-title,
.wp-block-post-title {
  font-size: clamp(26px, 4vw, 45px);
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  margin: 60px auto 30px;
  max-width: var(--mc-container);
  padding: 0 24px;
}

/* ============================================================
   14b. SINGLE POST META + AUTHOR BOX
   ============================================================ */

/* Post header meta row (published · author · category) */
.mc-post-header-meta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mc-text-faint);
  text-align: center;
}
.mc-post-header-meta .mc-meta-item,
.mc-post-header-meta .wp-block-post-date,
.mc-post-header-meta .wp-block-post-author,
.mc-post-header-meta .wp-block-post-terms {
  position: relative;
  color: var(--mc-text-faint);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.mc-post-header-meta a {
  color: var(--mc-text-muted);
  text-decoration: none;
  transition: color var(--mc-transition);
}
.mc-post-header-meta a:hover { color: var(--mc-gold); }
.mc-post-header-meta .wp-block-post-author__name { font-weight: 500; }
.mc-post-header-meta .wp-block-post-author__avatar { display: none; }
.mc-post-header-meta .wp-block-post-author__byline { display: none; }
.mc-post-header-meta .wp-block-post-author__content { display: inline; }

/* Content divider between post and author box */
.mc-content-divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mc-border), transparent);
  margin: 60px auto 40px;
  max-width: 800px;
}

/* Author box */
.mc-author-box {
  max-width: 800px;
  margin: 0 auto 60px;
  padding: 40px;
  background: var(--mc-bg-card);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-radius-lg);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: flex-start;
}

.mc-author-box-head {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.mc-author-box-avatar {
  margin: 0 !important;
}
.mc-author-box-avatar img,
.mc-author-box-avatar .avatar {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  border: 2px solid var(--mc-gold);
  padding: 3px;
  background: var(--mc-bg);
  display: block;
}
.mc-author-box-avatar .wp-block-post-author__name,
.mc-author-box-avatar .wp-block-post-author__byline,
.mc-author-box-avatar .wp-block-post-author__bio,
.mc-author-box-avatar .wp-block-post-author__content {
  display: none !important;
}

.mc-author-box-body {
  min-width: 0;
}

.mc-author-box-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--mc-gold) !important;
  margin: 0 0 6px !important;
  font-style: normal !important;
}

.mc-author-box-name,
.mc-author-box-name a {
  font-family: var(--mc-font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff !important;
  text-decoration: none;
  margin: 0 0 14px !important;
  display: block;
  letter-spacing: 0.01em;
}
.mc-author-box-name a:hover { color: var(--mc-gold) !important; }

.mc-author-box-bio,
.mc-author-box-bio p {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--mc-text-dim) !important;
  margin: 0 0 20px !important;
  font-style: normal;
  text-transform: none;
  font-weight: 400;
}
.mc-author-box-bio:empty { display: none; }

/* Meta grid inside author box */
.mc-author-box-meta {
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 8px 20px !important;
  padding-top: 18px;
  border-top: 1px solid var(--mc-border-soft);
  margin-top: 6px;
}

.mc-author-meta-item {
  display: flex;
  align-items: center;
}
.mc-author-meta-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-text-faint);
  white-space: nowrap;
}

.mc-author-meta-value,
.mc-author-meta-value a,
.mc-author-box-meta .wp-block-post-date,
.mc-author-box-meta .wp-block-post-terms,
.mc-author-box-meta .wp-block-post-date time {
  font-size: 13px !important;
  font-weight: 500;
  color: #fff !important;
  text-transform: none;
  letter-spacing: 0;
  font-style: normal;
  margin: 0 !important;
  text-decoration: none;
}
/* The category link in the author box measured 93x16px at 390px, under the
   24px WCAG 2.2 SC 2.5.8 floor on the vertical axis. Padding lifts it to 26px
   without moving the row, since the label above it sets the line box. */
.mc-author-box-meta .wp-block-post-terms a {
  display: inline-block;
  padding-block: 5px;
  color: var(--mc-gold) !important;
  text-decoration: none;
}
.mc-author-box-meta .wp-block-post-terms a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .mc-author-box {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 32px 24px;
  }
  .mc-author-box-head { justify-content: center; }
  .mc-author-box-meta {
    grid-template-columns: 1fr;
    gap: 4px !important;
    text-align: center;
  }
  .mc-author-meta-item { justify-content: center; }
}

/* ============================================================
   15. ANIMATIONS
   ============================================================ */
/* Visible by default: reveal JS is unreliable under LiteSpeed JS-Combine
   (throws "wp is not defined"), which left every fade section blank below the
   hero for logged-out visitors. Never gate visibility on JS. */
.mc-fade {
  opacity: 1 !important;
  transform: none !important;
}
.mc-fade.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .mc-fade { opacity: 1; transform: none; }
}

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .mc-card-grid { grid-template-columns: repeat(2, 1fr); }
  .mc-posts-grid { grid-template-columns: repeat(2, 1fr); }
  .mc-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .mc-split { gap: 40px; }
}

@media (max-width: 768px) {
  .mc-header-inner { padding: 14px 20px; }
  .mc-card-grid,
  .mc-posts-grid { grid-template-columns: 1fr; }
  .mc-split { grid-template-columns: 1fr; gap: 40px; }
  .mc-split-image { aspect-ratio: 4 / 3; max-width: 500px; margin: 0 auto; }
  .mc-footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .mc-footer-bottom { flex-direction: column; text-align: center; }
  .mc-footer-bottom ul { justify-content: center; flex-wrap: wrap; gap: 16px; }
  .mc-hero { padding: 80px 0 60px; }
  .mc-card { padding: 32px 24px; }
  .mc-testimonial { border-radius: 30px; padding: 50px 28px; }
  .mc-hero-cta { flex-direction: column; align-items: stretch; }
  .mc-btn { width: 100%; }
}

@media (max-width: 480px) {
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
}

/* ============================================================
   17. CALC ENGINE PLUGIN - AA CONTRAST OVERRIDES
   ============================================================
   The calculator widget is colored per metal by the plugin. The gray helper
   text (#888) sits on white on every metal, and the GOLD pages (bright gold
   theme) fail on the heading and the white-on-gold button. Navy metals
   (silver/platinum/palladium) already pass. Every gold wrapper carries an id
   starting with "calc-gold-", so the gold rules scope cleanly to those pages.
   See metalcalcs.com-calc-widget-contrast-override.md. */
.price-label {
  color: #6b6b6b !important;                                 /* 3.54:1 -> 5.33:1 on white */
}
[id^="calc-gold-"] .calc-title {
  color: #806508 !important;                                 /* gold heading 3.15:1 -> 5.37:1 on cream */
}
[id^="calc-gold-"] .calc-submit {
  color: #1a1a1a !important;                                 /* button white 1.40:1 -> dark 8.3-12.4:1 on gold */
}

/* ============================================================
   18. QUERY PAGINATION (archive + search)
   ============================================================
   The page numbers shipped unstyled: they ran together as "1 2 3Next Page"
   and measured 6x19px and 9x19px at 390px, failing WCAG 2.2 SC 2.5.8
   (24px on both axes). Sized to 44px so they are a comfortable tap. */
.wp-block-query-pagination {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
  margin-top: 56px !important;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.82);
  background: var(--mc-bg-card);
  border: 1px solid var(--mc-border);
  border-radius: 10px;
  text-decoration: none;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover {
  color: var(--mc-gold);
  border-color: var(--mc-gold);
  background: rgba(190,143,20,0.08);
}

.wp-block-query-pagination .page-numbers.current {
  color: #0a0a0a;
  background: var(--mc-gold);
  border-color: var(--mc-gold);
}

.wp-block-query-pagination .page-numbers.dots {
  min-width: 24px;
  background: transparent;
  border-color: transparent;
}

/* ============================================================
   19. CONTACT FORM 7
   ============================================================
   CF7 ships no CSS by design, so the contact page rendered raw white
   browser-default fields and a default grey button on the dark body.
   Field font stays at 16px: anything smaller makes iOS Safari zoom the
   viewport on focus. Dropdowns are styled through .wpcf7-form-control
   rather than the bare element name, which the origin WAF reads as a
   database query signature in a served stylesheet. */
.wp-block-contact-form-7-contact-form-selector {
  max-width: 36rem;
  margin-block: 3rem !important;
  margin-inline: auto !important;   /* centered with the prose column */
}

.wpcf7-form p {
  margin: 0 0 22px !important;
  max-width: 100%;
}

.wpcf7-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.wpcf7-form-control-wrap { display: block; margin-top: 10px; }

.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 13px 16px;
  font-family: var(--mc-font-body);
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  background: var(--mc-bg-card);
  border: 1px solid var(--mc-border);
  border-radius: 10px;
  text-transform: none;
  letter-spacing: 0;
  transition: border-color .25s ease, box-shadow .25s ease;
}

.wpcf7-form textarea.wpcf7-form-control {
  min-height: 170px;
  resize: vertical;
}

.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit)::placeholder {
  color: rgba(255,255,255,0.42);
}

.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):focus {
  outline: none;
  border-color: var(--mc-gold);
  box-shadow: 0 0 0 3px rgba(190,143,20,0.22);
}

.wpcf7-form .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 34px;
  font-family: var(--mc-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a1a1a;
  background: var(--mc-gold);
  border: 0;
  border-radius: var(--mc-radius-pill);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.wpcf7-form .wpcf7-submit:hover {
  background: var(--mc-gold-light);
  transform: translateY(-1px);
}
.wpcf7-form .wpcf7-submit:focus-visible {
  outline: 2px solid var(--mc-gold-light);
  outline-offset: 3px;
}

.wpcf7-form .wpcf7-spinner { margin-left: 12px; }

.wpcf7-not-valid-tip {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #ff9b8a;
}

.wpcf7 .wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 14px 18px !important;
  font-size: 15px;
  line-height: 1.6;
  color: #fff;
  border: 1px solid var(--mc-border) !important;
  border-radius: 10px;
  background: var(--mc-bg-card);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: #4c9a72 !important; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: #b4634f !important; }