/* Martek Ham Club List: front-end skins.
 * Skins: cards, classic, dark, retro, minimal. Each sets CSS variables, then
 * adds its own layout. Markup is the same for every skin. */

.mhcl { box-sizing: border-box; margin: 1.5em 0; line-height: 1.45; font-size: 16px; }
.mhcl *, .mhcl *::before, .mhcl *::after { box-sizing: inherit; }
.mhcl [hidden] { display: none !important; }
.mhcl .mhcl-sr, .mhcl .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mhcl-toolbar { margin: 0 0 1.25em; }
.mhcl-search {
	width: 100%; max-width: 28em; padding: .6em .85em; font: inherit;
	color: var(--mhcl-text); background: var(--mhcl-input-bg); border: 1px solid var(--mhcl-border); border-radius: var(--mhcl-radius);
}
.mhcl-search:focus-visible, .mhcl-sort:focus-visible, .mhcl-btn:focus-visible, .mhcl a:focus-visible { outline: 3px solid var(--mhcl-focus); outline-offset: 2px; }

.mhcl-state-title { margin: 1.5em 0 .5em; color: var(--mhcl-heading); }
.mhcl-group { margin: 0 0 2.25em; }
.mhcl-group-title { margin: 0 0 .6em; color: var(--mhcl-heading); }
.mhcl-count { font-weight: 400; opacity: .7; font-size: .8em; }

.mhcl-sortbar { margin: 0 0 .75em; font-size: .9em; color: var(--mhcl-muted); }
.mhcl-sort { font: inherit; padding: .3em .5em; color: var(--mhcl-text); background: var(--mhcl-input-bg); border: 1px solid var(--mhcl-border); border-radius: var(--mhcl-radius); }

.mhcl-list { list-style: none; margin: 0; padding: 0; }
.mhcl-item { margin: 0; padding: 0; }
.mhcl-name { font-weight: 600; }
.mhcl a { color: var(--mhcl-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.mhcl a:hover { color: var(--mhcl-link-hover); }
.mhcl-call { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.mhcl-city, .mhcl-meeting { color: var(--mhcl-muted); }
.mhcl-head { display: none; }

.mhcl-pager { display: flex; align-items: center; gap: .75em; margin-top: 1em; flex-wrap: wrap; }
.mhcl-pageinfo { color: var(--mhcl-muted); font-size: .9em; }
.mhcl-btn {
	font: inherit; font-size: .9em; padding: .4em .9em; cursor: pointer; color: var(--mhcl-btn-text);
	background: var(--mhcl-btn-bg); border: 1px solid var(--mhcl-btn-border); border-radius: var(--mhcl-radius);
}
.mhcl-btn:hover:not(:disabled) { filter: brightness(1.08); }
.mhcl-btn:disabled { opacity: .45; cursor: not-allowed; }

.mhcl-updated, .mhcl-attrib, .mhcl-pending, .mhcl-empty, .mhcl-nomatch, .mhcl-notice { color: var(--mhcl-muted); font-size: .85em; margin: .75em 0 0; }
.mhcl-pending, .mhcl-empty, .mhcl-nomatch { font-size: .95em; font-style: italic; }

/* ---------- Skin 1: Clean Card Grid ---------- */
.mhcl-skin-cards {
	--mhcl-text: #1d2430; --mhcl-heading: #0f2a4a; --mhcl-muted: #5a6575; --mhcl-link: #0b5cad; --mhcl-link-hover: #083f78;
	--mhcl-border: #d7dde6; --mhcl-input-bg: #fff; --mhcl-radius: 8px; --mhcl-focus: #0b5cad;
	--mhcl-btn-bg: #0b5cad; --mhcl-btn-text: #fff; --mhcl-btn-border: #0b5cad;
	color: var(--mhcl-text);
}
.mhcl-skin-cards .mhcl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1em; }
.mhcl-skin-cards .mhcl-item {
	display: flex; flex-direction: column; gap: .3em; padding: 1em 1.1em; background: #fff;
	border: 1px solid var(--mhcl-border); border-top: 4px solid #0b5cad; border-radius: var(--mhcl-radius);
	box-shadow: 0 1px 3px rgba(15, 42, 74, .08); transition: box-shadow .15s ease, transform .15s ease;
}
.mhcl-skin-cards .mhcl-item:hover { box-shadow: 0 6px 16px rgba(15, 42, 74, .14); transform: translateY(-2px); }
.mhcl-skin-cards .mhcl-name { font-size: 1.05em; }
.mhcl-skin-cards .mhcl-call { display: inline-block; align-self: flex-start; padding: .05em .5em; font-size: .85em; font-weight: 600; color: #0f2a4a; background: #e8f0fa; border-radius: 999px; }
.mhcl-skin-cards .mhcl-call:empty, .mhcl-skin-cards .mhcl-city:empty, .mhcl-skin-cards .mhcl-meeting:empty { display: none; }
.mhcl-skin-cards .mhcl-city::before { content: "\1F4CD\00a0"; }
.mhcl-skin-cards .mhcl-meeting { font-size: .9em; }
.mhcl-skin-cards .mhcl-meeting::before { content: "\1F552\00a0"; }

/* ---------- Skin 2: Classic Table ---------- */
.mhcl-skin-classic {
	--mhcl-text: #222; --mhcl-heading: #222; --mhcl-muted: #555; --mhcl-link: #1a4f8b; --mhcl-link-hover: #0d2f55;
	--mhcl-border: #c9c9c9; --mhcl-input-bg: #fff; --mhcl-radius: 2px; --mhcl-focus: #1a4f8b;
	--mhcl-btn-bg: #f2f2f2; --mhcl-btn-text: #222; --mhcl-btn-border: #999;
	color: var(--mhcl-text);
}
.mhcl-skin-classic .mhcl-head, .mhcl-skin-classic .mhcl-item { display: grid; grid-template-columns: 2.4fr 1fr 1.2fr 2fr; gap: 0 1em; align-items: start; padding: .6em .8em; }
.mhcl-skin-classic .mhcl-head { background: #2f3b4c; color: #fff; font-weight: 600; font-size: .85em; text-transform: uppercase; letter-spacing: .04em; }
.mhcl-skin-classic .mhcl-item { border: 1px solid var(--mhcl-border); border-top: 0; }
.mhcl-skin-classic .mhcl-item:nth-child(even) { background: #f6f7f9; }
.mhcl-skin-classic .mhcl-item:hover { background: #e9eef5; }

/* ---------- Skin 3: Dark Mode ---------- */
.mhcl-skin-dark {
	--mhcl-text: #e6e9ef; --mhcl-heading: #fff; --mhcl-muted: #a3acba; --mhcl-link: #7db8ff; --mhcl-link-hover: #b4d6ff;
	--mhcl-border: #333c4a; --mhcl-input-bg: #11161d; --mhcl-radius: 10px; --mhcl-focus: #7db8ff;
	--mhcl-btn-bg: #2b3544; --mhcl-btn-text: #e6e9ef; --mhcl-btn-border: #3d495b;
	color: var(--mhcl-text); background: #171c24; padding: 1.25em 1.4em; border-radius: 12px;
}
.mhcl-skin-dark .mhcl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .85em; }
.mhcl-skin-dark .mhcl-item { display: flex; flex-direction: column; gap: .25em; padding: .9em 1em; background: #1f2631; border: 1px solid var(--mhcl-border); border-left: 3px solid #7db8ff; border-radius: var(--mhcl-radius); }
.mhcl-skin-dark .mhcl-item:hover { background: #262f3d; }
.mhcl-skin-dark .mhcl-call { color: #9be7a5; font-size: .9em; }
.mhcl-skin-dark .mhcl-call:empty, .mhcl-skin-dark .mhcl-city:empty, .mhcl-skin-dark .mhcl-meeting:empty { display: none; }
.mhcl-skin-dark .mhcl-meeting { font-size: .9em; }

/* ---------- Skin 4: Radio Retro (amber on black) ---------- */
.mhcl-skin-retro {
	--mhcl-text: #ffb000; --mhcl-heading: #ffcc4d; --mhcl-muted: #c98a00; --mhcl-link: #ffd36b; --mhcl-link-hover: #fff1c2;
	--mhcl-border: #6b4a00; --mhcl-input-bg: #000; --mhcl-radius: 0; --mhcl-focus: #ffd36b;
	--mhcl-btn-bg: #1a1200; --mhcl-btn-text: #ffb000; --mhcl-btn-border: #ffb000;
	color: var(--mhcl-text); background: #0a0700; padding: 1.25em 1.4em; border: 2px solid #6b4a00; border-radius: 6px;
	font-family: ui-monospace, "Courier New", Courier, monospace; text-shadow: 0 0 6px rgba(255, 176, 0, .35);
	box-shadow: inset 0 0 40px rgba(255, 176, 0, .06);
}
.mhcl-skin-retro .mhcl-group-title, .mhcl-skin-retro .mhcl-state-title { text-transform: uppercase; letter-spacing: .12em; border-bottom: 1px dashed var(--mhcl-border); padding-bottom: .3em; }
.mhcl-skin-retro .mhcl-item { display: grid; grid-template-columns: 2.4fr 1fr 1.2fr 2fr; gap: 0 1em; padding: .5em .25em; border-bottom: 1px dashed var(--mhcl-border); }
.mhcl-skin-retro .mhcl-head { display: grid; grid-template-columns: 2.4fr 1fr 1.2fr 2fr; gap: 0 1em; padding: .35em .25em; color: #0a0700; background: #ffb000; font-weight: 700; text-transform: uppercase; font-size: .8em; letter-spacing: .1em; text-shadow: none; }
.mhcl-skin-retro .mhcl-item:hover { background: rgba(255, 176, 0, .1); }
.mhcl-skin-retro .mhcl-name { font-weight: 700; }
.mhcl-skin-retro .mhcl-call { color: #fff1c2; }
.mhcl-skin-retro .mhcl-search, .mhcl-skin-retro .mhcl-sort, .mhcl-skin-retro .mhcl-btn { font-family: inherit; }

/* ---------- Skin 5: Minimal List ---------- */
.mhcl-skin-minimal {
	--mhcl-text: #2b2b2b; --mhcl-heading: #111; --mhcl-muted: #757575; --mhcl-link: #111; --mhcl-link-hover: #000;
	--mhcl-border: #e2e2e2; --mhcl-input-bg: transparent; --mhcl-radius: 0; --mhcl-focus: #111;
	--mhcl-btn-bg: transparent; --mhcl-btn-text: #111; --mhcl-btn-border: #111;
	color: var(--mhcl-text);
}
.mhcl-skin-minimal .mhcl-search { border-width: 0 0 1px; padding-left: 0; }
.mhcl-skin-minimal .mhcl-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .9em; padding: .55em 0; border-bottom: 1px solid var(--mhcl-border); }
.mhcl-skin-minimal .mhcl-name { font-weight: 500; }
.mhcl-skin-minimal .mhcl-name a { text-decoration: none; border-bottom: 1px solid currentColor; }
.mhcl-skin-minimal .mhcl-call { font-size: .85em; color: var(--mhcl-muted); }
.mhcl-skin-minimal .mhcl-city:not(:empty)::before { content: "\00b7\00a0"; }
.mhcl-skin-minimal .mhcl-meeting { flex-basis: 100%; font-size: .85em; }
.mhcl-skin-minimal .mhcl-call:empty, .mhcl-skin-minimal .mhcl-city:empty, .mhcl-skin-minimal .mhcl-meeting:empty { display: none; }

/* Table-style skins: show header on wide screens, stack on narrow screens. */
.mhcl-skin-classic .mhcl-head, .mhcl-skin-retro .mhcl-head { display: grid; }
@media (max-width: 640px) {
	.mhcl-skin-classic .mhcl-head, .mhcl-skin-retro .mhcl-head { display: none; }
	.mhcl-skin-classic .mhcl-item, .mhcl-skin-retro .mhcl-item { grid-template-columns: 1fr; gap: .15em; }
	.mhcl-skin-classic .mhcl-call:empty, .mhcl-skin-classic .mhcl-city:empty, .mhcl-skin-classic .mhcl-meeting:empty,
	.mhcl-skin-retro .mhcl-call:empty, .mhcl-skin-retro .mhcl-city:empty, .mhcl-skin-retro .mhcl-meeting:empty { display: none; }
	.mhcl-skin-cards .mhcl-list, .mhcl-skin-dark .mhcl-list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .mhcl-skin-cards .mhcl-item { transition: none; } .mhcl-skin-cards .mhcl-item:hover { transform: none; } }