/* =========================================================================
   HAAKE LAW — LEGAL NEWS BLOG STYLES
   -------------------------------------------------------------------------
   Every selector here is namespaced under .hlg-blog so these rules CANNOT
   reach the home page or any existing page. This file only loads on blog
   views (see the enqueue snippet in INSTALL.txt). Uses the same brand
   variables already defined in the parent theme's style.css.
   ========================================================================= */

/* Blog-only width. We do NOT touch the global --hlg-max variable, so the
   home page keeps its exact 1280px layout. The blog gets its own wider cap. */
.hlg-blog {
  --hlg-blog-max: 1440px;      /* wider content area, blog only */
  --hlg-blog-reading: 760px;   /* comfortable reading column for article body */
}

/* -------------------------------------------------------------------------
   ARCHIVE / LISTING HERO  (Legal News landing)
   ------------------------------------------------------------------------- */
.hlg-blog .hlg-blog-hero {
  position: relative;
  background: var(--hlg-black);
  border-bottom: 2px solid var(--hlg-gold);
  overflow: hidden;
}

.hlg-blog .hlg-blog-hero-inner {
  max-width: var(--hlg-blog-max);
  margin: 0 auto;
  padding: 4.5rem 3rem 4rem;
  position: relative;
  z-index: 2;
}

.hlg-blog .hlg-blog-hero-eyebrow {
  font-family: var(--hlg-sans);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--hlg-gold-bright);
  font-weight: 700;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hlg-blog .hlg-blog-hero-eyebrow::before {
  content: '';
  width: 40px;
  height: 2px;
  background: var(--hlg-gold);
}

.hlg-blog .hlg-blog-hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 1.05;
  margin: 0 0 1.25rem;
  color: var(--hlg-cream);
}

.hlg-blog .hlg-blog-hero h1 .hlg-italic {
  font-style: italic;
  color: var(--hlg-gold-bright);
  font-weight: 500;
}

.hlg-blog .hlg-blog-hero-lede {
  font-family: var(--hlg-serif);
  font-size: 1.375rem;
  line-height: 1.6;
  color: var(--hlg-text-light-soft);
  max-width: 640px;
  margin: 0;
}

/* subtle gold texture so the hero isn't a flat black band */
.hlg-blog .hlg-blog-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 30%, rgba(212,168,87,0.10), transparent 45%),
    repeating-linear-gradient(90deg, transparent 0, transparent 38px, rgba(184,146,74,0.05) 38px, rgba(184,146,74,0.05) 40px);
  pointer-events: none;
  z-index: 1;
}

/* -------------------------------------------------------------------------
   POST GRID  (listing of posts)
   ------------------------------------------------------------------------- */
.hlg-blog .hlg-blog-wrap {
  max-width: var(--hlg-blog-max);
  margin: 0 auto;
  padding: 4rem 3rem 5rem;
}

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

.hlg-blog .hlg-post-card {
  display: flex;
  flex-direction: column;
  background: var(--hlg-black-soft);
  border: 1px solid var(--hlg-border-gold);
  text-decoration: none !important;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: hidden;
}

.hlg-blog .hlg-post-card:hover {
  transform: translateY(-4px);
  border-color: var(--hlg-border-gold-strong);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

/* Featured-image thumbnail. Falls back to a branded gradient if a post
   has no featured image set. */
.hlg-blog .hlg-post-thumb {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: var(--hlg-navy);
  background-image:
    linear-gradient(135deg, rgba(18,35,72,0.4), rgba(10,22,50,0.9)),
    radial-gradient(circle at 30% 70%, rgba(212,168,87,0.18), transparent 55%);
  position: relative;
}

.hlg-blog .hlg-post-thumb.has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45));
}

.hlg-blog .hlg-post-body {
  padding: 1.75rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hlg-blog .hlg-post-meta {
  font-family: var(--hlg-sans);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hlg-gold-bright);
  font-weight: 700;
  margin-bottom: 0.85rem;
}

.hlg-blog .hlg-post-card h2 {
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--hlg-cream);
  margin: 0 0 0.85rem;
}

.hlg-blog .hlg-post-card:hover h2 { color: var(--hlg-gold-bright); }

.hlg-blog .hlg-post-excerpt {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--hlg-text-light-soft);
  margin: 0 0 1.5rem;
}

.hlg-blog .hlg-post-readmore {
  margin-top: auto;
  font-family: var(--hlg-sans);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hlg-gold-bright);
}

.hlg-blog .hlg-post-card:hover .hlg-post-readmore::after {
  content: ' →';
}

/* -------------------------------------------------------------------------
   SINGLE POST
   ------------------------------------------------------------------------- */

/* Hero with featured image behind it. If no featured image, the branded
   black/gold background shows instead. */
.hlg-blog.hlg-single .hlg-post-hero {
  position: relative;
  border-bottom: 2px solid var(--hlg-gold);
  background: var(--hlg-black);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.hlg-blog.hlg-single .hlg-post-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.82) 100%);
  z-index: 1;
}

.hlg-blog.hlg-single .hlg-post-hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--hlg-blog-reading);
  margin: 0 auto;
  padding: 5rem 2rem 4rem;
  text-align: center;
}

.hlg-blog.hlg-single .hlg-post-hero-meta {
  font-family: var(--hlg-sans);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hlg-gold-bright);
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.hlg-blog.hlg-single .hlg-post-hero h1 {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  line-height: 1.1;
  color: var(--hlg-cream);
  margin: 0;
}

/* Article body — comfortable reading column, content from WP editor */
.hlg-blog.hlg-single .hlg-article {
  max-width: var(--hlg-blog-reading);
  margin: 0 auto;
  padding: 3.5rem 2rem 4rem;
}

.hlg-blog.hlg-single .hlg-article p,
.hlg-blog.hlg-single .hlg-article li {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--hlg-text-light-soft);
}

.hlg-blog.hlg-single .hlg-article h2,
.hlg-blog.hlg-single .hlg-article h3 {
  color: var(--hlg-cream);
  margin: 2.5rem 0 1rem;
}

.hlg-blog.hlg-single .hlg-article h2 { font-size: 1.9rem; }
.hlg-blog.hlg-single .hlg-article h3 { font-size: 1.45rem; }

.hlg-blog.hlg-single .hlg-article a {
  color: var(--hlg-gold-bright);
  text-decoration: underline;
  text-decoration-color: var(--hlg-border-gold);
}

.hlg-blog.hlg-single .hlg-article img {
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
  border: 1px solid var(--hlg-border-gold);
}

.hlg-blog.hlg-single .hlg-article blockquote {
  border-left: 3px solid var(--hlg-gold);
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-family: var(--hlg-serif);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--hlg-cream);
}

/* Back-to-news link */
.hlg-blog.hlg-single .hlg-back-link {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-family: var(--hlg-sans);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--hlg-gold-bright);
}

/* Post-end CTA — reuses brand button look without depending on home styles */
.hlg-blog.hlg-single .hlg-post-cta {
  max-width: var(--hlg-blog-reading);
  margin: 0 auto 4rem;
  padding: 2.5rem 2rem;
  border: 1px solid var(--hlg-border-gold);
  background: var(--hlg-black-soft);
  text-align: center;
}

.hlg-blog.hlg-single .hlg-post-cta h3 {
  color: var(--hlg-cream);
  margin: 0 0 0.75rem;
}

.hlg-blog.hlg-single .hlg-post-cta p {
  color: var(--hlg-text-light-soft);
  margin: 0 0 1.5rem;
}

.hlg-blog .hlg-blog-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.75rem;
  font-family: var(--hlg-sans);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none !important;
  background: var(--hlg-gold);
  color: var(--hlg-navy) !important;
  border: 2px solid var(--hlg-gold);
  transition: all 0.2s ease;
}

.hlg-blog .hlg-blog-btn:hover {
  background: var(--hlg-cream);
  border-color: var(--hlg-cream);
  color: var(--hlg-navy) !important;
}

/* Pagination */
.hlg-blog .hlg-pagination {
  max-width: var(--hlg-blog-max);
  margin: 0 auto;
  padding: 0 3rem 5rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.hlg-blog .hlg-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 0.75rem;
  font-family: var(--hlg-sans);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--hlg-cream);
  border: 1px solid var(--hlg-border-gold);
  text-decoration: none !important;
  transition: all 0.2s ease;
}

.hlg-blog .hlg-pagination .page-numbers.current,
.hlg-blog .hlg-pagination .page-numbers:hover {
  background: var(--hlg-gold);
  color: var(--hlg-navy);
  border-color: var(--hlg-gold);
}

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .hlg-blog .hlg-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hlg-blog .hlg-blog-hero-inner,
  .hlg-blog .hlg-blog-wrap { padding-left: 2rem; padding-right: 2rem; }
  .hlg-blog .hlg-pagination { padding-left: 2rem; padding-right: 2rem; }
}

@media (max-width: 640px) {
  .hlg-blog .hlg-blog-grid { grid-template-columns: 1fr; }
  .hlg-blog .hlg-blog-hero-inner { padding: 3rem 1.5rem 2.5rem; }
  .hlg-blog .hlg-blog-wrap { padding: 2.5rem 1.5rem 3.5rem; }
  .hlg-blog.hlg-single .hlg-post-hero-inner { padding: 3.5rem 1.5rem 2.5rem; }
  .hlg-blog.hlg-single .hlg-article { padding: 2.5rem 1.5rem 3rem; }
}