/* ==========================================================================
   Creative Healing - site styles (loaded after baseline.css)
   ========================================================================== */

/* Nunito Sans (SIL Open Font License 1.1), self-hosted. One "variable" file covers every weight. */
@font-face {
	font-family:"Nunito Sans";
	src:url(../fonts/nunito-sans-latin-wght-normal.woff2) format("woff2");
	font-weight:200 1000; font-style:normal; font-display:swap;
}
@font-face {
	font-family:"Nunito Sans";
	src:url(../fonts/nunito-sans-latin-wght-italic.woff2) format("woff2");
	font-weight:200 1000; font-style:italic; font-display:swap;
}

body										{ font-family:"Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing:0.2px; color:#2B2B2B; }
input, button, textarea, select				{ font-family:inherit; }

/* Body text: larger and more open than the old 13px Times */
p, ul, ol, dl, address						{ font-size:15px; line-height:24px; }
li ul, li ol								{ font-size:inherit; }

a, a:visited								{ color:#1F1F1F; text-decoration:none; border-bottom:1px dotted #1F1F1F; font-weight:700; }
a:hover									{ color:#106D27; text-decoration:none; border-bottom:1px solid #106D27; }

/* baseline.css removes all focus outlines; restore them for keyboard users */
:focus-visible								{ outline:2px solid #106D27; outline-offset:2px; }
main:focus								{ outline:none; }

img										{ max-width:100%; height:auto; }

dt										{ font-size:13px; text-align:center; text-transform:uppercase; font-style:normal; font-weight:800; letter-spacing:3px; color:#106D27; }
dd										{ margin-bottom:18px; }

footer									{ padding-top:75px; }
footer p									{ font-size:13px; line-height:22px; text-align:center; text-transform:uppercase; letter-spacing:3px; }
footer a,
footer a:visited							{ border:0; font-weight:normal; }

h1, h2, h3,
h4, h5, h6								{ text-align:center; font-size:18px; font-weight:800; text-transform:uppercase; letter-spacing:3px; }

main										{ padding-bottom:18px; }

p										{ margin-bottom:18px; }
p + p									{ text-indent:0; }


.frontload,
h1 span,
h2 span									{ position:absolute; top:0; left:-9999px; }

h1, h2									{ color:#106D27; }

/* "Skip to main content" link: hidden until a keyboard user tabs to it */
.skip-link								{ position:absolute; top:0; left:-9999px; z-index:100; }
.skip-link:focus							{ top:8px; left:8px; padding:6px 12px; background:#FFF; border:1px solid #106D27; }

#about-page #main-content,
#contact-page #main-content,
#services-page #main-content,
#page footer								{ margin-left:126px; }


#about-brands h2							{ margin-bottom:11px; }
#about-brands ol							{ margin-left:36px; }
#about-brands li							{ margin-top:8px; }
#about-brands li:first-child,
#about-brands ol li							{ margin-top:0; }

.accolades								{ display:block; text-align:center; }

#address									{ padding-top:16px; }
#address a,
#address a:visited							{ font-size:16px; }
#address .site-help							{ display:block; }

#copyright								{ font-size:80%; letter-spacing:0; }

#email-location-hours						{ width:486px; }
#email-location-hours li						{ margin-bottom:28px; padding-bottom:20px; }
#email-location-hours h2						{ margin-bottom:11px; }

.highlight								{ font-style:italic; font-weight:700; }

#hours									{ float:left; letter-spacing:1px; text-align:left; text-transform:none; font-weight:700; color:inherit; }
#hours:after								{ content:": "; }

#hours-detail ul							{ list-style-type:none; margin-left:0; }
#hours-detail ul li							{ height:24px; margin:0; padding:0; clear:both; background:url(../images/dot.gif) repeat-x 0 15px; }
#hours-detail ul li span						{ background:#FFF; }
#hours-detail ul li span.day					{ padding-right:5px; display:block; float:left; }
#hours-detail ul li span.time					{ padding-left:5px; display:block; float:right; }

.length-of-service							{ margin:-25px 0 15px 0; font-size:12px; text-align:center; letter-spacing:1px; }

#list-of-services							{ width:486px; }
#list-of-services li						{ margin-bottom:28px; padding-bottom:20px; background:url(../images/dot.jpg) no-repeat center bottom; }
#list-of-services li:nth-child(even)			{ float:right; }
#list-of-services li:nth-child(odd)			{ float:left; }
#list-of-services li dl						{ margin-top:19px; }
#list-of-services li dl dt:after				{ content:":"; }
#list-of-services li dl dd ol				{ margin-top:18px; }
#list-of-services li dl dd ol li				{ margin-bottom:0; padding-bottom:0; background:none; float:none; }
#list-of-services img						{ width:234px; margin-top:5px; background:#F0F0F0; display:block; color:#BEBEBE; font-style:italic; }

#list-of-staff 								{ margin-left:126px; }
#list-of-staff h2							{ margin:13px 0 17px 0; padding-bottom:12px; background:url(../images/dot.jpg) no-repeat center bottom; }
#list-of-staff ol 							{ margin-left:36px; }
#list-of-staff img							{ width:234px; margin-top:5px; background:#F0F0F0; display:block; color:#BEBEBE; font-style:italic; }
.staff-bio								{ margin-top:18px; }

#location iframe.map						{ display:block; width:100%; height:300px; margin:0 0 18px; border:0; background:#F0F0F0; }
#location dl								{ margin-top:-5px; }

#logo									{ width:113px; height:102px; margin:auto; margin-bottom:36px; display:block; background:url(../images/logo.jpg) no-repeat; }
#logo:hover								{ background:url(../images/logo-hover.jpg) no-repeat; }
#logo a,
#logo a:visited							{ width:113px; height:102px; display:block; font-weight:normal; }
#logo a:hover								{ border:0; }
#logo a:hover #skip-to-top,
#logo a:focus-visible #skip-to-top			{ width:112px; position:static; left:0; padding-top:94px; display:block; font-size:10px; text-align:center; }


#page									{ margin:auto; }

#phone-number								{ float:left; font-style:normal; font-weight:700; letter-spacing:1px; text-align:left; text-transform:none; color:inherit; }
#phone-number:after							{ content:": "; padding-right:2px; }

header									{ margin-top:87px; }
#creative-healing-title						{ width:652px; height:53px; display:block; margin:auto; background:url(../images/creative-healing.jpg) no-repeat; }
#creative-healing-title:hover					{ background-image:url(../images/creative-healing-hover.jpg); }
#linda-lucas-title							{ width:518px; height:13px; margin:auto; margin-top:-74px; background:url(../images/linda-lucas-herbalist-and-nutritionist.jpg) no-repeat; }
.title a									{ width:652px; height:53px; display:block; border:0; font-weight:normal; }

/* Home page, Learn page and 404 page */
.home-welcome								{ width:486px; margin:18px auto 0; float:none; }
.home-welcome h2							{ margin-bottom:11px; }
.home-links								{ text-align:center; }
.learn-intro								{ margin-top:11px; text-align:center; }


/* NAVIGATION */

#main-navigation							{ margin:69px 0 45px 0; text-transform:uppercase; letter-spacing:0.5px; }
#main-navigation ol							{ width:360px; height:58px; margin:auto; background:url(../images/bg-navigation.jpg) no-repeat; list-style-type:none; font-size:12px; line-height:18px; font-weight:600; }
#main-navigation li							{ width:72px; height:58px; display:block; float:left; }
#main-navigation a,
#main-navigation a:visited					{ width:72px; height:58px; position:relative; padding-top:60px; display:block; text-align:center; border:0; font-weight:normal; }
#main-navigation a:hover						{ width:72px; height:58px; color:#000; border:0; }
#main-navigation a span						{ display:none; }

.active-link #about,
#about:hover, #about:focus-visible			{ background:url(../images/about.jpg) no-repeat; }
.active-link #services,
#services:hover, #services:focus-visible		{ background:url(../images/services.jpg) no-repeat; }
.active-link #staff,
#staff:hover, #staff:focus-visible			{ background:url(../images/staff.jpg) no-repeat; }
.active-link #contact,
#contact:hover, #contact:focus-visible		{ background:url(../images/contact.jpg) no-repeat; }
.active-link #learn,
#learn:hover, #learn:focus-visible			{ background:url(../images/learn.jpg) no-repeat; }

.active-link #about span,
.active-link #services span,
.active-link #staff span,
.active-link #contact span,
.active-link #learn span						{ display:inline; width:7px; height:8px; position:absolute; top:77px; left:50%; margin-left:-3px; background:url(../images/dot.jpg) no-repeat; }

/* Preload the hover images so they appear instantly instead of flickering on first hover */
body::after								{ position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
										  content:url(../images/creative-healing-hover.jpg) url(../images/logo-hover.jpg) url(../images/about.jpg) url(../images/services.jpg) url(../images/staff.jpg) url(../images/contact.jpg) url(../images/learn.jpg); }


/* ==========================================================================
   PHONES AND SMALL TABLETS
   The desktop layout is a fixed 738px grid; below that, stack everything
   into a single centered column.
   ========================================================================== */

@media (max-width: 760px) {
	#page									{ width:auto; max-width:738px; padding:0 16px; }

	.column, .width1, .width2, .width3,
	#page > header, #main-navigation,
	#main-content, #main-content section,
	#page-footer, #email-location-hours,
	#list-of-services, .home-welcome			{ float:none; width:auto; margin-left:0; }

	#about-page #main-content,
	#contact-page #main-content,
	#services-page #main-content,
	#page footer							{ margin-left:0; }

	#list-of-services li:nth-child(even),
	#list-of-services li:nth-child(odd)		{ float:none; }
	#list-of-staff							{ margin-left:0; }
	#list-of-staff > li						{ margin-bottom:36px; }
	#list-of-staff img,
	#list-of-services img					{ margin-left:auto; margin-right:auto; }
	#about-brands > li						{ margin-bottom:18px; }

	/* Title images scale down to fit the screen; tagline stays above the title */
	header									{ margin-top:32px; }
	.title									{ display:flex; flex-direction:column-reverse; align-items:center; }
	#creative-healing-title,
	#creative-healing-title:hover			{ width:100%; max-width:652px; height:auto; aspect-ratio:652 / 53; margin:0; top:0; background-size:contain; }
	.title a								{ width:100%; height:auto; aspect-ratio:652 / 53; }
	#linda-lucas-title						{ width:80%; max-width:518px; height:auto; aspect-ratio:518 / 13; margin:0 0 10px; top:0; background-size:contain; }

	#main-navigation						{ margin:24px -16px 40px; }

	/* Slightly larger text for reading on a phone */
	#main-content p,
	#main-content dd:not(#hours-detail),
	#list-of-staff ul,
	#about-brands ol						{ font-size:16px; line-height:26px; }
	#location iframe.map					{ height:260px; }
}

/* Very narrow phones: shrink the icon menu so all five icons fit */
@media (max-width: 370px) {
	#main-navigation ol						{ zoom:0.86; }
}