/* ============================================================================================
   EVENT WEBSITE BASE - loaded ONLY by the static public page (/e/{slug}).

   Inside the app an event site sits on the app's own base: Bootstrap's reboot in style.css and
   custom.css's body font. The static page loads none of that (style.css alone is 500KB), so this
   file restates the slice the templates were designed on - same values, same specificity
   (:where() adds none) - and eventSite.css then paints over it exactly as it does in the app.

   Keep it in step with style.css's reboot block and custom.css's body rule; the builder preview
   uses those, not this.
   ============================================================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Poppins", sans-serif;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #41505f;
    background: rgb(238 242 241 / 30%);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

:where(.es) hr { margin: 1rem 0; color: inherit; border: 0; border-top: 1px solid; opacity: .25; }

:where(.es) :is(h1, h2, h3, h4, h5, h6) { margin-top: 0; margin-bottom: .5rem; font-weight: 500; line-height: 1.2; }
:where(.es) h1 { font-size: calc(1.34375rem + 1.125vw); }
:where(.es) h2 { font-size: calc(1.3rem + .6vw); }
:where(.es) h3 { font-size: calc(1.278125rem + .3375vw); }
:where(.es) h4 { font-size: calc(1.25625rem + .075vw); }
:where(.es) h5 { font-size: 1.09375rem; }
:where(.es) h6 { font-size: .875rem; }

@media (min-width: 1200px) {
    :where(.es) h1 { font-size: 2.1875rem; }
    :where(.es) h2 { font-size: 1.75rem; }
    :where(.es) h3 { font-size: 1.53125rem; }
    :where(.es) h4 { font-size: 1.3125rem; }
}

:where(.es) p { margin-top: 0; margin-bottom: 1rem; }
:where(.es) address { margin-bottom: 1rem; font-style: normal; line-height: inherit; }
:where(.es) :is(ol, ul) { padding-left: 2rem; }
:where(.es) :is(ol, ul, dl) { margin-top: 0; margin-bottom: 1rem; }
:where(.es) :is(ol, ul) :is(ol, ul) { margin-bottom: 0; }
:where(.es) dt { font-weight: 700; }
:where(.es) dd { margin-bottom: .5rem; margin-left: 0; }
:where(.es) blockquote { margin: 0 0 1rem; }
:where(.es) :is(b, strong) { font-weight: bolder; }
:where(.es) small { font-size: .875em; }
:where(.es) :is(sub, sup) { position: relative; font-size: .75em; line-height: 0; vertical-align: baseline; }
:where(.es) sub { bottom: -.25em; }
:where(.es) sup { top: -.5em; }

:where(.es) a { color: #5d9cec; text-decoration: none; }
:where(.es) a:hover { color: #4059ae; }
:where(.es) a:not([href]):not([class]) { color: inherit; text-decoration: none; }

:where(.es) :is(pre, code, kbd, samp) { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; }
:where(.es) pre { display: block; margin-top: 0; margin-bottom: 1rem; overflow: auto; font-size: .875em; }
:where(.es) code { font-size: .875em; color: #ea4c89; word-wrap: break-word; }
:where(.es) :is(pre, a) code { font-size: inherit; color: inherit; }

:where(.es) figure { margin: 0 0 1rem; }
:where(.es) :is(img, svg) { vertical-align: middle; }
:where(.es) table { caption-side: bottom; border-collapse: collapse; }
:where(.es) th { text-align: inherit; text-align: -webkit-match-parent; }
:where(.es) :is(thead, tbody, tfoot, tr, td, th) { border-color: inherit; border-style: solid; border-width: 0; }
:where(.es) label { display: inline-block; }

:where(.es) button { border-radius: 0; text-transform: none; }
:where(.es) button:focus:not(:focus-visible) { outline: 0; }
:where(.es) :is(input, button, select, optgroup, textarea) { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; }
:where(.es) :is(button, [type=button], [type=reset], [type=submit]) { -webkit-appearance: button; }
:where(.es) :is(button, [type=button], [type=reset], [type=submit]):not(:disabled) { cursor: pointer; }
:where(.es) iframe { border: 0; }
:where(.es) [hidden] { display: none !important; }

/* custom.css: the app zeroes every section's padding, and the templates were built on that -
   their own padding comes from .p-4 or the section's own class. */
:where(.es) section { padding-top: 0; padding-bottom: 0 !important; }

/* Images pasted through the builder's rich text editor carry Syncfusion's classes. In the app its
   bootstrap5.css styles them; these are those rules (Syncfusion.Blazor 33.2.13), scoped. */
:where(.es) .e-rte-image.e-imgbreak {
    border:0;
    cursor:pointer;
    display:block;
    float:none;
    max-width:100%;
    padding:1px;
    position:relative;
}

:where(.es) .e-rte-image {
    border:0;
    cursor:pointer;
    display:block;
    float:none;
    margin:auto;
    max-width:100%;
    position:relative;
}

:where(.es) .e-rte-image.e-imginline,
:where(.es) .e-rte-image.e-img-inline,
:where(.es) .e-img-caption-container.e-img-inline {
    margin-left:5px;
    margin-right:5px;
    display:inline-block;
    float:none;
    max-width:100%;
    padding:1px;
    vertical-align:bottom;
}

:where(.es) .e-rte-image.e-imgcenter,
:where(.es) .e-rte-image.e-img-center,
:where(.es) .e-rte-image.e-img-break,
:where(.es) .e-img-caption-container.e-img-center,
:where(.es) .e-img-caption-container.e-img-break {
    cursor:pointer;
    display:block;
    float:none;
    margin:5px auto;
    max-width:100%;
    position:relative;
}

:where(.es) .e-rte-image.e-imgleft {
    float:left;
    margin:0 auto;
    margin-right:5px;
    text-align:left;
}

:where(.es) .e-rte-image.e-imgright {
    float:right;
    margin:0 auto;
    margin-left:5px;
    text-align:right;
}

:where(.es) .e-rte-image.e-img-left-wrap,
:where(.es) .e-img-caption-container.e-img-left-wrap {
    float:left;
    margin:5px 5px 5px 0;
}

:where(.es) .e-rte-image.e-img-right-wrap,
:where(.es) .e-img-caption-container.e-img-right-wrap {
    float:right;
    margin:5px 0 5px 5px;
}

:where(.es) .e-rte-image.e-img-left,
:where(.es) .e-rte-image.e-img-right,
:where(.es) .e-img-caption-container.e-img-left,
:where(.es) .e-img-caption-container.e-img-right {
    margin-top:5px;
    margin-bottom:5px;
}

:where(.es) .e-rte-image.e-img-right,
:where(.es) .e-img-caption-container.e-img-right {
    margin-right:0;
    margin-left:auto;
}

:where(.es) .e-rte-image.e-img-left,
:where(.es) .e-img-caption-container.e-img-left {
    margin-left:0;
    margin-right:auto;
}

:where(.es) .e-img-caption-container {
    max-width:100%;
    position:relative;
}

:where(.es) .e-img-caption-container.e-img-left-wrap,
:where(.es) .e-img-caption-container.e-img-right-wrap {
    display:inline-block;
}

:where(.es) .e-img-caption-container.e-img-left,
:where(.es) .e-img-caption-container.e-img-right {
    display:block;
}

:where(.es) .e-img-caption-container .e-img-caption-text {
    box-sizing:border-box;
    display:block;
    font-size:16px;
    font-weight:400;
    margin:auto;
    opacity:.9;
    position:relative;
    text-align:center;
    width:100%;
}

:where(.es) .e-img-caption-container.e-img-left-wrap .e-img-wrap img,
:where(.es) .e-img-caption-container.e-img-right-wrap .e-img-wrap img,
:where(.es) .e-img-caption-container.e-img-left .e-img-wrap img,
:where(.es) .e-img-caption-container.e-img-right .e-img-wrap img,
:where(.es) .e-img-caption-container.e-img-center .e-img-wrap img,
:where(.es) .e-img-caption-container.e-img-break .e-img-wrap img {
    margin-bottom:0;
}

:where(.es) .e-img-caption-container.e-img-center,
:where(.es) .e-img-caption-container.e-img-break {
    margin-left:auto;
    margin-right:auto;
}