/**
 * JC Lalnunsanga child theme - site chrome: header top bar, footer, and the
 * floating controls.
 *
 * WHY THIS FILE EXISTS
 *
 * All of this used to live in Customizer > Additional CSS, which is not in the
 * repository, is invisible to anyone reading the theme, and loads after every
 * theme stylesheet so it silently won every conflict. Patching the theme while
 * the Customizer overrode it is why the footer kept "not sticking". It has been
 * moved here and the Customizer CSS emptied, so there is one source of truth.
 * The original is preserved at reference/customizer-css-before.css.
 *
 * THE RULE THAT WAS BROKEN
 *
 * The old rules hardcoded colours for dark surfaces - #c7cedb text, #faf8f4
 * hover. The header and footer are only dark in dark mode; in light mode the
 * footer inherits the cream page and the header is now light too. Every colour
 * here therefore comes from a theme-colors.css token and follows the mode by
 * itself. Hardcoded hex appears only where a surface is fixed in both modes,
 * and is called out where it does.
 *
 * @package kadence-child-jcl
 */

/* ==========================================================================
   Header - top contact bar
   ========================================================================== */

.jcl-topbar-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	height: 100%;
}

.jcl-topbar-contact a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1px solid var( --border-color );
	border-radius: 20px;
	color: var( --text-color );
	text-decoration: none;
	font-size: 13px;
	white-space: nowrap;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.jcl-topbar-contact a:hover,
.jcl-topbar-contact a:focus-visible {
	background: var( --gold );
	border-color: var( --gold );
	color: #16223b; /* fixed: always sits on the gold fill */
}

.jcl-topbar-contact a::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	flex-shrink: 0;
}

.jcl-topbar-email::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M4 4l8 8 8-8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M4 4l8 8 8-8'/%3E%3C/svg%3E");
}

.jcl-topbar-phone::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Top row sits on the page ground, one hairline below the main header row. */
.site-top-header-wrap .site-header-row-container-inner {
	background: var( --bg-color );
	border-bottom: 1px solid var( --border-color );
}

/* ==========================================================================
   Header - logo and navigation
   ========================================================================== */

/*
 * The logo is a dark wordmark, so on a light header it needs no backing plate.
 * Cap its height rather than its width so a replacement file of any proportion
 * still sits correctly in the bar.
 */
.site-branding a.brand img.custom-logo {
	max-height: 62px;
	width: auto;
	max-width: 260px;
	object-fit: contain;
}

/* Header social icons follow the header ground rather than assuming navy. */
.site-header-item .header-social-inner-wrap .social-button {
	color: var( --text-color );
	border: 1px solid var( --border-color );
	background: transparent;
}

.site-header-item .header-social-inner-wrap .social-button:hover {
	color: #16223b; /* fixed: always on the gold fill */
	background: var( --gold );
	border-color: var( --gold );
}

/* ==========================================================================
   Footer
   ========================================================================== */

#colophon .site-middle-footer-wrap {
	border-top: 1px solid var( --border-color );
}

.jcl-footer-heading {
	font-family: 'Playfair Display', serif;
	position: relative;
	padding-bottom: 14px;
	margin-bottom: 24px !important;
	color: var( --heading-color );
}

.jcl-footer-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 36px;
	height: 2px;
	background: var( --gold );
}

.jcl-footer-links,
.jcl-footer-contact {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jcl-footer-links li {
	margin-bottom: 12px;
}

.jcl-footer-links a,
.jcl-footer-contact a,
.jcl-footer-contact li span:not( .jcl-footer-icon ) {
	color: var( --text-color );
	text-decoration: none;
}

.jcl-footer-links a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: color .2s ease;
}

.jcl-footer-links a::before {
	content: "\276F";
	color: var( --gold );
	font-size: 12px;
	flex-shrink: 0;
}

.jcl-footer-links a:hover,
.jcl-footer-links a:focus-visible,
.jcl-footer-contact a:hover,
.jcl-footer-contact a:focus-visible {
	color: var( --link-color );
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * A long email or chamber address has to wrap inside its column. Flex items
 * default to min-width:auto, which is what let the email run past the edge and
 * get clipped on a phone.
 */
/*
 * A two-track grid, not flex. Flex sizes the text from its content, which made
 * the chamber address collapse to a couple of words per line: `overflow-wrap:
 * anywhere` (used to stop the email overflowing) also collapses an element's
 * intrinsic minimum width, so the text box could shrink almost to nothing.
 * An explicit `36px minmax(0, 1fr)` gives the text exactly the remaining width
 * every time, whatever it contains.
 */
.jcl-footer-contact li {
	display: grid;
	grid-template-columns: 36px minmax( 0, 1fr );
	gap: 14px;
	align-items: start;
	margin-bottom: 20px;
}

.jcl-footer-contact li:last-child {
	margin-bottom: 0;
}

/*
 * break-word, not anywhere: it wraps long words but leaves intrinsic sizing
 * alone. `anywhere` stays only on the email, which is one unbroken token and
 * genuinely has to be split.
 */
.jcl-footer-contact li span:not( .jcl-footer-icon ) {
	min-width: 0;
	overflow-wrap: break-word;
}

.jcl-footer-contact a[href^="mailto"] {
	overflow-wrap: anywhere;
}

.jcl-footer-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border: 1px solid var( --gold );
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.jcl-footer-icon::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: var( --gold );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.jcl-icon-phone::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.jcl-icon-mail::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M4 4l8 8 8-8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M4 4l8 8 8-8'/%3E%3C/svg%3E");
}

.jcl-icon-pin::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

#colophon .wp-block-social-links .wp-social-link {
	background-color: transparent;
	border: 1px solid var( --gold );
}

#colophon .wp-block-social-links .wp-social-link svg {
	fill: var( --gold );
}

#colophon .wp-block-social-links .wp-social-link:hover {
	background-color: var( --gold );
}

#colophon .wp-block-social-links .wp-social-link:hover svg {
	fill: #16223b; /* fixed: always on the gold fill */
}

/* Footer bottom bar - copyright and the legal menu. */
.site-bottom-footer-wrap {
	border-top: 1px solid var( --border-color );
}

.footer-row-br a,
#colophon .footer-navigation .footer-menu-container ul li a {
	color: var( --muted-color );
}

.footer-row-br a:hover,
#colophon .footer-navigation .footer-menu-container ul li a:hover {
	color: var( --link-color );
}

/* Chambers column carries far more text than the two link columns. */
@media ( min-width: 1025px ) {
	#colophon .site-middle-footer-inner-wrap.site-footer-row-columns-3 {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ) minmax( 0, 1.7fr );
		gap: 48px;
	}
}

/* Phones: one column, and clearance for the floating controls. */
@media ( max-width: 767px ) {
	#colophon .site-middle-footer-inner-wrap {
		grid-template-columns: minmax( 0, 1fr );
		gap: 34px;
	}

	#colophon .site-footer-section {
		width: 100%;
	}

	#colophon {
		padding-bottom: 96px;
	}

	.jcl-footer-heading {
		margin-bottom: 16px !important;
	}
}

/* ==========================================================================
   Mobile menu drawer
 *
 * Kadence paints the drawer from a single Customizer colour, which cannot vary
 * by mode - so in light mode the whole site went light except this panel, which
 * stayed dark. Overridden here with the tokens instead. The menu links use
 * --global-palette10, a slot theme-colors.css does not remap, so they need
 * naming explicitly or they stay near-white on a light panel.
   ========================================================================== */

#mobile-drawer .drawer-inner,
#mobile-drawer .drawer-content,
#mobile-drawer .drawer-head {
	background: var( --card-bg );
}

#mobile-drawer .mobile-navigation ul li a,
#mobile-drawer .mobile-navigation ul li .drawer-nav-drop-wrap,
#mobile-drawer .drawer-toggle,
#mobile-drawer .menu-toggle-close {
	color: var( --text-color );
}

#mobile-drawer .mobile-navigation ul li a:hover,
#mobile-drawer .mobile-navigation ul li.current-menu-item a {
	color: var( --link-color );
}

#mobile-drawer .mobile-navigation ul li {
	border-bottom: 1px solid var( --border-color );
}

/* ==========================================================================
   Floating controls - language, back to top, dark mode
   ==========================================================================
 * These sit over page content in both modes, so they are a self-contained
 * navy pill with a gold edge rather than following the page ground. That is
 * the one place a fixed colour is the right answer.
   ========================================================================== */

#dark-mode-toggle,
#back-to-top,
#jcl-lang-toggle {
	position: fixed;
	bottom: 16px;
	z-index: 9999;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .35 );
}

#dark-mode-toggle,
#back-to-top {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var( --gold );
	border-radius: 50%;
	background: #16223b;
	color: #faf8f4;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

#dark-mode-toggle {
	right: 16px;
}

#back-to-top {
	right: 64px;
	opacity: 0;
	visibility: hidden;
	transform: translateY( 8px );
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

#back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

#dark-mode-toggle:hover,
#dark-mode-toggle:focus-visible,
#back-to-top:hover,
#back-to-top:focus-visible {
	background: #1f3157;
}

#jcl-lang-toggle {
	right: 112px;
	left: auto;
	top: auto;
	transform: none;
	display: flex;
	flex-direction: row;
	width: auto;
	height: 38px;
	background: #16223b;
	border: 1px solid var( --gold );
	border-radius: 50px;
	overflow: hidden;
	font-family: 'Work Sans', sans-serif;
}

#jcl-lang-toggle a {
	padding: 0 12px;
	display: flex;
	align-items: center;
	color: #93a0b8;
	text-decoration: none;
	text-align: center;
	font-size: 13px;
}

#jcl-lang-toggle a.is-active {
	background: var( --gold );
	color: #16223b;
}

#jcl-lang-toggle a:hover:not( .is-active ) {
	color: #faf8f4;
}

@media ( prefers-reduced-motion: reduce ) {
	#back-to-top {
		transition: none;
	}
}