/*
 * PROMĚNNÉ A GLOBÁLNÍ STYLY (BARVY, PÍSMA, ZÁKLADNÍ NASTAVENÍ)
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');

:root {
    --font-family-headings: 'Roboto Slab', serif;    
    --font-family-body: 'Roboto', sans-serif;                                          

    --color-main: #c5dac0;
    --color-main-accent: #408530;
    
    --color-alt: #FFF4E0;                   
    --color-alt-accent: #E0B565;     
    --color-alt-accent-hover: #408530;

    --color-bg-main: white;

    --color-bg--content: #ebeefb;    
    
    --color-grey: #f6f6f6;

    --color-text-main: #02020f;
    --color-text-muted: #41454b;  
    
    --border-radius-container: 2rem;
    --border-radius-btn: 0.5rem;
    
    
}

.color--color-alt-accent {
    color: var(--color-alt-accent)
}

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

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

.nena-outline--box-shadow {
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
}

.nena-outline--main-accent {
    border: 2px solid var(--color-main-accent)
}

.nena-container {
    border-radius: var(--border-radius-container);
    padding: 1.5rem;
}

.table {
    --bs-table-striped-bg: #fceeed;         /* autumn-fire-50  */
    --bs-table-hover-bg: #f8dcdb;           /* autumn-fire-100  */
    --bs-table-hover-color: var(--color-text-main);
}

body {
    font-family: var(--font-family-body);
    color: var(--color-text-main);    
    font-size: 100%;
    line-height: 1.6;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    /* background-color: white; */
    /* padding-top: 90px; /* Pro nav – .fixed-top*/
}

/*
nav {
    background-color: white;
}
*/

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

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


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

.sma-color-main {
    color: var(--color-main);
}

.sma-color-alt {
    color: var(--color-alt);
}

/*
 * RESETY A NORMALIZACE (PŘESTYLOVÁNÍ HTML ELEMENTŮ)
 */

section li {
    padding: 0.5rem;
}

.rounded {
    border-radius: 1rem!important;
}

/*
 * TYPOGRAFIE (NADPISY, ODSTAVCE, TEXTY) - !CONTENTS!
 */

.sma-b {
    font-weight: 700;
}

.sma-i {
    font-style: italic;
}

.sma-u {
    text-decoration: underline;
}

.sma-small {
    font-size: 75%;
}

.blockquote-footer {
    color: var(--color-text-muted);
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
    font-family: var(--font-family-headings);
    color: var(--color-text-main);
    font-weight: 700;
    text-align: left;
    margin-bottom: 2rem;
}

.h1, 
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--font-family-headings);
    color: var(--color-text-main);
    font-weight: 700;
}

.sma-text--gradient {
    background: linear-gradient(90deg, var(--color-main), var(--color-alt));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sma-text--muted {
    color: var(--color-text-muted)!important;
}

/*
 * ODKAZY
 */

a {
    color: var(--color-text-main);
    text-decoration: underline;
}

a:hover {
    color: var(--color-text-muted);
}

/*
 * LAYOUT & GRID (max-width, zarovnání, okraje) - !CONTAINERS!
 */
section {
    margin: 3rem 0;
}

footer {
    /* background-color: var(--color-alt); */
    color: var(--color-text-muted);
    font-size: 75%;
    text-align: center;
    margin-top: 2rem;
}

/* Používat už Gutters!
.row .col {
    padding-top: calc(var(--bs-gutter-x) * .5);
    padding-bottom: calc(var(--bs-gutter-x) * .5);
}
    */

.sma-container-sm {
    max-width: 540px;
    margin: 0 auto;
}

.sma-container-md {
    max-width: 720px;
    margin: 0 auto; 
}

.sma-container-lg {
    max-width: 960px;
    margin: 0 auto;
}

.sma-container-xl {
    max-width: 1140px;
    margin: 0 auto;
}

.sma-container-xxl {
    max-width: 1320px;
    margin: 0 auto;
}

/*
 * CONTENT (OBSAH)
 */

.sma-content {
    padding: 2rem;
}

.mao-content--main {
    border: 1px solid;
    color: var(--color-text-main);
    border-color: var(--color-main);
    background-color: var(--color-bg--content);
    border-radius: 1rem;
}

.sma-border-radius {
    border-radius: 1rem;
}

.sma-img {
    border-radius: var(--border-radius-container);
}

/*
 * KOMPONENTY (CARD, BTN, FORMS, NAV, CAROUSEL)
 */

/* FONTAWESOME */

/*
<span class="fa-stack fa-2x">
    <i class="fa-solid fa-square fa-stack-2x sma-fontawesome-stack-bg"></i>
    <i class="fa-solid fa-hat-cowboy fa-stack-1x sma-fontawesome-stack-ico"></i>
</span>
*/

.sma-fontawesome-stack-bg {
    color: var(--color-alt)
}

.sma-fontawesome-stack-ico {
    color: var(--color-alt-accent)
}

.sma-fontawesome-color {
    color: var(--color-main-accent);
}

/*
.sma-fontawesome--size-2xl {
    font-size: 2em;
}
*/

/* BTN */

.btn {
    border-radius: var(--border-radius-btn);
    font-weight: 700;
}

.nena-btn-alt {
    background-color: var(--color-alt-accent);
    /* color: white!important; */
    /* border: 2px solid var(--color-alt-accent); */
}

.nena-btn-alt:hover {
    background-color: var(--color-alt-accent-hover);
    /* color: white!important; */
}

/*
.mao-btn--outline {
    color: var(--color-main);
    border-color: var(--color-main);
    background-color: var(--color-bg-main);
}

.mao-btn--outline:hover {
    color: var(--color-alt);
    border-color: var(--color-alt);
    background-color: var(--color-bg-main);;
}
*/

div.sma-btn {
    text-align: center;
    margin: 3rem 0;
}

/* CAROUSEL */
.sma-carousel {
    text-align: center;
    padding: 2rem;
}

.sma-carousel--feedback {
    text-align: center;
    padding: 2rem;
    color: var(--color-text-main)
}

/* CARD */

.card {
    border-radius: 1rem;
}

/*
.card-image-top {
    border-radius: 1rem 1rem 0 0;
}
*/

.card-footer {
    background-color: transparent;
    border-top: none;
    text-align: center;
}

.rda-card {
    border-radius: 1rem;
    padding: 0.5rem;
    margin: 1rem;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
}

/* NAVBAR */

.nav-link {
    color: var(--color-text-main);
    
}

.nav-link:hover {
    color: var(--color-main-accent); 
    /* text-decoration: underline; */

}

.navbar {
    --bs-navbar-color: var(--color-alt-accent-hover);
    --bs-navbar-hover-color: var(--color-alt-accent-hover);
}

/*
<button class="navbar-toggler sma-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <svg class="sma-icon-hamburger" viewBox="0 0 24 24" aria-hidden="true">
        <path d="M3 6h18M3 12h18M3 18h18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
    </svg>
</button>
*/

.sma-toggler { 
    padding: .5rem .6rem; 
    border: 2px solid var(--color-alt-accent-hover); 
    color: var(--color-alt-accent-hover); 
}

.sma-toggler:hover { 
    color: var(--color-alt-accent-hover); 
    border-color: var(--color-alt-accent-hover); 
}

.sma-icon-hamburger { 
    width: 1.8rem; 
    height: 1.8rem; 
    display: block; 
}



/*
 * NETTE - RENDER FORM 
 */
legend {
    text-align: center;
    font-weight: 500;
}

form label {
    font-weight: 400;
}

form .card {
    /*
    border-color: var(--color-blush-pink);
    background-color: var(--color-blush-pink);
    */
    border: 1px solid var(--color-main);
    border-radius: 0;
}

div.sma-form-control > 
input, 
textarea, 
select {
    border: solid 1px var(--color-main);
    width: 100%!important;
    border-radius: 0;
    padding: 5px 5px; /* .375rem .75rem; je BS origin*/
}

div.sma-form-control > 
input:focus, 
textarea:focus, 
select:focus {
    border-color: var(--color-alt); 
    outline: none;           /* odstraní modrý okraj ve výchozím stavu */
    /* box-shadow: 0 0 8px var(--color-main); /* jemný růžový stín */  
    transition: border-color 0.2s, box-shadow 0.2s, border-radius 0.2s;
}

div.sma-form-control input[type="checkbox"] {
  border: solid 1px var(--color-main);
  border-radius: 0!important;
  box-shadow: none!important;
}

div.sma-form-control input[type="checkbox"]:checked {
  background: var(--color-main);
  box-shadow: none!important;
}

form > div > div:last-child > div {
    border: none!important;
    background: transparent;
    box-shadow: none!important;    
}

/*
 * NETTE - FLASH MESSAGES
 */

.flash.success {
    background-color: #56c94f;      /* koopa-green shell-500 */
    color: white;   
    border: var(--color-alt);
    padding: 1rem;
    font-weight: 700;
}

/*
 *
 * UL, OL
 *
 */



ul.sma-checkpoint-list {
    list-style-image: url('https://static.smartsea.cz/sma-css/v1/assets/check-solid.svg');
}

ul.sma-exclude-list {
    list-style-image: url('https://static.smartsea.cz/sma-css/v1/assets/times-solid.svg');
}

ul.sma-chevron-list {
    list-style-image: url('https://static.smartsea.cz/sma-css/v1/assets/chevron-right-solid.svg');
}

::marker {
    /* font-size: 1.9rem; */
}

.sma-checkpoint-list li, 
.sma-exclude-list li, 
.sma-chevron-list li {
    padding-left: 1rem;
}

/*  
ol listy - 1.1, 1.2.1, atp.
*/

div.veb-ol-counters { 
    text-align: justify; 
} 

div.veb-ol-counters ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}

div.veb-ol-counters li {
    display: table;
    counter-increment: item;
    margin-bottom: 0.6em;
}

div.veb-ol-counters li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.6em;    
}

div.veb-ol-counters li li {
    margin: 0;
}

div.veb-ol-counters li li:before {
    content: counters(item, ".") " ";
}


/*
 * SPECIFICKÉ STRÁNKY PROJEKTU (JEDNOTLIVÉ SEKCE, HOMEPAGE, FOOTER)
 */

.veb-faq-h {
    color: var(--color-alt-accent);
}

.veb2-collapse {
    margin: 1rem 0;
}

/*
.veb2-collapse .veb2-collapse-trigger {

}
*/

.veb2-collapse .veb2-collapse-content {
    margin: 1rem 0;
    background-color: #f8f9fa;
    border: 0;
    border-radius: var(--border-radius-container);
    display: inline-block;
}