/*!
 * Confetti — an Omeka S theme by RefBytes, built on the Theme Engine.
 *
 * The engine's stylesheet (engine/css/engine.css) styles every page from the
 * --v-* design tokens. Confetti's design goes below, in the "theme" layer:
 * after the engine's layers, so it wins over the engine's rules, while Omeka
 * core CSS, module CSS and an admin's custom CSS still win over both.
 *
 * Shapes and colors come from the tokens, so every palette and dark mode
 * work without extra rules. Decorations (confetti, squiggles, stars) only
 * show with the "playful" setting (.cf-decor-playful on <body>); they are
 * purely visual and never carry text.
 */
@layer theme {
    /* ------------------------------------------------------------------
       Confetti's own tokens
       ------------------------------------------------------------------ */
    :root {
        --cf-radius: 1.5rem;
        --cf-radius-sm: 1rem;
        --cf-line: 3px;
        --cf-pop: 6px;
        /* Wave edges: a band hanging down (under the header, at the foot of
           a hero) or rising up (over the footer), drawn as masks so they
           take any color. One size everywhere. */
        --cf-wave-w: 6rem;
        --cf-wave-h: 1.5rem;
        --cf-wave-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0H60V5C52.5 5 52.5 12 45 12S37.5 5 30 5 22.5 12 15 12 7.5 5 0 5Z'/%3E%3C/svg%3E");
        --cf-wave-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12H60V7C52.5 7 52.5 0 45 0S37.5 7 30 7 22.5 0 15 0 7.5 7 0 7Z'/%3E%3C/svg%3E");
        --cf-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'%3E%3Cpath d='M3 6c6-6 12-6 18 0s12 6 18 0 12-6 18 0 12 6 18 0 12-6 18 0' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
        --cf-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l3.1 6.6 7.2.9-5.3 5 1.4 7.2L12 17.6l-6.4 3.6L7 14l-5.3-5 7.2-.9z'/%3E%3C/svg%3E");
        /* Confetti: dots in the palette's colors. */
        --cf-confetti:
            radial-gradient(circle at 8% 30%, var(--v-accent) 0 5px, transparent 6px),
            radial-gradient(circle at 22% 72%, var(--v-primary) 0 4px, transparent 5px),
            radial-gradient(circle at 37% 22%, var(--v-secondary) 0 3px, transparent 4px),
            radial-gradient(circle at 51% 64%, var(--v-accent) 0 4px, transparent 5px),
            radial-gradient(circle at 66% 28%, var(--v-primary) 0 5px, transparent 6px),
            radial-gradient(circle at 80% 76%, var(--v-secondary) 0 4px, transparent 5px),
            radial-gradient(circle at 93% 38%, var(--v-accent) 0 3px, transparent 4px);
    }

    body {
        /* Fredoka and friends read best a touch rounder than the engine's
           default corners. */
        --v-radius: var(--cf-radius-sm);
        --v-radius-sm: 0.75rem;
    }

    /* ------------------------------------------------------------------
       Type
       ------------------------------------------------------------------ */
    :where(h1, h2, h3, h4, h5, h6) { letter-spacing: 0.005em; }
    .v-page-title, .v-resource__header h1 { line-height: 1.1; }
    .v-kicker { font-family: var(--v-font-heading); letter-spacing: 0.04em; }
    .v-lead { font-size: var(--v-step-1); }

    /* Links: a wavy underline on hover (decorations on). */
    .cf-decor-playful :is(.v-main, .v-footer) a:not(.v-button, .button, .v-card__link, .v-chip):hover {
        text-decoration-style: wavy;
        text-decoration-thickness: 2px;
        text-underline-offset: 0.25em;
    }

    /* Page titles: a squiggle in the accent color underneath. */
    .cf-decor-playful :is(.v-page-title, .v-resource__header h1, .v-browse__header h1, .v-error h1)::after {
        content: "";
        display: block;
        width: 6rem;
        height: 0.75rem;
        margin-block-start: 0.35em;
        background: var(--v-accent);
        -webkit-mask: var(--cf-squiggle) left center / contain no-repeat;
        mask: var(--cf-squiggle) left center / contain no-repeat;
    }
    .cf-decor-playful .v-blocks .block-layout-alignment-text-center .v-page-title::after { margin-inline: auto; }

    /* ------------------------------------------------------------------
       Buttons: pills with a chunky shadow that presses in
       ------------------------------------------------------------------ */
    :where(button, input[type=submit], input[type=button], input[type=reset]), .button, .v-button {
        font-family: var(--v-font-heading);
        font-weight: 600;
        letter-spacing: 0.01em;
        box-shadow: 0 4px 0 color-mix(in srgb, var(--v-primary) 55%, #000);
        transition: transform 0.12s var(--v-ease), box-shadow 0.12s var(--v-ease), background-color 0.15s var(--v-ease), color 0.15s var(--v-ease);
    }
    :where(button, input[type=submit], input[type=button]):hover, .button:hover, .v-button:hover { transform: translateY(-1px); box-shadow: 0 5px 0 color-mix(in srgb, var(--v-primary) 55%, #000); }
    :where(button, input[type=submit], input[type=button]):active, .button:active, .v-button:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--v-primary) 55%, #000); }
    .v-button--secondary { box-shadow: 0 4px 0 color-mix(in srgb, var(--v-secondary) 55%, #000); }
    .v-button--outline, .v-button.v-button--outline { border-width: var(--cf-line); box-shadow: 0 4px 0 currentColor; }
    .v-button--outline:active, .v-button.v-button--outline:active { box-shadow: 0 1px 0 currentColor; }
    /* Quiet controls keep a flat look. */
    :is(.v-icon-button, .v-menu-toggle, .submenu-toggle, .v-layout-switch button, .lightbox button, .v-search-form__submit, .v-copy, #advanced-search button),
    :is(.v-icon-button, .v-menu-toggle, .submenu-toggle, .v-layout-switch button, .lightbox button, .v-search-form__submit, .v-copy):is(:hover, :active) {
        box-shadow: none;
        transform: none;
    }
    .v-icon-button, .v-menu-toggle { border-radius: 999px; }

    /* ------------------------------------------------------------------
       Header: a colored band with a wavy edge
       ------------------------------------------------------------------ */
    .v-header { border-block-end: 0; }
    .v-header::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-start: 100%;
        height: var(--cf-wave-h);
        background: var(--v-header-bg);
        -webkit-mask: var(--cf-wave-down) left top / var(--cf-wave-w) 100% repeat-x;
        mask: var(--cf-wave-down) left top / var(--cf-wave-w) 100% repeat-x;
        pointer-events: none;
    }
    .v-header__inner { padding-block: var(--v-space-s) var(--v-space-xs); }
    .v-brand__title { font-size: var(--v-step-3); letter-spacing: 0.01em; }
    .cf-decor-playful .v-brand__link::before {
        content: "";
        width: 1.6rem;
        height: 1.6rem;
        flex: none;
        background: var(--v-header-accent);
        -webkit-mask: var(--cf-star) center / contain no-repeat;
        mask: var(--cf-star) center / contain no-repeat;
        transform: rotate(-12deg);
    }
    .cf-decor-playful .v-brand__link:has(.v-brand__logo)::before { display: none; }

    /* Menu: pills; the current page is a filled pill. */
    .v-nav a, .v-nav li > span { border-radius: 999px; padding-inline: 0.85em; font-family: var(--v-font-heading); font-weight: 500; font-size: var(--v-step-0); }
    .v-nav a:hover { text-decoration: none; }
    .v-nav a[aria-current=page], .v-nav li.active > a:not([aria-current]) {
        text-decoration: none;
        background: var(--v-header-text);
        color: var(--v-header-bg);
    }
    :root.js .v-nav.is-drawer a[aria-current=page] { background: var(--v-primary); color: var(--v-on-primary); }
    .submenu-toggle { border-radius: 999px; }
    @media (min-width: 64em) {
        .v-header:not([data-layout=minimal]) .v-nav > ul > li > ul { border: var(--cf-line) solid var(--v-text); border-radius: var(--cf-radius-sm); box-shadow: var(--cf-pop) var(--cf-pop) 0 var(--v-accent); }
    }
    :root.js .v-nav.is-drawer { border-start-start-radius: var(--cf-radius); border-end-start-radius: var(--cf-radius); }
    /* The header button moves into the menu below 40em (the engine does so
       below 30em): beside Confetti's big site title and pill buttons it left
       the title too little room, breaking words apart. */
    @media (max-width: 40em) {
        .v-header__cta { display: none; }
        .v-nav__cta { display: block; }
    }
    .v-scheme__panel { border: var(--cf-line) solid var(--v-text); border-radius: var(--cf-radius-sm); box-shadow: var(--cf-pop) var(--cf-pop) 0 var(--v-accent); }

    /* Search: a pill. */
    .v-search-form input[type=search] { border-radius: 999px 0 0 999px; border-width: 2px; padding-inline-start: 1.1em; }
    .v-search-form input[type=search]:dir(rtl) { border-radius: 0 999px 999px 0; }
    .v-search-form__submit { border-radius: 0 999px 999px 0; padding-inline: 1em 1.15em; }
    .v-search-form__submit:dir(rtl) { border-radius: 999px 0 0 999px; }
    /* Wide enough for the whole placeholder in Confetti's larger text (it
       needs 18.5rem; the rest is slack for font rendering), and no wider:
       in the classic layout the menu shares the row. */
    @media (min-width: 64em) {
        .v-search[data-search-mode=field] { width: 20rem; }
    }
    /* On a colored header the button takes the header's text color, as the
       header button does, so field and button read as one pill (a button in
       the primary color vanished into a primary header). */
    .v-header:is([data-style=primary], [data-style=secondary], [data-style=dark]) .v-search-form input[type=search] { border-color: var(--v-header-text); }
    .v-header:is([data-style=primary], [data-style=secondary], [data-style=dark]) :is(.v-search-form__submit, .v-search-form__submit:hover) {
        border-color: var(--v-header-text);
        background: var(--v-header-text);
        color: var(--v-header-bg);
    }

    /* A header kept visible while scrolling carries its wavy edge below it:
       leave room for the edge too, so focused and linked content never ends
       up under it (WCAG 2.4.11). */
    html:has(body.v-sticky-header) { scroll-padding-block-start: calc(var(--v-sticky-offset) + var(--cf-wave-h) + var(--v-space-s)); }
    @media (min-width: 64em) {
        .v-sticky-header :is(.v-section-nav, .v-resource__sidebar) { inset-block-start: calc(var(--v-sticky-offset) + var(--cf-wave-h) + var(--v-space-s)); }
    }

    /* Announcement bar */
    .v-topbar { font-weight: 600; }
    .cf-decor-playful .v-topbar__inner::before, .cf-decor-playful .v-topbar__inner::after {
        content: "";
        display: inline-block;
        width: 0.9em;
        height: 0.9em;
        margin-inline: 0.5em;
        vertical-align: -0.1em;
        background: currentColor;
        -webkit-mask: var(--cf-star) center / contain no-repeat;
        mask: var(--cf-star) center / contain no-repeat;
    }
    .v-topbar__inner > * { display: inline; }

    /* The page starts below the header's wave, except a page that opens
       with a hero: there the wave lies over the picture. */
    .v-main { padding-block-start: var(--cf-wave-h); }
    .v-main:has(> .v-page--landing > .v-blocks > .page-layout-normal > .block:first-child > :is(.v-hero, .bst-hero)) { padding-block-start: 0; }

    /* ------------------------------------------------------------------
       Footer: a wavy top edge, confetti, pills
       ------------------------------------------------------------------ */
    .v-footer { position: relative; margin-block-start: var(--cf-wave-h); border-block-start: 0; }
    .v-footer::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: 100%;
        height: var(--cf-wave-h);
        background: var(--v-footer-bg);
        -webkit-mask: var(--cf-wave-up) left bottom / var(--cf-wave-w) 100% repeat-x;
        mask: var(--cf-wave-up) left bottom / var(--cf-wave-w) 100% repeat-x;
        pointer-events: none;
    }
    .v-partners + .v-footer__main, .v-footer:has(.v-partners)::before { background: var(--v-surface-alt); }
    .v-footer__title { font-size: var(--v-step-3); }
    .v-footer__column :is(h2, h3, h4) { font-size: var(--v-step-2); }
    .cf-decor-playful .v-footer__main { position: relative; }
    .cf-decor-playful .v-footer__main::before {
        content: "";
        position: absolute;
        inset-inline: var(--v-gutter);
        inset-block-start: var(--v-space-2xs);
        height: 2.25rem;
        background: var(--cf-confetti);
        opacity: 0.85;
        pointer-events: none;
    }
    .v-footer__nav-list a, .v-footer__help a { border-radius: 999px; }
    .v-social a { border-width: 2px; font-weight: 600; }
    .v-back-to-top { font-family: var(--v-font-heading); font-weight: 600; }

    /* ------------------------------------------------------------------
       Cards: stickers with a thick outline and a colored shadow
       ------------------------------------------------------------------ */
    .v-card {
        --cf-shadow: var(--v-primary);
        border: var(--cf-line) solid var(--v-text);
        border-radius: var(--cf-radius);
        box-shadow: var(--cf-pop) var(--cf-pop) 0 var(--cf-shadow);
        transition: transform 0.2s var(--v-ease), box-shadow 0.2s var(--v-ease);
    }
    .v-results > :nth-child(3n + 2), .v-results > :nth-child(3n + 2) > .v-card { --cf-shadow: var(--v-secondary); }
    .v-results > :nth-child(3n + 3), .v-results > :nth-child(3n + 3) > .v-card { --cf-shadow: var(--v-accent); }
    .v-card:hover {
        transform: translate(-2px, -4px) rotate(-0.6deg);
        box-shadow: calc(var(--cf-pop) + 2px) calc(var(--cf-pop) + 4px) 0 var(--cf-shadow);
    }
    .v-results > :nth-child(even) .v-card:hover, .v-results > .v-card:nth-child(even):hover { transform: translate(-2px, -4px) rotate(0.6deg); }
    .v-card__media {
        margin: 0.55rem 0.55rem 0;
        border-radius: calc(var(--cf-radius) - 0.55rem);
        background: var(--v-surface-sunken);
    }
    .v-card__media--empty { color: var(--v-primary-text); }
    .v-card__placeholder { width: 3rem; height: 3rem; opacity: 1; }
    .v-card__title { font-family: var(--v-font-heading); font-weight: 600; }
    .v-cards-minimal .v-card { border-color: transparent; box-shadow: none; }

    /* List rows keep the sticker look, inset image on the side. */
    :is(.v-results[data-layout=list]:not([data-switchable]), :root:not([data-browse-layout=grid]) .v-results[data-switchable][data-layout=list], :root[data-browse-layout=list] .v-results[data-switchable]) .v-card__media {
        margin: 0.55rem;
    }

    /* Link cards (pages, table of contents, section navigation) */
    :is(.v-link-cards a, .v-toc-cards > ul > li > a, .v-subnav a) {
        border: var(--cf-line) solid var(--v-text);
        border-radius: var(--cf-radius);
        box-shadow: 4px 4px 0 var(--v-primary);
        font-family: var(--v-font-heading);
        font-weight: 600;
        transition: transform 0.2s var(--v-ease), box-shadow 0.2s var(--v-ease);
    }
    :is(.v-link-cards a, .v-toc-cards > ul > li > a, .v-subnav a):hover {
        transform: translate(-2px, -3px);
        box-shadow: 6px 7px 0 var(--v-primary);
        border-color: var(--v-text);
    }

    /* Panels on item pages, and the blog sidebar */
    .v-panel, .v-resource__sidebar .v-rblock > dl {
        border: var(--cf-line) solid var(--v-text);
        border-radius: var(--cf-radius);
        box-shadow: 4px 4px 0 var(--v-accent);
    }
    .v-panel__title { font-weight: 600; }
    .v-chip { font-family: var(--v-font-heading); font-weight: 500; border: 2px solid currentColor; }

    /* ------------------------------------------------------------------
       Blocks
       ------------------------------------------------------------------ */
    /* Callout: a speech bubble. */
    .v-callout {
        position: relative;
        border: var(--cf-line) solid var(--v-primary);
        border-radius: var(--cf-radius);
        margin-block-end: 1.25rem;
    }
    .v-callout::after {
        content: "";
        position: absolute;
        inset-inline-start: 2.5rem;
        inset-block-start: 100%;
        width: 1.4rem;
        height: 1.1rem;
        background: var(--v-primary);
        clip-path: polygon(0 0, 100% 0, 15% 100%);
    }
    .v-card-box { border: var(--cf-line) solid var(--v-text); border-radius: var(--cf-radius); box-shadow: var(--cf-pop) var(--cf-pop) 0 var(--v-secondary); }

    /* Pull quote: a big round quotation mark. */
    .v-pullquote blockquote::before {
        content: "“" / "";
        display: block;
        height: 0.6em;
        font-family: var(--v-font-heading);
        font-size: 4em;
        line-height: 1;
        color: var(--v-accent);
    }

    /* Ornament divider: three dots in the palette's colors. */
    .v-divider--ornament { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-block: var(--v-space-m); }
    .v-divider--ornament::before, .v-divider--ornament::after, .v-divider--ornament span {
        content: "";
        width: 0.9rem;
        height: 0.9rem;
        border-radius: 50%;
        background: var(--v-primary);
    }
    .v-divider--ornament span { background: var(--v-accent); transform: scale(1.3); }
    .v-divider--ornament::after { background: var(--v-secondary); }

    /* Hero: rounded at the bottom with a wave, confetti in a corner. */
    .v-hero {
        -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--cf-wave-h) + 1px) no-repeat, var(--cf-wave-down) bottom / var(--cf-wave-w) var(--cf-wave-h) repeat-x;
        mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--cf-wave-h) + 1px) no-repeat, var(--cf-wave-down) bottom / var(--cf-wave-w) var(--cf-wave-h) repeat-x;
        padding-block-end: var(--cf-wave-h);
    }
    .v-hero__title { letter-spacing: 0.005em; }
    .cf-decor-playful .v-hero::after {
        content: "";
        position: absolute;
        inset-inline-end: 0;
        /* Clear of the header's wave when the hero opens the page. */
        inset-block-start: calc(var(--cf-wave-h) + 0.25rem);
        z-index: 0;
        width: min(40%, 22rem);
        height: 4.5rem;
        background: var(--cf-confetti);
        pointer-events: none;
    }

    /* Media in features and spotlights: playful uneven corners that never
       crop much of the picture. */
    :is(.v-feature__media img, .v-spotlight__media img) {
        border: var(--cf-line) solid var(--v-text);
        border-radius: 2.25rem 1rem 2.25rem 1rem;
        box-shadow: var(--cf-pop) var(--cf-pop) 0 var(--v-accent);
    }
    .v-gallery__zoom, .v-gallery__render, .v-gallery__grid img, .v-post__image img, .preview-block .resource-link img { border-radius: var(--cf-radius-sm); }

    /* Colored sections get wavy top and bottom edges. */
    .v-blocks > .page-layout-normal > .block:is(.section-tint, .section-primary, .section-secondary, .section-accent, .section-dark):not(.section-contained) {
        position: relative;
        margin-block: calc(var(--cf-wave-h) + 0.5rem) !important;
    }
    .v-blocks > .page-layout-normal > .block:is(.section-tint, .section-primary, .section-secondary, .section-accent, .section-dark):not(.section-contained)::before,
    .v-blocks > .page-layout-normal > .block:is(.section-tint, .section-primary, .section-secondary, .section-accent, .section-dark):not(.section-contained)::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        height: var(--cf-wave-h);
        background: inherit;
        pointer-events: none;
    }
    .v-blocks > .page-layout-normal > .block:is(.section-tint, .section-primary, .section-secondary, .section-accent, .section-dark):not(.section-contained)::before {
        inset-block-end: 100%;
        -webkit-mask: var(--cf-wave-up) left bottom / var(--cf-wave-w) 100% repeat-x;
        mask: var(--cf-wave-up) left bottom / var(--cf-wave-w) 100% repeat-x;
    }
    .v-blocks > .page-layout-normal > .block:is(.section-tint, .section-primary, .section-secondary, .section-accent, .section-dark):not(.section-contained)::after {
        inset-block-start: 100%;
        -webkit-mask: var(--cf-wave-down) left top / var(--cf-wave-w) 100% repeat-x;
        mask: var(--cf-wave-down) left top / var(--cf-wave-w) 100% repeat-x;
    }
    .section-contained, .v-has-bg-color:not(:is(.section-full, .section-wide)) { border-radius: var(--cf-radius); }

    /* ------------------------------------------------------------------
       Pages, forms and the rest
       ------------------------------------------------------------------ */
    :where(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=submit], [type=button], [type=reset], [type=image]), select) { border-width: 2px; border-radius: 0.85rem; }
    :where(textarea) { border-width: 2px; border-radius: var(--cf-radius-sm); }
    :where(fieldset) { border-width: 2px; border-radius: var(--cf-radius-sm); }

    .v-pagination__step { border-radius: 999px; }
    .v-pagination__step:hover { background: var(--v-surface-alt); }
    /* Bars that wrap on phones take round corners, not pill ends. */
    .v-browse-controls { border-block: 0; background: var(--v-surface-alt); border-radius: var(--cf-radius); padding-inline: var(--v-space-s); }
    .v-layout-switch { border-radius: 999px; }
    .v-empty { border: var(--cf-line) dashed var(--v-border-strong); border-radius: var(--cf-radius); font-family: var(--v-font-heading); font-size: var(--v-step-1); }
    .cf-decor-playful .v-empty::before {
        content: "";
        display: block;
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 auto var(--v-space-xs);
        background: var(--v-accent);
        -webkit-mask: var(--cf-star) center / contain no-repeat;
        mask: var(--cf-star) center / contain no-repeat;
    }

    /* Item and media pages */
    .v-resource__main .property:first-child, .item-with-metadata .property:first-child { border-block-start: 0; }
    .v-resource__main .property, .item-with-metadata .property { border-block-end-style: dashed; border-block-end-width: 2px; }
    .v-prevnext { border-block: 0; background: var(--v-surface-alt); border-radius: var(--cf-radius); padding-inline: var(--v-space-2xs); }
    .v-prevnext__link { border-radius: 999px; }

    /* Blog */
    .v-post { border: var(--cf-line) solid var(--v-text); border-radius: var(--cf-radius); padding: var(--v-space-s); box-shadow: var(--cf-pop) var(--cf-pop) 0 var(--v-secondary); background: var(--v-surface); }

    /* Error pages */
    .v-error .v-kicker { font-size: var(--v-step-4); color: var(--v-primary-text); letter-spacing: 0.02em; }

    /* Section navigation template */
    .v-section-nav { border-radius: var(--cf-radius); }
    .v-section-nav a { border-radius: 999px; }
    .v-section-nav a[aria-current=page] { box-shadow: inset 0 0 0 2px var(--v-primary); }
}