/* 🟦 ═══════════════════════════════════════════════════════════════════════════
 *  HOSPITALITY HOOK UP · v2.0.0 "HospitalityHub Landing" · Public Styles
 *  Bitghost.com · ghost@bitghost.com
 *  Surgical port of the prototype: cream #f8f1e9 + red #c2410c + green #166534
 *  Dark mode preserved as opt-in via [data-hhu-theme="dark"]
 * ═══════════════════════════════════════════════════════════════════════════ 🟦 */

:root {
    /* light / default cream palette (matches prototype) */
    --hhu-cream:        #f8f1e9;
    --hhu-accent-red:   #c2410c;
    --hhu-accent-green: #166534;
    --hhu-amber:        #f59e0b;
    --hhu-text:         #1f2937;
    --hhu-text-muted:   #6b7280;
    --hhu-border:       #e5e7eb;

    /* card / surface */
    --hhu-surface:      #ffffff;
    --hhu-surface-soft: #f8f1e9;

    /* corner system */
    --hhu-radius-sm:    8px;
    --hhu-radius-md:    16px;
    --hhu-radius-lg:    24px;
    --hhu-radius-xl:    28px;
    --hhu-border-w:     22px;        /* Bitghost design love language */

    /* type */
    --hhu-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --hhu-font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* ─── App root container ─── */
.hhu-app {
    font-family: var(--hhu-font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.hhu-app * { box-sizing: border-box; }
.hhu-app img { max-width: 100%; height: auto; }

.hhu-container {
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
}

/* serif headings (Playfair Display) */
.hhu-serif {
    font-family: var(--hhu-font-serif);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ─── Custom scrollbar inside results panel ─── */
.hhu-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
.hhu-scroll::-webkit-scrollbar { width: 6px; }
.hhu-scroll::-webkit-scrollbar-track { background: transparent; }
.hhu-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.18);
    border-radius: 9999px;
}
.hhu-scroll::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.32); }

/* ─── Card / job card hover lift ─── */
.hhu-job-card {
    transition: all 0.2s ease;
}
.hhu-job-card:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.10);
    transform: translateX(4px);
}

/* resource card hover */
.hhu-resource-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hhu-resource-card:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 15px -3px rgb(194 65 12 / 0.15);
}

/* ─── Status badge (Now Hiring / Not Hiring) ─── */
.hhu-status-badge {
    font-size: 0.65rem;
    padding: 1px 9px;
    font-weight: 700;
    letter-spacing: -0.5px;
    display: inline-block;
}

/* ─── Map container ─── */
.hhu-map-container {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.10);
}

/* Leaflet popup tuning — match prototype's rounded shadow popups */
.leaflet-popup-content-wrapper {
    border-radius: 12px !important;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.15) !important;
    padding: 4px 4px 0 4px;
}
.leaflet-popup-content {
    margin: 12px 14px !important;
    font-family: var(--hhu-font-body) !important;
}
.leaflet-popup-tip {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}
.leaflet-container a.leaflet-popup-close-button {
    color: #9ca3af;
    font-size: 18px;
    padding: 6px 8px 0 0;
}

/* job/user markers — make sure overflow is visible so shadow shows */
.hhu-job-marker, .hhu-user-marker { background: transparent !important; border: none !important; }

/* ─── Toast animations ─── */
@keyframes hhu-toast-slide {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.hhu-toast {
    animation: hhu-toast-slide 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ─── Live presence dot pulse (Tailwind animate-pulse fallback) ─── */
@keyframes hhu-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.4); }
}

/* ─── Shimmer effect (used sparingly on highlight elements) ─── */
@keyframes hhu-shimmer {
    0%   { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}
.hhu-shimmer {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
    background-size: 1000px 100%;
    animation: hhu-shimmer 2.4s linear infinite;
}

/* ─── Reset + override Impreza/WP theme bleed inside the app ─── */
.hhu-app a { text-decoration: none; }
.hhu-app button {
    font-family: inherit;
    cursor: pointer;
    border: none;
}
.hhu-app input,
.hhu-app select,
.hhu-app textarea {
    font-family: inherit;
}

/* When inside Impreza's container, kill its padding so the canvas takeover is true full-width */
body .l-section-h .hhu-react-root[data-mount="full_app"],
body .vc_row .hhu-react-root[data-mount="full_app"] {
    margin: 0;
    padding: 0;
    max-width: 100vw;
}

/* Hide WP admin bar bleed (the React app is sticky-top-0 itself) */
.hhu-app .hhu-app { padding-top: 0; }

/* ═════════════════════════════════════════════════════════════════════════════
 * DARK MODE OPT-IN · activate via data-hhu-theme="dark" on .hhu-app
 * Preserves Bitghost monochromatic GHOST.ORG / ETH / BTC aesthetic from v1.0.0
 * ═════════════════════════════════════════════════════════════════════════════ */

.hhu-app[data-hhu-theme="dark"] {
    background: #000000 !important;
    color: #ffffff !important;
}
.hhu-app[data-hhu-theme="dark"] .bg-white,
.hhu-app[data-hhu-theme="dark"] .bg-\[\#f8f1e9\] { background-color: #0a0a0a !important; }
.hhu-app[data-hhu-theme="dark"] .text-gray-900,
.hhu-app[data-hhu-theme="dark"] .text-gray-800,
.hhu-app[data-hhu-theme="dark"] .text-gray-700 { color: #ffffff !important; }
.hhu-app[data-hhu-theme="dark"] .text-gray-500,
.hhu-app[data-hhu-theme="dark"] .text-gray-600,
.hhu-app[data-hhu-theme="dark"] .text-gray-400 { color: #888 !important; }
.hhu-app[data-hhu-theme="dark"] .border-gray-100,
.hhu-app[data-hhu-theme="dark"] .border-gray-200,
.hhu-app[data-hhu-theme="dark"] .border-gray-300 { border-color: #1a1a1a !important; }
.hhu-app[data-hhu-theme="dark"] .hhu-job-card,
.hhu-app[data-hhu-theme="dark"] .hhu-resource-card { background: #0f0f0f !important; }

/* ─── Responsive: tablet ─── */
@media (max-width: 1024px) {
    .hhu-container { padding-left: 1rem; padding-right: 1rem; }
}

/* ─── Responsive: mobile ─── */
@media (max-width: 768px) {
    .hhu-map-container { height: 360px !important; min-height: 360px !important; border-radius: 14px; }
    .hhu-app h1.hhu-serif { font-size: 2.5rem !important; }
    .hhu-app h2.hhu-serif { font-size: 2rem !important; }
    .hhu-job-card:hover { transform: none; } /* no translateX on touch */
}

@media (max-width: 480px) {
    .hhu-map-container { height: 300px !important; min-height: 300px !important; }
    .hhu-app h1.hhu-serif { font-size: 2rem !important; line-height: 1.05; }
}

/* ─── Print: turn off the map and fixed elements so the page prints cleanly ─── */
@media print {
    .hhu-map-container,
    .fixed,
    nav.sticky { display: none !important; }
    .hhu-app { background: white !important; color: black !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   v3.0.3 "Atlas Resilience" — Defensive CSS Fallbacks
   Guarantees the 4-tab nav + search bar layout work even if Tailwind CDN
   misses classes during its JIT scan.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── TopNav responsive behavior (replaces Tailwind sm:/md:/lg: classes) ─── */

/* Default (below 640px / mobile): inline nav hidden, mobile row visible */
.hhu-app .hhu-topnav-inline { display: none !important; }
.hhu-app .hhu-topnav-mobile-row { display: block !important; }
.hhu-app .hhu-topnav-link-short { display: inline !important; }
.hhu-app .hhu-topnav-link-full { display: none !important; }
.hhu-app .hhu-topnav-user-text { display: none !important; }
.hhu-app .hhu-topnav-beta-pill { display: none !important; }

/* Tablet portrait + (640px) — show inline nav with short labels */
@media (min-width: 640px) {
    .hhu-app .hhu-topnav-inline { display: flex !important; flex: 1; justify-content: center; align-items: center; gap: 2px; }
    .hhu-app .hhu-topnav-mobile-row { display: none !important; }
}

/* Tablet landscape + (768px) — switch from short labels to full labels */
@media (min-width: 768px) {
    .hhu-app .hhu-topnav-link-short { display: none !important; }
    .hhu-app .hhu-topnav-link-full { display: inline !important; }
}

/* Laptop + (1024px) — show user name + role + breathing room */
@media (min-width: 1024px) {
    .hhu-app .hhu-topnav-user-text { display: block !important; }
    .hhu-app .hhu-topnav-inline { gap: 6px; }
}

/* Desktop + (1280px) — show v3.0.3 BETA pill */
@media (min-width: 1280px) {
    .hhu-app .hhu-topnav-beta-pill { display: flex !important; }
}

/* ─── Search bar grid layout (v3.0.3 fix for pin/address overlap) ─── */
.hhu-app .hhu-searchbar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 768px) {
    .hhu-app .hhu-searchbar-grid {
        /* Wide address field (5 cols) · radius (2) · position (2) · button (3) */
        grid-template-columns: 5fr 2fr 2fr 3fr;
        gap: 12px;
    }
}
@media (min-width: 1024px) {
    .hhu-app .hhu-searchbar-grid {
        /* On laptop+ give address even more room */
        grid-template-columns: 6fr 2fr 2fr 3fr;
    }
}

/* Address input — pin sits LEFT, input padded to clear it */
.hhu-app .hhu-searchbar-address-wrap {
    position: relative;
    width: 100%;
}
.hhu-app .hhu-searchbar-address-pin {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    z-index: 1;
}
.hhu-app .hhu-searchbar-address-input {
    width: 100%;
    padding: 14px 16px 14px 44px !important; /* generous left pad clears pin */
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    background: #fff;
    color: #1f2937;
    transition: border-color 0.15s ease;
}
.hhu-app .hhu-searchbar-address-input:focus {
    border-color: #c2410c;
}
.hhu-app .hhu-searchbar-select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    background: #fff;
    color: #1f2937;
    cursor: pointer;
    outline: none;
}
.hhu-app .hhu-searchbar-select:focus { border-color: #c2410c; }
.hhu-app .hhu-searchbar-button {
    padding: 14px 24px;
    background: #dc2626;
    color: white;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.05em;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 10px 15px -3px rgb(127 29 29 / 0.3);
    white-space: nowrap;
}
.hhu-app .hhu-searchbar-button:hover { background: #b91c1c; }
.hhu-app .hhu-searchbar-button:active { background: #991b1b; }

/* ─── Tailwind-CDN fallback for arbitrary color classes that may not be pre-emitted
 *      (in case Tailwind CDN strips them in production JIT mode) ─── */
.bg-\[\#f8f1e9\] { background-color: #f8f1e9; }
.bg-\[\#1f2937\] { background-color: #1f2937; }
.text-\[10px\]   { font-size: 10px; line-height: 1.2; }
.text-\[15px\]   { font-size: 15px; }
.text-\[9px\]    { font-size: 9px; }
.tracking-\[1px\]   { letter-spacing: 1px; }
.tracking-\[2px\]   { letter-spacing: 2px; }
.max-w-\[920px\] { max-width: 920px; }
.max-w-\[640px\] { max-width: 640px; }
.min-w-\[640px\] { min-width: 640px; }
.max-w-\[90vh\]  { max-height: 90vh; }
.border-b-\[3px\] { border-bottom-width: 3px; }
.rounded-\[20px\] { border-radius: 20px; }

/* ─── Accessibility: focus rings ─── */
.hhu-app button:focus-visible,
.hhu-app a:focus-visible,
.hhu-app input:focus-visible,
.hhu-app select:focus-visible {
    outline: 2px solid var(--hhu-accent-red);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   v3.1.7 — LAVA-LAMP SEARCH BAR ANIMATION
   ═══════════════════════════════════════════════════════════════════
   Slow, ambient color shift on the search bar's outer container using
   the operator's brand palette: red (#dc2626) → black (#000) → white
   accent (#fff). Pure CSS, no JS. Designed for readability — opacity
   on overlay layer is kept low (0.06 max) so the white card surface
   underneath stays predominant and text remains crisp. 22-second cycle
   feels organic, not flashy. Honors prefers-reduced-motion. */
@keyframes hhu-lava-lamp {
    0%, 100% {
        box-shadow:
            0 10px 25px -5px rgba(220, 38, 38, 0.18),
            0 4px 6px -2px rgba(0, 0, 0, 0.05),
            0 0 0 1.5px rgba(220, 38, 38, 0.35);
    }
    33% {
        box-shadow:
            0 10px 25px -5px rgba(0, 0, 0, 0.32),
            0 4px 6px -2px rgba(0, 0, 0, 0.12),
            0 0 0 1.5px rgba(0, 0, 0, 0.55);
    }
    66% {
        box-shadow:
            0 10px 25px -5px rgba(220, 38, 38, 0.22),
            0 4px 6px -2px rgba(0, 0, 0, 0.08),
            0 0 0 1.5px rgba(255, 255, 255, 0.0), /* white = no visible border */
            0 0 18px 4px rgba(220, 38, 38, 0.18);
    }
}
@keyframes hhu-lava-lamp-overlay {
    0%, 100% { background: radial-gradient(120% 80% at 0% 100%, rgba(220,38,38,0.06) 0%, transparent 60%); }
    33%      { background: radial-gradient(120% 80% at 100% 0%, rgba(0,0,0,0.05) 0%, transparent 60%); }
    66%      { background: radial-gradient(140% 100% at 50% 100%, rgba(220,38,38,0.05) 0%, transparent 70%); }
}

.hhu-app .hhu-searchbar-lava {
    position: relative;
    background: #ffffff;
    border-radius: 24px;
    padding: 12px;
    border: 1px solid #f3f4f6;
    overflow: hidden;
    animation: hhu-lava-lamp 22s ease-in-out infinite;
}
.hhu-app .hhu-searchbar-lava::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    animation: hhu-lava-lamp-overlay 22s ease-in-out infinite;
    z-index: 0;
}
.hhu-app .hhu-searchbar-lava > * {
    position: relative;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    .hhu-app .hhu-searchbar-lava,
    .hhu-app .hhu-searchbar-lava::before {
        animation: none;
    }
}

/* ─── Active-filter chips (v3.1.7) ─── */
.hhu-app .hhu-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px 4px 10px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    color: #991b1b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hhu-app .hhu-filter-chip-x {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #991b1b;
    opacity: 0.6;
    padding: 0 2px;
    font-size: 12px;
    line-height: 1;
    transition: opacity 0.15s;
}
.hhu-app .hhu-filter-chip-x:hover { opacity: 1; }
.hhu-app .hhu-filter-reset {
    margin-left: auto;
    padding: 4px 12px;
    background: #000;
    border: 1px solid #000;
    border-radius: 9999px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s, transform 0.15s;
}
.hhu-app .hhu-filter-reset:hover { background: #dc2626; border-color: #dc2626; transform: scale(1.03); }

/* ─── Carousel chevron pulse on hover (v3.1.7 polish) ─── */
.hhu-app .hhu-carousel-chevron:hover {
    background: #ffffff;
}

/* ─── End of file · v3.1.7 · Block 89e5a48165320cd0 ─── */