/* H2O kit: shared front-end styles (quotes, videos, carousel). Colours can be overridden per site with --h2o-accent. */
:root { --h2o-accent: #b08d57; --h2o-quote-bg: #f6f3ee; }

/* Quotes: big open/close marks and a soft background. Embedded tweets/Instagram also use <blockquote>, so leave those alone. */
blockquote:not(.twitter-tweet):not(.instagram-media):not(.tiktok-embed) {
    position: relative;
    margin: 1.6em 0;
    padding: 1.4em 3.2em 1.4em 3.4em;
    background: var(--h2o-quote-bg);
    border-left: 4px solid var(--h2o-accent);
    border-radius: 2px;
    font-size: 1.12em;
    line-height: 1.55;
    font-style: italic;
}
blockquote:not(.twitter-tweet):not(.instagram-media):not(.tiktok-embed)::before,
blockquote:not(.twitter-tweet):not(.instagram-media):not(.tiktok-embed)::after {
    position: absolute;
    font-family: Georgia, "Times New Roman", serif;
    font-style: normal;
    font-size: 4.2em;
    line-height: 1;
    color: var(--h2o-accent);
    opacity: .85;
}
blockquote:not(.twitter-tweet):not(.instagram-media):not(.tiktok-embed)::before { content: "\201C"; left: .18em; top: .08em; }
blockquote:not(.twitter-tweet):not(.instagram-media):not(.tiktok-embed)::after  { content: "\201D"; right: .2em; bottom: -.38em; }
blockquote:not(.twitter-tweet):not(.instagram-media):not(.tiktok-embed) p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
    blockquote:not(.twitter-tweet):not(.instagram-media):not(.tiktok-embed) { padding: 1.1em 1.6em 1.1em 2.4em; font-size: 1.05em; }
    blockquote:not(.twitter-tweet):not(.instagram-media):not(.tiktok-embed)::before { font-size: 3em; }
    blockquote:not(.twitter-tweet):not(.instagram-media):not(.tiktok-embed)::after { font-size: 3em; }
}

/* Videos: one responsive 16:9 player everywhere */
.h2o-video { position: relative; width: 100%; max-width: 100%; margin: 1.4em 0; aspect-ratio: 16 / 9; background: #000; display: block; }
.h2o-video iframe { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }
@supports not (aspect-ratio: 16 / 9) { .h2o-video { height: 0; padding-bottom: 56.25%; } }

/* Carousel: scroll-snap, so it works without JavaScript; h2o.js adds the arrows and counter */
.h2o-carousel { position: relative; margin: 1.6em 0; background: #111; }
.h2o-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.h2o-carousel-track::-webkit-scrollbar { display: none; }
.h2o-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; display: flex; flex-direction: column; }
/* every slide the same 2:1 frame (the sites' standard 1200x600 image), so the carousel doesn't jump about */
.h2o-slide img { width: 100%; aspect-ratio: 2 / 1; height: auto; max-height: 70vh; object-fit: contain; display: block; background: #111; }
.h2o-slide figcaption { color: #fff; background: rgba(0,0,0,.75); padding: .6em 1em; font-size: .95em; line-height: 1.4; }
/* the themes style <button> themselves, so pin every property that matters */
.h2o-carousel .h2o-carousel-prev, .h2o-carousel .h2o-carousel-next {
    position: absolute; top: calc(50% - 22px); margin: 0; padding: 0 0 3px 0; width: 44px !important; height: 44px !important; min-width: 0; min-height: 0;
    border: 0; border-radius: 50% !important; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.9); color: #111; font: 400 32px/1 Arial, Helvetica, sans-serif; text-transform: none; letter-spacing: 0;
    cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.35); -webkit-appearance: none; appearance: none;
}
.h2o-carousel .h2o-carousel-prev:hover, .h2o-carousel .h2o-carousel-next:hover { background: #fff; }
.h2o-carousel .h2o-carousel-prev { left: 10px; } .h2o-carousel .h2o-carousel-next { right: 10px; }
.h2o-carousel .h2o-carousel-prev:focus-visible, .h2o-carousel .h2o-carousel-next:focus-visible { outline: 3px solid var(--h2o-accent); }
.h2o-carousel-count { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; padding: 2px 9px; border-radius: 10px; }