/* ============================================================
   HICKS REALTY — HOMEPAGE STYLES
   listwithhicks.com | Kadence / WordPress Additional CSS
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black: #0a0a0a;
  --white: #ffffff;
  --off-white: #f8f8f6;
  --gray-light: #e8e8e4;
  --gray-mid: #999990;
  --gray-dark: #333330;
  --serif: 'Cormorant Garamond', 'Georgia', serif;
  --sans: 'Montserrat', 'Helvetica Neue', sans-serif;
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--sans);
  color: var(--black);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}

/* ---- TYPOGRAPHY ---- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; line-height: 1.15; }
h1 { font-size: clamp(2.8rem, 6vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
p { font-size: 0.95rem; line-height: 1.8; color: var(--gray-dark); }

.hr-label {
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-mid);
  display: block;
  margin-bottom: 1rem;
}

/* ---- BUTTONS ---- */
.btn-primary {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--transition);
  border: 1px solid var(--black);
}
.btn-primary:hover { background: transparent; color: var(--black); }

.btn-outline {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: transparent;
  color: var(--white);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.5);
  transition: var(--transition);
}
.btn-outline:hover { background: var(--white); color: var(--black); border-color: var(--white); }

/* ---- NAVIGATION ---- */
.hr-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 4%;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gray-light);
  transition: var(--transition);
}

.hr-nav-logo img {
  height: 44px;
  width: auto;
  display: block;
}

.hr-nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
}

.hr-nav-links a {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--black);
  transition: var(--transition);
}
.hr-nav-links a:hover { color: var(--gray-mid); }

.hr-nav-cta { display: flex; align-items: center; gap: 1.5rem; }
.hr-nav-phone { font-size: 0.8rem; font-weight: 500; color: var(--gray-dark); text-decoration: none; }

/* ---- HERO ---- */
.hr-hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 80px;
}

.hr-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8% 6% 8% 8%;
  background: var(--white);
}

.hr-hero-eyebrow {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-bottom: 1.5rem;
}

.hr-hero h1 { margin-bottom: 1.5rem; }
.hr-hero h1 em { font-style: italic; color: var(--gray-mid); }

.hr-hero-sub {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray-dark);
  max-width: 480px;
  margin-bottom: 2.5rem;
}

.hr-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hr-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 4rem;
  border-top: 1px solid var(--gray-light);
  padding-top: 2rem;
}

.hr-stat-item { text-align: left; }
.hr-stat-number {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 300;
  line-height: 1;
  display: block;
}
.hr-stat-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gray-mid);
  margin-top: 0.3rem;
  display: block;
}

.hr-hero-image {
  position: relative;
  overflow: hidden;
}
.hr-hero-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hr-hero-badge {
  position: absolute;
  bottom: 2.5rem;
  left: 2.5rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  padding: 1.2rem 1.5rem;
  border-left: 3px solid var(--black);
}
.hr-hero-badge-title {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.3rem;
}
.hr-hero-badge-text {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--black);
}

/* ---- MARQUEE ---- */
.hr-marquee {
  background: var(--black);
  color: var(--white);
  padding: 1rem 0;
  overflow: hidden;
  white-space: nowrap;
}
.hr-marquee-track {
  display: inline-flex;
  animation: marquee 30s linear infinite;
}
.hr-marquee-track span {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0 2rem;
}
.hr-marquee-track .dot { color: rgba(255,255,255,0.3); padding: 0 0.5rem; }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- ABOUT / INTRO SECTION ---- */
.hr-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 85vh;
}

.hr-intro-image {
  position: relative;
  overflow: hidden;
  background: var(--black);
}
.hr-intro-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0.92;
}
.hr-intro-image-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  padding: 3rem 2.5rem 2rem;
  color: var(--white);
}
.hr-intro-image-caption strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
}
.hr-intro-image-caption span {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

.hr-intro-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8% 8% 8% 7%;
  background: var(--off-white);
}
.hr-intro-content h2 { margin-bottom: 1.5rem; }
.hr-intro-content p { margin-bottom: 1.2rem; }
.hr-intro-content .btn-primary { margin-top: 1rem; }

/* ---- STATS BAR ---- */
.hr-stats-bar {
  background: var(--black);
  color: var(--white);
  padding: 5rem 8%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
.hr-stats-bar-item {}
.hr-stats-bar-number {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 300;
  line-height: 1;
  display: block;
}
.hr-stats-bar-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 0.5rem;
  display: block;
}

/* ---- MARKETS SECTION ---- */
.hr-markets {
  padding: 8rem 8%;
  background: var(--white);
}
.hr-markets-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 4rem;
}
.hr-markets-header h2 { max-width: 400px; }
.hr-markets-header p { max-width: 320px; font-size: 0.9rem; }

.hr-markets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5px;
  background: var(--gray-light);
}

.hr-market-card {
  background: var(--white);
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
}
.hr-market-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.hr-market-card:hover img { transform: scale(1.05); }
.hr-market-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2.5rem;
}
.hr-market-card-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.5rem;
}
.hr-market-card h3 {
  color: var(--white);
  font-size: 1.8rem;
  font-weight: 300;
  margin-bottom: 0.5rem;
}
.hr-market-card p {
  color: rgba(255,255,255,0.75);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ---- TESTIMONIALS ---- */
.hr-testimonials {
  background: var(--black);
  color: var(--white);
  padding: 8rem 8%;
}
.hr-testimonials-header { margin-bottom: 4rem; }
.hr-testimonials-header .hr-label { color: rgba(255,255,255,0.4); }
.hr-testimonials-header h2 { color: var(--white); }

.hr-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.hr-testimonial-card {
  border: 1px solid rgba(255,255,255,0.1);
  padding: 2.5rem;
}
.hr-testimonial-stars {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1.2rem;
}
.hr-testimonial-card blockquote {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255,255,255,0.9);
  margin-bottom: 1.5rem;
  font-style: italic;
}
.hr-testimonial-author {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* ---- PROCESS SECTION ---- */
.hr-process {
  padding: 8rem 8%;
  background: var(--off-white);
}
.hr-process-header { margin-bottom: 5rem; max-width: 600px; }

.hr-process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  counter-reset: steps;
}
.hr-process-step { counter-increment: steps; }
.hr-process-step-number {
  font-family: var(--serif);
  font-size: 5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--gray-light);
  display: block;
  margin-bottom: 1rem;
}
.hr-process-step h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.hr-process-step p { font-size: 0.9rem; }

/* ---- CTA SPLIT ---- */
.hr-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 60vh;
}
.hr-cta-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8%;
}
.hr-cta-panel.dark { background: var(--black); color: var(--white); }
.hr-cta-panel.light { background: var(--white); }
.hr-cta-panel h2 { margin-bottom: 1rem; color: inherit; }
.hr-cta-panel p { margin-bottom: 2rem; color: inherit; opacity: 0.7; }
.hr-cta-panel .hr-label { color: rgba(255,255,255,0.4); }
.hr-cta-panel.light .hr-label { color: var(--gray-mid); }

/* ---- FOOTER ---- */
.hr-footer {
  background: var(--black);
  color: rgba(255,255,255,0.5);
  padding: 4rem 8%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.hr-footer-logo img { height: 36px; width: auto; }
.hr-footer-center { text-align: center; font-size: 0.7rem; }
.hr-footer-right { text-align: right; font-size: 0.7rem; }
.hr-footer a { color: rgba(255,255,255,0.5); text-decoration: none; }
.hr-footer a:hover { color: var(--white); }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .hr-hero, .hr-intro, .hr-cta { grid-template-columns: 1fr; }
  .hr-hero-image { min-height: 50vh; }
  .hr-intro-image { min-height: 60vw; }
  .hr-markets-grid, .hr-testimonials-grid, .hr-process-steps { grid-template-columns: 1fr; }
  .hr-stats-bar { grid-template-columns: repeat(2, 1fr); }
  .hr-markets-header { flex-direction: column; gap: 1rem; align-items: flex-start; }
  .hr-footer { grid-template-columns: 1fr; text-align: center; }
  .hr-footer-right { text-align: center; }
  .hr-hero-stats { grid-template-columns: repeat(3, 1fr); }
  .hr-nav-links { display: none; }
}

/* ============================================================
   HICKS REALTY — KADENCE WRAPPER FIXES
   Remove gray boxed layout from homepage
   ============================================================ */

/* Remove gray background and boxed padding from content wrapper */
body.home .content-bg,
body.home article.hentry {
  background: transparent !important;
}

body.home .entry-content-wrap {
  padding: 0 !important;
}

body.home .content-area,
body.home #primary,
body.home .wrap.kt-clear {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

body.home #wrapper.site {
  background: #ffffff !important;
}

/* Ensure hr-nav sits above WordPress admin bar when logged in */
.admin-bar .hr-nav {
  top: 32px !important;
}

/* Remove any Kadence inner content width constraints on homepage */
body.home .entry-content {
  max-width: 100% !important;
  padding: 0 !important;
}

/* ============================================================
   HICKS REALTY — TRUSSVILLE NEIGHBORHOOD PAGE STYLES
   ============================================================ */

.hr-ph {
  min-height: 90vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 80px;
}
.hr-ph-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8% 6% 8% 8%;
  background: var(--white);
}
.hr-ph-content h1 { margin-bottom: 1.5rem; }
.hr-ph-content h1 em { font-style: italic; color: var(--gray-mid); }
.hr-ph-sub {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--gray-dark);
  max-width: 480px;
  margin-bottom: 2.5rem;
}
.hr-ph-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hr-ph-image { position: relative; overflow: hidden; }
.hr-ph-image img { width: 100%; height: 100%; object-fit: cover; }
.hr-ph-badge {
  position: absolute;
  bottom: 2.5rem; left: 2.5rem;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  padding: 1.2rem 1.5rem;
  border-left: 3px solid var(--black);
}
.hr-ph-badge-title {
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  display: block; margin-bottom: 0.3rem;
}
.hr-ph-badge-text {
  font-family: var(--serif); font-size: 1.1rem;
  font-weight: 300; color: var(--black);
}

.hr-trussville-intro { padding: 8rem 8%; background: var(--off-white); }
.hr-trussville-intro-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: start;
}
.hr-trussville-intro-text h2 { margin-bottom: 1.5rem; }
.hr-trussville-intro-text p { margin-bottom: 1.2rem; }
.hr-trussville-intro-stats {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; padding-top: 1rem;
}
.hr-ti-stat-num {
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 300; line-height: 1;
  display: block; margin-bottom: 0.5rem;
}
.hr-ti-stat-label {
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--gray-mid); line-height: 1.5;
}

.hr-neighborhoods { padding: 8rem 8%; background: var(--white); }
.hr-neighborhoods-header { margin-bottom: 4rem; max-width: 700px; }
.hr-neighborhoods-header h2 { margin-bottom: 1rem; }
.hr-neighborhoods-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5px; background: var(--gray-light);
}
.hr-nbhd-card { background: var(--white); padding: 2.5rem; }
.hr-nbhd-name {
  font-family: var(--serif); font-size: 1.4rem;
  font-weight: 300; margin-bottom: 1rem; color: var(--black);
}
.hr-nbhd-card p { font-size: 0.85rem; line-height: 1.7; }

.hr-buying { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; }
.hr-buying-image { overflow: hidden; background: var(--black); }
.hr-buying-image img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.hr-buying-content {
  display: flex; flex-direction: column;
  justify-content: center; padding: 8%;
  background: var(--off-white);
}
.hr-buying-content h2 { margin-bottom: 1.5rem; }
.hr-buying-content p { margin-bottom: 1.2rem; }
.hr-buying-list { list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.hr-buying-list li {
  font-size: 0.85rem; color: var(--gray-dark);
  padding: 0.6rem 0 0.6rem 1.2rem;
  border-bottom: 1px solid var(--gray-light);
  position: relative;
}
.hr-buying-list li::before { content: '—'; position: absolute; left: 0; color: var(--gray-mid); }

.hr-selling { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; }
.hr-selling-content {
  display: flex; flex-direction: column;
  justify-content: center; padding: 8%;
  background: var(--black); color: var(--white);
}
.hr-selling-content .hr-label { color: rgba(255,255,255,0.4); }
.hr-selling-content h2 { color: var(--white); margin-bottom: 1.5rem; }
.hr-selling-content p { color: rgba(255,255,255,0.75); margin-bottom: 1.2rem; }
.hr-selling-list { list-style: none; padding: 0; margin: 1.5rem 0 2rem; }
.hr-selling-list li {
  font-size: 0.85rem; color: rgba(255,255,255,0.7);
  padding: 0.6rem 0 0.6rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: relative;
}
.hr-selling-list li::before { content: '—'; position: absolute; left: 0; color: rgba(255,255,255,0.3); }
.hr-selling-image { overflow: hidden; }
.hr-selling-image img { width: 100%; height: 100%; object-fit: cover; }

.hr-market-info { padding: 8rem 8%; background: var(--off-white); }
.hr-market-info-header { margin-bottom: 5rem; max-width: 600px; }
.hr-market-info-header h2 { margin-top: 1rem; }
.hr-market-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem; }
.hr-mi-item h3 {
  font-size: 1.3rem; font-family: var(--serif); font-weight: 300;
  margin-bottom: 1rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--gray-light);
}
.hr-mi-item p { font-size: 0.9rem; }
.hr-mi-item a { color: var(--black); }

.hr-trussville-reviews { padding: 8rem 8%; background: var(--black); color: var(--white); }
.hr-trussville-reviews-header { margin-bottom: 4rem; }
.hr-trussville-reviews-header .hr-label { color: rgba(255,255,255,0.4); }
.hr-trussville-reviews-header h2 { color: var(--white); }
.hr-trussville-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.hr-tr-card { border: 1px solid rgba(255,255,255,0.1); padding: 2.5rem; }
.hr-tr-stars { font-size: 0.8rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.6); margin-bottom: 1.2rem; }
.hr-tr-card blockquote {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 300;
  line-height: 1.6; color: rgba(255,255,255,0.9);
  margin-bottom: 1.5rem; font-style: italic;
}
.hr-tr-author {
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

.hr-trussville-cta { padding: 8rem 8%; background: var(--white); }
.hr-trussville-cta-inner {
  display: grid; grid-template-columns: 420px 1fr;
  gap: 6rem; align-items: center;
}
.hr-trussville-cta-image {
  position: relative; overflow: hidden;
  aspect-ratio: 3/4; background: var(--white);
}
.hr-trussville-cta-image img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center center;
}
.hr-trussville-cta-content h2 { margin-bottom: 1.5rem; }
.hr-trussville-cta-content p { margin-bottom: 1.2rem; }
.hr-trussville-cta-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

body.page-template-default .content-bg,
body.page-template-default article.hentry { background: transparent !important; }
body.page-template-default .entry-content-wrap { padding: 0 !important; }
body.page-template-default .content-area,
body.page-template-default #primary,
body.page-template-default .wrap.kt-clear {
  background: transparent !important;
  padding: 0 !important; margin: 0 !important;
  max-width: 100% !important; width: 100% !important;
}
body.page-template-default .entry-content { max-width: 100% !important; padding: 0 !important; }

@media (max-width: 900px) {
  .hr-ph, .hr-buying, .hr-selling { grid-template-columns: 1fr; }
  .hr-ph-image { min-height: 50vh; }
  .hr-trussville-intro-inner { grid-template-columns: 1fr; gap: 3rem; }
  .hr-neighborhoods-grid, .hr-market-info-grid, .hr-trussville-reviews-grid { grid-template-columns: 1fr; }
  .hr-trussville-cta-inner { grid-template-columns: 1fr; }
  .hr-trussville-cta-image { aspect-ratio: 16/9; }
}

/* ---- MARKET CARD AS LINK ---- */
a.hr-market-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
a.hr-market-card:hover img {
  transform: scale(1.04);
}
.hr-market-card-cta {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  margin-top: 1rem;
  opacity: 0.65;
  transition: opacity 0.3s ease;
}
a.hr-market-card:hover .hr-market-card-cta {
  opacity: 1;
}

/* ---- NAV MOBILE ---- */
@media (max-width: 768px) {
  .hr-nav { padding: 0.75rem 5%; }
  .hr-nav-phone { display: none; }
  .hr-nav .btn-primary {
    font-size: 0.62rem;
    padding: 10px 14px;
    letter-spacing: 1.5px;
    white-space: nowrap;
  }
}

/* ---- MOODY (page-id-364) + LEEDS (page-id-371) FIXES ---- */

/* Reviews section H2: black on near-black bg - fix to white */
.page-id-364 .hr-trussville-reviews h2,
.page-id-371 .hr-trussville-reviews h2 {
  color: #ffffff;
}

/* ================================================
   BLOG PAGE: Style Kadence header to match custom nav
   ================================================ */

/* Nav links: uppercase, bold, small */
.blog .main-navigation a,
.blog .primary-navigation a,
.blog .header-navigation a,
.blog #primary-menu a,
.blog .nav-menu a,
.blog .menu-item a {
  text-transform: uppercase !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  color: #1a1a1a !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

/* Header background */
.blog .site-header,
.blog header.site-header {
  background: #fff !important;
  border-bottom: 1px solid #e8e8e8 !important;
  box-shadow: none !important;
}

/* Logo height to match */
.blog .site-branding img,
.blog .header-logo-img img,
.blog .custom-logo {
  height: 50px !important;
  width: auto !important;
}

/* Button: LIST WITH HICKS style */
.blog .header-row-button a,
.blog .header-button a,
.blog .wp-block-button a {
  background: #1a1a1a !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 12px 22px !important;
  border-radius: 0 !important;
  border: none !important;
}

/* Blog header button: correct selector + uppercase */
.blog a.header-button,
.blog .button.header-button {
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  background: #1a1a1a !important;
  color: #fff !important;
  border-radius: 0 !important;
  padding: 12px 22px !important;
}

/* Blog header: match logo size to custom nav (50px) */
.blog .site-branding img,
.blog .custom-logo,
.blog .header-logo-container img,
.blog .site-logo img {
  height: 50px !important;
  width: auto !important;
  max-height: 50px !important;
}

/* ============================================================
   HAMBURGER BUTTON — SITE-WIDE FIX
   (prevents Kadence button styles from overriding the nav toggle)
   ============================================================ */
.hr-ham {
  display: none !important;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 10px;
  order: 2;
  outline: none;
  width: auto !important;
  height: auto !important;
  -webkit-tap-highlight-color: transparent;
}
.hr-ham span {
  display: block;
  width: 22px;
  height: 2px;
  background: #111 !important;
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.hr-nav.hr-open .hr-ham span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hr-nav.hr-open .hr-ham span:nth-child(2) { opacity: 0; }
.hr-nav.hr-open .hr-ham span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .hr-ham { display: flex !important; }
  .hr-nav { flex-wrap: wrap !important; position: relative !important; }
  .hr-nav-cta { order: 3; }
  .hr-nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    background: #fff;
    padding: 8px 0;
    order: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    list-style: none;
    margin: 0;
  }
  .hr-nav-links li a {
    display: block;
    padding: 13px 20px;
    font-size: 16px;
    color: #111;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
  }
  .hr-nav.hr-open .hr-nav-links { display: flex !important; }
}

/* ============================
   BLOG PAGE — listwithhicks.com/blog/
   ============================ */

/* Real <h1> for the blog archive, injected via the nav/footer code
   snippet (replaces the old CSS ::before trick — that text was only
   ever rendered visually and wasn't real, crawlable page content). */
body.blog .hr-blog-hero {
  text-align: center;
  padding: 64px 40px 40px;
  border-bottom: 1px solid #e8e8e8;
}
body.blog .hr-blog-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 400;
  color: #1a1a1a;
  letter-spacing: -.01em;
  margin: 0 0 12px;
}
body.blog .hr-blog-hero p {
  font-family: 'Montserrat', sans-serif;
  font-size: .95rem;
  color: #666;
  max-width: 560px;
  margin: 0 auto;
}

/* Archive layout */
body.blog #archive-container.kadence-posts-list {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 40px 80px;
  list-style: none;
}

/* Cards */
body.blog #archive-container .entry-content-wrap {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
body.blog #archive-container .entry-content-wrap:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.10);
  transform: translateY(-2px);
}

/* Category label */
body.blog #archive-container .entry-taxonomies {
  padding: 20px 20px 0;
}
body.blog #archive-container .entry-taxonomies .category-style-normal a {
  font-family: 'Montserrat', sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #888;
  text-decoration: none;
}

/* Post title */
body.blog #archive-container .entry-title {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  margin: .5rem 0;
  padding: 0 20px;
  line-height: 1.2;
}
body.blog #archive-container .entry-title a {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 400;
  color: #1a1a1a;
  text-decoration: none;
  transition: color .2s;
}
body.blog #archive-container .entry-title a:hover { color: #555; }

/* Meta */
body.blog #archive-container .entry-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: .75rem;
  color: #aaa;
  margin: 0 0 10px;
  padding: 0 20px;
}
body.blog #archive-container .entry-meta a { color: #aaa; text-decoration: none; }

/* Excerpt */
body.blog #archive-container .entry-summary { padding: 0 20px; flex: 1; }
body.blog #archive-container .entry-summary p {
  font-family: 'Montserrat', sans-serif;
  font-size: .88rem;
  font-weight: 300;
  color: #555;
  line-height: 1.7;
  margin: 0;
}

/* Read more */
body.blog #archive-container .read-more-container { padding: 14px 20px 22px; }
body.blog #archive-container .read-more-container a {
  font-family: 'Montserrat', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #1a1a1a;
  text-decoration: none;
  border-bottom: 1.5px solid #1a1a1a;
  padding-bottom: 2px;
  transition: opacity .2s;
}
body.blog #archive-container .read-more-container a:hover { opacity: .6; }

@media (max-width: 600px) {
  body.blog #archive-container.kadence-posts-list { padding: 32px 20px 60px; }
  body.blog .hr-blog-hero { padding: 48px 20px 40px; }
  body.blog .hr-blog-hero h1 { font-size: 2rem; }
}
/* Blog page nav/footer fixes */
body.blog #main.site-main { padding-top: 94px; }
body.blog .hr-footer-center p { color: rgba(255,255,255,.8) !important; }
body.blog .hr-footer-right p { color: rgba(255,255,255,.75) !important; }
body.blog .hr-footer-right a { color: rgba(255,255,255,.85) !important; }

/* AGENT PROFILE PAGES — listwithhicks.com/our-team/ */
.hr-agent-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px 80px; }
.hr-agent-hero { display: flex; align-items: flex-start; gap: 60px; padding: 60px 0 48px; }
.hr-agent-hero p:empty { display: none; }
.hr-agent-info p:empty { display: none; }
.hr-agent-photo { width: 360px; flex-shrink: 0; border-radius: 2px; object-fit: cover; }
.hr-agent-info { flex: 1; padding-top: 8px; }
.hr-agent-name {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 400; color: #1a1a1a; margin: 0 0 8px; line-height: 1.2;
}
.hr-agent-title {
  font-family: 'Montserrat', sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #888; margin-bottom: 20px;
  word-break: normal;
}
.hr-agent-creds { margin-bottom: 28px; }
.hr-agent-cred { font-family: 'Montserrat', sans-serif; font-size: .9rem; color: #444; line-height: 2.1; }
.hr-agent-ctarow { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.hr-agent-divider { border: none; border-top: 1px solid #e8e8e8; margin: 0 0 48px; }
.hr-agent-bio { max-width: 800px; padding-bottom: 48px; }
.hr-agent-bio h2 { font-family: 'Playfair Display', serif; font-size: 1.9rem; font-weight: 400; color: #1a1a1a; margin: 0 0 24px; }
.hr-agent-bio h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 400; color: #1a1a1a; margin: 36px 0 14px; }
.hr-agent-bio p { font-family: 'Montserrat', sans-serif; font-size: .95rem; font-weight: 300; color: #444; line-height: 1.8; margin-bottom: 18px; }
.hr-agent-bio strong { font-weight: 600; color: #1a1a1a; }
.hr-agent-listings { padding: 48px 0; border-top: 1px solid #e8e8e8; }
.hr-agent-listings h2 { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 400; color: #1a1a1a; margin: 0 0 24px; }
.hr-agent-no-listings p { font-family: 'Montserrat', sans-serif; font-size: .9rem; color: #888; font-style: italic; }
@media (max-width: 768px) {
  .hr-agent-hero { flex-direction: column; gap: 32px; padding: 40px 0 32px; }
  .hr-agent-photo { width: 100%; max-width: 300px; }
  .hr-agent-wrap { padding: 0 20px 60px; }
}

/* ============================================================
   AGENT PROFILE — LISTING CARDS
   listwithhicks.com/our-team/ individual agent pages
   ============================================================ */

.hr-listings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 8px;
}

.hr-listing-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: box-shadow .2s ease, transform .2s ease;
  display: flex;
  flex-direction: column;
}

.hr-listing-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.11);
  transform: translateY(-2px);
}

.hr-card-photo {
  display: block;
  width: 100%;
  height: 210px;
  background-size: cover;
  background-position: center;
  background-color: #f0f0ef;
  position: relative;
  text-decoration: none;
}

.hr-card-photo p { display: none; }

.hr-card-status-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  background: #2a7a4b;
  color: #fff;
}

.hr-card-status-pill.contract {
  background: #b8860b;
}

.hr-listing-card p:empty { display: none; }

.hr-card-info {
  padding: 18px 20px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hr-card-price {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 400;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.hr-card-address {
  font-family: 'Montserrat', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: #222;
  margin-bottom: 2px;
}

.hr-card-city {
  font-family: 'Montserrat', sans-serif;
  font-size: .82rem;
  font-weight: 400;
  color: #666;
  margin-bottom: 10px;
}

.hr-card-stats {
  font-family: 'Montserrat', sans-serif;
  font-size: .8rem;
  font-weight: 400;
  color: #888;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0f0f0;
}

.hr-card-cta {
  font-family: 'Montserrat', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1a1a1a;
  text-decoration: none;
  margin-top: auto;
}

.hr-card-cta:hover { color: #555; }

@media (max-width: 960px) {
  .hr-listings-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 600px) {
  .hr-listings-grid { grid-template-columns: 1fr; gap: 16px; }
  .hr-card-photo { height: 180px; }
}

/* Hide Kadence default footer on properties page */
body.page-id-423 #colophon,
body.page-id-423 .site-footer { display: none !important; }

/* Agent contact form — Jetpack labels visible on white form background */
.hr-contact-form-wrap .grunion-field-label {
  color: #222 !important;
  font-family: 'Montserrat', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Hide Kadence colophon on pages with custom hr-footer */
body.page-id-640 #colophon,
body.page-id-380 #colophon,
body.page-id-635 #colophon,
body.page-id-629 #colophon,
body.page-id-603 #colophon,
body.page-id-582 #colophon,
body.page-id-527 #colophon,
body.page-id-504 #colophon,
body.page-id-426 #colophon { display: none !important; }

/* Agent hero mobile — fix info width and center photo */
@media (max-width: 768px) {
  .hr-agent-hero { align-items: stretch; }
  .hr-agent-photo { margin: 0 auto; display: block; max-width: 260px; }
  .hr-agent-info { width: 100%; }
}

/* Our Team page — fix reversed agent section on mobile (grid-column not reset by template) */
@media (max-width: 768px) {
  .hr-agent-inner.reverse .hr-agent-photo { grid-column: auto !important; }
  .hr-agent-inner.reverse .hr-agent-content { grid-column: auto !important; }
}

/* ============================================================
   CONTRAST / READABILITY FIXES
   Added by site manager — text made invisible or hard to read by
   color mismatches (dark text on dark backgrounds, white-on-white
   buttons, wrong component classes reused in the wrong context).
   ============================================================ */

/* Fix: Location-page review quotes ("What My Clients Say" on
   Trussville/Moody/Leeds). WordPress auto-wraps blockquote text in a
   <p>, and standalone <cite> author lines, which then fall back to the
   global dark body-text color instead of the section's white text.
   Covers both container class variants found in use. */
.hr-trussville-reviews blockquote,
.hr-trussville-reviews blockquote p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-style: italic;
}
.hr-trussville-reviews cite {
  display: block;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4) !important;
  margin-top: 0.5rem;
}

/* Fix: Leeds page's review-cards wrapper uses a different class name
   (hr-trussville-review-cards) than the one the grid CSS targets
   (hr-trussville-reviews-grid), so the cards never got the 3-column
   layout and stacked instead. Alias it to the same layout. */
.hr-trussville-review-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 900px) {
  .hr-trussville-review-cards { grid-template-columns: 1fr; }
}

/* Fix: Footer text (copyright/license/address/phone/email/home link).
   On some pages each line is its own <p> (instead of one <p> with
   <br>), which lets the global dark body-text color win over the
   footer's intended light color; one link also used an inline
   style="color:inherit" that inherited that same broken value. Apply
   one site-wide rule so every page's footer matches. */
.hr-footer p,
.hr-footer a,
.hr-footer span,
.hr-footer small,
.hr-footer cite {
  color: rgba(255, 255, 255, 0.82) !important;
}
.hr-footer a:hover { color: #fff !important; }

/* Fix: .btn-outline is a white-text / transparent-background style
   meant only for dark section backgrounds. It was also used inside
   several light/white sections, making the button text invisible
   (white on white). Give it dark styling wherever it appears in a
   known light-background context. */
.hr-cta-panel.light .btn-outline,
.hr-agent-actions .btn-outline,
.hr-buying-content .btn-outline,
.hr-ph-actions .btn-outline,
.hr-hero-actions .btn-outline,
.hr-trussville-cta-actions .btn-outline {
  color: var(--black);
  border-color: rgba(10, 10, 10, 0.35);
}
.hr-cta-panel.light .btn-outline:hover,
.hr-agent-actions .btn-outline:hover,
.hr-buying-content .btn-outline:hover,
.hr-ph-actions .btn-outline:hover,
.hr-hero-actions .btn-outline:hover,
.hr-trussville-cta-actions .btn-outline:hover {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}

/* Fix: Moody's "Selling" section list uses the light-background list
   style (.hr-buying-list, dark text) instead of the dark-background
   variant (.hr-selling-list), making the bullet items invisible
   against the black panel. */
.hr-selling-content .hr-buying-list li {
  color: rgba(255, 255, 255, 0.7);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.hr-selling-content .hr-buying-list li::before {
  color: rgba(255, 255, 255, 0.3);
}

/* Fix (follow-up): hero action row's real class is .hr-ph-cta, not
   .hr-ph-actions as first assumed — same white-on-white bug. */
.hr-ph-cta .btn-outline {
  color: var(--black);
  border-color: rgba(10, 10, 10, 0.35);
}
.hr-ph-cta .btn-outline:hover {
  background: var(--black);
  color: #fff;
  border-color: var(--black);
}


/* ============================================================
   CONTRAST IMPROVEMENTS — muted labels & testimonial attribution
   Bumped from below-AA values (2.2–3.8:1) to meet 4.5:1 for normal
   text, while keeping the same quiet/understated label style.
   ============================================================ */
:root {
  --gray-mid: #6e6e68; /* was #999990 (~2.7:1 on white/off-white) */
}

.hr-agent-title,
.hr-contact-detail-label,
.hr-contact-social-label,
.hr-rv-hero-label,
.hr-rv-rating-label,
.hr-rv-section-label,
.hr-rv-card-tag {
  color: #6e6e6e !important;
}

.hr-testimonial-author,
.hr-team-card-role,
.hr-tr-author,
.hr-trussville-reviews cite {
  color: rgba(255, 255, 255, 0.62) !important;
}


/* Fix: section "eyebrow" labels on dark backgrounds (e.g. "SELLING IN
   LEEDS", "CLIENT REVIEWS") were rgba(255,255,255,0.4) — same below-AA
   pattern as the testimonial attribution text. Bump for consistency. */
.hr-testimonials-header .hr-label,
.hr-trussville-reviews-header .hr-label,
.hr-selling-content .hr-label,
.hr-cta-panel.dark .hr-label {
  color: rgba(255, 255, 255, 0.62) !important;
}


/* Fix (follow-up): the "Client Reviews" label sits directly inside
   .hr-trussville-reviews-inner, not a .hr-trussville-reviews-header
   wrapper as assumed, so it fell through to the global light-background
   label color while actually on the black reviews section. Use the
   section itself so it matches regardless of inner wrapper naming. */
.hr-trussville-reviews .hr-label {
  color: rgba(255, 255, 255, 0.62) !important;
}


/* Fix: Contact page defines its own .hr-label { color: #888 } in an
   embedded page style block, which loads after (and at equal
   specificity to) the global label-color change, so it kept winning.
   Scope an !important override to this page's wrapper — confirmed no
   dark-background sections exist here. */
.hr-contact-page .hr-label {
  color: #6e6e6e !important;
}


/* Fix: agent-page contact forms have a "Send a Message" label with an
   inline style="color:#888" (below AA on white). Only !important in a
   stylesheet can override an inline style. */
.hr-contact-form-wrap > p {
  color: #6e6e6e !important;
}


/* ============================================================
   NAV BAR — true-center the nav links
   .hr-nav uses display:flex + justify-content:space-between across
   [logo, nav-links, cta]. space-between only equalizes the two GAPS
   around the links — since the logo (narrow) and the phone+CTA button
   (much wider) aren't the same width, that shifts the links off true
   center toward the logo side.
   Only applied above ~1186px (measured: logo + gap + links content
   width + gap + cta, at this font/spacing) — true-centering below
   that would make the links wide enough to overlap the phone/CTA
   button. Narrower desktop widths (900–1200px) keep the original
   flex layout (off-center but non-overlapping); the existing
   max-width:900px rule still hides the links entirely below that,
   matching the mobile hamburger breakpoint.
   ============================================================ */
@media (min-width: 1420px) {
  .hr-nav-links {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    width: max-content;
    white-space: nowrap;
  }
}


/* ============================================================
   NAV BAR — extend the mobile hamburger nav through the gap
   The desktop nav (logo + centered links + phone/CTA) only has
   enough room from ~1420px up (see the true-center rule above).
   Between the old 768px mobile cutoff and 1420px there was no
   responsive handling at all, so link text wrapped mid-word and
   overlapped the phone number. Extend the existing hamburger/
   dropdown behavior (normally <768px) up through 1419px instead.
   ============================================================ */
@media (max-width: 1419px) and (min-width: 769px) {
  .hr-ham { display: flex !important; }
  .hr-nav { flex-wrap: wrap; position: relative; }
  .hr-nav-cta { order: 3; }
  .hr-nav-phone { display: none; }
  .hr-nav-links {
    display: none;
    position: static;
    transform: none;
    width: 100%;
    flex-direction: column;
    background: #fff;
    padding: 8px 0;
    order: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    list-style: none;
    margin: 0;
  }
  .hr-nav-links li a {
    display: block;
    padding: 13px 20px;
    font-size: 16px;
    color: #111;
    text-decoration: none;
    border-bottom: 1px solid #f0f0f0;
  }
  .hr-nav.hr-open .hr-nav-links { display: flex !important; }
}


/* ============================================================
   FIX: Duplicate footer on custom-built pages
   Every "Page" on this site (home, agent bios, location pages,
   contact, reviews, etc.) embeds its own custom .hr-footer in the
   page content, but the Kadence theme's default #colophon footer
   was only hidden for a hand-maintained list of specific page IDs —
   several pages (Amber, Whitney, Contact, Reviews, Leeds, Moody,
   Trussville, Home) were missing from that list and were rendering
   BOTH footers stacked on top of each other. Target every Page by
   its body class instead, which covers all pages automatically
   (blog posts/archive intentionally use the theme's own footer and
   don't get the "page" body class, so they're unaffected).
   ============================================================ */
body.page #colophon {
  display: none !important;
}