/* ============================================================
   Dr. Hines Inc. - dhx-theme.css
   ONE navy/gold theme for every page on the site.
   ============================================================
   Loaded LAST on every page, after redesign.css / style.css /
   retro93.css and after any per-page <style> block, so it wins.

   Palette is the 2026 homepage palette and nothing else:
     ground  navy   #1C2340
     accent  gold   #d4af37
     type    white  #ffffff

   The old umber/brown/cream system is dead. Anything that still
   ships a light background or a copper accent gets corrected
   here, including inline styles (these rules use !important
   where they have to out-rank a style="" attribute).

   Sections:
     1. Tokens
     2. Legacy palette remaps (redesign / style / retro93 / chrome)
     3. Page baseline
     4. Shared components (buttons, clarity band, prose)
     5. Photo handling
     6. Mobile
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --dhx-navy: #1C2340;
  --dhx-navy-deep: #151B33;
  --dhx-navy-lift: #242C4E;
  --dhx-navy-raise: #2E3760;
  --dhx-gold: #d4af37;
  --dhx-gold-soft: #f0d98a;
  --dhx-gold-deep: #a08526;
  --dhx-white: #ffffff;
  --dhx-text: #E8EAF2;
  --dhx-text-dim: #A9B0C6;
  --dhx-text-faint: #7C849C;
  --dhx-line: rgba(255, 255, 255, 0.13);
  --dhx-line-soft: rgba(255, 255, 255, 0.07);
  --dhx-green: #6fc492;
  --dhx-red: #e8908c;
  --dhx-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --dhx-serif: Georgia, "Times New Roman", serif;
}

/* ---------- 2. Legacy palette remaps ----------
   Every design system on this site drove its colors through
   custom properties. Rebinding them at :root converts whole
   pages at once without touching their markup. */

:root {
  /* redesign.css */
  --ink: #1C2340;
  --ink-2: #1F2647;
  --ink-3: #2E3760;
  --ivory: #ffffff;
  --ivory-dim: #C4CADB;
  --ivory-faint: #A9B0C6;
  --gold: #d4af37;
  --gold-soft: #f0d98a;
  --gold-deep: #a08526;
  --green: #6fc492;
  --line: rgba(255, 255, 255, 0.13);

  /* style.css (was a light theme, now inverted) */
  --bg: #1C2340;
  --bg-card: #242C4E;
  --bg-card-hover: #2E3760;
  --bg-elevated: #2A3255;
  --border: rgba(255, 255, 255, 0.13);
  --border-light: rgba(255, 255, 255, 0.22);
  --text: #E8EAF2;
  --text-mid: #C4CADB;
  --text-muted: #A9B0C6;
  --copper: #d4af37;
  --copper-light: #f0d98a;
  --copper-dim: rgba(212, 175, 55, 0.35);
  --red: #e8908c;
  --red-dim: rgba(232, 144, 140, 0.14);

  /* retro93.css */
  --bg-dark: #1C2340;
  --bg-navy: #1C2340;
  --bg-mid: #202744;
  --bg-panel: #242C4E;
  --bg-inset: #1A2038;
  --gold-light: #f0d98a;
  --link-blue: #f0d98a;
  --link-visited: #e3c46f;
  --text-main: #E8EAF2;
  --text-light: #A9B0C6;
  --text-bright: #ffffff;
  --bevel-light: rgba(255, 255, 255, 0.13);
  --bevel-dark: rgba(0, 0, 0, 0.30);
  --border-mid: rgba(255, 255, 255, 0.13);
  --navy-btn: #242C4E;
  --navy-btn-light: #2E3760;

  /* per-page inline systems (amber/copper era) */
  --amber: #d4af37;
  --amber-dark: #a08526;
  --accent: #d4af37;
  --accent-on-dark: #f0d98a;
  --black: #ffffff;
  --gray: #C4CADB;
  --light-gray: #A9B0C6;
  --bg-warm: #1F2647;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Shared chrome. nav.css ships navy now, this is the belt to that
   brace so a stale cached nav.css still renders navy. */
.dhx-nav,
.dhx-footer {
  --dhx-ink: #1C2340;
  --dhx-ink-deep: #151B33;
  --dhx-ivory: #ffffff;
  --dhx-ivory-dim: #C4CADB;
  --dhx-ivory-faint: #A9B0C6;
  --dhx-gold: #d4af37;
  --dhx-gold-soft: #f0d98a;
  --dhx-line: rgba(255, 255, 255, 0.13);
}
.dhx-nav { background: rgba(21, 27, 51, 0.97) !important; }
.dhx-footer { background: #151B33 !important; }

/* ---------- 3. Page baseline ----------
   Pages whose only stylesheet is nav.css get their ground here.
   Pages with a full stylesheet already agree with these values,
   so this is a floor, not a fight. */
html { background: #1C2340; -webkit-text-size-adjust: 100%; }
body {
  background: #1C2340;
  color: #E8EAF2;
  font-family: var(--dhx-sans);
  -webkit-font-smoothing: antialiased;
}

/* Kill the light-theme leftovers wherever a page hardcoded them. */
body[style*="background:#fff"],
body[style*="background: #fff"],
body[style*="background:#FFF"],
body[style*="background:#ffffff"] { background: #1C2340 !important; }

/* Headings are white, always. */
h1, h2, h3, h4, h5, h6 { color: #ffffff; }

/* Gold is the only accent. */
a { color: #f0d98a; }
a:hover { color: #d4af37; }

/* Horizontal rules read as hairlines, not boxes. */
hr { border: none; border-top: 1px solid rgba(255, 255, 255, 0.13); }

/* Legacy presentational attributes on the old blog markup.
   <font color="#aaaaff"> and friends lose to any CSS rule. */
font { color: inherit; font-family: inherit; }
font[color] { color: inherit; }

/* ---------- 4. Shared components ---------- */

.dhx-btn,
a.dhx-btn {
  display: block;
  width: 100%;
  max-width: 420px;
  text-align: center;
  background: #d4af37;
  color: #161B30;
  font-family: var(--dhx-sans);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.3;
  padding: 18px 26px;
  border: 2px solid #d4af37;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
}
.dhx-btn:visited { color: #161B30; }
.dhx-btn:hover { background: #f0d98a; border-color: #f0d98a; color: #161B30; }

.dhx-btn-ghost,
a.dhx-btn-ghost {
  display: block;
  width: 100%;
  max-width: 420px;
  text-align: center;
  background: transparent;
  color: #f0d98a;
  font-family: var(--dhx-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  padding: 16px 24px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  text-decoration: none;
}
.dhx-btn-ghost:visited { color: #f0d98a; }
.dhx-btn-ghost:hover { border-color: #d4af37; color: #ffffff; }

@media (min-width: 620px) {
  .dhx-btn, a.dhx-btn,
  .dhx-btn-ghost, a.dhx-btn-ghost { display: inline-block; width: auto; }
}

/* ---- The clarity band ----
   Sits above the footer on every page. Whatever page a visitor
   lands on, this is where they learn what this is, what the two
   things cost, and where to click. */
.dhx-band {
  background: #151B33;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  padding: 56px 0;
  font-family: var(--dhx-sans);
  color: #E8EAF2;
  font-size: 17px;
  line-height: 1.65;
  text-align: left;
}
.dhx-band-inner {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 22px;
}
.dhx-band .dhx-band-eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d4af37;
  margin: 0 0 14px;
}
.dhx-band h2 {
  font-family: var(--dhx-serif);
  font-size: clamp(24px, 4.4vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 14px;
  padding: 0;
  border: none;
  background: none;
  text-shadow: none;
}
.dhx-band > .dhx-band-inner > p {
  color: #A9B0C6;
  font-size: clamp(16px, 2vw, 19px);
  margin: 0 0 26px;
  max-width: 620px;
}
.dhx-band-offers {
  display: grid;
  gap: 14px;
  margin-bottom: 26px;
}
@media (min-width: 720px) {
  .dhx-band-offers { grid-template-columns: 1fr 1fr; gap: 18px; }
}
.dhx-offer {
  display: block;
  background: #242C4E;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-top: 3px solid #d4af37;
  border-radius: 11px;
  padding: 22px 20px;
  text-decoration: none;
}
.dhx-offer:hover { background: #2E3760; }
.dhx-offer .dhx-offer-name {
  display: block;
  font-family: var(--dhx-serif);
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}
.dhx-offer .dhx-offer-price {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #d4af37;
  margin-bottom: 8px;
}
.dhx-offer .dhx-offer-desc {
  display: block;
  font-size: 15px;
  color: #A9B0C6;
  line-height: 1.6;
}
.dhx-band-cta {
  display: grid;
  gap: 12px;
  max-width: 420px;
}
@media (min-width: 720px) {
  .dhx-band-cta { display: flex; flex-wrap: wrap; gap: 14px; max-width: none; }
  .dhx-band-cta .dhx-btn,
  .dhx-band-cta .dhx-btn-ghost { width: auto; }
}
.dhx-band-fine {
  font-size: 13.5px;
  color: #A9B0C6;
  margin: 20px 0 0;
}
.dhx-band-fine a { color: #f0d98a; }

/* ---------- 5. Photo handling ----------
   The portrait is 1500x2000 with the head near the top. Any crop
   that pulls the focal point down clips the top of his head, so
   every instance is pinned to the top edge. !important because
   eight pages set object-position inline. */
img[src$="dr-hines.jpg"],
img[src*="dr-hines.jpg"] {
  object-fit: cover !important;
  object-position: 50% 0% !important;
}
.rd-photo,
.hp-photo,
.author-photo,
.dhx-photo {
  object-fit: cover;
  object-position: 50% 0%;
  border-color: rgba(255, 255, 255, 0.13);
}
.dhx-photo {
  width: 168px;
  height: 210px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  flex-shrink: 0;
  display: block;
  max-width: 100%;
}


/* The nine standalone tool pages shipped a floating "Home" pill back
   when they had no nav of their own. They have the real nav now, so the
   pill is a duplicate sitting on top of it. */
.dh-home { display: none !important; }

/* ---------- 6. Mobile ----------
   Nothing on this site may scroll sideways on a phone. Note the
   absence of overflow-x:hidden on html/body: that makes body a
   scroll container and kills the sticky nav. Constrain the things
   that actually overflow instead. */
img, video, iframe, table, pre, code { max-width: 100%; }
img { height: auto; }
pre { overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; }

@media (max-width: 620px) {
  .dhx-band { padding: 44px 0; }
  .dhx-band-inner { padding: 0 18px; }
}