/* ==========================================================================
   TLC Pediatric — /home-copy/ responsive fixes
   Scope: .page-id-7352  (this page only — the live home page is untouched)
   Target: Salient 17.3.0 + WPBakery. Breakpoints match the theme's own
           grid: 690px (phone/grid switch) and 999px (tablet ceiling).
   Paste into: Appearance > Customize > Additional CSS
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. CONTENT BUG — hero eyebrow is 0.76px, not 0.76rem
   "LOS ANGELES DEVELOPMENTAL CARE ECOSYSTEM" renders under one pixel tall,
   i.e. invisible, on every device. Patched here, but fix it at the source in
   WPBakery too (edit that heading, change 0.76px -> 0.76rem).
   -------------------------------------------------------------------------- */
.page-id-7352 [style*="font-size: 0.76px"] {
	font-size: .8rem !important;
	letter-spacing: .08em;
}


/* --------------------------------------------------------------------------
   2. FLUID TYPOGRAPHY
   The page carries 63 hard-coded inline font sizes and zero responsive
   overrides, so headings render at their desktop size on a 375px phone
   (3.55rem = ~57px). Inline styles outrank stylesheets, so !important is
   required here — it is not laziness.
   -------------------------------------------------------------------------- */
.page-id-7352 [style*="font-size: 3.55rem"] {
	font-size: clamp(2rem, 4.4vw + .6rem, 3.55rem) !important;
}

.page-id-7352 [style*="font-size: 3.18rem"] {
	font-size: clamp(1.85rem, 4vw + .5rem, 3.18rem) !important;
}

.page-id-7352 [style*="font-size: 1.35rem"] {
	font-size: clamp(1.15rem, 1.2vw + .85rem, 1.35rem) !important;
}

.page-id-7352 [style*="font-size: 21px"] {
	font-size: clamp(1.05rem, 1vw + .8rem, 21px) !important;
}

/* Let long headings break sanely instead of pushing the page wide. */
.page-id-7352 .vc_custom_heading {
	overflow-wrap: break-word;
	text-wrap: balance;
}

/* Body copy is 15px (0.94rem) — under the comfortable minimum on a phone. */
@media only screen and (max-width: 690px) {
	.page-id-7352 [style*="font-size: 0.94rem"],
	.page-id-7352 [style*="font-size: 0.98rem"] {
		font-size: 1rem !important;
		line-height: 1.65 !important;
	}

	.page-id-7352 [style*="font-size: 0.76rem"] {
		font-size: .82rem !important;
	}
}


/* --------------------------------------------------------------------------
   3. THE MISSING TABLET TIER  (690px – 999px)
   Every column on this page is vc_col-sm-*, which Salient sets to its final
   width from 690px up. So a 4-across card row is still 4-across on a 700px
   tablet (~172px per card), and the 5-across image row is ~138px per tile.
   This adds the tier the build never got.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 690px) and (max-width: 999px) {

	/* Flex the column wrappers so half-width cards sit on an even baseline.
	   These two wrappers contain columns only — row backgrounds are siblings,
	   so this does not disturb them. */
	.page-id-7352 .row_col_wrap_12,
	.page-id-7352 .row_col_wrap_12_inner {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	/* 4-across -> 2-across (21 columns: service cards, values, audience tiles) */
	.page-id-7352 .vc_col-sm-3 {
		width: 50%;
	}

	/* 3-across -> 2-across */
	.page-id-7352 .vc_col-sm-4 {
		width: 50%;
	}

	/* 5-across image row -> 3-across */
	.page-id-7352 [class*="vc_col-sm-1/5"] {
		width: 33.333%;
	}
}


/* --------------------------------------------------------------------------
   4. EMPTY SPACER COLUMNS
   Four vc_col-sm-2 columns exist purely to centre an 8-wide content column
   (2 + 8 + 2). Below 1000px they steal a third of the row, and below 690px
   they stack as empty full-width divs that add phantom vertical gaps.
   Collapse them and let the content column take the room.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 999px) {
	.page-id-7352 .vc_col-sm-2:not(:has(.wpb_wrapper > *)) {
		display: none;
	}

	.page-id-7352 .wpb_row:has(.vc_col-sm-2:not(:has(.wpb_wrapper > *))) .vc_col-sm-8 {
		width: 100%;
	}
}


/* --------------------------------------------------------------------------
   5. FORCED LINE BREAKS
   Five headings contain hard <br> tags positioned for a desktop measure.
   They produce orphans and ragged breaks once the column narrows.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 999px) {
	.page-id-7352 .vc_custom_heading br {
		display: none;
	}
}


/* --------------------------------------------------------------------------
   6. HORIZONTAL OVERFLOW GUARD
   Full-bleed rows plus oversized type are the usual source of sideways
   scroll on this build. Constrain media rather than hiding overflow on
   <body>, which would break any sticky/position:sticky element.
   -------------------------------------------------------------------------- */
.page-id-7352 img,
.page-id-7352 video,
.page-id-7352 iframe {
	max-width: 100%;
	height: auto;
}

@media only screen and (max-width: 999px) {
	.page-id-7352 .wpb_row,
	.page-id-7352 .row_col_wrap_12 {
		max-width: 100%;
	}
}


/* --------------------------------------------------------------------------
   7. MOBILE SPACING + TAP TARGETS
   Desktop section padding (28px+ per column, plus row padding) eats a phone
   viewport. Tighten it, and bring links/buttons up to the 44px minimum.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 690px) {

	.page-id-7352 .vc_column-inner {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}

	/* Stacked columns should not double up their vertical padding. */
	.page-id-7352 .wpb_column + .wpb_column > .vc_column-inner {
		padding-top: 8px !important;
	}

	.page-id-7352 .nectar-button,
	.page-id-7352 .vc_btn3,
	.page-id-7352 a.nectar-cta {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}
/* ==========================================================================
   TLC Pediatric — /home-copy/  ADD-ON #2: phone layout (<= 690px)
   Append BELOW the first block. The first block added a tablet tier and
   fluid type; it never touched layout below 690px. This does.
   ========================================================================== */


/* --------------------------------------------------------------------------
   8. SECTION PADDING — the main cause of the endless scroll
   Nine rows carry an inline padding-top: 96px (plus 54px bottoms) sized for
   a desktop canvas. On a 390px phone that is ~900px of empty space, roughly
   two and a half screens of nothing. Inline styles, so !important is needed.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 690px) {
	.page-id-7352 [style*="padding-top: 96px"]    { padding-top: 40px !important; }
	.page-id-7352 [style*="padding-bottom: 96px"] { padding-bottom: 40px !important; }
	.page-id-7352 [style*="padding-bottom: 54px"] { padding-bottom: 28px !important; }
}


/* --------------------------------------------------------------------------
   9. TEAM JOURNEY VALUES — 8 stacked cards become a 2-across grid
   The 8 values sit in 4 outer sm-3 groups of 2. Identified reliably by their
   54px icon, which nothing else on the page uses. Halves the section height.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 690px) {
	.page-id-7352 .row_col_wrap_12:has(> .vc_col-sm-3 .custom-width-54px) {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.page-id-7352 .vc_col-sm-3:has(.custom-width-54px) {
		width: 50%;
	}

	/* Tighten the value cards so two fit comfortably side by side. */
	.page-id-7352 .vc_col-sm-3:has(.custom-width-54px) .vc_column-inner {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}

	.page-id-7352 .custom-width-54px {
		width: 40px !important;
	}
}


/* --------------------------------------------------------------------------
   10. THE 5-IMAGE ROW — stop 5 full-width photos stacking
   The vc_col-sm-1/5 tiles (220px images) become 2-across. Photos do not need
   full width to read, and this removes ~3 screens of scroll on its own.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 690px) {
	.page-id-7352 .row_col_wrap_12:has(> [class*="vc_col-sm-1/5"]) {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.page-id-7352 [class*="vc_col-sm-1/5"] {
		width: 50%;
	}

	.page-id-7352 .custom-width-220px {
		width: 100% !important;
		max-width: 220px;
	}
}


/* --------------------------------------------------------------------------
   11. DELIBERATELY LEFT FULL-WIDTH
   The 4 "quick-access" tiles (Families / Pediatricians / Community Partners /
   Careers) and the 4 therapy programme cards carry real sentence-length copy.
   At ~180px wide they would turn into narrow ragged columns, so they keep the
   full measure. Rules 9 and 10 are scoped by icon size specifically so they
   do not catch these. Nothing to change here — this note is why.
   -------------------------------------------------------------------------- */
/* ==========================================================================
   TLC Pediatric — site-wide footer styling
   Pairs with the Custom HTML widget. Paste into Additional CSS.
   NOT page-scoped: this is meant to apply everywhere.
   Ported from tlc-homepage-icl.pages.dev (--coral #ff7353, 34px radius).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Neutralise Salient's own footer chrome
   Salient wraps widgets in #footer-outer > #footer-widgets > .col > .widget,
   each with its own padding, background and column float. Flatten all of it
   so the card below sits on the page cleanly.
   -------------------------------------------------------------------------- */
#footer-outer,
#footer-widgets,
#footer-outer #footer-widgets .container,
#footer-outer .row,
#footer-outer .widget {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	float: none !important;
	width: auto !important;
}

#footer-outer .col {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Salient adds a copyright strip on some configs — this build has it off,
   but hide it defensively so it cannot appear under the new card. */
#footer-outer #copyright {
	display: none !important;
}


/* --------------------------------------------------------------------------
   2. The footer card
   -------------------------------------------------------------------------- */
.tlc-footer {
	--tlc-coral: #ff7353;
	--tlc-max: 1180px;

	display: grid;
	grid-template-columns: minmax(300px, 1.1fr) minmax(220px, 0.72fr) minmax(180px, 0.45fr);
	gap: 72px;
	width: min(calc(100% - 40px), var(--tlc-max));
	min-height: 360px;
	margin: 42px auto 40px;
	padding: 64px 58px;
	border-radius: 34px;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 42%),
		var(--tlc-coral);
	color: #fff;
	box-shadow: 0 -18px 70px rgba(183, 71, 52, .13);
	box-sizing: border-box;
}

.tlc-footer img {
	width: 102px;
	height: auto;
	margin-bottom: 24px;
}

.tlc-footer-brand p {
	max-width: 390px;
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, .82);
}

.tlc-footer h3 {
	margin: 0 0 18px;
	color: rgba(255, 255, 255, .68);
	font-size: .76rem;
	font-weight: 900;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tlc-footer-menu nav {
	display: grid;
	gap: 10px;
}

.tlc-footer a {
	color: #fff;
	font-weight: 800;
	text-decoration: none;
}

.tlc-footer a:hover {
	text-decoration: underline;
}


/* --------------------------------------------------------------------------
   3. Social icons
   -------------------------------------------------------------------------- */
.tlc-social-links {
	display: flex;
	gap: 10px;
}

.tlc-social-links a {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24);
}

.tlc-social-links svg {
	width: 20px;
	height: 20px;
	overflow: visible;
}

.tlc-social-links rect,
.tlc-social-links circle,
.tlc-social-links path {
	fill: none;
	stroke: #fff;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Facebook glyph is a solid shape, not a stroked outline. */
.tlc-social-links a[aria-label="Facebook"] path {
	fill: #fff;
	stroke: none;
}

.tlc-social-links a:hover {
	background: rgba(255, 255, 255, .24);
}

.tlc-footer-legal {
	margin: 22px 0 0;
	font-size: .82rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .72);
}

.tlc-footer-legal a {
	font-weight: 600;
}


/* --------------------------------------------------------------------------
   4. Responsive — matches the reference's 680px collapse
   -------------------------------------------------------------------------- */
@media (max-width: 999px) {
	.tlc-footer {
		grid-template-columns: 1fr 1fr;
		gap: 40px 48px;
		padding: 52px 44px;
	}

	.tlc-footer-brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 680px) {
	.tlc-footer {
		grid-template-columns: 1fr;
		gap: 34px;
		width: min(calc(100% - 28px), var(--tlc-max));
		min-height: 0;
		margin: 28px auto 24px;
		padding: 40px 26px;
		border-radius: 26px;
	}

	.tlc-footer-menu nav {
		grid-template-columns: 1fr;
	}

	/* 44px minimum tap target for footer links */
	.tlc-footer-menu nav a {
		padding: 6px 0;
	}
}