/* hikashop.com site styles on top of Vessel. Installed as Vessel's user.css
   by bootstrap.sh (Vessel keeps user.css across template updates); Vessel
   itself stays generic. */

/* Marketplace sidebar search: a field that reads as one on the bone
   background, with a search glyph. */
.hikashop_filter_module #filter_text_marketplace_name_1,
.hikashop_filter_main #filter_text_marketplace_name_1 {
	border: 1px solid #9aa6b2;
	border-radius: 4px;
	background: #fff url("../images/search.svg") no-repeat 10px center / 16px 16px;
	padding: 8px 10px 8px 34px;
	min-height: 40px;
}
.hikashop_filter_module #filter_text_marketplace_name_1:focus,
.hikashop_filter_main #filter_text_marketplace_name_1:focus {
	border-color: #1b2c40;
	outline: 2px solid rgba(41, 126, 186, 0.25);
}

/* ── Header account menu ─────────────────────────────────────────────
   The user icon used to lead to a page whose only offer was to log out.
   Logged-in visitors now get the pages they came for. Hover or keyboard
   focus opens it; no JavaScript. */
.vessel-header-icons .hk-account { position: relative; }
.vessel-header-icons .hk-account-trigger {
	display: inline-flex;
	align-items: center;
	color: var(--ink, #0E2A40);
	text-decoration: none;
	line-height: 1;
	font-size: 18px;
}
.vessel-header-icons .hk-account-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	z-index: 60;
	min-width: 232px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #fff;
	border: 1px solid rgba(14, 42, 64, .12);
	border-radius: 8px;
	box-shadow: 0 12px 28px rgba(14, 42, 64, .14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.vessel-header-icons .hk-account:hover .hk-account-menu,
.vessel-header-icons .hk-account:focus-within .hk-account-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* The gap between the icon and the panel would close the menu on the way
   down to it; this bridges it. */
.vessel-header-icons .hk-account-menu::before {
	content: "";
	position: absolute;
	inset: -12px 0 100% 0;
}
.vessel-header-icons .hk-account-menu a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	color: var(--ink, #0E2A40);
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: 0;
	text-decoration: none;
	white-space: nowrap;
}
.vessel-header-icons .hk-account-menu a:hover,
.vessel-header-icons .hk-account-menu a:focus { background: rgba(41, 126, 186, .09); }
.vessel-header-icons .hk-account-menu .fa-solid { width: 16px; font-size: 14px; color: #297EBA; }
.vessel-header-icons .hk-account-sep { margin-top: 6px; border-top: 1px solid rgba(14, 42, 64, .1); padding-top: 6px; }
.vessel-header-icons .hk-account-sep .fa-solid { color: #6b7280; }

/* ── Content lightbox (user.js) ──────────────────────────────────────
   Screenshots in the documentation and the blog open here instead of in
   a new tab or, worse, in place of the page you were reading. */
.hk-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	background: rgba(14, 42, 64, .88);
	backdrop-filter: blur(2px);
}
.hk-lightbox.is-open { display: flex; }
body.hk-lightbox-open { overflow: hidden; }
.hk-lightbox__figure {
	margin: 0;
	max-width: min(1200px, 92vw);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
}
.hk-lightbox__figure img {
	max-width: 100%;
	max-height: 80vh;
	width: auto;
	height: auto;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.hk-lightbox__figure figcaption {
	color: rgba(255, 255, 255, .82);
	font-family: var(--sans);
	font-size: 13px;
	text-align: center;
	max-width: 70ch;
}
.hk-lightbox__close,
.hk-lightbox__nav {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	line-height: 1;
	transition: background .15s ease;
}
.hk-lightbox__close:hover,
.hk-lightbox__nav:hover { background: rgba(255, 255, 255, .26); }
.hk-lightbox__close {
	position: absolute;
	top: 18px;
	right: 20px;
	width: 40px;
	height: 40px;
	font-size: 26px;
}
.hk-lightbox__nav { width: 44px; height: 68px; font-size: 30px; flex: 0 0 44px; }
/* A screenshot you can open is a screenshot that says so. */
.com-content-article__body img,
.hkdocs__main img { cursor: zoom-in; }
@media (max-width: 700px) {
	.hk-lightbox { padding: 12px; }
	.hk-lightbox__nav { width: 36px; height: 56px; font-size: 24px; flex: 0 0 36px; }
}

/* ── Customer account (com_users profile) ────────────────────────────
   Joomla's own profile view lands in the middle of the site looking
   like a form from another decade: bare fieldsets, definition lists
   with indented values, and the multifactor plugin adding headings two
   sizes larger than anything around them. This dresses it as the cards
   the rest of the account area uses, without an override to maintain. */
body.view-profile main {
	max-width: 860px;
	margin: 0 auto;
	padding: 40px 20px 72px;
}
/* Joomla wraps the view in a div that shrinks to its content, and hangs
   the Edit profile button off a list item, bullet and all. */
body.view-profile .com-users-profile { width: 100%; }
body.view-profile .com-users-profile ul,
body.view-profile main > ul { list-style: none; margin: 0 0 18px; padding: 0; }
body.view-profile fieldset {
	width: 100%;
	margin: 0 0 22px;
	padding: 0 0 20px;
	border: 1px solid var(--line, #D9D3C6);
	border-radius: 14px;
	background: #fff;
	min-width: 0;
}
body.view-profile fieldset > legend {
	float: none;
	width: 100%;
	margin: 0;
	padding: 17px 24px;
	border-bottom: 1px solid var(--line, #D9D3C6);
	background: var(--bone, #F5F1EA);
	border-radius: 14px 14px 0 0;
	font-family: var(--serif, Georgia, serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--ink, #0E2A40);
}
/* Label above value becomes label beside value, so the eye has one
   column to run down instead of a staircase. */
body.view-profile fieldset dl {
	display: grid;
	grid-template-columns: minmax(150px, 34%) 1fr;
	gap: 0;
	margin: 0;
	padding: 6px 24px 0;
}
body.view-profile fieldset dt {
	padding: 11px 16px 11px 0;
	color: var(--mute, #6b7280);
	font-size: 14px;
	border-bottom: 1px solid rgba(14, 42, 64, .07);
}
body.view-profile fieldset dd {
	margin: 0;
	padding: 11px 0;
	color: var(--ink, #0E2A40);
	font-size: 15px;
	border-bottom: 1px solid rgba(14, 42, 64, .07);
}
body.view-profile fieldset dl > dt:last-of-type,
body.view-profile fieldset dl > dd:last-of-type { border-bottom: 0; }

/* The multifactor section arrives with its own heading scale; bring it
   back to the size of a card title. */
body.view-profile main h2,
body.view-profile main h3 {
	font-family: var(--serif, Georgia, serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--ink, #0E2A40);
	margin: 26px 0 12px;
}
body.view-profile main h2 + p,
body.view-profile main h3 + p { color: var(--mute, #6b7280); font-size: 14px; }
body.view-profile .btn,
body.view-profile a.btn {
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 14px;
	font-weight: 600;
}

/* ── Blog listing ────────────────────────────────────────────────────
   The date used to sit inside a grey strip of metadata, between the
   author's name and a hit counter. It reads as a dateline now: above
   the title, small, and the only thing in the row. */
.com-content-category-blog__item .article-info,
.com-content-article__info {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--mute, #8A857C);
	font-family: var(--sans);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.com-content-category-blog__item .article-info dt.article-info-term,
.com-content-article__info dt.article-info-term { display: none; }
.com-content-category-blog__item .article-info dd,
.com-content-article__info dd { display: inline; margin: 0; }
.com-content-category-blog__item .article-info dd + dd::before,
.com-content-article__info dd + dd::before { content: " · "; }
/* Separate the dateline from the article it dates: a hairline under it,
   and air below, so the eye stops between them.
   (Joomla puts the word "Published:" inside the <time> element's text, so
   removing that label needs a layout override, not CSS.) */
.com-content-category-blog__item .article-info {
	padding: 0 0 10px;
	border-bottom: 1px solid rgba(14, 42, 64, .1);
}
.com-content-category-blog__item .item-content > p:first-of-type { margin-top: 14px; }
.com-content-category-blog__item { padding-bottom: 22px; }
.com-content-category-blog__item > .page-header { margin-bottom: 6px; }
.com-content-category-blog__item > .page-header h2 { margin-bottom: 2px; }

/* ── Marketplace: what the listing knows about a plugin ──────────────
   Type, developer, compatibility and last update come from HikaShop
   custom fields the live site has filled in for years. */
.hkrb-facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 14px;
	margin: 18px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--line, #D9D3C6);
	font-size: 13px;
}
.hkrb-facts dt { color: var(--mute, #8A857C); }
.hkrb-facts dd { margin: 0; color: var(--ink, #0E2A40); }
.hkrb-facts__doc { margin: 12px 0 0; font-size: 13px; }

/* ── Checkout ────────────────────────────────────────────────────────
   The payment and shipping logos of a method sit on one line: the
   template's image reset makes every <img> a block, which stacked them. */
.hikashop_checkout_payment_images img,
.hikashop_checkout_shipping_images img {
	display: inline-block;
	vertical-align: middle;
	margin: 0 6px 6px 0;
}
/* PayPal's card form: its billing address fields are white like the
   card fields PayPal draws itself, not see-through on the grey panel. */
#my-sample-form .form-control,
#my-sample-form select {
	background-color: #fff;
}
/* PayPal's buttons (z-index 100) came out over the sticky header and the
   cart drawer inside it. In Vessel after 1.0.10; drop with the rest. */
.vessel-header { z-index: 500; }