/*
 Theme Name:   Leaping Lemur (Bricks Child)
 Theme URI:    https://leapinglemurmedia.com
 Description:  Child theme for Bricks, Leaping Lemur Media. Self-hosted fonts, design tokens, base styles.
 Author:       Jaouhara
 Template:     bricks
 Version:      1.6
 Text Domain:  bricks
*/

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face {
	font-family: 'Bricolage Grotesque';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('fonts/bricolage-grotesque-latin.woff2') format('woff2');
}
@font-face {
	font-family: 'Hanken Grotesk';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('fonts/hanken-grotesk-latin.woff2') format('woff2');
}

/* ---------- Design tokens ---------- */
:root {
	--canopy: #0A4A42;
	--deep: #06302B;
	--teal: #2FD9BE;
	--teal-hover: #63E8D1;
	--teal-ink: #0E7D6C;
	--mint: #DCEFE9;
	--paper: #F3F5F2;
	--ink: #0F211E;
	--muted: #4F625D;
	--line: #C9D6D1;

	--font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;

	--ease: cubic-bezier(.2, .75, .1, 1);
	--wrap: 1320px;
	--gutter: clamp(20px, 5vw, 64px);
	--section-y: clamp(80px, 10vw, 140px);
	--radius-card: 24px;
	--radius-pill: 999px;
}

/* Base layer: overrides Bricks defaults, but any style set inside Bricks still wins. */
@layer llm-base {
	html { scroll-behavior: smooth; }
	body {
		font-family: var(--font-body);
		font-size: 17px;
		line-height: 1.6;
		color: var(--ink);
		background: var(--paper);
		-webkit-font-smoothing: antialiased;
		overflow-x: hidden;
	}
	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-display);
		font-weight: 700;
		letter-spacing: -0.03em;
		line-height: 1;
		color: inherit;
	}
	a { color: inherit; }
	img { max-width: 100%; height: auto; }
	::selection { background: var(--teal); color: var(--deep); }
	a:focus-visible, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

	/* Layout */
	.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

	/* Type helpers */
	.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: .98; }
	.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--teal-ink); }
	.kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; }
	.kicker--light { color: var(--teal); }

	/* Buttons */
	.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--radius-pill); font-weight: 600; font-size: 16px; text-decoration: none; transition: transform .3s var(--ease), background-color .3s, color .3s, border-color .3s; }
	.btn svg, .btn i { width: 18px; height: 18px; transition: transform .3s var(--ease); }
	.btn:hover svg, .btn:hover i { transform: translateX(4px); }
	.btn--teal { background: var(--teal); color: var(--deep); }
	.btn--teal:hover { background: var(--teal-hover); transform: translateY(-2px); }
	.btn--line { border: 1.5px solid rgba(243, 245, 242, .4); color: var(--paper); }
	.btn--line:hover { border-color: var(--teal); color: var(--teal); }
	.btn--dark { background: var(--canopy); color: var(--paper); }
	.btn--dark:hover { background: var(--deep); transform: translateY(-2px); }

	/* Icons (stroke) */
	svg.i { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =========================================================
   HEADER
   ========================================================= */
@layer llm-base {
	#brx-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; background: transparent; }
	.header-bar { display: flex; align-items: center; justify-content: space-between; height: 96px; flex-direction: row; }
	.header-logo img, .header-logo { height: 52px; width: auto; }

	/* Desktop menu */
	.header-nav .bricks-nav-menu { display: flex; align-items: center; gap: 34px; margin: 0; padding: 0; list-style: none; }
	.header-nav .bricks-nav-menu > li > a { color: var(--paper); text-decoration: none; font-size: 15px; font-weight: 500; position: relative; padding: 0; }
	.header-nav .bricks-nav-menu > li:not(.menu-cta) > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--teal); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
	.header-nav .bricks-nav-menu > li:not(.menu-cta) > a:hover::after,
	.header-nav .bricks-nav-menu > li.current-menu-item:not(.menu-cta) > a::after { transform: scaleX(1); transform-origin: left; }
	.header-nav .menu-cta > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px !important; border-radius: var(--radius-pill); background: var(--teal); color: var(--deep) !important; font-weight: 600; transition: background-color .3s, transform .3s var(--ease); }
	.header-nav .menu-cta > a:hover { background: var(--teal-hover); transform: translateY(-2px); }

	/* Mobile toggle */
	.header-nav .bricks-mobile-menu-toggle { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(243, 245, 242, .4); color: var(--paper); position: relative; }
	.header-nav .bricks-mobile-menu-toggle span { width: 18px !important; height: 1.7px !important; left: 50% !important; transform: translateX(-50%); background: var(--paper) !important; }
	.header-nav .bricks-mobile-menu-toggle .bar-top { top: 18px !important; }
	.header-nav .bricks-mobile-menu-toggle .bar-center { display: none; }
	.header-nav .bricks-mobile-menu-toggle .bar-bottom { top: 27px !important; }
	.header-nav.show-mobile-menu .bricks-mobile-menu-toggle .bar-top { top: 23px !important; transform: translateX(-50%) rotate(45deg) !important; }
	.header-nav.show-mobile-menu .bricks-mobile-menu-toggle .bar-bottom { top: 23px !important; transform: translateX(-50%) rotate(-45deg) !important; }

	/* Mobile dropdown card */
	.header-nav .bricks-mobile-menu-wrapper { position: absolute !important; top: 84px !important; left: 16px !important; right: 16px !important; width: auto !important; height: auto !important; max-height: calc(100vh - 100px); overflow: auto; background: var(--deep) !important; border: 1px solid rgba(243, 245, 242, .14); border-radius: 22px; padding: 14px; transform: none !important; }
	.header-nav .bricks-mobile-menu-wrapper .bricks-mobile-menu { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; }
	.header-nav .bricks-mobile-menu > li > a { display: block; padding: 12px 10px; font-size: 18px; color: var(--paper); text-decoration: none; }
	.header-nav .bricks-mobile-menu > li.menu-cta > a { display: flex; justify-content: center; align-items: center; min-height: 52px; margin-top: 8px; padding: 0 20px; border-radius: var(--radius-pill); background: var(--teal); color: var(--deep); font-weight: 600; font-size: 16px; }
	.header-nav .bricks-mobile-menu-overlay { background: transparent !important; }
}

/* Header fixes */
#brx-header{top:var(--wp-admin--admin-bar--height,0px)}
.header-bar{position:relative}
.header-nav{position:static!important}
.header-nav .bricks-mobile-menu-wrapper{display:block!important;bottom:auto!important;height:auto!important;visibility:hidden;opacity:0;transform:translateY(-8px)!important;transition:opacity .25s,transform .25s var(--ease),visibility .25s!important;z-index:60}
.header-nav .bricks-mobile-menu-wrapper::before{display:none}
.header-nav.show-mobile-menu .bricks-mobile-menu-wrapper{visibility:visible!important;opacity:1!important;transform:none!important}
.header-nav .bricks-mobile-menu{height:auto!important;overflow:visible!important}
.header-nav .bricks-mobile-menu-wrapper li a{line-height:1.3!important}

/* =========================================================
   FOOTER
   ========================================================= */
#brx-footer{background:var(--deep);color:#A9BDB8;padding:64px 0 36px;font-size:15px}
#brx-footer .foot-wrap{display:block}
.foot-grid{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,2fr));gap:40px;width:100%}
.foot-logo img,.foot-logo{height:56px;width:auto}
.foot-about{margin-top:18px;max-width:300px}
.foot-title{margin:0 0 14px;color:var(--paper);font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:0;line-height:1.3}
.foot-links{display:flex;flex-direction:column;gap:16px}
.foot-links a,.foot-bottom a{color:inherit;text-decoration:none;transition:color .3s}
.foot-links a:hover,.foot-bottom a:hover{color:var(--teal)}
.social{display:flex;gap:10px;margin-top:22px}
.social .brxe-icon{width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,245,242,.2);display:grid;place-items:center;color:var(--paper);font-size:17px;transition:background-color .3s,color .3s,border-color .3s}
.social .brxe-icon:hover{background:var(--teal);border-color:var(--teal);color:var(--deep)}
.foot-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;width:100%;margin-top:56px;padding-top:24px;border-top:1px solid rgba(243,245,242,.1);font-size:13.5px}
@media (max-width:1000px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.foot-grid{grid-template-columns:minmax(0,1fr)}}