/*
Theme Name: Conniction (Avada Child)
Theme URI: https://conniction.nl
Description: Avada child theme styled to match the Conniction brand. Colors, fonts, button/card shapes and type scale were extracted directly from the Conniction.fig design file (Style Guide page + live page fills), not guessed.
Author: Conniction
Template: Avada
Version: 1.1.0
Text Domain: avada-child
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Source: Conniction.fig — "Style Guide" canvas (color swatches) and
   fill-frequency analysis of the real "Flexio_Home Page" (now Conniction)
   canvas. Values are exact, not approximated.
   ========================================================================== */

:root {
	/* --- Brand colors --- */
	--conn-black:        #262121; /* primary text color — 101 uses, dominant */
	--conn-white:        #FFFFFF; /* base background — 73 uses */
	--conn-bg-soft:      #FEFAF6; /* optional warm off-white section bg (Style Guide "Bg") */
	--conn-bg-soft-dark: #FAEBDC; /* optional warm tan section bg (Style Guide "BG dark") */
	--conn-orange:       #FE6037; /* PRIMARY accent — buttons, highlights — 34 uses */
	--conn-mint:         #76C6B3; /* secondary accent — decorative shapes/tags — 8 uses */
	--conn-blue:         #3861F9; /* tertiary accent, used sparingly — 3 uses */
	--conn-border:       #D9D9D9;
	--conn-border-dark:  #BBBBBB;
	--conn-muted-text:   #C1C1BF;

	/* --- Fonts (both free, via Fontshare) --- */
	--conn-font-heading: 'Clash Grotesk', 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--conn-font-display: 'Familjen Grotesk', 'Clash Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--conn-font-body:    'Clash Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* --- Radius --- */
	--conn-radius-pill: 999px; /* buttons, step numbers */
	--conn-radius-card: 8px;   /* cards */
}

/* Fontshare embed for Clash Grotesk + Familjen Grotesk.
   If a weight below looks wrong once live, grab the verified embed snippet
   from https://www.fontshare.com/fonts/clash-grotesk and
   https://www.fontshare.com/fonts/familjen-grotesk and swap this line —
   Fontshare's own page is the source of truth for exact weight codes. */
@import url('https://api.fontshare.com/v2/css?f[]=clash-grotesk@400,500,600&f[]=familjen-grotesk@400,500,600&display=swap');

/* ==========================================================================
   2. TYPOGRAPHY
   Real type scale measured from the Home Page text nodes:
   Hero H1        Familjen Grotesk Medium  82px / 82   (Clash Grotesk Medium 60/66 as H2 alt)
   H2 / section   Clash Grotesk    Medium   60px / 66
   Card title     Clash Grotesk    Medium   32px / 40  uppercase, tracked
   H4 / step ttl  Clash Grotesk    Medium   24px / 32
   Lead / body    Clash Grotesk    Medium   18px / 28
   Button text    Clash Grotesk    Medium   16px / 26
   Eyebrow/tag    Familjen Grotesk Medium   12px / 16  uppercase
   ========================================================================== */

body,
body.fusion-body {
	font-family: var(--conn-font-body) !important;
	color: var(--conn-black);
	background-color: var(--conn-white);
}

h1, h2, h3, h4, h5, h6,
.fusion-title h1, .fusion-title h2, .fusion-title h3,
.fusion-title h4, .fusion-title h5, .fusion-title h6 {
	font-family: var(--conn-font-heading) !important;
	font-weight: 500 !important;
	color: var(--conn-black);
	letter-spacing: 0;
}

/* Hero-scale display headline (use Fusion Builder's "Large Title" or apply
   the .conn-hero-title class to a Title element's Custom CSS Class field) */
.conn-hero-title,
.fusion-title.conn-hero-title h1 {
	font-family: var(--conn-font-display) !important;
	font-size: 82px !important;
	line-height: 1 !important;
	font-weight: 500 !important;
}

h1 { font-size: 60px; line-height: 1.1; }
h2 { font-size: 40px; line-height: 1.2; }
h3 { font-size: 32px; line-height: 1.25; }
h4 { font-size: 24px; line-height: 1.33; }
h5 { font-size: 20px; line-height: 1.4; }
h6 { font-size: 16px; line-height: 1.5; }

p, li, .fusion-text {
	font-family: var(--conn-font-body);
	font-size: 18px;
	line-height: 1.55;
	color: var(--conn-black);
}

a {
	color: var(--conn-orange);
}
a:hover {
	color: var(--conn-blue);
}

/* Eyebrow / tag / uppercase label style — apply "conn-eyebrow" as a Custom
   CSS Class on Fusion Builder text elements used as small labels/tags */
.conn-eyebrow {
	font-family: var(--conn-font-display) !important;
	font-size: 12px !important;
	line-height: 16px !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* ==========================================================================
   3. BUTTONS
   Real buttons on the Home Page are fully pill-shaped (cornerRadius 99–999
   in the Figma file) with the orange accent as the default fill.
   ========================================================================== */

.fusion-button {
	font-family: var(--conn-font-body) !important;
	font-weight: 500;
	border-radius: var(--conn-radius-pill) !important;
}

.fusion-button.button-default,
.fusion-button.button-1 {
	background-color: var(--conn-orange) !important;
	border-color: var(--conn-orange) !important;
	color: var(--conn-white) !important;
}

.fusion-button.button-default:hover,
.fusion-button.button-1:hover {
	background-color: var(--conn-black) !important;
	border-color: var(--conn-black) !important;
	color: var(--conn-white) !important;
}

/* Secondary / outline button — match by giving it Fusion Builder's
   "Outlined" button style, this just fixes the outline color */
.fusion-button.button-3 {
	border-color: var(--conn-black) !important;
	color: var(--conn-black) !important;
	border-radius: var(--conn-radius-pill) !important;
}

/* ==========================================================================
   4. HEADER / TOP NAVIGATION
   Matched directly against a live screenshot of conniction.framer.website
   (2026-08-19). Framer's header is a light, neutral bar — NOT the mint
   accent color — with dark menu text, no social-icon row, and a dropdown
   caret on items with children (Diensten).
   ========================================================================== */

#header,
.fusion-header-wrapper,
.fusion-header,
.fusion-secondary-header,
.fusion-secondary-menu {
	background-color: #F0F0EE !important;
}

/* The live site's header has no social-icon row — hide it if Avada renders one */
.fusion-header .fusion-social-links-wrapper,
.fusion-secondary-header .fusion-social-links-wrapper,
.fusion-top-bar-social {
	display: none !important;
}

.fusion-main-menu > ul > li > a,
#navigation .fusion-main-menu > ul > li > a,
.fusion-main-menu .menu-item > a {
	color: var(--conn-black) !important;
	border: none !important;
	background-color: transparent !important;
}

/* Remove the vertical divider lines Avada draws between menu items by default */
.fusion-main-menu li.menu-item,
.fusion-main-menu > ul > li {
	border: none !important;
}

.fusion-main-menu .fusion-caret {
	color: var(--conn-black) !important;
	opacity: 0.6;
}

/* ==========================================================================
   5. NAVIGATION — "Let's connect" button in the menu
   The child theme's menu-creation code tags this item with the
   "conn-nav-cta" CSS class automatically.

   NOTE: the live Framer site currently shows this — and the main hero
   CTA — in BLUE (#3861F9), not the orange we originally tagged as
   "primary" from the Figma file. Flagging this: if orange should still be
   primary elsewhere (cards, secondary CTAs), leave as is; if the whole
   site's primary button color changed to blue, say so and I'll extend
   this swap to .fusion-button.button-default / button-1 as well.
   ========================================================================== */

li.conn-nav-cta > a,
.conn-nav-cta a {
	background-color: var(--conn-blue) !important;
	color: var(--conn-white) !important;
	border-radius: var(--conn-radius-pill) !important;
	padding: 10px 22px !important;
}
li.conn-nav-cta > a:hover,
.conn-nav-cta a:hover {
	background-color: var(--conn-black) !important;
	color: var(--conn-white) !important;
}

/* ==========================================================================
   5. CARDS, TAGS, STEP NUMBERS
   ========================================================================== */

.fusion-panel,
.conn-card {
	border-radius: var(--conn-radius-card);
	background-color: var(--conn-white);
	border: 1px solid var(--conn-border);
}

/* Solid blue pill badge — matches the small "CONNICTION" label above the
   hero H1 on the live site. Apply "conn-badge-blue" as a Custom CSS Class. */
.conn-badge-blue {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--conn-radius-pill);
	background-color: var(--conn-blue);
	color: var(--conn-white);
	font-family: var(--conn-font-display);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Pill-shaped tag/chip — apply "conn-tag" as a Custom CSS Class */
.conn-tag {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border-radius: var(--conn-radius-pill);
	background-color: var(--conn-bg-soft-dark);
	font-family: var(--conn-font-display);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Circular step-number badge — apply "conn-step-number" as a Custom CSS Class */
.conn-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--conn-radius-pill);
	background-color: var(--conn-orange);
	color: var(--conn-white);
	font-family: var(--conn-font-heading);
	font-weight: 500;
}

/* Decorative mint accent shape — apply "conn-accent-mint" as a Custom CSS Class */
.conn-accent-mint {
	background-color: var(--conn-mint) !important;
}

/* Soft section background — apply "conn-section-soft" as a Custom CSS Class
   on a Fusion Builder Container/Section */
.conn-section-soft {
	background-color: var(--conn-bg-soft) !important;
}
.conn-section-soft-dark {
	background-color: var(--conn-bg-soft-dark) !important;
}