/* Jutros - Custom Styles */

/* ── Local fonts ── */
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 600;
    font-display: block;
    src: url('/assets/fonts/cormorant-garamond-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: normal;
    font-weight: 300 600;
    font-display: block;
    src: url('/assets/fonts/cormorant-garamond-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 400;
    font-display: block;
    src: url('/assets/fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Cormorant Garamond';
    font-style: italic;
    font-weight: 300 400;
    font-display: block;
    src: url('/assets/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300 500;
    font-display: block;
    src: url('/assets/fonts/dm-sans-normal-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 300 500;
    font-display: block;
    src: url('/assets/fonts/dm-sans-normal-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Block page until fonts are ready */
html { opacity: 0; }
html.fonts-ready { opacity: 1; transition: opacity 0.2s ease; }

/* Hero typing cursor blink */
@keyframes hero-blink {
    0%, 100% { border-color: white; }
    50% { border-color: transparent; }
}
.hero-cursor {
    animation: hero-blink 0.7s step-end infinite;
}

/* Base font */
html, body {
    font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Smooth transitions */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Logo styling — matches hero nav */
.logo-text {
    font-family: 'Cormorant Garamond', ui-serif, Georgia, serif;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: .06em;
    line-height: 1;
    opacity: 0;
    transition: opacity .2s ease;
}
.fonts-ready .logo-text {
    opacity: 1;
}
.logo-text span {
    color: #4A9B35;
}

/* Typography utilities — matching hero design language */
.eyebrow {
    display: block;
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #4A9B35;
}
.serif-head {
    font-family: 'Cormorant Garamond', ui-serif, Georgia, serif;
    font-weight: 300;
    line-height: 1.1;
    color: #1C3A0E;
}
.serif-head em {
    font-style: italic;
    color: #3A7C27;
}
.body-text {
    font-size: clamp(.8rem, 1.4vw, .92rem);
    font-weight: 300;
    color: #7A9068;
    line-height: 1.8;
}

/* Card hover lift */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

/* Badge colors */
.badge-full-time {
    background-color: #dcfce7;
    color: #166534;
}
.badge-part-time {
    background-color: #dbeafe;
    color: #1e40af;
}
.badge-seasonal {
    background-color: #fef3c7;
    color: #92400e;
}
.badge-gig {
    background-color: #fae8ff;
    color: #86198f;
}

/* Category card colors */
.cat-restaurants { background: linear-gradient(135deg, #fef3c7, #fde68a); }
.cat-hotels { background: linear-gradient(135deg, #dbeafe, #93c5fd); }
.cat-bars { background: linear-gradient(135deg, #ede9fe, #c4b5fd); }
.cat-cafes { background: linear-gradient(135deg, #fce7f3, #f9a8d4); }
.cat-catering { background: linear-gradient(135deg, #d1fae5, #6ee7b7); }
.cat-fast-food { background: linear-gradient(135deg, #fee2e2, #fca5a5); }

/* Gradient hero */
.hero-gradient {
    background: linear-gradient(135deg, #1C3A0E 0%, #2A5E1B 30%, #4A9B35 70%, #72B350 100%);
}

/* Mobile filter overlay */
.filter-overlay {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Smooth Alpine transitions */
[x-cloak] {
    display: none !important;
}

/* Custom scrollbar for filter panel */
.filter-panel::-webkit-scrollbar {
    width: 4px;
}
.filter-panel::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.filter-panel::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
}

/* Social login buttons */
.btn-google {
    background-color: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
}
.btn-google:hover {
    background-color: #f9fafb;
}
.btn-facebook {
    background-color: #1877f2;
    color: #fff;
}
.btn-facebook:hover {
    background-color: #1664d9;
}
.btn-linkedin {
    background-color: #0a66c2;
    color: #fff;
}
.btn-linkedin:hover {
    background-color: #094ea0;
}

/* Form inputs - base styles */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="search"],
textarea,
select {
    background-color: #fff;
    border: 1px solid #d1d5db;
    padding: 0.5rem 0.75rem;
    font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #4A9B35;
    box-shadow: 0 0 0 2px rgba(74, 155, 53, 0.2);
}

select {
    appearance: none;
    -webkit-appearance: none;
    height: 38px;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0.75rem !important;
    padding-right: 2.25rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    background-size: 1rem;
}

input[type="date"] {
    height: 38px;
}

/* Active nav link */
.nav-active {
    color: #4A9B35;
    border-bottom: 2px solid #4A9B35;
}

/* Pulse animation for CTA */
@keyframes subtle-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}
.cta-pulse {
    animation: subtle-pulse 3s ease-in-out infinite;
}