/*
 * amiga.club — shared front-end styles for custom archive/single templates.
 * Upload to your child theme (e.g. /assets/css/club-styles.css) and enqueue
 * it (see club-styles-enqueue-snippet.php) rather than pasting into
 * Customizer > Additional CSS, since this is a substantial stylesheet.
 *
 * Colors are defined as CSS custom properties at the top — edit these to
 * match your actual Reign color scheme once you have exact values; every
 * class below references these variables, so a single edit here updates
 * the whole site's custom templates consistently.
 */

:root {
	--club-text: #222;
	--club-text-muted: #666;
	--club-text-faint: #999;
	--club-text-subtle: #777;
	--club-border: #ddd;
	--club-border-light: #eee;
	--club-bg-placeholder: #eee;
	--club-bg-tag: #f0f0f0;
	--club-btn-bg: #333;
	--club-btn-bg-hover: #000;
	--club-btn-text: #fff;
	--club-active-bg: #333;
	--club-active-text: #fff;
	--club-warning-bg: #fff3cd;
	--club-warning-text: #856404;
	--club-danger-bg: #f5e5e5;
	--club-danger-text: #a55;
	--club-success-bg: #e5f5e5;
	--club-success-text: #5a5;
	--club-radius: 8px;
	--club-radius-sm: 6px;
	--club-radius-xs: 4px;
}

/* ---------- Page wrappers ---------- */
.club-archive-wrap { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; }
.club-single-wrap { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }
.club-subtitle { color: var(--club-text-subtle); font-size: 14px; margin-top: -8px; }

/* ---------- Header layout (image + content side by side) ---------- */
.club-header-flex { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 2rem; }
.club-header-image-lg { flex: 0 0 260px; }
.club-header-image-sm { flex: 0 0 200px; }
.club-header-content { flex: 1; min-width: 240px; }
.club-header-image-lg img,
.club-header-image-sm img { width: 100%; border-radius: var(--club-radius); }

.club-placeholder-lg {
	width: 100%; aspect-ratio: 4/3;
	background: var(--club-bg-placeholder); border-radius: var(--club-radius);
}
.club-placeholder-sm {
	width: 100%; aspect-ratio: 4/3;
	background: var(--club-bg-placeholder); border-radius: var(--club-radius-sm);
	margin-bottom: 8px;
}

.club-type-label {
	color: var(--club-text-faint); font-size: 13px; margin-top: 0;
	text-transform: uppercase; letter-spacing: 0.03em;
}

/* ---------- Tags / taxonomy badges ---------- */
.club-tag-row { display: flex; gap: 6px; flex-wrap: wrap; }
.club-tag-row.club-mb { margin-bottom: 12px; }
.club-tag-row.club-mt { margin-top: 8px; }
.club-tag {
	background: var(--club-bg-tag); border-radius: var(--club-radius-xs);
	padding: 3px 8px; font-size: 12px;
}
.club-tag-sub { background: #f5f5f5; color: var(--club-text-muted); }
.club-tag-hash {
	border: 1px solid var(--club-border); border-radius: var(--club-radius-xs);
	padding: 2px 7px; font-size: 11px; color: var(--club-text-subtle);
}
.club-tag-small {
	display: inline-block; margin-top: 6px; font-size: 11px;
	background: var(--club-bg-tag); border-radius: var(--club-radius-xs); padding: 2px 6px;
}

/* Status pills */
.club-pill-warning { background: var(--club-warning-bg); color: var(--club-warning-text); }
.club-pill-danger { background: var(--club-danger-bg); color: var(--club-danger-text); }
.club-pill-success { background: var(--club-success-bg); color: var(--club-success-text); }
.club-pill {
	display: inline-block; border-radius: var(--club-radius-xs);
	padding: 4px 10px; font-size: 13px; margin: 0 0 12px;
}

/* ---------- Text utility ---------- */
.club-meta-text { color: var(--club-text-faint); font-size: 12px; }
.club-color-muted { color: var(--club-text-muted); }
.club-text-13 { font-size: 13px; }
.club-text-14-faint { color: var(--club-text-faint); font-size: 14px; }

/* ---------- Buttons / links ---------- */
.club-btn {
	display: inline-block; padding: 8px 16px; background: var(--club-btn-bg);
	color: var(--club-btn-text); text-decoration: none; border-radius: var(--club-radius-xs);
}
.club-btn:hover { background: var(--club-btn-bg-hover); color: var(--club-btn-text); }

/* ---------- Forms / filters ---------- */
.club-search-input { width: 100%; max-width: 400px; padding: 8px; }
.club-filter-form { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 1rem; }

/* ---------- A-Z bar ---------- */
.club-az-bar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 1.5rem; }
.club-az-letter {
	padding: 4px 8px; border: 1px solid #ccc; text-decoration: none; color: inherit;
}
.club-az-letter.is-active { background: var(--club-active-bg); color: var(--club-active-text); }
.club-az-letter-disabled { padding: 4px 8px; border: 1px solid var(--club-border-light); color: #ccc; }
.club-az-clear { padding: 4px 8px; text-decoration: underline; }

/* ---------- Card grids (archive listings) ---------- */
.club-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px;
}
.club-grid-narrow {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px;
}
.club-card {
	display: block; text-decoration: none; color: inherit;
	border: 1px solid var(--club-border); border-radius: var(--club-radius); padding: 12px;
}
.club-card-sm {
	display: block; text-decoration: none; color: inherit;
	border: 1px solid var(--club-border); border-radius: var(--club-radius); padding: 10px;
}
.club-card img,
.club-card-sm img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--club-radius-sm); margin-bottom: 8px; }
.club-card-title { display: block; font-size: 14px; margin-bottom: 2px; }
.club-card-title-sm { display: block; font-size: 13px; }
.club-card-meta { display: block; font-size: 12px; color: var(--club-text-muted); }

/* ---------- Screenshot / media grids ---------- */
.club-media-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
}
.club-media-grid img { width: 100%; border-radius: var(--club-radius-sm); }

/* ---------- Spacing utilities ---------- */
.club-mb-1 { margin-bottom: 1rem; }
.club-mb-2 { margin-bottom: 2rem; }
.club-mt-2 { margin-top: 2rem; }
.club-hr { margin: 2rem 0; }

/* ---------- Misc ---------- */
.club-honeypot { position: absolute; left: -9999px; top: -9999px; }
.club-table { width: 100%; border-collapse: collapse; }

.club-mb-4px { margin: 0 0 4px; }
.club-mb-4px-only { margin-bottom: 4px; }
.club-mb-8px { margin-top: 0; margin-bottom: 8px; }
.club-media-img { width: 100%; border-radius: var(--club-radius-sm); }

/* ---------- Second-tier utility classes (less frequent, still shared) ---------- */
.club-p-0 { padding: 0; }
.club-table-cell-label { padding: 8px 0; font-weight: 600; width: 180px; }
.club-table-cell { padding: 8px 0; border-bottom: 1px solid var(--club-border-light); }
.club-table-row-border { border-bottom: 1px solid var(--club-border-light); }
.club-video-wrap { max-width: 640px; }
.club-mt-0-mb-2px { margin-top: 0; margin-bottom: 2px; }
.club-mt-0 { margin-top: 0; }
.club-notice { font-size: 13px; color: var(--club-text-faint); margin-bottom: 1rem; }
.club-eyebrow {
	display: inline-block; margin-bottom: 4px; font-size: 10px;
	text-transform: uppercase; letter-spacing: 0.03em; color: var(--club-text-faint);
}
.club-media-grid-narrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.club-media-grid-narrower { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.club-byline { color: var(--club-text-faint); font-size: 13px; margin-top: 0; }
.club-mt-12px { margin-top: 12px; }
.club-ml-8px { margin-left: 8px; font-size: 12px; }
.club-mb-12px { margin-bottom: 12px; }
.club-tag-row-mb1 { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1rem; }
.club-card-title-13 { display: block; font-size: 13px; }
.club-tag-hash-alt { border: 1px solid var(--club-border); border-radius: var(--club-radius-xs); padding: 2px 7px; font-size: 11px; color: var(--club-text-subtle); }
.club-tag-alt { background: var(--club-bg-tag); border-radius: var(--club-radius-xs); padding: 3px 8px; font-size: 12px; }
.club-placeholder-sm-6 { width: 100%; aspect-ratio: 4/3; background: var(--club-bg-placeholder); border-radius: var(--club-radius-sm); margin-bottom: 6px; }
.club-gate-box {
	max-width: 500px; margin: 4rem auto; text-align: center; padding: 2rem;
	border: 1px solid var(--club-border); border-radius: var(--club-radius);
}
.club-mv-1_5 { margin: 1.5rem 0; }
.club-mt-0-mb-4px { margin-top: 0; margin-bottom: 4px; }
.club-mb-8px-only { margin-bottom: 8px; }
.club-rating-score { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.club-vote-count { font-size: 13px; font-weight: 400; color: var(--club-text-subtle); }
.club-btn-lg { display: inline-block; padding: 10px 20px; background: var(--club-btn-bg); color: var(--club-btn-text); text-decoration: none; border-radius: var(--club-radius-xs); }
.club-tag-small-danger { display: inline-block; margin-top: 6px; font-size: 11px; background: var(--club-danger-bg); color: var(--club-danger-text); border-radius: var(--club-radius-xs); padding: 2px 6px; }

/* ---------- One-off patterns (single use each, kept for completeness) ---------- */
.club-pill-danger-block { display: inline-block; background: var(--club-danger-bg); color: var(--club-danger-text); border-radius: var(--club-radius-xs); padding: 4px 10px; font-size: 13px; margin: 0 0 12px; }
.club-pill-success-block { display: inline-block; background: var(--club-success-bg); color: var(--club-success-text); border-radius: var(--club-radius-xs); padding: 4px 10px; font-size: 13px; margin: 0 0 12px; }
.club-personal-actions { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; }
.club-no-rating-text { color: var(--club-text-faint); margin: 0 0 4px; }
.club-download-notice { color: var(--club-text-subtle); font-size: 13px; margin-top: -8px; }
.club-personal-block { border: 1px solid var(--club-border); border-radius: var(--club-radius); padding: 1rem; margin-bottom: 2rem; }
.club-soldering-warning { background: var(--club-warning-bg); color: var(--club-warning-text); border-radius: var(--club-radius-xs); padding: 8px 12px; display: inline-block; font-size: 14px; }

/* ---------- Dark mode heading fix ---------- */
/* WordPress's own Global Styles hardcode h1-h6 to a fixed dark navy
   (#20262e) regardless of light/dark mode, and Reign's dark mode CSS
   doesn't override this specific rule — so headings become nearly
   invisible against a dark background. Reign does track the correct
   color for either mode in --reign-site-headings-color, so this simply
   points headings at that instead of the WP-hardcoded fixed value.
   Using !important because this rule has the exact same specificity as
   WordPress's own hardcoded one — without it, whichever rule happens to
   load later in the page wins, which was leaving headings invisible. */
h1, h2, h3, h4, h5, h6 {
	color: var(--reign-site-headings-color, #20262e) !important;
}

/* ---------- Dark mode tag contrast ---------- */
/* Reign's own secondary background variable wasn't providing enough
   contrast for tag/badge boxes against the near-black dark mode
   background, so this sets an explicit, clearly visible dark gray
   specifically when dark mode is active. */
[data-bx-mode="dark"] {
	--club-bg-tag: #3a3f47;
}