/* 8124-06 CareFree Cloud CSS */
/* 2024-01-05 */
/* By Andrew Rayner */
/* andrew@ardesign.co.uk */



/* ============ Typography ============ */

:root { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  :root { font-family: 'Inter var', sans-serif; }
}





/* ============ Colors ============ */


/* ===== Variables ===== */


/* === Brand colours === */

:root {
    --CF-blue: #00293D;
    --CF-honey: #F2B430;

}


/* === Greys === */

:root {
    --dark-grey: #7a7a7a;
    --mid-grey: #cecece;
    --light-grey: #f6f6f6;
}


/* === Extended palette colours === */

:root {
    --red: #D94038;
    --cerise: #E2528E;
    --purple: #8D3587;
    --turquoise: #51A3B0;
    --green: #4AB486;
}


/* === Shades === */


/* = Blues = */

:root {
    --blue-1: #00141F;
    --blue-2: #00293D;
    --blue-3: #00527A;
    --blue-4: #007AB8;
    --blue-5: #00A3F5;
}

/* = Honeys = */
:root {
    --honey-1: #735107;
    --honey-2: #AD790B;
    --honey-3: #F2B430;
    --honey-4: #F7CE79;
    --honey-5: #FAE3B2;
}

/* = Reds = */
:root {
    --red-1: #4D120F;
    --red-2: #671814;
    --red-3: #9A241D;
    --red-4: #D94038;
    --red-5: #DE5B54;
}

/* = Cerises = */
:root {
    --cerise-1: #691236;
    --cerise-2: #9D1A51;
    --cerise-3: #D2236C;
    --cerise-4: #E2528E;
    --cerise-5: #EA85AF;
}


/* = Purples = */
:root {
    --purple-1: #2C112B;
    --purple-2: #592155;
    --purple-3: #8D3587;
    --purple-4: #B243AA;
    --purple-5: #C76BC1;
}


/* = Turquoises = */
:root {
    --turquoise-1: #215259;
    --turquoise-2: #327A85;
    --turquoise-3: #51A3B0;
    --turquoise-4: #6BBBC7;
    --turquoise-5: #97CFD8;
}

/* = Green = */
:root {
    --green-1: #215941;
    --green-2: #328561;
    --green-3: #4AB486;
    --green-4: #6BC79F;
    --green-5: #97D8BC;
}


/* === Primary colours === */

:root {
    --primary-color: var(--CF-blue);
    --secondary-color: var(--CF-honey);
    --text-color: var(--dark-grey);
    --accent-color: var(--brand-honey);
}


/* === Fades === */

.fade-blue { 
    background-image: linear-gradient(to right, var(--blue-1), var(--blue-5));
}

.fade-honey { 
    background-image: linear-gradient(to right, var(--honey-1), var(--honey-5));
}

.fade-red { 
    background-image: linear-gradient(to right, var(--red-1), var(--red-5));
}

.fade-cerise { 
    background-image: linear-gradient(to right, var(--cerise-1), var(--cerise-5));
}

.fade-purple { 
    background-image: linear-gradient(to right, var(--purple-1), var(--purple-5));
}

.fade-turquoise { 
    background-image: linear-gradient(to right, var(--turquoise-1), var(--turquoise-5));
}

.fade-green { 
    background-image: linear-gradient(to right, var(--green-1), var(--green-5));
}




/* ============ spacing ============ */

:root {
    --spacing-xxs: 4px; /* Extra extra small: 8px / 2 */
    --spacing-xs: 8px; /* Extra small: 8px */
    --spacing-sm: 16px; /* Small: 8px * 2 */
    --spacing-md: 24px; /* Medium: 8px * 3 */
    --spacing-lg: 32px; /* Large: 8px * 4 */
    --spacing-xl: 40px; /* Extra large: 8px * 5 */
    --spacing-xxl: 48px;
   
}


/* ============ Text ============ */

body {
color: var(--text-color);
font-weight: 500;


}

p {


}

a { color: var(--blue-3);}
a:hover, a:active {
    color: var(--blue-5);
   }

h1 {
    color: var(--primary-color);
    font-weight: 600;
}

h2 {
    color: var(--primary-color);
    font-weight: 600;
}

h3 {
    color: var(--primary-color);
    font-weight: 600;
    padding-top: var(--spacing-sm);
}

h4 {
    color: var(--primary-color);
    font-weight: 600;
}


h5 {
    color: var(--primary-color);
    font-weight: 600;
}

h6 {
    color: var(--primary-color);
    font-weight: 600;
}


/* ====== Special Text ====== */

.section-title {
    color: var(--blue-5);
}

.white {
    color: #fff;
}



/* ============ Components ============ */

:root {
    background: var(--light-grey);
   /* padding: var(--spacing-md); */

}



div.panel {
    background: white;
    border-radius: var(--spacing-xs);
    padding: var(--spacing-md);
    margin: var(--spacing-md);



}


/* ======= page header ======= */

.site-header {
    background-color: var(--CF-blue); /* Adjust the color as needed */
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-sm); /* Adjust padding as needed */
    margin-top: 0;
}

.header-content {
    display: flex;
    align-items: baseline;
    
  
}

.logo {
    width: var(---spacing-xl); /* Adjust the size of your logo */
    height: auto;
    margin-right: var(--spacing-md); /* Space between logo and heading */
}

.version {
    Padding-left: var(--spacing-sm);
    color: white;
}


nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Aligns the menu items horizontally */
    justify-content: left; /* Center the menu items */
}

nav ul li {
    margin: 0 var(--spacing-xs); /* Adds horizontal space between menu items */
}

nav a {
    color: white; /* Adjust link color as needed */
    text-decoration: none;
    padding: 10px 15px; /* Adjust padding as needed */
    display: block;
}

nav a:hover {
    color: white;
    background-color: var(--blue-3); /* Change color on hover, adjust as needed */
    border-radius: 5px; /* Optional rounded corners on hover */
}





/* ======= Typography blocks ======= */

.typography-sample {
    margin-left: var(--spacing-xxl);
    margin-bottom: var(--spacing-xl);
}





/* ======= Container ======== */

.container {
    padding: var(--spacing-md);
}



/* ======= Swatches blocks ======= */

.color-swatch-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Aligns items to the start of the container */
    gap: var(--spacing-md); /* Space between swatches */
}

.color-swatch {
    width: calc(var(--spacing-xl) * 3.5); /* Adjust as needed */
    margin-bottom: var(--spacing-md);
    border: 2px solid #000; 

}

.button-color {
    border: 4px solid #000; 
}

.color-block {
    width: 100%;
    height: calc(var(--spacing-xl) * 3.5); /* Adjust as needed */
    
}

.color-info {
    background-color: #fff;
    color: #000;
    text-align: left;
    padding: var(--spacing-xs);
    
   
    font-size: var(--spacing-md); /* Adjust as needed */
    min-height: var(--spacing-lg);
}

.color-name {
    font-weight:300;
    font-size: var(--spacing-sm);

}

.color-val {
    font-weight:600;
    font-size: var(--spacing-md);
    
}


.fade-box {
    display: block;
    width: 700px; /* Adjust as needed */
    height: 100px; /* Adjust as needed */
   
    
}




/* ======= Buttons ======= */

/* General button styling */
button {
    
    font-size: 1rem; /* Adjust as needed */
    font-weight:600;
    padding: var(--spacing-sm) var(--spacing-sm); /* Adjust as needed */
    border: none;
    border-radius: var(--spacing-xs); /* Adjust for rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

/* Primary button style */
.btn-primary {
    background-color: var(--blue-3); /* Your primary color */
    color: white;
}

.btn-primary:hover {
    background-color: var(--blue-2); /* Darker shade for hover state */
}

.btn-primary:active {
    background-color: var(--blue-4); /* Even darker for active state */
}


/* Secondary button style */
.btn-secondary {
    border: 2px solid;
    border-color: var(--blue-3);
   
    color: var(--blue-3);
}

.btn-secondary:hover {
  
    background-color: var(--blue-3); 
    color: white;
}

.btn-secondary:active {
  
    background-color: var(--blue-4);
    border-color: var(--blue-4);
}


/* ==== Buttons colours ==== */

/* == Blue == */
.btn-blue {
    background-color: var(--blue-3);
}

.btn-blue:hover {
    background-color: var(--blue-2)
}

.btn-blue:active {
    background-color: var(--blue-4);
}

/* == Honey == */
.btn-honey {
    background-color: var(--honey-3);
}

.btn-honey:hover {
    background-color: var(--honey-2)
}

.btn-honey:active {
    background-color: var(--honey-4);
}


/* == Red == */
.btn-red {
    background-color: var(--red-4);
}

.btn-red:hover {
    background-color: var(--red-3);
}

.btn-red:active {
    background-color: var(--red-5);
}


/* == Cerise == */
.btn-cerise {
    background-color: var(--cerise-4);
}

.btn-cerise:hover {
    background-color: var(--cerise-3);
}

.btn-cerise:active {
    background-color: var(--cerise-5);
}


/* == Purple == */
.btn-purple {
    background-color: var(--purple-3);
}

.btn-purple:hover {
    background-color: var(--purple-2);
}

.btn-purple:active {
    background-color: var(--purple-4);
}

/* == Turquoise == */
.btn-turquoise {
    background-color: var(--turquoise-3);
}

.btn-turquoise:hover {
    background-color: var(--turquoise-2);
}

.btn-turquoise:active {
    background-color: var(--turquoise-4);
}

/* == Green == */
.btn-green {
    background-color: var(--green-3);
}

.btn-green:hover {
    background-color: var(--turquoise-2);
}

.btn-green:active {
    background-color: var(--green-4);
}




/* ======= Logos ======= */

.logo-sample {
    padding: var(--spacing-sm);
     margin: var(--spacing-sm);  /* Space between each logo sample */
}

.logo-sample img, .logo-sample svg {
    display: block; /* Ensures the logo is properly aligned */
  /*  margin: 0 auto;*/  /* Centers the logo */
   width: 400px;  /* Adjust as needed */
    height: auto; /* Maintains the aspect ratio */
    align-items: left;
}

.logo-sample.dark {
    background: var(--CF-blue);
}

.logo-sample.light {
    
        background: white;
    }



.logo-example-fade { 
    background-image: linear-gradient(to right, 
        var(--blue-1), 
        var(--blue-1) 50%, /* End the first color at this % */
        var(--blue-5) 90%); /* Start the second color at this % */
}

/* ======= icon section ======= */

.icon-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Aligns items to the start of the container */
    gap: var(--spacing-md);
    
}

.icon-sample img, .icon-sample svg {
    display: block; /* Ensures the logo is properly aligned */
  /*  margin: 0 auto;*/  /* Centers the logo */
   width: 100px;  /* Adjust as needed */
    height: auto; /* Maintains the aspect ratio */
    align-items: left;
}

.icon-sample.dark {
    padding: var(--spacing-xl);
        background: var(--CF-blue);
    }

    .icon-sample.light {
        padding: var(--spacing-xl);
            background: white;
        }


    img.logo {
        height: var(--spacing-xxl);
    }
    
    .icon-img {
        width: 100px; /* for the SVG icon */
        height: auto; 
    }