/* ============================================================
   BALOCH HOTEL — SITE FOOTER
   ------------------------------------------------------------
   Markup: template-parts/bh-footer.php

   Replaces the ElementsKit footer template (60), which rendered as a
   bare <div> with no landmark, sized its Contact column at 177.5%
   (533px inside a 390px viewport) and pointed every Explore/Policies
   link at "#".

   Layout follows the agreed reference; the brand red is kept, as
   requested, in place of the reference's gold ground.
   ============================================================ */

.bh-footer {
	background: var(--bh-red);
	color: var(--bh-white);
	font-family: var(--bh-font-body);
	font-size: var(--bh-body-size);
	line-height: var(--bh-body-lh);
	letter-spacing: var(--bh-body-ls);
}

.bh-footer__inner {
	display: grid;
	gap: 34px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 40px 20px 30px;
}


/* ------------------------------------------------------------
   1. BRAND
   ------------------------------------------------------------ */

.bh-footer__logo {
	display: inline-block;
	line-height: 0;
}

.bh-footer__logo img {
	display: block;
	width: auto;
	max-width: 128px;
	height: auto;
}

.bh-footer__tagline {
	max-width: 42ch;
	margin: 16px 0 0;
	color: rgba(255, 255, 255, 0.86);
}

.bh-footer__social {
	display: flex;
	gap: 10px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.bh-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 50%;
	color: var(--bh-white);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.bh-footer__social a svg {
	width: 17px;
	height: 17px;
}

.bh-footer__social a:hover {
	background: var(--bh-gold);
	border-color: var(--bh-gold);
	color: var(--bh-dark);
}


/* ------------------------------------------------------------
   2. LINK COLUMNS
   ------------------------------------------------------------ */

.bh-footer__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 20px;
}

.bh-footer__heading {
	margin: 0 0 12px;
	font-family: var(--bh-font-display);
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.1px;
	color: var(--bh-gold);
}

.bh-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bh-footer__col li {
	margin-bottom: 9px;
	color: rgba(255, 255, 255, 0.86);
}

.bh-footer__col a {
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
	/* `break-word`, NOT `anywhere`. Both break a long word that cannot
	   fit — but `anywhere` also lets the element's min-content width
	   collapse to a single character, so the grid track shrank to fit
	   nothing and the email wrapped with the final "m" on its own line
	   even though there was room for it. `break-word` leaves intrinsic
	   sizing alone, so the track still asks for the whole address. */
	overflow-wrap: break-word;
	transition: color 0.16s ease;
}

.bh-footer__col a:hover,
.bh-footer__col a:focus {
	color: var(--bh-gold);
	text-decoration: underline;
}

.bh-footer__col a:focus-visible {
	outline: 2px solid var(--bh-gold);
	outline-offset: 2px;
}

/* Contact spans both columns on mobile so its longer values have room. */
.bh-footer__contact {
	grid-column: 1 / -1;
}

/* Scoped through `.bh-footer__col` to clear the generic
   `.bh-footer__col li` margin above, which is (0,1,1). */
.bh-footer__col .bh-footer__contact-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
}

.bh-footer__contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: var(--bh-gold);
}

.bh-footer__contact-icon svg {
	width: 15px;
	height: 15px;
}

/* `min-width: 0` lets this flex item shrink to the column; without it a
   flex child refuses to go below its content's min-content width. */
.bh-footer__contact-body {
	min-width: 0;
	padding-top: 2px;
	line-height: 22px;
}

.bh-footer__hours {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
}


/* ------------------------------------------------------------
   2b. BRANCHES
   Kept compact on purpose: the city is printed once in the label, and
   each branch is two lines — name with an underlined "Directions" cue,
   street underneath. No panel; the gold label and cue carry the
   emphasis. The whole entry is one link so the tap target is generous.
   ------------------------------------------------------------ */

.bh-footer__col .bh-footer__contact-row--branches {
	margin-bottom: 16px;
}

.bh-footer__branches-label {
	display: block;
	margin-bottom: 8px;
	color: var(--bh-gold);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.4px;
	line-height: 22px;
	text-transform: uppercase;
}

.bh-footer__col ul.bh-footer__branches {
	display: grid;
	gap: 10px;
}

.bh-footer__col .bh-footer__branch {
	margin: 0;
}

/* (0,2,0) + pseudo beats the generic `.bh-footer__col a:hover` (0,2,1),
   which would otherwise underline the name and street too. */
.bh-footer__col .bh-footer__branch-link,
.bh-footer__col .bh-footer__branch-link:hover,
.bh-footer__col .bh-footer__branch-link:focus {
	display: block;
	color: inherit;
	text-decoration: none;
}

.bh-footer__col .bh-footer__branch-link:focus-visible {
	outline: 2px solid var(--bh-gold);
	outline-offset: 3px;
	border-radius: 4px;
}

.bh-footer__branch-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0 12px;
}

.bh-footer__branch-name {
	color: var(--bh-white);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.bh-footer__branch-directions {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--bh-gold);
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.16s ease;
}

.bh-footer__branch-directions svg {
	flex: none;
	width: 12px;
	height: 12px;
}

.bh-footer__branch-link:hover .bh-footer__branch-directions,
.bh-footer__branch-link:focus .bh-footer__branch-directions {
	color: var(--bh-white);
}

.bh-footer__branch-address {
	display: block;
	color: rgba(255, 255, 255, 0.78);
	font-size: 14px;
	line-height: 20px;
}

@media (prefers-reduced-motion: reduce) {
	.bh-footer__branch-directions {
		transition: none;
	}
}


/* ------------------------------------------------------------
   3. BOTTOM BAR
   ------------------------------------------------------------ */

.bh-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.bh-footer__bar-inner {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 20px 26px;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.78);
}

.bh-footer__bar-inner p {
	margin: 0;
}

.bh-footer__sep {
	margin: 0 4px;
	color: rgba(255, 255, 255, 0.5);
}


/* ------------------------------------------------------------
   4. TABLET / DESKTOP
   ------------------------------------------------------------ */

@media (min-width: 768px) {
	.bh-footer__inner {
		grid-template-columns: 1.1fr 2fr;
		gap: 48px;
		padding: 56px 24px 40px;
	}

	/* Flex, not a fixed grid: the Policies column only renders once those
	   pages are published, so the column count changes. Fixed `fr` tracks
	   put Contact in a narrow slot whenever it is one of two — and an
	   equal third (~199px) is already too tight for a 24-character email
	   with no break opportunity in it, which is what forced the address
	   to split mid-word. A flex basis floor sizes it from its content
	   instead, whichever columns are present. */
	.bh-footer__cols {
		display: flex;
		flex-wrap: wrap;
		gap: 32px;
	}

	.bh-footer__col {
		flex: 1 1 0;
		min-width: 0;
	}

	.bh-footer__contact {
		flex: 0 1 auto;
		min-width: 254px;
	}

	.bh-footer__bar-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 20px 24px 28px;
	}
}


/* ------------------------------------------------------------
   5. MOTION PREFERENCES
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.bh-footer__social a,
	.bh-footer__col a {
		transition: none;
	}
}