/*
Theme Name: Beit Splash Theme
Theme URI: https://be-it.no/
Author: Your Name
Author URI: https://be-it.no/
Description: A simple, single-page splash theme for be-it.no.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: landing-page, one-column, custom-background
Text Domain: beitsplash
*/

/* Resets and basic styling */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: 'Oxanium', sans-serif; /* Apply the original font */
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
}

/* * Main body styles 
 * - Uses a very dark blue background color.
 * - Uses flexbox to perfectly center the content.
*/
body {
    background: linear-gradient(to top, #E85D04 -15%, #4C2A85 10%, #0A0D1A 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Needed for the overlay */
    /* overflow: hidden; / Hide anything that might spill out */
}

/* Add a pseudo-element for the dark overlay */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #060810;
    z-index: 1;
    animation: fade-overlay 20s ease-in-out infinite;
}

/* New container to stack logo and button vertically */
.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem; /* Reduced space below slogan */
    position: relative;
    z-index: 2;
    padding: 0 1rem;
}

/* * Logo container */
.logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 0.5rem; /* Reduced gap below logo */
}

/* Wrapper for the symbol to apply its own shadow */
.logo-symbol-wrapper, .logo-text-wrapper {
    position: relative;
}

/* Create two separate fanned shadows */
.logo-symbol-wrapper::before, .logo-text-wrapper::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 600%; /* Wider to prevent cutoff */
    height: 150vh;
    z-index: -1;
    background: linear-gradient(to top, rgba(6, 8, 16, 0.25) 0%, transparent 50%); /* More subtle */
    filter: blur(3px);
}

/* Shadow for the text */
.logo-text-wrapper::before {
     clip-path: polygon(42% 100%, 58% 100%, 100% 0, 58% 0); /* Vertical left edge */
}

/* Shadow for the symbol */
.logo-symbol-wrapper::before {
    clip-path: polygon(42% 100%, 58% 100%, 42% 0, -100% 0); /* Vertical right edge, wider angle left */
}

/* * SVG logo symbol styling */
.logo-symbol {
    width: 58px;
    height: 58px;
    display: block;
}

/* Logo text styling */
.logo-text {
    font-size: 2.7rem;
    font-weight: 300;
    line-height: 1;
    color: #F9FAFB;
}

/* Summary text styling */
.summary-text {
    color: rgba(249, 250, 251, 0.9); /* Brighter for contrast */
    font-size: 1.25rem; /* Smaller size */
    font-weight: 300; /* Not bold */
    line-height: 1.6;
    text-align: center;
    max-width: 800px;
    margin: 0;
    letter-spacing: 1px;
}

/* Button container */
.button-container {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem; /* More space above buttons */
}

/* Button styling */
.contact-button {
    padding: 12px 32px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    background: #E85D04; /* New vibrant orange */
    border: 2px solid #E85D04;
    color: #FFFFFF; /* White text for better contrast */
    opacity: 0.9; /* Slightly transparent */
}
.contact-button:hover {
    opacity: 1; /* Solid on hover */
}
.contact-button:active {
    transform: translateY(1px);
}

/* Secondary button styling */
.contact-button-secondary {
    background: transparent;
    color: #F68E0A;
    border-color: #F68E0A;
}
.contact-button-secondary:hover {
    background: rgba(246, 142, 10, 0.1);
    color: #F89E21;
}

/* Keyframes for the background overlay fade */
@keyframes fade-overlay {
    0%, 100% {
        opacity: 0; /* Starts bright */
    }
    50% {
        opacity: 0.6; /* Fades to dark */
    }
}