/* ==========================================================================
   ATEH LAW — Practice Areas page
   --------------------------------------------------------------------------
   Colours, fonts, icons and labels live in the Divi module settings. What is
   here is structure Divi 4 shortcode has no primitive for: the card grid, the
   badge's top-right placement, and list/timeline marker glyphs.
   ========================================================================== */

/* --- Section header ------------------------------------------------------ */
/* This section's heading is text-3xl (30px), smaller than the 48px default. */
.ateh-section-title--sm h2 { font-size: calc(30px * var(--ateh-h-scale)); letter-spacing: -0.025em; }
.ateh-lede--sm p { font-size: 14px !important; }

.ateh-pagrid > .et_pb_row:first-of-type .et_pb_module { margin-bottom: 12px !important; }
.ateh-pagrid > .et_pb_row:first-of-type .et_pb_module:last-child { margin-bottom: 0 !important; }
.ateh-pagrid .ateh-center { max-width: 768px; margin-left: auto !important; margin-right: auto !important; }

/* --- Card grid: 3 across with a fixed 32px gutter ------------------------ */
.et_pb_row.ateh-pagrid__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 32px;
}
.ateh-pagrid__row .et_pb_column {
	float: none;
	margin: 0 !important;
	width: calc((100% - 64px) / 3) !important;
}

/* --- The card ------------------------------------------------------------ */
.ateh-pacard {
	position: relative;
	background: var(--ateh-surface);
	border: 1px solid var(--ateh-border);
	padding: 32px !important;
	display: flex;
	flex-direction: column;
	transition: var(--ateh-transition);
}
.ateh-pacard:hover {
	border-color: var(--ateh-slate-400);
	box-shadow: var(--ateh-shadow-hover);
}
.ateh-pacard > .et_pb_module { margin-bottom: 16px !important; }

/* Badge sits top-right, level with the blurb's icon tile. */
.ateh-pacard__badge {
	position: absolute;
	top: 32px;
	right: 32px;
	margin: 0 !important;
	z-index: 2;
}
.ateh-pacard__badge p {
	margin: 0;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ateh-slate-600);
	background: var(--ateh-silver-pale);
	border: 1px solid var(--ateh-border);
	padding: 5px 10px;
	line-height: 1;
	white-space: nowrap;
}

/* --- Blurb: icon tile, title, tagline, description ----------------------- */
.ateh-pacard__blurb .et_pb_main_blurb_image {
	margin-bottom: 16px;
	display: block;
	width: 48px;
}
.ateh-pacard__blurb .et_pb_image_wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background: var(--ateh-silver-pale);
	border: 1px solid var(--ateh-border);
	transition: var(--ateh-transition);
}
.ateh-pacard:hover .ateh-pacard__blurb .et_pb_image_wrap { background: var(--ateh-navy); }
.ateh-pacard__blurb .et_pb_image_wrap .et-pb-icon { font-size: 24px; transition: var(--ateh-transition); }
.ateh-pacard:hover .ateh-pacard__blurb .et_pb_image_wrap .et-pb-icon { color: var(--ateh-white) !important; }

/* Divi gives blurb icons a scroll-triggered waypoint animation that starts at
   opacity 0. If the waypoint never fires the icon stays invisible, so opt out. */
.ateh-pacard__blurb .et-pb-icon.et-waypoint { opacity: 1 !important; animation: none !important; }

.ateh-pacard__blurb .et_pb_module_header {
	padding: 0 0 4px;
	text-transform: uppercase;
	letter-spacing: -0.025em;
	line-height: 1.2;
	/* Room for the ↗ affordance shown in the design. */
	padding-right: 26px;
	position: relative;
}
/* ETmodules has no diagonal arrow, so rotate the right arrow to get the ↗
   affordance the design uses. */
.ateh-pacard__blurb .et_pb_module_header::after {
	content: "\000024";
	font-family: 'ETmodules';
	position: absolute;
	right: 0;
	top: 3px;
	font-size: 15px;
	font-weight: normal;
	letter-spacing: 0;
	color: var(--ateh-slate-400);
	transform: rotate(-45deg);
	transform-origin: center;
	transition: var(--ateh-transition);
}
.ateh-pacard:hover .ateh-pacard__blurb .et_pb_module_header::after { color: var(--ateh-navy); }
.ateh-pacard__blurb .et_pb_module_header a { color: inherit; }

/* First paragraph of the blurb body is the italic serif tagline. */
.ateh-pacard__tag {
	font-family: var(--ateh-font-quote) !important;
	font-style: italic;
	font-size: 13px !important;
	color: var(--ateh-slate-500) !important;
	margin: 0 0 14px !important;
}
.ateh-pacard__blurb .et_pb_blurb_description p:last-child { margin-bottom: 0; }

/* --- Key services list --------------------------------------------------- */
.ateh-pacard__services {
	padding-top: 12px;
	border-top: 1px solid var(--ateh-silver-pale);
}
.ateh-pacard__slabel {
	margin: 0 0 8px !important;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ateh-slate-400);
}
.ateh-pacard__services ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ateh-pacard__services li {
	position: relative;
	padding: 0 0 8px 22px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--ateh-slate-600);
}
.ateh-pacard__services li:last-child { padding-bottom: 0; }
.ateh-pacard__services li::before {
	content: "\00004e";
	font-family: 'ETmodules';
	position: absolute;
	left: 0;
	top: 1px;
	font-size: 13px;
	color: var(--ateh-gold);
}

/* --- Timeline ------------------------------------------------------------ */
.ateh-pacard__timeline p {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ateh-slate-500);
	line-height: 1.5;
}
.ateh-pacard__timeline p::before {
	content: "\00e023";
	font-family: 'ETmodules';
	font-size: 13px;
	color: var(--ateh-slate-400);
	flex: none;
	letter-spacing: 0;
}

/* --- Card CTAs -----------------------------------------------------------
   NOTE: Divi puts a module's CSS class on the <a>, while the card's flex child
   is the surrounding .et_pb_button_module_wrapper. Alignment must therefore be
   applied to the wrapper, not the class — targeting the class does nothing.
   The first of the two wrappers takes margin-top:auto so every card's CTA
   block sits flush to the bottom and lines up across the row.
   ------------------------------------------------------------------------ */
.ateh-pacard > .et_pb_button_module_wrapper:nth-last-child(2) {
	margin-top: auto !important;
	margin-bottom: 12px !important;
	padding-top: 24px;
	border-top: 1px solid var(--ateh-border);
}
.ateh-pacard > .et_pb_button_module_wrapper:last-child {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Divi buttons are inline-block; the design has them fill the card width. */
.ateh-btn-full .et_pb_button,
.et_pb_button.ateh-btn-full {
	display: flex !important;
	width: 100%;
	align-items: center;
	justify-content: center;
	line-height: 1.5;
}
.ateh-pacard__cta1:hover { background: var(--ateh-silver-light) !important; }
.ateh-pacard__cta2:hover { background: var(--ateh-navy-soft) !important; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
	.ateh-pagrid__row .et_pb_column { width: calc((100% - 32px) / 2) !important; }
}

@media (max-width: 767px) {
	.ateh-pagrid__row .et_pb_column { width: 100% !important; }
	.ateh-pacard__badge { position: static; margin: 0 0 16px !important; }
	.ateh-pacard__badge p { display: inline-block; }
}

/* ==========================================================================
   PRACTICE AREA FAQS
   Accordion is Divi's native module (toggle font, colours and icon are set in
   module settings). Only the search/chip controls and the CTA band need CSS.
   ========================================================================== */

.ateh-faqsec { border-top: 1px solid var(--ateh-border); }
.ateh-faqsec > .et_pb_row:first-of-type .et_pb_module { margin-bottom: 16px !important; }
.ateh-faqsec > .et_pb_row:first-of-type .et_pb_module:last-child { margin-bottom: 0 !important; }
.ateh-section-title--md h2 { font-size: calc(36px * var(--ateh-h-scale)); }
.ateh-lede--narrow p { max-width: 576px; }

/* --- Search + category chips --------------------------------------------- */
.ateh-faqtools { margin-bottom: 24px !important; }
.ateh-faqtools__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.ateh-faqtools__search { position: relative; display: block; width: 320px; max-width: 100%; }
.ateh-faqtools__search::before {
	content: "\000055";
	font-family: 'ETmodules';
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 15px;
	color: var(--ateh-slate-400);
	pointer-events: none;
}
.ateh-faq-search {
	width: 100%;
	padding: 10px 16px 10px 40px;
	background: var(--ateh-silver-pale);
	border: 1px solid var(--ateh-border);
	border-radius: var(--ateh-radius);
	font-family: var(--ateh-font-body);
	font-size: 12px;
	color: var(--ateh-navy);
	outline: none;
	transition: var(--ateh-transition);
}
.ateh-faq-search:focus { border-color: var(--ateh-navy); background: var(--ateh-white); }

.ateh-faqtools__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ateh-faq-filter {
	font-family: var(--ateh-font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ateh-slate-600);
	background: var(--ateh-silver-pale);
	border: 0;
	padding: 7px 12px;
	cursor: pointer;
	transition: var(--ateh-transition);
}
.ateh-faq-filter:hover { color: var(--ateh-navy); background: var(--ateh-silver-light); }
.ateh-faq-filter.is-active { background: var(--ateh-navy); color: var(--ateh-white); }

.ateh-faq-empty {
	margin: 16px 0 0;
	font-size: 13px;
	color: var(--ateh-slate-500);
	text-align: center;
}

/* --- Accordion ------------------------------------------------------------ */
.ateh-faqlist .et_pb_toggle {
	background: var(--ateh-silver-pale) !important;
	border: 1px solid var(--ateh-border) !important;
	margin-bottom: 12px !important;
	padding: 0 !important;
	border-radius: var(--ateh-radius);
}
.ateh-faqlist .et_pb_toggle:last-child { margin-bottom: 0 !important; }
.ateh-faqlist .et_pb_toggle_title {
	padding: 20px 52px 20px 20px !important;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.4;
	cursor: pointer;
}
/* Divi ships ⊕/⊖ circles and hides the icon while open; the design uses a
   plain chevron that flips. */
.ateh-faqlist .et_pb_toggle_title::before {
	content: "\000033" !important;
	display: block !important;
	right: 20px;
	left: auto;
	color: var(--ateh-slate-400);
	font-size: 20px;
}
.ateh-faqlist .et_pb_toggle_open .et_pb_toggle_title::before {
	content: "\000032" !important;
	color: var(--ateh-navy);
}
.ateh-faqlist .et_pb_toggle_content {
	padding: 20px !important;
	margin: 0 !important;
	background: var(--ateh-white);
	border-top: 1px solid var(--ateh-border);
}
.ateh-faqlist .et_pb_toggle_content p:last-child { margin-bottom: 0; }
.ateh-faqlist .et_pb_toggle_open { background: var(--ateh-silver-pale) !important; }

/* --- Closing CTA band ----------------------------------------------------- */
.ateh-faqcta {
	background: var(--ateh-navy);
	padding: 32px !important;
	text-align: center;
}
.ateh-faqcta .et_pb_module { margin-bottom: 16px !important; }
.ateh-faqcta .et_pb_module:last-child { margin-bottom: 0 !important; }
.ateh-faqcta__title h3 {
	font-family: var(--ateh-font-body);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--ateh-white);
	padding: 0;
}
.ateh-faqcta__body p {
	margin: 0 auto;
	max-width: 512px;
	font-size: 12px;
	line-height: 1.7;
	color: var(--ateh-silver);
}

@media (max-width: 767px) {
	.ateh-faqtools__bar { flex-direction: column; align-items: stretch; }
	.ateh-faqtools__search { width: 100%; }
}
/* Category marker for the FAQ filter — invisible, carries no layout. */
.ateh-faq-cat { display: none; }

/* Anchored practice-area cards must clear the sticky header, otherwise the
   card lands underneath it when arriving from a #hash link. */
.ateh-pacard { scroll-margin-top: 130px; }
html { scroll-behavior: smooth; }
/* --- Collapsible card detail -------------------------------------------
   The client asked that the page not be one long scroll: each card shows its
   name, tagline and CTAs, and hides the rest behind "More Details".
   The toggle is the (previously dead) cta1 button, so no extra module was
   needed and everything stays editable in the Visual Builder.
   A <noscript> block in functions.php re-expands all of this when JS is off. */
.ateh-pacard:not(.is-open) .ateh-pacard__services,
.ateh-pacard:not(.is-open) .ateh-pacard__timeline,
.ateh-pacard:not(.is-open) .ateh-pacard__blurb .et_pb_blurb_description > p:not(.ateh-pacard__tag) {
	display: none;
}

/* Divi renders its own arrow in ::after (content "5", absolutely positioned at
   right: 6px) and its selector out-specifies a plain class, so instead of
   fighting it for a different glyph we rotate the arrow Divi already draws:
   pointing down = expand, up = collapse. The translateY(-5px) is Divi's own
   vertical centring and has to be carried through. */
.ateh-pacard .ateh-pacard__toggle::after {
	transition: transform 0.25s ease;
	transform: translateY(-5px) rotate(90deg) !important;
}
.ateh-pacard.is-open .ateh-pacard__toggle::after {
	transform: translateY(-5px) rotate(-90deg) !important;
}

/* Opened cards read as the active one in the grid. */
.ateh-pacard.is-open { box-shadow: 0 18px 44px -16px rgba(15, 23, 42, 0.35); }

/* Cards size to their own content. With the row's default `align-items:
   stretch`, opening one card stretched its row-mates to match and left a large
   empty gap above their buttons. */
.et_pb_row.ateh-pagrid__row { align-items: flex-start; }

/* The tagline carries Divi's default p padding-bottom (1em) plus a margin, which
   spaced it from the description underneath. Collapsed, that description is gone
   and the spacing dangles as ~27px of dead air above the buttons. */
.ateh-pacard:not(.is-open) .ateh-pacard__tag {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}