:root {
    --primary: #24502e;
    --primary-hover: #1a3a22;
    --secondary: #1e2f22;
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.3);
    --text-dark: #1a202c;
    --text-light: #f7fafc;
    --serif-font: 'Playfair Display', 'Georgia', serif;
    --cream-bg: #f7f3ea;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-dark);
    background-color: #fcfcfc;
}

/* Navbar - solid & dark by default. This is the correct look for every
   normal (white-background) page, so it never depends on scroll position. */
.navbar.glass-nav {
    background: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease, padding 0.3s ease;
}

.navbar.glass-nav .nav-link {
    color: var(--secondary) !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    padding: 10px 15px;
}

.navbar.glass-nav .navbar-brand {
    color: var(--secondary) !important;
    font-weight: 700;
    font-size: 1.5rem;
}

/* Mobile hamburger icon. Uses Bootstrap's built-in CSS-only icon (an inlined
   SVG background-image) rather than a Font-Awesome <i> glyph, so it always
   renders even if the Font Awesome script is slow, blocked, or fails to
   load - which previously left the button empty/invisible on some phones. */
.navbar-toggler {
    border-color: rgba(44, 62, 80, 0.25);
}

.navbar.glass-nav .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='rgba%2844, 62, 80, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Glassmorphism (transparent, white-text) look - ONLY on the homepage, which
   has a full-bleed photo hero directly behind the nav, and ONLY before the
   page has been scrolled. Every other page keeps the solid look above. */
body.rr-home .navbar.glass-nav:not(.scrolled) {
    background: var(--glass-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: none;
}

body.rr-home .navbar.glass-nav:not(.scrolled) .nav-link {
    color: var(--text-light) !important;
}

body.rr-home .navbar.glass-nav:not(.scrolled) .navbar-brand {
    color: var(--text-light) !important;
}

body.rr-home .navbar.glass-nav:not(.scrolled) .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='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* Primary Button */
.btn-primary-custom {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(36, 80, 46, 0.35);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    display: inline-block;
}

.btn-primary-custom:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(36, 80, 46, 0.5);
    color: white;
    text-decoration: none;
}

/* Secondary Button */
.btn-secondary-custom {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 10px 28px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    display: inline-block;
}

.btn-secondary-custom:hover {
    background-color: white;
    color: var(--secondary);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Hero Section */
.hero-header {
    height: 100vh;
    min-height: 600px;
    background-image: linear-gradient(rgba(44, 62, 80, 0.3), rgba(44, 62, 80, 0.6)), url('../kepek/Esti fények.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    position: relative;
}

.hero-content {
    z-index: 10;
    padding: 0 20px;
}

.hero-content h1 {
    font-family: var(--serif-font);
    font-size: 4.5rem;
    font-weight: 700;
    margin-bottom: 2.5rem;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
    letter-spacing: 1px;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.8rem;
    }
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-primary-custom, .btn-secondary-custom {
        width: 100%;
        text-align: center;
    }
    /* On mobile, only the homepage needs its pre-scroll transparent nav
       forced to a solid dark background - otherwise the expanded mobile
       menu would show its (white) text over the busy hero photo. Inner
       pages already use the solid/dark-text nav from the rules above. */
    body.rr-home .navbar.glass-nav:not(.scrolled) {
        background: rgba(44, 62, 80, 0.95) !important;
    }
}

/* Content Blocks */
.feature-block {
    padding: 6rem 0;
}

.feature-block.bg-light {
    background-color: #f8f9fa;
}

.feature-img-wrapper {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.feature-img-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}

.feature-img-wrapper:hover img {
    transform: scale(1.05);
}

.feature-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 2rem 3rem;
}

.feature-text h2 {
    font-family: var(--serif-font);
    color: var(--secondary);
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 2.2rem;
}

.feature-text p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #4a5568;
}

@media (max-width: 991px) {
    .feature-text {
        padding: 2rem 1rem;
        text-align: center;
    }
}

/* ==========================================================================
   Photo Hero (image-led hero used on the homepage, matches moodboard layout)
   ========================================================================== */
.photo-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    color: white;
    overflow: hidden;
}

.photo-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(26,37,47,0.15) 0%, rgba(26,37,47,0.08) 45%, rgba(26,37,47,0.85) 100%);
    z-index: 1;
}

.photo-hero-content {
    position: relative;
    z-index: 2;
    padding: 3rem 0 4rem;
    width: 100%;
}

.photo-hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #d9e5da;
    margin-bottom: 1rem;
}

.photo-hero-content h1 {
    font-family: var(--serif-font);
    font-size: 3.6rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.45);
}

.photo-hero-content p.lead-text {
    font-size: 1.25rem;
    max-width: 620px;
    margin-bottom: 2rem;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.4);
}

@media (max-width: 768px) {
    .photo-hero { min-height: 78vh; }
    .photo-hero-content h1 { font-size: 2.3rem; }
}

.hero-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    animation: rr-bounce 2.2s ease-in-out infinite;
}

.hero-scroll-cue:hover {
    color: #fff;
    border-color: #fff;
}

@keyframes rr-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ==========================================================================
   Icon feature cards (3-up row directly under the hero)
   ========================================================================== */
.icon-card-row {
    margin-top: -70px;
    position: relative;
    z-index: 5;
    padding-bottom: 4rem;
}

.icon-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 45px rgba(26,37,47,0.15);
    overflow: hidden;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 55px rgba(26,37,47,0.22);
}

.icon-card img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

.icon-card-body {
    padding: 1.75rem 1.5rem 2rem;
}

.icon-card-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--primary);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.icon-card h3 {
    font-family: var(--serif-font);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 0.5rem;
}

.icon-card p {
    color: #4a5568;
    font-size: 0.98rem;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    .icon-card-row { margin-top: 1.5rem; }
}

/* ==========================================================================
   Trust strip (bottom icon row: room size / wifi / parking / outdoor / location)
   ========================================================================== */
.trust-strip {
    background: #fbf6ef;
    padding: 2.5rem 0;
    border-top: 1px solid rgba(44,62,80,0.08);
    border-bottom: 1px solid rgba(44,62,80,0.08);
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    justify-content: center;
    text-align: left;
    padding: 0.5rem 1rem;
}

.trust-item i {
    font-size: 1.5rem;
    color: var(--primary);
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}

.trust-item .trust-title {
    font-weight: 700;
    color: var(--secondary);
    font-size: 0.95rem;
    display: block;
}

.trust-item .trust-sub {
    color: #718096;
    font-size: 0.82rem;
    display: block;
}

@media (max-width: 767px) {
    .trust-item { justify-content: flex-start; }
}

/* ==========================================================================
   Placeholder photo blocks (for shots not taken yet)
   ========================================================================== */
.photo-placeholder {
    border: 2px dashed rgba(44,62,80,0.35);
    border-radius: 15px;
    background: repeating-linear-gradient(45deg, #f7f4ef, #f7f4ef 10px, #f2ede4 10px, #f2ede4 20px);
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #718096;
    padding: 2rem;
}

.photo-placeholder i {
    font-size: 2.2rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.photo-placeholder .ph-label {
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 0.25rem;
}

.photo-placeholder .ph-hint {
    font-size: 0.85rem;
}

/* ==========================================================================
   Nav CTA button (Foglalás) + language switch
   ========================================================================== */
.nav-cta {
    background-color: var(--primary);
    color: #fff !important;
    border-radius: 50px;
    padding: 8px 22px !important;
    font-weight: 700;
    margin-left: 10px;
    box-shadow: 0 4px 14px rgba(36,80,46,0.3);
}

.nav-cta:hover {
    background-color: var(--primary-hover);
    color: #fff !important;
}

.lang-switch .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ==========================================================================
   Section heading helper (used on restyled legacy pages: arak, hazirend, etc.)
   ========================================================================== */
.section-heading-block {
    /* This is the first element on several pages (Árak, Foglalás, Házirend,
       Kapcsolat, etc.) that sit directly under the fixed navbar - the old
       4rem top padding was less than the navbar's real height, so the nav
       covered the page's own H1. Padding now matches the navbar's rendered
       height at each breakpoint (measured), plus a comfortable buffer. */
    padding: 6.5rem 0 1rem;
    background: #fff;
    text-align: center;
}

@media (min-width: 992px) {
    .section-heading-block {
        padding-top: 7.5rem;
    }
}

@media (min-width: 1200px) {
    .section-heading-block {
        padding-top: 9.5rem;
    }
}

.section-heading-block h1 {
    font-family: var(--serif-font);
    color: var(--secondary);
    font-weight: 700;
    font-size: 2.4rem;
    margin-bottom: 0.75rem;
}

.content-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(26,37,47,0.08);
    padding: 2.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 767px) {
    .content-card { padding: 1.5rem; }
}

.rr-table {
    width: 100%;
    border-collapse: collapse;
}

.rr-table th, .rr-table td {
    border: 1px solid #e7e0d4;
    padding: 0.6rem 0.75rem;
    text-align: center;
}

.rr-table th {
    background: #fbf6ef;
    color: var(--secondary);
}

/* Booking calendar cards */
.calendar-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(26,37,47,0.08);
    padding: 1.5rem;
    height: 100%;
    margin-bottom: 1.5rem;
}

.booking-form-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(26,37,47,0.08);
    padding: 2.5rem;
}

.booking-form-card label {
    font-weight: 600;
    color: var(--secondary);
    font-size: 0.9rem;
}

.booking-form-card .form-control {
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    border: 1px solid #d8d2c6;
    margin-bottom: 1rem;
}

.faq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(36,80,46,0.12);
    color: var(--primary);
    font-weight: 700;
    margin-right: 0.6rem;
    flex-shrink: 0;
}

/* ==========================================================================
   About / stats strip (homepage - short intro + a handful of honest,
   verifiable numbers about the house, not invented guest/review counts)
   ========================================================================== */
.about-stats {
    background: var(--cream-bg);
    padding: 4rem 0;
}

.about-stats .about-intro {
    max-width: 720px;
    margin: 0 auto 3rem;
    text-align: center;
}

.about-stats .about-intro h2 {
    font-family: var(--serif-font);
    color: var(--secondary);
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.about-stats .about-intro p {
    color: #4a5568;
    font-size: 1.08rem;
    line-height: 1.7;
}

.stat-item {
    text-align: center;
    padding: 0.5rem 1rem;
}

.stat-item .stat-number {
    font-family: var(--serif-font);
    display: block;
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-item .stat-label {
    display: block;
    color: var(--secondary);
    font-size: 0.92rem;
    font-weight: 600;
}

/* ==========================================================================
   Featured / highlighted callout block (homepage - a single, visually
   distinct panel that stands apart from the regular white feature-blocks)
   ========================================================================== */
.featured-block {
    background: var(--secondary);
    color: rgba(255,255,255,0.92);
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.featured-block .featured-eyebrow {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #a9c2ae;
    margin-bottom: 1rem;
}

.featured-block h2 {
    font-family: var(--serif-font);
    font-weight: 700;
    font-size: 2.4rem;
    margin-bottom: 1.25rem;
    color: #fff;
}

.featured-block p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.82);
}

.featured-block .feature-img-wrapper {
    box-shadow: 0 25px 50px rgba(0,0,0,0.35);
}

.featured-block .btn-secondary-custom {
    border-color: rgba(255,255,255,0.6);
}

/* ==========================================================================
   Map / location panel (homepage)
   ========================================================================== */
.map-panel {
    padding: 5rem 0;
    background: #fff;
}

.map-panel h2 {
    font-family: var(--serif-font);
    color: var(--secondary);
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}

.map-panel .map-intro {
    max-width: 700px;
    margin: 0 auto 2.5rem;
    text-align: center;
    color: #4a5568;
    font-size: 1.05rem;
}

.map-panel .map-frame {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(26,37,47,0.15);
}

.map-panel .map-distance-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    color: #4a5568;
}

.map-panel .map-distance-list li {
    padding: 0.35rem 0;
    border-bottom: 1px dashed #e2ddd0;
}

.map-panel .map-distance-list li:last-child {
    border-bottom: none;
}

.map-panel .map-distance-list i {
    color: var(--primary);
    width: 22px;
}