/*
 * Aveline Interiör.
 *
 * A theme is the only place a particular shop's taste is allowed to live. It
 * loads after the default stylesheet and changes what that one deliberately left
 * neutral: the palette and the lettering. No layout is redefined here, so an
 * improvement to the default storefront reaches this shop too.
 *
 * The colours are the ones the shop already uses, read from the live site:
 * white with black text, a warm sand for sunken areas, and terracotta for the
 * few things that must be noticed.
 *
 * Fonts are served from this deployment rather than from a font host. Two
 * reasons: the content security policy allows scripts and styles from this
 * origin only, and a shop should not tell a third party who is reading it.
 * Newsreader and Red Hat Display are both under the SIL Open Font License,
 * which permits exactly this.
 */

@font-face {
    font-family: Newsreader;
    font-style: normal;

    /* One variable file covers every weight the shop uses, so switching from
       light headings to normal body text costs no extra download. */
    font-weight: 300 500;
    font-display: swap;
    src: url("../../fonts/newsreader-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Newsreader;
    font-style: normal;
    font-weight: 300 500;
    font-display: swap;
    src: url("../../fonts/newsreader-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: Newsreader;
    font-style: italic;
    font-weight: 300 400;
    font-display: swap;
    src: url("../../fonts/newsreader-italic-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Newsreader;
    font-style: italic;
    font-weight: 300 400;
    font-display: swap;
    src: url("../../fonts/newsreader-italic-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Red Hat Display";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../../fonts/redhatdisplay-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Red Hat Display";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../../fonts/redhatdisplay-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
        U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --ink: #000000;

    /* Not grey: the same brown as the sunken panels, lightened. Grey next to a
       warm palette reads as a mistake. */
    --ink-muted: #6b5f4f;
    --paper: #ffffff;
    --paper-sunken: #e9e4e0;
    --line: #eae8e6;

    /* Butikens bruna, vald av Aveline: banderollen, knappar när man pekar på
       dem, markeringar. Bara ytor — texten behåller sina mörkare bruna toner,
       som går att läsa. */
    --accent: #9d826d;
    --accent-deep: #8a705c;
    --accent-contrast: #ffffff;

    /* Ljusa accentytor (bannern, Slutsåld, REA, markerade rader) i Avelines
       ljusa beige. Den bruna ovan är kvar för knappar. */
    --color-accent-light: #e9e4e0;
    --color-accent-light-ink: #433625;

    --font-body: Newsreader, Georgia, "Times New Roman", serif;
    --font-accent: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Slightly larger than the default: this face runs small, and the shop's own
       site sets it up rather than down. */
    --measure: 66ch;
}

body {
    font-family: var(--font-body);
    font-size: 17px;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-body);

    /* Light, with the letters closed up. This is the single decision that makes
       the page look like theirs rather than like a default. */
    font-weight: 300;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* The lettering that is not prose: navigation, buttons, prices, labels. Set in
   the sans face so it reads as interface rather than as text. */
nav,
button,
.button,
.button-secondary,
input[type="submit"],
.price,
.badge,
label,
th {
    font-family: var(--font-accent);
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* The price in the font's own weight, never a made-up bolder one: see
   "Priset" in store.css. */
.price {
    font-weight: 400;
    letter-spacing: 0;
}

/* Alla knappar i butikens bruna, som banderollen och kassaknappen. */
button,
.button,
input[type="submit"] {
    background: var(--c-button-background, var(--accent));
    color: var(--c-button-text, var(--accent-contrast));
    border: 1px solid var(--c-button-background, var(--accent));
    text-transform: none;
}

button:hover,
.button:hover,
input[type="submit"]:hover {
    background: var(--c-button-hover-background, var(--accent-deep));
    border-color: var(--c-button-hover-background, var(--accent-deep));
}

/* Den andra knappen i ett par (Fortsätt handla, Använd): samma bruna, som
   kant och text, så att den fyllda är den man ser först. */
.button-secondary,
.button.button-secondary,
button.button-secondary {
    background: transparent;
    color: var(--accent-deep);
    border: 1px solid var(--c-button-background, var(--accent));
}

.button-secondary:hover,
.button.button-secondary:hover,
button.button-secondary:hover {
    background: var(--c-button-background, var(--accent));
    border-color: var(--c-button-background, var(--accent));
    color: var(--c-button-text, var(--accent-contrast));
}

.product-card .title {
    font-family: var(--font-body);
    font-weight: 400;
}

footer {
    background: var(--c-footer-background, var(--paper-sunken));
    color: var(--footer-text, #433625);
}

footer a {
    color: var(--footer-text, #433625);
}

/* All text i sidfoten följer temats sidfotsfärg: rubriken, den lilla texten
   under nyhetsbrevet och raden längst ned. Med en mörk sidfot, som granngrön
   till jul, blir den annars mörk text på mörk botten. */
.site-footer,
.site-footer .section-heading,
.site-footer .muted,
.site-footer .hint,
.site-footer small,
.site-footer .newsletter-terms,
.site-footer .footer-legal,
.site-footer .footer-legal * {
    color: var(--footer-text, #433625);
}

.site-footer .muted,
.site-footer .hint,
.site-footer small,
.site-footer .newsletter-terms,
.site-footer .footer-legal {
    opacity: 0.85;
}

.badge-soldout {
    background: var(--c-sold-out-badge-background, var(--color-accent-light));
    color: var(--color-accent-light-ink);
}

.badge-sale {
    background: var(--c-sale-badge-background, var(--color-accent-light));
    color: var(--c-sale-badge-text, var(--color-accent-light-ink));
}

/* Nyhetsbrevets knapp i butikens bruna, som på deras tidigare sida. */
.newsletter-form button {
    background: var(--c-newsletter-button-background, var(--accent));
    border-color: var(--c-newsletter-button-background, var(--accent));
    color: var(--c-newsletter-button-text, var(--accent-contrast));
}

.newsletter-form button:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
}

/* Mobilmenyn: en tecknad kvist nedtill till höger, på bildens egen gräddvita
   ton så att ingen kant syns. Undermenyn får samma bakgrund. Den lilla
   olivkvisten längst ned behövs inte bredvid den. */
@media (max-width: 47.999rem) {
    .site-header.is-collapsible .site-nav,
    .is-collapsible .nav-sub.is-open {
        background: var(--c-header-background, #fdfbf7) url("aveline/menu-branch.webp") right bottom / 100% auto no-repeat;
    }

    .is-collapsible .olive-branch--nav {
        display: none;
    }
}

/* Panelen direkt efter toppbilden: två tecknade kvistar i hörnen, som på
   foxandbeaushop.com — en uppe till höger och en nere till vänster, delvis
   utanför kanten, på panelens vanliga bakgrund. Uppmätt där: 200 px breda på
   telefon, 400 px på dator. Hänger julkulorna under toppbilden är det panelen
   efter dem som får grenarna. */
.slideshow + section,
.hero-video + section,
.hero-image + section,
.baubles-below + section {
    background-color: var(--c-section-background, var(--paper-sunken));
    background-image: url("aveline/sprig-right.webp"), url("aveline/sprig-left.webp");
    background-repeat: no-repeat, no-repeat;
    background-size: 200px auto, 200px auto;
    background-position: calc(100% + 50px) -25px, -50px calc(100% + 20px);
}

@media (min-width: 48rem) {
    .slideshow + section,
    .hero-video + section,
    .hero-image + section,
    .baubles-below + section {
        background-size: 400px auto, 400px auto;
        background-position: calc(100% + 125px) -24px, -175px calc(100% + 125px);
    }
}