/* A club sub-site. --club and --club-accent are set per club in _ClubLayout from ro_club. */

.demo-banner { background: #fff4d6; color: #6b4600; text-align: center; padding: .4rem 16px; font-size: .9rem; border-bottom: 1px solid #f0d58a; }

.club-header { background: var(--club); color: #fff; }
.club-header-inner { padding: 1.5rem 16px 1rem; }
.club-name { color: #fff; font-size: 1.8rem; font-weight: 700; line-height: 1.2; }
.club-name:hover { color: #fff; text-decoration: none; opacity: .9; }
.club-tagline { color: rgba(255,255,255,.85); margin-top: .25rem; }

.club-nav { background: rgba(0,0,0,.15); }
.club-nav ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0 4px; }
.club-nav li.end { margin-left: auto; }
.club-nav li.end ~ li { margin-left: 0; }
.club-nav a { display: block; color: #fff; padding: .6rem .9rem; font-weight: 500; }
.club-nav a:hover { background: rgba(255,255,255,.12); text-decoration: none; color: #fff; }

.club-main { padding-top: 2rem; }

.btn-club { background: var(--club); border-color: var(--club); color: #fff; }
.btn-club:hover { filter: brightness(.9); color: #fff; }

.cms-page { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); }
.cms-page h1 { color: var(--club); }
.cms-image img { max-width: 100%; height: auto; border-radius: var(--radius); }
.cms-image figcaption { color: var(--muted); font-size: .9rem; margin-top: .25rem; }
.cms-search { background: var(--brand-050); border-radius: var(--radius); padding: 1.25rem; margin-top: 1.5rem; }
.cms-search h3 { margin-top: 0; font-size: 1.1rem; }

.cms-image { margin: 1.25rem auto; text-align: center; }
.cms-image-left { text-align: left; }
.cms-image-left img { max-width: min(100%, 480px); }
.cms-image-center img { max-width: min(100%, 720px); }
.cms-image-full img { width: 100%; }
.cms-text blockquote { border-left: 3px solid var(--club); padding-left: 1rem; color: var(--muted); }
.cms-links { padding-left: 1.2rem; }
.cms-divider { margin: 1.75rem 0; border-color: var(--border); opacity: 1; }
.cms-edit-link { float: right; }

/* Club management tabs (_ClubAdminNav) */
.admin-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.admin-tabs a { padding: .5rem 1rem; color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-tabs a:hover { color: var(--text); text-decoration: none; }
.admin-tabs a.active { color: var(--club); border-bottom-color: var(--club); }
.status-members { background: #ede7fb; color: #4b2a99; }

@media (max-width: 576px) {
    .cms-page { padding: 1.25rem; }
    .club-name { font-size: 1.4rem; }
}

/* Logo beside the club name */
.club-name { display: inline-flex; align-items: center; gap: .75rem; }
.club-logo { height: 56px; width: auto; max-width: 160px; object-fit: contain; }

/* Account and settings screens */
.status-invited { background: #e7f0fe; color: #1d4ed8; }
.status-disabled { background: #eceff3; color: #555f6b; }
.link-box { display: flex; gap: .5rem; }
.link-box input { font-family: Consolas, monospace; font-size: .8rem; }
.privilege-grid { background: var(--surface); }
.privilege-grid th { font-weight: 600; font-size: .9rem; }
.privilege-grid td:first-child { max-width: 360px; }
.privilege-grid input[type=checkbox] { width: 1.2rem; height: 1.2rem; }
.settings-preview { display: flex; align-items: center; gap: .75rem; color: #fff; font-weight: 700; font-size: 1.2rem; padding: .75rem 1rem; border-radius: var(--radius); min-height: 60px; }
.settings-preview img { height: 40px; width: auto; }

/* Submissions */
.nav-count { display: inline-block; min-width: 1.4em; padding: 0 .4em; border-radius: 999px; background: var(--club-accent); color: #222; font-size: .8rem; font-weight: 700; text-align: center; }
.status-sub-pending { background: #fff4d6; color: #8a5a00; }
.status-sub-approved { background: #dcf3e4; color: #1d6b3a; }
.status-sub-rejected { background: #fde2e2; color: #9b1c1c; }
.status-sub-withdrawn { background: #eceff3; color: #555f6b; }
.submission-note { border-left: 3px solid var(--club); padding: .25rem .75rem; margin: .5rem 0 1rem; color: var(--text); white-space: pre-wrap; }
.submission-diff td.changed-since { background: #fff4d6; }
.submission details summary { cursor: pointer; color: var(--club); }