/* Colorpack extension directory. Tokens follow colorpack.co.th (Kanit, navy #1b559a, sky panels, 10px controls).
   Font family is inherited from the site template; the stack below is only a fallback. */
.extdir {
	--ed-brand: #1b559a;
	--ed-brand-dark: #144478;
	--ed-ink: #2d3236;
	--ed-text: #343434;
	--ed-muted: #5a6570;
	--ed-tint: #eaf6fc;
	--ed-panel: #f4f6f8;
	--ed-line: #dce3ea;
	--ed-radius: 10px;
	--ed-ring: 0 0 0 3px rgb(27 85 154 / .35);

	color: var(--ed-text);
	font-family: inherit;
	line-height: 1.65;
}

/* Own white surface: the directory must read the same on a white page, a tinted section or a saturated brand
   colour (YOOtheme "primary" sections, dark or inverse styles). Doubled class = beats section/inverse rules. */
.extdir.extdir {
	margin-block: 1rem;
	padding: clamp(1.25rem, 3.5vw, 2.25rem);
	border-radius: 20px;
	background: #fff;
	color: var(--ed-text);
	border: 1px solid #e1e7ee;
}
.extdir.extdir :is(h1, h2, h3, h4, h5, p, li, dt, dd, span, a, label, button) { text-transform: none; }
.extdir.extdir :is(h1, h2, h3, h4, h5) { color: var(--ed-ink); letter-spacing: normal; font-family: inherit; }
.extdir.extdir :is(p, li, dd) a:not(.extdir-btn):not(.extdir-chip), .extdir.extdir .extdir-back { color: var(--ed-brand); }
.extdir.extdir :is(p, li, dd) a:not(.extdir-btn):not(.extdir-chip):hover, .extdir.extdir .extdir-back:hover { color: var(--ed-brand-dark); }
.extdir.extdir .extdir-hero p, .extdir.extdir .extdir-meta, .extdir.extdir .extdir-count, .extdir.extdir .extdir-row__size { color: var(--ed-muted); }
.extdir.extdir .extdir-row__summary, .extdir.extdir .extdir-lead { color: var(--ed-text); }
.extdir.extdir .extdir-lead { color: var(--ed-ink); }
.extdir.extdir .extdir-row__title a { color: var(--ed-ink); }
.extdir.extdir .extdir-row__title a:hover { color: var(--ed-brand); }
.extdir.extdir .extdir-btn { color: #fff; }
.extdir.extdir .extdir-btn--ghost { color: var(--ed-ink); }
.extdir.extdir .extdir-btn--ghost:hover { color: #fff; }
.extdir.extdir .extdir-chip { color: var(--ed-ink); }
.extdir.extdir .extdir-chip[aria-current="true"] { color: #fff; }

.extdir *, .extdir *::before, .extdir *::after { box-sizing: border-box; }

.extdir a { color: var(--ed-brand); text-underline-offset: .15em; }
.extdir a:hover { color: var(--ed-brand-dark); }
.extdir a:focus-visible, .extdir input:focus-visible, .extdir button:focus-visible { outline: 2px solid transparent; box-shadow: var(--ed-ring); border-radius: var(--ed-radius); }

/* ---------- buttons ---------- */
.extdir-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 2.75rem; padding: .5rem 1.25rem;
	border: 2px solid var(--ed-brand); border-radius: var(--ed-radius);
	background: var(--ed-brand); color: #fff !important;
	font: inherit; font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer;
}
.extdir-btn:hover { background: var(--ed-brand-dark); border-color: var(--ed-brand-dark); }
.extdir-btn--ghost { background: transparent; color: var(--ed-ink) !important; border-color: var(--ed-ink); }
.extdir-btn--ghost:hover { background: var(--ed-ink); border-color: var(--ed-ink); color: #fff !important; }
.extdir-btn--lg { min-height: 3.25rem; padding-inline: 1.75rem; font-size: 1.1rem; }
.extdir-btn svg { flex: none; width: 1.1em; height: 1.1em; }

/* ---------- list page ---------- */
.extdir-hero { padding: clamp(.75rem, 3vw, 1.5rem) 0 1.5rem; }
.extdir-dots { display: flex; gap: .4rem; margin: 0 0 1rem; }
.extdir-dots i { width: .7rem; height: .7rem; border-radius: 50%; }
.extdir-dots i:nth-child(1) { background: #32beff; }
.extdir-dots i:nth-child(2) { background: #02c2bb; }
.extdir-dots i:nth-child(3) { background: #ffc15e; }
.extdir-dots i:nth-child(4) { background: #f95860; }
.extdir-hero h1 { margin: 0 0 .5rem; color: var(--ed-ink); font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.7rem); font-weight: 500; line-height: 1.3; text-wrap: balance; }
.extdir-hero p { max-width: 62ch; margin: 0; color: var(--ed-muted); font-size: 1.05rem; text-wrap: pretty; }

.extdir-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: 1rem; border-radius: 14px; background: var(--ed-tint); }
.extdir-search { display: flex; flex: 1 1 18rem; gap: .5rem; margin: 0; }
.extdir-search input[type="search"] {
	flex: 1; min-width: 0; min-height: 2.75rem; padding: .4rem .9rem;
	border: 2px solid #c3d3e2; border-radius: var(--ed-radius); background: #fff; color: var(--ed-ink); font: inherit;
}
.extdir-search input[type="search"]::placeholder { color: var(--ed-muted); opacity: 1; }
.extdir-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.extdir-chip { display: inline-block; padding: .3rem .95rem; border: 1px solid #b9cadb; border-radius: 999px; background: #fff; color: var(--ed-ink) !important; font-size: .95rem; text-decoration: none; }
.extdir-chip:hover { border-color: var(--ed-brand); }
.extdir-chip[aria-current="true"] { border-color: var(--ed-brand); background: var(--ed-brand); color: #fff !important; }

.extdir-count { margin: 1.25rem 0 0; color: var(--ed-muted); font-size: .95rem; }

.extdir-list { margin: .75rem 0 .5rem; padding: 0; list-style: none; }
.extdir-row {
	position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem 1.25rem;
	margin: 0 0 1rem; padding: 1.1rem 1.25rem; border: 1px solid #bccadb; border-radius: 16px; background: #fff;
	box-shadow: 0 1px 2px rgb(16 42 67 / .08), 0 6px 16px rgb(16 42 67 / .07);
}
.extdir-row:hover { border-color: var(--ed-brand); box-shadow: 0 1px 2px rgb(16 42 67 / .10), 0 10px 24px rgb(27 85 154 / .18); }
.extdir-row__title { margin: 0; color: var(--ed-ink); font-size: 1.2rem; font-weight: 500; line-height: 1.35; }
.extdir-row__title a { color: inherit; text-decoration: none; }
.extdir-row__title a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.extdir-row__title a:hover { color: var(--ed-brand); text-decoration: underline; }
.extdir-row__title a:focus-visible { box-shadow: none; }
.extdir-row__title a:focus-visible::after { box-shadow: var(--ed-ring); }
.extdir-row__summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: .15rem 0 .4rem; max-width: 68ch; }
.extdir-row__action { position: relative; z-index: 1; text-align: right; }
.extdir-row__size { display: block; margin-top: .25rem; color: var(--ed-muted); font-size: .85rem; }

.extdir-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin: 0; padding: 0; list-style: none; color: var(--ed-muted); font-size: .9rem; }
.extdir-pill { display: inline-block; padding: .05rem .65rem; border: 1px solid #b6d4ea; border-radius: 999px; background: var(--ed-tint); color: var(--ed-brand-dark); font-weight: 500; }

.extdir-empty { margin: 2rem 0; padding: 2.5rem 1rem; border-radius: 14px; background: var(--ed-panel); text-align: center; }

/* type tints (all pairs >= 7:1) */
.extdir-tile {
	display: grid; place-items: center; flex: none; width: 4.25rem; height: 4.25rem; overflow: hidden;
	border-radius: 14px; background: var(--t-bg, #e3e8f4); color: var(--t-fg, #1b3f7a);
	font-size: 1.3rem; font-weight: 600; letter-spacing: .02em; line-height: 1;
}
.extdir-tile:has(> img) { background: #fff; box-shadow: inset 0 0 0 1px var(--ed-line); }
.extdir-tile img { width: 100%; height: 100%; object-fit: cover; }
.extdir-head .extdir-tile:has(> img) { box-shadow: none; }
.extdir-tile--lg { width: 6rem; height: 6rem; border-radius: 20px; font-size: 1.9rem; }
.extdir-type--component { --t-bg: #ddf1fb; --t-fg: #0b4f73; }
.extdir-type--module    { --t-bg: #d9f5f3; --t-fg: #0b5f5b; }
.extdir-type--plugin    { --t-bg: #fff1d6; --t-fg: #6b4000; }
.extdir-type--template  { --t-bg: #ffe0e2; --t-fg: #8c1c25; }
.extdir-type--library   { --t-bg: #e3e8f4; --t-fg: #1b3f7a; }
.extdir-type--package   { --t-bg: #e8e1f7; --t-fg: #4b2c8f; }
.extdir-type--theme     { --t-bg: #fde4f1; --t-fg: #8a1b54; }
.extdir-type--tool      { --t-bg: #e4ecd9; --t-fg: #2f5a14; }

/* ---------- detail page ---------- */
.extdir-back { display: inline-block; margin: .5rem 0 1rem; font-size: .95rem; }
.extdir-head {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem 1.75rem; align-items: start;
	padding: clamp(1.25rem, 4vw, 2.25rem); border: 1px solid #c3e0f0; border-radius: 18px; background: var(--ed-tint);
}
.extdir-head h1 { margin: 0 0 .35rem; color: var(--ed-ink); font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); font-weight: 500; line-height: 1.3; text-wrap: balance; }
.extdir-head__lead { max-width: 62ch; margin: .6rem 0 0; font-size: 1.08rem; text-wrap: pretty; }
.extdir-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 1.25rem; }
.extdir-cta__file { color: var(--ed-muted); font-size: .9rem; overflow-wrap: anywhere; }
.extdir-nodl { margin: 1.25rem 0 0; color: var(--ed-muted); }

.extdir-body { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2.5rem; margin-top: 2rem; align-items: start; }
.extdir-facts { padding: 1.25rem 1.4rem; border: 1px solid #d5dee8; border-radius: 14px; background: #f3f7fb; }
.extdir-facts h2 { margin: 0 0 .75rem; color: var(--ed-ink); font-size: 1.1rem; font-weight: 500; }
.extdir-facts dl { display: grid; gap: .85rem; margin: 0; }
.extdir-facts dt { color: var(--ed-muted); font-size: .85rem; }
.extdir-facts dd { margin: 0; color: var(--ed-ink); font-weight: 500; overflow-wrap: anywhere; }

.extdir-prose { max-width: 70ch; }
.extdir-prose h2 { margin: 2rem 0 .75rem; color: var(--ed-ink); font-size: 1.45rem; font-weight: 500; line-height: 1.35; }
.extdir-prose > :first-child, .extdir-prose h2:first-child { margin-top: 0; }
.extdir-prose h3 { margin: 1.5rem 0 .5rem; color: var(--ed-ink); font-size: 1.15rem; font-weight: 500; }
.extdir-prose h4 { margin: 1.25rem 0 .4rem; color: var(--ed-ink); font-size: 1rem; font-weight: 600; }
.extdir-prose p, .extdir-prose ul, .extdir-prose ol { margin: 0 0 1rem; text-wrap: pretty; }
.extdir-prose ul, .extdir-prose ol { padding-left: 1.4rem; }
.extdir-prose li + li { margin-top: .3rem; }
.extdir-prose code { padding: .1rem .35rem; border-radius: 6px; background: var(--ed-panel); font-size: .92em; }
.extdir-notes { padding: 1.1rem 1.4rem; border-radius: 14px; background: var(--ed-panel); }
.extdir-notes > :last-child { margin-bottom: 0; }

.extdir-steps { margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: step; }
.extdir-steps li { position: relative; margin: 0; padding: .25rem 0 .9rem 3rem; counter-increment: step; }
.extdir-steps li::before {
	content: counter(step); position: absolute; left: 0; top: .1rem; display: grid; place-items: center; width: 2rem; height: 2rem;
	border-radius: 50%; background: var(--ed-brand); color: #fff; font-size: .95rem; font-weight: 500;
}

@media (max-width: 60rem) {
	.extdir-body { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	.extdir-facts { order: -1; }
}
@media (max-width: 40rem) {
	.extdir-row { grid-template-columns: auto minmax(0, 1fr); }
	.extdir-row__action { grid-column: 1 / -1; text-align: left; }
	.extdir-tile { width: 3.5rem; height: 3.5rem; font-size: 1.1rem; }
	.extdir-head { grid-template-columns: minmax(0, 1fr); }
	.extdir-tile--lg { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; }
	.extdir-btn--lg { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
	.extdir-row, .extdir-btn, .extdir-chip { transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; }
}

/* ---------- media + language switch ---------- */
.extdir-media { margin-top: 1.5rem; overflow: hidden; border-radius: 18px; background: var(--ed-ink); aspect-ratio: 16 / 9; }
.extdir-media video, .extdir-media iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.extdir-media--image { background: var(--ed-tint); }
.extdir-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.extdir-lead { color: var(--ed-ink); font-size: 1.12rem; }
.extdir-langs__list { display: none; gap: .25rem; width: max-content; max-width: 100%; margin: 0 0 1.25rem; padding: .25rem; border-radius: 999px; background: var(--ed-panel); }
.extdir-langs.is-js .extdir-langs__list { display: flex; }
.extdir-langs__tab {
	min-height: 2.4rem; padding: .25rem 1.25rem; border: 0; border-radius: 999px; background: transparent;
	color: var(--ed-ink); font: inherit; font-weight: 500; cursor: pointer;
}
.extdir-langs__tab:hover { background: var(--ed-tint); }
.extdir-langs__tab[aria-selected="true"] { background: var(--ed-brand); color: #fff; }
.extdir-langs__label { margin: 0 0 .5rem; color: var(--ed-brand-dark); font-weight: 500; }
.extdir-langs.is-js .extdir-langs__label { display: none; }
.extdir-langs__panel[hidden] { display: none; }
.extdir-langs__panel + .extdir-langs__panel { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ed-line); }
.extdir-langs.is-js .extdir-langs__panel + .extdir-langs__panel { margin: 0; padding: 0; border: 0; }
@media (prefers-reduced-motion: no-preference) { .extdir-langs__tab { transition: background-color .15s ease-out, color .15s ease-out; } }