/*
The Boss Love Theme — Style Tools (calculators).
Loaded on any page using the "Style Tool" template, or that shows the tools
promo banner/sidebar card.
*/

/* ============ Tool page shell ============ */
.bl-tool-wrap{ padding-bottom:70px; }
.bl-tool-page-head{ max-width:760px; margin:10px auto 34px; text-align:center; }
.bl-tool-brand{ font-size:var(--bl-fs-xs); font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--bl-theme-text,#D4145A); }
.bl-tool-page-title{ font-size:clamp(1.8rem,3vw + 1rem,2.9rem); line-height:1.2; margin:10px 0 8px; }
.bl-tool-page-sub{ color:var(--bl-soft); font-size:var(--bl-fs-sm); max-width:640px; margin:0 auto; }

/* ============ The calculator card ============ */
.bl-tool{ max-width:640px; margin:0 auto; background:var(--bl-surface); border:1px solid var(--bl-line); border-radius:20px; padding:34px; box-shadow:var(--bl-shadow-sm); }
@media (max-width:600px){ .bl-tool{ padding:22px 18px; border-radius:16px; } }

.bl-tool-unit-toggle{ display:inline-flex; background:var(--bl-soft-bg); border-radius:30px; padding:4px; margin-bottom:22px; }
.bl-tool-unit-toggle button{ border:0; background:none; padding:8px 18px; border-radius:26px; font-family:var(--bl-font-body); font-size:0.78rem; font-weight:700; color:var(--bl-soft); cursor:pointer; transition:var(--bl-transition); }
.bl-tool-unit-toggle button.is-active{ background:var(--bl-dark); color:#fff; }

.bl-tool-fields{ display:grid; gap:16px; margin-bottom:6px; }
.bl-tool-fields-1{ grid-template-columns:minmax(0,1fr); }
.bl-tool-fields-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.bl-tool-fields-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:480px){ .bl-tool-fields-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } .bl-tool-fields-3 label:last-child{ grid-column:1 / -1; } }

.bl-tool-fields label{ display:flex; flex-direction:column; gap:6px; font-size:0.78rem; font-weight:700; letter-spacing:.03em; color:var(--bl-dark); min-width:0; }
.bl-tool-fields input, .bl-tool-fields select{
	font-family:var(--bl-font-body); font-size:1rem; font-weight:500; color:var(--bl-dark);
	border:1.5px solid var(--bl-line); border-radius:12px; padding:12px 14px; background:#fff;
	transition:border-color .2s, box-shadow .2s; width:100%; min-width:0; box-sizing:border-box;
}
.bl-tool-fields input:focus, .bl-tool-fields select:focus{ outline:none; border-color:var(--bl-theme); box-shadow:0 0 0 3px color-mix(in srgb, var(--bl-theme) 15%, transparent); }
.bl-tool-two-up{ display:flex; gap:8px; min-width:0; }
.bl-tool-two-up input{ width:100%; min-width:0; }

.bl-tool-hint{ font-size:0.76rem; color:var(--bl-soft); line-height:1.5; margin:12px 0 22px; }
.bl-tool-submit{ width:100%; justify-content:center; padding:15px; font-size:0.85rem; border-radius:14px; }

/* ============ Results ============ */
.bl-tool-result{ margin-top:30px; padding-top:28px; border-top:1.5px dashed var(--bl-line); text-align:center; animation:bl-fade .4s ease-out; }
.bl-tool-result-icon{ font-size:2.4rem; margin-bottom:6px; }
.bl-tool-result-badge{
	display:inline-grid; place-items:center; width:74px; height:74px; margin:0 auto 14px; border-radius:50%;
	background:color-mix(in srgb, var(--bl-theme) 10%, #fff); color:var(--bl-theme); font-family:var(--bl-font-display); font-weight:700; font-size:1.15rem;
}
.bl-tool-result-title{ font-family:var(--bl-font-display); font-size:1.5rem; font-weight:700; color:var(--bl-dark); margin:0 0 8px; }
.bl-tool-result-desc{ color:var(--bl-ink); font-size:0.92rem; line-height:1.6; max-width:480px; margin:0 auto 14px; }
.bl-tool-result-stats{ font-size:0.76rem; color:var(--bl-soft); margin-bottom:16px; }
.bl-tool-fine-print{ font-size:0.74rem; color:var(--bl-soft); font-style:italic; margin-top:10px; }

.bl-tool-result-tips{ text-align:left; max-width:440px; margin:0 auto 22px; }
.bl-tool-result-tips ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.bl-tool-result-tips li{ position:relative; padding-left:26px; font-size:0.86rem; color:var(--bl-ink); line-height:1.5; }
.bl-tool-result-tips li::before{ content:"✓"; position:absolute; left:0; top:0; color:var(--bl-theme); font-weight:700; }

.bl-tool-size-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:8px; }
.bl-tool-size-cell{ min-width:74px; padding:14px 10px; border:1.5px solid var(--bl-line); border-radius:12px; background:#fff; }
.bl-tool-size-cell .k{ display:block; font-size:0.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--bl-soft); margin-bottom:4px; }
.bl-tool-size-cell .v{ display:block; font-family:var(--bl-font-display); font-size:1.3rem; font-weight:700; color:var(--bl-theme); }

.bl-tool-whr-number{ font-family:var(--bl-font-display); font-size:3rem; font-weight:700; color:var(--bl-theme); line-height:1; margin-bottom:6px; }

.bl-tool-result-cta{ margin-top:6px; }

/* ============ Related tools strip (bottom of tool page) ============ */
.bl-tool-more{ max-width:860px; margin:56px auto 0; }
.bl-tool-more h3{ text-align:center; font-family:var(--bl-font-display); font-size:1.3rem; margin-bottom:20px; }
.bl-tool-more-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.bl-tool-more-card{
	display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:22px 14px;
	background:var(--bl-surface); border:1.5px solid var(--bl-line); border-radius:15px; transition:var(--bl-transition);
}
.bl-tool-more-card:hover{ border-color:var(--bl-theme); transform:translateY(-3px); box-shadow:var(--bl-shadow-sm); }
.bl-tool-more-card span{ font-size:0.84rem; font-weight:600; color:var(--bl-dark); }

/* ============ Homepage / archive promo banner ============ */
.bl-tools-banner{ margin:34px 0; }
.bl-tools-banner-link{
	position:relative; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
	gap:26px; align-items:center; overflow:hidden; text-decoration:none;
	background:linear-gradient(135deg, var(--bl-dark) 0%, #3a1030 100%); border-radius:22px; padding:28px 32px;
}
.bl-tools-banner-icons{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; background:rgba(255,255,255,.08); border-radius:16px; padding:12px; }
.bl-tools-banner-icons span{ display:flex; align-items:center; justify-content:center; color:#fff; }
.bl-tools-banner-body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.bl-tools-banner-eyebrow{ font-size:0.68rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--bl-theme); }
.bl-tools-banner-title{ font-family:var(--bl-font-display); font-size:1.4rem; font-weight:700; color:#fff; line-height:1.25; }
.bl-tools-banner-text{ font-size:0.82rem; color:rgba(255,255,255,.75); max-width:420px; }
.bl-tools-banner-cta{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.bl-tools-banner-btn{
	display:inline-flex; align-items:center; gap:6px; white-space:nowrap; font-size:0.78rem; font-weight:700; letter-spacing:.03em;
	color:#fff; background:var(--bl-theme); padding:12px 22px; border-radius:30px; transition:var(--bl-transition);
}
.bl-tools-banner-link:hover .bl-tools-banner-btn{ background:#fff; color:var(--bl-theme); }
@media (max-width:900px){
	.bl-tools-banner-link{ grid-template-columns:1fr; text-align:center; padding:26px 22px; }
	.bl-tools-banner-icons{ justify-self:center; }
	.bl-tools-banner-cta{ align-items:center; }
	.bl-tools-banner-text{ max-width:none; }
}

/* ============ Sidebar widget ============ */
.bl-w-tools .bl-tools-mini-list{ list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:2px; }
.bl-w-tools .bl-tools-mini-list a{
	display:flex; align-items:center; gap:10px; padding:9px 4px; font-size:0.85rem; font-weight:600; color:var(--bl-dark);
	border-bottom:1px solid var(--bl-line); transition:var(--bl-transition);
}
.bl-w-tools .bl-tools-mini-list li:last-child a{ border-bottom:0; }
.bl-w-tools .bl-tools-mini-list a:hover{ color:var(--bl-theme); padding-left:8px; }
.bl-tools-mini-icon{ display:inline-flex; flex:0 0 auto; }
.bl-tools-mini-all{ display:block; text-align:center; font-size:0.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--bl-theme); }

@media (prefers-reduced-motion: reduce){ .bl-tool-result{ animation:none; } }

/* ============ Measurement help tooltips ============ */
.bl-tool-help{ display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:0; margin-top:2px; font-size:0.74rem; font-weight:700; color:var(--bl-theme-text,#D4145A); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.bl-tool-help .q{ display:inline-grid; place-items:center; width:15px; height:15px; border-radius:50%; background:var(--bl-theme-text,#D4145A); color:#fff; font-size:0.62rem; font-weight:700; text-decoration:none; flex:0 0 auto; }
.bl-tool-help-box{
	display:none; margin-top:8px; padding:12px 14px; background:var(--bl-soft-bg); border:1px solid var(--bl-line); border-left:3px solid var(--bl-theme); border-radius:10px;
	font-size:0.78rem; line-height:1.55; color:var(--bl-ink); text-align:left;
}
.bl-tool-help-box.is-open{ display:flex; gap:14px; align-items:center; animation:bl-fade .25s ease-out; }
.bl-tool-diagram{ flex:0 0 auto; background:#fff; border-radius:8px; }
.bl-tool-help-box p{ margin:0; flex:1 1 auto; min-width:0; }
@media (max-width:480px){ .bl-tool-help-box.is-open{ flex-direction:column; } .bl-tool-diagram{ align-self:center; } }
.bl-tool-field-group{ display:flex; flex-direction:column; }

/* ============ Educational article content below a tool ============ */
.bl-tool-article{ max-width:720px; margin:56px auto 0; }
.bl-tool-article h2{ font-family:var(--bl-font-display); font-size:1.5rem; margin:40px 0 14px; }
.bl-tool-article h2:first-child{ margin-top:0; }
.bl-tool-article h3{ font-family:var(--bl-font-display); font-size:1.15rem; margin:26px 0 10px; }
.bl-tool-article p{ color:var(--bl-ink); line-height:1.75; margin:0 0 16px; }
.bl-tool-article ul, .bl-tool-article ol{ color:var(--bl-ink); line-height:1.75; margin:0 0 16px; padding-left:22px; }
.bl-tool-article li{ margin-bottom:6px; }
.bl-tool-article strong{ color:var(--bl-dark); }
.bl-tool-shape-table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:0.86rem; }
.bl-tool-shape-table th, .bl-tool-shape-table td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--bl-line); }
.bl-tool-shape-table th{ font-size:0.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--bl-soft); }

/* ============ FAQ accordion ============ */
.bl-tool-faq{ max-width:720px; margin:50px auto 0; }
.bl-tool-faq h2{ font-family:var(--bl-font-display); font-size:1.5rem; text-align:center; margin-bottom:20px; }
.bl-tool-faq-item{ border-bottom:1px solid var(--bl-line); }
.bl-tool-faq-q{
	width:100%; text-align:left; background:none; border:0; padding:16px 28px 16px 0; position:relative;
	font-family:var(--bl-font-body); font-size:0.94rem; font-weight:700; color:var(--bl-dark); cursor:pointer;
}
.bl-tool-faq-q::after{ content:"+"; position:absolute; right:0; top:14px; font-size:1.3rem; color:var(--bl-theme); transition:transform .25s; }
.bl-tool-faq-item.is-open .bl-tool-faq-q::after{ transform:rotate(45deg); }
.bl-tool-faq-a{ display:none; padding:0 28px 18px 0; color:var(--bl-ink); font-size:0.88rem; line-height:1.65; }
.bl-tool-faq-item.is-open .bl-tool-faq-a{ display:block; animation:bl-fade .25s ease-out; }