/*!
Theme Name: Dothan Law Firm
Theme URI: https://dothanlawfirm.com/
Author: prodeveloper2
Author URI: https://profiles.wordpress.org/prodeveloper2/
Description: A modern, fast and fully responsive WordPress theme built for law firms, attorneys and legal practices. It includes practice-area pages, editable attorney profiles, client reviews/testimonials, case-review request forms and a blog — all designed to build trust and turn visitors into clients. 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; }
/* Content/internal links: brand gold, NO underline (client request). */
.prose a { color: #b8860b; font-weight: 600; text-decoration: none; transition: color .2s ease; }
.prose a:hover { color: #8a6608; text-decoration: none; }
.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; }