@charset "UTF-8";
/* ==========================================================================
   footer-nav.css  |  Delta Balustrades  |  version 1.1.5
   Footer navigation + slimline footer layout.

   Loaded site-wide by delta_enqueue_footer_nav_css() in functions.php after
   'main-stylesheet' (dist/assets/css/app.css), so everything here is an
   override of the shared page rules.

   footer.php was restructured to fit the navigation into the footer without
   growing it: the Fig credit and the Twitter icon are gone, the stacked
   telephone / email / address block is now one small-print line, and the logo
   moved down to sit just above that line. The space that freed at the top of
   the footer holds the menu columns and the LinkedIn icon.

   CONTENTS
     1. Top zone - nav + LinkedIn
     2. Nav columns
     3. Column headings
     4. Column links
     5. Base row - logo, contact line, small print
     6. Responsive column counts
     7. Privacy Policy links - footer small print + Formidable form note
   ========================================================================== */


/* 1. Top zone - nav + LinkedIn
   ------------------------------------------------------------------------
   Menu columns fill the row, the social icon sits hard right, both top
   aligned, ruled off from the base row below. */

.footerTop {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-align-items: flex-start;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-bottom: 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footerTop .footerNav {
	-webkit-flex: 1 1 auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
}

/* app.css floats .socials into the old three-across row; here it is a flex
   item instead. */
footer .footerTop .socials {
	-webkit-flex: 0 0 auto;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	float: none;
	width: auto;
	margin: 0 0 0 20px;
	padding-top: 2px;
}

footer .footerTop .socials .linkedin {
	float: none;
	margin: 0;
}


/* 2. Nav columns
   ------------------------------------------------------------------------
   One column per top-level menu item; counts in section 6. */

.footerNavList {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footerNavList > li {
	width: 100%;
	margin: 0 0 18px;
	padding: 0 15px 0 0;
	list-style: none;
}

.footerNavList > li:last-child {
	margin-bottom: 0;
}


/* 3. Column headings
   ------------------------------------------------------------------------
   The top-level item is the heading. 'Company' and 'Resources' are custom
   links with no destination, so both shapes are styled the same way. */

.footerNavList > li > a,
.footerNavList > li > span {
	display: block;
	margin-bottom: 8px;
	color: #FFF;
	font-family: Montserrat-Bold, sans-serif;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
}

.footerNavList > li > a:hover,
.footerNavList > li > a:focus {
	color: #FFF;
	text-decoration: underline;
}


/* 4. Column links
   ------------------------------------------------------------------------ */

.footerNavList .sub-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footerNavList .sub-menu li {
	margin: 0;
	list-style: none;
}

.footerNavList .sub-menu a {
	display: block;
	padding: 1px 0;
	color: #c8c8c9;
	font-family: Montserrat-Light, sans-serif;
	font-size: 13px;
	line-height: 1.55;
	text-decoration: none;
	-webkit-transition: color 0.2s ease;
	transition: color 0.2s ease;
}

.footerNavList .sub-menu a:hover,
.footerNavList .sub-menu a:focus {
	color: #FFF;
	text-decoration: underline;
}


/* 5. Base row - logo, contact line, small print
   ------------------------------------------------------------------------
   app.css floats .footerLogo and .copyright into the old layout; both run
   full width here, stacked under the divider. */

footer .footerBase {
	clear: both;
}

footer .footerBase .footerLogo {
	float: none;
	width: auto;
	margin: 0 0 14px;
	padding: 0;
}

footer .footerBase .footerLogo img {
	display: block;
	max-width: 100%;
	height: auto;
}

footer .footerContact {
	margin: 0 0 4px;
}

footer .footerContact p {
	margin: 0;
	color: #c8c8c9;
	font-family: Montserrat-Light, sans-serif;
	font-size: 13px;
	line-height: 1.7;
}

/* Middot between telephone, email and address - the spans sit flush in the
   markup so the spacing is entirely this rule. */
footer .footerContact span + span:before {
	content: "\00b7";
	padding: 0 9px;
	color: rgba(255, 255, 255, 0.45);
}

footer .footerContact a {
	color: #c8c8c9;
	text-decoration: none;
}

footer .footerContact a:hover,
footer .footerContact a:focus {
	color: #FFF;
	text-decoration: underline;
}

footer .footerBase .copyright {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
}

footer .footerBase .copyright p {
	margin: 0;
	color: #9a9a9c;
	font-family: Montserrat-Light, sans-serif;
	font-size: 12px;
	line-height: 1.7;
}


/* 6. Responsive column counts
   ------------------------------------------------------------------------
   Site (Foundation) breakpoints: 40em / 48em / 64em.
     < 24em   1 column   (small phones only)
     24em+    2 columns  (2 x 2, so the four groups stay balanced)
     56em+    4 columns  (the full-width footer row - 56em rather than the
              site’s usual 64em so 1024px laptops get the single-row footer) */

@media screen and (min-width: 24em) {

	.footerNavList > li {
		width: 50%;
	}
}

@media print, screen and (min-width: 56em) {

	.footerTop {
		margin-bottom: 26px;
		padding-bottom: 26px;
	}

	.footerNavList > li {
		width: 25%;
		margin-bottom: 0;
		padding-right: 25px;
	}
}


/* 7. Privacy Policy links (v1.1.2, form note revised v1.1.3 / v1.1.4, legacy footer v1.1.5)
   ------------------------------------------------------------------------
   Footer: footer.php prints p.footerPrivacy after the copyright paragraph.
   The two sit on one small-print line, split by the same middot as the
   contact line, and wrap onto two lines on narrow screens. Flex is used so
   template whitespace between the paragraphs adds no stray gap.

   Forms: delta_form_privacy_note() in functions.php appends p.frmPrivacyNote
   directly after .frm_submit on the personal-data Formidable forms. The note
   also carries Formidable's .frm_primary_label class, so its COLOUR comes from
   each form's own label rules (light #e6e6e6 on the dark contact panel, Delta
   grey on the light page forms); no colour is set here. Size, spacing and the
   underlined inherit-colour link are set here, one step smaller than labels.
   This file is loaded site-wide, so the note is styled wherever a form is. */

footer .footerBase .copyright {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-items: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
}

footer .footerBase .copyright .footerPrivacy:before {
	content: "\00b7";
	padding: 0 9px;
	color: rgba(255, 255, 255, 0.45);
}

footer .footerBase .copyright .footerPrivacy a {
	color: #c8c8c9;
	text-decoration: none;
}

footer .footerBase .copyright .footerPrivacy a:hover,
footer .footerBase .copyright .footerPrivacy a:focus {
	color: #FFF;
	text-decoration: underline;
}

/* Legacy footer (footer-new.php, used only by the CPD Training template):
   the link sits in the registration small print and takes the same
   colour as that footer's email link (v1.1.5). */
.footer .footer-right a.footerPrivacyLegacy {
	color: #bcbcbc;
	text-decoration: none;
}

.footer .footer-right a.footerPrivacyLegacy:hover,
.footer .footer-right a.footerPrivacyLegacy:focus {
	color: #FFF;
	text-decoration: underline;
}

.frm_forms p.frmPrivacyNote {
	clear: both;
	display: block;
	float: none;
	width: 100%;
	margin: 10px 0 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
}

/* The "Formidable Style" style (contact form and the other dark-panel forms)
   colours its labels with a label-element-only rule, which the note (a p)
   cannot pick up, so its label colour is mirrored here (v1.1.4). */
.frm_style_formidable-style.with_frm_style p.frmPrivacyNote {
	color: #e6e6e6;
}

.frm_forms p.frmPrivacyNote a {
	color: inherit;
	text-decoration: underline;
}

.frm_forms p.frmPrivacyNote a:hover,
.frm_forms p.frmPrivacyNote a:focus {
	color: inherit;
	text-decoration: none;
}