/*
Theme Name: Hello Elementor Child
Theme URI: https://lakecenterconsulting.com
Description: Child theme of Hello Elementor for Lake Center Consulting. Holds self-hosted Inter fonts and minimal custom CSS only. All design tokens live in the Elementor Global Kit.
Author: Mohammad Emmon
Author URI: https://mohammademmon.com
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* Custom CSS is intentionally minimal. Prefer the Elementor Global Kit for all tokens.
   Only site-wide polish that the Kit cannot express lives here: focus visibility and
   purposeful hover motion. All colours/sizes still come from the Kit variables. */

:root {
	--lcc-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Visible keyboard focus everywhere (WCAG-AA). */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--e-global-color-primary, #0070B8);
	outline-offset: 2px;
}

/* Hover lift on buttons and cards. */
.elementor-button {
	transition: transform 200ms var(--lcc-ease), box-shadow 200ms var(--lcc-ease);
}
.elementor-button:hover {
	transform: translateY(-2px);
}

/* ---- Header (Theme Builder template, container class .lcc-header) ---- */
/* Frosted translucent bar, as in the reference (backdrop-filter has no Elementor control). */
.lcc-header {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* The "Book a Free Strategy Session" CTA is a Primary-menu item with the class
   "menu-cta" (edit text/link in Appearance -> Menus). Styled as the small primary pill
   from the reference; colours come from the Global Kit variables. */
/* Items align to their own height (reference .menu align-items:center), not the pill's. */
.lcc-header .elementor-nav-menu--main .elementor-nav-menu {
	align-items: center;
}
.lcc-header .elementor-nav-menu--main > li {
	align-self: center;
}
/* Services caret: compact like the reference "▾" glyph */
.lcc-header .elementor-nav-menu--main .sub-arrow {
	padding: 0 0 0 1px;
	font-size: 9px;
	line-height: 1;
}

/* ---- Footer (Theme Builder template, container class .lcc-footer) ---- */
/* Contact icons sit 3px below the line top, as in the reference .fic */
.lcc-footer .elementor-icon-list-icon {
	margin-top: 3px;
}
.lcc-header .menu-item.menu-cta > a.elementor-item {
	background: linear-gradient(135deg, var(--e-global-color-primary), var(--e-global-color-accent));
	color: #fff !important;
	padding: 11px 18px !important; /* Elementor sets item padding/typography with a higher-specificity id selector */
	border-radius: 999px;
	font-size: 13.5px !important;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	box-shadow: 0 14px 30px rgba(40, 168, 224, 0.30);
	transition: transform 150ms ease, box-shadow 200ms ease;
}
.lcc-header .menu-item.menu-cta > a.elementor-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 40px rgba(40, 168, 224, 0.42);
}
.lcc-header .menu-item.menu-cta > a.elementor-item::before,
.lcc-header .menu-item.menu-cta > a.elementor-item::after {
	display: none; /* no underline pointer on the pill */
}
/* Desktop "Services" dropdown: reference .drop (padding 8, min-width 250, item radius 10) */
.lcc-header .elementor-nav-menu--main .sub-menu.elementor-nav-menu--dropdown {
	padding: 8px;
	min-width: 250px;
}
.lcc-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item {
	border-radius: 10px;
	font-weight: 400 !important;
}

/* Collapsed (<=900px) drawer, matching the reference .menu panel:
   square white panel under the bar, hairline bottom, soft shadow, 10/24/24 padding,
   14px rows with dividers, sub-menu always expanded + indented 12px, no carets,
   pill full-width directly under "Contact Us". */
.lcc-header nav.elementor-nav-menu--dropdown {
	padding: 10px 24px 24px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--e-global-color-hairline) !important;
	border-radius: 0 !important;
	box-shadow: 0 24px 70px rgba(3, 15, 39, 0.16) !important;
	background: #fff;
}
/* Panel sits flush under the bar (reference: inset 72px 0 auto 0). */
.lcc-header nav.elementor-nav-menu--dropdown {
	top: 100% !important;
}
.lcc-header nav.elementor-nav-menu--dropdown a.elementor-item {
	padding: 14px 0 !important;
}
.lcc-header nav.elementor-nav-menu--dropdown > ul > li:not(.menu-cta) {
	border-bottom: 1px solid var(--e-global-color-hairline) !important;
}
.lcc-header nav.elementor-nav-menu--dropdown .sub-arrow {
	display: none;
}
/* Parent row ("Services") is shorter in the reference: its children follow 41px below the row top,
   and the block keeps 14px under the last child. */
.lcc-header nav.elementor-nav-menu--dropdown > ul > li.menu-item-has-children > a.elementor-item {
	padding: 14px 0 4px !important;
}
.lcc-header nav.elementor-nav-menu--dropdown > ul > li.menu-item-has-children {
	padding-bottom: 14px;
}
.lcc-header nav.elementor-nav-menu--dropdown .sub-menu {
	display: block !important;
	position: static !important;
	padding: 0 0 0 12px !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}
.lcc-header nav.elementor-nav-menu--dropdown .sub-menu li {
	border-bottom: 0 !important;
}
.lcc-header nav.elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item {
	padding: 10px 12px !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
}
.lcc-header nav.elementor-nav-menu--dropdown .menu-item.menu-cta {
	border-bottom: 0 !important;
}
.lcc-header nav.elementor-nav-menu--dropdown .menu-item.menu-cta > a.elementor-item {
	display: flex;
	justify-content: center;
	padding: 11px 18px !important;
}
/* Burger: three 24x2.5px ink lines, no box, unchanged when open (reference .burger) */
/* The toggle spans the full bar height so the drawer (top:100% of the widget) lands
   at the bar's bottom edge; the bars are drawn centred inside it. */
.lcc-header .elementor-menu-toggle {
	width: 40px;
	height: 72px;
	padding: 0;
	background: transparent !important;
	border: 0;
	position: relative;
}
.lcc-header .elementor-menu-toggle i,
.lcc-header .elementor-menu-toggle svg {
	display: none;
}
.lcc-header .elementor-menu-toggle::before {
	content: "";
	position: absolute;
	left: 8px;
	top: calc(50% - 8.75px);
	width: 24px;
	height: 2.5px;
	border-radius: 2px;
	background: currentColor;
	box-shadow: 0 7.5px 0 currentColor, 0 15px 0 currentColor;
}

/* ---- Hero (.lcc-hero) — reference .hero ---- */
/* Two soft radial glows over the editable container gradient (reference .hero::before). */
.lcc-hero {
	position: relative;
}
.lcc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 10% 6%, rgba(40, 168, 224, 0.28), transparent 620px),
		radial-gradient(circle at 92% 10%, rgba(15, 61, 122, 0.55), transparent 560px);
}
.lcc-hero > .e-con-inner {
	position: relative;
}
/* Highlight word inside a heading: <span class="gt">…</span> (reference .hero .gt) */
.lcc-hero .gt,
.lcc-navyband .gt {
	background: linear-gradient(135deg, var(--e-global-color-gtstart), var(--e-global-color-gtend));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.gt {
	background: linear-gradient(135deg, var(--e-global-color-primary), var(--e-global-color-accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
/* CTA rows (.lcc-ctarow): buttons stretch to the tallest, like the reference flex .ctarow */
.lcc-ctarow .elementor-widget-button,
.lcc-ctarow .elementor-widget-button > .elementor-widget-container,
.lcc-ctarow .elementor-widget-button .elementor-button-wrapper {
	display: flex;
	align-items: stretch;
}
.lcc-ctarow .elementor-widget-button .elementor-button {
	display: inline-flex;
	align-items: center;
}
/* Glass/secondary button (.lcc-btn-glass): no gradient, translucent fill (reference .btn.gl) */
.lcc-btn-glass .elementor-button,
.lcc-btn-glass .elementor-button:hover,
.lcc-btn-glass .elementor-button:focus {
	background-image: none;
}
/* Reviews badge: frosted, hover lift (reference .gbadge) */
.lcc-gbadge {
	color: #fff;
	text-decoration: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.lcc-gbadge:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.14);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
}

/* ---- Forms (.lcc-form) — reference .form / .gbpform fields ---- */
.lcc-form .elementor-field-textual {
	padding: 12px 14px;
	min-height: 44px;
	line-height: normal;
}
.lcc-form .elementor-field-textual:focus {
	background: #fff;
	outline: none;
}
.lcc-form .elementor-field-textual::placeholder {
	color: #757575;
	opacity: 1;
}
.lcc-form .elementor-field-group {
	padding: 0;
}
.lcc-form .elementor-form-fields-wrapper {
	margin: 0 !important;
}
.lcc-form .elementor-field-type-submit {
	margin-top: 6px;   /* 12 row gap + 6 = 18 above the submit, as in the reference */
	margin-bottom: 0 !important;
}
.lcc-form .elementor-field-type-submit .elementor-button {
	padding: 15px 26px;
}
/* Large form variant (Contact page): fields 46px, textarea keeps the reference's inline-block gap */
.lcc-form-lg .elementor-field-textual {
	padding: 13px 15px;
	min-height: 46px;
}
.lcc-form-lg textarea.elementor-field-textual {
	min-height: 82px;
}
.lcc-form-lg .elementor-field-type-submit {
	margin-top: 11.1px;
}
/* Contact info list: icons sit 3px below the line top, rows padded 8px (reference .infonap .fline) */
.lcc-nap .elementor-icon-list-icon {
	margin-top: 3px;
}

/* ---- Cards (.lcc-card) — reference .card hover lift ---- */
.lcc-card {
	transition: transform 200ms ease, box-shadow 200ms ease;
	color: inherit;
	text-decoration: none;
}
/* Loop items are grid cells stretched to the row; the card fills its cell (reference grid stretch). */
.e-loop-item > .lcc-card {
	height: 100%;
}
.lcc-card:hover {
	transform: translateY(-4px);
}
/* Big service cards: link row pinned to the bottom (reference .svcgrid .lnk{margin-top:auto}) */
.lcc-card-link-bottom {
	margin-top: auto !important;
}
.lcc-card-big .elementor-widget-image img {
	display: block;
}
/* Tight line boxes inside cards: icon image sits centred, "Learn more →" row is 21.6px like the reference .lnk */
.lcc-card .elementor-widget-image img {
	display: block;
}
.lcc-card-link .elementor-icon-wrapper {
	line-height: 0;
}

/* ---- Navy bands (.lcc-navyband) — reference .navyband::before glows, glass card, stat tiles ---- */
.lcc-navyband {
	position: relative;
}
.lcc-navyband::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 14% 8%, rgba(40, 168, 224, 0.22), transparent 620px),
		radial-gradient(circle at 88% 0%, rgba(15, 61, 122, 0.5), transparent 560px);
}
.lcc-navyband > .e-con-inner {
	position: relative;
}
.lcc-lead-center {
	max-width: 100%;
}
.lcc-glass {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 34px 80px rgba(0, 10, 34, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}
.lcc-stat {
	position: relative;
}
.lcc-stat::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(135deg, var(--e-global-color-primary), var(--e-global-color-accent));
}
.lcc-stat-k {
	align-items: baseline;
}
.lcc-stat-k .elementor-widget {
	width: auto;
}

/* ---- Reviews carousel (.lcc-tcarousel) — reference .tcarousel / .tdots ---- */
.swiper-slide > .lcc-tcard,
.e-loop-item > .lcc-tcard {
	height: 100%;
}
.lcc-tcarousel .swiper-pagination-bullet {
	opacity: 1;
	transition: 200ms;
	border-radius: 50%;
}
.lcc-tcarousel .swiper-pagination-bullet-active {
	background: var(--e-global-color-primary) !important;
	width: 26px;
	border-radius: 5px;
}
.lcc-tquote p:last-child {
	margin-bottom: 0;
}
/* Arrows outside the track: 48px round buttons in 62px side lanes, centred on the cards
   (reference .tcarousel: gap 14, .tprev/.tnext 48px; 42px below 560px). */
.lcc-tcarousel.elementor-arrows-position-outside .swiper {
	width: calc(100% - 124px);
	margin: 0 62px;
}
.lcc-tcarousel {
	/* centre the arrows on the cards (Elementor centres on the widget box, which is 5px taller) */
	--arrow-prev-top-position: -2.5px !important;
	--arrow-next-top-position: -2.5px !important;
}
.lcc-tcarousel .elementor-swiper-button {
	width: 48px;
	height: 48px;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.lcc-tcarousel .elementor-swiper-button:hover {
	transform: translateY(calc(-50% - 1px));
}
@media (max-width: 560px) {
	.lcc-tcarousel.elementor-arrows-position-outside .swiper {
		width: calc(100% - 112px);
		margin: 0 56px;
	}
	.lcc-tcarousel .elementor-swiper-button {
		width: 42px;
		height: 42px;
	}
}

/* ---- How we work (.lcc-steps) — reference .pflow / .pstep / .pn ---- */
/* Automatic step numbers (follow the Process Steps order) and the sky arrows between steps. */
.lcc-steps .elementor-loop-container {
	counter-reset: lcc-step;
}
.lcc-steps .e-loop-item {
	counter-increment: lcc-step;
	position: relative;
}
/* Elementor styles every .e-con::before as an absolute, full-size overlay box — so lay the counter out
   as a centred flex box inside it (otherwise the number sits in the tile's top-left corner). */
.lcc-steps .lcc-pn::before {
	content: counter(lcc-step);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: "Inter", sans-serif;
	font-weight: 900;
	font-size: 37px;
	line-height: 1;
	border-radius: inherit;
}
.lcc-steps .e-loop-item:not(:last-child)::after {
	content: "\2192";
	position: absolute;
	right: -20px;
	top: 26px;
	color: var(--e-global-color-accent);
	font-size: 36px;
	font-weight: 800;
	line-height: 1;
}
@media (max-width: 900px) {
	.lcc-steps .e-loop-item:not(:last-child)::after {
		display: none;
	}
}

/* ---- Service pages: hero pill, checklist ---- */
.lcc-pill {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
/* Google-review card: the small G logo sits in a tight 15px line (no inline line box) */
.lcc-grsub .elementor-widget-image img {
	display: block;
}
/* "What's included": one Icon List laid out as the reference 2-column .checks.inccols grid */
.lcc-checks .elementor-icon-list-items {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px 48px;
}
.lcc-checks .elementor-icon-list-item {
	display: flex;
	align-items: flex-start;
	gap: 11px;
}
.lcc-checks .elementor-icon-list-icon {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--e-global-color-pale);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.lcc-checks .elementor-icon-list-icon svg {
	margin: 0 !important;
}
.lcc-checks .elementor-icon-list-text {
	padding-left: 0 !important;
}
.lcc-checks-1 .elementor-icon-list-items {
	grid-template-columns: 1fr;
	gap: 10px;
}
@media (max-width: 640px) {
	.lcc-checks .elementor-icon-list-items {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.lcc-checks-1 .elementor-icon-list-items {
		gap: 10px;
	}
}

/* ---- FAQ accordion (.lcc-acc, Nested Accordion) — reference .qa: bottom hairline per item, 22px "+" that rotates to "x" when open ---- */
.lcc-acc .e-n-accordion-item {
	border-bottom: 1px solid var(--e-global-color-hairline);
}
.lcc-acc .e-n-accordion-item-title-text {
	line-height: normal;
}
.lcc-acc .e-n-accordion-item-title-icon span {
	height: 27px;               /* reference: 22px "+" in a normal (Inter) line box */
	transition: transform 200ms;
}
.lcc-acc .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon span {
	transform: rotate(45deg);
}
.lcc-acc .e-n-accordion-item-title:focus-visible {
	outline-offset: -3px;
}
.lcc-acc .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* ---- Blog post body (.lcc-post-content) — article typography on top of the kit tokens ---- */
.lcc-post-content h2,
.lcc-post-content h3,
.lcc-post-content h4 {
	color: var(--e-global-color-text);
	letter-spacing: -0.01em;
	margin: 40px 0 14px;
	line-height: 1.2;
}
.lcc-post-content h2 { font-size: 27px; font-weight: 800; }
.lcc-post-content h3 { font-size: 21px; font-weight: 800; margin-top: 30px; }
.lcc-post-content h4 { font-size: 18px; font-weight: 700; margin-top: 24px; }
.lcc-post-content > :first-child { margin-top: 0; }
.lcc-post-content p { margin: 0 0 18px; }
.lcc-post-content ul,
.lcc-post-content ol { margin: 0 0 20px 22px; padding: 0; }
.lcc-post-content li { margin-bottom: 8px; }
.lcc-post-content li::marker { color: var(--e-global-color-primary); }
.lcc-post-content a { color: var(--e-global-color-primary); text-decoration: underline; text-underline-offset: 3px; }
.lcc-post-content a:hover { color: var(--e-global-color-navy); }
.lcc-post-content img { display: block; max-width: 100%; height: auto; border-radius: 16px; margin: 28px 0; }
.lcc-post-content blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--e-global-color-accent); color: var(--e-global-color-text); font-weight: 600; }
.lcc-post-content table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; }
.lcc-post-content th,
.lcc-post-content td { border: 1px solid var(--e-global-color-hairline); padding: 10px 12px; text-align: left; }
.lcc-post-content th { background: var(--e-global-color-pale); color: var(--e-global-color-text); }
/* Table of contents beside the article */
.lcc-post-content h2,
.lcc-post-content h3 { scroll-margin-top: 100px; }
.lcc-toc .elementor-toc__list-item { margin-bottom: 0; }
.lcc-toc .elementor-toc__list-item-text { line-height: 1.45; }
.lcc-toc .elementor-toc__header-title { margin: 0; }
.lcc-toc .elementor-toc__body { padding-top: 12px; }
.lcc-toc .elementor-toc__list-wrapper { margin: 0; padding-left: 1.4em; }
.lcc-toc .elementor-toc__list-item-text.elementor-item-active { font-weight: 700; }
@media (max-width: 900px) {
	.lcc-post-aside { position: static !important; }
}
/* Featured image band overlaps the navy hero like the service-page cards. */
.lcc-post-featband { margin-top: -64px; position: relative; z-index: 1; }
/* Loop grid pagination */
.lcc-blog-grid .elementor-pagination { display: flex; justify-content: center; row-gap: 8px; flex-wrap: wrap; }
.lcc-blog-grid .elementor-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--e-global-color-hairline); background: var(--e-global-color-white); }
.lcc-blog-grid .elementor-pagination .page-numbers.current { background: var(--e-global-color-primary); border-color: var(--e-global-color-primary); color: var(--e-global-color-white) !important; }
.lcc-blog-grid .elementor-pagination .page-numbers.dots { border: 0; background: transparent; }

/* Footer credit link */
.lcc-footer .lcc-credit a {
	color: var(--e-global-color-footertext);
	text-decoration: none;
}
.lcc-footer .lcc-credit a:hover {
	color: var(--e-global-color-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Respect reduced-motion. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}