/* BioQ Blocks: styles for the custom blocks (front end and editor). */
:root {
	--bq-navy: #232e64;
	--bq-navy-deep: #161d45;
	--bq-navy-dark: #121838;
	--bq-green: #68b044;
	--bq-green-dark: #3e7a22;
	--bq-green-deep: #3b8223;
	--bq-green-light: #8fd066;
	--bq-mint: #eef6e9;
	--bq-ice: #eef3fa;
	--bq-mist: #f4f7fb;
	--bq-ink: #141b3f;
	--bq-text: #464d6b;
	--bq-muted: #5f6680;
	--bq-line: #e3e8f0;
	--bq-head: "Poppins", system-ui, sans-serif;
	--bq-body: "Inter", system-ui, sans-serif;
}

.bq-container { width: 100%; max-width: 1288px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }

/* Buttons used inside block markup */
.bq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border-radius: 999px; font-family: var(--bq-head); font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.bq-btn:hover { transform: translateY(-1px); }
.bq-btn:focus-visible { outline: 3px solid var(--bq-green-light); outline-offset: 2px; }
.bq-btn--green { background: var(--bq-green); color: var(--bq-ink); }
.bq-btn--green:hover { background: #7bc255; color: var(--bq-ink); }
.bq-btn--navy { background: var(--bq-navy); color: #fff; }
.bq-btn--navy:hover { background: #2e3b7d; color: #fff; }
.bq-btn--ghost { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.bq-btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; }

.bq-chip { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.bq-chip--green { background: var(--bq-mint); color: var(--bq-green-dark); }

/* ---------- Icon ---------- */
.bq-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border-radius: 999px; border: 1px solid transparent; box-sizing: border-box; }
.bq-icon svg { display: block; }
.bq-icon--sm { width: 48px; height: 48px; }
.bq-icon--md { width: 60px; height: 60px; }
.bq-icon--lg { width: 72px; height: 72px; }
.bq-icon--navy { background: var(--bq-ice); border-color: #dce4f2; color: var(--bq-navy); }
.bq-icon--green { background: var(--bq-mint); border-color: #d5e9c8; color: var(--bq-green-dark); }
.bq-icon--dark { background: rgba(104,176,68,.12); border-color: rgba(143,208,102,.38); color: var(--bq-green-light); }
.bq-icon--solid-green { background: var(--bq-green); color: var(--bq-ink); }
.bq-icon--solid-navy { background: var(--bq-navy); color: var(--bq-green-light); }
.bq-icon--white { background: #fff; border-color: #dce4f2; color: var(--bq-navy); }
.wp-block-bioq-icon { margin-bottom: 18px; }

/* ---------- Page banner ---------- */
.bq-page-hero { position: relative; overflow: hidden; background: var(--bq-navy-deep); color: #fff; margin-top: 0 !important; margin-bottom: 0 !important; }
.bq-page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bq-page-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,29,69,.95) 0%, rgba(22,29,69,.82) 50%, rgba(22,29,69,.55) 100%); }
.bq-page-hero__inner { position: relative; padding-top: 88px; padding-bottom: 96px; }
.bq-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 14px; color: rgba(255,255,255,.8); }
.bq-crumbs a { color: rgba(255,255,255,.86); text-decoration: none; }
.bq-crumbs a:hover { color: var(--bq-green-light); }
.bq-crumbs svg { color: var(--bq-green-light); }
.bq-crumbs span { color: #fff; }
.bq-page-hero__title { margin: 18px 0 0; font-family: var(--bq-head); font-weight: 600; font-size: clamp(34px, 4vw, 52px); line-height: 1.15; color: #fff; }
.bq-bar { display: block; width: 64px; height: 4px; border-radius: 4px; background: var(--bq-green); margin-top: 22px; }

/* ---------- Hero slider ---------- */
.bq-hero { position: relative; overflow: hidden; background: var(--bq-navy-deep); color: #fff; margin-top: 0 !important; margin-bottom: 0 !important; }
.bq-hero__media { position: absolute; inset: 0; }
.bq-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.bq-hero__img.is-active { opacity: 1; }
.bq-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,29,69,.94) 0%, rgba(22,29,69,.78) 40%, rgba(22,29,69,.25) 75%, rgba(22,29,69,.1) 100%); }
.bq-hero__inner { position: relative; padding-top: 136px; padding-bottom: 196px; }
.bq-hero__copy { max-width: 720px; }
.bq-hero__count { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; font-family: var(--bq-head); font-size: 14px; font-weight: 500; letter-spacing: .08em; color: var(--bq-green-light); }
.bq-hero__line { display: block; width: 36px; height: 2px; background: var(--bq-green); }
.bq-hero__slide[hidden] { display: none; }
.bq-hero__slide.is-active { animation: bqFade .6s ease; }
@keyframes bqFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bq-hero .bq-hero__title { margin: 0; max-width: 640px; font-family: var(--bq-head); font-weight: 600; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.14; letter-spacing: -.01em; color: #fff; }
.bq-hero__text { margin: 22px 0 0; max-width: 560px; font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.86); }
.bq-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.bq-hero__controls { display: flex; align-items: center; gap: 18px; margin-top: 56px; }
.bq-hero__arrow { width: 46px; height: 46px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.bq-hero__arrow:hover { background: rgba(255,255,255,.2); }
.bq-hero__dots { display: flex; gap: 8px; align-items: center; }
.bq-hero__dot { height: 6px; width: 12px; border: 0; padding: 0; border-radius: 999px; background: rgba(255,255,255,.4); cursor: pointer; transition: width .3s ease, background-color .3s ease; }
.bq-hero__dot.is-active { width: 36px; background: var(--bq-green); }
@media (max-width: 781px) {
	.bq-hero__inner { padding-top: 88px; padding-bottom: 150px; }
	.bq-hero__text { font-size: 17px; }
	.bq-hero__controls { margin-top: 36px; }
	.bq-hero__shade { background: linear-gradient(180deg, rgba(22,29,69,.9) 0%, rgba(22,29,69,.82) 100%); }
}
@media (prefers-reduced-motion: reduce) { .bq-hero__img, .bq-hero__slide.is-active { transition: none; animation: none; } }

/* ---------- Catalogue browser ---------- */
.bq-cat { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.bq-cat__list { flex: 1 1 300px; max-width: 380px; min-width: 0; background: #fff; border: 1px solid var(--bq-line); border-radius: 22px; padding: 10px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 12px 32px rgba(35,46,100,.06); position: sticky; top: 104px; }
.bq-cat__tab { width: 100%; min-height: 64px; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border: 0; border-radius: 14px; background: transparent; cursor: pointer; text-align: left; font: inherit; color: var(--bq-navy); }
.bq-cat__tab:hover { background: var(--bq-mist); }
.bq-cat__tab:focus-visible { outline: 3px solid var(--bq-green); outline-offset: 1px; }
.bq-cat__tab-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 999px; background: var(--bq-ice); color: var(--bq-navy); display: flex; align-items: center; justify-content: center; }
.bq-cat__tab-text { flex: 1 1 auto; min-width: 0; }
.bq-cat__tab-name { display: block; font-family: var(--bq-head); font-weight: 600; font-size: 16px; }
.bq-cat__tab-count { display: block; font-size: 13px; color: var(--bq-muted); }
.bq-cat__tab-chev { color: #b4bccd; flex: 0 0 auto; }
.bq-cat__tab.is-active { background: var(--bq-navy); color: #fff; }
.bq-cat__tab.is-active .bq-cat__tab-icon { background: var(--bq-green); color: var(--bq-ink); }
.bq-cat__tab.is-active .bq-cat__tab-count { color: rgba(255,255,255,.75); }
.bq-cat__tab.is-active .bq-cat__tab-chev { color: var(--bq-green-light); }
.bq-cat__panels { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.bq-cat__panel { background: #fff; border: 1px solid var(--bq-line); border-radius: 24px; padding: 36px; box-shadow: 0 12px 32px rgba(35,46,100,.06); }
.bq-cat.is-ready .bq-cat__panel:not(.is-active) { display: none; }
.bq-cat__panel:focus-visible { outline: 3px solid var(--bq-green); outline-offset: 2px; }
.bq-cat__panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid #eef1f6; }
.bq-cat__panel-title { margin: 0; font-family: var(--bq-head); font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--bq-navy); }
.bq-cat__brands { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.bq-cat__brand { border: 1.5px solid var(--bq-line); border-radius: 18px; background: #fff; padding: 18px; display: flex; flex-direction: column; gap: 14px; transition: border-color .15s ease, background-color .15s ease; }
.bq-cat__brand.is-open { border-color: var(--bq-green); background: #f7fbf4; }
.bq-cat__logo { height: 84px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 6px; }
.bq-cat__logo img { max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.bq-cat__brand-name { font-family: var(--bq-head); font-weight: 600; font-size: 21px; color: var(--bq-navy); text-align: center; line-height: 1.25; }
.bq-cat__btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-family: var(--bq-head); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; padding: 0 14px; border: 1.5px solid transparent; }
.bq-cat__btn--solid { background: var(--bq-navy); color: #fff; }
.bq-cat__btn--solid:hover { background: #2e3b7d; color: #fff; }
.bq-cat__btn--toggle { background: #fff; color: var(--bq-navy); border-color: var(--bq-navy); }
.bq-cat__btn--toggle svg { transition: transform .2s ease; }
.bq-cat__btn--toggle[aria-expanded="true"] { background: var(--bq-navy); color: #fff; }
.bq-cat__btn--toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.bq-cat__btn--soft { background: var(--bq-ice); color: var(--bq-navy); }
.bq-cat__btn--soft:hover { background: #dfe8f6; color: var(--bq-navy); }
.bq-cat__sub { margin-top: 20px; border-radius: 18px; background: var(--bq-mist); padding: 26px 28px; }
.bq-cat__sub[hidden] { display: none; }
.bq-cat__sub-title { margin: 0 0 16px; font-family: var(--bq-head); font-weight: 600; font-size: 17px; color: var(--bq-navy); }
.bq-cat__files { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.bq-cat__file { min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--bq-line); color: var(--bq-navy); text-decoration: none; font-weight: 600; font-size: 15px; transition: transform .2s ease, box-shadow .2s ease; }
a.bq-cat__file:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(35,46,100,.1); color: var(--bq-navy); }
.bq-cat__file-icon { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 999px; background: var(--bq-mint); color: var(--bq-green-dark); display: flex; align-items: center; justify-content: center; }
.bq-cat__file-name { flex: 1 1 auto; }
.bq-cat__file-ext { color: var(--bq-muted); flex: 0 0 auto; }
.bq-cat__range { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.bq-cat__range li { min-height: 72px; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; border: 1px solid var(--bq-line); background: #fff; font-family: var(--bq-head); font-weight: 600; font-size: 16px; color: var(--bq-navy); }
.bq-cat__quote { margin-top: 28px; }
@media (max-width: 899px) {
	.bq-cat__list { max-width: none; position: static; }
	.bq-cat__panel { padding: 24px 20px; }
}

/* ---------- Enquiry form ---------- */
.bq-form { background: #fff; border: 1px solid var(--bq-line); border-radius: 24px; padding: 40px; box-shadow: 0 24px 56px rgba(35,46,100,.12); box-sizing: border-box; }
.bq-form__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.bq-form__title { margin: 0; font-family: var(--bq-head); font-weight: 600; font-size: 24px; letter-spacing: .04em; color: var(--bq-navy); }
.bq-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bq-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bq-field--full { grid-column: 1 / -1; }
.bq-field label { font-size: 13.5px; font-weight: 500; color: #3b4262; }
.bq-field input, .bq-field select, .bq-field textarea { width: 100%; box-sizing: border-box; min-height: 50px; border: 1px solid #d5dce7; border-radius: 12px; padding: 0 16px; font: inherit; font-size: 15px; background: #f7f9fc; color: #1b2142; }
.bq-field textarea { padding: 14px 16px; resize: vertical; min-height: 120px; }
.bq-field input:focus, .bq-field select:focus, .bq-field textarea:focus { outline: 2px solid var(--bq-green); outline-offset: 1px; border-color: var(--bq-green); background: #fff; }
.bq-form__submit { width: 100%; margin-top: 22px; border: 0; }
.bq-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.bq-form__notice { margin: 0 0 18px; padding: 14px 18px; border-radius: 12px; font-size: 15px; line-height: 1.5; }
.bq-form__notice--ok { background: var(--bq-mint); color: #2d5c18; }
.bq-form__notice--err { background: #fde8e8; color: #9b1c1c; }
@media (max-width: 600px) {
	.bq-form { padding: 26px 20px; }
	.bq-form__grid { grid-template-columns: 1fr; }
}

/* ---------- Editor helpers ---------- */
.bq-ed-cat { border: 1px dashed #b4bccd; border-radius: 16px; padding: 16px; }
.bq-ed-cat__hint { margin: 0 0 12px; font-size: 13px; color: var(--bq-muted); }
.bq-ed-catcat { border: 1px solid var(--bq-line); border-radius: 14px; padding: 14px; margin: 0 0 12px; background: #fff; }
.bq-ed-catcat__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bq-ed-catcat__head h3 { margin: 0; font-size: 20px; color: var(--bq-navy); }
.bq-ed-brand { border: 1px solid var(--bq-line); border-radius: 12px; padding: 12px; background: var(--bq-mist); margin: 6px 0; }
.bq-ed-brand__logo { max-height: 48px; width: auto; display: block; margin-bottom: 6px; }
.bq-ed-brand__name { margin: 0; font-weight: 600; color: var(--bq-navy); }
.bq-ed-brand__url { margin: 4px 0 0; font-size: 12px; color: var(--bq-muted); word-break: break-all; }
.bq-ed-file { padding: 6px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--bq-line); margin: 4px 0; font-size: 14px; }
.bq-ed-file.is-plain { border-style: dashed; }
.bq-ed-label { margin: 8px 0 6px; font-weight: 600; }