/* Professional Color Palette Variables */
:root {
    --primary-blue: #345D8E; /* A deep, professional blue */
    --primary-blue-light: #527BAA; /* Lighter for hover states */
    --primary-blue-dark: #24466B;  /* Darker for active states */
    --text-dark: #333333;          /* Dark text for readability */
    --text-light: #6c757d;         /* Lighter grey for secondary text */
    --background-light: #e3eaf6;   /* Very subtle off-white background */
    --card-background: #ffffff;    /* Pure white for cards/boxes */
    --border-color: #e0e0e0;       /* Light grey for subtle borders */
    --shadow-subtle: rgba(0, 0, 0, 0.05); /* Very light shadow */
    --shadow-medium: rgba(0, 0, 0, 0.1);  /* Slightly more pronounced shadow */
}

/* General Body and Typography */
body {
    font-family: 'Montserrat', Arial, sans-serif;
    background-color: var(--background-light);
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased; /* Smoother font rendering */
    -moz-osx-font-smoothing: grayscale;
}

/* Header Styling */
.site-header {
    background: var(--card-background);
    box-shadow: 0 4px 10px var(--shadow-subtle); /* Refined shadow */
    padding: 0.75rem 0; /* Adjusted padding */
    border-bottom: 1px solid var(--border-color); /* Subtle border */
}
.site-header .container {
    padding: 0.5rem 1.5rem; /* Padding inside header container */
}

.site-title {
    font-size: 2.2rem; /* Slightly larger for impact */
    font-weight: 700;
    color: var(--primary-blue); /* Professional blue for title */
    margin-bottom: 0.1rem; /* Closer to subtitle */
}

.site-subtitle {
    color: var(--text-light);
    font-size: 1rem; /* Slightly smaller for professionalism */
    margin-top: 0;
    opacity: 0.9; /* Slightly faded */
}

/* Navbar Styling */
.navbar {
    background: transparent;
    box-shadow: none;
    padding: 0; /* Remove Bulma default navbar padding */
}
.navbar-item, .navbar-link {
    font-weight: 500;
    color: var(--text-dark) !important; /* Ensure visibility */
    transition: color 0.3s ease, background-color 0.3s ease;
    padding: 0.75rem 1rem; /* Standard Bulma navbar item padding */
    border-radius: 4px; /* Subtle rounding */
}
.navbar-item:hover, .navbar-link:hover {
    color: var(--primary-blue) !important;
    background: var(--background-light); /* Subtle hover background */
}
.navbar-burger {
    color: var(--text-dark); /* Ensure burger icon is visible */
}
.navbar-menu.is-active {
    background-color: var(--card-background); /* Background for mobile menu */
}

/* Main Content Box (for homepage .box and general content) */
.main-content-box,
.box { /* Apply to Bulma's .box as well for consistency */
    background: var(--card-background);
    border-radius: 10px; /* Consistent rounding */
    box-shadow: 0 6px 20px var(--shadow-medium); /* More professional shadow */
    padding: 3rem; /* Increased padding for spacious feel */
    margin-top: 2.5rem; /* Adjusted top margin */
    border: 1px solid var(--border-color); /* Subtle border */
}

/* Specific styles for homepage card title/subtitle in Bulma's .box */
.box .title.is-4 {
    color: var(--text-dark);
    font-size: 2rem;
    margin-bottom: 1.25rem; /* Increased margin-bottom for spacing */
    font-weight: 600;
}
.box .subtitle.is-6 {
    color: var(--text-light);
    font-size: 1.1rem;
    margin-bottom: 2.5rem; /* Increased margin-bottom for spacing */
}

/* Override Bulma's .button.is-link for Professional Look */
.button.is-link {
    background-color: var(--primary-blue);
    border-color: transparent;
    color: #ffffff; /* White text on dark button */
    font-weight: 600; /* Bolder text for professionalism */
    padding: 1rem 2rem; /* Larger buttons */
    font-size: 1.15rem; /* Professional font size */
    border-radius: 8px; /* Slightly more rounded */
    box-shadow: 0 4px 15px var(--shadow-medium); /* Prominent button shadow */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.button.is-link:hover,
.button.is-link.is-hovered {
    background-color: var(--primary-blue-light);
    transform: translateY(-3px); /* Subtle lift on hover */
    box-shadow: 0 8px 20px var(--shadow-medium); /* Enhanced shadow on hover */
}

.button.is-link:active,
.button.is-link.is-active {
    background-color: var(--primary-blue-dark);
    transform: translateY(0);
    box-shadow: 0 2px 5px var(--shadow-medium); /* Compressed shadow on click */
}

/* General Link Styling (e.g., Privacy Policy) */
.has-text-grey-light {
    color: var(--text-light) !important;
}
.has-text-grey-light:hover {
    color: var(--primary-blue) !important;
    text-decoration: underline;
}

/* Footer Styling */
footer {
    margin-top: 4rem; /* More space from content */
    background: var(--card-background);
    color: var(--text-light);
    text-align: center;
    padding: 1.5rem 0; /* More padding */
    font-size: 0.9rem;
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -2px 10px var(--shadow-subtle); /* Shadow at the top */
}

/* Responsive Adjustments */
@media (max-width: 768px) { /* Target screens smaller than 769px (mobile/tablet) */
    .site-header .container {
        flex-direction: column; /* Stacks items vertically */
        text-align: center; /* Centers the whole container content */
    }
    .site-header .container > div { /* Targets the div containing title/subtitle */
        text-align: center; /* Explicitly centers the text within this specific div */
    }
    .site-title {
        font-size: 1.8rem;
        margin-bottom: 0.5rem; /* Add some space below title */
    }
    .site-subtitle {
        font-size: 0.9rem;
    }
    .main-content-box,
    .box {
        padding: 2rem 1.5rem;
        margin-top: 1.5rem;
    }
    .box .title.is-4 {
        font-size: 1.8rem;
        margin-bottom: 1rem; /* Adjusted for mobile view */
    }
    .box .subtitle.is-6 {
        font-size: 1rem;
        margin-bottom: 2rem; /* Adjusted for mobile view */
    }
    .button.is-link {
        padding: 0.9rem 1.8rem;
        font-size: 1rem;
    }
}
@media (max-width: 480px) { /* Even smaller screens */
    .navbar {
        width: 100%;
        margin-top: 0.5rem;
    }
    .navbar-menu {
        box-shadow: 0 2px 5px var(--shadow-subtle);
        border-radius: 8px;
    }
    .navbar-item, .navbar-link {
        text-align: center;
    }
}

.about-section:not(:last-child) {
    margin-bottom: 2.5em;
}