/* 
    Created on : 31 May 2020, 13:58:46
    Author     : Joanna Hofmańska
*/

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@font-face {
    font-family: "Sono";
    src: url("../assets/googlefonts/Sono-VariableFont_MONO,wght.ttf") format("truetype");
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: "Roboto";
    src: url("../assets/googlefonts/Roboto-Regular.ttf") format("truetype");
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: "RobotoLight";
    src: url("../assets/googlefonts/Roboto-Light.ttf") format("truetype");
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    /* Calendar color palette */
    /* CSS HEX */
    --bubblegum-pink: #ef476fff;
    --coral-glow: #f78c6bff;
    --golden-pollen: #ffd166ff;
    --emerald: #06d6a0ff;
    --ocean-blue: #118ab2ff;
    --dark-teal: #073b4cff;
    --pine: #01796fff;
    --sea: #2E8B57ff;
    --indigo-velvet: #422680ff;
    --indigo-ink: #341671ff;
    --deep-twilight: #280659ff;
    --deep-purple: #660f56ff;
    --berry-crush: #ae2d68ff;
}

body {
    font-family: "RobotoLight", Arial, sans-serif;
    margin: 0px auto;
    color: black;
}

a, button {
    cursor: pointer;
}

a {
    color: black;
}

a, a:hover, a:visited, a:active {
    text-decoration: none;
}

/* Interactive elements that can benavigated using the keyboardshould be surrounded by a visualoutline whenever they arefocused. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
video:focus-visible {
    outline: 2px solid darkblue; /* Or any desired focus style */
    outline-offset: 2px;
}

a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid darkblue; /* Or any desired focus style */
    outline-offset: 2px;
}

.bg-bubblegum-pink {
    background-color: var(--bubblegum-pink);
}

.bg-coral-glow {
    background-color: var(--coral-glow);
}

.bg-golden-pollen {
    background-color: var(--golden-pollen);
}

.bg-emerald {
    background-color: var(--emerald);
}

.bg-ocean-blue {
    background-color: var(--ocean-blue);
}

.bg-dark-teal {
    background-color: var(--dark-teal);
}

.bg-sea {
    background-color: var(--sea);
}

.bg-berry-crush {
    background-color: var(--berry-crush);
}

.top-announcement {
    background-color: var(--dark-teal);
    text-align: center;
    font-size: 16px;
    color: white;
}

.skip {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background-color: lightcoral;
    border-radius: 3px;
}

.skip:focus {
    position: static;
    width: auto;
    height: auto;
}

.skip:focus-visible {
    outline: 2px solid darkblue; /* Or any desired focus style */
    outline-offset: 2px;
}

.logo {
    height: 40px;
}

.top-nav a {
    font-family: "Roboto", Arial, sans-serif;
    color: black;
    font-size: 20px;
}

a.nav-pioneersmenu {
    color: #146c43;
}

.cancelled {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    color: darkred;
    font-size: 30px;
    top: 0;
    left: 0;
    z-index: 10;
}

.cancelled span {
    font-size: 40px;
}

.top-socials i{
    font-size: 22px;
    margin-left: 6px;
}

.product img{
    width: 100%;
    border-radius: 21px;
    margin-bottom: 10px;
}

footer {
    margin: 0px auto;
    width: 100%;
    text-align: center;
    font-family: "Sono", Arial, sans-serif;
}

/* Calendar */
/* Position the event tag absolutely in the top left corner of the card */
.card .event-tag {
    position: absolute;
    top: 0;
    left: 0;
    border-bottom-right-radius: 0.5rem;
    z-index: 2;
    font-size: 0.85rem;
}

/* Ensure the card maintains positioning context for the absolute tag */
.card {
    position: relative;
}

/* Enhance shadows on hover for a cleaner look */
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease-in-out;
}