/* =====================================================
   Sticky phone widget (bottom-right)
   Collapsed: navy tab with a phone icon, flush to the
   viewport's right edge. Expanded: office list panel,
   with the toggle (now gold, X icon) hanging off the
   panel's bottom-left corner.
   ===================================================== */

.kells-phone {
	--kells-phone-panel-w: 320px;
	--kells-phone-toggle-w: 68px;
	--kells-phone-toggle-h: 64px;
	/* How far the toggle sits inside the panel's left edge when open. */
	--kells-phone-overlap: 20px;

	position: fixed;
	right: 0;
	bottom: 30px;
	z-index: 9999;
	font-family: "Montserrat", Sans-serif;
	/* The container is sized by the (always laid out) panel so the toggle has a
	   stable box to anchor to in both states — but only its children take clicks. */
	pointer-events: none;
}

/* ----- Office list panel ----- */
.kells-phone__panel {
	width: var(--kells-phone-panel-w);
	background: #1F2A44;
	border: 2px solid #F1B434;
	border-right: 0;
	border-radius: 32px 0 0 32px;
	padding: 26px 28px 30px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
	list-style: none;
	margin: 0;

	visibility: hidden;
	opacity: 0;
	transform: translateX(100%);
	transition: transform .38s cubic-bezier(.22, .61, .36, 1), opacity .28s ease, visibility 0s linear .38s;
}

.kells-phone.is-open .kells-phone__panel {
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
	transition: transform .38s cubic-bezier(.22, .61, .36, 1), opacity .28s ease, visibility 0s;
	pointer-events: auto;
}

.kells-phone__item + .kells-phone__item {
	margin-top: 16px;
}

.kells-phone__location {
	display: block;
	color: #F1B434;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .4px;
}

.kells-phone__number {
	display: inline-block;
	margin-top: 2px;
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: color .2s;
}

.kells-phone__number:hover,
.kells-phone__number:focus-visible {
	color: #F1B434;
}

/* ----- Toggle ----- */
/* The theme's global button rules and a plugin reset.css force a border, a 3px
   radius and a gold background onto every button, the last of those as
   `body [type="button"]:focus{...!important}` — so the widget's own chrome needs
   both !important and the redundant [type="button"] to outrank that selector,
   otherwise the tab stays stuck gold after a click leaves it focused. */
.kells-phone .kells-phone__toggle[type="button"] {
	position: absolute;
	right: 0;
	bottom: 0;
	width: var(--kells-phone-toggle-w);
	height: var(--kells-phone-toggle-h);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background-color: #1F2A44 !important;
	border: 2px solid #F1B434 !important;
	border-right: 0 !important;
	border-radius: 32px 0 0 32px !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
	pointer-events: auto;
	transition: transform .38s cubic-bezier(.22, .61, .36, 1), background-color .25s ease;
}

/* Clicking the tab leaves it focused, and the theme paints every focused button
   gold, so the resting colour has to be restated for :focus. The gold states
   below deliberately follow this rule and win the tie on source order. */
.kells-phone .kells-phone__toggle[type="button"]:focus {
	background-color: #1F2A44 !important;
}

/* Slide out to the panel's bottom-left corner, keeping a sliver overlapping it. */
.kells-phone.is-open .kells-phone__toggle {
	transform: translateX(calc(-1 * var(--kells-phone-panel-w) + var(--kells-phone-overlap)));
}

.kells-phone.is-open .kells-phone__toggle[type="button"],
.kells-phone .kells-phone__toggle[type="button"]:hover,
.kells-phone .kells-phone__toggle[type="button"]:focus-visible {
	background-color: #F1B434 !important;
}

.kells-phone .kells-phone__toggle svg {
	width: 26px;
	height: 26px;
	/* Nudged off-centre so the icon reads as centred in the visible (unclipped)
	   part of the tab, whose right edge is cut off by the viewport. */
	margin-right: 6px;
	transition: opacity .2s ease, transform .3s ease;
}

.kells-phone__icon-phone {
	fill: #fff;
}

.kells-phone__icon-close {
	position: absolute;
	fill: none;
	stroke: #fff;
	stroke-width: 2.2;
	stroke-linecap: round;
	opacity: 0;
	transform: rotate(-90deg);
}

.kells-phone.is-open .kells-phone__icon-phone {
	opacity: 0;
	transform: rotate(90deg);
}

.kells-phone.is-open .kells-phone__icon-close {
	opacity: 1;
	transform: rotate(0);
}

.kells-phone__toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ----- Responsive ----- */
@media (max-width: 480px) {
	.kells-phone {
		--kells-phone-panel-w: calc(100vw - 92px);
		--kells-phone-toggle-w: 60px;
		--kells-phone-toggle-h: 56px;
		bottom: 20px;
	}

	.kells-phone__panel {
		padding: 22px 22px 26px;
	}

	.kells-phone__location {
		font-size: 14px;
	}

	.kells-phone__number {
		font-size: 17px;
	}

	.kells-phone__item + .kells-phone__item {
		margin-top: 13px;
	}
}

@media print {
	.kells-phone {
		display: none;
	}
}