/*
Theme Name: Legal Child - Athreya Associates
Theme URI: https://pluralis.in/
Template: legal
Author: Nilesh Sawant
Author URI: https://pluralis.in/
Description: Child theme of the Legal WordPress theme, built for Athreya Associates by Pluralis Digital. Adds an About the Firm section, a General Information FAQ/accordion section, and a custom Get in Touch footer, on top of the parent theme's hero/practice/counsel/testimony customizations.
Version: 1.0.5
Requires at least: 5.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: legal-child
*/

/* ============================================================
   SECTION VERTICAL RHYTHM (override)
   Parent theme default is clamp(72px, 9vw, 128px) top/bottom on
   every .lg-section. Tightened here so sections sit closer
   together; the child stylesheet loads after the parent's, so
   this same-specificity rule wins by source order alone.
============================================================ */
.lg-section {
	padding: clamp( 48px, 6vw, 96px ) 0;
}

/* ============================================================
   ABOUT THE FIRM
   Reuses .lg-section / .lg-section-marker / .lg-section-head /
   .lg-italic-accent / .lg-fade from the parent theme. Only the
   body copy + lede card need new rules.
============================================================ */
.lg-about-heading {
	margin: 0 0 40px;
	/* Capped to match .lg-about-body's width below it, so the
	   heading wraps at the same line-length as the body copy.
	   .lg-container itself stays untouched (var(--lg-container))
	   so every section keeps the same left edge — only the
	   heading's own wrap-width is narrowed. Also applies to the
	   FAQ heading, which reuses this same class. */
	max-width: var( --lg-narrow );
	font-size: clamp( 2rem, 4.6vw, 3.4rem );
	line-height: 1.15;
}
.lg-about-body {
	max-width: var( --lg-narrow );
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 48px;
}
.lg-about-body p {
	font-size: 16px;
	line-height: 1.75;
	color: var( --lg-text-muted );
	margin: 0;
}
.lg-about-lede {
	border-left: 2px solid var( --lg-accent );
	padding: 4px 0 4px 28px;
	max-width: 640px;
}
.lg-about-lede-quote {
	font-family: var( --lg-serif );
	font-style: italic;
	font-size: clamp( 1.25rem, 2.2vw, 1.6rem );
	line-height: 1.4;
	color: var( --lg-text );
	margin: 0 0 14px;
}
.lg-about-lede-cite {
	font-family: var( --lg-mono );
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --lg-text-soft );
}

/* ============================================================
   GENERAL INFORMATION — FAQ / ACCORDION
============================================================ */
.lg-faq-intro {
	max-width: var( --lg-narrow );
	font-size: 16px;
	line-height: 1.7;
	color: var( --lg-text-muted );
	margin: 0 0 48px;
}
.lg-faq-list {
	border-top: 1px solid var( --lg-border );
}
.lg-faq-item {
	border-bottom: 1px solid var( --lg-border );
}
.lg-faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 26px 4px;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var( --lg-sans );
	font-size: clamp( 1rem, 1.6vw, 1.15rem );
	font-weight: 500;
	color: var( --lg-text );
}
.lg-faq-q:hover { color: var( --lg-accent ); }
.lg-faq-icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var( --lg-border-strong );
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var( --lg-mono );
	font-size: 16px;
	line-height: 1;
	color: var( --lg-accent );
	transition: transform .25s ease, background .25s ease;
}
.lg-faq-item.is-open .lg-faq-icon {
	background: var( --lg-accent );
	color: var( --lg-bg );
	transform: rotate( 45deg );
}
.lg-faq-a {
	overflow: hidden;
	transition: max-height .35s ease;
}
/* JS sets the collapsed max-height inline (progressive enhancement —
   if JS fails to load, answers stay fully visible rather than hidden). */
.lg-faq-a-inner {
	padding: 0 4px 28px;
	max-width: var( --lg-narrow );
}
.lg-faq-a-inner p {
	font-size: 15px;
	line-height: 1.7;
	color: var( --lg-text-muted );
	margin: 0 0 16px;
}
.lg-faq-a-inner p:last-child { margin-bottom: 0; }
.lg-faq-sub {
	font-family: var( --lg-mono );
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --lg-text-soft );
	margin: 18px 0 10px;
}

/* ============================================================
   GET IN TOUCH — FOOTER OVERRIDE
   Parent .lg-footer-grid is 2fr 1fr 1fr 1fr (brand + 3 widget
   cols). We now render brand + contact (2 col), or brand +
   Quick Links + contact (3 col) when a Footer Menu is assigned.
============================================================ */
/* Only when the Get in Touch column is active (brand + 1 contact col).
   If it's turned off in the Customizer, the footer falls back to the
   parent theme's original up-to-4-column widget grid, untouched. */
.lg-footer-grid--contact {
	grid-template-columns: 1.5fr 1fr;
}
/* When a Footer Menu is also assigned (Appearance → Menus), a Quick Links
   column renders between Brand and Get in Touch — this variant has higher
   specificity (two classes) than .lg-footer-grid--contact above, so it
   always wins over the 2-column rule whenever both classes are present. */
.lg-footer-grid--contact.lg-footer-grid--quicklinks {
	grid-template-columns: 1.2fr 0.8fr 1fr;
}
.lg-footer-contact-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.lg-footer-contact-item-label {
	font-family: var( --lg-mono );
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba( 250, 250, 247, .45 );
	margin-bottom: 4px;
}
.lg-footer-contact-item-val,
.lg-footer-contact-item-val a {
	font-size: 14px;
	line-height: 1.6;
	color: rgba( 250, 250, 247, .85 );
}
.lg-footer-contact-item-val a:hover { color: var( --lg-gold ); }
.lg-footer-connect {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-size: 14px;
	color: rgba( 250, 250, 247, .85 );
}
.lg-footer-connect:hover { color: var( --lg-gold ); }
.lg-footer-connect svg { flex: 0 0 auto; }

@media ( max-width: 1024px ) {
	.lg-footer-grid--contact { grid-template-columns: 1fr 1fr; }
	.lg-footer-grid--contact.lg-footer-grid--quicklinks { grid-template-columns: 1fr 1fr 1fr; }
}
@media ( max-width: 768px ) {
	.lg-footer-grid--contact { grid-template-columns: 1fr; }
	.lg-footer-grid--contact.lg-footer-grid--quicklinks { grid-template-columns: 1fr; }
	.lg-faq-q { padding: 22px 2px; gap: 16px; }
}

/* ============================================================
   DARK-MODE TEXT OVERRIDES
   The parent theme's .lg-section--dark utility (legal/style.css)
   only repaints headings, the section marker, and the section-head
   lede paragraph. The Section Order & Background Customizer control
   lets the client put ANY of About / Practice / Ledger / Counsel /
   Testimony / FAQ on a Dark Teal background, so these rules extend
   the same light-on-dark treatment to each section's own body-text
   classes — otherwise their default charcoal/grey copy would render
   nearly invisible against the dark teal fill.
============================================================ */
.lg-section--dark .lg-about-body p,
.lg-section--dark .lg-faq-intro,
.lg-section--dark .lg-faq-a-inner p,
.lg-section--dark .lg-practice-desc,
.lg-section--dark .lg-practice-num,
.lg-section--dark .lg-counsel-bio,
.lg-section--dark .lg-counsel-role,
.lg-section--dark .lg-testimony-cite-meta {
	color: rgba( 250, 250, 247, .7 );
}
.lg-section--dark .lg-about-lede-quote,
.lg-section--dark .lg-testimony-quote,
.lg-section--dark .lg-faq-title,
.lg-section--dark .lg-faq-q {
	color: var( --lg-bg );
}
.lg-section--dark .lg-about-lede-cite,
.lg-section--dark .lg-faq-sub,
.lg-section--dark .lg-testimony-cite-name {
	color: var( --lg-gold );
}
.lg-section--dark .lg-about-lede {
	border-left-color: var( --lg-gold );
}
.lg-section--dark .lg-testimony-cite {
	border-top-color: rgba( 250, 250, 247, .25 );
}
.lg-section--dark .lg-faq-list,
.lg-section--dark .lg-faq-item {
	border-color: rgba( 250, 250, 247, .15 );
}
.lg-section--dark .lg-faq-q:hover { color: var( --lg-gold ); }
.lg-section--dark .lg-faq-icon {
	border-color: rgba( 250, 250, 247, .35 );
	color: var( --lg-gold );
}
.lg-section--dark .lg-faq-item.is-open .lg-faq-icon {
	background: var( --lg-gold );
	color: var( --lg-bg-dark );
}

/* ============================================================
   ANCHOR / IN-PAGE NAV OFFSET
   The parent theme's header is sticky (--lg-nav-h, 72px) and its
   smooth-scroll JS already offsets same-page "#about" style clicks
   by 80px. That JS only runs for clicks on the homepage itself —
   a nav link clicked from another page (e.g. "/#about" from a blog
   post) lands here via a normal browser hash navigation, which has
   no JS offset applied. scroll-margin-top covers that case (and
   direct/bookmarked hash URLs) so the section heading never ends up
   hidden behind the sticky header, regardless of how the anchor was
   reached.
============================================================ */
#about,
#marquee,
#practice,
#ledger,
#counsel,
#testimony,
#general-info,
#contact,
#engage {
	scroll-margin-top: calc( var( --lg-nav-h ) + 8px );
}



/* ============================================================
   MARQUEE — DARK RESTYLE
   Flips the credentials strip from the parent's light bg /
   muted text to a dark teal bg with soft off-white text — same
   light-on-dark pairing already used by .lg-section--dark
   elsewhere in this file. Only the properties that actually
   change are overridden; borders, padding, gap, animation, etc.
   are all inherited from the parent theme untouched.
============================================================ */
.lg-marquee {
	background: var( --lg-bg-dark )!important;
}
.lg-marquee-item {
	font-size: 17px;
	font-weight: 400;
	color: var( --lg-bg-soft )!important;
}
.lg-marquee-sep {
	color: var( --lg-bg-soft )!important;
}

/* ============================================================
   PRIMARY BUTTON — EXPLICIT DEFAULT
   Re-asserts the parent theme's own default (Accent Teal) as an
   explicit child-theme rule. Note: the parent already sets this
   exact value with nothing else overriding it, so on its own
   this is a no-op — only relevant if something else on the page
   ends up painting .lg-btn-primary a different color and needs
   to be pulled back to Accent Teal.
============================================================ */
.lg-btn-primary {
	background: var( --lg-accent )!important;
}

.lg-footer-brand-col .custom-logo-link img {
	max-height: 120px;
}
.lg-footer-bottom em {
	color: var(--lg-bg-card)!important;
}