/*
 * FESTIVAL HIGHLIGHTOR PRO - STYLES
 * This file contains both Admin and Front-End styles.
 */

/* === ADMIN STYLES (For the Edit/Add Festival Page) === */

/* Styling for the Post Title Search field when a Post ID is successfully linked */
#fh_search_post_title.fh-post-attached {
    border-color: #46b450; /* WordPress green border */
    box-shadow: 0 0 2px rgba(70, 180, 80, 0.8);
}

/* Style for the "Remove Link" button/link (if implemented) */
.fh-remove-link {
    margin-left: 10px;
    color: #a00;
    text-decoration: none;
    font-size: 13px;
}
.fh-remove-link:hover {
    color: #dc3232;
}

/* General spacing/alignment for admin elements */
.form-table th {
    width: 200px;
}
.fh-pro-setting-group {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.fh-pro-label {
    font-weight: 600;
}

/* === FRONT-END STYLES (For the Sticky Highlight Bar) === */

/* --- 1. Main Banner Container --- */
.fh-pro-bar {
    /* Fixed/Sticky position at the top (or bottom) */
    position: fixed;
    width: 100%;
    left: 0;
    z-index: 99999; /* Ensure it stays on top of most elements */
    box-sizing: border-box;
    padding: 10px 20px;
    
    /* Default styling - customize colors as needed */
    background-color: #333333; /* Dark background */
    color: #ffffff; /* White text */
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    
    /* Flexbox layout for aligning content (image, text, button) */
    display: flex;
    align-items: center; /* Vertically center all items */
    justify-content: space-between; /* Space out content and close button */
    
    /* Optional: Add a subtle shadow */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Positioning based on the 'top' or 'bottom' setting */
.fh-pro-bar.position-top {
    top: 0;
    bottom: auto;
}

.fh-pro-bar.position-bottom {
    top: auto;
    bottom: 0;
}

/* --- 2. Content Wrapper (Image + Text) --- */
.fh-pro-content {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Allows content area to take up available space */
    margin-right: 15px; /* Space before the close button */
}

/* --- 3. Image Styling (The Small Image) --- */
.fh-pro-image {
    /* Define the small size for the image */
    width: 40px; 
    height: 40px;
    min-width: 40px; /* Prevent shrinking in flex layout */
    margin-right: 15px;
    
    /* Ensure the image covers the box without distortion */
    object-fit: cover; 
    
    /* Make the image round */
    border-radius: 50%;
    
    /* Optional: Add a small border */
    border: 2px solid #ffffff;
}

/* --- 4. Text and Link Styling (UPDATED) --- */
.fh-pro-text {
    /* Text container */
    margin: 0;
    padding: 0;
    display: flex; /* Use flexbox for vertical stacking */
    flex-direction: column; 
    align-items: flex-start; /* Align contents to the left */
}

.fh-pro-text .fh-pro-link-title { /* Targeting the new class in the <a> tag */
    color: #ffd700; 
    text-decoration: none;
    font-weight: bold;
    
    /* Make the title noticeably bigger */
    font-size: 1.25em; 
    
    margin: 0; /* Remove default margin */
}

.fh-pro-text a:hover {
    text-decoration: underline;
}

/* --- 5. Countdown / Days Left Styling (ADJUSTED) --- */
.fh-pro-countdown {
    font-weight: normal; /* Less emphasis than the title */
    color: #cccccc; /* Slightly grayed out */
    margin-right: 0;
    margin-top: 2px; /* Small gap below the title */
    font-size: 0.9em;
}

/* Highlight the number of days/time */
.fh-pro-countdown span {
    color: #90ee90;
    font-size: 1.1em;
    font-weight: bold;
}



/* --- 6. Dismiss/Close Button Styling --- */
.fh-pro-dismiss {
    /* Reset button styles */
    background: none;
    border: none;
    cursor: pointer;
    color: #ffffff;
    font-size: 20px;
    padding: 5px;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
    
    /* Ensure it doesn't get squished */
    min-width: 20px;
}

.fh-pro-dismiss:hover {
    opacity: 1;
}

/* --- 7. Body Padding (Required to prevent bar from hiding content) --- */

/* Ensure body padding is applied when the top bar is active */
body.fh-pro-top-active {
    /* Adjust this value to match the height of your bar (~40px img height + 10px top/bottom padding * 2) + margin */
    padding-top: 60px !important; 
}

/* Ensure body padding is applied when the bottom bar is active */
body.fh-pro-bottom-active {
    padding-bottom: 60px !important; /* Adjust this value */
}