/***** COLORS CSS *****/

:root {
    /* Color variables */
    --color-primary: #0080c9;
    --color-secondary: #62B4FF;
    --color-tertiary: #D9F3FF;
    --color-accentuary: #E09F1F;
    --color-accentuary-2: #00659e;
    --color-special: #002763;
    --color-white: #FFFFFF;
    --color-black: #212529;
    --color-grey-medium: #8B8D8E;
    --color-grey-light: #DDDDDD;
    --color-grey-dark: #575756;
    /*--color-grey-dark: #3D4856;*/
}

.bg-color-primary {
    background-color: var(--color-primary) !important;
}

.bg-color-secondary {
    background-color: var(--color-secondary) !important;
}

.bg-color-tertiary {
    background-color: var(--color-tertiary) !important;
}

.bg-color-accentuary {
    background-color: var(--color-accentuary) !important;
}

.bg-color-special {
    background-color: var(--color-special) !important;
}

.bg-color-grey-medium {
    background-color: var(--color-grey-medium) !important;
}

.bg-color-grey-dark {
    background-color: var(--color-grey-dark) !important;
}

.bg-color-grey-light {
    background-color: var(--color-grey-light) !important;
}

.color-white {
    color: var(--color-white) !important;
}

.color-special {
    color: var(--color-special) !important;
}

.fill-color-white {
    fill: var(--color-white);
}

.fill-color-special {
    fill: var(--color-special);
}

.border-white {
    border-style: solid !important;
    border-width: 1px !important;
    border-color: var(--color-white) !important;
}

/***** Fonts *****/

@font-face {
    font-family: 'GoogleFontsRoboto';
    src: url('/fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'GoogleFontsRobotoSlab';
    src: url('/fonts/RobotoSlab-Regular.ttf') format('truetype');
}

/***** Basic CSS *****/

html {
    scroll-behavior: smooth;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
}

body, p, li, a, form {
    font-family: 'GoogleFontsRoboto', sans-serif;
    font-weight: normal;
    color: var(--color-black);
}

h1, h2, h3, h4, h5 {
    font-family: 'GoogleFontsRobotoSlab', serif;
    color: var(--color-black);
    font-weight: bold;
}

h5 {
    color: var(--color-primary) !important;
}

a, a:active {
    color: var(--color-primary);
}

a:visited {
    color: var(--color-accentuary);
}

button {
    font-family: 'GoogleFontsRoboto', sans-serif;
    font-weight: normal;
    background-color: var(--color-primary) !important;
    border: 0 !important;
}

button:hover {
    background-color: var(--color-accentuary-2) !important;
}

sup {
    color: var(--color-accentuary);
}

/***** NAVBAR CSS *****/

nav a {
    font-family: 'GoogleFontsRobotoSlab', serif;
    color: var(--color-white) !important;
}

nav a:hover {
    color: var(--color-tertiary) !important;
}

nav .dropdown-menu, nav .dropdown-item:hover {
    background-color: var(--color-primary) !important;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/***** FOOTER CSS *****/

footer h1, footer h2, footer h3, footer h4, footer h5, footer p, footer a {
    color: var(--color-white) !important;
}

footer ul {
    list-style-type: none;
    /* Remove default bullet points */
    padding-left: 0;
    /* Optional: removes default padding */
}

footer ul li {
    position: relative;
    /* Needed for absolute positioning of the pseudo-element */
    padding-left: 20px;
    /* Space for the custom bullet */
}

footer ul li::before {
    content: '•';
    /* Bullet character */
    color: var(--color-white);
    /* Bullet color */
    position: absolute;
    left: 0;
    /* Align the bullet to the left */
    top: 0;
    /* Align the bullet to the top */
}

/***** TABLE CSS *****/

table {
    font-family: 'GoogleFontsRoboto', sans-serif;
    color: var(--color-black);
}

th, td {
    background-color: var(--color-white);
    padding: 6px;
}

.table-header {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    font-weight: bold;
}

.table-subheader {
    background-color: var(--color-grey-dark) !important;
    color: var(--color-white) !important;
    font-weight: bold;
}

.table-bottom-border {
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    border-bottom-color: var(--color-grey-light) !important;
}

.table-top-border-dashed {
    border-top-style: dashed !important;
    border-top-width: 1px !important;
    border-top-color: var(--color-grey-light) !important;
}

.table-top-border-solid {
    border-top-style: solid !important;
    border-top-width: 1px !important;
    border-top-color: var(--color-grey-light) !important;
}

.table-col-width-40 {
    width: 40% !important;
}

.table-col-width-33 {
    width: 33% !important;
}

.table-col-width-15 {
    width: 15% !important;
}

.table-col-center {
    text-align: center !important;
}

.table-col-right {
    text-align: right !important;
}

.table-col-left {
    text-align: left !important;
}

/* Used for schedule table */
.table-td-block-karate {
    border-style: solid;
    border-width: 1px;
    border-color: var(--color-white);
    background-color: var(--color-primary) !important;
    color: var(--color-white);
    font-size: 12px;
    vertical-align: top;
}

/* Used for schedule table */
.table-td-block-iaido {
    border-style: solid;
    border-width: 1px;
    border-color: var(--color-white);
    background-color: var(--color-grey-dark) !important;
    color: var(--color-white);
    font-size: 12px;
    vertical-align: top;
}

/* Used for schedule table */
.table-td-block-others {
    border-style: solid;
    border-width: 1px;
    border-color: var(--color-white);
    background-color: var(--color-accentuary) !important;
    color: var(--color-white);
    font-size: 12px;
    vertical-align: top;
}

/* Used for schedule table */
.table-td-first {
    background-color: var(--color-white) !important;
    color: var(--color-grey-light);
    font-size: 10px;
    vertical-align: top;
}

/***** NEWS CSS *****/

.news-headline {
    font-size: 20px;
    font-family: 'GoogleFontsRobotoSlab', sans-serif;
    font-weight: bold;
    color: var(--color-black);
    scroll-margin-top: 100px;
}

.news-date {
    font-size: 14px;
    font-family: 'GoogleFontsRoboto', sans-serif;
    font-weight: bold;
    color: var(--color-primary);
    margin-block-end: 1em;
}

/***** MAP CSS *****/

.map {
    filter: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="g"><feColorMatrix type="matrix" values="0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0.3 0.3 0.3 0 0 0 0 0 1 0"/></filter></svg>#g');
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
    border-style: none !important;
}

/***** FORM CSS *****/

.input-container {
    position: relative;
}

input, textarea {
    height: 48px;
    width: 280px;
    border: 1px solid var(--color-grey-light);
    border-radius: 0px !important;
    box-sizing: border-box;
    padding: 16px;
}

.label {
    font-family: 'GoogleFontsRoboto', sans-serif;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 16px;
    display: flex;
    align-items: center;
    pointer-events: none;
}

input, .label .text {
    font-family: 'GoogleFontsRoboto', sans-serif;
    font-size: 16px;
}

input:focus {
    outline: none;
    border: 2px solid var(--primary);
}

input:focus+.label .text {
    font-size: 12px;
    transform: translate(0, -50%);
    background-color: var(--white);
    padding-left: 4px;
    padding-right: 4px;
    color: #0080c9;
}

.label .text {
    transition: all 0.15s ease-out;
}

input:focus+.label .text, :not(input[value=""])+.label .text {
    font-size: 12px;
    transform: translate(0, -150%);
    background-color: var(--white);
    padding-left: 4px;
    padding-right: 4px;
}

input:focus+.label .text {
    color: #0080c9;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    /* This centers the items horizontally within the form */
    align-items: center;
    /* This centers the items vertically if their heights differ */
    gap: 20px;
}

.newsletter-input {
    max-width: 500px;
}

/***** HERO CSS *****/
/***** https://webdesign.tutsplus.com/how-to-build-a-landing-page-with-bootstrap-4--cms-32519t *****/

.scroll .hero {
    transform: scale(0.98);
}

.hero {
    background-attachment: fixed;
    transition: transform 0.5s ease-in-out;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.hero .container-fluid {
    z-index: 10;
}

.cover {
    background: no-repeat center/cover;
}

/***** HELPER *****/

/* Avoid overlay of target navigation with header when using in-document links */
.scroll-margin {
    scroll-margin-top: 90px;
}

/***** Card CSS *****/

.cards-container {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.card {
    flex: 1;
}

.card-center {  
    justify-content: center; /* This centers the items horizontally within the form */
    align-items: center; /* This centers the items vertically if their heights differ */
}

.card-left {
    text-align: left;
}

.card-body {
    flex: 1;
}

/***** List CSS *****/

.link-list {
    margin-bottom: 20px;
    /* Space between items */
    border-bottom: 1px solid #ccc;
    /* Adds a bottom border to each item */
    padding-bottom: 20px;
    /* Adds space between the item content and its border */
}