@charset "UTF-8";
/**
 *  @package mariart
 *
 *  This class sets up our base styles for the Mariart system.
 */

/*  ********************************************************************************  **

    CSS variables

**  ********************************************************************************  */

:root {
    
    /*  **********  Colours  **********  */
    
    --mariart-colour-black: #000000;
    --mariart-colour-dark-grey: #333333;
    --mariart-colour-mid-grey: #888888;
    --mariart-colour-light-grey: #F5F5F5;
    --mariart-colour-white: #FFFFFF;
    
    --mariart-colour-primary: #A9AD00;
    --mariart-colour-secondary: #343E46;
    --mariart-colour-text: var(----mariart-colour-dark-grey);
    
    --mariart-colour-error: #FF0000;
    --mariart-colour-warning: #FFCC00;
    --mariart-colour-notice: #000099;
    --mariart-colour-success: #00AA00;
    
    
    
    
    /*  **********  Fonts  *********  */
    
    --mariart-font-family-text: Arial, sans-serif;
    --mariart-font-family-heading: Georgia, serif;
    
    --mariart-line-height-text: 1.4em;
    --mariart-line-height-heading: 1.2em;
    
    --mariart-margin-p: 15px;
    --mariart-margin-li: 5px;
    --mariart-margin-heading: 35px 0 20px 0;
    
    --mariart-font-weight-thin: 100;
    --mariart-font-weight-extra-light: 200;
    --mariart-font-weight-light: 300;
    --mariart-font-weight-normal: normal;
    --mariart-font-weight-medium: 500;
    --mariart-font-weight-semi-bold: 600;
    --mariart-font-weight-bold: bold;
    --mariart-font-weight-extra-bold: 800;
    --mariart-font-weight-black: 900;
    
    --mariart-font-size-small: 14px;
    --mariart-font-size-p: 16px;
    --mariart-font-size-h6: 18px;
    --mariart-font-size-h5: 20px;
    --mariart-font-size-h4: 24px;
    --mariart-font-size-h3: 28px;
    --mariart-font-size-h2: 32px;
    --mariart-font-size-h1: 40px;
    
}




/*  ********************************************************************************  **

    Standard HTML tags

**  ********************************************************************************  */

body {
    margin: 0;
    padding: 0;
    font-size: var(--mariart-font-size-p);
    font-family: var(--mariart-font-family-text);
    font-weight: var(--mariart-font-weight-normal);
    background: var(--mariart-colour-white);
    color: var(--mariart-color-text);
}
a {
    color: var(--mariart-colour-secondary);
}




/*  ********************************************************************************  **

    Font styles

**  ********************************************************************************  */

p,
li {
    font-size: var(--mariart-font-size-p);
    line-height: var(--mariart-line-height-text);
}
p {
    margin: var(--mariart-margin-p) 0;
}
li {
    margin: var(--mariart-margin-li) 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--mariart-font-family-heading);
    font-weight: var(--mariart-font-weight-medium);
    line-height: var(--mariart-line-height-heading);
    margin: var(--mariart-margin-heading);
}
h1,
h1.h2 {
    font-size: var(--mariart-font-size-h1);
}
h2,
h2.h1  {
    font-size: var(--mariart-font-size-h2);
}
h3 {
    font-size: var(--mariart-font-size-h3);
}
h4 {
    font-size: var(--mariart-font-size-h4);
}
h5 {
    font-size: var(--mariart-font-size-h5);
}
h6 {
    font-size: var(--mariart-font-size-h6);
}
p:first-child,
li:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
    margin-top: 0;
}
p:last-child,
li:last-child,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
    margin-bottom: 0;
}




/*  ********************************************************************************  **

    Sticky Header

**  ********************************************************************************  */

.sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transition: transform 0.3s ease;
}

.sticky-header.is-hidden {
    transform: translateY(-100%);
}