/*
CTC Separate Stylesheet
Updated: 2025-08-06 15:25:18
*/

/* AEC STYLESHEET */


/* --------------- GENERAL LAYOUT --------------- */

@media screen and (max-width: 1300px) { 
    #page #content { padding-left: 1rem; padding-right: 1rem; }
}

/* Breadcrumbs */
#page div.ast-header-breadcrumb div.ast-container { 
    padding-left: 1rem; 
    padding-right: 1rem; 
}



/* --------------- GENERAL TEXT STYLES -------------- */

/* Base font size */
html { font-size: 20px; }

body { 
    background-color: #fff;
    font-family: "ltc-goudy-oldstyle-pro", Palatino, serif;
    font-weight: 400;
    font-style: normal;
	font-size: 1rem;
	line-height: 1.5rem; 
    letter-spacing: -0.01rem; 
    margin: 0; padding: 0;    
    font-smooth: never!important;
    -webkit-font-smoothing: auto!important;
    -moz-osx-font-smoothing: auto!important;
}


#content p, #content li, #content span, #content div, #content td, #content a { 
  font-family: "ltc-goudy-oldstyle-pro", Palatino, serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.6;
  color: black;
  font-smooth: never!important;
  -webkit-font-smoothing: none!important;
  -moz-osx-font-smoothing: none!important;
}

#content li p { 
    font-size: 1.1rem!important;
    margin-bottom: 1rem; 
}

#content a { color: #7767c9; }
#content :is(a:visited, a:active, a:hover) { color: #ff7366; }


#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 { 
    line-height: 120%; 
    font-weight: normal;
}

#content h2, #content h3, #content h4, #content h5, #content h6 { 
    font-family: "ltc-goudy-oldstyle-pro", Palatino, serif;
    font-weight: bold; 
    line-height: 120%; 
    margin-top: 2rem;
}

#content h1 { font-size: 2.2rem; }
#content h2 { font-size: 1.6rem; color: #337dc1; }
#content h3 { font-size: 1.4rem; color: #7767c9; }
#content h4 { font-size: 1.2rem; color: #ff7366; }
#content h5 { font-size: 1.0rem; color: #4ab27c; }

.clear { clear: right; }

li p { font-size: 1rem!important; }

hr { 
	clear: both; 
	border: none;
	border-top: 3px dotted #FF7366;
	margin: 1rem 0;
}

#content li { line-height: 150%; margin-bottom: 0.5rem; }

/* Padding above page title at smaller sizes */
@media screen and (max-width: 1200px) { 
  article { padding-top: 2rem; }
}



/* --------------- GENERAL IMAGE STYLES ------------ */

#content img { 
    float: right; 
    margin: 0 0 2rem 2rem; 
    max-width: 30%; 
    height: auto; 
}

#content img.left,
#content img.alignleft { 
    float: left; 
    margin: 0 2rem 2rem 0; 
}

#content img.right,
#content img.alignright { 
    float: right; 
    margin: 0 0 2rem 2rem; 
}

#content img.nofloat { 
    float: none; 
    display: block; 
    margin: 1rem 0; 
}

#content img.smaller { max-width: 20%; }

@media only screen and (max-width: 600px) { 
	#content img,
    #content img.alignleft,
    #content img.alignright { 
	    float: none; 
	    display: block; 
	    margin: 1rem auto; 
	    max-width: 100%; 
	}
	#content img.smaller { max-width: 40%; }
}




/* ---------------- HEADER ---------------- */

#masthead div.ast-builder-layout-element { align-self: stretch; }


/* Container for whole header on desktop */
#masthead div.ast-above-header-wrap div.site-above-header-wrap { 
    width: 100%; 
    max-width: calc(1200px + 2rem); 
    padding: 0 1rem; 
}

/* Left column of header */
#masthead div.ast-above-header-wrap div.site-header-above-section-left { 
    flex-direction: column;
    padding: 1rem 0; 
}

/* Container for logo image, Fairview Pediatrics, and description */
#masthead div.site-branding { 
    width: 100%; 
    display: flex; 
    align-self: stretch;
    position: relative; z-index: 1;
}

/* Wrapper for logo image */
#masthead div.site-branding span.site-logo-img { 
    display: flex; 
    align-items: flex-end; 
    flex-basis: 20%; 
}

/* Link on logo */
#masthead div.site-branding span.site-logo-img a.custom-logo-link { 
    display: flex; 
    width: 100%; 
    height: 100%; 
    align-items: flex-end; 
}

/* Actual logo image */
#masthead div.site-branding span.site-logo-img a.custom-logo-link img.custom-logo { 
    display: block; 
    width: 100%; 
    max-width: 100%; 
    aspect-ratio: 20 / 13; 
}

/* Container for Fairview Pediatrics and tagline/description */
#masthead div.site-branding div.ast-site-title-wrap { 
    flex-basis: 80%; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
    padding-left: 1.5rem;
}

/* Fairview Pediatrics (site title) */
#masthead div.site-branding span.site-title { 
    font-variant: small-caps; 
    letter-spacing: 0.05rem; 
    font-size: 1.7rem; 
}
@media screen and (max-width: 1140px) { 
  #masthead div.site-branding span.site-title { font-size: 1.2rem; }
}

/* Tagline/site description */
#masthead div.site-branding p.site-description { 
    font-size: 1.1rem; 
    line-height: 110%; 
    font-style: italic; 
}

/* List of providers */
#masthead h4 { 
    line-height: 100%; 
    margin: 0.5rem 0 0 0;
    max-width: 30rem;
    padding-right: 1rem;
}
#masthead h4 a { 
    color: black; 
    font-weight: normal;
    font-size: 1rem;
    font-style: italic;
}


@media screen and (max-width: 925px) { 
    #masthead div#ast-mobile-header div.ast-main-header-wrap  { margin-top: -3.5rem; }
}



/* --------- Right column of header ---------- */

/* Container for contact info and portal */
#masthead div.site-header-above-section-right div.ast-builder-html-element { 
    display: flex; 
    align-items: flex-end; 
}

/* Contact info */
#masthead p.contact { 
    margin: 0; 
    font-size: 1.1rem;
}

/* At larger sizes, show line breaks and hide dots */
#masthead p.contact span.divider { display: none; }




/* ------------- TOP NAVIGATION - DESKTOP ------------ */

#masthead #ast-desktop-header div.ast-main-header-wrap div,
#masthead #ast-desktop-header div.ast-main-header-wrap ul,
#masthead #ast-desktop-header div.ast-main-header-wrap nav { 
    margin: 0 auto!important; 
    padding: 0!important; 
}

#masthead #ast-desktop-header div.ast-main-header-wrap div.ast-primary-header-bar div.site-primary-header-wrap div { width: 100%; }

.ast-builder-grid-row { grid-column-gap: 0; }



/* Main menu list */
nav.site-navigation ul.main-header-menu { 
    width: 100%;
    justify-content: space-between;
    border: 1px solid #e3f2ff; border-top: none; border-bottom: none; 
}



/* Different colors */
nav.site-navigation ul.main-header-menu li:nth-of-type(1) a:hover { background: #a3d3ff; }
nav.site-navigation ul.main-header-menu li:nth-of-type(2) a:hover { background: #91e8bb; }
nav.site-navigation ul.main-header-menu li:nth-of-type(3) a:hover { background: #fffea2; }
nav.site-navigation ul.main-header-menu li:nth-of-type(4) a:hover { background: #ffc168; }
nav.site-navigation ul.main-header-menu li:nth-of-type(5) a:hover { background: #ff7366; }
nav.site-navigation ul.main-header-menu li:nth-of-type(6) a:hover { background: #9e94d4; }

/* Submenus */
nav.site-navigation ul.main-header-menu ul.sub-menu { border-color: #ababab; }
nav.site-navigation ul.main-header-menu ul.sub-menu li a { 
    font-weight: normal; 
    padding: 0.5rem 1rem; 
    font-size: 1rem;
}

/* 'For Parents' submenu at smaller sizes */
@media screen and (max-width: 1150px) { 
    nav.site-navigation ul.main-header-menu li:nth-of-type(5) ul { left: -3.5rem!important; }
}



/* -------------- MOBILE HEADER -------------- */

/* override Astra styles */
#masthead #ast-mobile-header .ast-builder-grid-row { grid-column-gap: 0; }
#masthead #ast-mobile-header .site-header-section > * { padding: 0; }

#masthead #ast-mobile-header div.ast-primary-header-bar div.ast-builder-grid-row { 
    justify-content: space-between; 
}


/* Actual logo image */
#masthead #ast-mobile-header a.custom-logo-link img.custom-logo { 
    margin: 0 auto;
    width: auto; 
    max-height: 100px;
    aspect-ratio: 20 / 13; 
}

/* Tagline/site description */
#masthead #ast-mobile-header p.site-description { 
    font-size: 0.9rem; 
}


/* Logo image, Fairview Pediatrics, and description at smallish sizes */
@media screen and (max-width: 800px) { 
    #ast-mobile-header div.ast-primary-header-bar { border: none; }
    #ast-mobile-header div.ast-primary-header-bar div.ast-builder-grid-row,
    #ast-mobile-header div.site-header-primary-section-left { display: block; }
    #ast-mobile-header div.site-branding { 
      padding: 0 0 0.5rem 0;
      display: block; 
    }
    #ast-mobile-header div.site-branding div.ast-site-title-wrap,
    #ast-mobile-header div.site-branding span.site-logo-img {   
        display: inline-block; 
        margin: 0 1rem 0 0; 
        padding: 0; 
        text-align: left; 
    }
}



/* Logo image, Fairview Pediatrics, and description at smallest sizes */
@media screen and (max-width: 550px) { 
    #ast-mobile-header div.site-branding { 
        flex-direction: column; 
        padding-right: 4rem!important;
    }
    #ast-mobile-header div.site-branding div.ast-site-title-wrap { 
      padding-left: 0;
  }
    #ast-mobile-header a.custom-logo-link img.custom-logo { 
    margin: 0 auto 0.5rem auto;
    }
}






/* Both columns in second row of mobile header */
#masthead #ast-mobile-header div.site-header-below-section-left div.ast-builder-layout-element { 
    display: block;
    width: 50%;
}

/* List of providers */
#masthead #ast-mobile-header h4 { 
    margin: 0.5rem 1.5rem 0.5rem 0;
    max-width: 100%;
}
#masthead #ast-mobile-header h4 a { font-size: 0.9rem; }

/* At smallest sizes, put provider list above contact/portal */
@media screen and (max-width: 800px) { 
  #masthead #ast-mobile-header div.site-header-below-section-left div.ast-builder-layout-element { 
    width: 100%;
  }
  #masthead #ast-mobile-header div.site-header-below-section-left { 
      flex-direction: column; 
  }
    #masthead #ast-mobile-header h4 { 
        margin: 0; padding: 0;
    }
}


/* Right column for contact/portal */
#masthead #ast-mobile-header div.ast-header-html-2 div.ast-builder-html-element { 
    display: flex; 
    justify-content: space-between;
}

/* Contact and portal paragraphs */
#masthead #ast-mobile-header div.ast-header-html-2 div.ast-builder-html-element p { 
    margin: 0.5rem 0;
}

/* Contact info at smallish sizes */
@media screen and (max-width: 800px) {
    #masthead #ast-mobile-header p.contact { 
        font-size: 1rem; 
        line-height: 140%; 
    }
}

/* Contact info at smallest sizes */
@media screen and (max-width: 550px) { 
        #masthead #ast-mobile-header p.contact br { display: none; } 
        #masthead #ast-mobile-header p.contact span.divider { display: inline-block; }  
}



/* Patient portal button (both in header and footer) */

p.portal { 
    background: #7c79d0;
    display: flex;
    aspect-ratio: 1;
    border-radius: 5rem;
    content: ' ';
    border: 2px solid white; 
    margin: 0 0 0 2rem;
    padding: 3px;
}

p.portal span { 
    background: #7c79d0;
    color: white; 
    line-height: 110%; 
    text-align: center; 
    margin: 0;
    padding: 0.5rem;
    border-radius: 5rem; 
    width: 5.5rem; 
    aspect-ratio: 1;
    display: flex; 
    align-items: center; 
    border: 3px dotted white;
    font-family: 'Mountains of Christmas', "ltc-goudy-oldstyle-pro", Palatino, serif;
    font-size: 1.3rem;
    font-weight: normal;
}





/* ------------- TOP NAVIGATION - MOBILE MENU ------------ */

#ast-mobile-header button.menu-toggle {
    border: 2px solid white; 
    margin: 0 0 0 1rem;    
    padding: 0.5rem 1rem; 
    border-radius: 2rem;   
    position: relative; z-index: 5;
}

#ast-mobile-header span.mobile-menu { font-family: 'Mountains of Christmas', "ltc-goudy-oldstyle-pro", Palatino, serif; }

/* make menu toggle button smaller at smallest sizes */
@media screen and (max-width: 650px) { 
    #ast-mobile-header button.menu-toggle { padding: 1rem; }
    #ast-mobile-header button.menu-toggle span.mobile-menu-wrap { display: none; }
}


/* links in submenus */
#ast-mobile-popup-wrapper ul.sub-menu li a { 
    font-weight: normal; 
    font-size: 1.2rem; 
    line-height: 130%; 
    padding: 0.5rem 1rem 0 1rem;
}

/* carets for submenu drop-downs */
#ast-mobile-popup-wrapper button.ast-menu-toggle { 
    line-height: 2.5; 
    height: 2.8rem; 
    padding: 0 1rem 0 0.5rem; 
}


/* replace carets for submenu items with dashes */
#ast-mobile-popup-wrapper ul.sub-menu span.ast-icon.icon-arrow { 
    display: none;
}
#ast-mobile-popup-wrapper ul.sub-menu li a:before { 
    display: block; 
    content: '–';
    float: left;
    margin: 0 0.4rem 0.5rem 0;
}



/* ----------------- SPECIFIC PAGE STYLES --------------- */

/* Meet the Staff page */

#content div.staff { 
    display: inline-block; 
    vertical-align: top; 
    width: 20%; 
    margin: 0 4% 2rem 0; 
    text-align: center; 
    line-height: 140%; 
} 
#content div.staff img { 
    float: none; 
    margin: 0 0 0.2rem 0; 
    width: 100%; 
    max-width: 100%; 
}

@media only screen and (max-width: 800px) { #content div.staff { font-size: 0.9rem; } }
@media only screen and (max-width: 700px) { #content div.staff { width: 28%; font-size: 0.9rem; } }
@media only screen and (max-width: 600px) { 
   #content div.staff { width: 45%; }
   #content div.staff br { display: none; }
}



/* ----- Current Events and Saved by the Dr. Bell (blog pages) ----- */

/* Each blog post */
#content .display-posts-listing div.listing-item { 
    border-bottom: 4px dotted #7767c9; 
    padding-bottom: 1rem; 
    margin-bottom: 2rem;
}

/* Title of each blog post */
#content .display-posts-listing div.listing-item span.title { 
    font-weight: bold;
    font-size: 1.6rem; 
    display: block; 
    margin: 0 0 1rem 0;
    color: #337dc1;
}

/* ------ Pagination of blog posts ------ */

#content div.nav-links { 
  text-align: center; 
  margin: 0 auto; 
  padding: 1rem 0; 
}

/* pagination links in general */
#content div.nav-links a {
  background: #ff7366; 
  color: white; 
  padding: 0.5rem 0.7rem 0.5rem 0.7rem;
  text-decoration: none;
    font-weight: bold;
}

/* Previous button */
#content div.nav-links a.prev { 
  border-radius: 2rem 0.2rem 0.2rem 2rem;
  padding-left: 1rem; 
}

/* Next button */
#content div.nav-links a.next { 
  border-radius: 0.2rem 2rem 2rem 0.2rem; 
  padding-right: 1rem; 
}

/* Current page */
#content div.nav-links span.current { 
  padding: 0.5rem 0.7rem; 
  color: white;
    background: #ccc;
    font-weight: bold;
}

/* Current Events box on homepage */
#content div.current-events {  
    width: 25%;
    max-width: 15rem;
    float: left; 
    margin: 0 2rem 2rem 0;
}
@media screen and (max-width: 700px) { 
    #content div.current-events { 
        float: none; 
        width: 100%; 
        max-width: 100%; 
    }
}

/* Title of 'Current Events' box */
#content div.current-events h4 { 
    font-family: 'Mountains of Christmas', "ltc-goudy-oldstyle-pro", Palatino, serif; 
    font-weight: normal;
    font-size: 1.5rem;
    color: black;
    margin: 0; 
    padding: 0 0 0.5rem 0; 
    border-bottom: 3px dotted #7767c9;
}

/* Each blog post in Current Events box */
#content div.current-events .display-posts-listing div.listing-item { 
    border-bottom: 3px dotted black;
    margin: 0; 
    padding: 1rem 0;
}
#content div.current-events .display-posts-listing div.listing-item:nth-of-type(1) { border-color: #ff7366; } 
#content div.current-events .display-posts-listing div.listing-item:nth-of-type(2) { border-color: #ffc168; } 
#content div.current-events .display-posts-listing div.listing-item:nth-of-type(3) { border-color: #fffea2; } 

/* Links to posts in Current Events box */
#content div.current-events .display-posts-listing div.listing-item a { 
    font-size: 1rem; 
    display: block;
    line-height: 140%; 
}



/* Individual blog posts */

body.wp-singular { background: white; }
body.wp-singular .ast-container { padding: 0; }
body.wp-singular #primary { margin: 0; }
body.wp-singular #main article { padding-left: 0; padding-right: 0; }
nav.post-navigation { display: none; }




/* ---------------------- FOOTER ---------------------- */

/* Footer row containing random image */
#colophon div.site-primary-footer-wrap  { 
    margin: 0 auto; 
    padding: 2rem 0 0 0; 
}
@media screen and (max-width: 1200px) { 
    #colophon div.site-primary-footer-wrap  { 
        margin-top: 2rem; 
        padding: 0 0 2rem 0;
    } 
  #colophon div.site-below-footer-wrap { padding: 0 2rem; }
}


/* Links in footer */
#colophon a { 
    color: black; 
    text-decoration: underline; 
}


#colophon p.portal { display: inline-block; }
#colophon p.portal a { color: white; text-decoration: none; }