/**
 * Members auth (login / registration / landing). Large, legible controls for the older
 * audience; mirrors the uploader form styling.
 */

.skt-members {
	max-width: 480px;
	margin: 0 auto;
}

.skt-members__field {
	margin-bottom: 1.1rem;
}

.skt-members__label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 700;
}

.skt-members__input {
	width: 100%;
	padding: 0.7rem 0.8rem;
	font-size: 1.1rem;
	line-height: 1.3;
	border: 2px solid #555;
	border-radius: 6px;
	background: #fff;
	color: inherit;
}

.skt-members__input:focus {
	outline: 3px solid #2f5d3a;
	outline-offset: 1px;
	border-color: #2f5d3a;
}

.skt-members__consent {
	font-size: 1rem;
	line-height: 1.4;
}

/* Honeypot: hidden from humans, present for bots. */
.skt-members__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.skt-members__btn {
	display: inline-block;
	padding: 0.8rem 2rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
	background: #2f5d3a;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
}

.skt-members__btn:hover,
.skt-members__btn:focus-visible {
	background: #1f3f29; /* Tannenwald (dunkel) */
	outline: 3px solid #9ec5ab;
	outline-offset: 2px;
	color: #fff;
}

.skt-members__btn:disabled {
	background: #9ca3af;
	cursor: not-allowed;
}

.skt-members__message {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	min-height: 1.3em;
}

.skt-members__message--error {
	color: #8a5414; /* Holzbraun (Corporate Design) — legible warm warning text */
	font-weight: 700;
}

.skt-members__message--success {
	color: #2f5d3a; /* Tannengrün (Corporate Design) */
	font-weight: 700;
}

/* Members-area sub-header: a second nav bar injected directly below the site header on
   internal pages (rendered by SKT_Members::render_subheader()). Deliberately mirrors the
   main header (theme .skt-header / .skt-nav): white band, orange (accent-2) bottom border +
   cream shadow, horizontal row of bold green (accent-1) links with an orange hover/active
   underline — so it reads as a second header in the same scheme. The wrapper gets the
   theme's `alignfull` class (full width); the inner list re-constrains to the wide width,
   matching the header's `alignwide` content. */
.skt-subnav {
	background: var(--wp--preset--color--base, #fff);
	border-bottom: 3px solid var(--wp--preset--color--accent-2, #e0801b);
	box-shadow: 0 1px 0 var(--wp--preset--color--accent-4, #faf4e8);
	/* The theme inserts its default block-gap between the header template-part and this
	   appended bar, which pushes the bar (and its links) down, making the space above the
	   links larger than below. Cancel it so the bar sits flush under the header's border. */
	margin-block-start: 0;
	/* Mirror the theme header's edge gutter (.skt-header padding-inline) so both line up. */
	padding-inline: var(--wp--preset--spacing--20, 10px);
}

.skt-subnav__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Right-aligned to mirror the main nav (header's justifyContent:right). */
	justify-content: flex-end;
	gap: 0.2rem 1.6rem;
	/* The theme's header content is full-bleed (its inner group spans the whole width, flush
	   to both edges — it is NOT constrained to the wide-size). So the bar is full-width too,
	   with no max-width, centring or horizontal padding, putting the last item (Abmelden)
	   flush right under the header's right edge. */
	margin: 0;
	padding: var(--wp--preset--spacing--20, 10px) 0;
}

.skt-subnav__item {
	margin: 0;
}

/* Matches the main nav: the header navigation links render in the body text colour
   (contrast / near-black), with orange (accent-2) for hover and the current page. The
   two-class selector is deliberate: theme.json sets a global link colour (accent-6,
   underlined) whose selector would otherwise tie with — and override — a single-class rule. */
.skt-subnav .skt-subnav__link {
	display: inline-block;
	padding: 10px 4px;
	/* Match the main header nav link size (theme's "medium" preset, 18px). */
	font-size: var(--wp--preset--font-size--medium, 18px);
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--contrast, #1d1d1b);
	/* Transparent top border mirrors the bottom underline border so the link's
	   vertical padding stays visually symmetrical (the underline only grows on hover/active). */
	border-top: 2px solid transparent;
	border-bottom: 2px solid transparent;
}

.skt-subnav .skt-subnav__link:hover,
.skt-subnav .skt-subnav__link:focus-visible,
.skt-subnav .skt-subnav__link.is-current {
	color: var(--wp--preset--color--accent-2, #e0801b);
	border-bottom-color: var(--wp--preset--color--accent-2, #e0801b);
}

.skt-subnav .skt-subnav__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent-2, #e0801b);
	outline-offset: 2px;
}

/* The last item's text (Abmelden) should line up with the *text* of the header's
   "Mitgliederbereich" CTA pill. The pill's text ends 18px short of the gutter (its right
   padding), so give the logout link a matching 18px right padding instead of the default
   4px, so its label's right edge sits under the pill's label. */
.skt-subnav .skt-subnav__logout {
	padding-right: 18px;
}

/* Document list (member download list + board manage list). */
.skt-doc-list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.skt-doc {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.7rem 0.9rem;
	border: 2px solid #ddd;
	border-radius: 8px;
	margin-bottom: 0.5rem;
}

.skt-doc__link {
	font-size: 1.1rem;
	font-weight: 700;
	text-decoration: none;
}

.skt-doc__link::before {
	content: "\1F4C4"; /* page icon */
	margin-right: 0.5rem;
}

.skt-doc__empty {
	font-style: italic;
}

/* --- Board manage tool ([skt_document_manage]) --- */

.skt-doc-manage__heading {
	margin: 2rem 0 0.5rem;
	font-size: 1.3rem;
}

.skt-doc-manage__new {
	padding: 0.25rem 1.1rem 1.1rem;
	border: 2px solid #ddd;
	border-radius: 10px;
	background: #f7f7f7;
}

.skt-doc-manage__new .skt-doc-manage__heading {
	margin-top: 1rem;
}

/* Each existing document is a card: title + summary, "Sichtbar für" chips, actions. */
.skt-doc--manage {
	display: block;
	padding: 1rem 1.1rem;
	margin-bottom: 0.9rem;
	border-radius: 10px;
	background: #fff;
}

.skt-doc--manage.is-public {
	border-color: #e0801b; /* Sonnen-Orange: public documents stand out */
}

.skt-doc__head {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin-bottom: 0.8rem;
}

.skt-doc__head .skt-doc__link {
	overflow-wrap: anywhere;
}

.skt-doc__summary {
	color: #555;
	font-size: 0.95rem;
}

.skt-doc__label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.skt-doc__foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	margin-top: 0.9rem;
}

.skt-doc__status {
	color: #555;
	font-size: 0.95rem;
}

.skt-doc__status.is-ok {
	color: #2f5d3a;
	font-weight: 700;
}

/* "Sichtbar für" chip group — shared by the upload form and every list card. */
.skt-doc-access {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.skt-doc-access__sep {
	width: 2px;
	height: 2rem;
	margin: 0 0.25rem;
	background: #ccc;
}

.skt-doc-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border: 2px solid #888;
	border-radius: 999px;
	background: #fff;
	color: #1d1d1b;
	font-size: 1.05rem;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.skt-doc-chip:hover {
	border-color: #2f5d3a;
}

/* Visually hidden, still keyboard-focusable checkbox. */
.skt-doc-chip__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.skt-doc-chip__text::before {
	content: "";
	display: inline-block;
	width: 1.1em;
}

.skt-doc-chip:has( .skt-doc-chip__input:checked ) {
	border-color: #2f5d3a;
	background: #2f5d3a; /* Tannengrün (Corporate Design) */
	color: #fff;
}

.skt-doc-chip:has( .skt-doc-chip__input:checked ) .skt-doc-chip__text::before {
	content: "✓";
}

.skt-doc-chip--public:hover {
	border-color: #c06d12;
}

.skt-doc-chip--public:has( .skt-doc-chip__input:checked ) {
	border-color: #c06d12;
	background: #e0801b; /* Sonnen-Orange, dark text for contrast */
	color: #1d1d1b;
}

.skt-doc-chip:has( .skt-doc-chip__input:focus-visible ) {
	outline: 3px solid #9ec5ab;
	outline-offset: 2px;
}

.skt-doc-chip.is-disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Board manage list: the copy-paste shortcode shown under a public document. */
.skt-doc__shortcode-wrap {
	margin: 0.8rem 0 0;
	font-size: 0.95rem;
	color: #555;
}

.skt-doc__shortcode {
	display: inline-block;
	padding: 0.15rem 0.45rem;
	border-radius: 4px;
	background: #f0f0f0;
	color: #1d1d1b;
	font-size: 0.9rem;
	user-select: all;
	overflow-wrap: anywhere;
}

/* Style WordPress's wp_login_form() output to match. */
.skt-members__login .login-username,
.skt-members__login .login-password {
	margin-bottom: 1.1rem;
}

.skt-members__login label {
	display: block;
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.skt-members__login input[type="text"],
.skt-members__login input[type="password"] {
	width: 100%;
	padding: 0.7rem 0.8rem;
	font-size: 1.1rem;
	border: 2px solid #555;
	border-radius: 6px;
}

.skt-members__login .button,
.skt-members__login #wp-submit {
	display: inline-block;
	padding: 0.8rem 2rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: #fff;
	background: #2f5d3a;
	border: none;
	border-radius: 8px;
	cursor: pointer;
}

/* Hint under the login form — holds the "Passwort vergessen?" link. */
.skt-members__hint {
	margin-top: 1rem;
	font-size: 0.95rem;
	color: #555;
}

/* Intro paragraph above the "Passwort vergessen" request form. */
.skt-members__forgot > p:first-child {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	line-height: 1.5;
}

/* Board-issued set-password link (create member + per-member reset fallback). */
.skt-member-manage__link {
	margin: 0.6rem 0 1.2rem;
}

.skt-member-manage__linkfield {
	margin-top: 0.4rem;
	font-family: monospace;
	font-size: 0.85rem;
}

/* Member rows: Bereich checkboxes + Speichern + Passwort-Link must wrap on narrow screens
   (the shared event-manager row actions are a single non-wrapping line). */
.skt-member-manage .skt-events-manage__rowactions {
	flex-wrap: wrap;
	align-items: center;
}

.skt-member-manage .skt-events-manage__rowactions .skt-member-manage__linkfield {
	flex-basis: 100%;
}

/* Phones: the right-aligned wrapping sub-header row turns into a messy 4-line
   block (≈238px), so lay the links out as a tidy 2-column grid of tappable
   blocks instead. Desktop keeps the horizontal "second header" row above. */
@media ( max-width: 600px ) {
	.skt-subnav__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.4rem;
		padding: 0.5rem 0;
	}

	/* Each link becomes a centred, bordered block (overrides the desktop
	   underline-on-hover treatment). Tight line-height since the theme's base
	   1.7 would otherwise make every block needlessly tall. */
	.skt-subnav .skt-subnav__link {
		display: block;
		height: 100%;
		box-sizing: border-box;
		text-align: center;
		padding: 9px 8px;
		font-size: 1rem;
		line-height: 1.25;
		border: 1.5px solid var(--wp--preset--color--accent-1, #2f5d3a);
		border-radius: 8px;
		color: var(--wp--preset--color--accent-1, #2f5d3a);
	}

	.skt-subnav .skt-subnav__link:hover,
	.skt-subnav .skt-subnav__link:focus-visible,
	.skt-subnav .skt-subnav__link.is-current {
		background: var(--wp--preset--color--accent-1, #2f5d3a);
		color: var(--wp--preset--color--base, #fff);
		border-color: var(--wp--preset--color--accent-1, #2f5d3a);
	}

	/* "Abmelden" spans the full width on its own row and reads as the distinct
	   sign-out action (orange edge). Also drop the desktop 18px right padding. */
	.skt-subnav__item--logout {
		grid-column: 1 / -1;
	}

	.skt-subnav .skt-subnav__logout {
		padding-right: 8px;
		border-color: var(--wp--preset--color--accent-2, #e0801b);
		color: var(--wp--preset--color--accent-2, #e0801b);
	}

	.skt-subnav .skt-subnav__logout:hover,
	.skt-subnav .skt-subnav__logout:focus-visible {
		background: var(--wp--preset--color--accent-2, #e0801b);
		color: var(--wp--preset--color--contrast, #1d1d1b);
		border-color: var(--wp--preset--color--accent-2, #e0801b);
	}
}