/*
Theme Name: NDS Office
Theme URI: http://archphila.org/
Description: Archdiocese of Philadelphia
Author: AoP
Version: 2.0.26
*/

/*██ VARIABLES - Referenced from theme.json */
:root {
	/* Typography */
	--font-sans: 'Aptos', 'Calibri', 'Segoe UI', 'Arial', sans-serif;
	--font-serif: 'Georgia', 'Times New Roman', 'Times', serif;
	--font-headers: 'Roboto Slab', var(--font-serif);
	--font-accent: 'Love Ya Like A Sister', var(--font-serif);
	--font-display: 'Arial Black', 'Arial Bold', 'Arial', 'Gadget', sans-serif;
	--body-copy: var(--font-sans);

	/* Colors - from theme.json palette (--wp--preset--color--{slug}) */
	--green: var(--wp--preset--color--green);
	--gold: var(--wp--preset--color--gold);
	--cc-blue: var(--wp--preset--color--cc-blue);
	--cc-navy: var(--wp--preset--color--cc-navy);
	--mint-green: var(--wp--preset--color--mint-green);
	--purple: var(--wp--preset--color--purple);
	--coral-red: var(--wp--preset--color--coral-red);
	--sky: var(--wp--preset--color--sky);
	--stone: var(--wp--preset--color--stone);
	--cloud: var(--wp--preset--color--cloud);
	--eggshell: var(--wp--preset--color--eggshell);
	--digital-blue: var(--wp--preset--color--digital-blue);
	--text-dark: var(--wp--preset--color--text-dark);

	/* Semantic aliases */
	--primary-color: var(--cc-blue);
	--accent-color: var(--gold);
	--text-light: #ffffff;
	--background-color: var(--cloud);
	--background-light: #ffffff;
	--background-hover: #f5f6fa;

	/* Spacing - from theme.json spacingSizes */
	--spacing-sm: var(--wp--preset--spacing--40);
	--spacing-md: var(--wp--preset--spacing--50);
	--spacing-lg: var(--wp--preset--spacing--60);
	--spacing-xl: var(--wp--preset--spacing--70);

	/* Layout - from theme.json layout settings */
	--content-width: var(--wp--style--global--content-size, 1200px);
	--wide-width: var(--wp--style--global--wide-size, 1600px);

	/* Custom - from theme.json custom settings (--wp--custom--{category}--{key}) */
	--gutter: var(--wp--custom--spacing--gutter);
	--transition-speed: var(--wp--custom--transition--base);
	--shadow-color: var(--wp--custom--shadow--color);
}

	/* CSS Reset */
	html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}
	html{font-size:100%;}
	main,article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
	html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}
	h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
	html,button,input,select,textarea{font-family:var(--body-copy)}
	ul{list-style:none}
	ol,ul{margin:1em 0; padding:0 0 0 40px}
	button,input,select,textarea{margin:0}
	img,video{height:auto;max-width:100%}
	iframe{border:0}
	table{border-collapse:collapse;border-spacing:0}
	td,th{padding:0}
	button,input,select,textarea{font-size:100%;margin:0;vertical-align:middle}
	button,input{line-height:normal}
	textarea{overflow:auto;vertical-align:top}

	html {box-sizing: border-box;}
	*, *:before, *:after {box-sizing: inherit;}

	body { background-color:var(--background-light); font:100%/1.5 var(--body-copy); padding:0; margin:0; margin:0 auto; text-align:left; color:var(--text-dark); display:block; width:100%; min-width:300px; }

	h1, h2, h3, h4, h5, h6 { font-weight: normal; line-height: 1.25; font-family: var(--font-headers); clear:both;} /*clear both for image floats*/
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; color: inherit;}
	h1 { font-size: 32px; } h2 { font-size:28px; margin-bottom:1em } h3 { font-size: 120%; color: inherit; } h4 { font-size: 1em; color: inherit; } h5 { font-size: 1em; color: inherit; } h6 { font-size: 1em; color: inherit; }

	p, li { margin: 0 0 1em; }
	ul, ol { margin-bottom: 1em; padding: 0 0 0 1em;}
	.nolinespacing li{margin-bottom:0;}
	em, i { font-style: italic; line-height: inherit; }
	strong, b { font-weight: bold; line-height: inherit; }
	small { font-size: 80%; line-height: inherit; }
	hr { border: solid currentColor;  border-width: 1px 0 0; clear: both; margin: 1.65em auto; height: 0; }

	a { color: inherit; text-decoration: underline; line-height: inherit; }
	a:hover { text-decoration:none }
	a:focus { text-decoration:none }
	p a { line-height: inherit; }
	
	img, object, embed, iframe { max-width: 100%; height: auto; display:block; margin-left:auto; margin-right:auto; clear:both; }

	a.assistive-text, .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); height: 1px; margin: -1px; overflow: hidden; padding: 0; width: 1px; }
	a.assistive-text:hover,	a.assistive-text:active, a.assistive-text:focus { background: var(--background-light); border: 2px solid var(--text-dark); clip: auto !important; color: var(--text-dark); display: block; font-size: 12px; padding: var(--spacing-sm); position: absolute; top: 5px; left: 5px; margin: auto; overflow: visible; height: auto; width: auto; z-index: 1000; }
	
/*  --------------------------------------------------
    Pagination
    -------------------------------------------------- */
	nav.pagination {margin:var(--spacing-sm) 0; display:block; padding:var(--spacing-sm) 0;}
	.nav-links {display:table; width:100%; text-align:center; table-layout:fixed; border-collapse:collapse;}
    .page-numbers {background:var(--background-light); padding:var(--spacing-sm) 0; border:1px solid var(--text-dark); display:table-cell;}
	.page-numbers.current, a.page-numbers:hover{background:var(--primary-color); color:var(--text-light);}

/*  --------------------------------------------------
    Forms
    -------------------------------------------------- */
	form input, form textarea{ display: block; width: 100%; border: 1px solid var(--stone); padding: 5px; border-radius: 3px; }
	input[type="submit"] { background: var(--primary-color); border: none; color: var(--text-light); padding: var(--spacing-md); border-radius: 3px; margin: 0 auto; display: block; max-width: 10em; width: 100%; }
	

/* -------------------------------------------------- 
	:: Layout - @media = 600px
	---------------------------------------------------*/

	.entry-content.insidepage {max-width:var(--content-width); margin:0 auto;}

	main#content ul{list-style:disc}


	/* HEADER SECTION */

	#header{ padding: 0 0 20px;background-image: url('https://nutritionaldevelopmentservices.kinsta.cloud//wp-content/uploads/2026/02/tile4.png');}
	#headerimg{display: block; margin:0 auto; }
	.headerdiv{background: var(--sky); }
	.headerdiv p{margin: 0; font-size: 80%; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 30px; align-items: center;}

	nav#navigation{background:var(--primary-color);}

	#socmed{fill:var(--cc-blue);  padding:10px;display: flex;gap: 10px;}
	#socmed a:hover{fill:var(--gold);}

	#topannounce{background: var(--mint-green); overflow: auto; padding: var(--spacing-sm);}
	#topannounce p:last-of-type{margin-bottom:0}

	#logoarea{display: grid; grid-template-columns: 1fr 67% 1fr; justify-items: center; align-items: center; gap: 30px;}
	@media (max-width: 1200px) {
		#logoarea{grid-template-columns: 1fr}
	}

	.donatebtn { display:inline-flex; align-items:center; gap:0.6rem; padding:0.95rem 2.2rem; font-size:1.08rem; font-weight:700; color:var(--text-light); background:var(--green); border-radius:12px; text-decoration:none; position:relative; overflow:hidden; transition:all var(--transition-speed) ease; }
	.donatebtn::before { content:"❤️"; color:var(--coral-red); font-size:1.1em; animation:heartbeat 1.8s infinite ease-in-out; }
	.donatebtn:hover { transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(239, 68, 68, 0.35); color:var(--gold); }
	@keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

	#managerbtns{display:flex; gap:50px; justify-content: center;}
	#managerbtns a{text-decoration: none; background:var(--sky); padding:10px 20px; border-radius: 20px;font-size: 80%;text-transform: uppercase;font-weight: bold;}
	#managerbtns span{font-size:150%; line-height:0; vertical-align: center;}

	.nogap{gap:1px !important;}

	/* PAGE PADDING */
	@media (min-width: 1200px) { /* center header and page title while keeping the background stretching to the screen edges (no need to add surrounding div for a wide color bg) */
		#content .pagetitle {
			padding-left: calc( (100vw - var(--content-width) - var(--gutter)) / 2);
			padding-right: calc( (100vw - var(--content-width) - var(--gutter)) / 2);
		}
	}

	#content { padding: 0 var(--gutter) var(--spacing-xl); overflow-x: hidden; display:block; } /* "display block" for IE so "overflow-x hidden" works*/
	.home #content{padding-bottom: 0}

	.pagetitle{background: var(--cloud); padding: var(--spacing-md) var(--gutter); margin: 0 calc(-1 * var(--gutter)) var(--spacing-xl); border-bottom: 1px solid var(--stone); text-align:center;}
	.pagetitle h2{font-size: 18px; color: var(--text-dark); margin: 0;}

	/* FOOTER */
	footer{ font-size: 80%; clear:both; border-top: 1px solid var(--cc-blue);} /*clear both if image in content breaks past*/
	footer p{margin: 0; text-align: center; padding: var(--gutter);}

	/*ARCHIVE PAGES*/
	.archiveblock{margin-bottom:25px;overflow:auto; display:flex; flex-wrap:wrap;}
	.archiveblock img{margin:0 20px 20px 0}
	.archivetext{flex:1 250px; order:1;}

	.wp-element-caption{
		text-align: center; 
		padding-bottom: 5px;
	}

	/* a full width image that is the first element on page should have no margin at the top */
	.entry-content > .wp-block-image.alignfull:first-child {margin-top:-50px}


/* PAGE SIZES / WIDTHS */
.home #page {max-width:100%;}
.home .entry-content > * {max-width:var(--content-width); margin-left:auto; margin-right:auto;}
.home .wp-block-cover.alignfull, .wp-block-cover.alignwide{ margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); width: 100vw; max-width:100vw; min-height: 80vh; }

/*let's do for all pages, too*/
.entry-content > * {max-width:var(--content-width); margin-left:auto; margin-right:auto;}

/* ALIGN-FULL - STRETCH TO EDGES (.entry-content to override defaults, and the above .entry-content > * rule ) */
.entry-content .alignfull { max-width:100vw; margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter)); }
.entry-content .alignfull .alignfull { margin-left:0; margin-right:0; } /* an alignfull image inside an alignfull section shouldn't also have -30 margins or it'll push outside */

.wp-block-image.aligncenter{margin:auto;}
.alignright {float:right; margin-left: 20px;}
.alignleft {float:left; margin-right: 20px;}

/* WP BLOCK DEFAULTS so you don't have to load yet another stylesheet */
.wp-block-table { width: 100%; min-width: 240px; border-collapse: collapse }
.wp-block-table td,.wp-block-table th { padding: .5em; border: 1px solid currentColor; word-break: break-all }

/* ASSORTED CLASSES */
.accent1{font-family:var(--font-display);text-transform: uppercase; line-height: 1;}
.accent2{font-family:var(--font-accent);}
.textshadow{text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);}
.swipe{position:relative; background-color:transparent;}


	/* FRONT PAGE */

	/* FEATURED NUMBERS grid */
	.numbers{display:flex; flex-wrap:wrap; margin-bottom:20px}
	.numbers .wp-block-cover{display:flex; flex-wrap:wrap; text-shadow:2px 2px 2px rgba(0,0,0,0.5); }
	.numbers .wp-block-cover{flex:450px; border:1px solid var(--text-light)}
	.numbers .wp-block-cover.wide{flex:100%;}
	.numbers p strong{font-size:64px; font-family:var(--font-display); border-top:1px solid; border-bottom:1px solid}
	#content .numbers p{color:var(--text-light); font-family:var(--font-headers);}

	/* FRONT FEED & "LATEST POSTS" BLOCK */
	.grf_items, .wp-block-latest-posts__list{display: flex; flex-wrap:wrap; flex-direction: column; margin-bottom: 0;}
	.grf_item, .wp-block-latest-posts__list li{margin:0 0 var(--gutter); border-left:4px solid var(--green); padding:0 var(--spacing-sm); border-radius: 4px; background: color-mix(in srgb, var(--green) 10%, transparent);}
	.wp-block-latest-posts__list li{flex: 1; padding: 10px;}
	.grf_item_date, .wp-block-latest-posts__post-date{font-size:85%;margin:10px 0;}
	h3.grf_item_title a, a.wp-block-latest-posts__post-title{font:18px var(--font-headers); margin:var(--spacing-sm) 0;display:block;}
	.cpfeedimage{display:block; margin:0 15px 15px 0;float: left; max-width:240px}

	.wp-block-latest-posts li{ display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "headline headline" "date     date    " "img      excerpt "; }
	.wp-block-latest-posts__post-title{grid-area:headline}
	.wp-block-latest-posts__post-date{grid-area:date}
	.wp-block-latest-posts__featured-image{grid-area:img}
	.wp-block-latest-posts__post-excerpt{grid-area:excerpt; margin-top:0 !important;}
	@media (max-width:600px) {.wp-block-latest-posts li{ grid-template-columns: 1fr; grid-template-areas:"headline""date""img""excerpt ";} }

	/*front page news/fb section*/
	@media (min-width:600px) {
		.stretchiframe{display:flex;flex-direction:column;}
		.stretchiframe iframe{flex:1; margin-bottom:15px;}
	}

	/* FILMSTRIP */
	.filmstrip { overflow: hidden; position: relative; height: 60vh; }
	.filmstrip article { display: flex; position: absolute; height: 60vh; animation: marquee 60s linear infinite; }
	.filmstrip img{ max-width:none; margin-right:1px; height: 60vh; display:block;}
	.filmstrip div{ position:relative; }
	.filmstrip p{ position: absolute; top:0;left:0;width:100%;height:100%;display:flex;align-items:center; line-height: 1.2; z-index: 9; text-align: center; color: var(--text-light); font-size: 50px; font-family: var(--font-accent); text-shadow:-2px 2px 0 var(--text-dark), 2px -2px 0 var(--text-dark), -2px -2px 0 var(--text-dark), 2px 2px 0 var(--text-dark), 2px 2px 2px var(--text-dark)}
	@keyframes marquee {
		0% {transform: translate(0, 0);}
		100% {transform: translate(-50%, 0);}
	}
	@media (max-width: 650px) {
		.filmstrip p{display:none}
	}

	/* FADING SLIDESHOW */
	.fade{position: relative; height:300px; margin:0 calc(-1 * var(--gutter)) var(--gutter)}
	.fade>figure{height:350px; width:100% !important;position: absolute !important;top:0;left:0;background-position:center center;background-size:contain; background-repeat:no-repeat; background-color:transparent;}





/* -------------------------------------------------- 
	:: Navigation
	---------------------------------------------------*/

/*TOUCH MODE*/
/* the touch menu needs to be below the logo, which is normally horizontal only */
body.is-touch.home #header{flex-wrap:wrap;}
/* menu button shows/hides menu in js */
.touch-nav #menulabel{text-align:center;width:100%;padding:10px 0; background:var(--primary-color);color:#FFF;border:0;font-family:'Roboto Slab', serif;font-size:15px;}
.touch-nav .nav-bar{display:none;}
.show-main-menu .touch-nav .nav-bar{display:block;}
/* the menu */
.touch-nav{width:100%; margin:40px 0; color:#333;}
.touch-nav ul, .touch-nav li{padding:0; margin:0; text-align:center; background:#FFF;}
.touch-nav a{display:block;padding:10px 0; border-bottom:1px solid #999;}
.touch-nav .submenuopen a{ background:var(--primary-color);}
/* add arrows to show open/close state */
.touch-nav li.menu-item-has-children>a::after{content:'\25B6';padding-left:10px;width:25px;display:inline-block;transition: transform .2s ease;}
.touch-nav li.menu-item-has-children.submenuopen>a::after,
.touch-nav li.menu-item-has-children.sub-submenuopen>a::after{transform: rotate(90deg);}
/*smooth accordion, closed*/
.touch-nav .sub-menu a,
.touch-nav .submenuopen>.sub-menu .sub-menu a{max-height:1px; min-height:0; opacity:0; overflow:hidden; visibility:hidden; line-height:0; padding:0 10px 0 40px; border-bottom-width:0; transition:opacity .1s, max-height .1s, line-height .1s, padding .1s, visibility .1s, min-height .1s; color: #FFF;} 
/*smooth accordion, opened*/
.touch-nav .submenuopen>.sub-menu a, 
.touch-nav .submenuopen>.sub-menu .sub-submenuopen .sub-menu a{max-height:300px; min-height:0; opacity:1; visibility:visible; line-height:1.8; padding:10px 10px 10px 40px; border-bottom:1px dotted;}

/*CLICK MODE*/
.is-touch .mobileonly{display:none;} /* a top-level menu item in the nav bar can be clicked on for desktop, but touch would only open its dropdown because of the js, so duplicate the link into the dropdown for touch, and add 'mobileonly' class to it to hide from desktop */
.click-nav #menulabel{display:none;}
.click-nav { clear: both; margin: 0 auto; width: 100%; box-sizing: border-box;}
.click-nav a { color:#FFF; display: block; padding: 1em; text-decoration: none; }
.click-nav a[href="#"] {cursor:default;}
.click-nav .noparent > a{font-family: 'Roboto Slab', serif; font-size:15px; border-bottom:3px solid transparent;}
.click-nav ul { list-style:none; margin:0; padding:0; display:flex; justify-content:center; flex-wrap: wrap; border-bottom:1px solid #FFF;}
.click-nav ul li{ position:relative; margin:0; }
/* sub menus */
.click-nav ul ul { box-shadow: 0 3px 3px rgba(0,0,0,0.2); opacity:0; height:0; overflow:hidden; transition:opacity 0.2s ease-out; border:0 none; margin:0; position:absolute; top:100%; left:0; width:300px; z-index:111;}
.click-nav ul ul a { border-bottom: 1px dotted #ddd; color:#333; height:auto; text-align:left; padding:10px; width:300px;}
.click-nav ul ul ul { left:100%; top:0;}
.click-nav ul li:hover > ul, .click-nav ul li:focus-within > ul { opacity:1; display:block; height:auto; overflow:visible;}
.click-nav ul li li {border:none;}
/* colors, hover accents */
.click-nav ul ul{background: #f2efef;}
.click-nav li.noparent:hover > a, .click-nav li.noparent > a:focus, .click-nav li.noparent.current_page_item > a, .click-nav li.noparent.current-menu-item > a, .click-nav li.noparent.current-menu-ancestor > a, li.noparent:focus-within > a  {color:var(--accent-color); border-bottom: 3px solid var(--accent-color);}
.click-nav ul ul li:hover > a, .click-nav ul ul li a:focus, .click-nav ul ul li.current-menu-item > a {color:#333; border-color:transparent; background:var(--accent-color);}