/* ============================================================
   Dommerich Real Estate — dark-mode luxury design system v1.0.2
   Tokens: vault Runbooks/Design Tokens.md
   Scope: loads after all Houzez/Bootstrap styles; overrides only.
   ============================================================ */

:root {
  --drx-ground: #0E0F11;
  --drx-surface: #1C1E22;
  --drx-surface-2: #22252A;
  --drx-text: #EFECE5;
  --drx-muted: #BBAEA5;
  --drx-accent: #B89968;      /* brushed gold */
  --drx-accent-2: #BD1334;    /* brand crimson, sparing */
  --drx-hairline: #2A2D33;
  --drx-display: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --drx-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Ground & typography ---------- */
body.houzez-theme {
  background-color: var(--drx-ground) !important;
  color: var(--drx-text);
  font-family: var(--drx-body);
  font-weight: 400;
  line-height: 1.7;
}
h1, h2, h3, h4, h5, h6,
.page-title, .page-title-wrap h1 {
  font-family: var(--drx-display);
  color: var(--drx-text);
  letter-spacing: 0.04em;
  font-weight: 600;
}
h1 { letter-spacing: 0.06em; }
p, li, dd, dt { color: var(--drx-text); }
/* Houzez content styles set grays on inner text — force readability everywhere content renders */
.page-content-wrap p, .page-content-wrap li, .page-content-wrap span, .page-content-wrap address,
.entry-content p, .entry-content li, .entry-content span, .entry-content address,
.bt-content-wrap p, .bt-content-wrap li, .bt-content-wrap span,
article p, article li, article span, article address,
.page-wrap td, .page-wrap dd, .page-wrap dt {
  color: var(--drx-text) !important;
  opacity: 1 !important;
}
.page-content-wrap em, .entry-content em, article em { color: var(--drx-muted) !important; }
.text-muted, small, .small { color: var(--drx-muted) !important; }
strong, b { color: var(--drx-text); }
hr { border-color: var(--drx-hairline); opacity: 1; }
::selection { background: var(--drx-accent); color: #101113; }

/* ---------- Links & CTAs (text-link register, gold) ---------- */
a { color: var(--drx-accent); text-decoration: none; transition: color .18s ease; }
a:hover, a:focus { color: #CDAF7E; text-decoration: underline; text-underline-offset: 3px; }
.page-content-wrap a:not(.btn),
.entry-content a:not(.btn),
article a:not(.btn) {
  border-bottom: 1px solid rgba(184,153,104,.45);
  padding-bottom: 1px;
}
.page-content-wrap a:not(.btn):hover,
.entry-content a:not(.btn):hover,
article a:not(.btn):hover { border-bottom-color: var(--drx-accent); text-decoration: none; }

/* ---------- Buttons: single solid primary, hairline secondary ---------- */
.btn, button, input[type=submit] {
  font-family: var(--drx-display);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
  border-radius: 2px;
}
.btn-primary, .btn-success, .btn-secondary, button[type=submit], input[type=submit] {
  background-color: var(--drx-accent) !important;
  border-color: var(--drx-accent) !important;
  color: #101113 !important;
}
.btn-primary:hover, .btn-success:hover, .btn-secondary:hover,
button[type=submit]:hover, input[type=submit]:hover {
  background-color: #CDAF7E !important;
  border-color: #CDAF7E !important;
  color: #101113 !important;
}

/* ---------- Header ---------- */
.header-main-wrap,
#header-section,
#header-section.header-desktop,
.header-inner-wrap,
#header-mobile {
  background-color: rgba(14,15,17,.96) !important;
  border-bottom: 1px solid var(--drx-hairline);
}
#header-section .navbar a,
#header-section .main-nav a,
#header-section .nav-link,
#header-mobile a {
  color: var(--drx-text) !important;
  font-family: var(--drx-display);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
#header-section .main-nav a:hover,
#header-section .nav-link:hover { color: var(--drx-accent) !important; }
#header-section .dropdown-menu,
.main-nav .dropdown-menu {
  background-color: var(--drx-surface) !important;
  border: 1px solid var(--drx-hairline);
}
#header-section .dropdown-menu a { text-transform: none; letter-spacing: .03em; }

/* Swap the demo logo for the white Erin Baker / Fannie Hillman lockup */
.logo img, .logo-mobile img, .footer_logo img {
  content: url('https://dommerichrealestate.com/wp-content/uploads/2026/07/erin-baker-fh-logo-white.png');
  height: 52px !important;
  width: auto !important;
}

/* ---------- Page title band ---------- */
.page-title-wrap {
  background-color: var(--drx-ground) !important;
  border-bottom: 1px solid var(--drx-hairline);
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.page-title-wrap h1 { color: var(--drx-text); }

/* ---------- Content surfaces: kill the white ---------- */
#main-wrap, .main-wrap,
.page-wrap, .page-content-wrap, .bt-content-wrap,
.content-wrap, .site-content, .listing-wrap,
section.page-wrap { background-color: var(--drx-ground) !important; }

.card, .block-wrap, .widget, .sidebar-wrap .widget,
.property-item, .item-wrap, .landing-block, .modal-content {
  background-color: var(--drx-surface) !important;
  border: 1px solid var(--drx-hairline) !important;
  border-radius: 3px;
  box-shadow: none !important;
  color: var(--drx-text);
}

/* ---------- Editorial elements ---------- */
blockquote, .wp-block-quote {
  background: var(--drx-surface) !important;
  border-left: 2px solid var(--drx-accent) !important;
  margin: 2rem 0;
  padding: 1.4rem 1.6rem;
  font-style: normal;
  color: var(--drx-text) !important;
}
blockquote p, blockquote li, blockquote em, blockquote strong, .wp-block-quote p {
  color: var(--drx-text) !important;
  margin-bottom: .5rem; font-size: 1.02em; line-height: 1.75;
  opacity: 1 !important;
}
blockquote cite, .wp-block-quote cite {
  display: block; margin-top: .6rem;
  color: var(--drx-accent) !important; font-style: normal;
  font-family: var(--drx-display); font-size: .82em; letter-spacing: .1em; text-transform: uppercase;
  opacity: 1 !important;
}
blockquote::before, blockquote::after { display: none !important; content: none !important; }
.entry-content h2, .page-content-wrap h2 {
  margin-top: 2.6rem; margin-bottom: 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--drx-hairline);
  font-size: 1.5rem;
}
.entry-content h3, .page-content-wrap h3 { margin-top: 1.9rem; font-size: 1.15rem; color: var(--drx-muted); }
.entry-content ul li, .page-content-wrap ul li { margin-bottom: .45rem; }
iframe { border: 1px solid var(--drx-hairline); border-radius: 3px; }

/* Inline article figures */
.drx-fig { margin: 2.2rem 0; }
.drx-fig img {
  width: 100%;
  height: auto;
  border-radius: 3px;
  border: 1px solid var(--drx-hairline);
  display: block;
  filter: saturate(.94);
}
.drx-fig figcaption {
  margin-top: .6rem;
  color: var(--drx-muted) !important;
  font-size: .85em;
  letter-spacing: .04em;
  font-family: var(--drx-display);
}
table { color: var(--drx-text); border-color: var(--drx-hairline); }
table th, table td { border-color: var(--drx-hairline) !important; }

/* ---------- Forms ---------- */
input[type=text], input[type=email], input[type=tel], input[type=url],
input[type=search], input[type=password], textarea, select, .form-control {
  background-color: var(--drx-surface-2) !important;
  border: 1px solid var(--drx-hairline) !important;
  color: var(--drx-text) !important;
  border-radius: 2px;
}
input::placeholder, textarea::placeholder { color: var(--drx-muted); opacity: .8; }
input:focus, textarea:focus, select:focus, .form-control:focus {
  border-color: var(--drx-accent) !important;
  box-shadow: 0 0 0 1px var(--drx-accent) !important;
  outline: none;
}
label { color: var(--drx-muted); font-family: var(--drx-display); letter-spacing: .05em; font-size: .85em; }

/* ---------- Footer ---------- */
.footer-wrap, .footer-bottom-wrap {
  background-color: #0A0B0D !important;
  border-top: 1px solid var(--drx-hairline);
  color: var(--drx-muted);
}
.footer-wrap a, .footer-bottom-wrap a { color: var(--drx-muted); }
.footer-wrap a:hover, .footer-bottom-wrap a:hover { color: var(--drx-accent); }
.footer-copyright p { color: var(--drx-muted); font-size: .85em; letter-spacing: .04em; }

/* ---------- Journal (blog index) cards ---------- */
.blog-wrap article, article.post {
  background: var(--drx-surface);
  border: 1px solid var(--drx-hairline);
  border-radius: 3px;
}
article .entry-title a, .post-title a { color: var(--drx-text); border-bottom: none; }
article .entry-title a:hover, .post-title a:hover { color: var(--drx-accent); }
.entry-meta, .post-meta, .meta-wrap { color: var(--drx-muted); font-size: .85em; }

/* ---------- Archive listings (category/tag topics pages) ---------- */
.article-wrap article.post-wrap {
  background: var(--drx-surface);
  border: 1px solid var(--drx-hairline);
  border-radius: 3px;
  overflow: hidden;
}
.post-title-wrap h2 a { color: var(--drx-text) !important; }
.post-title-wrap h2 a:hover { color: var(--drx-accent) !important; }
.post-footer-wrap.border-top { border-color: var(--drx-hairline) !important; }
.post-footer-wrap .author-meta li { color: var(--drx-muted); }
.blog-post-content-widget h4 a { color: var(--drx-text) !important; }
.blog-post-content-widget h4 a:hover { color: var(--drx-accent) !important; }

/* ---------- Related posts (single post): soft grey cards, dark readable text ---------- */
.related-posts-wrap .blog-post-item {
  background-color: #D9D6D0 !important;   /* soft warm grey instead of white */
  border: 1px solid var(--drx-hairline) !important;
  border-radius: 3px;
  overflow: hidden;
}
.related-posts-wrap .blog-post-body,
.related-posts-wrap .blog-post-author { color: #3E3B36 !important; }
.related-posts-wrap .blog-post-meta li,
.related-posts-wrap .blog-post-meta time,
.related-posts-wrap .blog-post-meta i { color: #4A463F !important; }
.related-posts-wrap .blog-post-title h3 a { color: #17181B !important; border-bottom: none; }
.related-posts-wrap .blog-post-title h3 a:hover { color: #7A5F33 !important; }
.related-posts-wrap .blog-post-meta a,
.related-posts-wrap .blog-post-link a { color: #7A5F33 !important; border-bottom-color: rgba(122,95,51,.45) !important; }
.related-posts-wrap .blog-post-meta a:hover,
.related-posts-wrap .blog-post-link a:hover { color: #5C4724 !important; }

/* ---------- About page portrait ---------- */
.drx-about-photo { float: right; width: 230px; margin: .3rem 0 1.6rem 2rem; }
.drx-about-photo img {
  width: 100%; height: auto; display: block;
  border-radius: 50%;
  border: 1px solid var(--drx-hairline);
}
@media (max-width: 767px) { .drx-about-photo { float: none; width: 200px; margin: 0 auto 1.8rem; } }

/* ============================================================
   Homepage (template-home.php)
   ============================================================ */
.drx-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.drx-narrow { max-width: 780px; }
.drx-center { text-align: center; }
.drx-section { padding: 88px 0; background: var(--drx-ground); }
.drx-h2 {
  font-size: 1.6rem; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 2.2rem; color: var(--drx-text);
  border-bottom: none !important;
}
.drx-h2::after { content: ""; display: block; width: 56px; height: 1px; background: var(--drx-accent); margin-top: 14px; }

/* Hero */
.drx-hero {
  position: relative; min-height: 82vh;
  background-size: cover; background-position: center 65%;
  display: flex; align-items: center;
}
.drx-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,15,17,.55) 0%, rgba(14,15,17,.25) 45%, rgba(14,15,17,.92) 100%);
}
.drx-hero-inner { position: relative; z-index: 2; padding-top: 90px; }
.drx-kicker {
  font-family: var(--drx-display); font-size: 12px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--drx-accent) !important; margin-bottom: 18px;
}
.drx-hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 500;
  letter-spacing: .06em; line-height: 1.12; color: #fff; margin-bottom: 22px;
}
.drx-hero-sub { max-width: 560px; font-size: 1.08rem; line-height: 1.7; color: var(--drx-text) !important; margin-bottom: 34px; }
.drx-hero-ctas { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }

/* Buttons/links in drx register */
.drx-btn {
  display: inline-block; background: var(--drx-accent); color: #101113 !important;
  font-family: var(--drx-display); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  padding: 14px 34px; border-radius: 2px; border-bottom: none !important;
}
.drx-btn:hover { background: #CDAF7E; color: #101113 !important; text-decoration: none; }
.drx-textlink {
  font-family: var(--drx-display); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--drx-accent) !important; border-bottom: 1px solid rgba(184,153,104,.5) !important; padding-bottom: 3px;
}
.drx-textlink:hover { color: #CDAF7E !important; text-decoration: none; border-bottom-color: #CDAF7E !important; }

/* Lede */
.drx-lede { font-size: 1.2rem; line-height: 1.85; color: var(--drx-text) !important; font-weight: 300; }

/* Cards */
.drx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 991px) { .drx-grid-3 { grid-template-columns: 1fr; } .drx-section { padding: 60px 0; } .drx-hero { min-height: 70vh; } }
.drx-card {
  display: block; background: var(--drx-surface); border: 1px solid var(--drx-hairline);
  border-radius: 3px; overflow: hidden; border-bottom: 1px solid var(--drx-hairline) !important;
  transition: transform .25s ease, border-color .25s ease;
}
.drx-card:hover { transform: translateY(-4px); border-color: var(--drx-accent); text-decoration: none; }
.drx-card-img { display: block; height: 220px; background-size: cover; background-position: center; filter: saturate(.92); }
.drx-card-body { display: block; padding: 22px 24px 26px; }
.drx-card-meta { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--drx-muted); margin-bottom: 8px; font-family: var(--drx-display); }
.drx-card-title { display: block; font-family: var(--drx-display); font-size: 1.12rem; letter-spacing: .05em; color: var(--drx-text); margin-bottom: 8px; }
.drx-card-text { display: block; font-size: .95rem; line-height: 1.65; color: var(--drx-muted); }
.drx-journal .drx-center { margin-top: 2.4rem; }

/* Agent band */
.drx-agent { background: var(--drx-surface); border-top: 1px solid var(--drx-hairline); border-bottom: 1px solid var(--drx-hairline); }
.drx-agent-inner { display: flex; gap: 48px; align-items: center; }
@media (max-width: 767px) { .drx-agent-inner { flex-direction: column; text-align: center; } }
.drx-agent-photo { width: 210px; height: 210px; object-fit: cover; object-position: top; border-radius: 50%; border: 1px solid var(--drx-hairline); }
.drx-agent-copy p { color: var(--drx-text) !important; line-height: 1.8; }

/* Signup band */
.drx-signup { background: var(--drx-ground); }
.drx-signup p { color: var(--drx-muted) !important; margin-bottom: 26px; }
.drx-signup .drx-h2::after { margin-left: auto; margin-right: auto; }

/* ---------- Journal / archive page header + pagination ---------- */
.drx-journal-head { text-align: center; margin-bottom: 3rem; }
.drx-journal-head .drx-h2 { display: inline-block; margin-bottom: 1.1rem; }
.drx-journal-head .drx-h2::after { margin-left: auto; margin-right: auto; }
.drx-journal-head .drx-lede { max-width: 720px; margin: 0 auto; font-size: 1.05rem; color: var(--drx-muted) !important; }
.drx-journal .nav-links, .drx-journal .pagination {
  display: flex; justify-content: center; gap: 10px; margin-top: 3.4rem; flex-wrap: wrap;
}
.drx-journal .page-numbers {
  font-family: var(--drx-display); font-size: 13px; letter-spacing: .1em;
  padding: 8px 15px; border: 1px solid var(--drx-hairline); border-radius: 2px;
  color: var(--drx-text); border-bottom: 1px solid var(--drx-hairline) !important;
}
.drx-journal .page-numbers.current {
  background: var(--drx-accent); color: #101113; border-color: var(--drx-accent) !important;
}
.drx-journal a.page-numbers:hover {
  border-color: var(--drx-accent) !important; color: var(--drx-accent); text-decoration: none;
}

/* ---------- Utility fixes for stubborn Houzez whites ---------- */
.bg-white, .bg-light { background-color: var(--drx-surface) !important; }
.text-dark { color: var(--drx-text) !important; }
.border, .border-top, .border-bottom { border-color: var(--drx-hairline) !important; }