/* =========================================================
   InsuraBeat — Design tokens & base styles
   ---------------------------------------------------------
   Brand: navy + signal red "beat" accent. Editorial serif
   for headlines (Source Serif 4), Inter for UI/body.
   ========================================================= */

:root {
	/* --- Brand palette --- */
	--ib-navy-900: #0E2240;       /* deepest brand navy (logo dark) */
	--ib-navy-800: #14375E;       /* primary navy */
	--ib-navy-700: #1E4A78;       /* navy hover */
	--ib-navy-200: #C8D5E5;       /* navy tint, dividers, surfaces */
	--ib-navy-100: #E5ECF5;       /* navy wash bg */

	--ib-accent: #E63946;         /* "beat" red — breaking, live, CTAs */
	--ib-accent-dark: #B82A35;    /* accent hover */
	--ib-accent-soft: #FCE7E9;    /* accent wash bg */

	--ib-pulse: #00B5A0;          /* secondary accent — innovation/insurtech tag */

	/* --- Neutrals --- */
	--ib-ink:        #0E1F33;     /* body text */
	--ib-ink-muted: #4A5A70;      /* secondary text */
	--ib-ink-soft:  #6B7B8C;      /* meta, captions */
	--ib-line:      #E1E6EE;      /* borders */
	--ib-bg:        #FFFFFF;
	--ib-bg-alt:    #F5F7FA;      /* section alternate bg */
	--ib-bg-dark:   var(--ib-navy-900);

	/* --- Typography --- */
	--ib-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--ib-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* --- Type scale --- */
	--ib-fs-xs:   0.75rem;   /* 12 */
	--ib-fs-sm:   0.875rem;  /* 14 */
	--ib-fs-base: 1rem;      /* 16 */
	--ib-fs-md:   1.125rem;  /* 18 */
	--ib-fs-lg:   1.375rem;  /* 22 */
	--ib-fs-xl:   1.75rem;   /* 28 */
	--ib-fs-2xl:  2.25rem;   /* 36 */
	--ib-fs-3xl:  3rem;      /* 48 */
	--ib-fs-4xl:  3.75rem;   /* 60 */

	/* --- Spacing --- */
	--ib-sp-1: 0.25rem;
	--ib-sp-2: 0.5rem;
	--ib-sp-3: 0.75rem;
	--ib-sp-4: 1rem;
	--ib-sp-5: 1.5rem;
	--ib-sp-6: 2rem;
	--ib-sp-7: 3rem;
	--ib-sp-8: 4rem;
	--ib-sp-9: 6rem;

	/* --- Layout --- */
	--ib-container: 1280px;
	--ib-container-wide: 1440px;
	--ib-radius-sm: 4px;
	--ib-radius:    8px;
	--ib-radius-lg: 14px;

	--ib-shadow-sm: 0 1px 2px rgba(14, 34, 64, .06);
	--ib-shadow:    0 4px 14px rgba(14, 34, 64, .08);
	--ib-shadow-lg: 0 12px 32px rgba(14, 34, 64, .14);

	--ib-ease:      cubic-bezier(.4, 0, .2, 1);
	--ib-dur:       .25s;
}

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	font-family: var(--ib-font-sans);
	font-size: var(--ib-fs-base);
	line-height: 1.55;
	color: var(--ib-ink);
	background: var(--ib-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .ib-title {
	font-family: var(--ib-font-serif);
	color: var(--ib-navy-900);
	line-height: 1.18;
	letter-spacing: -0.01em;
	font-weight: 700;
}

h1 { font-size: clamp(2rem, 4vw, var(--ib-fs-3xl)); }
h2 { font-size: clamp(1.625rem, 3vw, var(--ib-fs-2xl)); }
h3 { font-size: var(--ib-fs-xl); }
h4 { font-size: var(--ib-fs-lg); }

a { color: var(--ib-navy-800); text-decoration: none; transition: color var(--ib-dur) var(--ib-ease); }
a:hover, a:focus { color: var(--ib-accent); text-decoration: none; }

img, svg, video { max-width: 100%; height: auto; display: block; }

/* ---------- GeneratePress overrides — full-width layout ----------
   GP wraps everything in .site.grid-container with max-width + horizontal padding.
   We own the layout via .ib-container / .ib-container--wide, so we strip GP constraints
   site-wide. Each section can opt into width via its own container.
*/
.site.grid-container,
.site.grid-container.container,
#page.site {
	max-width: none !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.site-content,
#primary,
.content-area,
#content {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

.site-main { margin: 0 !important; }

body.home .inside-article,
body.home article.post,
body.single-post .inside-article,
body.single-post article.post {
	background: transparent;
	padding: 0;
	box-shadow: none;
}

/* Hero + ticker stretch to the full viewport width. */
body.home .ib-hero,
body.home .ib-ticker {
	width: 100%;
	max-width: 100%;
	position: relative;
}

/* ---------- Sticky header (logo + nav pinned to top) ---------- */
.ib-sticky-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	transition: box-shadow var(--ib-dur) var(--ib-ease);
}

.ib-sticky-header.is-stuck {
	box-shadow: 0 4px 18px rgba(14, 34, 64, 0.08);
}

/* The nav already has its own border/shadow — when stuck, let the wrapper own the shadow. */
.ib-sticky-header.is-stuck .main-navigation {
	box-shadow: none;
}

/* Compress the site header slightly when stuck to keep the sticky stack lean. */
.ib-sticky-header .site-header { transition: padding var(--ib-dur) var(--ib-ease); }
.ib-sticky-header.is-stuck .site-header { padding-top: 8px; padding-bottom: 8px; }
.ib-sticky-header.is-stuck .site-logo img,
.ib-sticky-header.is-stuck .site-branding img {
	max-height: 40px;
	transition: max-height var(--ib-dur) var(--ib-ease);
}

/* The mega panels live inside .main-navigation → already inside the sticky wrapper.
   They use position: absolute relative to .main-navigation, so they stay attached. */

/* ---------- Footer — full width ---------- */
.site-footer,
.footer-widgets,
.site-info,
.footer-widgets-container,
.inside-site-info {
	width: 100% !important;
	max-width: none !important;
}

.site-info {
	background: var(--ib-navy-900);
	color: rgba(255, 255, 255, .75);
	padding: var(--ib-sp-5) 0;
	font-family: var(--ib-font-sans);
	font-size: var(--ib-fs-sm);
	border-top: 0;
}

.site-info a { color: #fff; font-weight: 600; transition: color var(--ib-dur) var(--ib-ease); }
.site-info a:hover { color: var(--ib-accent); }

.inside-site-info {
	max-width: var(--ib-container-wide) !important;
	margin: 0 auto !important;
	padding-left: var(--ib-sp-5) !important;
	padding-right: var(--ib-sp-5) !important;
}

.copyright-bar {
	text-align: center;
}

.ib-footer-nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--ib-sp-2) var(--ib-sp-5);
	margin-bottom: var(--ib-sp-3);
	padding-bottom: var(--ib-sp-3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-family: var(--ib-font-sans);
	font-size: var(--ib-fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ib-footer-nav a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color var(--ib-dur) var(--ib-ease);
}

.ib-footer-nav a:hover { color: var(--ib-accent); }

.ib-footer-copy {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
}

/* Newsletter footer item — calls window.mjOpenPopin via [data-mj-trigger]. */
.ib-footer-nav__btn {
	background: transparent;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	letter-spacing: inherit;
	text-transform: inherit;
	transition: color var(--ib-dur) var(--ib-ease);
}

.ib-footer-nav__btn:hover,
.ib-footer-nav__btn:focus-visible {
	color: var(--ib-accent);
	outline: none;
}

.footer-widgets {
	background: var(--ib-navy-900);
	color: rgba(255, 255, 255, .82);
	padding: var(--ib-sp-7) 0 var(--ib-sp-5);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.footer-widgets-container {
	max-width: var(--ib-container-wide) !important;
	margin: 0 auto !important;
	padding-left: var(--ib-sp-5) !important;
	padding-right: var(--ib-sp-5) !important;
}

.footer-widgets .widget-title,
.footer-widgets h3,
.footer-widgets h4 {
	font-family: var(--ib-font-sans);
	font-size: var(--ib-fs-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ib-accent);
	margin: 0 0 var(--ib-sp-3);
}

.footer-widgets a { color: rgba(255, 255, 255, .85); }
.footer-widgets a:hover { color: var(--ib-accent); }

/* ---------- Header (logo placement) ---------- */
.site-logo img,
.site-branding img {
	max-height: 56px;
	width: auto;
}

/* ---------- Buttons ---------- */
.ib-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ib-sp-2);
	padding: 0.65rem 1.15rem;
	font-family: var(--ib-font-sans);
	font-weight: 600;
	font-size: var(--ib-fs-sm);
	letter-spacing: 0.02em;
	border-radius: var(--ib-radius);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all var(--ib-dur) var(--ib-ease);
}

.ib-btn--primary {
	background: var(--ib-accent);
	color: #fff;
}
.ib-btn--primary:hover { background: var(--ib-accent-dark); color: #fff; }

.ib-btn--ghost {
	background: transparent;
	color: var(--ib-navy-800);
	border-color: var(--ib-line);
}
.ib-btn--ghost:hover { background: var(--ib-navy-100); color: var(--ib-navy-900); }

.ib-btn--dark {
	background: var(--ib-navy-900);
	color: #fff;
}
.ib-btn--dark:hover { background: var(--ib-navy-800); color: #fff; }

/* ---------- Tags / pills ---------- */
.ib-tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--ib-font-sans);
	font-size: var(--ib-fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: var(--ib-navy-100);
	color: var(--ib-navy-800);
}
.ib-tag--accent { background: var(--ib-accent-soft); color: var(--ib-accent-dark); }
.ib-tag--pulse  { background: rgba(0, 181, 160, 0.12); color: #007868; }
.ib-tag--dark   { background: var(--ib-navy-900); color: #fff; }

.ib-tag.ib-tag--live::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ib-accent);
	margin-right: 6px;
	box-shadow: 0 0 0 0 rgba(230, 57, 70, .7);
	animation: ib-pulse 1.6s infinite;
}

@keyframes ib-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(230, 57, 70, .55); }
	70%  { box-shadow: 0 0 0 8px rgba(230, 57, 70, 0); }
	100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
}

/* ---------- Containers ---------- */
.ib-container {
	width: 100%;
	max-width: var(--ib-container);
	margin: 0 auto;
	padding-left: var(--ib-sp-5);
	padding-right: var(--ib-sp-5);
}

.ib-container--wide {
	max-width: var(--ib-container-wide);
}

/* ---------- Section header ---------- */
.ib-section-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--ib-sp-4);
	margin-bottom: var(--ib-sp-5);
	padding-bottom: var(--ib-sp-3);
	border-bottom: 2px solid var(--ib-navy-900);
}

.ib-section-head h2 {
	margin: 0;
	font-size: var(--ib-fs-xl);
}

.ib-section-head__more {
	font-family: var(--ib-font-sans);
	font-size: var(--ib-fs-sm);
	font-weight: 600;
	color: var(--ib-navy-800);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.ib-section-head__more:hover { color: var(--ib-accent); }