/* Custom styling for omarosullivan.com */

/* Import handwritten font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

/* Logo styling - handwritten font with burnt orange color and bigger font */
.logo a {
    color: #CC5500 !important;
    font-family: 'Shadows Into Light', cursive !important;
    font-weight: 400 !important;
    font-size: 2.24em !important;
    letter-spacing: -0.5px !important;
}

/* Unified video asset panel styling */
.video-cover {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    text-align: center;
}

.video-cover iframe,
.video-cover video {
    width: 100% !important;
    height: 500px !important;
    border-radius: 8px !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Responsive video sizing */
@media (max-width: 768px) {
    .video-cover iframe,
    .video-cover video {
        height: 300px !important;
    }
}

/* Alternative handwritten font option (commented out - uncomment to try) */
/* .logo a {
    font-family: 'Caveat', cursive !important;
    font-weight: 500 !important;
} */

/* Original font option (commented out - uncomment to revert to original) */
/* .logo a {
    font-family: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    letter-spacing: inherit !important;
} */

/* Ensure logo color is consistent in both light and dark themes */
body.dark .logo a {
    color: #CC5500 !important;
}

/* Hover effect for logo */
.logo a:hover {
    color: #B84A00 !important;
    text-decoration: none;
}

/* Active/selected page in navigation - burnt orange */
#menu .active {
    border-bottom: 2px solid #CC5500 !important;
    color: #CC5500 !important;
}

/* Ensure active page color is consistent in both light and dark themes */
body.dark #menu .active {
    border-bottom: 2px solid #CC5500 !important;
    color: #CC5500 !important;
}

/* Make videos in entry-cover match image width exactly */
.entry-cover iframe,
.entry-cover video {
    width: 100% !important;
    height: auto !important;
    border-radius: var(--radius);
}