/**
 * Shared components: footer, FAQ accordion, table of contents, contact form,
 * counter, slide rotator. Page-specific styling lives in assets/css/pages/.
 */

/* ==========================================================================
   Header: hamburger navigation on small screens
   --------------------------------------------------------------------------
   CSS-only (checkbox hack). Below 992px the header container (theme.css)
   is too narrow for the logo + menu on one line in every language (the
   Swedish menu is the widest at ~720px), so the inline menu swaps for a
   burger + dropdown there.
   ========================================================================== */
/* Bigger customizer logo — the leiservice plugin CSS pins it to 110x48
   (squeezing the wordmark), so this selector has to outweigh
   `.site-branding .custom-logo-link img` there. height:auto keeps each
   country's logo aspect ratio. */
.site-header .site-branding .custom-logo-link img {
	width: 170px;
	height: auto;
}

.site-nav-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.site-nav-burger {
	display: none;
}

@media (max-width: 991px) {
	.site-header {
		position: relative;
		justify-content: space-between;
		align-items: center;
	}

	.site-nav-burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 28px;
		height: 24px;
		cursor: pointer;
	}

	.site-nav-burger span {
		display: block;
		height: 3px;
		border-radius: 2px;
		background-color: var(--lei-text);
		transition: transform 0.2s, opacity 0.2s;
	}

	.site-nav-toggle:checked + .site-nav-burger span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.site-nav-toggle:checked + .site-nav-burger span:nth-child(2) {
		opacity: 0;
	}

	.site-nav-toggle:checked + .site-nav-burger span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	.site-navigation {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 100;
		background: #fff;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
		border-top: 1px solid #eee;
	}

	.site-nav-toggle:checked ~ .site-navigation {
		display: block;
	}

	.site-navigation ul.menu {
		display: block;
		margin: 0;
	}

	.site-navigation ul.menu li {
		display: block;
	}

	.site-navigation ul.menu > li + li {
		border-top: 1px solid #eee;
	}

	.site-navigation ul.menu li a {
		padding: 12px 20px;
	}

	/* submenus render inline and indented instead of on hover */
	.site-navigation ul.menu li.menu-item-has-children {
		padding-right: 0;
	}

	.site-navigation ul.menu li.menu-item-has-children:after {
		display: none;
	}

	.site-navigation ul.menu li ul {
		display: block;
		position: static;
		min-width: 0;
		border: none;
	}

	.site-navigation ul.menu li ul li a {
		padding-left: 40px;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	margin-top: 20px;
	overflow: hidden;
	background-color: var(--lei-slate);
	font-family: var(--lei-font);
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 1400px;
	margin: 0 auto;
	padding: 25px 50px;
}

.site-footer__col {
	width: 100%;
	padding: 15px;
	color: #fff;
}

.site-footer__col--info {
	text-align: left;
	font-size: 14px;
}

.site-footer__col--brand {
	text-align: center;
}

.site-footer__col--links {
	text-align: right;
	font-size: 14px;
}

.site-footer a,
.site-footer a:visited {
	color: #01b8fd;
}

.site-footer p:last-child {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.site-footer__col { width: 33.333%; }
}

@media (max-width: 767px) {
	.site-footer__col--info,
	.site-footer__col--links {
		text-align: center;
	}
}

/* ==========================================================================
   Contact form (ex Elementor Pro form widget; posts to leis_contact_form)
   ========================================================================== */
.c-form {
	font-family: var(--lei-font);
}

.c-form__field {
	margin-bottom: 17px;
}

.c-form__field label {
	display: block;
	color: var(--lei-text);
	font-weight: 400;
	padding-bottom: 8px;
}

.c-form__field input,
.c-form__field textarea {
	width: 100%;
	font-size: 13px;
	min-height: 33px;
	padding: 4px 12px;
	border: 1px solid #818a91;
	border-radius: 2px;
	background-color: #fff;
	color: #373a3c;
}

.c-form__submit {
	font-size: 16px;
	padding: 15px 30px;
	border-radius: 4px;
	min-height: 47px;
}

.c-form__message {
	margin-top: 10px;
	font-size: 85%;
	font-family: var(--lei-font);
}

.c-form__message--success { color: #4caf50; }
.c-form__message--error { color: #f44336; }

/* ==========================================================================
   Card-brand logo strip under the application form (home + lei-registration)
   ========================================================================== */
.c-bank-logos {
	display: flex;
	align-content: space-between;
	align-items: center;
	column-gap: 17px;
}

.c-bank-logos img {
	max-height: 15px;
}

/* ==========================================================================
   Table of contents (ex Elementor Pro TOC widget; list built by theme.js
   from the page's headings)
   ========================================================================== */
.c-toc {
	border: 1px solid #a4afb7;
	border-radius: 3px;
	font-family: var(--lei-font);
}

.c-toc__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid #a4afb7;
}

.c-toc__title {
	font-size: 18px;
	margin: 0;
	color: var(--lei-accent);
	font-weight: 300;
}

.c-toc__body {
	padding: 20px;
}

.c-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: item;
}

.c-toc__list .c-toc__list {
	margin-top: 0.5em;
	margin-left: 1em;
}

.c-toc__item {
	margin-bottom: 0.5em;
	counter-increment: item;
}

.c-toc__item > a {
	display: flex;
	align-items: center;
	color: var(--lei-text);
}

.c-toc__item > a::before {
	content: counters(item, ".") ". ";
	margin-right: 8px;
	color: var(--lei-text);
}

.c-toc__item > a:hover {
	color: var(--lei-success);
	text-decoration: underline;
}

.c-toc__toggle {
	border: 0;
	padding: 0;
	background: none;
	cursor: pointer;
	color: var(--lei-grey);
	line-height: 1;
}

.c-toc__toggle .fa-chevron-down,
.c-toc.is-collapsed .c-toc__toggle .fa-chevron-up {
	display: none;
}

.c-toc.is-collapsed .c-toc__toggle .fa-chevron-down {
	display: inline-block;
}

.c-toc.is-collapsed .c-toc__header {
	border-bottom: 0;
}

.c-toc.is-collapsed .c-toc__body {
	display: none;
}

/* variant: only top-level items visible (the terms page) */
.c-toc--collapse-sub .c-toc__list .c-toc__list {
	display: none;
}

.c-toc__anchor {
	position: absolute;
}

/* ==========================================================================
   Slide rotator (theme.js advances .c-slides__track)
   ========================================================================== */
.c-slides__viewport {
	overflow: hidden;
}

.c-slides__track {
	display: flex;
}

.c-slides__track > * {
	flex: 0 0 100%;
	max-width: 100%;
}

/* ==========================================================================
   Hero step indicator (Application -> Validation -> LEI delivery)
   ========================================================================== */
.c-steps {
	width: 100%;
	text-align: right;
	color: #fff;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--lei-accent-2);
	font-family: var(--lei-font);
}

.c-steps__label {
	font-weight: 600;
	font-size: 14px;
}

.c-steps__badge {
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	text-align: center;
	width: 40px;
	height: 20px;
	padding-top: 2px;
	background-color: var(--lei-accent-2);
	border-radius: 10px;
	margin-right: 5px;
	font-size: 10px;
	color: #fff;
}

@media only screen and (max-width: 600px) {
	.c-steps { text-align: center; }
}

/* ==========================================================================
   Review slider (hero testimonials)
   ========================================================================== */
.c-reviews__slide {
	background-color: transparent;
	border: 2px solid var(--lei-primary);
	border-radius: 10px;
	font-family: var(--lei-font);
}

.c-reviews__title {
	display: block;
	padding: 0 0 1px 10px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 2em;
	font-style: normal;
}

.c-reviews__text {
	padding: 1px 0 5px 10px;
	color: #fff;
}

/* ==========================================================================
   FAQ accordion (theme.js toggles .is-open; first item starts open)
   ========================================================================== */
.c-faq {
	text-align: left;
	font-family: var(--lei-font);
}

.c-faq__item {
	border: 1px solid #d4d4d4;
}

.c-faq__item + .c-faq__item {
	border-top: none;
}

.c-faq__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 15px 20px;
	line-height: 1;
	cursor: pointer;
	outline: none;
	font-weight: 300;
}

.c-faq__title a {
	color: var(--lei-grey);
	pointer-events: none;
}

.c-faq__icon {
	width: 1.5em;
	text-align: right;
	color: var(--lei-grey);
}

.c-faq__icon .fa-times,
.c-faq__item.is-open .c-faq__icon .fa-plus {
	display: none;
}

.c-faq__item.is-open .c-faq__icon .fa-times {
	display: inline-block;
	color: #000;
}

.c-faq__item.is-open .c-faq__title a {
	color: #2c355f;
}

.c-faq__content {
	display: none;
	padding: 15px 20px;
	border-top: 1px solid #d4d4d4;
}

.c-faq__item.is-open .c-faq__content {
	display: block;
}

/* ==========================================================================
   Pricing boxes (home + prices page)
   ========================================================================== */
.c-pricebox {
	background-color: #fff;
	transition: background 0.3s;
	text-align: center;
	font-family: var(--lei-font);
	cursor: pointer;
	/* Column flex so the checklist can absorb the slack and the rule + total +
	   CTA below it line up across all three boxes whatever the item count. The
	   boxes themselves are already equal height (flex row, align stretch). */
	display: flex;
	flex-direction: column;
}

.c-pricebox:hover {
	background-image: linear-gradient(180deg, #ffffff 25%, #6ec1e4 100%);
}

.c-pricebox--featured {
	border: 1px solid var(--lei-accent);
	border-top-width: 15px;
	box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.5);
	margin-top: -15px;
	z-index: 1;
	/* No padding-bottom here on purpose: it used to balance the 15px top
	   border, but now that the CTA is pinned to the bottom of the box it would
	   lift this box's button 15px above the other two. */
}

@media (min-width: 768px) {
	.c-pricebox--featured { width: 32.732%; }
}

@media (max-width: 767px) {
	.c-pricebox--featured {
		margin-top: 5px;
		width: 100%;
	}
}

.c-pricebox__label {
	color: var(--lei-navy);
	padding-top: 30px;
}

.c-pricebox__rule {
	padding: 6px 0;
}

.c-pricebox__rule span {
	display: block;
	width: 80%;
	margin: 0 auto;
	border-top: 1px solid rgba(122, 122, 122, 0.55);
}

.c-pricebox__rule--short span {
	width: 50%;
}

.c-pricebox__price {
	color: var(--lei-accent);
	font-size: 45px;
	font-weight: 300;
	line-height: 0.7em;
	letter-spacing: -1px;
	margin-bottom: 5px !important;
}

.c-pricebox__list {
	min-height: 90px;
	padding: 0 40px;
	text-align: left;
	flex: 1 0 auto;    /* eats the leftover height, pushing the tail down */
}

.c-pricebox__list li:not(:last-child) {
	padding-bottom: 5px;
}

.c-pricebox__list li:not(:first-child) {
	margin-top: 5px;
}

.c-pricebox__list li i {
	font-size: 14px;
}

.c-pricebox__list li span {
	padding-left: 10px;
}

@media only screen and (max-width: 760px) {
	.c-pricebox__list { min-height: 10px; }
}

.c-pricebox__total {
	color: var(--lei-accent);
	font-size: 22px;
	margin-bottom: 0 !important;
}

.c-pricebox__cta {
	margin: 15px 0;
}

.c-pricebox__cta .c-btn {
	font-weight: 300;
	color: var(--lei-primary);
	fill: var(--lei-primary);
	background-color: #fff;
	border: 1px solid;
	border-radius: 7px;
	padding: 15px 50px;
	font-size: 18px;
}

.c-pricebox__cta .c-btn:hover,
.c-pricebox__cta .c-btn:focus {
	color: #fff;
	background-color: var(--lei-link);
	border-color: rgba(2, 1, 1, 0);
}

/* ==========================================================================
   The 20-character LEI breakdown infographic (home + about-lei; markup in
   the translated blob)
   ========================================================================== */
.lei-explained {
	padding: 0 50px;
	display: flex;
	justify-content: space-between;
	text-align: center;
	font-family: var(--lei-font);
}

.lei-explained span {
	position: relative;
	padding: 4px 10px;
	font-size: 0.8em;
	font-weight: 600;
	color: var(--lei-accent-3);
	background: white;
	display: inline-block;
	border-radius: 3px;
	box-shadow: grey 1px 1px 10px;
}

.lei-explained-inner span:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	margin-left: -11px;
	bottom: -15px;
	left: 50%;
	box-sizing: border-box;
	border: 8px solid black;
	border-color: transparent transparent white white;
	transform-origin: 0 0;
	transform: rotate(-45deg);
	box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.2);
}

.lei-explained p {
	text-align: center;
	color: #212f46;
	font-size: 1em;
	font-weight: 500;
}

@media only screen and (max-width: 950px) {
	.lei-explained {
		display: block;
	}
}