/* ==========================================================================
   FB Legal Consultancy — Custom Enhancements
   Loaded after procounsel.css. Uses the theme's existing CSS variables so
   colors/typography stay perfectly in sync with the rest of the site.
   Sections:
     1. Hero Slider fixes (arrows, lazy background loading, polish)
     2. Homepage Services — premium card redesign
     3. Blog Listing page
     4. Blog Detail page
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. HEADER / TOPBAR
-------------------------------------------------------------------------- */

/* The theme's .topbar-one__info__item is display:flex (block-level), which
   only ever looked right with a single item. Now that the bar carries
   phone + email + address, force them inline so they sit in one row. */
.topbar-one__info__item {
  display: inline-flex;
}
.topbar-one__info__item + .topbar-one__info__item {
  margin-left: 34px;
}
@media (max-width: 1399px) {
  .topbar-one__info__item + .topbar-one__info__item {
    margin-left: 24px;
  }
}
/* Address is the least critical item on a real phone-sized topbar */
@media (max-width: 1199px) {
  .topbar-one__info__item:nth-child(3) {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   1. HERO SLIDER (custom, dependency-free — replaces Owl Carousel)

   Owl Carousel 2 has a long-standing, effectively unfixable bug where
   combining loop:true with fade transitions occasionally drops the
   "active" class on the wrap-around from the last slide back to the
   first, producing a blank frame with broken dots/arrows. Rather than
   patch an unmaintained library, the hero uses a small dependency-free
   slider (see assets/js/custom.js): all slides are stacked in the same
   CSS grid cell and cross-fade via opacity, so there is no clone/loop
   logic that can desync.
-------------------------------------------------------------------------- */

.hero-slider {
  position: relative;
  overflow: hidden;
  outline: none;
}

.hero-slider__slides {
  display: grid;
}

.hero-slider__slide {
  grid-area: 1 / 1 / 2 / 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  transition: opacity 900ms ease, visibility 0s linear 900ms;
}
.hero-slider__slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
  transition: opacity 900ms ease, visibility 0s linear 0s;
}

/* Premium circular nav arrows */
.hero-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 56px;
  height: 56px;
  line-height: 54px;
  border-radius: 50%;
  background: rgba(var(--procounsel-white-rgb, 255, 255, 255), 0.1);
  border: 1px solid rgba(var(--procounsel-white-rgb, 255, 255, 255), 0.35);
  color: var(--procounsel-white, #fff);
  font-size: 18px;
  text-align: center;
  backdrop-filter: blur(6px);
  transition: all 300ms ease;
  padding: 0;
  cursor: pointer;
}
.hero-slider__arrow--prev { left: 30px; }
.hero-slider__arrow--next { right: 30px; }
.hero-slider__arrow:hover {
  background: var(--procounsel-base, #c7954a);
  border-color: var(--procounsel-base, #c7954a);
}
.hero-slider__arrow span { display: block; }
@media (max-width: 991px) {
  .hero-slider__arrow {
    width: 44px;
    height: 44px;
    line-height: 42px;
    font-size: 15px;
  }
  .hero-slider__arrow--prev { left: 14px; }
  .hero-slider__arrow--next { right: 14px; }
}
@media (max-width: 575px) {
  /* Arrows compete with thumbs on small touch screens — swipe remains available */
  .hero-slider__arrow { display: none; }
}

/* Dot pagination — same visual language as the original design */
.hero-slider__dots {
  position: absolute;
  left: 50px;
  top: 56%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1499px) {
  .hero-slider__dots { left: 40px; }
}
@media (max-width: 767px) {
  .hero-slider__dots {
    left: 0;
    right: 0;
    top: auto;
    bottom: 40px;
    margin: 0 auto;
    transform: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
}
.hero-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--procounsel-gray2, #ededed);
  border: none;
  outline: none;
  padding: 0;
  position: relative;
  margin: 22px 0;
  cursor: pointer;
  transition: all 300ms ease;
}
@media (max-width: 767px) {
  .hero-slider__dot { margin: 0 11px; }
}
.hero-slider__dot::after {
  content: "";
  position: absolute;
  left: -7.5px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--procounsel-base, #c7954a);
  transform: scale(0);
  transition: all 300ms ease;
}
.hero-slider__dot:hover,
.hero-slider__dot.active {
  background-color: var(--procounsel-base, #c7954a);
}
.hero-slider__dot:hover::after,
.hero-slider__dot.active::after {
  transform: scale(1);
}

/* Reduce motion for users who ask for it */
@media (prefers-reduced-motion: reduce) {
  .hero-slider__slide,
  .main-slider-one__bg,
  .main-slider-one__title,
  .main-slider-one__text,
  .main-slider-one__btn {
    transition-duration: 1ms !important;
  }
}


/* --------------------------------------------------------------------------
   1B. TEAM SPOTLIGHT — single-member centered profile
   Used on the homepage "Our Team" section and the Our Team page now that
   the firm is represented by one consultant.
-------------------------------------------------------------------------- */

.team-spotlight {
  display: flex;
  justify-content: center;
}

.team-spotlight__card {
  width: 100%;
  max-width: 420px;
  text-align: center;
  background: var(--procounsel-white, #fff);
  border: 1px solid var(--procounsel-border-color, #d9d9d9);
  border-radius: 16px;
  padding: 50px 40px 44px;
  box-shadow: 0 10px 34px rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.06);
}

.team-spotlight__card--wide {
  max-width: 560px;
  padding: 56px 60px 50px;
}
@media (max-width: 575px) {
  .team-spotlight__card--wide { padding: 44px 26px 40px; }
}

.team-spotlight__photo {
  width: 160px;
  height: 160px;
  margin: 0 auto 26px;
  border-radius: 50%;
  padding: 6px;
  border: 2px solid var(--procounsel-base, #c7954a);
}
.team-spotlight__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.team-spotlight__name {
  font-family: var(--procounsel-heading-font, "Marcellus", serif);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 6px;
}
.team-spotlight__name a {
  color: var(--procounsel-primary, #19223a);
  transition: color 300ms ease;
}
.team-spotlight__name a:hover {
  color: var(--procounsel-base, #c7954a);
}

.team-spotlight__role {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--procounsel-base, #c7954a);
  margin-bottom: 20px;
}

.team-spotlight__text {
  color: var(--procounsel-text, #838790);
  font-size: 15px;
  line-height: 26px;
  margin: 0 0 26px;
}

.team-spotlight__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 30px;
}
.team-spotlight__social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--procounsel-gray2, #ededed);
  color: var(--procounsel-primary, #19223a);
  font-size: 14px;
  transition: all 300ms ease;
}
.team-spotlight__social a:hover {
  background: var(--procounsel-base, #c7954a);
  color: var(--procounsel-white, #fff);
}


/* --------------------------------------------------------------------------
   2. HOMEPAGE SERVICES — PREMIUM CARDS
-------------------------------------------------------------------------- */

.services-premium {
  background-color: var(--procounsel-white, #fff);
  padding: 70px 0 80px;
  position: relative;
}
@media (max-width: 991px) {
  .services-premium { padding: 50px 0 60px; }
}

.services-premium__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}
@media (max-width: 991px) {
  .services-premium__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .services-premium__grid { grid-template-columns: 1fr; }
}

.service-card {
  background: var(--procounsel-white, #fff);
  border: 1px solid var(--procounsel-border-color, #d9d9d9);
  border-radius: 12px;
  padding: 44px 34px 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  text-align: center;
  box-shadow: 0 4px 18px rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.05);
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.14);
  border-color: transparent;
}

.service-card__icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--procounsel-base-rgb, 199, 149, 74), 0.1);
  color: var(--procounsel-base, #c7954a);
  font-size: 28px;
  margin-bottom: 26px;
  transition: all 300ms ease;
}
.service-card:hover .service-card__icon {
  background: var(--procounsel-primary, #19223a);
  color: var(--procounsel-white, #fff);
  transform: rotate(-8deg) scale(1.08);
}

.service-card__title {
  font-family: var(--procounsel-heading-font, "Marcellus", serif);
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
  color: var(--procounsel-primary, #19223a);
  margin: 0 0 14px;
}
.service-card__title a {
  color: inherit;
  transition: color 300ms ease;
}
.service-card:hover .service-card__title a {
  color: var(--procounsel-base, #c7954a);
}

.service-card__text {
  color: var(--procounsel-text, #838790);
  font-size: 15px;
  line-height: 26px;
  margin: 0 0 28px;
  flex-grow: 1;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--procounsel-primary, #19223a);
  border-bottom: 2px solid var(--procounsel-border-color, #d9d9d9);
  padding-bottom: 6px;
  transition: all 300ms ease;
}
.service-card__link i {
  transition: transform 300ms ease;
  font-size: 12px;
}
.service-card:hover .service-card__link {
  color: var(--procounsel-base, #c7954a);
  border-color: var(--procounsel-base, #c7954a);
}
.service-card:hover .service-card__link i {
  transform: translateX(5px);
}

.services-premium__footer {
  text-align: center;
  margin-top: 50px;
}


/* --------------------------------------------------------------------------
   3. BLOG LISTING
-------------------------------------------------------------------------- */

.blog-listing {
  background-color: var(--procounsel-white, #fff);
  padding: 70px 0 80px;
}
@media (max-width: 991px) {
  .blog-listing { padding: 50px 0 60px; }
}

.blog-listing__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 20px;
}
@media (max-width: 991px) {
  .blog-listing__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 767px) {
  .blog-listing__grid { grid-template-columns: 1fr; }
}

.blog-post-card {
  background: var(--procounsel-white, #fff);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 6px 24px rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.07);
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.blog-post-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 50px rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.16);
}

.blog-post-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.blog-post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.blog-post-card:hover .blog-post-card__thumb img {
  transform: scale(1.08);
}
.blog-post-card__category {
  position: absolute;
  top: 18px;
  left: 18px;
  background: var(--procounsel-base, #c7954a);
  color: var(--procounsel-white, #fff);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 30px;
}

.blog-post-card__body {
  padding: 30px 30px 32px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-post-card__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13px;
  color: var(--procounsel-text, #838790);
  margin-bottom: 16px;
}
.blog-post-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.blog-post-card__meta i {
  color: var(--procounsel-base, #c7954a);
}

.blog-post-card__title {
  font-family: var(--procounsel-heading-font, "Marcellus", serif);
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
  color: var(--procounsel-primary, #19223a);
  margin: 0 0 14px;
}
.blog-post-card__title a {
  color: inherit;
  transition: color 300ms ease;
}
.blog-post-card:hover .blog-post-card__title a {
  color: var(--procounsel-base, #c7954a);
}

.blog-post-card__excerpt {
  color: var(--procounsel-text, #838790);
  font-size: 15px;
  line-height: 26px;
  margin: 0 0 26px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-post-card__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--procounsel-primary, #19223a);
  border-bottom: 2px solid var(--procounsel-border-color, #d9d9d9);
  padding-bottom: 6px;
  transition: all 300ms ease;
}
.blog-post-card__link i {
  transition: transform 300ms ease;
  font-size: 12px;
}
.blog-post-card:hover .blog-post-card__link {
  color: var(--procounsel-base, #c7954a);
  border-color: var(--procounsel-base, #c7954a);
}
.blog-post-card:hover .blog-post-card__link i {
  transform: translateX(5px);
}


/* --------------------------------------------------------------------------
   4. BLOG DETAIL PAGE
-------------------------------------------------------------------------- */

.blog-hero {
  position: relative;
  padding: 260px 0 90px;
  background-color: var(--procounsel-primary, #19223a);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.blog-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--procounsel-primary-rgb, 25,34,58), 0.55) 0%, rgba(var(--procounsel-primary-rgb, 25,34,58), 0.92) 100%);
}
@media (max-width: 767px) {
  .blog-hero { padding: 200px 0 70px; }
}
.blog-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 860px;
}
.blog-hero__category {
  display: inline-block;
  background: var(--procounsel-base, #c7954a);
  color: var(--procounsel-white, #fff);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 30px;
  margin-bottom: 22px;
}
.blog-hero__title {
  font-family: var(--procounsel-heading-font, "Marcellus", serif);
  color: var(--procounsel-white, #fff);
  font-size: 46px;
  line-height: 56px;
  font-weight: 600;
  margin: 0 0 26px;
}
@media (max-width: 767px) {
  .blog-hero__title { font-size: 30px; line-height: 38px; }
}
.blog-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  color: rgba(var(--procounsel-white-rgb, 255,255,255), 0.85);
  font-size: 14px;
}
.blog-hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.blog-hero__meta i {
  color: var(--procounsel-base, #c7954a);
}

.blog-detail {
  padding: 90px 0 120px;
  background: var(--procounsel-white, #fff);
}
@media (max-width: 767px) {
  .blog-detail { padding: 60px 0 80px; }
}

/* Sidebar removed — this keeps the article body and image at a
   comfortable, premium reading width (matching how Semrush and similar
   publishers lay out full-width article pages) instead of stretching
   paragraph text edge-to-edge across a very wide screen. It's still
   dramatically wider than the old sidebar-squeezed column. */
.blog-detail__inner {
  max-width: 980px;
  margin: 0 auto;
}

.blog-detail__content {
  color: var(--procounsel-text-dark, #7782A0);
  font-size: 18px;
  line-height: 1.8;
}
.blog-detail__content h2,
.blog-detail__content h3 {
  font-family: var(--procounsel-heading-font, "Marcellus", serif);
  color: var(--procounsel-primary, #19223a);
  font-weight: 600;
  margin: 48px 0 20px;
}
.blog-detail__content h2 { font-size: 32px; line-height: 1.35; }
.blog-detail__content h3 { font-size: 24px; line-height: 1.4; }
.blog-detail__content p { margin: 0 0 26px; }
.blog-detail__content ul {
  margin: 0 0 28px;
  padding-left: 20px;
}
.blog-detail__content ul li {
  margin-bottom: 12px;
  padding-left: 8px;
}
.blog-detail__content blockquote {
  border-left: 4px solid var(--procounsel-base, #c7954a);
  background: var(--procounsel-gray, #f1fcf9);
  padding: 26px 30px;
  border-radius: 0 10px 10px 0;
  font-family: var(--procounsel-heading-font, "Marcellus", serif);
  font-size: 19px;
  line-height: 30px;
  color: var(--procounsel-primary, #19223a);
  margin: 30px 0;
}
.blog-detail__image {
  border-radius: 12px;
  overflow: hidden;
  margin: 30px 0;
  aspect-ratio: 16 / 9;
}
.blog-detail__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tag + share row */
.blog-detail__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 48px;
  padding-top: 30px;
  border-top: 1px solid var(--procounsel-border-color, #d9d9d9);
}
.blog-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.blog-detail__tags a {
  font-size: 13px;
  font-weight: 500;
  color: var(--procounsel-primary, #19223a);
  background: var(--procounsel-gray2, #ededed);
  padding: 7px 16px;
  border-radius: 30px;
  transition: all 300ms ease;
}
.blog-detail__tags a:hover {
  background: var(--procounsel-base, #c7954a);
  color: var(--procounsel-white, #fff);
}
.blog-detail__share {
  display: flex;
  align-items: center;
  gap: 12px;
}
.blog-detail__share span {
  font-size: 13px;
  font-weight: 600;
  color: var(--procounsel-primary, #19223a);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.blog-detail__share a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--procounsel-gray2, #ededed);
  color: var(--procounsel-primary, #19223a);
  font-size: 14px;
  transition: all 300ms ease;
}
.blog-detail__share a:hover {
  background: var(--procounsel-base, #c7954a);
  color: var(--procounsel-white, #fff);
}

/* Author box */
.author-box {
  display: flex;
  gap: 24px;
  align-items: center;
  background: var(--procounsel-gray, #f1fcf9);
  border-radius: 12px;
  padding: 30px;
  margin-top: 44px;
}
@media (max-width: 575px) {
  .author-box { flex-direction: column; text-align: center; }
}
.author-box__avatar img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
}
.author-box__name {
  font-family: var(--procounsel-heading-font, "Marcellus", serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--procounsel-primary, #19223a);
  margin: 0 0 4px;
}
.author-box__role {
  font-size: 13px;
  color: var(--procounsel-base, #c7954a);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 10px;
}
.author-box__text {
  font-size: 14px;
  line-height: 24px;
  color: var(--procounsel-text, #838790);
  margin: 0;
}

/* Sidebar */
.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
@media (max-width: 991px) {
  .blog-sidebar { margin-top: 60px; }
}
.sidebar-widget {
  background: var(--procounsel-white, #fff);
  border: 1px solid var(--procounsel-border-color, #d9d9d9);
  border-radius: 12px;
  padding: 30px;
}
.sidebar-widget__title {
  font-family: var(--procounsel-heading-font, "Marcellus", serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--procounsel-primary, #19223a);
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--procounsel-border-color, #d9d9d9);
}
.sidebar-widget__search {
  position: relative;
}
.sidebar-widget__search input {
  width: 100%;
  border: 1px solid var(--procounsel-border-color, #d9d9d9);
  border-radius: 8px;
  padding: 13px 46px 13px 16px;
  font-size: 14px;
  color: var(--procounsel-primary, #19223a);
  outline: none;
}
.sidebar-widget__search button {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: var(--procounsel-base, #c7954a);
}
.sidebar-widget__categories li {
  list-style: none;
}
.sidebar-widget__categories li + li { margin-top: 4px; }
.sidebar-widget__categories a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  font-size: 14px;
  color: var(--procounsel-text-dark, #7782A0);
  border-bottom: 1px dashed var(--procounsel-border-color, #d9d9d9);
  transition: color 300ms ease;
}
.sidebar-widget__categories li:last-child a { border-bottom: none; }
.sidebar-widget__categories a:hover { color: var(--procounsel-base, #c7954a); }
.sidebar-widget__categories a span {
  font-size: 12px;
  color: var(--procounsel-text, #838790);
}

.sidebar-post {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.sidebar-post + .sidebar-post {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--procounsel-border-color, #d9d9d9);
}
.sidebar-post__thumb {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-post__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sidebar-post__title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--procounsel-primary, #19223a);
  margin: 0 0 6px;
}
.sidebar-post__title a { color: inherit; transition: color 300ms ease; }
.sidebar-post__title a:hover { color: var(--procounsel-base, #c7954a); }
.sidebar-post__date {
  font-size: 12px;
  color: var(--procounsel-text, #838790);
}

.sidebar-widget__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sidebar-widget__tags a {
  font-size: 13px;
  font-weight: 500;
  color: var(--procounsel-primary, #19223a);
  background: var(--procounsel-gray2, #ededed);
  padding: 7px 16px;
  border-radius: 30px;
  transition: all 300ms ease;
}
.sidebar-widget__tags a:hover {
  background: var(--procounsel-base, #c7954a);
  color: var(--procounsel-white, #fff);
}

.sidebar-widget--cta {
  background: var(--procounsel-primary, #19223a);
  border-color: var(--procounsel-primary, #19223a);
  text-align: center;
}
.sidebar-widget--cta .sidebar-widget__title {
  color: var(--procounsel-white, #fff);
  border-color: rgba(var(--procounsel-white-rgb, 255,255,255), 0.15);
}
.sidebar-widget--cta p {
  color: rgba(var(--procounsel-white-rgb, 255,255,255), 0.75);
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 20px;
}

/* Related posts */
.related-posts {
  margin-top: 70px;
}
.related-posts__title {
  font-family: var(--procounsel-heading-font, "Marcellus", serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--procounsel-primary, #19223a);
  margin: 0 0 34px;
}
.related-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 991px) {
  .related-posts__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .related-posts__grid { grid-template-columns: 1fr; }
}

/* Breadcrumb spacing tweak so it reads well over the darker blog hero */
.blog-hero .procounsel-breadcrumb {
  position: relative;
  margin-top: 18px;
}


/* --------------------------------------------------------------------------
   5. TEAM SPOTLIGHT (our-team.php — single-consultant layout)
-------------------------------------------------------------------------- */

.team-spotlight {
  background: var(--procounsel-white, #fff);
}

.team-spotlight__image {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.14);
}
.team-spotlight__image img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
@media (max-width: 991px) {
  .team-spotlight__image { margin-bottom: 50px; }
}

.team-spotlight__social {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  background: linear-gradient(0deg, rgba(var(--procounsel-primary-rgb, 25,34,58), 0.85) 0%, rgba(var(--procounsel-primary-rgb, 25,34,58), 0) 100%);
}
.team-spotlight__social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--procounsel-white-rgb, 255,255,255), 0.15);
  border: 1px solid rgba(var(--procounsel-white-rgb, 255,255,255), 0.4);
  color: var(--procounsel-white, #fff);
  backdrop-filter: blur(4px);
  transition: all 300ms ease;
}
.team-spotlight__social a:hover {
  background: var(--procounsel-base, #c7954a);
  border-color: var(--procounsel-base, #c7954a);
}

.team-spotlight__content {
  padding-left: 10px;
}
@media (max-width: 991px) {
  .team-spotlight__content { padding-left: 0; }
}
.team-spotlight__tagline {
  display: inline-block;
  color: var(--procounsel-base, #c7954a);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.team-spotlight__name {
  font-family: var(--procounsel-heading-font, "Marcellus", serif);
  font-size: 42px;
  line-height: 50px;
  font-weight: 600;
  color: var(--procounsel-primary, #19223a);
  margin: 0 0 22px;
}
@media (max-width: 767px) {
  .team-spotlight__name { font-size: 32px; line-height: 40px; }
}
.team-spotlight__bio {
  color: var(--procounsel-text, #838790);
  font-size: 16px;
  line-height: 28px;
  margin: 0 0 30px;
}
.team-spotlight__meta {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.team-spotlight__meta li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--procounsel-primary, #19223a);
  font-weight: 500;
}
.team-spotlight__meta i {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--procounsel-base-rgb, 199, 149, 74), 0.1);
  color: var(--procounsel-base, #c7954a);
  font-size: 16px;
}


/* --------------------------------------------------------------------------
   5. ABOUT — homepage highlights/stats + About Us page
-------------------------------------------------------------------------- */

.about-one__highlights {
  margin: 0 0 28px;
}
.about-one__highlights li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--procounsel-primary, #19223a);
  font-weight: 500;
  margin-bottom: 10px;
}
.about-one__highlights i {
  color: var(--procounsel-base, #c7954a);
  font-size: 15px;
}

.about-one__stats {
  display: flex;
  gap: 34px;
  margin-bottom: 34px;
  padding: 26px 0;
  border-top: 1px solid var(--procounsel-border-color, #d9d9d9);
  border-bottom: 1px solid var(--procounsel-border-color, #d9d9d9);
}
.about-one__stats--flush { margin-top: 4px; }
@media (max-width: 575px) {
  .about-one__stats { gap: 22px; flex-wrap: wrap; }
}
.about-one__stats__item {
  display: flex;
  flex-direction: column;
}
.about-one__stats__num {
  font-family: var(--procounsel-heading-font, "Marcellus", serif);
  font-size: 34px;
  line-height: 1;
  color: var(--procounsel-primary, #19223a);
  font-weight: 600;
}
.about-one__stats__num small {
  font-size: 20px;
  color: var(--procounsel-base, #c7954a);
}
.about-one__stats__label {
  font-size: 13px;
  color: var(--procounsel-text, #838790);
  margin-top: 6px;
}

.about-page {
  padding: 70px 0 60px;
  background: var(--procounsel-white, #fff);
}
@media (max-width: 991px) {
  .about-page { padding: 50px 0 40px; }
}
.about-page__text {
  color: var(--procounsel-text, #838790);
  font-size: 15px;
  line-height: 27px;
  margin-bottom: 20px;
}
.about-page__image {
  border-radius: 16px;
  overflow: hidden;
}
.about-page__image img {
  width: 100%;
  display: block;
}
@media (max-width: 991px) {
  .about-page__image { margin-top: 40px; }
}

.about-values {
  padding: 0 0 70px;
  background: var(--procounsel-white, #fff);
}
@media (max-width: 991px) {
  .about-values { padding: 0 0 50px; }
}
.about-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 40px;
}
@media (max-width: 991px) {
  .about-values__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .about-values__grid { grid-template-columns: 1fr; }
}
.about-values__card {
  background: var(--procounsel-gray, #f1fcf9);
  border-radius: 12px;
  padding: 38px 28px;
  text-align: center;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.about-values__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.1);
}
.about-values__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--procounsel-white, #fff);
  color: var(--procounsel-base, #c7954a);
  font-size: 24px;
}
.about-values__card h4 {
  font-family: var(--procounsel-heading-font, "Marcellus", serif);
  font-size: 19px;
  color: var(--procounsel-primary, #19223a);
  margin: 0 0 12px;
}
.about-values__card p {
  font-size: 14px;
  line-height: 23px;
  color: var(--procounsel-text, #838790);
  margin: 0;
}

.cta-banner {
  background: var(--procounsel-primary, #19223a);
  padding: 60px 0;
}
.cta-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-banner__inner h3 {
  font-family: var(--procounsel-heading-font, "Marcellus", serif);
  color: var(--procounsel-white, #fff);
  font-size: 26px;
  margin: 0 0 6px;
}
.cta-banner__inner p {
  color: rgba(var(--procounsel-white-rgb, 255, 255, 255), 0.7);
  margin: 0;
  font-size: 15px;
}


/* --------------------------------------------------------------------------
   6. CONTACT PAGE — quick-contact cards, map frame, form alerts
-------------------------------------------------------------------------- */

/* These two theme decorative elements (a faded background image + a
   gray gradient patch) sit on the right side of the contact info box
   and were bleeding into the email address text, making it look like
   it sat on an inconsistent gray/white background. Removing them
   entirely keeps the info box a clean, solid white. */
.contact-one__bg,
.contact-one__overlay {
  display: none;
}

.quick-contact {
  padding: 60px 0 0;
  background: var(--procounsel-white, #fff);
}
.quick-contact__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 991px) {
  .quick-contact__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .quick-contact__grid { grid-template-columns: 1fr; }
}
.quick-contact__card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--procounsel-gray, #f1fcf9);
  border-radius: 12px;
  padding: 24px 22px;
  transition: all 300ms ease;
}
a.quick-contact__card:hover {
  background: var(--procounsel-primary, #19223a);
  transform: translateY(-4px);
}
a.quick-contact__card:hover .quick-contact__icon {
  background: var(--procounsel-base, #c7954a);
  color: var(--procounsel-white, #fff);
}
a.quick-contact__card:hover .quick-contact__label,
a.quick-contact__card:hover .quick-contact__value {
  color: var(--procounsel-white, #fff);
}
.quick-contact__icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--procounsel-white, #fff);
  color: var(--procounsel-base, #c7954a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 300ms ease;
}
.quick-contact__label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--procounsel-text, #838790);
  transition: color 300ms ease;
}
.quick-contact__value {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--procounsel-primary, #19223a);
  margin-top: 3px;
  transition: color 300ms ease;
  word-break: break-word;
}

.map-section {
  padding: 50px 0 70px;
  background: var(--procounsel-white, #fff);
}
.map-frame {
  border-radius: 16px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 20px 50px rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.1);
}
.map-frame iframe {
  display: block;
  filter: grayscale(15%);
}

.form-alert {
  padding: 16px 20px;
  border-radius: 10px;
  font-size: 14px;
  margin-bottom: 20px;
}
.form-alert--success {
  background: rgba(46, 160, 67, 0.12);
  color: #1e7a34;
  border: 1px solid rgba(46, 160, 67, 0.3);
}
.form-alert--error {
  background: rgba(220, 53, 69, 0.1);
  color: #b02a37;
  border: 1px solid rgba(220, 53, 69, 0.3);
}


/* --------------------------------------------------------------------------
   7. DOCUMENT LIBRARY (Laws / PDF listing)
-------------------------------------------------------------------------- */

.doc-library {
  padding: 70px 0 80px;
  background: var(--procounsel-white, #fff);
}
@media (max-width: 991px) {
  .doc-library { padding: 50px 0 60px; }
}
.doc-library__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 40px;
}
@media (max-width: 991px) {
  .doc-library__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .doc-library__grid { grid-template-columns: 1fr; }
}
.doc-card {
  display: block;
  background: var(--procounsel-white, #fff);
  border: 1px solid var(--procounsel-border-color, #d9d9d9);
  border-radius: 12px;
  padding: 30px 26px;
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.doc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.1);
  border-color: transparent;
}
.doc-card__icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--procounsel-base-rgb, 199, 149, 74), 0.1);
  color: var(--procounsel-base, #c7954a);
  font-size: 22px;
  margin: 0 auto 20px;
}
.doc-card__title {
  font-size: 17px;
  line-height: 30px;
  font-weight: 600;
  color: var(--procounsel-primary, #19223a);
  margin: 0 0 18px;
  min-height: 60px;
}
.doc-card__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--procounsel-text, #838790);
  padding-top: 16px;
  border-top: 1px solid var(--procounsel-border-color, #d9d9d9);
}
.doc-card__link {
  color: var(--procounsel-base, #c7954a);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}


/* --------------------------------------------------------------------------
   8. HEADER RESTRUCTURE — solid header above the slider (not floating on
   top of it), matching the dovecont.com reference pattern. This is also
   what fixes the "logo not visible" issue: a navy logo on a transparent
   header sitting over a dark hero image (or on a navy sticky header) had
   almost no contrast. A solid white header guarantees contrast always.
-------------------------------------------------------------------------- */

/* Topbar becomes an explicit solid navy strip (it had no background of
   its own before — it relied on sitting over the dark hero). */
.topbar-one {
  background-color: transparent;
  border-bottom: none;
  position: relative;
  z-index: 1;
}
/* Full-bleed navy background via a pseudo-element instead of negative
   margins on the real element. The previous negative-margin approach
   physically moved the topbar's content left of its container, which
   got clipped on some viewports (cutting off the start of the phone
   number). This paints the color behind the content instead, so the
   actual content never moves and can never be clipped. */
.topbar-one::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: var(--procounsel-primary, #19223a);
  z-index: -1;
}

/* Main header: take it out of "float over the hero" mode entirely.
   IMPORTANT: the theme JS clones this exact element (same classes) for
   the scrolled/sticky state and relies on that clone staying
   position:fixed. Targeting plain .main-header would also restyle the
   clone and break it out of fixed positioning — turning it into an
   invisible in-flow spacer that pushes the whole page down (this was
   the cause of the big blank gap under the header). :not() excludes it. */
.main-header:not(.sticky-header--cloned) {
  position: relative;
  left: auto;
  top: auto;
  background-color: var(--procounsel-white, #fff);
  box-shadow: 0 2px 24px rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.08);
}
.main-header__inner {
  border-bottom: none;
}

/* Nav links, call-anytime text, and the mobile toggle were all styled
   white for a dark/transparent header — switch them to navy so they're
   readable on the new white background. */
.main-menu .main-menu__list > li > a {
  color: var(--procounsel-primary, #19223a);
}
.main-menu .main-menu__list > li.current > a,
.main-menu .main-menu__list > li:hover > a {
  color: var(--procounsel-base, #c7954a);
}
.main-header__info__text {
  color: var(--procounsel-primary, #19223a);
}
.main-header__info a {
  color: var(--procounsel-primary, #19223a);
}
.mobile-nav__btn span {
  background-color: var(--procounsel-primary, #19223a);
}

/* Center the nav menu between the logo and the right-side call button,
   instead of it sitting flush-left right after the logo. */
.main-header__nav {
  margin-left: auto;
  margin-right: auto;
}

/* Keep the logo visible in the scrolled/sticky state too — the theme's
   cloned sticky header defaults to a navy background, which would hide
   a navy logo all over again. */
.sticky-header--cloned {
  background-color: var(--procounsel-white, #fff);
  box-shadow: 0 2px 24px rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.12);
}

/* The hero's large top padding existed to leave clearance under the old
   floating header. With a normal in-flow header, that space is real
   layout height now, so the slider no longer needs to reserve it. */
.main-slider-one__item {
  padding-top: 70px;
}
@media (max-width: 991px) {
  .main-slider-one__item {
    padding-top: 50px;
  }
}


/* --------------------------------------------------------------------------
   9. CONTACT FORM RESULT MODAL — success/error popup after submission
-------------------------------------------------------------------------- */

.form-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
}
.form-modal.active {
  opacity: 1;
  visibility: visible;
}
.form-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--procounsel-primary-rgb, 25, 34, 58), 0.65);
}
.form-modal__box {
  position: relative;
  background: var(--procounsel-white, #fff);
  border-radius: 16px;
  padding: 46px 40px 40px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
  transform: translateY(16px);
  transition: transform 300ms ease;
}
.form-modal.active .form-modal__box {
  transform: translateY(0);
}
.form-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--procounsel-gray2, #ededed);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: var(--procounsel-primary, #19223a);
  cursor: pointer;
  transition: background 300ms ease;
}
.form-modal__close:hover {
  background: var(--procounsel-base, #c7954a);
  color: var(--procounsel-white, #fff);
}
.form-modal__icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.form-modal__icon--success {
  background: rgba(46, 160, 67, 0.12);
  color: #1e7a34;
}
.form-modal__icon--error {
  background: rgba(220, 53, 69, 0.1);
  color: #b02a37;
}
.form-modal.form-modal--success .form-modal__icon--success,
.form-modal.form-modal--error .form-modal__icon--error {
  display: flex;
}
.form-modal__title {
  font-family: var(--procounsel-heading-font, "Marcellus", serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--procounsel-primary, #19223a);
  margin: 0 0 12px;
}
.form-modal__text {
  color: var(--procounsel-text, #838790);
  font-size: 15px;
  line-height: 24px;
  margin: 0 0 28px;
}

/* Footer Links / Our Services now stay 2-column even on mobile (see
   footer.php) — slightly smaller text there keeps longer service names
   from wrapping too aggressively in the narrower columns. */
@media (max-width: 767px) {
  .footer-widget__links li {
    font-size: 14px;
    line-height: 22px;
  }
}


/* --------------------------------------------------------------------------
   10. HOMEPAGE ABOUT — image spacing fix
   The theme's default .about-one__image pulls the image right with a
   negative margin (designed for a different image treatment), which
   crowded it right up against the content box next to it. This gives
   it proper breathing room on the left and centers it vertically
   against the taller content column instead of sitting flush at top.
-------------------------------------------------------------------------- */
.about-one .row {
  align-items: center;
}
.about-one__image {
  text-align: left;
  margin-right: 0;
}


/* --------------------------------------------------------------------------
   11. CONTACT PAGE — remove the theme's intentional negative-margin
   overlap between the info box and the form. It was designed as a
   subtle "layered card" effect, but with our content lengths (longer
   email/address text) it was overlapping far enough to hide the email
   address behind the form box. Removing it entirely is more robust
   than trying to fine-tune a pixel offset that depends on exact text
   length.
-------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .contact-one__content {
    margin-left: 0;
    margin-right: 0;
  }
}