/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
--------------------------------------------------------------*/

/* ============ MDN — Moroccan Diaspora Network — Charte graphique ============
   Tokens kept in sync with the static maquette's assets/css/style.css :root block. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
	--mdn-navy: #0B1F3A;
	--mdn-navy-light: #12335C;
	--mdn-green: #006B3F;
	--mdn-green-light: #0E8A55;
	--mdn-gold: #C8A45D;
	--mdn-gold-light: #E6CA89;
	--mdn-red: #C1272D;
	--mdn-ivory: #F7F9FC;
	--mdn-light: #EEF1F6;
	--mdn-border: #D8DEE8;
	--mdn-text: #1a1a1a;
	--mdn-muted: #666666;

	/* BuddyBoss Theme native CSS variables — remapped to the MDN palette.
	   Navy is the primary/chrome color (sidebar, primary buttons); green is
	   a secondary accent; gold marks active/highlighted states. */
	--bb-primary-color: var(--mdn-navy);
	--bb-headings-color: var(--mdn-navy);
	--bb-headings-color-rgb: 11, 31, 58;

	--bb-body-background-color: var(--mdn-ivory);
	--bb-body-text-color: var(--mdn-text);
	--bb-content-background-color: #ffffff;
	--bb-content-alternate-background-color: var(--mdn-light);
	--bb-content-border-color: var(--mdn-border);

	--bb-primary-button-background-regular: var(--mdn-navy);
	--bb-primary-button-background-hover: var(--mdn-navy-light);
	--bb-primary-button-border-regular: var(--mdn-navy);
	--bb-primary-button-border-hover: var(--mdn-navy-light);
	--bb-primary-button-text-regular: #ffffff;
	--bb-primary-button-text-hover: #ffffff;
	--bb-primary-button-focus-shadow: rgba(11, 31, 58, 0.25);

	--bb-header-links: var(--mdn-text);
	--bb-header-links-hover: var(--mdn-navy);

	--bb-sidenav-menu-background-color-regular: transparent;
	--bb-sidenav-menu-background-color-hover: rgba(200, 164, 93, 0.12);
	--bb-sidenav-menu-background-color-active: rgba(200, 164, 93, 0.18);
	--bb-sidenav-count-background-color-regular: var(--mdn-light);
	--bb-sidenav-count-background-color-active: var(--mdn-gold);
	--bb-sidenav-count-background-color-hover: var(--mdn-gold-light);
	--bb-sidenav-count-text-color-regular: var(--mdn-text);
	--bb-sidenav-count-text-color-active: #ffffff;
	--bb-sidenav-count-text-color-hover: #ffffff;

	--bb-alternate-text-color: var(--mdn-muted);
	--bb-alternate-text-color-rgb: 102, 102, 102;

	--bb-danger-color: var(--mdn-red);
	--bb-danger-color-rgb: 193, 39, 45;
	--bb-success-color: var(--mdn-green);
	--bb-success-color-rgb: 0, 107, 63;
	--bb-warning-color: var(--mdn-gold);
	--bb-warning-color-rgb: 200, 164, 93;

	--bb-footer-text-color: rgba(255, 255, 255, 0.6);
	--bb-footer-menu-link-color-regular: rgba(255, 255, 255, 0.75);
	--bb-footer-menu-link-color-hover: #ffffff;
	--bb-footer-menu-link-color-active: var(--mdn-gold-light);
}

/* ============ Typography ============ */
body,
.bb-field-wrap,
input,
select,
textarea,
button {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.bb-title,
.bb-title-h1, .bb-title-h2, .bb-title-h3,
.entry-title,
.widget-title,
.bp-heading,
.activity-list .activity-content .activity-header,
#buddypanel .bp-logo,
.site-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	color: var(--mdn-navy);
}

/* ============ Header / top nav ============ */
#header,
.site-header,
#buddyboss-theme-header {
	background-color: #ffffff;
	border-bottom: 1px solid var(--mdn-border);
}

/* ============ BuddyPanel (left sidebar) ============ */
#buddypanel,
.buddypanel {
	background-color: var(--mdn-navy);
}
#buddypanel .bb-user-wrap .bb-user-name,
#buddypanel a {
	color: rgba(255, 255, 255, 0.85);
}
#buddypanel a:hover {
	color: #ffffff;
}
#buddypanel .bp-single-nav.current a,
#buddypanel .bp-single-nav.selected a {
	color: var(--mdn-gold-light);
	font-weight: 600;
}

/* ============ Buttons ============ */
.button,
a.button,
.bp-primary-action .button,
button[type="submit"],
input[type="submit"] {
	border-radius: 8px;
	font-weight: 600;
}

/* ============ Badges / activity ============ */
.bp-group-privacy-status,
.group-status {
	border-radius: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

/* ============ Footer ============ */
#colophon,
.site-footer {
	background-color: var(--mdn-navy);
}

/* ============ Links ============ */
a {
	color: var(--mdn-navy);
}
a:hover {
	color: var(--mdn-gold);
}