/* Modern Corporate Bulma Theme
 *  Primary: #1a365d (Navy Blue)
 *  Secondary: #940000 (Deep Red)
 *  Background: #f0f4f8 (Light Blue Grey)
 *  Neutral: #718096 (Slate Grey)
 *  Text: #2d3748 (Dark Slate)
 */

/* Define custom properties (CSS variables) */
:root {
    /* Corporate color palette */
    --navy: #1a365d;
    --navy-light: #2a4a7a;
    --navy-dark: #102340;
    --deep-red: #940000;
    --deep-red-light: #b50000;
    --deep-red-dark: #730000;
    --light-blue-grey: #f0f4f8;
    --slate-grey: #718096;
    --dark-slate: #2d3748;

    /* Bulma's color variables */
    --primary: var(--navy);
    --link: var(--deep-red);
    --info: var(--navy-light);
    --success: #2c7a51;
    --warning: #c98900;
    --danger: var(--deep-red);
    --dark: var(--dark-slate);
    --text: var(--dark-slate);

    --bulma-label-color: var(--navy);

    /* Background colors */
    --background: var(--light-blue-grey);
    --scheme-main: var(--light-blue-grey);
    --scheme-main-bis: #e6eaef;
    --scheme-main-ter: #dde2e8;
}

/* Body and general styles */
body {
    background-color: var(--background);
    color: var(--text);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Typography customization */
h1,
h2,
h3,
h4,
h5,
h6,
.title,
.subtitle {
    color: var(--dark-slate);
}

strong {
    color: var(--dark-slate);
}

/* Link customization */
a {
    color: var(--deep-red);
}

a:hover {
    color: var(--deep-red-light);
}

/* Navbar customization */
.navbar-menu {
    padding-left: 1rem;
    padding-right: 1rem;
}

.navbar.is-primary {
    background-color: var(--navy);
}

.navbar.is-primary .navbar-brand > a.navbar-item,
.navbar.is-primary .navbar-brand .navbar-link,
.navbar.is-primary .navbar-burger,
.navbar.is-primary .navbar-menu .navbar-item,
.navbar.is-primary .navbar-menu .navbar-link {
    color: white;
}

.navbar.is-primary .navbar-brand > a.navbar-item:hover,
.navbar.is-primary .navbar-brand .navbar-link:hover,
.navbar.is-primary .navbar-burger:hover,
.navbar.is-primary .navbar-menu .navbar-item:hover,
.navbar.is-primary .navbar-menu .navbar-link:hover {
    background-color: var(--navy-light);
    color: white;
}

/* Button customization */
.button.is-primary {
    background-color: var(--navy);
    color: white;
}

.button.is-primary:hover {
    background-color: var(--navy-light);
}

.button.is-primary:focus {
    border-color: var(--navy-dark);
}

.button.is-secondary {
    background-color: var(--deep-red);
    color: white;
}

.button.is-secondary:hover {
    background-color: var(--deep-red-light);
}

.button.is-secondary:focus {
    border-color: var(--deep-red-dark);
    box-shadow: 0 0 0 0.125em rgba(148, 0, 0, 0.25);
}

/* Outline button styles */
.button.is-outline-primary {
    background-color: transparent;
    border-color: var(--navy);
    color: var(--navy);
}

.button.is-outline-primary:hover {
    background-color: var(--navy);
    color: white;
}

.button.is-outline-secondary {
    background-color: transparent;
    border-color: var(--deep-red);
    color: var(--deep-red);
}

.button.is-outline-secondary:hover {
    background-color: var(--deep-red);
    color: white;
}

/* Hero customization */
.hero.is-primary {
    background-color: var(--navy);
}

.hero.is-secondary {
    background-color: var(--deep-red);
    color: white;
}

.hero.is-secondary .title,
.hero.is-secondary .subtitle {
    color: white;
}

/* Card customization */
.card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: white;
}

.card .card-header {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.card.has-primary-border {
    border-top: 3px solid var(--navy);
}

.card.has-secondary-border {
    border-top: 3px solid var(--deep-red);
}

/* Secondary color classes */
.has-text-secondary {
    color: var(--deep-red) !important;
}

.has-background-secondary {
    background-color: var(--deep-red) !important;
    color: white !important;
}

.is-secondary {
    background-color: var(--deep-red) !important;
    color: white !important;
}

/* Tag customizations */
.tag.is-secondary {
    background-color: var(--deep-red);
    color: white;
}

/* Form elements */
.input:focus,
.textarea:focus,
.select select:focus {
    border-color: var(--navy);
    box-shadow: 0 0 0 0.125em rgba(26, 54, 93, 0.25);
}

/* Tables */
.table thead th {
    border-bottom: 2px solid var(--slate-grey);
    color: var(--dark-slate);
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
    background-color: #edf2f7;
}

/* Panel customizations */
.panel-heading {
    background-color: var(--navy);
    color: white;
}

.panel-block:hover {
    background-color: var(--light-blue-grey);
}

.panel-icon {
    color: var(--deep-red);
}

/* Message customizations */
.message.is-primary {
    background-color: #e6ebf4;
}

.message.is-primary .message-header {
    background-color: var(--navy);
    color: white;
}

.message.is-primary .message-body {
    border-color: var(--navy);
    color: var(--dark-slate);
}

.message.is-secondary {
    background-color: #ffe6e6;
}

.message.is-secondary .message-header {
    background-color: var(--deep-red);
    color: white;
}

.message.is-secondary .message-body {
    border-color: var(--deep-red);
    color: var(--dark-slate);
}

/* Notification customizations */
.notification.is-secondary {
    background-color: var(--deep-red);
    color: white;
}

/* Progress bar customizations */
.progress.is-secondary {
    background-color: #ffcccc;
}

.progress.is-secondary::-webkit-progress-value {
    background-color: var(--deep-red);
}

.progress.is-secondary::-moz-progress-bar {
    background-color: var(--deep-red);
}

.progress.is-secondary::-ms-fill {
    background-color: var(--deep-red);
}

/* Custom helper classes */
.section-divider {
    border-top: 1px solid var(--slate-grey);
    margin: 3rem 0;
}

/* Footer customization */
.footer {
    background-color: var(--dark-slate);
    color: white;
}

.footer a {
    color: var(--light-blue-grey);
}

.footer a:hover {
    color: white;
}

/* Enhance focus states for accessibility */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgba(26, 54, 93, 0.5);
    outline-offset: 2px;
}

h1::after {
    content: "";
    display: block;
    bottom: -10px;
    left: 0;
    width: 100%; /* Width of the gradient line */
    height: 7px; /* Thickness of the gradient line */
    background: linear-gradient(to left, var(--deep-red), #f39c12);
}

.content-article {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 0.9rem;
    font-variation-settings: "wdth" 100;
    line-height: 1.5rem;
}