/* Halloween Theme - a menu read by candlelight: a near-black, aubergine-tinted night,
   bone-white text and pumpkin orange. Creepster is used only for the menu title (it gets hard
   to read in long text); the one picture is the crescent moon on the header and footer rules. */

.theme-Halloween {
    --halloween-night: #16111D;
    --halloween-bone: #ECE4D4;
    --halloween-bone-soft: #B9AFC4;
    --halloween-pumpkin: #F07C2A;
    --halloween-ember: #FFB061;

    background-color: var(--halloween-night);
    color: var(--halloween-bone);
    font-family: 'Cormorant Garamond', serif;
}

.theme-Halloween h1,
.theme-Halloween h2,
.theme-Halloween h3,
.theme-Halloween h4,
.theme-Halloween h5,
.theme-Halloween h6 {
    font-family: 'Cinzel', serif;
    color: var(--halloween-pumpkin);
}

.theme-Halloween body,
.theme-Halloween p,
.theme-Halloween li,
.theme-Halloween div,
.theme-Halloween a,
.theme-Halloween input,
.theme-Halloween textarea,
.theme-Halloween select,
.theme-Halloween label,
.theme-Halloween th,
.theme-Halloween td {
    font-family: 'Cormorant Garamond', serif;
    color: var(--halloween-bone);
}

/* The title glows faintly, like a carved pumpkin with a candle inside */
.theme-Halloween .menu-title {
    font-family: 'Creepster', cursive;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1.15;
    color: var(--halloween-pumpkin);
    text-shadow: 0 0 18px rgba(240, 124, 42, 0.45);
}

/* Thin pumpkin rules, faded so they don't compete with the text */
.theme-Halloween .category-line,
.theme-Halloween .decorative-line,
.theme-Halloween .decorative-line-last {
    background-color: rgba(240, 124, 42, 0.55);
}

.theme-Halloween .decorative-line,
.theme-Halloween .decorative-line-last {
    width: 180px;
}

/* Crescent moon, drawn with CSS. The span's night background hides the rule behind it. */
.theme-Halloween .decorative-icon,
.theme-Halloween .decorative-icon-last {
    width: 48px;
    height: 28px;
    padding: 0;
    background-color: var(--halloween-night);
}

/* A transparent circle whose offset shadow is the visible crescent */
.theme-Halloween .decorative-icon::before,
.theme-Halloween .decorative-icon-last::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 5px -3px 0 0 var(--halloween-ember);
    transform: translate(-65%, -40%);
}

/* Categories: carved-looking capitals */
.theme-Halloween .category-name {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--halloween-pumpkin);
}

.theme-Halloween .category-item .category-name.category-name-long {
    font-size: 1.15rem;
    letter-spacing: 0.08em;
}

.theme-Halloween .cocktail-name {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    color: var(--halloween-bone);
}

.theme-Halloween .cocktail-description {
    font-style: italic;
    font-size: 1.15rem;
    color: var(--halloween-bone-soft);
}

.theme-Halloween .ingredient,
.theme-Halloween .ingredient-list-item {
    font-size: 1.05rem;
    color: var(--halloween-bone);
}

/* Small pumpkin dots between ingredients, drawn with CSS so they sit centred on the line.
   right: -2.5px puts the dot halfway between two ingredients (public-menu.css spacing). */
.theme-Halloween .ingredient:not(:last-child)::after {
    content: "";
    top: 50%;
    right: -2.5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--halloween-pumpkin);
    transform: translateY(-50%);
}

.theme-Halloween .ingredient-list-item::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 8px;
    border-radius: 50%;
    background-color: var(--halloween-pumpkin);
    vertical-align: middle;
}

.theme-Halloween .preparation-text {
    font-style: italic;
    color: var(--halloween-bone-soft);
}

/* Faint violet dividers between cocktails, like mist between gravestones */
.theme-Halloween .menu-item {
    border-bottom: 1px solid rgba(142, 120, 176, 0.3);
}

.theme-Halloween .menu-item:last-of-type {
    border-bottom: none;
}

.theme-Halloween .decorative-line-last {
    margin-top: 3rem;
}