/* =====================================================================
   Imperial Cardiac Center - child theme styles
   Adapted from the HTML site's icc_main.css for WordPress blocks.
   Palette: Cardiac Red #DB281F | Highlight Red #E4554E | Near Black #16100E
   ===================================================================== */

:root {
	--cardiacred: #DB281F;
	--highlightred: #E4554E;
	--nearblack: #16100E;
	--palehorse: #EDEDEB;
	--blueskies: #E9EFF3;
	--icc-header-h: 210px;
}

/* ---------------------------------------------------------------- base */
.icc-site { margin: 0; padding: 0; font-size: 16px; font-family: 'Roboto', Arial, sans-serif; line-height: 125%;
	color: var(--nearblack); background-color: #FFF; -webkit-font-smoothing: antialiased; }
.icc-site * { box-sizing: border-box; }
.icc-site .fl-page, .icc-site .fl-page-content { background: #FFF; }
.icc-site img { max-width: 100%; height: auto; }
.icc-site a { text-decoration: none; color: var(--highlightred); }
.icc-site a:hover, .icc-site a:focus { color: var(--cardiacred); text-decoration: none; }
.icc-site p { margin: 10px 0; line-height: 24px; font-size: 16px; }
.icc-site li { padding: 5px 0; line-height: 1.35; }
.icc-site h1, .icc-site h2, .icc-site h3 { font-family: 'Roboto', Arial, sans-serif; color: var(--nearblack); font-weight: bold;
	text-transform: none; letter-spacing: normal; }
.icc-site h2 { font-size: 1.6em; text-align: center; line-height: 110%; margin: 20px 0 15px 0; }
.icc-site h3 { font-size: 1.3em; text-align: center; line-height: 110%; margin: 18px 0 12px 0; }
.icc-site h2.left, .icc-site h3.left { text-align: left; }
.icc-site .has-text-align-center { text-align: center; }
.icc-site strong { font-weight: bold; }

/* anchors: keep section titles from hiding under the fixed header */
.icc-page [id] { scroll-margin-top: calc(var(--icc-header-h) + 10px); }

/* ---------------------------------------------------------------- header */
.icc-header { width: 100%; padding: 15px 0; margin: 0; height: var(--icc-header-h);
	background-image: url(../images/toppulse.webp); background-position: right top; background-size: 100% auto; background-repeat: no-repeat;
	position: fixed; top: 0; left: 0; z-index: 100; }
.admin-bar .icc-header { top: 32px; }
.header-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 30px;
	width: 100%; max-width: 1440px; margin: 0 auto; }
.header-bar .logo { float: none; padding: 0; flex: 0 0 auto; }
.header-bar .logo a, .header-bar .logo a:hover { border: none; }
.header-bar .logo img { display: block; width: auto; height: 130px; }
.header-bar .logo-right img { height: 113px; }
.header-bar .navarea { flex: 1 1 auto; align-self: flex-start; padding: 18px 0 0 0; text-align: center; }
.header-bar nav ul { list-style-type: none; margin: 0; padding: 0; }
.header-bar nav li { display: inline-block; font-size: 16px; padding: 4px 9px; }
.header-bar nav a, .header-bar nav a:link, .header-bar nav a:visited { color: var(--nearblack); transition: 0.3s; padding: 0; display: inline; }
.header-bar nav a:hover { border-bottom: 5px solid var(--cardiacred); color: var(--cardiacred); }
.header-bar nav > ul > .current-menu-item > a, .header-bar nav > ul > .current-menu-ancestor > a { color: var(--cardiacred); }
.header-bar nav ul.sub-menu a, .header-bar nav ul.sub-menu a:link, .header-bar nav ul.sub-menu a:visited { color: var(--nearblack); }

/* dropdown: Cardiology Services */
.header-bar nav li.menu-item-has-children { position: relative; }
.header-bar .submenu-arrow { font-size: 0.75em; margin-left: 2px; }
.header-bar nav ul.sub-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
	z-index: 200; min-width: 250px; margin: 0; padding: 8px 0; list-style-type: none; text-align: left;
	background-color: #FFF; border-top: 4px solid var(--cardiacred); border-radius: 0 0 10px 10px;
	box-shadow: 0 8px 20px rgba(22, 16, 14, 0.18); }
.header-bar nav ul.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 10px; }
.header-bar nav li.menu-item-has-children:hover > ul.sub-menu,
.header-bar nav li.menu-item-has-children:focus-within > ul.sub-menu { display: block; }
.header-bar nav ul.sub-menu li { display: block; padding: 0; font-size: 15px; }
.header-bar nav ul.sub-menu a { display: block; padding: 8px 18px; border: none; white-space: nowrap; }
.header-bar nav ul.sub-menu a:hover, .header-bar nav ul.sub-menu a:focus-visible { background-color: var(--blueskies); color: var(--cardiacred); border: none; outline: none; }
.menu-toggle, .submenu-toggle { display: none; }

/* ---------------------------------------------------------------- hero banners */
.icc-hero { width: 100%; max-width: 1440px; margin: 0 auto; padding: 20px 0 0 0; min-height: 659px;
	background-position: center top; background-size: 100% auto; background-repeat: no-repeat;
	display: flex; align-items: center; justify-content: center; }
.hero-main { background-image: url(../images/splash-main.jpg); background-position: left top; }
.hero-services { background-image: url(../images/splash-services.jpg); }
.hero-resources { background-image: url(../images/splash-resources.jpg); }
.hero-staff { background-image: url(../images/splash-staff.jpg); }
.hero-contact { background-image: url(../images/splash-contact.jpg); }
.hero-rehab { background-color: var(--blueskies);
	background-image: url(../images/rehab_watercolor.webp), linear-gradient(#FFF 0%, var(--blueskies) 60%);
	background-position: bottom; background-size: 100% auto, 100% 100%; }
.icc-site .icc-hero h1 { display: block; width: fit-content; max-width: 44%; margin: 0 auto; padding: 18px 32px 16px 32px;
	text-align: center; color: var(--nearblack); font-size: 42px; line-height: 1.15; font-weight: 700;
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: 14px;
	box-shadow: 0 6px 18px rgba(22, 16, 14, 0.18); background-color: rgba(255, 255, 255, 0.20); }

/* Wide screens: center the title in the visible part of the banner, between the header's pulse
   line and the banner's own pulse line (same math as the HTML site). */
@media only screen and (min-width: 932px) {
	.icc-hero { position: relative; container-type: inline-size;
		--hero-top: min(10.625vw, 170px); --hero-line: 39.94cqw; --hero-box: 659px; }
	.hero-rehab { --hero-line: calc(var(--hero-box) - 3.375cqw); }
	.icc-hero > .wp-block-group__inner-container { position: absolute; left: 0; right: 0; top: var(--hero-top);
		height: calc(var(--hero-line) - var(--hero-top)); display: flex; align-items: center; justify-content: center; }
}

/* ---------------------------------------------------------------- sections */
.icc-section { width: 100%; display: flex; align-items: center; justify-content: center; padding: 40px 0; min-height: 568px; }
.icc-section.compact { min-height: 0; }
.icc-section > .wp-block-group__inner-container { width: 86%; max-width: 1200px; margin: 0 auto; }
.palehorserising { background-image: linear-gradient(#FFF, var(--palehorse)); }
.palehorse { background-color: var(--palehorse); }
.blueskies { background-color: var(--blueskies); }
.whiteout { background-color: #FFF; }
.icc-site .onecolumn { max-width: 850px; margin: 0 auto; }
.onecolumn::after { content: ""; display: table; clear: both; }

/* columns (were "fiftyfifty" / "triplets") */
.icc-site .icc-columns { max-width: 1100px; margin: 20px auto; gap: 40px; }
.icc-site .icc-columns > .wp-block-column { padding: 20px; }
.icc-site .icc-columns.single { max-width: 520px; }

/* ---------------------------------------------------------------- images */
.icc-site .wp-block-image { margin: 10px 0; }
.icc-site .wp-block-image.aligncenter, .icc-site .wp-block-image .aligncenter { text-align: center; margin-left: auto; margin-right: auto; }
.icc-site .mainpic { margin: 0; }
.icc-site .mainpic .alignleft, .icc-site .mainpic.alignleft { float: left; margin: 10px 30px 30px 0; }
.icc-site .mainpic img { border-radius: 20px; width: 290px; }
.icc-site .plainimage img { border-radius: 20px; margin: 15px; }
.icc-site .roundcorners img { border-radius: 12px; width: 180px; }

/* ---------------------------------------------------------------- buttons */
.icc-site .icc-buttons { margin: 50px auto 30px auto; }
.icc-site .icc-buttons .wp-block-button__link { background-color: var(--highlightred); border: 3px solid var(--cardiacred); color: #FFF;
	font-size: 16px; line-height: 1.3; padding: 8px 16px; text-transform: uppercase; border-radius: 10px; transition: 0.3s; font-family: inherit; }
.icc-site .icc-buttons .wp-block-button__link:hover, .icc-site .icc-buttons .wp-block-button__link:focus { background-color: var(--cardiacred);
	color: #FFF; letter-spacing: 0.5px; }
.icc-site .icc-buttons.is-small { margin: 10px auto 15px auto; }
.icc-site .icc-buttons.is-small .wp-block-button__link { font-size: 12px; padding: 4px 8px; border-width: 2px; }

/* ---------------------------------------------------------------- providers (staff cards) */
.icc-site .providers { gap: 0 20px; margin: 20px 0; }
.icc-site .provider-card { width: 220px; margin: 20px 10px; text-align: center; }
.icc-site .provider-card .wp-block-image { margin: 0 0 10px 0; text-align: center; }
.icc-site .provider-card img { border-radius: 12px; width: 180px; height: 180px; object-fit: cover; }
.icc-site .provider-name { margin: 0; line-height: 1.3; }

/* ---------------------------------------------------------------- patient resource icons */
.icc-site .patientresources { gap: 20px 30px; margin: 30px 0 0 0; }
.icc-site .patientresources .wp-block-image { margin: 0; text-align: center; width: 160px; transition: transform .2s; }
.icc-site .patientresources .wp-block-image:hover { transform: scale(1.1); }
.icc-site .patientresources img { width: 100px; height: 100px; }
.icc-site .patientresources figcaption { margin-top: 6px; font-weight: bold; font-size: 16px; color: var(--cardiacred); }
.icc-site .patientresources figcaption a { color: var(--cardiacred); }

/* ---------------------------------------------------------------- lists */
.icc-site .icc-page ul, .icc-site .icc-page ol { padding-left: 1.4em; margin: 10px 0; }
.icc-site .checkbullet { list-style: none; padding-left: 24px; }
.icc-site .checkbullet li { padding-bottom: 15px; }
.icc-site .checkbullet li::before { content: '\2714'; font-size: 1.2em; font-weight: bold; display: inline-block; color: #00CC00;
	padding: 0 8px 0 0; margin-left: -24px; }
.icc-site .formslist { list-style: none; padding-left: 0; margin: 20px 0; }
.icc-site .formslist li { padding: 0 0 10px 0; line-height: 24px; }
.icc-site .formslist a::before { content: ""; display: inline-block; width: 22px; height: 22px; margin: 0 10px 0 0; vertical-align: middle;
	background: url(../images/IconAdobe.gif) no-repeat center / 22px 22px; }
.icc-site .formslist a.file-word::before { background-image: url(../images/IconWord.gif); }
.icc-site .pdf-link a::before { content: ""; display: inline-block; width: 22px; height: 22px; margin: 0 8px 0 0; vertical-align: middle;
	background: url(../images/IconAdobe.gif) no-repeat center / 22px 22px; }
.icc-site .education ul { list-style: none; padding-left: 0; margin: 0 0 10px 0; }
.icc-site .education li { display: block; padding: 5px 0; }
.icc-site .education a { color: var(--nearblack); }
.icc-site .education a:hover { color: var(--highlightred); }
.icc-site .education h3 { background-color: var(--blueskies); padding: 5px 0; margin: 10px 0 5px 0; }
.icc-site .twocol-list { columns: 2; column-gap: 50px; }
.icc-site .twocol-list li { break-inside: avoid; }
.icc-site .publications li { padding: 6px 0; }

/* ---------------------------------------------------------------- locations */
.icc-site .locmap { height: 180px; width: 130px; margin: 15px; border-radius: 20px; border: none; flex: 0 0 auto; }
.icc-site .information { font-size: 22px; font-weight: bold; padding-left: 3px; line-height: 150%; vertical-align: -2px; }
.icc-site .locations > .wp-block-column.location { display: flex; align-items: center; justify-content: center; gap: 0 5px; padding: 10px; }
.icc-site .locations p a { white-space: nowrap; }

/* ---------------------------------------------------------------- services: icon quick menu */
.service-icons ul { list-style-type: none; margin: 30px 0 10px 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.service-icons li { width: 130px; padding: 0; text-align: center; }
.icc-site .service-icons a { display: block; color: var(--nearblack); font-weight: bold; font-size: 14px; line-height: 18px; border: none; }
.service-icons .tile { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; margin: 0 auto 10px auto;
	background-color: #EBD9B8; background-image: linear-gradient(145deg, #F3E5CB 0%, #E2CCA4 100%);
	border-radius: 10px; box-shadow: 0 3px 6px rgba(22, 16, 14, .18); transition: transform .2s; }
.service-icons .tile svg { width: 58px; height: 58px; fill: #3C6EB4; }
.icc-site .service-icons a:hover { color: var(--cardiacred); }
.service-icons a:hover .tile, .service-icons a:focus-visible .tile { transform: translateY(-4px); }
.service-icons a:focus-visible { outline: 3px solid var(--cardiacred); outline-offset: 4px; border-radius: 10px; }
.icc-site .service-lists .wp-block-column { max-width: 360px; }

/* ---------------------------------------------------------------- cardiac rehab pillars */
.icc-site .rehab-pillars { gap: 30px; margin: 30px auto 10px auto; }
.icc-site .rehab-pillars > .wp-block-column { text-align: center; padding: 10px 15px; border-top: 5px solid var(--cardiacred);
	background-color: #FFF; border-radius: 0 0 12px 12px; max-width: 300px; }
.icc-site .rehab-pillars h3 { margin: 12px 0 6px 0; }

/* ---------------------------------------------------------------- footer */
.icc-footer { background-color: #FFF; padding: 12px 0; width: 86%; max-width: 1200px; margin: 0 auto; min-height: 140px;
	background-image: url(../images/IAC.png); background-position: left 50px center; background-repeat: no-repeat; }
.icc-footer .copyright { color: #666; text-align: center; font-size: 12px; margin: 50px 0 15px 0; }
.icc-footer .obsidian { font-family: arial, verdana; font-size: 9px; text-align: center; color: #C2E0B8; }
.icc-footer .obsidian a, .icc-footer .obsidian a:visited { color: #C2E0B8; transition: 0.3s; }
.icc-footer .obsidian a:hover { text-shadow: 0 0 15px #A3FA01; color: #A3FA01; letter-spacing: 0.5px; }

/* ---------------------------------------------------------------- scroll animations (added by js/icc.js) */
.anim-left, .anim-right, .anim-top, .anim-bottom { transition: transform 0.8s ease, opacity 0.8s ease; }
.anim-fade { transition: opacity 1.2s ease; }
.anim-fade.visible { transition-delay: 0.3s; }
.anim-left.invisible { opacity: 0; transform: translate(40px, 0); }
.anim-right.invisible { opacity: 0; transform: translate(-40px, 0); }
.anim-bottom.invisible { opacity: 0; transform: translate(0, 40px); }
.anim-top.invisible { opacity: 0; transform: translate(0, -40px); }
.anim-fade.invisible { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	.anim-left, .anim-right, .anim-top, .anim-bottom, .anim-fade { transition: none; }
}

/* ===================================================================== responsive */

/* wide screens: keep the pulse line its original size and repeat it */
@media only screen and (min-width: 1601px) {
	.icc-header { background-size: auto 220px; background-repeat: repeat-x; background-position: center top; }
}

@media only screen and (max-width: 1280px) {
	.header-bar { padding: 0 15px; gap: 10px; }
	.header-bar .logo img { height: 100px; }
	.header-bar nav li { font-size: 15px; padding: 3px 7px; }
}

@media only screen and (max-width: 1024px) {
	.header-bar .logo img { height: 80px; }
	.header-bar nav li { font-size: 14px; padding: 2px 6px; }
	.header-bar .navarea { padding-top: 6px; }
	.icc-hero { min-height: 444px; padding-top: 60px; }
	.icc-section > .wp-block-group__inner-container { width: 94%; }
	.icc-site .mainpic img { width: 180px; }
	.icc-site .mainpic .alignleft { margin: 10px 30px 20px 0; }
	.icc-site .locmap { width: 160px; }
}
@media only screen and (min-width: 932px) and (max-width: 1024px) {
	.icc-hero { --hero-box: 444px; }
	.icc-site .icc-hero h1 { font-size: 32px; max-width: 50%; padding: 12px 22px; }
}

/* tablet: three locations side by side, map above address */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
	.icc-site .locations.wp-block-columns { flex-wrap: nowrap !important; gap: 16px; }
	.icc-site .locations > .wp-block-column.location { flex-direction: column; flex-basis: 0 !important; }
	.icc-site .locmap { width: 100%; max-width: 220px; height: 180px; margin: 0 0 15px 0; }
}

/* hamburger menu: tablet and phone (up to 980px) */
@media only screen and (max-width: 980px) {
	.icc-header { padding: 12px 0 0 0; }
	.header-bar { position: relative; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 12px; padding: 0 20px 10px 20px; }
	.header-bar .logo { order: 1; }
	.header-bar .logo-right { order: 2; }
	.header-bar .logo img, .header-bar .logo-right img { height: 80px; }
	.menu-toggle { order: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
		width: 52px; height: 52px; margin-left: auto; padding: 0; cursor: pointer;
		background-color: #FFF; border: 2px solid var(--cardiacred); border-radius: 10px; }
	.menu-toggle .menu-bar { display: block; width: 28px; height: 3px; border-radius: 2px; background-color: var(--nearblack); }
	.menu-toggle:hover .menu-bar { background-color: var(--cardiacred); }
	.menu-toggle:focus-visible, .submenu-toggle:focus-visible { outline: 3px solid var(--cardiacred); outline-offset: 3px; }
	.menu-toggle .menu-close { display: none; font-size: 26px; line-height: 1; color: var(--cardiacred); }
	.menu-open .menu-toggle .menu-bar { display: none; }
	.menu-open .menu-toggle .menu-close { display: block; }

	.header-bar .navarea { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 300;
		order: 4; flex: none; align-self: auto; padding: 0; text-align: center;
		max-height: calc(100vh - 130px); overflow-y: auto; background-color: #FFF; box-shadow: 0 10px 20px rgba(22, 16, 14, 0.25); }
	.header-bar.menu-open .navarea { display: block; }
	.header-bar nav li { display: block; padding: 0; font-size: 17px; font-weight: bold; background-color: var(--blueskies); border-top: 1px solid var(--nearblack); }
	.header-bar nav li:last-child { border-bottom: 1px solid var(--nearblack); }
	.header-bar nav li:hover { background-color: var(--highlightred); }
	.header-bar nav a, .header-bar nav a:link, .header-bar nav a:visited { display: block; padding: 12px 10px; border: none; }
	.header-bar nav a:hover { border: none; color: #FFF; }

	.header-bar nav li.menu-item-has-children { display: flex; flex-wrap: wrap; align-items: stretch; }
	.header-bar nav li.menu-item-has-children:hover { background-color: var(--blueskies); }
	.header-bar nav li.menu-item-has-children > a { flex: 1 1 auto; padding-left: 62px; }
	.header-bar nav li.menu-item-has-children > a:hover { background-color: var(--highlightred); }
	.header-bar .submenu-arrow { display: none; }
	.submenu-toggle { display: block; flex: 0 0 52px; min-height: 48px; padding: 0; cursor: pointer; font-size: 20px; color: var(--nearblack);
		background-color: transparent; border: none; border-left: 1px solid var(--palehorse); }
	.submenu-toggle::before { content: "\25BE"; }
	.submenu-open > .submenu-toggle::before { content: "\25B4"; }
	.submenu-toggle:hover { background-color: var(--highlightred); color: #FFF; }
	.header-bar nav li.menu-item-has-children > ul.sub-menu,
	.header-bar nav li.menu-item-has-children:hover > ul.sub-menu,
	.header-bar nav li.menu-item-has-children:focus-within > ul.sub-menu { display: none; }
	.header-bar nav li.menu-item-has-children.submenu-open > ul.sub-menu { display: block; flex: 1 1 100%; position: static; transform: none;
		min-width: 0; padding: 0; text-align: center; border: none; border-radius: 0; box-shadow: none; background-color: #FFF; }
	.header-bar nav ul.sub-menu::before { display: none; }
	.header-bar nav ul.sub-menu li { background-color: #FFF; border-top: 1px solid var(--palehorse); font-weight: normal; font-size: 16px; }
	.header-bar nav ul.sub-menu li:last-child { border-bottom: none; }
	.header-bar nav ul.sub-menu li:hover { background-color: var(--highlightred); }
	.header-bar nav ul.sub-menu a { padding: 10px; white-space: normal; }
	.header-bar nav ul.sub-menu a:hover { background-color: transparent; color: #FFF; }

	.icc-site .icc-hero h1 { font-size: 30px; max-width: 70%; padding: 12px 22px; }
}

@media only screen and (max-width: 782px) {
	.admin-bar .icc-header { top: 46px; }
}

/* phone */
@media only screen and (max-width: 768px) {
	:root { --icc-header-h: 0px; }
	.icc-header { position: relative; height: auto; background-image: none; background-color: #FFF; }
	.admin-bar .icc-header { top: 0; }
	.header-bar { padding: 0 12px 12px 12px; gap: 8px; }
	.header-bar .logo img, .header-bar .logo-right img { height: 64px; }
	.header-bar .navarea { max-height: calc(100vh - 90px); }
	.icc-hero { min-height: 0; aspect-ratio: 1600 / 692; padding: 0 0 4% 0; }
	.hero-rehab { aspect-ratio: auto; min-height: 220px; }
	.icc-site .icc-hero h1 { font-size: 24px; max-width: 86%; padding: 10px 16px; }
	.icc-section { padding: 30px 0; min-height: 0; align-items: flex-start; }
	.icc-section > .wp-block-group__inner-container { width: auto; margin: 0 20px; }
	.icc-site .icc-columns { gap: 10px; margin: 10px auto; }
	.icc-site .icc-columns > .wp-block-column { padding: 10px 0; }
	.icc-site .mainpic .alignleft { float: none; margin: 10px auto 20px auto; display: table; }
	.icc-site .mainpic img { width: 220px; }
	.icc-site .twocol-list { columns: 1; }
	.icc-site .provider-card { width: 150px; margin: 10px 5px; }
	.icc-site .provider-card img { width: 140px; height: 140px; }
	.icc-site .patientresources .wp-block-image { width: 118px; }
	.icc-site .patientresources img { width: 80px; height: 80px; }
	.service-icons li { width: 110px; }
	.service-icons .tile { width: 80px; height: 80px; }
	.service-icons .tile svg { width: 48px; height: 48px; }
	.icc-footer { width: 100%; background-position: left 5px center; background-size: 80px 80px; }
	.icc-footer .copyright { max-width: 180px; margin: 35px auto 15px auto; }
}

@media only screen and (max-width: 600px) {
	.icc-site .locations > .wp-block-column.location { justify-content: flex-start; }
	.icc-site .locmap { width: 120px; height: 170px; margin: 10px 15px 10px 0; }
}

/* very small phones: hide the Cardiac Rehab logo */
@media only screen and (max-width: 449px) {
	.header-bar .logo-right { display: none; }
}