/* ---
Header Styles
--- */
.site-header {
    background-color: #000;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #2a2a2a;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo a {
    display: flex;
    align-items: center;
}

.site-search .search-form {
    display: flex;
    align-items: center;
    background-color: #1a1a1a;
    border-radius: 25px;
    border: 1px solid #525252;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.site-search .search-form:focus-within {
    border-color: #1683C6;
}

.site-search .search-field {
    background: none;
    border: none;
    color: #fff;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    outline: none;
    width: 250px;
    transition: width 0.3s ease;
}

.site-search .search-field::placeholder,
.search-form .search-field:focus {
    color: #fff !important;
}

.site-search .search-submit {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.75rem 1rem 0.75rem 0; /* Adjusted padding */
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-search .search-submit svg {
    width: 20px;
    height: 20px;
    fill: #525252;
    transition: fill 0.3s ease;
}

.site-search .search-form:focus-within .search-submit svg,
.site-search .search-submit:hover svg {
    fill: #1683C6;
}

/* Visually hide the label, but keep it for screen readers */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* ---
Responsive Adjustments for Header
--- */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        gap: 1rem;
    }

    .site-search {
        width: 100%;
    }

    .site-search .search-field {
        width: 100%; /* Full width on mobile */
    }
    
    .search-form {
        justify-content: space-between;
    }
}



.futuristic-btn {
    /* Positioning and Layout */
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 12px;
    
    /* Text and Font */
    color: #fff;
    text-align: center;
    text-decoration: none;
    
    /* Visuals and Effects */
    background: transparent;
    border: none; /* No initial border */
    overflow: visible; /* Allow pseudo-elements to be seen */
    transition: all 0.3s ease;
}

/* Ensure link and visited states maintain the white text color */
.futuristic-btn:link,
.futuristic-btn:visited {
    color: #fff;
}

.main-text {
    font-size: 16px; /* Slightly larger for a single line */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 3px;
    transition: all 0.3s ease;
}

.sub-text {
    font-size: 12px;
    color: gray;
    transition: all 0.3s ease;
}


.futuristic-btn { width: 100% }
.futuristic-btn:hover .main-text {
    color: #1683C6;
}

.futuristic-btn:hover .sub-text {
    color: #1683C6;
}

/* The animated border lines */
.futuristic-btn::before,
.futuristic-btn::after {
    content: '';
    position: absolute;
    background: #1683C6;
    box-shadow: 0 0 5px #1683C6, 0 0 10px #1683C6;
    transition: transform 0.3s ease-out;
}

/* Top and Bottom lines (Visible by default) */
.futuristic-btn::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    transform-origin: left;
    transform: scaleX(1);
}

.futuristic-btn::after {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    transform-origin: right;
    transform: scaleX(1);
}

/* Animate lines out of view on hover */
.futuristic-btn:hover::before,
.futuristic-btn:hover::after {
    transform: scaleX(0);
}

/* Left and Right lines (attached to a new span) */
.side-borders::before,
.side-borders::after {
    content: '';
    position: absolute;
    background: #1683C6;
    box-shadow: 0 0 5px #1683C6, 0 0 10px #1683C6;
    transition: transform 0.3s ease-out 0.2s; /* Delayed start */
}

/* (Visible by default) */
.side-borders::before {
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    transform-origin: bottom;
    transform: scaleY(1);
}

/* (Visible by default) */
.side-borders::after {
    bottom: 0;
    right: 0;
    width: 2px;
    height: 100%;
    transform-origin: top;
    transform: scaleY(1);
}

/* Animate lines out of view on hover */
.futuristic-btn:hover .side-borders::before,
.futuristic-btn:hover .side-borders::after {
    transform: scaleY(0);
}