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

@import url('https://fonts.cdnfonts.com/css/alice-dream');
@import url('https://fonts.cdnfonts.com/css/poppins');

:root {
    --font-family-headings: 'Alice Dream', sans-serif;    
    --font-family-body: 'Poppins', sans-serif;                                           

    --color-main: #95b4de;
    --color-alt: #39567e;

    --color-bg-main: white;

    --color-text-main: #333333;
    --color-text-muted: grey;
}

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

nav {
    background-color: white;
}

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

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

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

.upe-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-main);
    font-weight: 400;
    text-align: center;
    margin: 3rem 0;
}

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

.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-main);
    text-decoration: none;
}

a:hover {
    color: var(--color-alt);
}

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

footer {
    background-color: var(--color-alt);
    color: white;
}

.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: 1rem;
}

.upe-content--outline {
    border: 1px solid;
    color: var(--color-main);
    border-color: var(--color-main);
    background-color: var(--color-bg-main);
}

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

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

/* FONTAWESOME */

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

/* BTN */

.btn {
    border-radius: 0;
}

.upe-btn {
    background-color: var(--color-accent);
    color: var(--color-text-main)!important;
}

.upe-btn:hover {
    background-color: var(--color-accent-hover);
    color: var(--color-text-main)!important;
}

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

.upe-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: none;
}

/*
.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-rodinka);
}

.nav-link:hover {
    color: var(--color-rodinka-accent);
}

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

.navbar-toggler {
    border-color: var(--color-rodinka);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23B62028' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/*
 * 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;
    padding: 5px 5px!important;
    border-radius: 0;
}

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;
}

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

/*
 * NETTE - FLASH MESSAGES
 */

.flash.success {
    background-color: var(--color-main);    
    border: 1px solid #1a7f1a;
    padding: 1rem;
    font-weight: 700;
}

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

footer {
    text-align: center;
}

footer table th,td {
    text-align: center;
    color: white;
}

footer :is(h1,h2,h3,h4,h5,h6) {
    color: white;
    text-decoration: underline;
}

footer .sma-btn {
    margin: 1rem 0;
} 


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

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

footer .upe-footer-a--hover:hover {
    color: white;
    text-decoration: underline;
}

.upe-photo-col {
    padding: 0;
}

.upe-photo-image {
    margin: 0.25rem;
}