/* ==========================================================================
   rm-custom.css — riccardomariti.com site patterns
   Only what Elementor has no control for. Colours/fonts come from the Elementor
   kit (Global Colors + Global Fonts); never hardcode a value that has a token.
   ========================================================================== */

:root {
  --rm-navy:   #0A1F3B;   /* primary, shared with the real estate site */
  --rm-navy-d: #071628;
  --rm-ink:    #1F2428;
  --rm-muted:  #5C6470;
  --rm-cream:  #E7E2D9;
  --rm-paper:  #FAFAF7;
  --rm-claret: #98272B;   /* accent, deepened from the book cover red */
  --rm-gold:   #C9A875;   /* used only on navy, where claret goes muddy */
  --rm-line:   #D9D3C7;
}

/* --------------------------------------------------------------- base links
   Declared FIRST so the component patterns below can override it. A generic rule placed
   after them would win on equal specificity and repaint every link claret. */
.elementor-widget-text-editor a {
  color: var(--rm-claret); text-decoration: none;
  border-bottom: 1px solid rgba(152, 39, 43, .3);
}
.elementor-widget-text-editor a:hover { border-bottom-color: var(--rm-claret); }

/* --------------------------------------------------------------- header nav */
.rm-nav { margin: 0; text-align: right; font-family: Inter, sans-serif; font-size: 14px; }
.rm-nav a {
  position: relative; margin-left: 30px; padding-bottom: 3px;
  color: var(--rm-navy); text-decoration: none;
}
.rm-nav a:first-child { margin-left: 0; }
.rm-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--rm-claret); transition: right .25s ease;
}
.rm-nav a:hover { color: var(--rm-claret); }
.rm-nav a:hover::after { right: 0; }
@media (max-width: 767px) {
  .rm-nav { text-align: left; }
  .rm-nav a { margin: 0 20px 0 0; font-size: 13.5px; }
}

/* ---------------------------------------------------------- credibility ribbon */
.rm-ribbon {
  display: flex; flex-wrap: wrap; gap: 10px 38px; margin: 0;
  font-family: Inter, sans-serif; font-size: 13.5px; color: #4A525E;
}
.rm-ribbon span { position: relative; padding-left: 16px; }
.rm-ribbon span::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; background: var(--rm-claret); transform: rotate(45deg);
}
.rm-ribbon strong { color: var(--rm-navy); font-weight: 600; }

/* ------------------------------------------------------------- text patterns */
.rm-lede { max-width: 62ch; }

.rm-inline-link { margin: 0; font-family: Inter, sans-serif; font-size: 15px; font-weight: 600; }
.rm-inline-link a {
  color: var(--rm-claret); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.rm-inline-link a:hover { border-bottom-color: var(--rm-claret); }

.rm-pullquote {
  margin: 6px 0 0; padding-left: 20px; border-left: 2px solid var(--rm-claret);
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 25px; line-height: 1.35;
  color: var(--rm-navy);
}

/* case-study field labels: Situation / The work / Result */
.rm-lbl {
  display: inline-block; margin-right: 8px;
  font-family: Inter, sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rm-claret);
}

/* --------------------------------------------------------- work page jump nav */
.rm-jump {
  margin: 0; font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.rm-jump a {
  display: inline-block; margin: 0 26px 8px 0; padding-bottom: 4px;
  color: var(--rm-navy); text-decoration: none; border-bottom: 1px solid var(--rm-line);
}
.rm-jump a:hover { color: var(--rm-claret); border-bottom-color: var(--rm-claret); }

/* ------------------------------------------------------------------- metrics */
.rm-metric-label { margin: 0; font-family: Inter, sans-serif; font-size: 13px; letter-spacing: .04em; }

/* ------------------------------------------------------------------- contact */
.rm-email { margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; line-height: 1.2; }
.rm-email a { color: var(--rm-navy); text-decoration: none; border-bottom: 1px solid var(--rm-line); }
.rm-email a:hover { color: var(--rm-claret); border-bottom-color: var(--rm-claret); }
@media (max-width: 767px) { .rm-email { font-size: 25px; } }

/* -------------------------------------------------------------------- footer */
.rm-foot-links { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.rm-foot-links a {
  display: block; padding-top: 14px; text-decoration: none;
  border-top: 1px solid rgba(231, 226, 217, .18);
}
.rm-foot-links strong {
  display: block; font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 22px; font-weight: 500; color: var(--rm-paper);
}
.rm-foot-links span {
  display: block; margin-top: 2px;
  font-family: Inter, sans-serif; font-size: 13.5px; color: #9AA6B6;
}
.rm-foot-links a:hover strong { color: var(--rm-gold); }

.rm-foot-contact { margin: 0; font-family: Inter, sans-serif; font-size: 14.5px; }
.rm-foot-contact a { color: #B9C2CF; text-decoration: none; }
.rm-foot-contact a:hover { color: var(--rm-paper); }

.rm-copyright { margin: 0; font-family: Inter, sans-serif; font-size: 12.5px; color: #7E8A9A; }

/* --------------------------------------------------------------------- media */
.elementor-widget-image img { display: block; width: 100%; height: auto; }
/* Elementor wraps a linked image in an inline <a>, which collapses to zero width until the
   image loads. Block-level keeps the layout stable while lazy images are still pending. */
.elementor-widget-image a { display: block; }

/* Components own their own link treatment; strip the base underline from all of them. */
.rm-nav a, .rm-jump a, .rm-foot-links a, .rm-foot-contact a, .rm-inline-link a,
.rm-ribbon a { border-bottom: none; }