/* ==========================================================================
   Pedikúra ra-dost – vzhled webu
   Paleta vychází z loga: teplé hnědé tóny doplněné růžovým zlatem, které se
   používá střídmě jako akcent (linky, ikony, ozdoby), aby web zůstal klidný.
   ========================================================================== */

:root {
    --cream:        #fbf3e8;
    --cream-deep:   #f5e8d9;
    --brown-dark:   #74553f;
    --brown:        #8a6a50;
    --brown-soft:   #a98a6d;
    --beige:        #eed7c0;
    --beige-light:  #f7e3d0;
    --ink:          #402e1f;
    --ink-soft:     #6b5540;

    /* akcent z loga */
    --zlato:        #d99b81;
    --zlato-svetle: #f0c3ad;
    --zlato-tmave:  #b8705b;   /* jen ozdoby: linky, ramecky, stiny */
    --zlato-text:   #8a4a37;   /* zlata pro TEXT: 6.7:1 na bile, 4.9:1 na bezove */

    --stin-jemny:   0 2px 10px rgba(88, 61, 41, .07);
    --stin-karta:   0 14px 34px rgba(88, 61, 41, .13);
    --stin-zvednuta:0 20px 44px rgba(88, 61, 41, .20);
}

/* --- základ ---------------------------------------------------------------- */

body {
    font-family: 'Nunito', -apple-system, "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: var(--cream);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--brown); transition: color .2s ease; }
a:hover { color: var(--zlato-text); text-decoration: none; }

h1, h2, h3, h4 { font-weight: 700; color: var(--ink); }

::selection { background: var(--zlato-svetle); color: var(--ink); }

/* Ozdobný předěl – tenká linka se zlatým středem. Používá se pod nadpisy. */
.ozdoba {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    margin: .9rem auto 0;
    max-width: 220px;
}
.ozdoba::before,
.ozdoba::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--zlato));
}
.ozdoba::after { background: linear-gradient(90deg, var(--zlato), transparent); }
.ozdoba span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--zlato);
    box-shadow: 0 0 0 3px rgba(217, 155, 129, .22);
}

.btn-pedikura {
    display: inline-block;
    background: linear-gradient(135deg, var(--brown-dark) 0%, var(--brown) 100%);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .8rem 2.2rem;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 8px 20px rgba(88, 61, 41, .22);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-pedikura:hover,
.btn-pedikura:focus {
    color: #fff;
    background: linear-gradient(135deg, var(--ink) 0%, var(--brown-dark) 100%);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(88, 61, 41, .3);
}

/* --- hlavička -------------------------------------------------------------- */

.site-navbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    padding: 1rem 0;
}
/* Logo má poměr 1195:850, takže šířka 200 px znamená 142 px na výšku –
   odsazení hero sekce a hlaviček podstránek na to musí mít rezervu. */
.site-navbar .site-logo img {
    width: 200px; max-width: 52vw; height: auto; display: block;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .28));
}
@media (max-width: 575.98px) {
    .site-navbar .site-logo img { width: 150px; }
}

.site-menu { margin: 0; padding: 0; list-style: none; }
.site-menu li { display: inline-block; margin-left: 1.7rem; }
.site-menu li a {
    position: relative;
    color: #fff;
    font-weight: 700;
    letter-spacing: .01em;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
    padding-bottom: 6px;
}
.site-menu li a::after {
    content: "";
    position: absolute;
    left: 50%; right: 50%; bottom: 0;
    height: 2px;
    background: var(--zlato-svetle);
    transition: left .25s ease, right .25s ease;
}
.site-menu li a:hover::after,
.site-menu li.active a::after { left: 0; right: 0; }
.site-menu li a:hover { color: #fff; }

.site-menu-toggle { color: #fff; font-size: 1.6rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }

/* mobilní menu ------------------------------------------------------------- */
/* Panel se odsouvá vlastností right, ne transformem – transform se choval
   nepředvídatelně a hlavně se nedal spolehlivě změřit. */
.site-mobile-menu {
    position: fixed;
    top: 0; bottom: 0;
    right: -340px;
    width: 300px;
    max-width: 85vw;
    background: var(--cream);
    box-shadow: -6px 0 30px rgba(0, 0, 0, .22);
    transition: right .3s ease;
    z-index: 2000;
    padding: 1rem 1.5rem;
    overflow-y: auto;
}
/* O otevření rozhoduje JEDINÉ pravidlo – třída na panelu samotném. */
.site-mobile-menu.is-open { right: 0; }
/* Třída na <body> má vlastní úkol: zastavit rolování stránky pod menu. */
body.offcanvas-menu { overflow: hidden; }

.site-mobile-menu-close { text-align: right; font-size: 1.4rem; cursor: pointer; color: var(--ink); }
.site-mobile-menu-body ul { list-style: none; padding: 0; margin: 2rem 0 0; }
.site-mobile-menu-body ul li { display: block; margin: 0 0 .25rem; }
.site-mobile-menu-body ul li a {
    display: block;
    padding: .7rem .25rem;
    color: var(--ink);
    font-weight: 700;
    border-bottom: 1px solid rgba(217, 155, 129, .3);
    text-shadow: none;
}
.site-mobile-menu-body ul li a:hover { color: var(--zlato-text); }

/* --- hero ------------------------------------------------------------------ */

/* Hero záměrně nežádá žádnou fotku – dokud vlastní fotka neexistuje, nemá smysl
   posílat požadavek, který skončí 404. Až fotka bude:
     1) nahrát ji jako public/images/hero-pedikura.jpg
     2) odkomentovat blok .hero--foto níže a přidat třídu hero--foto do index.blade.php */
.hero {
    position: relative;
    min-height: 68vh;
    display: flex;
    align-items: center;
    text-align: center;
    background-color: #6d4f3a;
    background-image:
        url('../images/ornament-lotos.svg'),
        radial-gradient(120% 90% at 15% 12%, rgba(255, 236, 216, .40) 0%, rgba(255, 236, 216, 0) 60%),
        linear-gradient(135deg, #5b4130 0%, #8a6a50 45%, #c9a681 100%);
    background-repeat: no-repeat;
    background-position: right 4% bottom 7%, center, center;
    background-size: 30% auto, cover, cover;
    padding: 12rem 0 6rem;
    overflow: hidden;
}

/*
.hero--foto {
    background-image: url('../images/hero-pedikura.jpg');
    background-position: center;
    background-size: cover;
}
*/

.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 70% at 50% 45%, rgba(0, 0, 0, 0) 0%, rgba(46, 31, 20, .45) 100%),
        linear-gradient(180deg, rgba(46, 31, 20, .55) 0%, rgba(46, 31, 20, .34) 55%, rgba(46, 31, 20, .50) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(2.3rem, 7vw, 5.5rem);
    line-height: 1.08;
    color: #fff;
    text-shadow: 0 6px 30px rgba(0, 0, 0, .5);
    margin-bottom: 1rem;
}
.hero__subtitle {
    color: rgba(255, 255, 255, .93);
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    letter-spacing: .02em;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
    margin-bottom: 2rem;
}
.hero .ozdoba { margin-bottom: 1.6rem; }
.hero .ozdoba::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75)); }
.hero .ozdoba::after  { background: linear-gradient(90deg, rgba(255, 255, 255, .75), transparent); }
.hero .ozdoba span { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }

/* hlavička vnitřních stránek */
.page-head {
    position: relative;
    background:
        radial-gradient(90% 120% at 80% 0%, rgba(255, 232, 213, .22) 0%, rgba(255, 232, 213, 0) 60%),
        linear-gradient(135deg, var(--brown-dark) 0%, var(--brown-soft) 100%);
    color: #fff;
    padding: 13rem 0 4.5rem;
    text-align: center;
}
.page-head h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    color: #fff;
    font-size: clamp(2rem, 5vw, 3.4rem);
    text-shadow: 0 4px 22px rgba(0, 0, 0, .3);
    margin-bottom: .5rem;
}
.page-head p { color: rgba(255, 255, 255, .9); margin: 0; }
.page-head .ozdoba::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7)); }
.page-head .ozdoba::after  { background: linear-gradient(90deg, rgba(255, 255, 255, .7), transparent); }
.page-head .ozdoba span { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .28); }

/* --- sekce ----------------------------------------------------------------- */

.section { padding: 5rem 0; }
/* Podklad sekcí: tentýž lotos jako ve značce, sotva znatelný. Střídá strany,
   aby se na dlouhé stránce neopakoval na jednom místě. */
.section--pattern {
    background-color: var(--cream);
    background-image: url('../images/ornament-lotos.svg');
    background-repeat: no-repeat;
    background-position: right 3% top 9%;
    background-size: 27% auto;
}
.section--pattern.section--vlevo {
    background-position: left 3% bottom 6%;
    background-size: 25% auto;
}
/* Na úzkém displeji je ornament za textem, tak ať je menší a u kraje. */
@media (max-width: 767.98px) {
    .section--pattern { background-position: right 2% top 3%; background-size: 46% auto; }
    .section--pattern.section--vlevo { background-position: left 2% bottom 2%; background-size: 46% auto; }
    .hero { background-position: right 2% bottom 4%, center, center; background-size: 52% auto, cover, cover; }
}

.section-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-size: clamp(1.7rem, 3.5vw, 2.3rem);
    margin-bottom: .25rem;
    color: var(--ink);
    text-align: center;
}
.section-heading + .ozdoba { margin-bottom: 2.5rem; }

.lead-note { font-weight: 700; color: var(--ink); font-size: 1.05rem; }

/* --- karty služeb ---------------------------------------------------------- */

.service-card {
    position: relative;
    width: 100%;
    border-radius: 18px;
    padding: 1.8rem 2rem 2rem;
    margin-bottom: 1.9rem;
    box-shadow: var(--stin-karta);
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--stin-zvednuta); }

/* Tenký zlatý proužek na horní hraně karty – jediný jasný akcent. */
.service-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--zlato-svetle), var(--zlato), var(--zlato-tmave));
}

.service-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
    padding-bottom: .9rem;
}
.service-card__title { font-size: 1.22rem; margin: 0; line-height: 1.35; }
.service-card__price {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    font-size: 1.5rem;
    white-space: nowrap;
}
.service-card__text { font-size: .95rem; margin: 0; }

.service-card--dark { background: linear-gradient(160deg, #7d5d45 0%, #6b4e39 100%); color: #fff; }
.service-card--dark .service-card__head { border-bottom: 1px solid rgba(255, 255, 255, .28); }
.service-card--dark .service-card__title { color: #fff; }
.service-card--dark .service-card__price { color: var(--zlato-svetle); }
.service-card--dark .service-card__text { color: rgba(255, 255, 255, .92); }

.service-card--light { background: linear-gradient(160deg, #f3ddc7 0%, #e7cdb2 100%); color: var(--ink); }
.service-card--light .service-card__head { border-bottom: 1px solid rgba(64, 46, 31, .22); }
.service-card--light .service-card__title { color: var(--ink); }
.service-card--light .service-card__price { color: var(--zlato-text); }

/* zvýrazněná karta doplňku uprostřed */
.service-card--doplnek { text-align: center; }
.service-card--doplnek .service-card__head { justify-content: center; }

/* --- ceníkové tabulky ------------------------------------------------------ */

.price-table__heading {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--ink);
    letter-spacing: .01em;
}
.price-table__heading::after {
    content: "";
    display: block;
    width: 42px; height: 2px;
    margin-top: .5rem;
    background: linear-gradient(90deg, var(--zlato), rgba(217, 155, 129, 0));
}
.price-table {
    width: 100%;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--stin-jemny);
    overflow: hidden;
}
.price-table td {
    padding: .7rem 1.1rem;
    border-bottom: 1px solid rgba(217, 155, 129, .28);
    font-size: .95rem;
}
.price-table tr:last-child td { border-bottom: 0; }
.price-table tr { transition: background .2s ease; }
.price-table tr:hover { background: var(--cream-deep); }
.price-table__price {
    width: 38%;
    white-space: nowrap;
    font-weight: 700;
    text-align: right;
    color: var(--zlato-text);
}

/* --- informační box -------------------------------------------------------- */

.info-box {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 2.2rem 2.4rem;
    box-shadow: var(--stin-karta);
    border-left: 3px solid var(--zlato);
}
.info-box h3 { margin-bottom: 1rem; }
.info-box p:last-child { margin-bottom: 0; }

/* --- kontaktní pás + mapa -------------------------------------------------- */

.contact-strip { padding: 3.5rem 0 2.5rem; background: var(--cream); }
.contact-card {
    background: #fff;
    border-radius: 999px;
    padding: 1.6rem 2.4rem;
    box-shadow: var(--stin-karta);
}
@media (max-width: 767.98px) {
    .contact-card { border-radius: 20px; padding: 1.2rem 1.4rem; }
}
.contact-item { display: flex; align-items: center; gap: 1rem; padding: .55rem 0; }
.contact-item strong { display: block; font-size: .95rem; }
.contact-item span, .contact-item a { font-size: .9rem; color: var(--ink-soft); }
.contact-item a:hover { color: var(--zlato-text); }
.contact-icon {
    flex: 0 0 48px;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--zlato-svetle) 0%, var(--zlato) 55%, var(--zlato-tmave) 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 6px 14px rgba(184, 112, 91, .35);
}

.map-wrap { line-height: 0; border-top: 3px solid var(--zlato); }
.map-wrap iframe { width: 100%; height: 400px; border: 0; filter: saturate(.92); }

/* --- patička --------------------------------------------------------------- */

.site-footer {
    background: linear-gradient(160deg, #6f5240 0%, #553d2d 100%);
    color: rgba(255, 255, 255, .82);
    padding: 4rem 0 2rem;
}
.site-footer h3.footer-heading {
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: 1.1rem;
    letter-spacing: .02em;
}
.site-footer h3.footer-heading::after {
    content: "";
    display: block;
    width: 36px; height: 2px;
    margin-top: .5rem;
    background: linear-gradient(90deg, var(--zlato), rgba(217, 155, 129, 0));
}
.site-footer ul li { margin-bottom: .4rem; }
.site-footer a { color: var(--beige-light); }
.site-footer a:hover { color: var(--zlato-svetle); }
.border-top-soft { border-top: 1px solid rgba(255, 255, 255, .16); }