/* Základ */
:root {
    --orange: #E0842F;
    --white: #FFFFFF;
    --black: #000000;
}

html { scroll-behavior: smooth; }

body {
    font-family: "Open Sans", Arial, sans-serif;
    color: var(--black);
    background: var(--white);
}

/* Typografie */
.brand-title,
.section-title,
.hero-title,
.contact-heading {
    font-family: "Kumar One", cursive;
}

.section-title {
    font-size: 2.25rem;
    color: var(--black);
}

/* Bootstrap úpravy (barvy) */
.btn-primary {
    --bs-btn-bg: var(--orange);
    --bs-btn-border-color: var(--orange);
    --bs-btn-hover-bg: #cf7628;
    --bs-btn-hover-border-color: #cf7628;
    --bs-btn-active-bg: #b86722;
    --bs-btn-active-border-color: #b86722;
    --bs-btn-color: var(--white);
}

/* Hero */
.hero {
    min-height: 420px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 55%, rgba(0, 0, 0, 0.15) 100%),
        url("../img/pexels-doughnuts-1868573_1920.jpg");
    background-size: cover;
    background-position: center;
    color: var(--white);
    position: relative;
    display: flex;
    flex-direction: column;
}

.hero .navbar {
    background: transparent;
}

.hero .nav-link {
    text-transform: capitalize;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.hero .nav-link:hover { color: var(--white); }

.hero-content {
    flex: 1;
    display: flex;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.hero-title {
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.btn-hero {
    letter-spacing: 0.02em;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Nabídka */
.offer-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0.15rem;
}

.offer-title {
    font-size: 0.85rem;
    font-weight: 600;
}

/* Kontakty */
.contact-img {
    width: 100%;
    border-radius: 0.15rem;
}

.contact-heading {
    font-size: 1rem;
    font-weight: 400;
}

.contact-list {
    font-size: 0.9rem;
}

.contact-list .icon {
    color: var(--black);
    margin-top: 0.05rem;
    flex: 0 0 auto;
}

.contact-list .icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* Patička */
.footer-small {
    color: rgba(0, 0, 0, 0.65);
    font-size: 0.75rem;
}