/* ============================
   Hire Indy Pros – Theme Styles
   ============================ */

/* Main brand colors (from your logo) */
:root {
    --hip-primary: #0A78B0;       /* main blue */
    --hip-primary-hover: #075E8A; /* darker hover blue */
}

/* Primary button (used for Sign up, main actions) */
.hip-btn-primary {
    background-color: var(--hip-primary);
    color: #ffffff;
    font-weight: 500;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
}

.hip-btn-primary:hover {
    background-color: var(--hip-primary-hover);
    transform: translateY(-1px);
}

/* Brand / text links that use the main color (no underline hover) */
.hip-link-primary {
    color: var(--hip-primary);
    transition: color 0.2s ease-in-out;
}

.hip-link-primary:hover {
    color: var(--hip-primary-hover);
    text-decoration: none;
}

/* Top menu links – underline hover with gap below text */
.hip-menu-link {
    color: var(--hip-primary);
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

.hip-menu-link:hover {
    color: var(--hip-primary-hover);
    text-decoration: underline;
    text-decoration-thickness: 2px; /* thickness of underline */
    text-underline-offset: 6px;     /* space below text */
}

/* Logout link (red underline with offset) */
.hip-menu-logout {
    color: #e11d48; /* tailwind rose-600 */
    font-weight: 500;
    transition: color 0.2s ease-in-out;
}

.hip-menu-logout:hover {
    color: #be123c; /* darker hover red */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

/* Animated hamburger icon */
.hamburger-line {
    width: 1.75rem;          /* ~28px */
    height: 2px;
    background-color: #1e293b; /* slate-800 */
    border-radius: 9999px;
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
    display: block;
}

/* When menu is open, we add .hamburger-open on the button */
.hamburger-open .hamburger-line-1 {
    transform: translateY(6px) rotate(45deg);
}

.hamburger-open .hamburger-line-2 {
    opacity: 0;
}

.hamburger-open .hamburger-line-3 {
    transform: translateY(-6px) rotate(-45deg);
}