/* ==========================================================================
   Pennine custom header / megamenu / mobile menu fixes
   Loaded from:
   /wp-content/themes/salient-child/assets/css/pennine-megamenu.css

   Purpose:
   - Keep confirmed desktop megamenu fixes.
   - Restore mobile header/menu visual parity with the original Pennine site.
   - Keep Zeynep JS in control of menu open/close behaviour.
   - Avoid forcing transform, visibility, opacity, or opened state with CSS.
   ========================================================================== */


/* ==========================================================================
   MOBILE: ZEYNEP DRAWER HEIGHT FIX
   Keeps the existing Zeynep JS open/close behaviour intact.

   Zeynep handles state by toggling classes such as:
   - .opened on #mobile-nav
   - .zeynep-opened on the html element
   ========================================================================== */

@media (max-width: 999px) {
	#mobile-nav.zeynep {
		height: 100vh !important;
		bottom: 0 !important;
	}
}


/* ==========================================================================
   MOBILE: HEADER WIDTH / HEIGHT / LOGO / ICON ALIGNMENT
   Matches the original Pennine mobile header dimensions.
   ========================================================================== */

@media (max-width: 999px) {
	#header-outer,
	#header-outer #top,
	#header-outer .global-header__container,
	#header-outer .global-overlay__container,
	#header-outer .global-header__overlay,
	#header-outer .global-header__overlayrow,
	#header-outer .global-header__mobileoverlay {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	#header-outer,
	#header-outer .global-header__mobileoverlay {
		height: 66px !important;
		min-height: 66px !important;
		background: transparent !important;
	}

	#header-outer .mobile-header__navbutton,
	#header-outer .mobile-header__phonebutton {
		height: 66px !important;
		display: flex !important;
		align-items: center !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	#header-outer .mobile-header__navbutton {
		justify-content: flex-start !important;
		padding-left: 28px !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		min-width: 150px !important;
	}

	#header-outer .mobile-header__phonebutton {
		justify-content: flex-end !important;
		padding-right: 28px !important;
		padding-left: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	#header-outer #top .global-header__logo {
		width: 126px !important;
		max-width: 126px !important;
		height: 66px !important;
		min-height: 66px !important;
		background: #fff !important;
		display: block !important;
		overflow: hidden !important;
	}

	#header-outer #top #logo {
		width: auto !important;
		height: 66px !important;
		display: inline-block !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 22px !important;
	}

	body #header-outer #top #logo img.stnd.header-logo--desktop-mobile,
	body #header-outer #top #logo img.dark-version.header-logo--desktop-mobile,
	body #header-outer #top .global-header__logo #logo img.header-logo--desktop-mobile {
		width: auto !important;
		height: 66px !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
		display: block !important;
	}
}


/* ==========================================================================
   MOBILE: ZEYNEP SEARCH / CLOSE ROW ALIGNMENT
   Matches the live site's mobile menu top row.
   ========================================================================== */

@media (max-width: 999px) {
	#mobile-nav .mobile-nav__container {
		align-items: stretch !important;
	}

	#mobile-nav .mobile-nav__contents {
		min-height: 100vh !important;
		background: #fff !important;
	}

	#mobile-nav .mobile-nav__searchfield {
		height: 66px !important;
		min-height: 66px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0 14px !important;
		background: #78a6cd !important;
		box-sizing: border-box !important;
	}

	#mobile-nav .mobile-nav__searchfield form.search-form,
	#mobile-nav .mobile-nav__searchfield .search-form {
		width: 100% !important;
		height: 42px !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex !important;
		align-items: center !important;
		background: #fff !important;
		box-sizing: border-box !important;
	}

	#mobile-nav .mobile-nav__searchfield .search-field {
		height: 42px !important;
		line-height: 42px !important;
		padding: 0 12px !important;
		margin: 0 !important;
		box-sizing: border-box !important;
	}

	#mobile-nav .mobile-nav__searchfield .search-field-button {
		height: 42px !important;
		width: 42px !important;
		padding: 0 !important;
		margin: 0 !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	#mobile-nav .mobile-nav__close {
		height: 66px !important;
		min-height: 66px !important;
		width: 66px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		background: #00639b !important;
	}
}


/* ==========================================================================
   MOBILE: ZEYNEP MENU ROW ALIGNMENT
   Makes top-level menu rows, submenu labels, and submenu links consistent.
   ========================================================================== */

@media (max-width: 999px) {
	#mobile-nav .mobile-nav__menu > ul > li > a,
	#mobile-nav .mobile-nav__menu > ul > li.menu-title > a,
	#mobile-nav .submenu ul.sub-menu > li > a {
		height: 66px !important;
		min-height: 66px !important;
		display: flex !important;
		align-items: center !important;
		padding: 0 24px !important;
		box-sizing: border-box !important;
	}

	#mobile-nav .submenu-header > a {
		height: 66px !important;
		min-height: 66px !important;
		display: flex !important;
		align-items: center !important;
		padding: 0 24px 0 48px !important;
		box-sizing: border-box !important;
	}

	#mobile-nav .submenu > label {
		height: 66px !important;
		min-height: 66px !important;
		display: flex !important;
		align-items: center !important;
		margin: 0 !important;
		padding: 0 24px !important;
		box-sizing: border-box !important;
	}
}


/* ==========================================================================
   DESKTOP: HEADER / MEGAMENU FIXES
   Applies only from 1000px upwards because the desktop header and mobile
   menu use different layouts/behaviour.
   ========================================================================== */

@media (min-width: 1000px) {

	/* Keep Salient's outer fixed-header wrapper aligned with the custom header. */
	#header-outer {
		height: 110px !important;
		min-height: 0 !important;
		overflow: visible !important;
	}

	/* Make the custom header container full-width. */
	#header-outer .global-header__container {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		height: 110px !important;
		min-height: 0 !important;
		overflow: visible !important;
	}

	/* Keep the inner header content aligned to the intended desktop width. */
	#header-outer .global-header__container .global-overlay__container {
		max-width: 1425px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Make the megamenu positioning context predictable. */
	#header-outer .global-nav__megamenu,
	#header-outer .global-nav__megamenu > ul.sf-menu {
		position: static !important;
	}

	/* Position dropdown panels directly below the main blue nav bar. */
	#header-outer .global-nav__megamenu > ul.sf-menu > li.megamenu-item > ul.megamenu-dropdown__item,
	#header-outer .global-nav__megamenu li.megamenu-item > .megamenu-dropdown__item {
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		margin-top: 0 !important;
	}

	/* Megamenu dropdown typography. */
	#header-outer .megamenu-dropdown__item,
	#header-outer .megamenu-dropdown__item p,
	#header-outer .megamenu-dropdown__item li,
	#header-outer .megamenu-dropdown__item a {
		font-size: 15px !important;
		line-height: 1.35 !important;
		font-weight: 400 !important;
	}

	#header-outer .megamenu-dropdown__item h3,
	#header-outer .megamenu-dropdown__item h4,
	#header-outer .megamenu-dropdown__item .vc_custom_heading {
		font-size: 15px !important;
		line-height: 1.35 !important;
		font-weight: 600 !important;
	}

	#header-outer .megamenu-dropdown__item a {
		text-decoration: none !important;
	}

	#header-outer .megamenu-dropdown__item a:hover {
		text-decoration: underline !important;
	}

	/* Top CTA nav typography. */
	#header-outer .global-navcol__second,
	#header-outer .global-nav__upper,
	#header-outer .global-nav__upper a {
		font-size: 14px !important;
		line-height: 1.2 !important;
		font-weight: 400 !important;
	}

	/* Pull the page content up to meet the corrected custom header. */
	#ajax-content-wrap {
		margin-top: -36px !important;
	}
}


/* ==========================================================================
   FOOTER OVERRIDES
   Restore the live site's dark footer background and white text.
   ========================================================================== */

#footer-outer {
	background-color: #191919 !important;
}

#footer-outer,
#footer-outer p,
#footer-outer li,
#footer-outer h4,
#footer-outer .widget_nav_menu li a {
	color: #fff !important;
}

#footer-outer .widget_nav_menu li a:hover {
	opacity: .75;
}

#footer-outer h4 {
	color: #fff !important;
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 1em;
	font-weight: 600;
}

/* Homepage bottom advisor CTA */
.module-content-small-cta {
  padding-top: 70px !important;
  padding-bottom: 70px !important;
}

.module-content-small-cta .wpb_text_column:first-child p {
  font-size: 40px;
  line-height: 1.25;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 28px;
}

.module-content-small-cta .wpb_text_column:nth-child(2) p {
  font-size: 26px;
  line-height: 1.35;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 0;
}

@media (max-width: 999px) {
  .module-content-small-cta {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .module-content-small-cta .wpb_text_column:first-child p {
    font-size: 30px;
  }

  .module-content-small-cta .wpb_text_column:nth-child(2) p {
    font-size: 21px;
  }
}

@media (max-width: 690px) {
  .module-content-small-cta .wpb_text_column:first-child p {
    font-size: 25px;
  }

  .module-content-small-cta .wpb_text_column:nth-child(2) p {
    font-size: 18px;
  }
}

/* Homepage offer tiles - preserve full GIFs without cropping */
.innerpage-offers--three {
  display: flex;
  gap: 0;
  align-items: center;
  padding-top: 0;
  padding-bottom: 40px;
}

.innerpage-offers--three .innerpage-offers__anchor {
  display: block;
  flex: 1 1 0;
  margin-bottom: 20px;
}

.innerpage-offers--three .innerpage-offers__anchor span {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 350 / 260;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

/* Stack homepage offer tiles on mobile */
@media (max-width: 690px) {
  .innerpage-offers--three {
    display: block;
    padding-top: 0;
    padding-bottom: 30px;
  }

  .innerpage-offers--three .innerpage-offers__anchor {
    display: block;
    margin-bottom: 20px;
  }
}

/* =========================================================
   Inspirations page gallery filter buttons
   ========================================================= */

.dk-gallery-tabswrapper__casestudies .gallery-category__tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 auto 45px;
  padding: 0;
  list-style: none;
}

.dk-gallery-tabswrapper__casestudies .gallery-category__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dk-gallery-tabswrapper__casestudies .gallery-category__tab {
  display: inline-grid;
  place-items: center;
  height: 58px;
  padding: 0 22px;
  border: 1px solid #b9c0c7;
  color: #111;
  font-size: 17px;
  line-height: 1;
  font-weight: 400;
  text-align: center;
  text-decoration: none !important;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.dk-gallery-tabswrapper__casestudies .gallery-category__tab:hover,
.dk-gallery-tabswrapper__casestudies .gallery-category__tab:focus,
.dk-gallery-tabswrapper__casestudies .gallery-category__tab--active {
  color: #00589b;
  border-color: #00589b;
  text-decoration: none !important;
}

@media (max-width: 768px) {
  .dk-gallery-tabswrapper__casestudies .gallery-category__tabs {
    gap: 12px;
    margin-bottom: 30px;
  }

  .dk-gallery-tabswrapper__casestudies .gallery-category__tab {
    height: 46px;
    padding: 0 16px;
    font-size: 14px;
    line-height: 1;
  }
}