/*
  Safari Plug Safaris - Logo Specific Styles
  Ensures the logo colors are always correct, overriding theme changes if necessary.
*/

.logo a .company-name {
    /* These colors are directly from the original HTML inline style */
    color: #2cd887 !important; /* Green color for SAFARI PLUG */
    margin-left: 8px; /* As per original inline style */
    margin-right: 6px; /* Space after SAFARI PLUG before SAFARIS */
    font-size: 1.8rem; /* Base size, responsive adjustments below */
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1; /* Ensure tight fit with image */
}

.logo a .highlight {
    /* This color is directly from the original HTML inline style */
    color: #f0810f !important; /* Orange color for SAFARIS */
    font-size: 1.8rem; /* Base size */
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
}

/* General logo anchor styling */
.logo a {
    display: flex;
    align-items: center; /* Vertically align image and text */
    text-decoration: none; /* Remove underline from link */
}

/* Main logo image styling */
.logo img.main-logo {
    max-height: 35px; /* Default max height */
    width: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure logo isn't distorted */
    transition: transform 0.3s ease; /* Subtle hover effect */
    vertical-align: middle; /* Helps with alignment in some browsers */
}

/* Hover effect for the logo image */
.logo a:hover img.main-logo {
    transform: scale(1.05); /* Slight zoom on hover */
}


/* Responsive adjustments for the logo */
@media (max-width: 992px) {
    .logo img.main-logo {
        max-height: 32px; /* Slightly smaller on tablets */
    }
    .logo a .company-name,
    .logo a .highlight {
        font-size: 1.6rem; /* Adjust text size */
    }
}

@media (max-width: 768px) {
    .logo img.main-logo {
        max-height: 28px; /* Smaller on mobile */
    }
    .logo a .company-name,
    .logo a .highlight {
        font-size: 1.4rem; /* Further adjust text size */
        margin-left: 6px;
        margin-right: 4px;
    }
}

@media (max-width: 480px) { /* Very small phones */
    .logo img.main-logo {
        max-height: 24px; /* Even smaller */
    }
    .logo a .company-name,
    .logo a .highlight {
        font-size: 1.2rem; /* Smallest text size */
        /* Hide text if it becomes too cramped, or make logo image only */
        /* For example:
        display: none;
        .logo img.main-logo { margin-right: 0; }
        */
    }
     /* Optionally hide text on very small screens if it breaks layout */
    /*
    .logo a .company-name, .logo a .highlight {
        display: none;
    }
    .logo img.main-logo {
        margin-right: 0;
    }
    */
}