/**
 * Footer.
 *
 * Structure follows the reference: Contact info, Top Destinations, Travel
 * Information, Company, then a Trusted Partners block set off by a vertical
 * rule.
 *
 * The background stays the brand teal rather than the reference's dark navy.
 * Changing the footer colour is a brand decision, not a layout one, so it is a
 * single variable here: set --de-footer-bg to #1e2733 to get the darker look
 * from the reference.
 */

.de-footer {
	--de-footer-bg: #0d9693;      /* brand teal, as today */
	--de-footer-fg: #ffffff;
	--de-footer-muted: rgba(255, 255, 255, .78);
	--de-footer-rule: rgba(255, 255, 255, .18);
	--de-footer-accent: #f78f1e;  /* brand orange */

	background: var(--de-footer-bg);
	color: var(--de-footer-fg);
	padding: 72px 0 0;
	font-family: Raleway, system-ui, sans-serif;
}

.de-footer__inner {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ------------------------------------------------------------ columns -- */

.de-footer__cols {
	display: grid;
	gap: 44px 40px;
	grid-template-columns: 1fr;
}

@media (min-width: 700px)  { .de-footer__cols { grid-template-columns: repeat(2, 1fr); } }

@media (min-width: 1040px) {
	.de-footer__cols { grid-template-columns: repeat(4, 1fr); }

	/*
	 * Rule between the contact block and the link columns, matching the one
	 * before the partners. Contact info is a different kind of content from a
	 * list of links: addresses, a promise and social buttons. The rules mark
	 * the footer's three parts, which is what the reference does.
	 *
	 * :first-of-type targets Top Destinations, because the contact block is a
	 * <section> and the link columns are <nav>. Only from 1040px up: below
	 * that the columns stack and a left border would sit above a heading
	 * rather than beside one.
	 */
	/*
	 * The rule hangs off the RIGHT of the contact column, not the left of Top
	 * Destinations.
	 *
	 * Putting it on the link column meant its padding came out of that
	 * column's own width, so "Top Destinations" wrapped to two lines while
	 * "Travel Information", a longer string, stayed on one. Hanging it off the
	 * contact block takes the space from the widest column instead and leaves
	 * the three link columns identical.
	 */
	.de-footer__contact {
		border-right: 1px solid var(--de-footer-rule);
		padding-right: 36px;
	}
}

/*
 * At full width the partners block sits after a rule, as its own band across
 * the bottom of the grid rather than a fifth squeezed column. Twelve logos
 * need the width, and the rule is what makes it read as a separate statement
 * rather than another link list.
 */
@media (min-width: 1240px) {
	.de-footer__cols {
		grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
	}
	.de-footer__partners {
		border-left: 1px solid var(--de-footer-rule);
		padding-left: 40px;
		max-width: 330px;
	}
}

.de-footer h2 {
	font-family: Poppins, system-ui, sans-serif;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .01em;
	margin: 0 0 18px;
	color: var(--de-footer-fg);
}

.de-footer__col ul,
.de-footer__meta,
.de-footer__social,
.de-footer__partners ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.de-footer__col li { margin: 0 0 11px; }

.de-footer a {
	color: var(--de-footer-muted);
	text-decoration: none;
	transition: color .16s ease;
}

.de-footer a:hover,
.de-footer a:focus-visible {
	color: var(--de-footer-fg);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.de-footer a:focus-visible {
	outline: 2px solid var(--de-footer-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ------------------------------------------------------------ contact -- */

.de-footer__meta li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0 0 13px;
	color: var(--de-footer-muted);
	line-height: 1.5;
}

.de-footer__ic {
	flex: 0 0 auto;
	display: inline-flex;
	margin-top: 2px;
	color: var(--de-footer-accent);
}

.de-footer__ic svg { width: 17px; height: 17px; display: block; }

.de-footer__promise {
	color: var(--de-footer-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 20px 0 22px;
	max-width: 34ch;
}

/*
 * Socials, in the base bar. Plain glyphs rather than outlined circles, which
 * is how they read in the original footer: at the bottom of the page they are
 * a quiet row, not five buttons competing with the copyright line.
 */
.de-footer__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.de-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--de-footer-muted);
	transition: color .16s ease, transform .16s ease;
}

.de-footer__social a:hover {
	color: var(--de-footer-fg);
	transform: translateY(-1px);
	text-decoration: none;
}

.de-footer__social svg { width: 19px; height: 19px; display: block; }

/* ----------------------------------------------------------- partners -- */

.de-footer__partners ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 22px;
	align-items: center;
}

@media (min-width: 700px) and (max-width: 1239px) {
	.de-footer__partners { grid-column: 1 / -1; }
	.de-footer__partners ul { grid-template-columns: repeat(6, 1fr); }
}

/*
 * White vector logos, straight onto the teal. No chips.
 *
 * These are traced SVGs, which is what finally makes this work. The earlier
 * white-silhouette attempt used raster images and any logo that knocks text
 * out of a solid shape broke: Radisson's "BLU" box and Expedia's circle
 * filled in solid. A path has real holes, so the counters survive.
 *
 * Being vector, they are also sharp at any size, which the two low-resolution
 * sources (Best Western, Turkish Airlines) badly needed.
 */
.de-footer__partners li {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
}

.de-footer__partners img {
	max-width: 100%;
	height: 26px;
	width: auto;
	object-fit: contain;
	display: block;
	/* Slightly held back so twelve marks do not compete with the headings,
	   full strength on hover. */
	opacity: .85;
	transition: opacity .16s ease;
}

.de-footer__partners li:hover img { opacity: 1; }

/* --------------------------------------------------------------- base -- */

.de-footer__base {
	margin-top: 56px;
	padding: 22px 0 26px;
	border-top: 1px solid var(--de-footer-rule);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
}

.de-footer__base p {
	margin: 0;
	font-size: 14px;
	color: var(--de-footer-muted);
}

@media (prefers-reduced-motion: reduce) {
	.de-footer a,
	.de-footer__social a,
	.de-footer__partners img { transition: none; }
}