/*
 * Hire Pross — component styles.
 * Header, mega-menu, hero, homepage sections, cards, footer, dashboards.
 * Uses the design tokens defined in style.css.
 */

/* ============================ HEADER ============================ */
.hp-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--hp-paper);
	border-bottom: 1px solid var(--hp-line);
	backdrop-filter: saturate(1.2) blur(6px);
}
.hp-header__inner {
	display: flex;
	align-items: center;
	gap: var(--hp-sp-5);
	height: var(--hp-header-h);
}
.hp-header__brand { display: flex; align-items: center; gap: var(--hp-sp-3); }

.hp-logo { display: inline-flex; align-items: center; gap: var(--hp-sp-2); font-family: var(--hp-font-display); font-weight: 700; font-size: 1.25rem; color: var(--hp-ink); }
.hp-logo:hover { color: var(--hp-spruce); }
.hp-logo__mark { color: var(--hp-amber); font-size: 1.4rem; }
.hp-logo img { max-height: 40px; width: auto; }

.hp-nav { flex: 1; }
.hp-nav__list { display: flex; align-items: center; gap: var(--hp-sp-2); list-style: none; margin: 0; padding: 0; }
.hp-nav__link {
	display: inline-flex; align-items: center; gap: 4px;
	font-family: var(--hp-font-display); font-weight: 500; font-size: var(--hp-fs-sm);
	color: var(--hp-ink); padding: 0.6em 0.85em; border-radius: var(--hp-radius);
	background: none; border: 0; cursor: pointer; position: relative;
}
.hp-nav__link:hover { background: var(--hp-mist); color: var(--hp-spruce); }
.hp-nav__caret { font-size: 0.7em; opacity: 0.7; }

.hp-header__actions { display: flex; align-items: center; gap: var(--hp-sp-3); }
.hp-header__search-btn { background: none; border: 0; font-size: 1.1rem; cursor: pointer; padding: 0.4em; border-radius: var(--hp-radius); }
.hp-header__search-btn:hover { background: var(--hp-mist); }
.hp-header__login { font-family: var(--hp-font-display); font-weight: 500; font-size: var(--hp-fs-sm); color: var(--hp-ink); }

/* Search panel */
.hp-header__search { border-top: 1px solid var(--hp-line); padding: var(--hp-sp-4) 0; background: var(--hp-cloud); }
.hp-search-form { display: flex; gap: var(--hp-sp-3); }
.hp-search-form__field { flex: 1; }

/* Burger (mobile) */
.hp-burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; cursor: pointer; padding: 6px; }
.hp-burger span { width: 22px; height: 2px; background: var(--hp-ink); border-radius: 2px; transition: transform var(--hp-dur) var(--hp-ease), opacity var(--hp-dur); }
.hp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================ MEGA MENU ============================ */
.hp-nav__item--mega { position: static; }
/* Invisible bridge: fills the gap between the button and the drop panel so the
   pointer never crosses "dead space" and trips mouseleave. Only active while the
   menu is open (aria-expanded on the button). */
.hp-nav__item--mega > button[aria-expanded="true"]::after {
	content: "";
	position: absolute;
	left: 0; right: 0;
	top: 100%;
	height: 24px;
}
.hp-nav__mega-panel {
	position: absolute;
	left: 0; right: 0;
	top: var(--hp-header-h);
	background: var(--hp-cloud);
	border-top: 1px solid var(--hp-line);
	border-bottom: 1px solid var(--hp-line);
	box-shadow: var(--hp-shadow-lg);
	padding: var(--hp-sp-6) 0 var(--hp-sp-5);
	animation: hp-fade-down var(--hp-dur) var(--hp-ease);
}
.hp-nav__mega-panel[hidden] { display: none; }
@keyframes hp-fade-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.hp-mega { max-width: var(--hp-container-wide); margin-inline: auto; padding-inline: var(--hp-sp-5); }
.hp-mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hp-sp-4) var(--hp-sp-6); }
.hp-mega__col { list-style: none; margin: 0; padding: 0; }
.hp-mega__link { display: flex; align-items: center; gap: var(--hp-sp-3); padding: 0.5em 0.6em; border-radius: var(--hp-radius); color: var(--hp-ink); }
.hp-mega__link:hover { background: var(--hp-mist); }
.hp-mega__icon { font-size: 1.15rem; width: 1.6em; text-align: center; }
.hp-mega__name { flex: 1; font-weight: 500; font-size: var(--hp-fs-sm); }
.hp-mega__count { font-family: var(--hp-font-mono); font-size: var(--hp-fs-xs); color: var(--hp-slate); background: var(--hp-mist); padding: 2px 7px; border-radius: var(--hp-radius-pill); }
.hp-mega__foot { max-width: var(--hp-container-wide); margin: var(--hp-sp-5) auto 0; padding-inline: var(--hp-sp-5); }

/* ============================ HERO ============================ */
.hp-hero { background: linear-gradient(180deg, var(--hp-paper), #eef1ea); padding-block: var(--hp-sp-9) var(--hp-sp-8); overflow: hidden; }
.hp-hero__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--hp-sp-8); align-items: center; }
.hp-hero__title { font-size: var(--hp-fs-3xl); margin-bottom: var(--hp-sp-4); }
.hp-hero__subtitle { font-size: var(--hp-fs-md); color: var(--hp-slate); max-width: 52ch; margin-bottom: var(--hp-sp-5); }

.hp-hero__search { background: var(--hp-cloud); border: 1px solid var(--hp-mist); border-radius: var(--hp-radius-lg); padding: var(--hp-sp-3); box-shadow: var(--hp-shadow); }
.hp-hero__search-row { display: grid; grid-template-columns: 1.3fr 1fr auto; gap: var(--hp-sp-2); }
.hp-hero__search-field { position: relative; }
.hp-hero__search-field .hp-input { padding-left: 2.6em; }
.hp-hero__search-icon { position: absolute; left: 0.85em; top: 50%; transform: translateY(-50%); opacity: 0.6; }
.hp-hero__trustline { display: flex; align-items: center; gap: var(--hp-sp-3); flex-wrap: wrap; margin-top: var(--hp-sp-4); }

.hp-hero__visual { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; }

/* The frame: a fixed-aspect card that always holds the hero media, whether a
   CMS image is set or the branded fallback. Float cards overlay on top of it. */
.hp-hero__frame {
	position: relative;
	width: 100%;
	max-width: 440px;
	aspect-ratio: 4 / 5;
	border-radius: var(--hp-radius-lg);
	background: var(--hp-cloud);
	border: 1px solid var(--hp-mist);
	box-shadow: var(--hp-shadow-lg);
	padding: 10px;
}
.hp-hero__frame-media {
	position: relative;
	width: 100%; height: 100%;
	border-radius: calc(var(--hp-radius-lg) - 4px);
	overflow: hidden;
	background: linear-gradient(150deg, var(--hp-spruce) 0%, #14201c 100%);
}
.hp-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-hero__frame-fallback {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	background:
		radial-gradient(120% 120% at 20% 15%, rgba(244,161,31,0.20), transparent 55%),
		linear-gradient(150deg, var(--hp-spruce) 0%, #14201c 100%);
}
.hp-hero__frame-mark { font-size: 4.5rem; color: var(--hp-amber); opacity: 0.85; }

.hp-hero__floatcard {
	position: absolute; z-index: 2; background: var(--hp-cloud); border: 1px solid var(--hp-mist);
	border-radius: var(--hp-radius-lg); box-shadow: var(--hp-shadow-lg);
	padding: var(--hp-sp-4); display: flex; flex-direction: column; gap: var(--hp-sp-2);
	min-width: 200px;
}
.hp-hero__floatcard--1 { top: 26px; right: -28px; animation: hp-float 6s ease-in-out infinite; }
.hp-hero__floatcard--2 { bottom: 34px; left: -28px; animation: hp-float 6s ease-in-out infinite 1.5s; }
.hp-hero__floatcard strong { font-family: var(--hp-font-display); font-size: var(--hp-fs-lg); }
@keyframes hp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ============================ SECTION HEADS ============================ */
.hp-section-head { margin-bottom: var(--hp-sp-6); max-width: 640px; }
.hp-section-head--center { margin-inline: auto; text-align: center; }
.hp-section-head--center .hp-eyebrow { justify-content: center; }
.hp-section-head--center .hp-lead { margin-inline: auto; }
.hp-section-head__title { margin-bottom: var(--hp-sp-3); }

/* ============================ CATEGORY CARDS ============================ */
.hp-cat-card {
	display: flex; align-items: center; gap: var(--hp-sp-4);
	padding: var(--hp-sp-4) var(--hp-sp-5); text-decoration: none; color: var(--hp-ink);
	border-left: 4px solid var(--hp-cat-accent, var(--hp-spruce));
}
.hp-cat-card__icon { font-size: 1.7rem; width: 1.4em; text-align: center; flex-shrink: 0; }
.hp-cat-card__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hp-cat-card__name { font-family: var(--hp-font-display); font-weight: 600; font-size: var(--hp-fs-md); }
.hp-cat-card__blurb { font-size: var(--hp-fs-xs); color: var(--hp-slate); }
.hp-cat-card__count { font-family: var(--hp-font-mono); font-size: var(--hp-fs-xs); color: var(--hp-slate); }
.hp-cat-card__arrow { color: var(--hp-cat-accent, var(--hp-spruce)); opacity: 0; transform: translateX(-4px); transition: opacity var(--hp-dur), transform var(--hp-dur); }
.hp-cat-card:hover .hp-cat-card__arrow { opacity: 1; transform: translateX(0); }

/* ============================ HOW IT WORKS ============================ */
.hp-how { background: var(--hp-cloud); }
.hp-how__steps { list-style: none; margin: 0 0 var(--hp-sp-6); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hp-sp-4); counter-reset: step; }
.hp-how__step { position: relative; padding: var(--hp-sp-5); }
.hp-how__num { font-family: var(--hp-font-mono); font-size: var(--hp-fs-xs); color: var(--hp-amber-dk); font-weight: 700; letter-spacing: 0.1em; }
.hp-how__icon { display: block; font-size: 2rem; margin: var(--hp-sp-2) 0; }
.hp-how__title { font-size: var(--hp-fs-md); margin-bottom: var(--hp-sp-2); }
.hp-how__text { font-size: var(--hp-fs-sm); color: var(--hp-slate); margin: 0; }

/* ============================ CARDS: SERVICE / PROVIDER ============================ */
.hp-tag { position: absolute; top: var(--hp-sp-3); left: var(--hp-sp-3); font-family: var(--hp-font-mono); font-size: var(--hp-fs-xs); font-weight: 700; padding: 0.3em 0.6em; border-radius: var(--hp-radius-pill); background: var(--hp-cloud); color: var(--hp-ink); box-shadow: var(--hp-shadow-sm); }
.hp-tag--emergency { background: var(--hp-danger); color: #fff; left: auto; right: var(--hp-sp-3); }
.hp-tag--popular { background: var(--hp-amber); color: var(--hp-ink); }
.hp-ph { width: 100%; height: 100%; display: block; }

.hp-service-card__cat { font-family: var(--hp-font-mono); font-size: var(--hp-fs-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.hp-service-card__title { font-size: var(--hp-fs-md); margin: var(--hp-sp-2) 0; }
.hp-service-card__title a { color: var(--hp-ink); }
.hp-service-card__title a:hover { color: var(--hp-spruce); }
.hp-service-card__excerpt { font-size: var(--hp-fs-sm); color: var(--hp-slate); margin-bottom: var(--hp-sp-4); }
.hp-service-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--hp-sp-3); }
.hp-service-card__price { font-size: var(--hp-fs-sm); }

.hp-provider-card { padding: var(--hp-sp-5); display: flex; flex-direction: column; gap: var(--hp-sp-4); }
.hp-provider-card__top { display: flex; gap: var(--hp-sp-4); align-items: center; }
.hp-provider-card__avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--hp-mist); }
.hp-provider-card__avatar img, .hp-provider-card__avatar svg { width: 100%; height: 100%; object-fit: cover; }
.hp-provider-card__name { font-size: var(--hp-fs-md); margin: 0; }
.hp-provider-card__name a { color: var(--hp-ink); }
.hp-provider-card__cat { font-family: var(--hp-font-mono); font-size: var(--hp-fs-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.hp-provider-card__rating { display: flex; align-items: center; gap: var(--hp-sp-2); font-size: var(--hp-fs-sm); }
.hp-provider-card__tagline { font-size: var(--hp-fs-sm); color: var(--hp-slate); margin: 0; }
.hp-provider-card__trust { display: flex; align-items: center; justify-content: space-between; gap: var(--hp-sp-3); flex-wrap: wrap; padding: var(--hp-sp-3) 0; border-block: 1px solid var(--hp-mist); }
.hp-provider-card__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hp-sp-2); margin: 0; }
.hp-provider-card__meta dt { font-family: var(--hp-font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hp-slate); margin-bottom: 2px; }
.hp-provider-card__meta dd { margin: 0; font-weight: 600; font-size: var(--hp-fs-sm); }
.hp-provider-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--hp-sp-3); margin-top: auto; }
.hp-provider-card__rate { font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-fs-lg); }

/* ============================ TRUST BAND / STATS ============================ */
.hp-trustband__item { text-align: center; padding: var(--hp-sp-4); }
.hp-trustband__icon { font-size: 2.2rem; display: block; margin-bottom: var(--hp-sp-3); }
.hp-trustband__item h3 { font-size: var(--hp-fs-md); margin-bottom: var(--hp-sp-2); }
.hp-trustband__item p { font-size: var(--hp-fs-sm); }

.hp-stats { background: var(--hp-spruce); color: #fff; padding-block: var(--hp-sp-7); }
.hp-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hp-sp-5); text-align: center; }
.hp-stats__value { display: block; font-family: var(--hp-font-display); font-weight: 700; font-size: var(--hp-fs-2xl); color: var(--hp-amber); }
.hp-stats__label { font-size: var(--hp-fs-sm); color: rgba(255,255,255,0.85); }

/* ============================ TESTIMONIALS ============================ */
.hp-testimonial { padding: var(--hp-sp-5); display: flex; flex-direction: column; gap: var(--hp-sp-3); }
.hp-testimonial__quote { font-size: var(--hp-fs-md); line-height: 1.5; margin: 0; font-style: italic; color: var(--hp-ink); }
.hp-testimonial__by { display: flex; align-items: center; gap: var(--hp-sp-3); margin-top: auto; }
.hp-testimonial__avatar { border-radius: 50%; }
.hp-testimonial__by strong { display: block; font-family: var(--hp-font-display); }

/* ============================ PROVIDER CTA ============================ */
.hp-provcta__panel {
	background: linear-gradient(135deg, var(--hp-spruce), var(--hp-pine));
	border-radius: var(--hp-radius-lg); padding: var(--hp-sp-8);
	display: flex; align-items: center; justify-content: space-between; gap: var(--hp-sp-6);
	color: #fff; overflow: hidden; position: relative;
}
.hp-provcta__content { max-width: 60ch; }
.hp-provcta__content h2 { color: #fff; }
.hp-provcta__content p { color: rgba(255,255,255,0.9); margin-bottom: var(--hp-sp-5); }
.hp-provcta__badges { display: flex; flex-direction: column; gap: var(--hp-sp-3); align-items: flex-end; }
.hp-provcta__badges .hp-trust { color: #fff; }
.hp-provcta__badges .hp-trust__bar { background: rgba(255,255,255,0.2); }

/* ============================ FOOTER ============================ */
.hp-footer { background: var(--hp-ink); color: rgba(255,255,255,0.75); padding-block: var(--hp-sp-8) var(--hp-sp-5); margin-top: var(--hp-sp-8); }
.hp-footer__top { display: grid; grid-template-columns: 1.2fr 2fr; gap: var(--hp-sp-8); padding-bottom: var(--hp-sp-6); border-bottom: 1px solid rgba(255,255,255,0.1); }
.hp-logo--footer .hp-logo__text { color: #fff; }
.hp-footer__tagline { margin: var(--hp-sp-3) 0; color: rgba(255,255,255,0.6); font-size: var(--hp-fs-sm); }
.hp-footer__contact { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--hp-sp-4); }
.hp-footer__contact a { color: rgba(255,255,255,0.8); font-size: var(--hp-fs-sm); }
.hp-footer__contact a:hover { color: var(--hp-amber); }
.hp-footer__social { display: flex; gap: var(--hp-sp-2); }
.hp-footer__social a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; color: #fff; font-family: var(--hp-font-mono); font-size: var(--hp-fs-sm); }
.hp-footer__social a:hover { background: var(--hp-amber); color: var(--hp-ink); border-color: var(--hp-amber); }
.hp-footer__menus { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--hp-sp-5); }
.hp-footer__heading { color: #fff; font-size: var(--hp-fs-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--hp-sp-4); }
.hp-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--hp-sp-2); }
.hp-footer__list a { color: rgba(255,255,255,0.7); font-size: var(--hp-fs-sm); }
.hp-footer__list a:hover { color: var(--hp-amber); }
.hp-news-form { display: flex; flex-direction: column; gap: var(--hp-sp-2); margin-top: var(--hp-sp-3); }
.hp-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--hp-sp-4); padding-top: var(--hp-sp-5); flex-wrap: wrap; }
.hp-footer__copy { margin: 0; font-size: var(--hp-fs-sm); }
.hp-footer__legal-list { display: flex; gap: var(--hp-sp-4); list-style: none; margin: 0; padding: 0; }
.hp-footer__legal-list a { color: rgba(255,255,255,0.6); font-size: var(--hp-fs-xs); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 1024px) {
	.hp-mega__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1180px) {
	.hp-hero__floatcard { min-width: 172px; padding: var(--hp-sp-3); }
	.hp-hero__floatcard--1 { right: 8px; }
	.hp-hero__floatcard--2 { left: 8px; }
}
@media (max-width: 960px) {
	.hp-hero__inner { grid-template-columns: 1fr; }
	.hp-hero__visual { display: none; }
	.hp-hero__search-row { grid-template-columns: 1fr; }
	.hp-how__steps { grid-template-columns: repeat(2, 1fr); }
	.hp-stats__grid { grid-template-columns: repeat(2, 1fr); }
	.hp-footer__top { grid-template-columns: 1fr; }
	.hp-footer__menus { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
	.hp-nav { position: fixed; inset: var(--hp-header-h) 0 auto 0; background: var(--hp-cloud); border-bottom: 1px solid var(--hp-line); box-shadow: var(--hp-shadow-lg); padding: var(--hp-sp-4); transform: translateY(-120%); transition: transform var(--hp-dur) var(--hp-ease); }
	.hp-nav.is-open { transform: translateY(0); }
	.hp-nav__list { flex-direction: column; align-items: stretch; }
	.hp-burger { display: flex; }
	.hp-header__dash, .hp-header__login { display: none; }
	.hp-nav__mega-panel { position: static; box-shadow: none; border: 0; padding: var(--hp-sp-3) 0; }
	.hp-mega__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.hp-how__steps { grid-template-columns: 1fr; }
	.hp-stats__grid { grid-template-columns: 1fr 1fr; }
	.hp-footer__menus { grid-template-columns: 1fr; }
	.hp-provcta__panel { flex-direction: column; align-items: flex-start; padding: var(--hp-sp-6); }
	.hp-provcta__badges { flex-direction: row; align-items: center; }
}