/* ─────────────────────────────────────────────────────────────────────────────
   cocktails.css — Nolow Drinks CH
   Cocktail-specific styles for page-cocktails.php and page-cocktails-selection.php
   
   Enqueued as 'nolow-cocktails' in functions.php [Assets-001]
   Place at: /assets/css/cocktails.css
   
   NOTE: Hero styles (#hero-cocktails, #hero-cocktails-selection) and their
   breakpoints are already declared in index.css and media-queries.css.
   This file only adds what is missing: hero backgrounds, the section header
   (.featured-cocktails), and the active state for product filter buttons.
───────────────────────────────────────────────────────────────────────────── */

/* ---:::::::::::::::::::::::::::::::::::: HERO-cocktails ::::::::::::::::::::::::::::::::::::---  */
#hero-cocktails, #hero-cocktails-selection {
    height:60vh;
    transition: all 0.7s ease-out;
}
#hero-cocktails .container, #hero-cocktails-selection .container {
    padding: 0 20px;
    transition: all 0.7s ease;
}
#hero-cocktails p, #hero-cocktails-selection p {
    width: 100%;
    padding: 0 50px;
    transition: all 0.7s ease;
}
#hero-cocktails span.display, #hero-cocktails-selection span.display {
    display: none;
}
#hero-cocktails .cover, #hero-cocktails-selection .cover {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height:100%; 
    margin:0px; 
    border:none; 
    border-radius:0px;
    background-position:77%; 
    background-repeat:no-repeat; 
    background-size:cover;
    transition: all 0.7s ease;
}
#hero-cocktails .cover::before, #hero-cocktails-selection .cover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border:none; 
    border-radius:0px; 
    background: rgba(0, 0, 0, 0.1); /* Dark overlay, adjust opacity as needed */
    transition: border-radius 0.7s ease;
}
#hero-cocktails.scrolled .cover, #hero-cocktails-selection.scrolled .cover {
    margin: 0;
    border-radius: 0;
}
#hero-cocktails.scrolled .cover::before, #hero-cocktails-selection.scrolled .cover::before {
    border-radius: 0;
}
#hero-cocktails .text-content, #hero-cocktails-selection .text-content {
    position: relative;
    display: grid;
    row-gap: 50px;
    text-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
    z-index: 1;        
}
#hero-cocktails .text-gap, #hero-cocktails-selection .text-gap {
    position: relative;
    display: grid;
    row-gap: 0px;
}


/* ─────────────────────────────────────────────────────────────────────────
   SECTION HEADER — .featured-cocktails
   Mirrors the legacy .featured-cocktails block padding and title gap.
───────────────────────────────────────────────────────────────────────────  */
.featured-cocktails {
    padding: 40px 0 30px 0;
}
.featured-cocktails .title {
    display: grid;
    row-gap: 10px;
}


/* ─────────────────────────────────────────────────────────────────────────
   PRODUCT FILTER BUTTON — active state
   The .cta-button-nav-light base style is in components.css.
   This adds the visual indicator for the currently selected product.
───────────────────────────────────────────────────────────────────────────  */
.cta-button-nav-light.active {
    background-color: var(--nld-green);
    border-color: var(--nld-green);
    color: var(--white) !important;
}
.cta-button-nav-light.active:hover {
    background-color: var(--lighter-grey);
    border-color: var(--lighter-grey);
    color: var(--black) !important;
}


/* ---:::::::::::::::::::::::::::::::::::: COCKTAIL PAGE ::::::::::::::::::::::::::::::::::::---  */
#cocktail .cover {
    height:300px; 
    border: none; 
    border-radius: 20px;
    background-position:center; 
    background-repeat:no-repeat; 
    background-size:cover;
}
#cocktail .packshot-cover {
    height:500px; 
    border: none; 
    border-radius: 20px;
    background-position:center; 
    background-repeat:no-repeat; 
    background-size:cover;
}
#cocktail .description {
    display: flex; 
    align-items: center; 
    position: relative;
}
#cocktail .content {
    position: relative; 
    display: grid; 
    row-gap: 5px;
}
#cocktail .supporting-visual {
    min-height:300px; 
    max-height:450px;
    border: none; 
    border-radius: 20px;
    background-position:center; 
    background-repeat:no-repeat; 
    background-size:cover;
}
#cocktail .sep {
    position:relative; 
    width:20%; 
    height:5px; 
    border-radius:50px; 
    background-color:var(--nld-green);
}
#cocktail .ingredient-check {
    font-size: 0.9rem;
    color: var(--nld-green);
}
#cocktail .ingredient-dash {
    display: inline-block;
    width: 50px;
    height: 2px;
    border-radius: 50px;
    background-color: var(--lighter-grey);
}
#cocktail .ingredient-text {
    max-width: 200px;
    font-size: 0.9rem;
    color: var(--black);         /* or your custom dark tone */
}
#cocktail .cocktail-visual {
    position: relative;
    height: 225px; 
    border-radius: 20px; 
    background-position:center; 
    background-repeat:no-repeat; 
    background-size:cover;
}
#cocktail .recipe-trigger {
    position: absolute;
    bottom: 20px;
    right: 15px;
}
#cocktail .rating-container {
    display: inline-block; 
    height: 6px; 
    width: 100%; 
    margin: 0; 
    border:none; 
    border-radius:40px; 
    background-color: var(--light-grey);
}
#cocktail .rating-cursor {
    display: block; 
    width: 14px; 
    height: 14px; 
    margin-top: -4px; 
    border-radius: 50px; 
        background-color: var(--nld-green);
}
.dropdown-toggle.cta-button-nav-light::after {
    display: none;
}