/**
 * Custom overrides for the original WordPress-derived theme.
 *
 * Loaded after style.css in resources/views/layouts/frontend.blade.php so
 * these rules win on specificity ties. Use this file for small targeted
 * fixes — don't grow it into a parallel theme. Larger styling work
 * belongs in a fresh stylesheet or a Tailwind layer.
 */

/* ==========================================================================
   Heading anchors inherit the heading's color
   --------------------------------------------------------------------------
   The original theme styled per-class heading-anchor combinations (e.g.
   `.title-section h1.our-product-main a`) but only for `h1` variants.
   Pages added later use proper semantic hierarchy (h2 / h3 inside .heading-
   about, .our-product-main, etc.) — those anchors fell back to Bootstrap's
   default link color (#007bff) and rendered as blue text.
   --------------------------------------------------------------------------
   Generic inheritance rule: anchor inside ANY heading takes the heading's
   color. Existing per-class rules with higher specificity still win where
   they exist (e.g. the .flat-our-product hover gold color).
   ========================================================================== */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
}

/*
 * NOTE: do NOT override the :hover state here. The theme intentionally
 * uses brand gold (#AA8453) on hover for heading anchors, applied
 * globally via `a:hover` rules in style.css / color2.css. A `:hover`
 * rule in this file would defeat the gold-on-hover effect because of
 * higher specificity + load-order win. Removing text-decoration
 * is also not needed — the theme already handles it.
 */

/* ==========================================================================
   Shop wine-type filter bar
   --------------------------------------------------------------------------
   Server-side filter tabs on /shop. NOT styled via the theme's `.flat-filter`
   class on purpose: main.js binds a click handler to `.flat-filter li` that
   calls return false and would cancel navigation on these real links. Lives
   here (cache-busted file) so it reliably ships to production.
   ========================================================================== */
.shop-type-filter {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
    margin: 26px 0 0;
    padding: 0;
}

/* The theme spaces the "Showing results" bar 100px down (it used to be the
   first element under the page title). With the filter now above it, tighten
   the gap so the grid sits closer to the filter. */
.main-shop-fullwidth-grid .filter-shop {
    margin-top: 22px;
}

.main-shop-fullwidth-grid .flat-products.style3 {
    padding-top: 26px;
}

.shop-type-filter li {
    margin: 0;
    padding: 0;
    background: none;
}

.shop-type-filter li::before {
    display: none;
}

.shop-type-filter li a {
    display: inline-block;
    font-family: 'Forum', serif;
    font-size: 14px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #8a7a64;
    padding: 9px 24px;
    border: 1px solid #e4dccd;
    border-radius: 40px;
    background: #fff;
    text-decoration: none;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.shop-type-filter li a:hover {
    color: #fff;
    background: #c9a96e;
    border-color: #c9a96e;
}

.shop-type-filter li.active a {
    color: #fff;
    background: linear-gradient(135deg, #c9a96e 0%, #AA8453 100%);
    border-color: #AA8453;
    box-shadow: 0 6px 16px rgba(170, 132, 83, 0.28);
}

@media (max-width: 575px) {
    .shop-type-filter {
        gap: 8px;
        margin: 18px 0 0;
    }

    .shop-type-filter li a {
        font-size: 12px;
        letter-spacing: 1.2px;
        padding: 7px 16px;
    }
}

/* ==========================================================================
   Wine card name + type label
   --------------------------------------------------------------------------
   The name and the wine-type label are stacked in a positioned heading wrapper
   so the type always sits directly under the name, even when a long name wraps
   to two lines. Overrides color2.css's absolute `.wine-card-name` (which is not
   cache-busted), so it must win here.
   ========================================================================== */
.wine-card-new .wine-card-heading {
    position: absolute;
    top: 12px;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    max-width: 90%;
}

.wine-card-new .wine-card-heading .wine-card-name {
    position: static;
    top: auto;
    left: auto;
    max-width: 100%;
    display: inline-block;
    font-family: 'Forum', serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25;
    color: #fff;
    background: linear-gradient(135deg, #c9a96e 0%, #AA8453 55%, #8b7355 100%);
    padding: 6px 14px 6px 10px;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 2px 6px rgba(139, 115, 85, 0.25);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.wine-card-new .wine-card-heading .wine-card-type {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 10px;
    font-family: 'Forum', serif;
    font-size: 10.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1;
    color: #5e503b;
    background: rgba(255, 255, 255, 0.92);
    padding: 5px 12px 5px 9px;
    border-radius: 30px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.wine-card-new .wine-card-heading .wine-card-type-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   Image gallery lightbox
   --------------------------------------------------------------------------
   Modal for stepping through a gallery group (see flatGalleryLightbox in
   main.js). Applied to elements with [data-lightbox="<group>"].
   ========================================================================== */
.lw-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(20, 16, 12, 0.93);
    opacity: 0;
    transition: opacity .25s ease;
}

.lw-lightbox.is-open {
    display: flex;
    opacity: 1;
}

.lw-lightbox-stage {
    max-width: 90vw;
    max-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lw-lightbox-img {
    max-width: 90vw;
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 12px 45px rgba(0, 0, 0, 0.55);
}

.lw-lightbox-close,
.lw-lightbox-prev,
.lw-lightbox-next {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.25);
    cursor: pointer;
    line-height: 1;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.lw-lightbox-close:hover,
.lw-lightbox-prev:hover,
.lw-lightbox-next:hover {
    background: #AA8453;
    border-color: #AA8453;
}

.lw-lightbox-close {
    top: 24px;
    right: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 30px;
}

.lw-lightbox-prev,
.lw-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 34px;
}

.lw-lightbox-prev:hover { transform: translateY(-50%) scale(1.05); }
.lw-lightbox-next:hover { transform: translateY(-50%) scale(1.05); }

.lw-lightbox-prev { left: 28px; }
.lw-lightbox-next { right: 28px; }

.lw-lightbox-caption {
    position: absolute;
    bottom: 44px;
    left: 0;
    right: 0;
    padding: 0 20px;
    text-align: center;
    color: #f1ece4;
    font-family: 'Forum', serif;
    font-size: 16px;
    letter-spacing: .5px;
}

.lw-lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    letter-spacing: 1px;
}

@media (max-width: 575px) {
    .lw-lightbox { padding: 16px; }
    .lw-lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 24px; }
    .lw-lightbox-prev, .lw-lightbox-next { width: 44px; height: 44px; font-size: 26px; }
    .lw-lightbox-prev { left: 10px; }
    .lw-lightbox-next { right: 10px; }
}

/* ==========================================================================
   Mobile fixes
   ========================================================================== */

@media (max-width: 767px) {
    /* Footer's 60px bottom padding left an empty strip below the copyright bar. */
    footer.style2 {
        padding-bottom: 0 !important;
    }
}