/*
Theme Name: Impulse DJs (Beaver Builder Child)
Theme URI: https://impulsedjs.com
Version: 1.2.0
Description: Impulse Entertainment child theme for the Beaver Builder Theme. Source of truth for brand styles, fonts, tracking and the lead form.
Author: Kenneth Morales (codebyken)
template: bb-theme
*/

/* Brand styles — values from the old iedjs theme (see inventory "Design" tab). */

/* ---------- Fonts (self-hosted, swap so text shows immediately) ---------- */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/Poppins-Light.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/Poppins-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/Poppins-Italic.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/Poppins-Medium.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/Poppins-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/Poppins-Bold.woff2) format('woff2'); }

/* ---------- Brand tokens ---------- */
:root {
	--iedjs-pink: #ed03ad;
	--iedjs-blue: #00aeef;
	--iedjs-blue-light: #4ebde5;
	--iedjs-black: #171717;
	--iedjs-white: #fff;
	--iedjs-grey-bg: #f8f8f8;
	--iedjs-lblue-bg: #e5f7fd;
	--iedjs-yellow: #ffc200;
	--iedjs-royal: #0e64c1;
	--iedjs-purple: #8f2793;
	--iedjs-grey-text: #666;
	--iedjs-font: 'Poppins', 'Helvetica Neue', sans-serif;
}

/* ---------- Base typography ---------- */
body,
button,
input,
select,
textarea,
.fl-builder-content {
	font-family: var(--iedjs-font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--iedjs-black);
}

p { margin: 0 0 24px; }

a { color: var(--iedjs-blue); }
a:hover,
a:focus { color: var(--iedjs-blue-light); }

h1, h2, h3, h4, h5, h6,
.fl-heading {
	font-family: var(--iedjs-font);
	font-weight: 600;
	color: inherit;
	margin: 0 0 16px;
}
h1 { font-size: 60px; line-height: 1.1; }
h2 { font-size: 38px; line-height: 1.3; }
h3 { font-size: 24px; line-height: 1.3; }
h4 { font-size: 20px; line-height: 1.5; }
h5 { font-size: 18px; line-height: 1.5; }
h6 { font-size: 15px; line-height: 1.5; font-weight: 400; text-transform: uppercase; }

@media (max-width: 767px) {
	h1 { font-size: 28px; }
	h2 { font-size: 24px; }
	h3 { font-size: 20px; }
	h4 { font-size: 16px; }
	h5 { font-size: 14px; }
}

/* ---------- Buttons ----------
 * Beaver Builder Button module → Advanced → Class: add one of
 *   iedjs-btn-primary | iedjs-btn-secondary | iedjs-btn-blue | iedjs-btn-black | iedjs-btn-white
 */
[class*="iedjs-btn-"] a.fl-button,
[class*="iedjs-btn-"] a.fl-button:visited {
	font-family: var(--iedjs-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	padding: 20px 30px;
	border: 2px solid transparent;
	border-radius: 3px;
	position: relative;
	top: 0;
	transition: all .3s ease;
}
[class*="iedjs-btn-"] a.fl-button .fl-button-text { color: inherit; }

.iedjs-btn-primary a.fl-button { background: var(--iedjs-pink); border-color: var(--iedjs-pink); color: #fff; }
.iedjs-btn-primary a.fl-button:hover,
.iedjs-btn-primary a.fl-button:focus { background: var(--iedjs-blue); border-color: var(--iedjs-blue); color: #fff; }

.iedjs-btn-secondary a.fl-button { background: transparent; border-color: var(--iedjs-pink); color: #fff; }
.iedjs-btn-secondary a.fl-button:hover,
.iedjs-btn-secondary a.fl-button:focus { background: var(--iedjs-pink); color: #fff; }

.iedjs-btn-blue a.fl-button { background: var(--iedjs-blue); border-color: var(--iedjs-blue); color: #fff; }
.iedjs-btn-blue a.fl-button:hover,
.iedjs-btn-blue a.fl-button:focus { background: var(--iedjs-pink); border-color: var(--iedjs-pink); color: #fff; top: -3px; }

.iedjs-btn-black a.fl-button { background: var(--iedjs-black); border-color: var(--iedjs-black); color: #fff; }
.iedjs-btn-black a.fl-button:hover,
.iedjs-btn-black a.fl-button:focus { color: #fff; top: -3px; }

.iedjs-btn-white a.fl-button { background: transparent; border-color: #fff; color: #fff; }
.iedjs-btn-white a.fl-button:hover,
.iedjs-btn-white a.fl-button:focus { background: #fff; color: var(--iedjs-black); }

/* Small line under a button ("No obligation. Reply within 24 hours.") — Text module class: iedjs-microcopy */
.iedjs-microcopy { font-size: 15px; font-weight: 300; text-align: center; margin-top: 10px; }

/* ---------- Section backgrounds — Row → Advanced → Class ---------- */
.iedjs-bg-grey   { background-color: var(--iedjs-grey-bg); }
.iedjs-bg-lblue  { background-color: var(--iedjs-lblue-bg); }
.iedjs-bg-lblue-grad { background: linear-gradient(#fff, #f2fdff); }
.iedjs-bg-black  { background-color: var(--iedjs-black); color: #fff; }
.iedjs-bg-yellow { background-color: var(--iedjs-yellow); }
.iedjs-bg-royal  { background-color: var(--iedjs-royal); color: #fff; }

/* ---------- Lead form ---------- */
.iedjs-form { width: 100%; }
.iedjs-form iframe { display: block; }

/* ---------- Header (Beaver Themer header layout: Sticky = Yes, Overlay = Yes) ----------
 * Matches the old site: transparent with white logo/menu over the hero, white background with
 * dark text once scrolled. Give the header row the class "iedjs-header".
 * Pages whose first row is light: add the class "iedjs-light-top" to that row for dark text from the start.
 */
.iedjs-header .fl-row-content-wrap { background-color: transparent; transition: background-color .3s ease, box-shadow .3s ease; }
.fl-theme-builder-header-scrolled .iedjs-header .fl-row-content-wrap { background-color: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }

.iedjs-logo { display: inline-block; width: 125px; line-height: 0; }
.iedjs-logo svg { width: 100%; height: auto; display: block; }
.iedjs-logo--header .logo-bottom-text { fill: #fff; transition: fill .3s ease; }

.iedjs-header .fl-menu a { color: #fff; font-size: 16px; font-weight: 500; }
.iedjs-header .fl-menu .sub-menu { background-color: #f0f6f7; border-bottom: 5px solid var(--iedjs-blue); border-radius: 4px; }
.iedjs-header .fl-menu .sub-menu a { color: var(--iedjs-black); }

/* Scrolled, or a light first section: dark logo text and menu */
.fl-theme-builder-header-scrolled .iedjs-logo--header .logo-bottom-text,
body:has(.fl-builder-content .fl-row:first-child.iedjs-light-top) .iedjs-logo--header .logo-bottom-text { fill: #010101; }
.fl-theme-builder-header-scrolled .iedjs-header .fl-menu a,
body:has(.fl-builder-content .fl-row:first-child.iedjs-light-top) .iedjs-header .fl-menu a { color: var(--iedjs-black); }

/* "Check Your Date" menu item: Appearance → Menus → that item → CSS Classes: header-cta */
.iedjs-header .fl-menu .header-cta > a,
.iedjs-header .fl-menu .header-cta > .fl-has-submenu-container > a {
	background-color: var(--iedjs-pink);
	border-radius: 3px;
	color: #fff !important;
	padding: 10px 15px;
	margin-left: 5px;
	transition: all .3s ease;
}
.iedjs-header .fl-menu .header-cta > a:hover,
.iedjs-header .fl-menu .header-cta > a:focus { background-color: #20b5ea; color: #fff !important; }

@media (max-width: 767px) {
	.iedjs-logo { width: 85px; }
	/* Mobile menu panel is light, so its links are always dark */
	.iedjs-header .fl-menu-mobile-toggle { color: inherit; }
	.iedjs-header .fl-menu .menu a { color: var(--iedjs-black); }
}

/* ---------- Footer (Beaver Themer footer layout) — give footer rows the class "iedjs-footer" ---------- */
.iedjs-footer { font-size: 14px; }
.iedjs-footer a { color: inherit; text-decoration: none; }
.iedjs-footer a:hover { text-decoration: underline; }
.iedjs-footer ul { list-style: none; margin: 0; padding: 0; }
.iedjs-logo--black { width: 160px; }