:root {
	--cb-color-primary: #52A8AB;
	--cb-color-accent: #DFAB70;
	--cb-color-text: #333;
	--cb-color-bg: rgba(82, 168, 171, 0.1);
	--cb-color-muted: #888;
	--cb-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
	color: var(--cb-color-primary);
	text-decoration: none;
	transition: color .2s ease-in-out;
}

a:hover {
	color: var(--cb-color-accent);
}

body {
	margin: 0;
	font-family: var(--cb-font-base);
	background: var(--cb-color-bg);
	color: var(--cb-color-text);
}

#cb-page-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: auto;
	min-height: 100vh;
}

/* --- Sectie structuur --- */

.cb-section {
	padding: 1.5rem 1rem;
}

.cb-section__inner {
	max-width: 960px;
	margin: 0 auto;
}

.cb-container {
	display: flex;
}

.cb-content-group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* --- Notification --- */

#cb-notification {
	background: var(--cb-color-primary);
	color: #fff;
	text-align: center;
}

.cb-notification-label {
	padding: 3px 8px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	font-size: .75rem;
	text-transform: uppercase;
}

/* --- Card --- */

#cb-profile.cb-section {
	display: flex;
	flex: 1;
	justify-content: center;
	align-items: center;
	min-height: calc(100vh - 180px);
}

#cb-profile-card {
	background: #fff;
	border-radius: 1rem;
	padding: 2rem;
	border: 1px solid rgba(82, 168, 171, 0.4);
	max-width: 520px;
	margin: auto;
	box-shadow: 0 .2rem 3rem rgba(82, 168, 171, 0.05);
}

#cb-profile-header {
	display: flex;
	flex-direction: column;
	text-align: center;
}

#cb-logo {
	max-height: 180px;
	margin-bottom: 1rem;
}

#cb-name {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 600;
}

#cb-tagline {
	margin: 0;
	color: var(--cb-color-muted);
	font-size: .95rem;
}

#cb-tagline-divider {
	width: 3rem;
	height: 2px;
	background: var(--cb-color-primary);
	margin: 1rem auto 1rem;
}

/* --- Contact --- */

.cb-contact-row {
	text-align: center;
}

/* --- Social icons --- */

#cb-social-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	gap: .5rem;
}

.cb-social-icon {
	width: 32px;
	height: 32px;
	font-size: .7rem;
	color: var(--cb-color-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid #ccc;
	background: #f1f1f1;
	transition: .15s;
}

.cb-social-link:hover .cb-social-icon {
	background: var(--cb-color-primary);
	border-color: var(--cb-color-primary);
	color: #fff;
}

/* --- Footer --- */

#cb-colophon {
	background: #fff;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	font-size: .8rem;
	color: var(--cb-color-muted);
}

#cb-colophon .cb-col {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	width: 100%;
}

#cb-colophon #cb-copyright,
#cb-colophon #cb-credits {
	display: flex;
}

#cb-colophon #cb-copyright {
	width: fit-content;
}

#cb-colophon #cb-credits {
	gap: .2rem;
	width: fit-content;
}

#cb-footer-links a {
	color: var(--cb-color-muted);
}

.cb-footer-links a:hover {
	color: var(--cb-color-primary);
}

@media (max-width: 600px) {

  #cb-profile {
    min-height: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  #cb-profile-card {
    padding: 1.5rem;
    margin: 0 1rem;
  }

  /* Footer onder elkaar i.p.v. naast elkaar */
  #cb-colophon .cb-col {
    flex-direction: column;
    align-items: center;
  }
}