/* Custom CSS for Zacisze */

:root {
    --gold: #D4AF37;
    --pearl: #F5F1E8;
    --dark: #1F2937;
    --light: #F9FAFB;
}

/* Glamour Sparkle Effect */
@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1); }
}

/* Bright Floating Sparkles Animation Set 1 */
@keyframes sparkle-float-1 {
    0% {
        transform: translateY(100px) translateX(0) scale(1);
        opacity: 0;
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) translateX(30px) scale(0.8);
        opacity: 0;
    }
}

/* Bright Floating Sparkles Animation Set 2 */
@keyframes sparkle-float-2 {
    0% {
        transform: translateY(120px) translateX(0) scale(1);
        opacity: 0;
    }
    7% {
        opacity: 1;
    }
    93% {
        opacity: 1;
    }
    100% {
        transform: translateY(-220px) translateX(-35px) scale(0.8);
        opacity: 0;
    }
}

/* Bright Floating Sparkles Animation Set 3 */
@keyframes sparkle-float-3 {
    0% {
        transform: translateY(110px) translateX(0) scale(1);
        opacity: 0;
    }
    6% {
        opacity: 1;
    }
    94% {
        opacity: 1;
    }
    100% {
        transform: translateY(-210px) translateX(25px) scale(0.8);
        opacity: 0;
    }
}

/* Pulse sparkle animation */
@keyframes sparkle-pulse {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

/* Gold Gradient Top Border */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #D4AF37, #FFE66D, #D4AF37);
    z-index: 100;
    pointer-events: none;
}

/* Gold Gradient Bottom Border */
body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4AF37, transparent);
    z-index: 100;
    pointer-events: none;
}

/* Elegant Background Pattern */
body {
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(245, 241, 232, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(212, 175, 55, 0.02) 0%, transparent 50%);
    background-attachment: fixed;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: -0.5px;
}

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* Custom Color Classes */
.text-gold {
    color: var(--gold);
}

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

.border-gold {
    border-color: var(--gold);
}

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

.hover\:bg-gold:hover {
    background-color: var(--gold);
}

.hover\:text-gold:hover {
    color: var(--gold);
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Navigation Styling */
nav {
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

nav a {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

nav a::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 0.5rem;
    z-index: -1;
}

nav a:hover::before {
    opacity: 1;
}

nav a:hover {
    color: var(--gold);
    transform: translateY(-2px);
}

/* Disable hover effect on logo */
nav a[href*="index.html"],
nav a[href="#hero"] {
    transition: none;
}

nav a[href*="index.html"]:hover::before,
nav a[href="#hero"]:hover::before {
    opacity: 0 !important;
}

nav a[href*="index.html"]:hover,
nav a[href="#hero"]:hover {
    color: inherit;
    transform: none;
}

/* Hero Section Animation */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating Crystal Animation */
@keyframes floatCrystal {
    0%, 100% {
        transform: translateY(0px) rotateZ(0deg);
        opacity: 0.15;
    }
    50% {
        transform: translateY(-20px) rotateZ(5deg);
        opacity: 0.25;
    }
}

/* Shimmer Effect */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Floating Balloon Animation */
@keyframes float-balloon {
    0% {
        bottom: -50px;
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        bottom: 100vh;
        opacity: 0;
    }
}

@keyframes sway {
    0%, 100% {
        transform: translateX(0px);
    }
    25% {
        transform: translateX(20px);
    }
    75% {
        transform: translateX(-20px);
    }
}

/* Balloon Styles */
.balloon {
    position: absolute;
    border-radius: 50%;
    animation: float-balloon 8s ease-in infinite, sway 3s ease-in-out infinite;
    bottom: -50px;
}

.balloon-gold {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #D4AF37 0%, #FFE66D 50%, #D4AF37 100%);
    box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.2), 3px 3px 10px rgba(212, 175, 55, 0.3);
}

.balloon-gold::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 60px;
    background: rgba(212, 175, 55, 0.4);
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
}

.balloon-pearl {
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, #F5F1E8 0%, #FFFBF5 50%, #F5F1E8 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.1), 2px 2px 8px rgba(212, 175, 55, 0.2);
}

.balloon-pearl::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 55px;
    background: rgba(212, 175, 55, 0.3);
    bottom: -55px;
    left: 50%;
    transform: translateX(-50%);
}

/* Sparkles Background for Hero Section - Diamond-like twinkling */
.sparkles-bg {
    background-image: url('TLO/ZDJ1.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

.sparkles-bg::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 5%;
    width: 5px;
    height: 5px;
    background: radial-gradient(circle at 30% 30%, #FFFFFF, #FFE66D);
    border-radius: 50%;
    box-shadow: 
        50px 80px 0 -2px #FFE66D,
        120px 40px 0 -2px #D4AF37,
        180px 120px 0 0px #FFFFFF,
        220px 20px 0 -2px #FFE66D,
        300px 100px 0 -1px #D4AF37,
        380px 60px 0 -2px #FFE66D,
        450px 140px 0 -1px #FFFFFF,
        520px 30px 0 -2px #D4AF37,
        600px 110px 0 -1px #FFE66D,
        680px 70px 0 -2px #FFFFFF,
        750px 150px 0 -1px #FFE66D,
        850px 40px 0 -2px #D4AF37,
        920px 120px 0 -1px #FFE66D,
        150px 200px 0 -2px #FFFFFF,
        280px 250px 0 -1px #FFE66D,
        420px 220px 0 -2px #D4AF37,
        550px 280px 0 -1px #FFFFFF,
        700px 240px 0 -2px #FFE66D,
        800px 260px 0 -1px #D4AF37;
    z-index: -1;
    pointer-events: none;
    animation: sparkle-float-1 8s ease-out infinite, sparkle-pulse 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 3px rgba(255, 230, 109, 0.8));
}

.sparkles-bg::after {
    content: '';
    position: absolute;
    top: 15%;
    right: 8%;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle at 35% 35%, #FFFFFF, #FFE66D);
    border-radius: 50%;
    box-shadow: 
        -60px 100px 0 -1px #D4AF37,
        -140px 50px 0 -2px #FFE66D,
        -200px 140px 0 -1px #FFFFFF,
        -280px 30px 0 -2px #FFE66D,
        -350px 120px 0 -1px #D4AF37,
        -420px 70px 0 -2px #FFE66D,
        -500px 160px 0 -1px #FFFFFF,
        -570px 40px 0 -2px #D4AF37,
        -640px 130px 0 -1px #FFE66D,
        -720px 80px 0 -2px #FFFFFF,
        -170px 220px 0 -1px #FFE66D,
        -310px 260px 0 -2px #D4AF37,
        -450px 240px 0 -1px #FFFFFF,
        -580px 290px 0 -2px #FFE66D,
        -750px 250px 0 -1px #D4AF37,
        -880px 270px 0 -2px #FFE66D;
    z-index: -1;
    pointer-events: none;
    animation: sparkle-float-2 10s ease-out infinite, sparkle-pulse 1.8s ease-in-out infinite 0.3s;
    filter: drop-shadow(0 0 4px rgba(255, 230, 109, 0.9));
}

#hero h1 {
    animation: fadeInDown 0.8s ease;
    color: #FFFFFF !important;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7), 1px 1px 2px rgba(0, 0, 0, 0.5);
}

#hero p {
    animation: fadeInDown 0.8s ease 0.2s both;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
}

#hero button, #hero a {
    animation: fadeInDown 0.8s ease 0.4s both;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Button Styles */
button {
    transition: all 0.3s ease;
}

button:active {
    transform: scale(0.98);
}

/* Card Hover Effect */
.hover\:shadow-md {
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.hover\:shadow-md:hover {
    transform: translateY(-4px);
    border-top-color: #FFE66D !important;
}

/* Section Styling with Glamour */
section {
    position: relative;
}

/* Gold Crystal Decorations */
.border-gold {
    border-color: var(--gold) !important;
}

/* Form Styling */
input, textarea, select {
    transition: all 0.3s ease;
}

input:focus, textarea:focus, select:focus {
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

/* Gallery Items */
.gallery-item {
    transition: all 0.3s ease;
    background-size: cover;
    background-position: center;
}

.gallery-item:hover {
    transform: scale(1.02);
}

/* Modal Styling */
#reservation-modal {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#reservation-modal > div {
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Menu Animation */
#mobile-menu {
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 500px;
    }
}

/* Scrollbar Hide */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}



/* Mobile Reviews Carousel - Single Card View */
@media (max-width: 768px) {
    #reviews-carousel > div {
        width: calc(100vw - 40px) !important;
        min-width: calc(100vw - 40px) !important;
        flex-basis: calc(100vw - 40px) !important;
    }
}


/* =========================================================================
   FLUID TYPOGRAPHY SYSTEM (modular scale ~1.333, clamp-based)
   Overrides Tailwind CDN utilities so the whole page scales smoothly
   between mobile and desktop without extra media queries.
   Base body: 16px (mobile) -> 19px (desktop)
   ========================================================================= */

/* --- Fluid type tokens ---
   Górne granice (desktop) obniżone do wartości POŚREDNICH między
   oryginalnymi rozmiarami Tailwind a poprzednią (za dużą) wersją. */
:root {
    /* body / paragraph text: było 16, potem 19 -> teraz ~17.5 na desktop */
    --fs-body:   clamp(1rem, 0.95rem + 0.3vw, 1.09375rem);      /* 16 -> 17.5px */
    --lh-body:   1.65;

    /* lead / emphasised paragraph (.text-lg=18, potem 20 -> teraz ~19) */
    --fs-lead:   clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);    /* 17 -> 19px */

    /* headings */
    --fs-h1:     clamp(2.75rem, 1.7rem + 5vw, 5.25rem);         /* 44 -> 84px  (było 96, potem 88) */
    --fs-h2:     clamp(2rem, 1.45rem + 2.7vw, 3.125rem);        /* 32 -> 50px  (było 48, potem 52) */
    --fs-h3:     clamp(1.5rem, 1.2rem + 1.35vw, 1.875rem);      /* 24 -> 30px  (było 24, potem 32) */
    --fs-h4:     clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);  /* 18 -> 21px */
}

/* --- Base body copy --- */
body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* Paragraphs & generic descriptive text pick up the fluid base.
   (Tailwind's `text-base` = 16px is upgraded to the fluid body size.) */
p,
li,
.text-base {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* Lead paragraphs: Tailwind .text-lg (18px) and .text-xl (20px)
   become a single fluid "lead" size so intro copy, contact data,
   opening hours etc. read comfortably on every screen. */
.text-lg,
.text-xl {
    font-size: var(--fs-lead) !important;
    line-height: 1.6;
}

/* Keep genuinely small utility text small (badges, captions, meta).
   We re-assert these AFTER the p/li rule so nested small text stays small. */
.text-xs  { font-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem) !important; line-height: 1.5; }
.text-sm  { font-size: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem) !important; line-height: 1.55; }

/* --- Heading scale (semantic + Tailwind size utilities) --- */
h1 { font-size: var(--fs-h1); line-height: 1.05; }
h2 { font-size: var(--fs-h2); line-height: 1.12; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

/* The markup sizes headings with Tailwind utilities (e.g. h2.text-5xl,
   h3.text-2xl). Map those utilities, WHEN used on a heading, onto the
   fluid scale so hierarchy H1 > H2 > H3 stays consistent everywhere. */
h1.text-6xl, h1.text-7xl, h1.text-8xl { font-size: var(--fs-h1) !important; }
h2.text-3xl, h2.text-4xl, h2.text-5xl { font-size: var(--fs-h2) !important; }
h3.text-2xl, h3.text-3xl, h3.text-4xl { font-size: var(--fs-h3) !important; }
h4.text-lg,  h4.text-xl               { font-size: var(--fs-h4) !important; }

/* Hero lead paragraphs (below the H1) - a touch larger than body */
#hero p.text-2xl, #hero p.text-3xl { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem) !important; }
#hero p.text-lg,  #hero p.text-xl  { font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.25rem) !important; }

/* =========================================================================
   NAVIGATION - keep all 8 items on ONE line on desktop
   Slightly smaller than body text + tighter spacing so nothing wraps.
   ========================================================================= */
@media (min-width: 768px) {
    #nav-menu {
        flex-wrap: nowrap;
    }
    #nav-menu a {
        font-size: clamp(0.875rem, 0.7rem + 0.55vw, 1.0625rem); /* 14 -> 17px */
        padding-left: 0.6rem;
        padding-right: 0.6rem;
        white-space: nowrap;
    }
}
/* Between 768–1000px the 8 items are tightest - trim padding a bit more */
@media (min-width: 768px) and (max-width: 1000px) {
    #nav-menu { column-gap: 0; }
    #nav-menu a { padding-left: 0.4rem; padding-right: 0.4rem; font-size: 0.9rem; }
}

/* =========================================================================
   NO-WRAP one-line elements (CTA, phone, address lines)
   ========================================================================= */
/* Primary CTAs must never break mid-word */
#hero .flex button,
#hero .flex a,
a[onclick*="openReservationModal"],
button[onclick*="openReservationModal"] {
    white-space: nowrap;
}

/* Contact: phone number & each address line stay on their own line */
#contact a[href^="tel:"] p,
#contact .fa-phone + div p,
#contact .fa-location-dot + div p {
    white-space: nowrap;
}

/* Contact subheadings (Adres, Telefon, Email, Godziny otwarcia):
   only bump the FONT SIZE so they read as real headings above body text.
   No layout/width changes - the section stays full-width as originally. */
#contact h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem) !important; /* 20 -> 24px */
    line-height: 1.25;
}

/* =========================================================================
   RESPONSIVE SAFETY
   ========================================================================= */
/* Prevent accidental horizontal scroll on any viewport */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Images never overflow their containers */
img {
    max-width: 100%;
    height: auto;
}
/* ...but images that are meant to fill a fixed-height box (object-cover)
   must keep filling it - don't let the rule above squash them. */
img.object-cover,
img.h-full {
    height: 100%;
}

/* Inputs/selects min 16px on mobile to stop iOS Safari auto-zoom on focus.
   (Buttons excluded so the .text-lg CTA sizing above is preserved.) */
@media (max-width: 640px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}