/*
Theme Name: My Custom Bootstrap Theme
Author: Pär Stråhle
Description: A custom WordPress theme built with Bootstrap 5.
Version: 1.0
*/

/* Ensure images in the content don't break the layout */
.content img {
    max-width: 100%;
    height: auto;
}

/* Style for blockquotes */
blockquote {
    border-left: 5px solid #dee2e6;
    padding-left: 1rem;
    font-style: italic;
    color: #6c757d;
}


/* WordPress Core Classes START*/
.alignleft {
    float: left;
    margin: 0.5em 1em 0.5em 0;
}

.alignright {
    float: right;
    margin: 0.5em 0 0.5em 1em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; 
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption-text {
    font-size: 0.85rem;
    color: #666;
    margin: 5px 0;
}
/* WordPress Core Classes END*/

/* Bootstrap Variables START */
:root {
    --primary-color: #0d6efd; /* Bootstrap Blue */
    --accent-color: #f8f9fa;
    --text-main: #212529;
}

body {
    color: var(--text-main);
    background-color: #ffffff;
}

/* Example of using your variable */
.comments-title {
    color: var(--primary-color);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
}
/* Bootstrap Variables END */


/* COMMENTS START */
/* Space out individual comments */
.comment {
    margin-bottom: 2rem;
    list-style: none;
}

/* Style the avatar */
.comment .avatar {
    border-radius: 50%;
    margin-right: 15px;
    float: left;
}

/* Style the reply link as a Bootstrap-style outline button */
.comment-reply-link {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    color: #0d6efd;
    border: 1px solid #0d6efd;
    text-decoration: none;
    border-radius: 0.25rem;
    margin-top: 10px;
}

.comment-reply-link:hover {
    background-color: #0d6efd;
    color: #fff;
}

/* Clearfix for floating avatars */
.comment-body::after {
    content: "";
    display: table;
    clear: both;
}

/* COMMENTS END */


/* SEARCH START */
/* Make the default WP search form look like Bootstrap */
.search-form {
    display: flex;
    gap: 10px;
}

.search-form input[type="search"] {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.search-form input[type="submit"] {
    color: #fff;
    background-color: #0d6efd;
    border: none;
    padding: 0.375rem 1rem;
    border-radius: 0.25rem;
    cursor: pointer;
}

/* SEARCH END */

/* Custom Hero styling */
/*header.bg-dark {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), 
                url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=1200&q=80');
    background-size: cover;
    background-position: center;
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}*/
.hero-full {
	display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;

    /* 100vh means 100% of the Viewport Height */
    /*min-height: 100vh;*/
    
    /* Standard Hero background styling */
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                url('https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Optional: Creates a parallax effect */
    
    /* Adjusting for the Navbar height */
   /* margin-top: -72px; /* Set this to the height of your navbar if it's "sticky-top" */
    padding-top: 72px; 
}

/* Optional: Animation for the Hero Text */
.hero-full h1 {
    animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#mainNavbar {
    top: 80px; /* Adjust this value to move it further down */
    transition: all 0.4s ease;
    z-index: 1030; /* Ensure it stays above other content */
}

/* Ensure the wrapper fits tightly around the right-aligned links */
.custom-menu-wrapper {
    background-color: rgba(0, 0, 0, 1);
    padding: 0px 25px;
    border: 1px solid white;
    border-radius: 50px 0 0 50px;
    display: inline-block;
}

/* Add horizontal breathing room for the fluid navbar */
#mainNavbar .container-fluid {
    padding-left: 30px;
    padding-right: 30px;
}

/* Adjust the Logo fade-in for the left side */
.fade-in-logo {
        color: #000;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s ease-in-out;
}

#mainNavbar.scrolled .fade-in-logo {
            color: #000;
    opacity: 1;
    transform: translateX(0);
}

/* Mobile: Stack the menu properly when collapsed */
@media (max-width: 991px) {
    .custom-menu-wrapper {
        display: block; /* Full width on mobile */
        margin-top: 1rem;
        border-radius: 10px;
        ms-auto: 0; /* Reset the right push */
    }
}

/* Force the header to have no hidden line-height gaps */
.hero-full {
    display: flex !important;
    line-height: 1; 
    font-size: 0; /* Clears whitespace between inline-block elements */
}

/* Restore font size to the container inside */
.hero-full .container {
    font-size: 1rem; 
    line-height: 1.5;
}

/* Ensure no margins are leaking from the body */
body {
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: baseline;
}


/* target the menu list specifically to override Bootstrap's defaults */
#mainNav .navbar-nav.ms-auto {
    margin-left: auto !important; /* Force the right alignment */
    flex-direction: row; /* Ensure items stay side-by-side */
}

/* Kill the default padding Bootstrap adds to the last nav-link */
.navbar-nav .nav-item:last-child .nav-link {
    padding-right: 25px; /* Adjust this to balance the text inside the black box */
}

#mainNavbar .custom-menu-pill .nav-item {
    /* Adds 15px of space to the left and right of every link */
    margin-left: 25px;
    margin-right: 25px;
}

/* Optional: Remove the margin from the very last item so it stays flush right */
#mainNavbar .custom-menu-pill .nav-item:last-child {
    margin-right: 0;
}
#mainNavbar .custom-menu-pill .nav-item:first-child {
    margin-left: 0;
}

/* Target the pill and override Bootstrap's internal variables */
#mainNavbar .custom-menu-pill {
    /* Redefine Bootstrap's variables for this specific container */
    --bs-nav-link-color: #ffffff;
    --bs-nav-link-hover-color: #ffffff;
    --bs-navbar-active-color: #ffffff;
    --bs-nav-link-font-weight: 600;
}

/* Now apply your specific styles using high specificity */
#mainNavbar .custom-menu-pill .nav-link {
    text-transform: uppercase !important;
    letter-spacing: 1px;
    font-size: 0.85rem;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out;
    /* This ensures the color is applied even if the variable fails */
    color: #ffffff !important; 
}

/* Hover State with Underline */
#mainNavbar .custom-menu-pill .nav-link:hover {
    text-decoration: underline !important;
    text-underline-offset: 8px;
    text-decoration-thickness: 2px;
    /* If you want the underline a different color, uncomment below: */
    /* text-decoration-color: #0d6efd; */
}

/* Ensure the wrapper doesn't have its own flex constraints */
.navbar-collapse {
    /*justify-content: flex-end; /* Another way to force items to the right */
    flex-grow: 0; /* Prevents it from forcing its own width logic */
}