/* ─── Google Fonts ─────────────────────────────────────────────
   Cormorant Garamond was missing — this file is the safest place
   to add it since it loads on every page via app.blade.php line 344.
   Inter + Playfair Display are already loaded in app.blade.php line 330.
──────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');

/* ─── CSS Variables ────────────────────────────────────────────
   Mirrors @theme in app.css so plain CSS files can reference them.
──────────────────────────────────────────────────────────────── */
:root {
    --gold:         #B8860B;
    --gold-light:   #D4A017;
    --gold-pale:    #FEF3C7;
    --gold-dark:    #8B6500;
    --navy:         #0f1f3c;
    --cream:        #FDF8EE;
    --obsidian:     #0d0d0d;
}

/* ─── Product / Hire Card hovers ───────────────────────────────
   Kept from old premium.css — these classes exist on hire pages.
──────────────────────────────────────────────────────────────── */
.product-card,
.hire-card {
    border-radius: 12px;
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden;
}
.product-card:hover,
.hire-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0,0,0,.13), 0 2px 8px rgba(184,134,11,.10);
}
.product-card img,
.hire-card img {
    transition: transform .4s ease;
}
.product-card:hover img,
.hire-card:hover img {
    transform: scale(1.04);
}
@media (max-width: 640px) {
    .product-card:hover,
    .hire-card:hover { transform: none; }
}

/* ─── Sticky nav — shrink on scroll ───────────────────────────
   The .nav-compact class is added by JS (app.js) when the user
   scrolls past 80px. app.css already defines .nav-compact .nav-logo
   but needs the header wrapper transition too.
──────────────────────────────────────────────────────────────── */
#site-header {
    transition: box-shadow .3s ease, background-color .3s ease;
}
#site-header.nav-compact {
    box-shadow: 0 2px 16px rgba(0,0,0,.10);
    background-color: rgba(255,255,255,.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ─── WhatsApp floating button — show on ALL screens ──────────
   The floating button at line 283 of app.blade.php has
   class="hidden lg:flex". Override that so it is visible on
   mobile too. The 5-tab mobile nav bar is fixed at the bottom,
   so we push the floating button above it on small screens.
──────────────────────────────────────────────────────────────── */
#wa-float {
    display: flex !important;
}
@media (max-width: 1023px) {
    #wa-float {
        bottom: 80px !important; /* sit above the 64px mobile nav bar */
    }
}

/* ─── Footer headings ──────────────────────────────────────────
   Kept from old premium.css.
──────────────────────────────────────────────────────────────── */
footer h3,
.footer-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--gold-light);
}

/* ─── Scrollbar ────────────────────────────────────────────────
   app.css already defines scrollbar styles (5px thumb).
   This matches the same gold palette without overriding width.
──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar-thumb {
    background: rgba(184,134,11,.45);
    border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
    background: #B8860B;
}