/* ============================================================
 * Private Members Library — public front-end styles
 * Scoped to .pml-app to avoid affecting the host page.
 * ============================================================ */

.pml-app {
	/* Defaults — admin Appearance settings override these via inline style on .pml-app */
	--pml-accent:           #2a9fb8;
	--pml-accent-d:         #1d7e93;
	--pml-text:             #1a2b3a;
	--pml-muted:            #6b7c8c;
	--pml-border:           #d8e2eb;
	--pml-bg:               #ffffff;
	--pml-bg-soft:          #f5f9fc;
	--pml-radius:           10px;
	--pml-shadow:           0 1px 3px rgba(20, 40, 60, .06), 0 4px 12px rgba(20, 40, 60, .04);

	/* Tile tokens (admin-configurable) */
	--pml-tile-bg:           #ffffff;
	--pml-tile-text:         var(--pml-accent);
	--pml-tile-border:       var(--pml-accent);
	--pml-tile-hover-bg:     var(--pml-accent);
	--pml-tile-hover-text:   #ffffff;
	--pml-tile-border-width: 1.5px;
	--pml-tile-border-style: solid;
	--pml-tile-radius:       10px;
	--pml-tile-padding:      32px 20px;
	--pml-grid-gap:          16px;

	/* Inherit typography from the host theme so the library blends in. */
	color: var(--pml-text);
	font-family: inherit;
	font-size: inherit;
	line-height: 1.55;
	max-width: 100%;
	box-sizing: border-box;
}
.pml-app *, .pml-app *::before, .pml-app *::after { box-sizing: border-box; }

/* ---------- Typography ---------- *
 * Sizes are in em so they scale relative to the host theme's body size.
 * Headings inherit font-family from the page so they match the theme's serif
 * (or whatever) heading style. */
.pml-app .pml-h1 { font-family: inherit; font-size: 1.7em; font-weight: 600; margin: 0 0 0.6em; color: var(--pml-text); letter-spacing: -0.01em; line-height: 1.2; }
.pml-app .pml-h2 { font-family: inherit; font-size: 1.35em; font-weight: 600; margin: 0 0 0.5em; color: var(--pml-text); letter-spacing: -0.01em; line-height: 1.25; }
.pml-app .pml-h3 { font-family: inherit; font-size: 1.15em; font-weight: 600; margin: 0 0 0.5em; color: var(--pml-text); line-height: 1.3; }
.pml-app p       { margin: 0 0 0.75em; }
.pml-app a       { color: var(--pml-accent); text-decoration: none; }
.pml-app a:hover { color: var(--pml-accent-d); text-decoration: underline; }

.pml-intro { color: var(--pml-muted); margin-bottom: 18px; }
.pml-empty { color: var(--pml-muted); padding: 24px; text-align: center; font-style: italic; }

/* ---------- Header bar (welcome + sign out) ---------- */
.pml-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--pml-bg-soft);
	border: 1px solid var(--pml-border);
	border-radius: var(--pml-radius);
	margin-bottom: 14px;
}
.pml-welcome { font-size: 15px; color: var(--pml-muted); }
.pml-actions .pml-signout { background: transparent; border: 0; cursor: pointer; color: var(--pml-accent); font: inherit; padding: 6px 8px; }
.pml-actions .pml-signout:hover { color: var(--pml-accent-d); text-decoration: underline; }

/* ---------- Breadcrumbs ---------- */
.pml-breadcrumb {
	font-size: 14px;
	color: var(--pml-muted);
	margin-bottom: 18px;
	padding: 0 4px;
}
.pml-breadcrumb .pml-crumb { color: var(--pml-accent); }
.pml-breadcrumb .pml-crumb-current { color: var(--pml-text); font-weight: 500; }
.pml-breadcrumb .pml-crumb-sep { color: var(--pml-border); margin: 0 6px; }

/* ---------- Card ---------- */
.pml-card {
	background: var(--pml-bg);
	border: 1px solid var(--pml-border);
	border-radius: var(--pml-radius);
	padding: 28px;
	box-shadow: var(--pml-shadow);
}
.pml-login-card {
	max-width: 440px;
	margin: 40px auto;
}

/* ---------- Forms ---------- */
.pml-form { display: flex; flex-direction: column; gap: 14px; }
.pml-field { display: flex; flex-direction: column; gap: 6px; }
.pml-field > span { font-size: 14px; font-weight: 500; color: var(--pml-text); }
.pml-field input {
	font: inherit;
	padding: 11px 14px;
	border: 1px solid var(--pml-border);
	border-radius: 8px;
	background: #fff;
	color: var(--pml-text);
	transition: border-color .15s, box-shadow .15s;
}
.pml-field input:focus {
	outline: none;
	border-color: var(--pml-accent);
	box-shadow: 0 0 0 3px rgba(42, 159, 184, .15);
}

.pml-form-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.pml-btn {
	font: inherit;
	font-weight: 500;
	padding: 11px 22px;
	border-radius: 8px;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .15s, border-color .15s, transform .05s;
}
.pml-btn:active { transform: translateY(1px); }
.pml-btn-primary { background: var(--pml-accent); color: #fff; }
.pml-btn-primary:hover { background: var(--pml-accent-d); }
.pml-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.pml-btn-ghost   { background: #fff; color: var(--pml-text); border-color: var(--pml-border); }
.pml-btn-ghost:hover { background: var(--pml-bg-soft); }

.pml-link { color: var(--pml-accent); font-size: 14px; cursor: pointer; }
.pml-link:hover { color: var(--pml-accent-d); text-decoration: underline; }

.pml-message { font-size: 14px; min-height: 1em; margin-top: 4px; }
.pml-msg-success { color: #1d7a3a; }
.pml-msg-error   { color: #b8302a; }

/* ---------- Category grid (homepage tiles) ---------- *
 * All visual tokens come from CSS variables so admins can theme via Settings.
 * Selectors are prefixed with .pml-app to win the cascade over host themes. */
.pml-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--pml-grid-gap);
}
.pml-app a.pml-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--pml-tile-bg);
	border: var(--pml-tile-border-width) var(--pml-tile-border-style) var(--pml-tile-border);
	color: var(--pml-tile-text);
	border-radius: var(--pml-tile-radius);
	padding: var(--pml-tile-padding);
	min-height: 110px;
	text-decoration: none;
	transition: background .15s, color .15s, border-color .15s, transform .1s, box-shadow .15s;
	font-family: inherit;
}
.pml-app a.pml-tile,
.pml-app a.pml-tile:hover,
.pml-app a.pml-tile:focus,
.pml-app a.pml-tile:active { text-decoration: none; }

.pml-app a.pml-tile:hover {
	background: var(--pml-tile-hover-bg);
	border-color: var(--pml-tile-hover-bg);
	color: var(--pml-tile-hover-text);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(20, 40, 60, .18);
}
.pml-app a.pml-tile:hover .pml-tile-title,
.pml-app a.pml-tile:hover .pml-tile-desc,
.pml-app a.pml-tile:hover .pml-tile-icon { color: var(--pml-tile-hover-text); }

.pml-tile-title { font-size: 1.05em; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.pml-tile-desc  { font-size: 0.85em; opacity: .8; margin-top: 6px; }
.pml-tile-icon  { font-size: 1.5em; line-height: 1; margin-bottom: 8px; opacity: .85; }

/* Page tiles (mixed grid) look slightly lighter than section tiles by overriding the border-style. */
.pml-app a.pml-tile-page    { border-style: dashed; }
.pml-app a.pml-tile-section { border-style: var(--pml-tile-border-style); }

/* ---------- Multi-page section (side nav + body) ---------- */
.pml-section {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 28px;
}
@media (max-width: 720px) {
	.pml-section { grid-template-columns: 1fr; }
}
.pml-side-nav ul { list-style: none; margin: 0; padding: 0; }
.pml-side-nav li { margin: 0; }
.pml-side-nav a {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--pml-text);
	text-decoration: none;
	border: 1px solid transparent;
	margin-bottom: 4px;
}
.pml-side-nav a:hover {
	background: var(--pml-bg-soft);
	border-color: var(--pml-border);
	text-decoration: none;
}
.pml-side-nav a.pml-active {
	background: var(--pml-accent);
	color: #fff;
}

/* ---------- Content blocks ---------- */
.pml-block { margin: 0 0 22px; }

.pml-block-rich :is(h1, h2, h3) { margin-top: 18px; }
.pml-block-rich :is(ul, ol) { padding-left: 22px; }

/* PDF link block */
.pml-pdf-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border: 1px solid var(--pml-border);
	border-radius: 8px;
	background: #fff;
	color: var(--pml-text);
	text-decoration: none;
}
.pml-pdf-link:hover { border-color: var(--pml-accent); color: var(--pml-accent); background: var(--pml-bg-soft); }
.pml-pdf-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 4px;
	background: #d8302a;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

/* PDF group block (grid of cards) */
.pml-pdf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
}
.pml-pdf-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--pml-border);
	border-radius: var(--pml-radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--pml-text);
	transition: transform .1s, box-shadow .15s, border-color .15s;
}
.pml-pdf-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--pml-shadow);
	border-color: var(--pml-accent);
	color: var(--pml-text);
}
.pml-pdf-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pml-bg-soft);
	aspect-ratio: 8 / 11;
	overflow: hidden;
}
.pml-pdf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pml-pdf-thumb-fallback {
	color: #d8302a;
	font-weight: 700;
	font-size: 22px;
	letter-spacing: 2px;
}
.pml-pdf-title {
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 500;
	border-top: 1px solid var(--pml-border);
}

/* Image block */
.pml-block-image {
	margin-left: 0;
	margin-right: 0;
	text-align: center;
}
.pml-block-image img {
	width: var(--pml-img-width, 100%);
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}
.pml-block-image figcaption {
	font-size: 13px;
	color: var(--pml-muted);
	margin-top: 6px;
}
.pml-align-left  { text-align: left; }
.pml-align-right { text-align: right; }

/* Video block */
.pml-block-video .pml-video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
}
.pml-block-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pml-video-caption { font-size: 13px; color: var(--pml-muted); margin-top: 6px; }

/* Columns block */
.pml-block-columns { display: grid; gap: 24px; }
.pml-cols-2 { grid-template-columns: 1fr 1fr; }
.pml-cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.pml-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
	.pml-block-columns { grid-template-columns: 1fr; }
}

/* Loading state */
.pml-loading { opacity: .5; pointer-events: none; }

/* Locked */
.pml-locked { background: var(--pml-bg-soft); border: 1px dashed var(--pml-border); }