/* ILCK 2026-0819 - newsletter signup: banner arrows, footer button, header shortcut */

/* 1. Banner slider arrows.
      Swiper defaults --swiper-theme-color to #007aff and nothing here ever
      overrode it, which is where the blue came from. */
.mySwiper {
	--swiper-navigation-color: #ffffff;
	--swiper-theme-color: #ffffff;
}
.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev {
	color: #ffffff;
}

/* 2. Footer Subscribe button - same lozenge as .a_green ("View blog posts"),
      starting white and inverting to dark on hover. #00642b is the darker
      brand green already used elsewhere; #8ec05c on white fails contrast. */
/* Scoped on the #newsletter-signup id deliberately. Twenty Twenty-One paints
   buttons with ".site .button:not(:hover):not(:active):not(.has-background)",
   which out-specifies any class-only selector here - the id wins cleanly and
   avoids adding yet another !important to this stylesheet. */
#newsletter-signup .gform_button,
#newsletter-signup button.gform_button,
#newsletter-signup input[type="submit"] {
	background-color: #ffffff;
	color: #00642b;
	border: 0;
	border-radius: 20px;
	padding: 10px 30px;
	font-size: 19px;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#newsletter-signup .gform_button:hover,
#newsletter-signup button.gform_button:hover,
#newsletter-signup input[type="submit"]:hover,
#newsletter-signup .gform_button:focus-visible {
	background-color: #101828;
	color: #ffffff;
}

/* 3. Newsletter icon in the header, between the menu and the search icon. */
.header-newsletter {
	display: flex;
	align-items: center;
	/* #primary-menu-list overruns its own nav box by ~13px, so without this the
	   icon sits on top of the last menu item. Pushes the links left, as asked. */
	margin-left: 32px;
}

/* Even out the header spacing. The search icon carried a 40px left margin
   against the language flag's 20px, so the envelope-to-search gap read as
   double the search-to-flag gap. Match them all. */
header .custom-seatch {
	margin-left: 20px;
}
.header-newsletter a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #101828;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	transition: color .2s ease;
}
.header-newsletter a:hover,
.header-newsletter a:focus-visible {
	color: #8ec05c;
}

/* Stop the header sitting over the band when we jump to it. */
.newsletter {
	scroll-margin-top: 110px;
}
.newsletter:focus {
	outline: none;
}

/* 4. Brief highlight on arrival, so it is obvious what the icon pointed at. */
@keyframes ilck-subscribe-flash {
	0%, 100% { transform: none;         box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
	25%      { transform: scale(1.07);  box-shadow: 0 0 0 8px rgba(255, 255, 255, .55); }
	60%      { transform: scale(1.02);  box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
}
#newsletter-signup .gform_button.ilck-flash {
	animation: ilck-subscribe-flash 1.1s ease-in-out 2;
}
@media (prefers-reduced-motion: reduce) {
	#newsletter-signup .gform_button.ilck-flash {
		animation: none;
		box-shadow: 0 0 0 5px rgba(255, 255, 255, .6);
	}
}

/* Below 991px (the Bootstrap lg breakpoint this theme switches the nav on) the
   header collapses to logo + flag + burger and the search icon drops out too.
   There is no room for the envelope, and it lands on the logo - so hide it.
   The footer band is a short scroll away on mobile anyway. If it needs to be
   reachable from the mobile menu, that is a menu item rather than an icon. */
@media (max-width: 991px) {
	.header-newsletter {
		display: none;
	}
}


/* ── Footer "More Pages" menu ────────────────────────────────────────────────
   An inline <style> block sets "ul#menu-footer-menu li { float: left; width: 50% }",
   which put Blog and Team side by side and squeezed "Cookie Policy (EU)" into a
   101px column so it broke across two lines. Stack them one per line instead,
   and keep the (EU) with its label. The French and Italian menus carry their own ids (-fr, -it), so each is listed; an attribute selector would lose to the inline id rule. The selector carries an extra class purely
   to out-specify that inline rule. */
.site-footer ul#menu-footer-menu > li,
.site-footer ul#menu-footer-menu-fr > li,
.site-footer ul#menu-footer-menu-it > li {
	float: none;
	width: 100%;
	display: block;
}

.site-footer ul#menu-footer-menu > li > a,
.site-footer ul#menu-footer-menu-fr > li > a,
.site-footer ul#menu-footer-menu-it > li > a {
	display: inline-block;
	/* Stops "Cookie Policy" and "(EU)" being split across lines. */
	white-space: nowrap;
}

.site-footer ul#menu-footer-menu::after,
.site-footer ul#menu-footer-menu-fr::after,
.site-footer ul#menu-footer-menu-it::after {
	content: "";
	display: block;
	clear: both;
}

/* ── Welcome section: match the space below the image to the space above ─────
   .hm_greenc.pd-80 gets its top padding from a stack of breakpoint rules
   (120 / 75 / 130 / 50 / 35 px) but its bottom padding is pinned at 50px by a
   single unmediated rule, so the gap under the photo read as short against the
   gap above it. Mirror the top value at every breakpoint. The extra "section"
   in the selector is only there to out-specify that 50px rule. */
section.hm_greenc.pd-80 {
	padding-bottom: 120px;
}

@media only screen and (min-width: 992px) and (max-width: 1024px) {
	section.hm_greenc.pd-80 { padding-bottom: 75px; }
}

@media only screen and (min-width: 801px) and (max-width: 991px) {
	section.hm_greenc.pd-80 { padding-bottom: 130px; }
}

@media only screen and (min-width: 581px) and (max-width: 800px) {
	section.hm_greenc.pd-80 { padding-bottom: 50px; }
}

@media only screen and (max-width: 580px) {
	section.hm_greenc.pd-80 { padding-bottom: 35px; }
}

/* ── Default page template (the thank-you pages) ─────────────────────────────
   Pages on the default template have no container, so their body copy ran the
   full width of the window while every other section of the site sits in a
   ~1200px column. Barely noticeable when the thank-you page was one short line;
   obvious now that it explains the confirmation email. Scoped to the default
   template so the front page, gallery and team templates are untouched. */
body.page-template-default .site-main > article {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
}

/* ── Mobile menu newsletter link (2026-0923) ─────────────────────────────────
   Added to the primary menu by a filter in functions.php. Desktop has the
   envelope icon, so the menu item only shows where the icon is hidden. */
#primary-menu-list > li.ilck-menu-newsletter {
	display: none;
}
@media (max-width: 991px) {
	#primary-menu-list > li.ilck-menu-newsletter {
		display: block;
	}
}

/* ── Header language switcher (2026-0923) ────────────────────────────────────
   The theme shows each language as a 24px round flag. With WPML flags
   switched back on, the language names still rendered under each flag and
   slivers of text showed at the bottom of the circles. The links keep their
   aria-label, so hiding the visible names costs nothing for screen readers. */
.language-switcher .wpml-ls-native,
.language-switcher .wpml-ls-display {
	display: none;
}


/* ── Header icons: sizes and spacing (2026-0923) ─────────────────────────────
   Measured on screen: magnifier glyph 18.75px tall, flag circle 24px (22px
   visible), envelope-to-magnifier gap 41px against magnifier-to-flag 31px.
   Flag circles go to 21px so they read the same size as the magnifier, and
   the envelope is pulled 10px closer so both gaps match. The negative margin
   sits on the envelope itself, so pages that hide it (Nordics) are unaffected. */
.header-newsletter {
	margin-right: -10px;
}
.language-switcher .wpml-ls-legacy-dropdown a.js-wpml-ls-item-toggle.wpml-ls-item-toggle,
.language-switcher .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a {
	width: 21px;
	height: 21px;
}
/* Centre the flag on the magnifier, which sits about 1.5px lower. */
/* Nudge the flag links, not the switcher box: position/top on the box dropped
   the flag onto the logo on mobile (the theme positions it there), and a
   transform on the box made a new stacking layer that put the open dropdown
   behind the banner. The links do not contain the dropdown, so this is safe. */
.language-switcher .wpml-ls-legacy-dropdown a.js-wpml-ls-item-toggle.wpml-ls-item-toggle,
.language-switcher .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a {
	transform: translateY(1px);
}

/* Where the envelope is hidden (the Nordics section has no signup form), give
   the search icon back the original 40px gap from the menu, since the 20px
   above assumed the envelope sat in between. */
header .header-newsletter[style*="none"] + .custom-seatch {
	margin-left: 40px;
}
.language-switcher .wpml-ls-legacy-dropdown .wpml-ls-flag {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* WPML draws a dropdown arrow (::after) inside the toggle. It is clipped by the
   round flag on desktop but pokes out as a dark dot on mobile. The flag itself
   is the control, so drop the arrow. */
.language-switcher .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle::after {
	display: none;
}