/* ========================================================
   Ferienhaus Adršpach — Custom CSS auf Top von Tailwind
   ======================================================== */

:root {
    --brand-primary: hsl(28 45% 35%);
    --brand-primary-darker: hsl(25 40% 25%);
    --brand-sand: hsl(35 50% 97%);
}

html { scroll-behavior: smooth; }

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hero — Bildverdunklung damit der Text auch auf hellen Bildern lesbar bleibt */
.hero-image-overlay {
    background: linear-gradient(
        135deg,
        hsl(28 45% 18% / 0.65) 0%,
        hsl(32 35% 35% / 0.45) 100%
    );
}

.hero-image-container {
    position: relative;
    height: 70vh;
    min-height: 540px;
    background-position: center 65%;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Smooth slide-in für Hero-Inhalte */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
    animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fade-up-delay-1 { animation-delay: 0.15s; }
.fade-up-delay-2 { animation-delay: 0.30s; }
.fade-up-delay-3 { animation-delay: 0.45s; }

/* 230-Jahre-Wappen — sanftes Schweben + warmer Glow um das Logo */
.anniversary-crest {
    animation: crestFloat 5s ease-in-out infinite;
}
.anniversary-crest img {
    filter:
        drop-shadow(0 0 24px rgba(255, 255, 255, 0.55))
        drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
}
@keyframes crestFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

/* Quick-Info-Cards — leichter Lift beim Hovern */
.qi-card {
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .3s ease;
}
.qi-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 35px -10px hsl(28 45% 20% / 0.18);
}

/* Saison-Karten — Bild mit Overlay + sanftes Zoom-Hover */
.season-card {
    position: relative;
    overflow: hidden;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: transform .35s ease, box-shadow .35s ease;
    isolation: isolate;
}
.season-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4));
    z-index: 1;
    transition: background .35s ease;
}
.season-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 40px -12px hsl(28 45% 20% / 0.3);
}
.season-card:hover::before {
    background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.25));
}
.season-card .inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
}
.season-card .bg-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transition: transform .8s ease;
}
.season-card:hover .bg-img {
    transform: scale(1.08);
}

/* Mobile Menü Fade */
#mobile-menu {
    transition: max-height .35s ease, opacity .25s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
#mobile-menu.open {
    max-height: 600px;
    opacity: 1;
}

/* Smooth scroll target offset (für sticky Nav) */
:target { scroll-margin-top: 90px; }
section[id] { scroll-margin-top: 90px; }

/* Form elements */
.form-input,
.form-select,
.form-textarea {
    @apply w-full px-4 py-3 rounded-lg border border-primary-200 bg-white focus:border-primary-500 focus:ring-2 focus:ring-primary-500/30 outline-none transition;
}

/* Loading spinner */
.spinner {
    width: 20px;
    height: 20px;
    border: 2.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin .8s linear infinite;
    display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Cookie banner */
.cookie-banner {
    transform: translateY(150%);
    transition: transform .4s cubic-bezier(0.16, 1, 0.3, 1);
}
.cookie-banner.show {
    transform: translateY(0);
}

/* ============================================================
   Kalender — Tagezellen
   ============================================================ */
:root {
    --cal-blocked: hsl(28 35% 55%);          /* warmes Braun-Beige für belegt */
    --cal-blocked-stripe: hsl(28 45% 45%);   /* dunkler Stripe */
    --cal-blocked-text: hsl(25 40% 22%);
    --cal-selected: hsl(28 45% 35%);          /* primary-700 */
    --cal-in-range: hsl(35 45% 87%);          /* primary-100 */
}

.cal-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 14px;
    user-select: none;
    transition: background-color .15s ease, transform .15s ease;
    position: relative;
}

.cal-day.is-past {
    color: hsl(35 15% 75%);
    cursor: not-allowed;
}

.cal-day.is-free {
    color: hsl(25 40% 22%);
    cursor: pointer;
}
.cal-day.is-free:hover {
    background: var(--cal-in-range);
}

/* Voll belegt — diagonale Schraffierung in Brand-Braun */
.cal-day.is-full {
    color: var(--cal-blocked-text);
    cursor: not-allowed;
    background: repeating-linear-gradient(
        45deg,
        var(--cal-blocked) 0,
        var(--cal-blocked) 5px,
        var(--cal-blocked-stripe) 5px,
        var(--cal-blocked-stripe) 10px
    );
    opacity: 0.85;
}

/* Anreisetag eines bestehenden Gastes — PM belegt (rechte/untere Hälfte) */
.cal-day.is-arrival {
    color: var(--cal-blocked-text);
    cursor: pointer;
    background: linear-gradient(135deg, transparent 0%, transparent 49%, var(--cal-blocked) 49%, var(--cal-blocked) 100%);
}
.cal-day.is-arrival:hover {
    box-shadow: inset 0 0 0 2px var(--cal-selected);
}

/* Abreisetag eines bestehenden Gastes — AM belegt (linke/obere Hälfte) */
.cal-day.is-departure {
    color: var(--cal-blocked-text);
    cursor: pointer;
    background: linear-gradient(135deg, var(--cal-blocked) 0%, var(--cal-blocked) 51%, transparent 51%, transparent 100%);
}
.cal-day.is-departure:hover {
    box-shadow: inset 0 0 0 2px var(--cal-selected);
}

/* User-Auswahl — Anreise/Abreise des neuen Gastes */
.cal-day.is-selected {
    background: var(--cal-selected);
    color: white;
    font-weight: 600;
    cursor: pointer;
}

/* Zwischen-Tage des ausgewählten Bereichs */
.cal-day.is-in-range {
    background: var(--cal-in-range);
    color: hsl(25 40% 22%);
    cursor: pointer;
}

/* Print: hide nav/footer */
@media print {
    nav, footer, .no-print { display: none !important; }
}