/* ════════════════════════════════════════════
   EventsREZ Shared Styles
   Loaded site-wide via master.blade.php
   Site-wide chrome (header + footer) refresh
   ════════════════════════════════════════════ */

:root {
    --er-burgundy:        #6B2737;
    --er-burgundy-deep:   #4D1B26;
    --er-burgundy-light:  #8B3C4D;
    --er-cream:           #FAF7F2;
    --er-bone:            #F5EFE6;
    --er-stone:           #E8E0D3;
    --er-charcoal:        #1A1612;
    --er-graphite:        #4A453E;
    --er-mist:            #8B847B;
    --er-gold:            #C8A464;
    --er-gold-warm:       #E8C988;
    --er-white:           #FFFFFF;

    --font-display:       'Fraunces', Georgia, serif;
    --font-body:          'Inter', -apple-system, sans-serif;

    --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
}


/* ════════════════════════════════════════════
   HEADER (refined editorial style)
   ════════════════════════════════════════════ */

/* Override the default rental-header styling */
header.rental-header {
    background: var(--er-cream) !important;
    border-bottom: 1px solid var(--er-stone) !important;
    padding: 28px 0 !important;
    font-family: var(--font-body);
    transition: padding 0.3s var(--ease-out), background 0.3s var(--ease-out);
}

header.rental-header .container {
    max-width: 1280px;
}

/* Logo */
header.rental-header .logo img {
    max-height: 60px;
    width: auto;
    transition: opacity 0.2s var(--ease-out);
}
header.rental-header .logo a:hover img { opacity: 0.85; }

/* Default everywhere: show dark wordmark, hide light variant.
   The homepage overrides this below to swap based on nav-scrolled state. */
header.rental-header .logo .logo-light { display: none; }

/* ─── Right side nav list (renamed from airbnb_list) ─── */
header.rental-header ul.nav-list-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 4px;
}

header.rental-header ul.nav-list-right > li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Default nav links */
header.rental-header ul.nav-list-right > li > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--er-charcoal);
    letter-spacing: -0.005em;
    text-decoration: none;
    border-radius: 100px;
    transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
header.rental-header ul.nav-list-right > li > a:hover {
    background: rgba(107, 39, 55, 0.06);
    color: var(--er-burgundy);
    text-decoration: none;
}
header.rental-header ul.nav-list-right > li > a i {
    font-size: 13px;
    color: inherit;
}

/* Sign in (text-only) */
header.rental-header li.signup a {
    color: var(--er-charcoal);
    background: transparent;
}
header.rental-header li.signup a:hover {
    color: var(--er-burgundy);
    background: rgba(107, 39, 55, 0.06);
}

/* Register (filled burgundy button) */
header.rental-header li.register a {
    background: var(--er-burgundy);
    color: var(--er-white) !important;
    padding: 11px 22px;
    border-radius: 100px;
    font-weight: 600;
    margin-left: 4px;
    box-shadow: 0 4px 14px -4px rgba(107, 39, 55, 0.4);
    transition: background 0.25s var(--ease-out), transform 0.15s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
header.rental-header li.register a:hover {
    background: var(--er-burgundy-deep);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -4px rgba(107, 39, 55, 0.5);
}

/* ─── User dropdown (renamed from airbnb_menu) ─── */
.dropdown.user-menu {
    position: relative;
    margin-left: 8px;
}

.dropdown.user-menu #dropdownMenuButton {
    background: transparent !important;
    color: var(--er-charcoal) !important;
    border: 1px solid var(--er-stone);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 7px !important;
    border-radius: 100px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
}
.dropdown.user-menu #dropdownMenuButton:hover {
    border-color: var(--er-burgundy);
    background: var(--er-cream) !important;
}

.dropdown.user-menu #dropdownMenuButton .user-img {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    min-width: 30px;
    max-width: 30px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.dropdown.user-menu #dropdownMenuButton .user-img img {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 !important;
    display: block;
}
.dropdown.user-menu #dropdownMenuButton span { color: inherit; }

.dropdown.user-menu .dropdown-menu {
    background: var(--er-cream);
    border: 1px solid var(--er-stone);
    border-radius: 12px;
    box-shadow: 0 16px 40px -12px rgba(26, 22, 18, 0.18);
    padding: 8px;
    margin-top: 8px;
    min-width: 220px;
}
.dropdown.user-menu .dropdown-menu li,
.dropdown.user-menu .dropdown-menu.show li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block !important;
}
.dropdown.user-menu .dropdown-menu li a,
.dropdown.user-menu .dropdown-menu.show li a {
    display: block;
    padding: 10px 14px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--er-charcoal);
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.dropdown.user-menu .dropdown-menu li a:hover,
.dropdown.user-menu .dropdown-menu.show li a:hover {
    background: var(--er-bone);
    color: var(--er-burgundy) !important;
}

/* ─── "Add a Restaurant" / "Switch To Hosting" pill ───
   Sized to match the user-menu dropdown button so the two sit next to
   each other as a matched pair. Icon-in-circle mimics the avatar bubble. */
header.rental-header ul.nav-list-right > li.add-venue > a {
    border: 1px solid var(--er-stone);
    background: transparent;
    padding: 7px 14px 7px 7px;
    gap: 8px;
    color: var(--er-charcoal);
}
header.rental-header ul.nav-list-right > li.add-venue > a:hover {
    border-color: var(--er-burgundy);
    background: var(--er-cream);
    color: var(--er-burgundy);
}
header.rental-header .add-venue-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    background: var(--er-bone);
    color: var(--er-burgundy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
header.rental-header .add-venue-icon i {
    font-size: 13px;
    color: inherit;
}
header.rental-header ul.nav-list-right > li.add-venue > a:hover .add-venue-icon {
    background: var(--er-white);
    color: var(--er-burgundy);
}

/* Mobile responsive overrides */
@media (max-width: 767px) {
    header.rental-header { padding: 18px 0 !important; }
    header.rental-header .logo img { max-height: 48px; }
    header.rental-header ul.nav-list-right { gap: 2px; }
    header.rental-header ul.nav-list-right > li > a { padding: 8px 10px; font-size: 13px; }
    header.rental-header li.register a { padding: 8px 14px; }
    .dropdown.user-menu #dropdownMenuButton { padding: 5px 10px 5px 5px !important; }
}


/* ════════════════════════════════════════════
   FOOTER (editorial dark)
   ════════════════════════════════════════════ */

footer.rental-footer {
    background: var(--er-charcoal);
    color: rgba(255, 255, 255, 0.75);
    padding: 80px 0 0;
    font-family: var(--font-body);
    position: relative;
    overflow: hidden;
    margin-top: 0;
}

/* Subtle texture */
footer.rental-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: 0.05;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Burgundy radial glow */
footer.rental-footer::after {
    content: '';
    position: absolute;
    bottom: -20%;
    right: -10%;
    width: 60%;
    height: 80%;
    background: radial-gradient(ellipse at center,
        rgba(107, 39, 55, 0.25) 0%,
        transparent 70%);
    pointer-events: none;
}

footer.rental-footer .container {
    position: relative;
    z-index: 1;
    max-width: 1280px;
}

/* ─── Top section grid ─── */
footer.rental-footer .er-footer-top {
    display: grid;
    grid-template-columns: 1.4fr 3fr;
    gap: 80px;
    padding-bottom: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Brand block */
footer.rental-footer .er-footer-brand .footer-logo img {
    max-height: 96px;
    width: auto;
    margin-bottom: 32px;
}
footer.rental-footer .er-footer-tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 22px;
    line-height: 1.3;
    color: var(--er-gold-warm);
    margin: 0 0 24px;
    max-width: 22ch;
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 100;
}
footer.rental-footer .er-footer-tagline em {
    font-style: italic;
}

/* Social icons */
footer.rental-footer .er-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
footer.rental-footer .er-footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.25s var(--ease-out);
}
footer.rental-footer .er-footer-social a:hover {
    background: var(--er-burgundy);
    border-color: var(--er-burgundy);
    color: var(--er-white);
    transform: translateY(-2px);
}
footer.rental-footer .er-footer-social svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Links columns */
footer.rental-footer .er-footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
footer.rental-footer .quick-link h4 {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--er-gold-warm);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
footer.rental-footer .quick-link ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
footer.rental-footer .quick-link ul li {
    margin: 0 0 10px;
    padding: 0;
}
footer.rental-footer .quick-link ul li a {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.2s var(--ease-out), padding-left 0.2s var(--ease-out);
}
footer.rental-footer .quick-link ul li a:hover {
    color: var(--er-gold-warm);
    padding-left: 4px;
    text-decoration: none;
}

/* ─── Bottom bar (copyright) ─── */
footer.rental-footer .er-footer-bottom {
    padding: 28px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
footer.rental-footer .er-footer-copy {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    letter-spacing: 0.02em;
}
footer.rental-footer .er-footer-copy strong {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}
footer.rental-footer .er-footer-fineprint {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

/* Mobile */
@media (max-width: 1024px) {
    footer.rental-footer .er-footer-top {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}
@media (max-width: 768px) {
    footer.rental-footer { padding: 56px 0 0; }
    footer.rental-footer .er-footer-links {
        grid-template-columns: 1fr 1fr;
        gap: 32px 24px;
    }
    footer.rental-footer .er-footer-tagline { font-size: 20px; }
    footer.rental-footer .er-footer-bottom {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}
@media (max-width: 480px) {
    footer.rental-footer .er-footer-links { grid-template-columns: 1fr; }
}