/* Wedding Theme - like the couple's printed stationery: a near-white card, green-grey ink,
   centred and airy. The script is used only for the menu title, and the one bold detail is
   the pair of interlocking rings (sage and rose gold) on the header and footer rules. */

.theme-Wedding {
    --wedding-paper: #FDFCFA;
    --wedding-ink: #2F3A34;
    --wedding-ink-soft: #6B7568;
    --wedding-sage: #8A9A82;
    --wedding-rose-gold: #C29A86;

    background-color: var(--wedding-paper);
    color: var(--wedding-ink);
    font-family: 'Cormorant Garamond', serif;
}

.theme-Wedding h1,
.theme-Wedding h2,
.theme-Wedding h3,
.theme-Wedding h4,
.theme-Wedding h5,
.theme-Wedding h6 {
    font-family: 'Cormorant Garamond', serif;
    color: var(--wedding-ink);
}

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

/* The menu title is written like the couple's names on the invitation */
.theme-Wedding .menu-title {
    font-family: 'Pinyon Script', cursive;
    font-weight: 400;
    line-height: 1.2;
    /* About 20% larger than Bootstrap's display-4 at every width: script lettering looks
       smaller than other fonts at the same size (about 41px on a phone, up to 68px on desktop) */
    font-size: clamp(2.5rem, 1.75rem + 3.3vw, 4.25rem);
}

/* Fine sage rules */
.theme-Wedding .category-line,
.theme-Wedding .decorative-line,
.theme-Wedding .decorative-line-last {
    background-color: var(--wedding-sage);
}

.theme-Wedding .decorative-line,
.theme-Wedding .decorative-line-last {
    width: 200px;
}

/* Two interlocking rings, drawn with CSS. The span's paper background hides the rule behind them. */
.theme-Wedding .decorative-icon,
.theme-Wedding .decorative-icon-last {
    width: 64px;
    height: 24px;
    padding: 0;
    background-color: var(--wedding-paper);
}

.theme-Wedding .decorative-icon::before,
.theme-Wedding .decorative-icon::after,
.theme-Wedding .decorative-icon-last::before,
.theme-Wedding .decorative-icon-last::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--wedding-sage);
    transform: translateY(-50%);
}

/* Rings at 14-36px and 28-50px: they overlap by 8px, centred in the 64px span */
.theme-Wedding .decorative-icon::before,
.theme-Wedding .decorative-icon-last::before {
    left: 14px;
}

.theme-Wedding .decorative-icon::after,
.theme-Wedding .decorative-icon-last::after {
    left: 28px;
    border-color: var(--wedding-rose-gold);
}

/* Categories: small, widely spaced capitals, like labels on printed stationery */
.theme-Wedding .category-name {
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--wedding-ink-soft);
}

/* Category titles are already small here, so long ones only shrink a little */
.theme-Wedding .category-item .category-name.category-name-long {
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    line-height: 1.6;
}

/* Cocktails: centred like a menu card, with air instead of lines between them.
   Less bottom padding than other themes, since there is no line to keep clear of. */
.theme-Wedding .menu-item {
    text-align: center;
    border-bottom: none;
    padding-bottom: 0.5rem;
}

.theme-Wedding .cocktail-name {
    font-weight: 500;
    font-size: 1.6rem;
    letter-spacing: 0.02em;
}

.theme-Wedding .cocktail-description {
    font-style: italic;
    font-size: 1.15rem;
    color: var(--wedding-ink-soft);
}

.theme-Wedding .ingredients {
    justify-content: center;
}

.theme-Wedding .ingredient,
.theme-Wedding .ingredient-list-item {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--wedding-ink);
}

/* Small sage 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-Wedding .ingredient:not(:last-child)::after {
    content: "";
    top: 50%;
    right: -2.5px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--wedding-sage);
    transform: translateY(-50%);
}

/* The list is centred as a block, with its lines left-aligned so the dots line up */
.theme-Wedding .ingredients-list {
    display: inline-block;
    text-align: left;
}

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

.theme-Wedding .preparation-text {
    font-style: italic;
    color: var(--wedding-ink-soft);
}

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