/*!
Theme Name: Federal Wire Fraud
Theme URI: https://federalwirefraud.com/
Author: prodeveloper2
Author URI: https://profiles.wordpress.org/prodeveloper2/
Description: A modern, fast and fully responsive WordPress theme for federal criminal defense practices, built for Boles Holmes White, LLC. It provides hierarchical practice/topic pages with automatic sub-page navigation, per-page FAQ schema, a sticky intake form, editable attorney profiles and a blog. Colors, fonts, logo and header/footer content are managed from the WordPress Customizer, and the theme ships with self-hosted fonts and lightweight compiled CSS for maximum speed and privacy.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: alabamaoutside
Tags: custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
*/

/* Accessibility helper (from _s) */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #eee;
	clip: auto !important;
	clip-path: none;
	color: #444;
	display: block;
	font-size: 1em;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* ---------------------------------------------------------------------------
   Blog post body styling.
   The compiled Tailwind does not include the Typography plugin, and Tailwind's
   preflight resets element margins. These rules give the post content (.prose,
   used in single.php) readable spacing for headings, paragraphs, lists, etc.
--------------------------------------------------------------------------- */
.prose > * + * { margin-top: 1.25rem; }
.prose p { margin-bottom: 1.25rem; line-height: 1.8; }
.prose h2 { font-size: 1.6rem; font-weight: 700; margin: 2.25rem 0 1rem; line-height: 1.3; }
.prose h3 { font-size: 1.3rem; font-weight: 700; margin: 1.75rem 0 .75rem; line-height: 1.35; }
.prose h4 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.prose ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.prose ol { list-style: decimal; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.prose li { margin-bottom: .5rem; }
.prose a { color: var(--color-brand-gold); text-decoration: underline; }
.prose a:hover { color: var(--color-brand-navy); }
.prose strong { font-weight: 700; color: #1f2937; }
.prose em { font-style: italic; }
.prose blockquote {
	border-left: 4px solid var(--color-brand-gold);
	padding-left: 1rem;
	font-style: italic;
	color: #4b5563;
	margin: 1.5rem 0;
}
.prose img { max-width: 100%; height: auto; margin: 1.5rem 0; border-radius: .375rem; }
.prose h1:first-child, .prose h2:first-child, .prose p:first-child { margin-top: 0; }

/* ---------------------------------------------------------------------------
   Practice Area page WYSIWYG content (templates/practice-area.php).
   ACF wysiwyg fields (pa_intro_body, section_body) store rich text with
   plain h4 / ul / blockquote tags; these rules give that markup the same
   "sub-heading", "bullet list" and "highlighted callout box" look the
   individual practice-area pages used to hand-code.
--------------------------------------------------------------------------- */
.pa-intro-copy p,
.pa-section-body p { margin-bottom: 1rem; }
.pa-intro-copy p:last-child,
.pa-section-body p:last-child { margin-bottom: 0; }
.pa-section-body h4 {
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--color-brand-navy);
	margin: 1.25rem 0 .5rem;
}
.pa-section-body h4:first-child { margin-top: 0; }
.pa-section-body ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 1rem; }
.pa-section-body li { margin-bottom: .4rem; font-size: .875rem; color: #374151; }
.pa-intro-copy blockquote,
.pa-section-body blockquote {
	background: #f8fafc;
	border-left: 4px solid var(--color-brand-gold);
	border-radius: 0 .25rem .25rem 0;
	padding: 1rem;
	margin: 1rem 0 0;
}
.pa-intro-copy blockquote p,
.pa-section-body blockquote p {
	margin-bottom: 0;
	color: var(--color-brand-navy);
	font-weight: 600;
}

/* =========================================================================
 * HOME PAGE RESPONSIVE FIXES (mobile / tablet)
 * Plain CSS (this file loads after the purged global.css, so ID-scoped rules
 * win without depending on Tailwind utilities being present in the build).
 * ====================================================================== */

/* New elements are desktop-hidden by default. */
.hero-bg-mobile { display: none; }
.featured-marquee { display: none; }

/* --- 1a. HERO: swap in the tall portrait image on mobile + tablet so the
 *     letterboxed black gaps (top/bottom) are filled. --- */
@media (max-width: 1023px) {
  #hero-inner .hero-bg-desktop { display: none; }
  #hero-inner .hero-bg-mobile  { display: block; }
  #hero-inner { min-height: 82vh; }
}

/* --- 1b. HERO buttons: side-by-side with tighter padding on phones. --- */
@media (max-width: 639px) {
  .hero-cta-row { flex-direction: row; gap: 0.5rem; }
  .hero-cta-row > a {
    flex: 1 1 0; min-width: 0; justify-content: center;
    padding: 0.6rem 0.5rem; font-size: 0.72rem; gap: 0.3rem;
    white-space: normal; text-align: center; line-height: 1.15;
  }
  .hero-cta-row > a svg { display: none; }
}

/* --- 2. FEATURED IN: auto-scrolling marquee (2 rows, right-to-left) on phone. --- */
@media (max-width: 767px) {
  #featured-in .featured-grid { display: none; }
  .featured-marquee {
    display: block; overflow: hidden; width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  }
  .featured-marquee-track {
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: 43%; gap: 0.6rem; width: max-content;
    animation: ao-featured-marquee 16s linear infinite;
  }
  .featured-marquee-cell {
    height: 62px; background: #f8fafc; border: 1px solid #e5e7eb;
    border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;
    padding: 0.45rem 0.7rem;
  }
  .featured-marquee-img { max-height: 100%; max-width: 100%; object-fit: contain; }
  @keyframes ao-featured-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
}

/* --- 3. PRACTICE AREAS: even 2-per-row grid (equal gutters) for BOTH the
 *     Personal and Professional groups on phone. --- */
@media (max-width: 767px) {
  #practice-areas .flex.flex-wrap {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem;
  }
  #practice-areas .flex.flex-wrap > a { width: auto; padding: 0.9rem 0.45rem; gap: 0.5rem; }
  #practice-areas .flex.flex-wrap > a .w-12 { width: 2.5rem; height: 2.5rem; }
  #practice-areas .flex.flex-wrap > a h4 { font-size: 0.66rem; }
}

/* --- 3b. PRACTICE AREAS (tablet/desktop): size the cards so each full row
 *     spans edge-to-edge (both sides equal). The container keeps justify-center,
 *     so an incomplete last row (e.g. Personal's leftover items) stays centred.
 *     Professional's 15 items land as a perfect 5-per-row block. --- */
@media (min-width: 768px) and (max-width: 1023px) {
  #practice-areas .flex.flex-wrap > a { width: calc((100% - 4.5rem) / 4) !important; } /* 4 per row, gap 1.5rem */
}
@media (min-width: 1024px) {
  #practice-areas .flex.flex-wrap > a { width: calc((100% - 6rem) / 5) !important; }   /* 5 per row, gap 1.5rem */
}

/* --- 4. OUR LEGAL PROCESS: compact icon-box, 2 per row on phone. --- */
@media (max-width: 767px) {
  #our-process .grid.grid-cols-1 { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  #our-process .w-24 { width: 3.5rem !important; height: 3.5rem !important; border-width: 3px; }
  #our-process .w-24 svg { width: 1.6rem !important; height: 1.6rem !important; }
  #our-process .mb-6 { margin-bottom: 0.75rem; }
  #our-process .absolute.w-8 { width: 1.4rem; height: 1.4rem; font-size: 0.65rem; }
  #our-process .grid.grid-cols-1 .p-6 { padding: 0.8rem; }
  #our-process .grid.grid-cols-1 h3 { font-size: 0.75rem; margin-bottom: 0.35rem; }
  #our-process .grid.grid-cols-1 p  { font-size: 0.68rem; line-height: 1.4; }
}

/* --- 5. TESTIMONIALS: shrink the oversized decorative quote mark on phone/tablet.
 *     The visible slider cards are rendered by home.js, whose quote <svg> carries
 *     `w-16 h-16` (NOT `lucide-quote`), so target both selectors. --- */
@media (max-width: 1023px) {
  #client-reviews .lucide-quote,
  #client-reviews svg.w-16 {
    width: 1.9rem !important; height: 1.9rem !important;
    top: 0.9rem !important; right: 0.9rem !important;
  }
}

/* --- 6. WHY OUR FIRM: icon-box, 2 per row on phone. --- */
@media (max-width: 639px) {
  #why-our-firm .grid.grid-cols-1 { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  #why-our-firm .grid.grid-cols-1 h3 { font-size: 0.85rem; }
  #why-our-firm .grid.grid-cols-1 p  { font-size: 0.75rem; }
}

/* --- 7. LATEST UPDATES (blog): horizontal swipe slider on phone. --- */
@media (max-width: 767px) {
  #blog_grid {
    display: flex; overflow-x: auto; gap: 1rem;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 0.85rem;
  }
  #blog_grid > article { flex: 0 0 82%; scroll-snap-align: start; }
  #blog_grid::-webkit-scrollbar { height: 4px; }
  #blog_grid::-webkit-scrollbar-thumb { background: rgba(197,168,92,.55); border-radius: 4px; }
}

/* --- 8. FOOTER: pair the info columns 2-across on phone (About + Offices stay
 *     full width; Resources + Legal Info sit side-by-side). --- */
@media (max-width: 767px) {
  #footer .grid.grid-cols-1 { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; }
  #footer .grid.grid-cols-1 > div:nth-child(1),
  #footer .grid.grid-cols-1 > div:nth-child(2) { grid-column: 1 / -1; }
}

/* =========================================================================
 * 9. UNIFORM SECTION SPACING (home page)
 * Every section after the hero gets the SAME top/bottom padding, so no
 * section (e.g. "About our Law Firm", which had py-32 + mt-16) shows a
 * larger gap than the others. Hero is intentionally excluded.
 * To change the global rhythm, edit the two padding values below
 * (e.g. 80px, or 120px) — that's the only place it's defined.
 * ====================================================================== */
#hero-section ~ section {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
@media (min-width: 768px) {
  #hero-section ~ section {
    padding-top: 96px !important;
    padding-bottom: 96px !important;
  }
}

/* ============================================================
   Dothan Home (templates/home.php) — ID/class-scoped styles.
   The compiled Tailwind build (assets/css/global.css) does NOT
   ship a .prose ruleset, so the link-bearing body fields (intro,
   each practice area, the CTA) are styled explicitly here so
   paragraphs are spaced and inline links stay clearly visible.
   style.css is enqueued last, so these rules win.
   ============================================================ */
.dlf-home #hero-inner { background: linear-gradient(160deg, #0A192F 0%, #132a47 55%, #0A192F 100%); }

.dlf-home .prose-dlf { color: #4b5563; }
.dlf-home .prose-dlf > p { margin: 0 0 1.15em; line-height: 1.75; }
.dlf-home .prose-dlf > p:last-child { margin-bottom: 0; }
.dlf-home .prose-dlf a {
  color: #0A192F;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(197, 168, 92, .65);
  text-decoration-thickness: 1.5px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.dlf-home .prose-dlf a:hover { color: #0A192F; text-decoration-color: #C5A85C; }
.dlf-home .prose-dlf strong { color: #0A192F; font-weight: 700; }
.dlf-home .prose-dlf ul { margin: 0 0 1.15em; padding-left: 1.25em; list-style: disc; }
.dlf-home .prose-dlf li { margin: .35em 0; }

/* Consultation CTA body renders on navy — invert text, keep gold links. */
.dlf-home .prose-invert { color: #cbd5e1; }
.dlf-home .prose-invert a { color: #C5A85C; text-decoration-color: rgba(197, 168, 92, .6); }
.dlf-home .prose-invert a:hover { color: #fff; text-decoration-color: #fff; }
.dlf-home .prose-invert strong { color: #fff; }

/* ============================================================
   Editor content (.prose) — single posts, practice pages, any
   the_content() output. The compiled Tailwind build ships NO .prose
   ruleset AND its Preflight resets element margins to 0, so without
   these rules post bodies collapse into an unspaced wall of text.
   Home uses higher-specificity .dlf-home .prose-dlf rules, so it is
   unaffected. style.css is enqueued last, so these win.
   ============================================================ */
.prose { color: #4b5563; line-height: 1.75; }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.25em; }
.prose a { color: #0A192F; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(197, 168, 92, .6); text-decoration-thickness: 1.5px; transition: color .2s ease; }
.prose a:hover { color: #9a7b30; }
.prose strong { color: #1f2937; font-weight: 700; }
.prose em { font-style: italic; }
.prose h2 { font-family: var(--font-display, Georgia, serif); color: #0A192F; font-weight: 700; font-size: 1.6em; line-height: 1.25; margin: 1.6em 0 .6em; }
.prose h3 { font-family: var(--font-display, Georgia, serif); color: #0A192F; font-weight: 700; font-size: 1.3em; line-height: 1.3; margin: 1.4em 0 .5em; }
.prose h4 { color: #0A192F; font-weight: 700; font-size: 1.1em; margin: 1.3em 0 .5em; }
.prose ul { margin: 0 0 1.25em; padding-left: 1.5em; list-style: disc; }
.prose ol { margin: 0 0 1.25em; padding-left: 1.5em; list-style: decimal; }
.prose li { margin: .4em 0; }
.prose blockquote { margin: 1.5em 0; padding: .35em 1.25em; border-left: 4px solid #C5A85C; background: #f8fafc; color: #374151; font-style: italic; }
.prose img { max-width: 100%; height: auto; border-radius: .375rem; margin: 1.5em 0; }
.prose hr { margin: 2em 0; border: 0; border-top: 1px solid #e5e7eb; }
.prose-lg { font-size: 1.05rem; }

/* Attorney profile tabs (single-attorney.php) — scoped so Tailwind purge can't
   drop the active/hover states. */
.atty-tabnav { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid #e5e7eb; margin-bottom: 26px; }
.atty-tabbtn { padding: 11px 20px; font-family: inherit; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #6b7280; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .2s, border-color .2s; }
.atty-tabbtn:hover { color: #0A192F; }
.atty-tabbtn[aria-selected="true"] { color: #0A192F; border-bottom-color: #C5A85C; }
.atty-tabpanel[hidden] { display: none; }

/* ============================================================
   "Other Services" section  (template-parts/other-services.php)
   ------------------------------------------------------------
   Written as plain, scoped CSS rather than Tailwind utilities:
   assets/css/global.css is a precompiled + PURGED Tailwind build,
   so classes it does not already contain (w-9, h-9, py-9,
   lg:grid-cols-3, hover:-translate-y-0.5 …) silently do nothing.
   style.css is enqueued last, so these rules always win.
   ============================================================ */
.fwf-os {
  background: #F7F8FA;
  border-top: 1px solid #E8EAEE;
  border-bottom: 1px solid #E8EAEE;
  padding: 72px 0;
}
.fwf-os__inner {
  max-width: 80rem;          /* matches the header/content shell */
  margin: 0 auto;
  padding: 0 16px;
}
.fwf-os__head { text-align: center; margin-bottom: 44px; }
.fwf-os__title {
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #0A192F;
  margin: 0;
}
.fwf-os__rule {
  display: block;
  width: 54px;
  height: 3px;
  margin: 16px auto 0;
  background: #C5A85C;
  border-radius: 2px;
}

.fwf-os__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.fwf-os__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  text-align: center;
  background: #fff;
  border: 1px solid #E4E7EC;
  border-radius: 10px;
  padding: 34px 22px;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(10, 25, 47, .04);
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
a.fwf-os__card:hover,
a.fwf-os__card:focus-visible {
  border-color: #C5A85C;
  box-shadow: 0 14px 30px rgba(10, 25, 47, .10);
  transform: translateY(-4px);
  outline: none;
}

.fwf-os__icon {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  background: rgba(197, 168, 92, .13);
  color: #C5A85C;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.fwf-os__icon svg { width: 26px; height: 26px; display: block; }
a.fwf-os__card:hover .fwf-os__icon,
a.fwf-os__card:focus-visible .fwf-os__icon {
  background: #C5A85C;
  color: #0A192F;
  transform: scale(1.06);
}

.fwf-os__label {
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .01em;
  color: #0A192F;
  transition: color .2s ease;
}
a.fwf-os__card:hover .fwf-os__label { color: #8a6f2f; }

/* The page you are currently on: shown, but not a link. */
.fwf-os__card.is-current {
  border-color: #C5A85C;
  background: rgba(197, 168, 92, .07);
  cursor: default;
}
.fwf-os__card.is-current .fwf-os__icon { background: #C5A85C; color: #0A192F; }
.fwf-os__card.is-current .fwf-os__label { color: #8a6f2f; }

@media (min-width: 640px) { .fwf-os__inner { padding: 0 24px; } }
@media (min-width: 1024px) { .fwf-os__inner { padding: 0 32px; } }

@media (max-width: 1023px) {
  .fwf-os { padding: 58px 0; }
  .fwf-os__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 639px) {
  .fwf-os { padding: 46px 0; }
  .fwf-os__grid { grid-template-columns: 1fr; gap: 14px; }
  .fwf-os__head { margin-bottom: 32px; }
  .fwf-os__card { flex-direction: row; text-align: left; padding: 18px 18px; gap: 14px; }
  .fwf-os__icon { width: 46px; height: 46px; flex-basis: 46px; }
  .fwf-os__icon svg { width: 22px; height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .fwf-os__card, .fwf-os__icon { transition: none; }
  a.fwf-os__card:hover { transform: none; }
  a.fwf-os__card:hover .fwf-os__icon { transform: none; }
}

/* ============================================================
   HOME HERO  (templates/home.php  #hero-section / #hero-inner)
   ------------------------------------------------------------
   All of it in plain CSS: the utilities this needs
   (min-h-[50vh], mt-5, mt-9, md:text-6xl, sm:py-20) are NOT in
   the purged global.css and silently no-op, which is why the
   hero had no height and the title/tagline/buttons sat flush
   against each other.
   ============================================================ */
#hero-inner {
  min-height: 660px;
  padding: 96px 0;
}
/* Focal point is the TOP of the frame, so a subject's head is never cropped. */
#hero-inner.has-bg {
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

#hero-inner .hero-copy { padding-top: 0; padding-bottom: 0; }

#hero-inner .hero-title {
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
#hero-inner .hero-eyebrow {
  font-size: clamp(11px, 1.1vw, 14px);
  line-height: 1.5;
  margin: 26px 0 0;
  text-wrap: balance;
}
#hero-inner .hero-cta-row { margin-top: 40px; }

@media (max-width: 1023px) {
  #hero-inner { min-height: 560px; padding: 76px 0; }
  #hero-inner .hero-eyebrow { margin-top: 22px; }
  #hero-inner .hero-cta-row { margin-top: 34px; }
}
@media (max-width: 639px) {
  #hero-inner { min-height: 460px; padding: 56px 0; }
  #hero-inner .hero-eyebrow { margin-top: 18px; letter-spacing: .12em; }
  #hero-inner .hero-cta-row { margin-top: 28px; }
}

/* ============================================================
   "Featured on" strip  (template-parts/featured-logos.php)
   Plain CSS: max-w-[560px] is an arbitrary Tailwind class absent
   from the purged global.css, so the composite logo image kept
   its natural width and pushed the page 37px wide at 768px.
   ============================================================ */
.fwf-fl {
  background: #fff;
  border-top: 1px solid #EDEFF2;
  border-bottom: 1px solid #EDEFF2;
  padding: 34px 16px;
}
.fwf-fl__inner {
  max-width: 80rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 30px;
}
.fwf-fl__label {
  flex: 0 1 auto;
  margin: 0;
  font-family: var(--font-display, Georgia, serif);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #0A192F;
  text-align: right;
}
.fwf-fl__img {
  flex: 0 1 560px;
  width: 100%;
  max-width: 560px;   /* real rule, not a purged utility */
  min-width: 0;       /* lets it shrink inside the flex row */
  height: auto;
  object-fit: contain;
}
@media (min-width: 640px) { .fwf-fl { padding: 38px 24px; } }
@media (max-width: 639px) {
  .fwf-fl__inner { flex-direction: column; gap: 16px; }
  .fwf-fl__label { text-align: center; letter-spacing: .12em; }
  .fwf-fl__br { display: none; }
  .fwf-fl__img { flex: 0 1 auto; max-width: 100%; }
}

/* ============================================================
   BLOG INDEX  (home.php)  +  archives/search reusing the shell
   ------------------------------------------------------------
   Nearly every layout utility this template wants is absent from
   the purged global.css — verified PURGED: lg:grid-cols-12,
   lg:col-span-8, md:grid-cols-2, space-y-8, h-[45vh],
   sm:h-[50vh], sm:text-5xl, md:text-6xl, md:py-24, xl:gap-14.
   Without these rules the page collapses to one unstyled column.
   ============================================================ */
#blog-hero {
  min-height: 320px;
  padding: 88px 16px;
  text-align: center;
}
#blog-hero-badge { margin-bottom: 18px; }
#blog-hero-title {
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.1;
  margin: 0;
}

.fwf-blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 40px;
  align-items: start;
}
.fwf-blog-main { grid-column: 1; display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.fwf-blog-side { grid-column: 2; min-width: 0; }
.fwf-blog-side > * + * { margin-top: 32px; }

.fwf-blog-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

@media (max-width: 1023px) {
  #blog-hero { min-height: 260px; padding: 64px 16px; }
  .fwf-blog-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .fwf-blog-main, .fwf-blog-side { grid-column: 1; }
}
@media (max-width: 639px) {
  #blog-hero { min-height: 220px; padding: 52px 16px; }
  .fwf-blog-cards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* Blog sidebar column: the utilities on it (lg:col-span-4, space-y-8,
   lg:sticky, lg:top-28) are all purged, so its stacking and stickiness
   are set here instead. */
@media (min-width: 1024px) {
  .fwf-blog-side { position: sticky; top: 112px; }
}

/* ============================================================
   In-content INTERNAL links  (client request, 2026-07-21)
   No underline; gold/yellow anchor text so links are easy to
   spot in the article body. Targets root-relative (internal)
   links inside the reading content: .prose (posts, legal,
   practice pages), the homepage intro (.about-body) and the
   quick-answer box. External (absolute) links keep their
   underline so an off-site link still reads differently.
   The attribute selector out-specifies the base `.prose a`
   rule above, so it wins for internal links regardless.
   ============================================================ */
.prose a[href^="/"]:not([href^="//"]),
.dlf2 .about-body a[href^="/"]:not([href^="//"]),
.dlf2 .answer a[href^="/"]:not([href^="//"]) {
  color: #C5A85C;                 /* brand gold */
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}
.prose a[href^="/"]:not([href^="//"]):hover,
.dlf2 .about-body a[href^="/"]:not([href^="//"]):hover,
.dlf2 .answer a[href^="/"]:not([href^="//"]):hover {
  color: #A88A5F;                 /* brand gold-dark — feedback on hover */
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(197, 168, 92, .7);
}