/*
Theme Name: Beaver Builder Child Theme
Theme URI: https://www.wpbeaverbuilder.com
Version: 1.1
Description: G7 Plus child theme, styled to match the PRINTING United Alliance / iLEARNING+ brand (colors and typography sourced from ilearningplus.org).
Author: The Beaver Builder Team
Author URI: https://www.fastlinemedia.com
template: bb-theme
*/

/* =====================================================
   Brand tokens (matched from ilearningplus.org / Thought
   Industries appearance CSS). Update these if the source
   site's palette ever changes.
   ===================================================== */
:root {
	--g7-brand-primary: rgb(0, 117, 180);      /* PRINTING United blue */
	--g7-brand-secondary: rgb(249, 236, 49);   /* Yellow accent */
	--g7-brand-accent: rgb(234, 43, 123);      /* Magenta/pink accent */
	--g7-brand-muted: rgb(36, 55, 70);         /* Dark navy, footer/headers */

	--g7-foreground: rgb(49, 65, 88);
	--g7-background: rgb(248, 250, 252);
	--g7-border: rgb(226, 232, 240);

	--g7-font-body: 'Inter', sans-serif, Arial, Helvetica;
	--g7-font-heading: 'Poppins', sans-serif, Arial, Helvetica;
}

/* =====================================================
   Base typography
   ===================================================== */
body {
	font-family: var(--g7-font-body);
	color: var(--g7-foreground);
	background-color: var(--g7-background);
}

h1, h2,
.fl-heading,
.fl-module-heading h1,
.fl-module-heading h2 {
	font-family: var(--g7-font-heading);
	color: var(--g7-brand-muted);
	font-weight: 600;
}

h3, h4, h5, h6,
.fl-module-heading h3,
.fl-module-heading h4,
.fl-module-heading h5,
.fl-module-heading h6 {
	font-family: var(--g7-font-heading);
	color: var(--g7-brand-muted);
	font-weight: 500;
}

a {
	color: var(--g7-brand-primary);
}

a:hover,
a:focus {
	color: var(--g7-brand-accent);
}

/* =====================================================
   Beaver Builder module overrides — buttons, callouts
   ===================================================== */
.fl-button,
.fl-builder-content .fl-button {
	background-color: var(--g7-brand-primary);
	border-color: var(--g7-brand-primary);
	font-family: var(--g7-font-body);
	font-weight: 600;
	border-radius: 4px;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.fl-button:hover,
.fl-button:focus {
	background-color: var(--g7-brand-accent);
	border-color: var(--g7-brand-accent);
	color: #fff;
}

.fl-button-secondary,
.fl-builder-content .fl-button-secondary {
	background-color: var(--g7-brand-secondary);
	border-color: var(--g7-brand-secondary);
	color: var(--g7-brand-muted);
}

.fl-callout {
	border-left: 4px solid var(--g7-brand-primary);
}

/* =====================================================
   BB Theme header / footer builder areas
   (targets the BB Theme's own header/footer wrappers,
   not FSE template parts, since this is a classic theme)
   ===================================================== */
.fl-page-footer-wrap {
	background-color: var(--g7-brand-muted);
	color: #fff;
}

.fl-page-footer-wrap a {
	color: var(--g7-brand-secondary);
}

/* =====================================================
   Eyebrow bar (BB Theme's built-in Top Bar, enabled via
   Appearance → Customize → Header → Top Bar)
   Confirmed real markup: .fl-page-bar wrapper,
   .fl-page-bar-nav / .top-bar-nav menu, .nav-link anchors
   ===================================================== */
.fl-page-bar {
	background-color: #e9e9e9;
	min-height: 34px;
}

.fl-page-bar .fl-page-bar-container.container {
	background-color: #000;
}

.fl-page-bar-nav.nav.navbar-nav li a.nav-link,
.top-bar-nav .nav-link {
	color: #fff !important;
	font-family: var(--g7-font-body);
	font-size: 13px;
	font-weight: 500;
}

.fl-page-bar-nav.nav.navbar-nav li a.nav-link:hover,
.top-bar-nav .nav-link:hover {
	color: var(--g7-brand-secondary) !important;
}

/* =====================================================
   Logo + main nav row (BB Theme's Standard header layout)
   ===================================================== */
.fl-page-header {
	background-color: #fff;
}

.fl-page-header-logo img {
	max-height: 60px;
	width: auto;
}

.fl-page-nav ul.menu > li > a {
	font-family: var(--g7-font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--g7-brand-muted);
}

.fl-page-nav ul.menu > li > a:hover,
.fl-page-nav ul.menu > li.current-menu-item > a {
	color: var(--g7-brand-primary);
}

/* Two-row header: logo on its own line, main menu on a
   full-width line underneath with a divider border.
   Confirmed real markup: BB Theme lays out the logo and
   nav as Bootstrap-style grid columns (.fl-page-header-logo-col
   is col-md-4, .fl-page-nav-col is col-md-8) inside
   .fl-page-header-row.row. Forcing both to 100% width
   stacks them instead of sitting side by side. */
.fl-page-nav-col .fl-page-nav-wrap {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--g7-border);
}

.fl-page-nav-wrap ul.menu {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.fl-page-nav-wrap ul.menu > li {
	white-space: nowrap;
	margin-right: 1.5rem;
}

.fl-page-nav ul.menu {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.fl-page-nav ul.menu > li {
	white-space: nowrap;
	margin-left: 0;
	margin-right: 1.5rem;
}

/* Utility links area (Sign In / Cart) if rendered via a
   widget area or secondary menu next to the logo */
.fl-page-header-widget a,
.fl-page-header-widget-1 a,
.fl-page-header-widget-2 a {
	font-family: var(--g7-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--g7-foreground);
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.fl-page-header-widget a:hover {
	color: var(--g7-brand-primary);
}