/* ======================================================================
   Off-canvas drawer — "Side panel" skin.

   Optional skin, loaded only when Customizer → KI Drawer Menu →
   "Drawer style" is "Side panel" (see functions.php; adds the
   `ki-drawer--side` body class). Every rule below is scoped under
   that body class, so choosing "Full-screen frame" restores the original
   drawer (ki-visual-skin.css, untouched) exactly. Markup and the
   dynamic menu / contact / social shortcodes are the same for both skins —
   only the look changes.

   Reference: joycerey.com — right-hand black panel (~45% of the page,
   rounded bottom-left corner), a large serif "NAVIGATE" title with an
   accent line, large serif menu items with muted uppercase sub-links, a
   diamond marker on hover, vertical social icons and a faint logo
   watermark. Menu items stay controlled from Appearance → Menus.
   ====================================================================== */

/* ---------- Header icons: white at rest ---------- */
body.ki-drawer--side .site-header__info-item a {
	color: #ffffff;
	/* Half the previous space between icons (cell was max(6.25vw, 60px)). */
	width: max(4.2vw, 56px);
}

/* One consistent, light line weight across the header icons (house, envelope
   and hamburger all ~1.2-1.5px): the envelope becomes an outline and the house
   gets a thinner stroke than the stock 1.75. */
body.ki-drawer--side .site-header__info-item .ki-email-link::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.5'/%3E%3Cpath d='m3.5 7.5 8.5 6 8.5-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='1.5'/%3E%3Cpath d='m3.5 7.5 8.5 6 8.5-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.ki-drawer--side .site-header__info-icon--search {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4.5l8 6.5'/%3E%3Cpath d='M6 9.5v9a.5.5 0 0 0 .5.5h4.5V13.5h2v5.5h4.5a.5.5 0 0 0 .5-.5V9.5'/%3E%3Ccircle cx='15' cy='15' r='3'/%3E%3Cpath d='M17.15 17.15 19.5 19.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4.5l8 6.5'/%3E%3Cpath d='M6 9.5v9a.5.5 0 0 0 .5.5h4.5V13.5h2v5.5h4.5a.5.5 0 0 0 .5-.5V9.5'/%3E%3Ccircle cx='15' cy='15' r='3'/%3E%3Cpath d='M17.15 17.15 19.5 19.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Hamburger: two bars (full + 3/4), equalise on hover ---------- */
body.ki-drawer--side .site-header__info-icon--menu {
	width: 30px;
	height: 11px;
	-webkit-mask: none;
	mask: none;
	background-color: transparent;
	background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left top, right bottom;
	background-size: 100% 1.5px, 75% 1.5px;
	transition: background-size 0.25s ease;
}

body.ki-drawer--side .site-header__info-item--menu a:hover .site-header__info-icon--menu,
body.ki-drawer--side .site-header__info-item--menu a:focus .site-header__info-icon--menu {
	background-size: 100% 1.5px, 100% 1.5px;
}

/* ---------- Backdrop: the page stays visible, just dimmed ---------- */
body.ki-drawer--side .ki-offcanvas {
	background-image: none;
	background-color: rgba(0, 0, 0, 0.45);
}

/* ---------- The panel ---------- */
body.ki-drawer--side .ki-offcanvas__frame {
	/* Equal to the corner radius, so items start where the curve ends. */
	--ki-drawer-pad: calc(min(8vw, 120px) + 8px);
	inset: 0 0 0 auto;
	width: 600px;
	max-width: 90vw;
	display: grid;
	grid-template-columns: auto 1fr;
	/* 1fr row fills the panel's height, so the info layer below spans all of it. */
	grid-template-rows: auto 1fr;
	/* No top/bottom/right padding on purpose: the social column is centred on
	   the panel's full height, so the content box must be the whole panel.
	   Spacing comes from margins on the title and menu instead. */
	padding: 0 0 0 var(--ki-drawer-pad);
	border: 0;
	border-bottom-left-radius: min(8vw, 120px);
	background: #000000;
	overflow-x: hidden;
}

body.ki-drawer--side .ki-offcanvas.is-open .ki-offcanvas__frame {
	animation: ki-drawer-side-in 0.35s ease both;
}

@keyframes ki-drawer-side-in {
	from {
		transform: translateX(100%);
	}

	to {
		transform: none;
	}
}

/* "NAVIGATE" + accent line (generated — nothing to paste in the header). */
body.ki-drawer--side .ki-offcanvas__frame::before {
	content: "Navigate";
	grid-row: 1;
	grid-column: 1;
	font-family: var(--global-heading-font-family, "Cormorant", Georgia, "Times New Roman", serif);
	margin-top: max(7vh, 72px);
	font-size: clamp(38px, 4vw, 64px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #ffffff;
}

body.ki-drawer--side .ki-offcanvas__frame::after {
	content: "";
	grid-row: 1;
	grid-column: 2;
	align-self: center;
	height: 1px;
	margin: max(7vh, 72px) max(4vw, 32px) 0 32px;
	background: var(--ki-color-accent);
}

body.ki-drawer--side .ki-offcanvas__body {
	grid-row: 2;
	grid-column: 1 / -1;
	margin-bottom: 56px;
}

/* grid-area auto on an absolutely-positioned grid item = the panel's whole
   padding box, which is what the vertically-centred social column needs. */
body.ki-drawer--side .ki-offcanvas__info {
	grid-area: auto;
}

/* Close (X): plain, top right, accent on hover (no white square). */
body.ki-drawer--side .ki-offcanvas__close {
	top: max(3vh, 28px);
	right: max(2.5vw, 24px);
	font-size: 26px;
	color: #ffffff;
}

body.ki-drawer--side .ki-offcanvas__close:hover,
body.ki-drawer--side .ki-offcanvas__close:focus {
	background-color: transparent;
	color: var(--ki-color-accent);
}

/* Logo becomes a faint watermark, bottom right — sized to sit fully inside
   the panel (it used to bleed off the edge and got cropped). */
body.ki-drawer--side .ki-offcanvas__logo {
	position: absolute;
	right: 36px;
	bottom: 104px; /* clears the floating call button */
	width: min(52%, 300px);
	margin: 0;
	text-align: right;
	opacity: 0.12;
	pointer-events: none;
}

body.ki-drawer--side .ki-offcanvas__logo img {
	width: 100%;
	max-width: none;
	height: auto;
}

/* ---------- Menu: one stacked list ---------- */
body.ki-drawer--side .ki-offcanvas__body {
	display: block;
	max-width: none;
	margin: 0 0 56px;
}

body.ki-drawer--side .ki-offcanvas__menu {
	display: block;
	position: relative;
	z-index: 1;
	margin-top: max(7vh, 56px);
}

body.ki-drawer--side .ki-offcanvas__menu-col {
	margin: 0;
}

body.ki-drawer--side .ki-offcanvas__menu-column > li {
	margin-bottom: 22px;
}

body.ki-drawer--side .ki-offcanvas__menu-column > li > a {
	position: relative;
	display: inline-block;
	font-size: 26px;
	font-weight: 300;
	line-height: 1.3;
	transition: color 0.2s ease;
}

/* Hover marker: an accent-colour arrow, in the left padding. */
body.ki-drawer--side .ki-offcanvas__menu-column > li > a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(-0.8 * var(--ki-drawer-pad));
	width: min(calc(0.6 * var(--ki-drawer-pad)), 56px);
	height: 20px;
	transform: translate(-12px, -50%);
	opacity: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20' fill='none' stroke='%2324bef5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 10h36'/%3E%3Cpath d='M28 2l9 8-9 8'/%3E%3C/svg%3E") left center / contain no-repeat;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

body.ki-drawer--side .ki-offcanvas__menu-column > li > a:hover::before,
body.ki-drawer--side .ki-offcanvas__menu-column > li > a:focus::before {
	opacity: 1;
	transform: translate(0, -50%);
}

body.ki-drawer--side .ki-offcanvas__submenu {
	margin-top: 10px;
}

body.ki-drawer--side .ki-offcanvas__submenu a {
	font-family: var(--global-body-font-family, "Roboto", sans-serif);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 2.5;
	color: rgba(255, 255, 255, 0.6);
}

body.ki-drawer--side .ki-offcanvas__submenu a:hover,
body.ki-drawer--side .ki-offcanvas__submenu a:focus {
	color: var(--ki-color-accent);
}

/* ---------- Contact + socials ---------- */
/* Only the menu and the social icons: no phone / email / addresses. */
body.ki-drawer--side .ki-offcanvas__contact {
	display: none;
}

/* No position here: the social column below positions against the panel itself. */
body.ki-drawer--side .ki-offcanvas__info {
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
	z-index: 1;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.75);
}

/* Social icons: vertical column on the right, white circles. */
body.ki-drawer--side .ki-offcanvas__info .ki-socials {
	position: absolute;
	right: max(2.5vw, 24px);
	top: 50%;
	transform: translateY(-50%);
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Only Facebook, LinkedIn, YouTube and Instagram in this drawer (whichever of
   them are set in Core Settings), in that order. */
body.ki-drawer--side .ki-offcanvas__info .ki-social-item:not(.ki-social-item--facebook):not(.ki-social-item--linkedin):not(.ki-social-item--youtube):not(.ki-social-item--instagram) {
	display: none;
}

body.ki-drawer--side .ki-offcanvas__info .ki-social-item--facebook {
	order: 1;
}

body.ki-drawer--side .ki-offcanvas__info .ki-social-item--linkedin {
	order: 2;
}

body.ki-drawer--side .ki-offcanvas__info .ki-social-item--youtube {
	order: 3;
}

body.ki-drawer--side .ki-offcanvas__info .ki-social-item--instagram {
	order: 4;
}

body.ki-drawer--side .ki-offcanvas__info .ki-social-item a {
	width: 54px;
	height: 54px;
	border-color: rgba(255, 255, 255, 0.75);
}

body.ki-drawer--side .ki-offcanvas__info .ki-social-item a svg {
	width: 22px;
	height: 22px;
}

/* Facebook: just the letter "f" (the stock icon is already a circled logo,
   which doubles up inside this circle). */
body.ki-drawer--side .ki-offcanvas__info .ki-social-item--facebook a svg {
	display: none;
}

body.ki-drawer--side .ki-offcanvas__info .ki-social-item--facebook a::before {
	content: "";
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8.6h2.9l.5-3.5h-3.4V7.7c0-1 .3-1.7 1.7-1.7H17V2.9c-.3 0-1.4-.1-2.6-.1-2.6 0-4.3 1.6-4.3 4.4v2.7H7v3.5h3.1V22z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 22v-8.6h2.9l.5-3.5h-3.4V7.7c0-1 .3-1.7 1.7-1.7H17V2.9c-.3 0-1.4-.1-2.6-.1-2.6 0-4.3 1.6-4.3 4.4v2.7H7v3.5h3.1V22z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Phones: full width, socials in a row ---------- */
/* ---------- Tablet / phone: same layout, scaled ---------- */
@media (max-width: 900px) {
	body.ki-drawer--side .ki-offcanvas__menu-column > li > a {
		font-size: 24px;
	}
}

@media (max-width: 600px) {
	body.ki-drawer--side .ki-offcanvas__frame {
		--ki-drawer-pad: 52px;
		inset: 0 0 0 auto;
		padding: 0 0 0 52px;
		border-bottom-left-radius: 44px;
	}

	body.ki-drawer--side .ki-offcanvas__frame::before {
		margin-top: 80px;
		font-size: 32px;
	}

	body.ki-drawer--side .ki-offcanvas__frame::after {
		margin: 80px 20px 0 16px;
	}

	body.ki-drawer--side .ki-offcanvas__menu-column > li > a {
		font-size: 22px;
	}

	body.ki-drawer--side .ki-offcanvas__info .ki-socials {
		right: 12px;
		gap: 10px;
	}

	body.ki-drawer--side .ki-offcanvas__info .ki-social-item a {
		width: 40px;
		height: 40px;
	}

	body.ki-drawer--side .ki-offcanvas__info .ki-social-item a svg,
	body.ki-drawer--side .ki-offcanvas__info .ki-social-item--facebook a::before {
		width: 18px;
		height: 18px;
	}

	body.ki-drawer--side .ki-offcanvas__menu-column > li > a::before {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.ki-drawer--side .ki-offcanvas.is-open .ki-offcanvas__frame {
		animation: none;
	}

	body.ki-drawer--side .site-header__info-icon--menu,
	body.ki-drawer--side .ki-offcanvas__menu-column > li > a::before {
		transition: none;
	}
}