/* ==========================================================================
   site-header.css — the one site header (front/partials/site-header.blade.php)
   used by every front.template page, plus the tokens/resets its hv2- classes
   share with the homepage (home-v2.css builds on these).
   Loaded render-blocking from template.blade.php: the header is above the fold.
   ========================================================================== */

.hv2 {
   --hv2-brand: #FF5403;
   --hv2-brand-dark: #E04800;
   --hv2-brand-soft: #FFF1EA;
   --hv2-ink: #1B1B1F;
   --hv2-ink-2: #4A4A55;
   --hv2-ink-3: #8A8A96;
   --hv2-line: #ECECF0;
   --hv2-bg: #FFFFFF;
   --hv2-bg-2: #FAFAFB;
   --hv2-band: #1F2A37;
   --hv2-green: #12A150;
   font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   color: var(--hv2-ink);
   -webkit-font-smoothing: antialiased;
}
.hv2 *, .hv2 *::before, .hv2 *::after { box-sizing: border-box; }
.hv2 a { color: inherit; text-decoration: none; }
.hv2 h1, .hv2 h2, .hv2 h3, .hv2 h4, .hv2 p { margin: 0; }
.hv2 button { font-family: inherit; }
.hv2-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.hv2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- header ---------- */
.hv2-header { height: 64px; border-bottom: 1px solid var(--hv2-line); background: #fff; position: sticky; top: 0; z-index: 50; }
.hv2-header .hv2-wrap { height: 100%; display: flex; align-items: center; gap: 10px; }
.hv2-logo { display: flex; align-items: center; flex: none; }
.hv2-logo img { height: 36px; width: auto; display: block; }
.hv2-spacer { flex: 1; }
.hv2-hbtn { white-space: nowrap; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 8px; color: var(--hv2-ink-2); border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; line-height: 1.2; }
.hv2-hbtn:hover { color: var(--hv2-ink); background: var(--hv2-bg-2); }
.hv2-hbtn--ghost { border: 1px solid var(--hv2-line); }
.hv2-hbtn--solid { background: var(--hv2-brand); color: #fff; }
.hv2-hbtn--solid:hover { background: var(--hv2-brand-dark); color: #fff; }
.hv2-free { background: #fff; color: var(--hv2-brand); font-size: 10px; padding: 2px 5px; border-radius: 4px; font-weight: 800; }
.hv2-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }

/* ---------- drawer ---------- */
.hv2-scrim { position: fixed; inset: 0; background: rgba(15, 15, 25, .45); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 1040; }
.hv2-scrim.is-open { opacity: 1; pointer-events: auto; }
.hv2-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 320px; max-width: 86vw; background: #fff; z-index: 1041; transform: translateX(100%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; display: flex; flex-direction: column; }
.hv2-drawer.is-open { transform: none; visibility: visible; transition: transform .25s ease; box-shadow: -10px 0 40px rgba(0, 0, 0, .15); }
.hv2-dr-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--hv2-line); }
.hv2-dr-x { border: 0; background: var(--hv2-bg-2); width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 16px; color: var(--hv2-ink); }
.hv2-dr-auth { display: flex; gap: 8px; padding: 16px 20px 4px; }
.hv2-dr-auth .hv2-hbtn { flex: 1; justify-content: center; padding: 10px; }
.hv2-dr-user { display: flex; align-items: center; gap: 10px; padding: 16px 20px 4px; }
.hv2-dr-user img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.hv2-dr-user b { display: block; font-size: 14px; }
.hv2-dr-user span { font-size: 12px; color: var(--hv2-ink-3); }
.hv2-drawer nav { overflow-y: auto; padding: 0 12px 24px; }
.hv2-drawer nav p { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hv2-ink-3); padding: 16px 8px 6px; }
.hv2-drawer nav a, .hv2-drawer nav button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--hv2-ink); border: 0; background: none; cursor: pointer; text-align: left; }
.hv2-drawer nav a:hover, .hv2-drawer nav button:hover { background: var(--hv2-bg-2); }
.hv2-drawer nav i { font-size: 17px; color: var(--hv2-ink-2); width: 20px; text-align: center; }
.hv2-drawer nav em { font-style: normal; font-size: 10px; font-weight: 800; background: var(--hv2-brand); color: #fff; padding: 2px 6px; border-radius: 4px; }
.hv2-drawer nav .hv2-dr-logout { color: #C62828; }
.hv2-drawer nav .hv2-dr-logout i { color: #C62828; }
body.hv2-locked { overflow: hidden; }

/* notification bell (logged-in tenants): keeps the site-wide .hp-notif-bell
   look and states (style1.css), sized to sit in this header */
.hv2-header .hv2-bell { width: 36px; height: 36px; font-size: 16px; }

@media (max-width: 760px) {
   .hv2-hide-m { display: none !important; }
   .hv2-header { height: 60px; }
   .hv2-logo img { height: 30px; }
   .hv2-header .hv2-bell { width: 34px; height: 34px; font-size: 15px; }
}

/* Property detail v2 replaces the site header with its own top bar below
   720px (pd2-mobile.css does the same for the old .hp-header-mobile). The
   :has() guard only matches on that page. */
@media (max-width: 720px) {
   .hp-preview:has(.pd2-m-topbar) .hv2-header { display: none; }
}