/* ==========================================================================
   Webonomics: packages.css   (home page, view 2 of 3: package menu)
   Cards (6:1 strip, why line, "What's included" dropdown, Add to inquiry)
   and the sticky selection bar.
   ========================================================================== */

.wbn-menu-inner { padding-top: 64px; padding-bottom: 96px; }
.wbn-back { background: none; border: 0; padding: 8px 0; margin-bottom: 14px; min-height: 44px; font: 600 14px var(--wbn-body); color: var(--wbn-slate); cursor: pointer; transition: color .18s ease; }
.wbn-back:hover, .wbn-back:focus-visible { color: var(--wbn-green); }
.wbn-menu-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 40px; }
.wbn-menu-head h2 { font-weight: 500; font-size: 40px; line-height: 1.15; margin-top: 12px; }
.wbn-menu-head p { max-width: 420px; color: var(--wbn-slate); }

/* --- Group jump links (chips) and group headings --- */
.wbn-groupnav { position: sticky; top: var(--wbn-header-h); z-index: 10; display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 0; margin-bottom: 8px; background: #fff; border-bottom: 1px solid var(--wbn-rule); }
.admin-bar .wbn-groupnav { top: calc(var(--wbn-header-h) + 32px); }
.wbn-groupnav a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--wbn-rule); border-radius: 30px; font-size: 14px; color: var(--wbn-ink); transition: color .18s ease, border-color .18s ease, background-color .18s ease; }
.wbn-groupnav a span { font-size: 12px; color: var(--wbn-slate); }
.wbn-groupnav a:hover, .wbn-groupnav a:focus-visible { background: var(--wbn-green); border-color: var(--wbn-green); color: #fff; }
.wbn-groupnav a:hover span, .wbn-groupnav a:focus-visible span { color: #DCE9E1; }
.wbn-group { padding-top: 44px; scroll-margin-top: calc(var(--wbn-header-h) + 70px); }
.wbn-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: 30px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 2px solid var(--wbn-green); }
.wbn-group-head h3 { font-weight: 600; font-size: 24px; }
.wbn-group-head p { color: var(--wbn-slate); font-size: 15px; max-width: 460px; text-align: right; }

/* --- Card grid --- */
.wbn-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wbn-card {
	display: flex; flex-direction: column; overflow: hidden;
	background: #fff; border: 1px solid var(--wbn-rule); border-radius: 10px;
	transition: border-color .2s ease, box-shadow .2s ease, transform .4s ease, opacity .4s ease;
}
.wbn-card:hover { border-color: #C9CFCD; box-shadow: 0 10px 30px rgba(20, 30, 40, .06); }
.wbn-card.is-in { opacity: 0; transform: translateY(14px); } /* cards slide in when the menu opens */

/* Muted 6:1 header strip */
.wbn-card-strip { aspect-ratio: 6 / 1; overflow: hidden; border-bottom: 1px solid var(--wbn-rule); }
.wbn-card-strip img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75); }

.wbn-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 22px; }
.wbn-card h4 { font-weight: 600; font-size: 20px; line-height: 1.25; margin-bottom: 8px; }
.wbn-why { font-size: 15px; color: var(--wbn-slate); }

/* "What's included" dropdown */
.wbn-toggle { align-self: flex-start; display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; padding: 6px 0; background: none; border: 0; font: 600 14px var(--wbn-body); color: var(--wbn-ink); cursor: pointer; transition: color .18s ease; }
.wbn-toggle:hover, .wbn-toggle:focus-visible { color: var(--wbn-green); }
.wbn-toggle i { display: inline-block; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; }
.wbn-card.is-open .wbn-toggle i { transform: rotate(-135deg) translate(-2px, -1px); }
.js .wbn-dropdown { max-height: 0; opacity: 0; overflow: hidden; visibility: hidden; transition: max-height .25s ease, opacity .2s ease, visibility 0s .25s; }
.js .wbn-card.is-open .wbn-dropdown { max-height: 640px; opacity: 1; visibility: visible; transition: max-height .25s ease, opacity .2s ease; }
.wbn-dropdown ul { list-style: none; margin: 4px 0; font-size: 14px; }
.wbn-dropdown li { position: relative; padding: 8px 0 8px 22px; border-top: 1px solid var(--wbn-rule); }
.wbn-dropdown li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; border-radius: 2px; background: var(--wbn-green); }

/* Price + Add to inquiry */
.wbn-card-foot { margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wbn-price { font-size: 13px; color: var(--wbn-slate); }
.wbn-price b { font: 600 17px var(--wbn-body); color: var(--wbn-ink); }
.wbn-price b.wbn-ph { color: var(--wbn-green); }
.wbn-price small { font-size: 13px; color: var(--wbn-slate); margin-left: 1px; }
.wbn-add { padding: 9px 16px; font-size: 14px; }
.wbn-add-on { display: none; }
.wbn-card.is-on { border-color: var(--wbn-green); box-shadow: inset 0 0 0 1px var(--wbn-green); }
.wbn-card.is-on .wbn-add { background: var(--wbn-green); border-color: var(--wbn-green); color: #fff; }
.wbn-card.is-on .wbn-add:hover { background: var(--wbn-green-dk); }
.wbn-card.is-on .wbn-add-on { display: inline; }
.wbn-card.is-on .wbn-add-off { display: none; }
html:not(.js) .wbn-add { display: none; } /* without JS, pick packages with the form checkboxes */

.wbn-note { font-size: 13px; color: var(--wbn-slate); margin-top: 20px; }

/* --- Sticky selection bar (only on the package menu, only with a selection) --- */
.wbn-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
	background: #fff; border-top: 2px solid var(--wbn-green); box-shadow: 0 -8px 30px rgba(20, 30, 40, .07);
	transform: translateY(110%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s;
}
.wbn-has-sel.wbn-st-packages .wbn-bar { transform: none; visibility: visible; transition: transform .3s ease; }
.wbn-bar-inner { display: flex; align-items: center; gap: 22px; height: 78px; }
.wbn-bar-n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wbn-green); color: #fff; font: 600 15px var(--wbn-body); }
.wbn-bar-label { min-width: 0; }
.wbn-bar-label b { display: block; font: 600 16px var(--wbn-body); }
.wbn-bar-label span { display: block; font-size: 13px; color: var(--wbn-slate); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wbn-bar .wbn-btn { margin-left: auto; flex: none; }
html:not(.js) .wbn-bar { display: none; }

@media (max-width: 960px) { .wbn-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
	.wbn-groupnav { flex-wrap: nowrap; overflow-x: auto; margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px; }
	.wbn-groupnav a { flex: none; }
	.wbn-group-head { flex-direction: column; gap: 6px; }
	.wbn-group-head p { text-align: left; }
	.wbn-menu-inner { padding-top: 32px; padding-bottom: 64px; }
	.wbn-menu-head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.wbn-menu-head h2 { font-size: 30px; }
	.wbn-cards { grid-template-columns: 1fr; }
	.wbn-bar-inner { height: 70px; gap: 12px; }
	.wbn-bar-label span { display: none; }
	.wbn-bar .wbn-btn { padding: 11px 14px; }
}