/* WCKD UI — MIT License — Copyright (c) WCKD Marketing®, Inc.
 * See LICENSE in this repository. https://opensource.org/licenses/MIT */

/* WCKD UI kit — core layout shell only (page grid + fixed header offset + hide-and-seek header).
* Site canonical bundle: repo root wckd-ui-components.css. Non-core styles live in components/*.css; package builder merges defaults + selected add-ons.
*/

body.has-fixed-header{padding-top:var(--header-height, 90px)}

.wckd-page{min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;}
.wckd-page > header,
.wckd-header{min-height:var(--header-height, 90px);}
.wckd-page > main,
.wckd-main{min-height:0;display:grid;}

.wckd-page > main:has(> aside):not(.wckd-sidebar-left),
.wckd-main.has-sidebar:not(.wckd-sidebar-left){grid-template-columns:minmax(0, 1fr) minmax(0, var(--sidebar-width, clamp(16rem, 24vw, 22rem)));}

.wckd-page > main.wckd-sidebar-left:has(> aside),
.wckd-main.has-sidebar.wckd-sidebar-left{grid-template-columns:minmax(0, var(--sidebar-width, clamp(16rem, 24vw, 22rem))) minmax(0, 1fr);}

.wckd-page > main > :not(aside),
.wckd-content{min-width:0;}
.wckd-page > main > aside,
.wckd-sidebar{min-width:0;border-left:1px solid var(--line-color);}
.wckd-page > main.wckd-sidebar-left > aside,
.wckd-main.wckd-sidebar-left .wckd-sidebar{border-left:none;border-right:1px solid var(--line-color);}
.wckd-page > footer,.wckd-footer{border-top:1px solid var(--line-color);}

@media (max-width: 900px){
	.wckd-page > main:has(> aside),
	.wckd-main.has-sidebar{grid-template-columns:1fr}
	.wckd-page > main > aside,
	.wckd-sidebar{border-left:none;border-right:none;border-top:1px solid var(--line-color);}
}

.hide-and-seek{position:fixed;top:0;left:0;right:0;width:100%;transition:transform .3s ease;z-index:999}
.scrolling-down .hide-and-seek,
.hide-and-seek.scrolling-down{transform:translateY(-100%)}
.scrolling-up .hide-and-seek,
.hide-and-seek.scrolling-up{transform:translateY(0)}

.site-logo{flex-shrink:0;color:var(--text-color);display:inline-flex;align-items:center;min-height:2.5rem;height:calc(var(--header-height, 90px) - 40px);width:auto;max-width:min(100%, 320px);}
.site-logo svg{display:block;height:100%;width:auto;max-width:100%}

nav > .wckd-menu{flex:1 1 0%;min-width:0}
nav:has(.hamburger-btn) > .wckd-menu{order:1}
nav:has(.hamburger-btn) > .hamburger-btn{order:2}

.wckd-menu{display:flex;flex-direction:column;width:100%;min-width:0}ul.wckd-menu,
	.wckd-menu>ul{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;width:100%}
	.wckd-menu li.expanded > ul{padding:0;margin:0}
	.wckd-menu li.expanded > ul > li{padding-left:var(--size-s)}
	.wckd-menu li,ul.horizontal li{list-style:none;margin:0;padding:0;position:relative}
	.wckd-menu a{display:flex;align-items:center;column-gap:var(--size-xs);padding:var(--size-s) var(--size-m);color:var(--text-color);font-weight:var(--text-medium);text-decoration:none;white-space:nowrap;transition:background 0.2s ease}
	.wckd-menu a:hover,
	.wckd-menu a:active,
	nav .wckd-menu a:hover,
	nav .wckd-menu a:active{
		color:var(--text-color);
		text-decoration:none;
	}
	.wckd-menu li:hover > a,
	.wckd-menu li.active > a{background-color:var(--background-color-light)}
	.wckd-menu li:has(> ul) > a > .wckd-icon{margin-inline-start:auto}
	.wckd-menu input[type="radio"]{display:none}
	.wckd-menu span::before{content:"";position:absolute}
	.wckd-menu input[type="radio"]:checked + span,
	.nav input[type="radio"]:checked + span::before{color:var(--text-color);border-bottom:1px solid var(--line-color)}
	.wckd-menu label span{padding:6px 12px;font-size:85%;white-space:nowrap;display:block}
	.hamburger-btn{display:none;background-color:transparent !important;border:none !important;padding:0 !important;width:44px !important;height:44px !important;border-radius:0;flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer;z-index:100;position:relative}
	.hamburger-btn .bar{display:block;width:24px;height:2px;background-color:var(--text-color);border-radius:2px;transition:transform 0.3s ease-in-out, opacity 0.3s ease-in-out}
	@media (max-width: 768px) {
		nav:has(.hamburger-btn):not(.wckd-menu-inline-on-narrow):not(.wckd-menu-measuring):not(.open) .wckd-menu > ul.hamburger-collection {
			display: none !important;
		}
		nav:has(.hamburger-btn):not(.wckd-menu-inline-on-narrow):not(.wckd-menu-measuring) .hamburger-btn {
			display: flex !important;
		}
	}
	.wckd-menu .wckd-menu-submenu-toggle{display:none !important}
	ul.horizontal,
	ul.wckd-menu.horizontal,
	.wckd-menu>ul.horizontal,
	nav.wckd-menu.horizontal{margin:0;padding:0;list-style:none;flex-direction:row;align-items:center;display:inline-flex;width:auto;max-width:100%;}
	ul.horizontal > li > ul,
	ul.wckd-menu.horizontal > li > ul,
	.wckd-menu > ul.horizontal > li > ul,
	ul.wckd-menu:not(.horizontal) > li > ul,
	.wckd-menu > ul:not(.horizontal) > li > ul{display:none;overflow:hidden;position:absolute;min-width:240px;margin:0;padding:0;background-color:var(--background-color);box-shadow:var(--shadow);border:1px solid var(--line-color);border-radius:var(--size-s);z-index:999}
	ul.horizontal > li > ul,
	ul.wckd-menu.horizontal > li > ul,
	.wckd-menu > ul.horizontal > li > ul{top:100%;left:0}
	ul.wckd-menu:not(.horizontal) > li > ul,
	.wckd-menu > ul:not(.horizontal) > li > ul{top:0;left:100%}
	ul.horizontal li:hover > ul,ul.wckd-menu.horizontal li:hover > ul,
	.wckd-menu > ul.horizontal li:hover > ul,ul.wckd-menu:not(.horizontal) li:hover > ul,
	.wckd-menu > ul:not(.horizontal) li:hover > ul{display:block}
	ul.horizontal ul ul,ul.wckd-menu.horizontal ul ul,ul.wckd-menu:not(.horizontal) ul ul,
	.wckd-menu > ul.horizontal ul ul,
	.wckd-menu > ul:not(.horizontal) ul ul{top:0;left:100%}
	html.wckd-nav-drawer-open,
	body.wckd-nav-drawer-open{overflow:hidden}
	nav.wckd-menu-measuring{position:relative}
	nav.wckd-menu-measuring .wckd-menu > ul.hamburger-collection{visibility:hidden !important;position:absolute !important;left:0 !important;top:0 !important;display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;width:max-content !important;max-width:none !important;height:auto !important;min-width:0 !important;z-index:-1 !important;pointer-events:none !important}nav.wckd-menu-compact .hamburger-btn{display:flex}
	body.wckd-nav-drawer-open::before{content:'';position:fixed;top:var(--header-height, 90px);right:0;bottom:0;left:0;z-index:999;background:rgb(0 0 0 / 30%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:auto}
	nav.wckd-menu-compact:not(.wckd-menu-measuring) .wckd-menu > ul.hamburger-collection{
		--wckd-drawer: calc(100dvh - var(--header-height, 90px));
		display:none;position:fixed;top:var(--header-height, 90px);left:0;right:0;width:100%;max-width:100%;box-sizing:border-box;
		height: var(--wckd-drawer);max-height: var(--wckd-drawer);min-height:0;
		overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
		flex-direction:column;justify-content:flex-start;align-content:flex-start;align-items:stretch;margin:0;padding:0;
		background-color:var(--background-color);border-top:1px solid var(--line-color);
		box-shadow:0 10px 20px rgba(0, 0, 0, 0.1);z-index:1000;
	}
	nav.wckd-menu-compact.open .hamburger-btn{z-index:1001}
	nav.wckd-menu-compact.open:not(.wckd-menu-measuring) .wckd-menu > ul.hamburger-collection{display:flex}
	nav.wckd-menu-compact:not(.wckd-menu-measuring) .wckd-menu li{display:flex;flex-wrap:wrap;align-items:center;width:100%;border-top:1px solid var(--line-color)}
	nav.wckd-menu-compact:not(.wckd-menu-measuring) .wckd-menu li:has(> ul){display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:stretch}
	nav.wckd-menu-compact:not(.wckd-menu-measuring) .wckd-menu li > a{flex:1;min-width:0}
	nav.wckd-menu-compact:not(.wckd-menu-measuring) .wckd-menu li:has(> ul) > a{flex:unset;grid-column:1;grid-row:1}
	nav.wckd-menu-compact:not(.wckd-menu-measuring) .wckd-menu button.wckd-menu-submenu-toggle{grid-column:2;grid-row:1;display:flex !important;align-items:center;justify-content:center;flex-shrink:0;min-width:48px;min-height:44px;padding:0 var(--size-s);background:transparent;border:none;border-left:1px solid var(--line-color);color:var(--text-color);cursor:pointer;touch-action:manipulation}
	nav.wckd-menu-compact:not(.wckd-menu-measuring) .wckd-menu li > ul{width:100%;flex-basis:100%;display:none;position:static;margin:0;padding:0;padding-left:var(--size-m);background:rgba(0, 0, 0, 0.03);box-shadow:none;border:none;overflow:visible;z-index:auto;min-width:0}
	nav.wckd-menu-compact:not(.wckd-menu-measuring) .wckd-menu li:has(> ul) > ul{grid-column:1 / -1;grid-row:2;flex-basis:unset}
	nav.wckd-menu-compact:not(.wckd-menu-measuring) .wckd-menu li.expanded > ul{display:block;padding:0;margin: 0}
	nav.wckd-menu-compact:not(.wckd-menu-measuring) .wckd-menu li.expanded button.wckd-menu-submenu-toggle .wckd-icon.rotate-south{transform:rotate(-90deg)}
	nav.wckd-menu-compact:not(.wckd-menu-measuring) .wckd-menu li:has(> ul) > a > .wckd-icon{display:none}
	nav.wckd-menu-compact.open .hamburger-btn .bar:nth-child(1){transform:translateY(8px) rotate(45deg)}
	nav.wckd-menu-compact.open .hamburger-btn .bar:nth-child(2){opacity:0;transform:translateX(-10px)}
	nav.wckd-menu-compact.open .hamburger-btn .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.checklist{list-style-type:none;counter-reset:checklist-counter}
	.checklist li{position:relative;padding-left:30px;margin-bottom:10px}
	.checklist li::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border:1px solid var(--line-color);background-color:var(--background-color-light)}
	.checklist li::after{content:"";position:absolute;left:10px;top:10px;width:5px;height:10px;box-sizing:border-box;border-style:solid;border-color:var(--text-color);border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg);opacity:0}
	.checklist li.checked::before{background-color:#a7d48f;border-color:var(--green)}
	.checklist li.checked::after{opacity:1}
	.checklist li.checked span{text-decoration:line-through;color:var(--text-color-secondary)}

#toc ol{margin:0;padding:0}#toc li{margin:0;padding:0;list-style:none}

.breadcrumbs{display:flex;overflow:hidden;padding:0;margin:0;align-items:center;font-size: var(--text-xs);}
	.breadcrumbs li{list-style:none;margin:0;padding:0}
	.breadcrumbs a{white-space:nowrap;color:var(--text-color);text-align:center;}
	.breadcrumbs a:hover{text-decoration:underline}
	.breadcrumbs a.breadcrumbs-home{display:inline-flex;align-items:center;justify-content:center;line-height:1;color:inherit;text-decoration:none}
	.breadcrumbs a.breadcrumbs-home:hover{opacity:0.88;text-decoration:none}
	.breadcrumbs li+li:before{padding:var(--size-s);content:"\00bb"}

.pagination{display:flex;overflow:hidden;padding:0;margin:0;font-size:var(--text-s);align-items:center}
	.pagination li{list-style:none;margin:2px;padding:0}
	.pagination a{display:block;color:var(--text-color);text-align:center; border:1px solid transparent;padding:6px 12px;border-radius:var(--size-s)}
	.pagination a:hover,.pagination .active a{background-color:var(--background-color-dark);color:var(--text-color-secondary);border:1px solid var(--line-color)}

.progression{display: flex;align-items: stretch;width: 100%;height: var(--size-s);border-radius: 999px;overflow: hidden;background: var(--background-color-fade);box-sizing: border-box;}
	.progression span{display: block;height: 100%;flex: 0 0 auto;box-sizing: border-box;}
	.progression span.in-progress{background: color-mix(in srgb, var(--primary-color) 22%, var(--background-color-light));}
	.progression span.is-ready{background: color-mix(in srgb, var(--primary-color) 18%, var(--background-color-light))}
	.progression span.is-done{background: var(--primary-color)}
	.progression span.total-progress{background: var(--green);min-width: 3px;}
	.progression .percent{position: absolute;top: 0;left: 0;height: 12px;margin: 0;padding: 0 2px;font-size: var(--text-xs);line-height: 12px;font-weight: var(--text-bold);color: var(--white);pointer-events: none;z-index: 3;}

.wckd-steps{display:block;max-width:100%;overflow-x:auto;overflow-y:hidden;counter-reset:flag;-webkit-overflow-scrolling:touch}
	.wckd-steps .steps{display:flex;flex-wrap:nowrap;width:max-content}
	.steps a{position:relative;z-index:0;text-decoration:none;display:block;float:none;flex:0 0 auto;font-size:14px;font-weight:var(--text-strong);line-height:36px;padding:0 10px 0 60px;overflow:visible;color:var(--text-color-secondary)}
	.steps a:nth-child(1){z-index:20}
	.steps a:nth-child(2){z-index:19}
	.steps a:nth-child(3){z-index:18}
	.steps a:nth-child(4){z-index:17}
	.steps a:nth-child(5){z-index:16}
	.steps a:nth-child(6){z-index:15}
	.steps a:nth-child(7){z-index:14}
	.steps a:nth-child(8){z-index:13}
	.steps a:nth-child(9){z-index:12}
	.steps a:nth-child(10){z-index:11}
	.steps a:not(:first-child){margin-left:-18px;padding-left:78px}
	.steps a .steps__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:0;background:var(--background-color)}
	.steps a:not(:first-child) .steps__bg{-webkit-clip-path:polygon(18px 0,100% 0,100% 100%,18px 100%,0 50%);clip-path:polygon(18px 0,100% 0,100% 100%,18px 100%,0 50%)}
	.steps a:first-child{padding-left:46px;border-radius:5px 0 0 5px}
	.steps a:first-child .steps__bg{border-radius:5px 0 0 5px}
	.steps a:first-child:before{left:14px}
	.steps a:not(:first-child):before{left:48px}
	.steps a:last-child{border-radius:0 5px 5px 0;padding-right:20px}
	.steps a:last-child .steps__bg{border-radius:0 5px 5px 0}
	.steps a:first-child:last-child .steps__bg{border-radius:5px}
	.steps a:after{content:"";position:absolute;z-index:1;top:0;right:-18px;width:36px;height:36px;transform:scale(0.707) rotate(45deg);border-radius:0 5px 0 50px;box-shadow:1px -1px 0 0 var(--line-color)}
	.steps a:last-child:after{content:none}
	.steps a:before{content:counter(flag);z-index:2;color:var(--text-color);counter-increment:flag;border-radius:100%;text-align:center;font-size:70%;width:20px;height:20px;line-height:18px;margin:8px 0;position:absolute;background:var(--background-color);top:0;left:30px;border:1px solid var(--line-color)}
	.steps a:after{background:var(--background-color);color:var(--text-color-secondary)}
	.steps a:hover:before,
	.steps a:focus-visible:before,
	.steps a.active:before{background:var(--background-color);color:var(--text-color);border-color:var(--text-color)}
	.steps a:hover .steps__bg,
	.steps a:focus-visible .steps__bg,
	.steps a.active .steps__bg{background:var(--text-color)}
	.steps a:hover,
	.steps a:focus-visible,
	.steps a.active{color:var(--background-color)}
	.steps a:hover:after,
	.steps a:focus-visible:after,
	.steps a.active:after{background:var(--text-color);color:var(--background-color)}
	.steps a.disabled{cursor:not-allowed;pointer-events:none;opacity:0.62;z-index:0}
	.steps a.disabled .steps__bg{background:var(--background-color-fade)}
	.steps a.disabled:after{background:var(--background-color-fade);color:var(--text-color-secondary)}
	.steps a.disabled:before{background:var(--background-color-light);color:var(--text-color-secondary);border-color:var(--line-color)}
	.steps a.disabled,
	.steps a.disabled:hover,
	.steps a.disabled:focus-visible{color:var(--text-color-secondary)}
	.steps a.disabled:hover .steps__bg,
	.steps a.disabled:focus-visible .steps__bg{background:var(--background-color-fade)}
	.steps a.disabled:hover:after,
	.steps a.disabled:focus-visible:after{background:var(--background-color-fade);color:var(--text-color-secondary)}
	.steps a.disabled:hover:before,
	.steps a.disabled:focus-visible:before{background:var(--background-color-light);color:var(--text-color-secondary);border-color:var(--line-color)}

.wckd-facepile{overflow:hidden}
	.wckd-facepile{overflow:hidden;padding-right:40px;}
	.wckd-facepile a{width:44px;height:44px;line-height:1;text-align: center;align-content: center;display:block;float:left;margin:12px -18px 12px 0;transition:0.2s;padding:0;border-radius:180px;border:3px solid var(--background-color);overflow: hidden;}
	.wckd-facepile a:hover{max-width:44px}

.wckd-form > div{position: relative;margin-bottom: 12px;}
	.wckd-form > div > label:not(:has(input[type="checkbox"], input[type="radio"])) {position: absolute;pointer-events: none;left: 0;top: 36%;padding: 0 var(--size-m);transition: all 0.3s ease-in-out;z-index: 10;margin: 0;line-height: 1;}
	.wckd-form > div > label:not(:has(input[type="checkbox"], input[type="radio"])):has(+ :focus),
	.wckd-form > div > label:not(:has(input[type="checkbox"], input[type="radio"])):has(+ :not(:placeholder-shown)),
	.wckd-form > div > label:not(:has(input[type="checkbox"], input[type="radio"])):has(+ select:not([value=""])) {top: -10px;left: 8px;font-size: 75%;padding: 2px 6px;background: var(--button-bg-active);color: var(--button-text-active);border-radius: var(--size-s);}
	.wckd-form label:has(input[type="checkbox"]),
	.wckd-form label:has(input[type="radio"]) {position: static;pointer-events: auto;display: inline-flex;align-items: center;gap: var(--size-s);margin: 0;padding: 0;background: transparent;line-height: 1.4;}

.wckd-tooltip{position:relative;display:inline-block;cursor:pointer;max-width:100%}
	.wckd-tooltip::after{content:attr(data-tooltip);display:none;visibility:hidden;position:absolute;left:50%;right:auto;bottom:calc(100% + var(--size-s));transform:translateX(-50%);box-sizing:border-box;background-color:var(--background-color-light);color:var(--text-color);border-radius:var(--size-s);padding:var(--size-s);box-shadow:var(--shadow);font-size:var(--text-xs);line-height:1.4;white-space:normal;text-align:left;min-width:0;width:max-content;max-width:min(20rem, calc(100dvw - 2 * var(--size-m)));overflow-wrap:anywhere;word-break:break-word;opacity:0;z-index:500;text-transform:none;pointer-events:none;transition:opacity 0.2s ease}
	.wckd-tooltip[data-tooltip]:not([data-tooltip=""])::after{display:block}
	.wckd-tooltip[data-tooltip]:not([data-tooltip=""]):hover::after,
	.wckd-tooltip[data-tooltip]:not([data-tooltip=""]):focus-visible::after{visibility:visible;opacity:1}
	.tooltip-wrap{position:relative;display:inline-block}
	.tooltip-content{visibility:hidden;position:absolute;left:50%;right:auto;bottom:calc(100% + var(--size-s));transform:translateX(-50%);box-sizing:border-box;background-color:var(--background-color-light);color:var(--text-color);border-radius:var(--size-s);padding:var(--size-s);box-shadow:var(--shadow);font-size:var(--text-xs);line-height:1.4;white-space:normal;text-align:left;min-width:0;width:max-content;max-width:min(20rem, calc(100dvw - 2 * var(--size-m)));overflow-wrap:anywhere;word-break:break-word;opacity:0;z-index:500;text-transform:none;pointer-events:none;transition:opacity 0.2s ease}
	.wckd-tooltip:hover + .tooltip-content,
	.wckd-tooltip:focus-visible + .tooltip-content{visibility:visible;opacity:1}
	.wckd-tooltip[data-tooltip]:not([data-tooltip=""]) + .tooltip-content{display:none}

/* Tooltip JS edge clamping helpers (optional enhancement from wckd-ui.js) */
.wckd-tooltip.wckd-tooltip-edge-left::after{left:0;right:auto;transform:none}
.wckd-tooltip.wckd-tooltip-edge-right::after{left:auto;right:0;transform:none}
.wckd-tooltip.wckd-tooltip-below::after{bottom:auto;top:calc(100% + var(--size-s))}

.wckd-tooltip.wckd-tooltip-edge-left + .tooltip-content{left:0;right:auto;transform:none}
.wckd-tooltip.wckd-tooltip-edge-right + .tooltip-content{left:auto;right:0;transform:none}
.wckd-tooltip.wckd-tooltip-below + .tooltip-content{bottom:auto;top:calc(100% + var(--size-s))}