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

 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@600;700&family=Merriweather:wght@400;700&display=swap');

:root {
    --font-family-headings: 'Quicksand', sans-serif;
    --font-family-body: 'Merriweather', serif;      

    --color-rodinka: #b62028;
    --color-rodinka-accent: color-mix(in srgb, var(--color-rodinka) 60%, black);
    --color-bg-main: #D4EDFF;
    --color-bg-main: #b6e4fa;
    --color-bg-alt: #FFE5D4;
    --color-bg-alt: #fff7dd;
    --color-accent: #D0F0C0;
    --color-accent-hover: #E6E6FA;
    --color-text-main: #333333;
    --color-text-muted: #7F7053;
    --color-divider: #F7E7CE;

    --color-powder-yellow: #FFF1B8;
    --color-blush-pink:    #FFD1DC;
    --color-soft-coral:    #FFC4A3;
    --color-pastel-lilac:  #E3D4FF;
    --color-light-sage:    #D8E8D8;
}

body {
    font-family: var(--font-family-body);
    color: var(--color-text-main);    
    font-size: 100%;
    line-height: 1.8;
    font-weight: 100;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    background-color: var(--color-bg-main);
}

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

.rda-bg-pastel-lilac {
    background-color: var(--color-pastel-lilac);
}

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

.rda-bg-light-sage {
    background-color: var(--color-light-sage);
}

.rda-bg-powder-yellow {
    background-color: var(--color-powder-yellow);
}

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

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

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

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
    font-family: var(--font-family-headings);
    color: var(--color-rodinka);
    font-weight: 400;
    text-align: center;
    margin: 3rem 0;
}

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

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

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

/*
 * ODKAZY
 */

a {
    color: var(--color-rodinka);
    text-decoration: none;
}

a:hover {
    color: var(--color-rodinka-accent);
}

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

footer {
    background-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;
}

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

/*
 * WAVE DIVIDER
 */ 
.wave-divider + section {
    margin-top: 0;
}
  
.wave-divider {
    display: block;       /* zabere 100 % šířky */
    width: 100%;
    height: 6rem;         /* výška vlny */
    margin-bottom: -1px;  /* překryje linku mezi sekcemi */
    overflow: hidden;     /* skryje přepychtlou část SVG */
}

.wave-divider svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wave-divider svg path {
    fill: var(--color-bg-alt);
}

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

/* FONTAWESOME */

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

/* BTN */

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

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

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

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

.sma-carousel--feedback {
    text-align: center;
    padding: 2rem;
}

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

/* FORM */
div.sma-form-control > 
input, 
textarea, 
select {
    width: 100%!important;
    padding: 5px 5px!important;
    border-radius: 0.25rem;
    border: none;
}

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

/*
 * NETTE - RENDER FORM 
 */

form .card {
    border-color: var(--color-blush-pink);
    background-color: var(--color-blush-pink);
}

div.sma-form-control > input, textarea, select {
    width: 100%!important;
    padding: 5px 5px!important;
    border-radius: 0.25rem;
}

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

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

.dra-ds-nazev {
    color: var(--color-text-main); 
    text-align: center;
}

.dra-ds-mesto {
    text-align: center;
    color: var(--color-text-muted);   
    padding-bottom: 1rem; 
}

.dra-ds-vek {
    text-align: center;
    color: var(--color-text-muted); 
    padding-top: 1rem;   
}

.dra-skupina-carousel-img {
    max-width: 400px;
    text-align: center;
}