/* Importing the Raleway font */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');

/* Definition of variables */
:root {
    /* Colors */
    --bleu-anthracite: #25303B;
    --blanc: #FFFFFF;
    --bleu-interaction: #1972D2;
    --bleu-focus: #0050AA;
    --bleu-clair: #F0F8FF;
    
    /* Typography */
    --font-main: 'Raleway', sans-serif;
    
    /* Spacing */
    --button-padding-y: 10px;
    --button-padding-x: 20px;
    
    /* Borders */
    --border-radius-button: 6px;
}

/* Applying the Raleway font to the entire site */
body, h1, h2, h3, h4, h5, h6, p, a, button, input, textarea, select, span, div {
    font-family: var(--font-main) !important;
}

/* Main text color (body) */
body {
    color: var(--bleu-anthracite);
}

/* Style of all header elements in white and bold */
#gh-head,
#gh-head * {
    color: var(--blanc);
    font-weight: 700 !important;
}

/* Button styles */
body {
    .btn,
    .gh-btn,
    .gh-btn-primary,
    .kg-btn,
    .kg-btn-primary,
    button.accent,
    .btn-accent,
    .gh-btn-accent,
    .kg-btn-accent,
    a.kg-btn-accent,
    a.accent-button,
    .accent-button,
    .footer-cta-button span,
    .kg-button-card a.kg-btn-accent,
    button,
    input[type="button"],
    input[type="submit"],
    .ghost-button,
    .button,
    .gh-head-button {
        /* Background color */
        background-color: var(--bleu-interaction);
        
        /* Text color */
        color: var(--blanc);
        
        /* Internal margins */
        padding: var(--button-padding-y) var(--button-padding-x);
        
        /* Rounded corners */
        border-radius: var(--border-radius-button);
        
        /* Text alignment */
        text-align: center;
        
        /* Remove default border */
        border: none;
        
        /* Smooth transition */
        transition: background-color 0.3s ease, color 0.3s ease;

        &:hover {
            background-color: var(--bleu-focus);
        }
    }
}

/* Header button styles */
#gh-head .btn,
#gh-head input[type="button"],
#gh-head input[type="submit"],
#gh-head .ghost-button,
#gh-head .button,
#gh-head .gh-head-button {
    /* Background color */
    background-color: var(--blanc);
    
    /* Text color */
    color: var(--bleu-interaction);

    &:hover {
        color: var(--bleu-focus);
    }
}

.kg-signup-card-text.ghost-subscribe{
    align-items: center;
}

.kg-signup-card-form {
    justify-content: center;
}

.kg-signup-card-heading {
    text-align: center;
}


.post-template .article {
    padding: 0;
}

.article-header-content {
    padding: max(8vmin, 40px) 0 max(8vmin, 64px);
    background-color: var(--bleu-clair);
    box-shadow: 0 0 0 100vmax var(--bleu-clair);
    clip-path: inset(0 -100vmax);
}