/* Blocks and theme, loaded by the public layout and by the builder.
   Everything colour related is driven by the :root variables Theme.StyleBlock emits
   per request, and every theme rule is scoped under .pb-themed so choosing a lurid
   brand colour can never make the admin unusable. */

/* Maps the style builder's CSS variables onto UIkit.
   Everything is scoped under .pb-themed on purpose: the public site and the
   builder canvas carry that class, the builder's own chrome does not, so
   choosing a lurid brand colour never makes the admin unusable. */

.pb-themed {
    font-family: var(--pb-font-body);
}

/* The per block toolbar lives inside the canvas, so it would otherwise inherit
   the site's body font. Builder chrome should not change with the theme. */
.pb-themed .pb-block-bar { font-family: initial; }

.pb-themed h1, .pb-themed h2, .pb-themed h3,
.pb-themed h4, .pb-themed h5, .pb-themed h6,
.pb-themed .uk-h1, .pb-themed .uk-h2, .pb-themed .uk-h3,
.pb-themed .uk-heading-small, .pb-themed .uk-heading-medium,
.pb-themed .uk-heading-large, .pb-themed .uk-card-title,
.pb-themed .pb-stat-value, .pb-themed .uk-logo {
    font-family: var(--pb-font-heading);
}

/* ---- canvas responsiveness -------------------------------------------------
   UIkit's @s and @m breakpoints are viewport based, so narrowing the builder
   canvas did nothing: three columns stayed three columns whatever the device
   preview said. Container queries re-express those breakpoints against the width
   of the canvas itself.

   Only in the tablet and phone modes, though. The canvas is roughly 800px wide on
   a normal laptop, so making it a query container in desktop mode would fire the
   tablet rules and show two columns where a visitor at that same window width
   would see three. Desktop mode falls back to UIkit's own viewport rules, which is
   exactly what the visitor's browser will do. */

.pb-stage[data-device="tablet"] .pb-canvas,
.pb-stage[data-device="mobile"] .pb-canvas {
    container-type: inline-size;
    container-name: pbcanvas;
}

@container pbcanvas (max-width: 639px) {
    .pb-canvas [class*="uk-child-width-"] > * { width: 100%; }
    .pb-canvas [class*="uk-width-1-2@m"] { width: 100%; }
    .pb-canvas [class*="uk-flex-first@m"],
    .pb-canvas [class*="uk-flex-last@m"] { order: 0; }
    .pb-canvas .uk-heading-medium { font-size: 2.2rem; }
    .pb-canvas .uk-heading-large { font-size: 2.6rem; }
}

@container pbcanvas (min-width: 640px) and (max-width: 959px) {
    .pb-canvas [class*="uk-child-width-1-3@m"] > *,
    .pb-canvas [class*="uk-child-width-1-4@m"] > * { width: 50%; }
    .pb-canvas [class*="uk-width-1-2@m"] { width: 100%; }
    .pb-canvas [class*="uk-flex-first@m"],
    .pb-canvas [class*="uk-flex-last@m"] { order: 0; }
}

/* ---- brand colour --------------------------------------------------------- */

/* The .uk-light copies are not redundant. UIkit's inverse component emits
   `.uk-light .uk-button-primary` and friends at a higher specificity than a plain
   `.pb-themed .uk-…`, so without these the brand colour would lose inside any
   light section (the slider, for one) and the button would come out white. */

.pb-themed a,
.pb-themed .uk-link,
.pb-themed .uk-text-primary,
.pb-themed .uk-button-text,
.pb-themed .pb-card-icon {
    /* The "ink" variables are the brand colour darkened only if it is too pale to
       read on white, so a pastel brand still gives legible links. */
    color: var(--pb-brand-ink);
}

.pb-themed a:hover,
.pb-themed .uk-link:hover {
    color: color-mix(in srgb, var(--pb-brand-ink) 78%, black);
}

.pb-themed .pb-card-icon {
    background: color-mix(in srgb, var(--pb-brand) 14%, white);
}

.pb-themed .uk-button-primary,
.pb-themed .uk-light .uk-button-primary,
.pb-themed .uk-label,
.pb-themed .uk-section-primary,
.pb-themed .uk-background-primary,
.pb-themed .uk-dotnav > .uk-active > * {
    background-color: var(--pb-brand);
}

/* Text colour is computed from the background, so a pale brand gives dark text
   rather than white on white. Same for the section band and the label.

   The :not(.uk-card *) matters: a boxed card sitting on a coloured band keeps its
   own white background, so inverting its text would put white on white. This is
   what made feature cards unreadable on a brand coloured background. */
.pb-themed .uk-button-primary,
.pb-themed .uk-light .uk-button-primary,
.pb-themed .uk-label,
.pb-themed .uk-section-primary,
.pb-themed .uk-section-primary :is(h1, h2, h3, h4, p, .uk-text-lead, .pb-stat-value, .pb-stat-label):not(.uk-card *) {
    color: var(--pb-on-brand);
}

.pb-themed .uk-button-primary:hover,
.pb-themed .uk-button-primary:focus,
.pb-themed .uk-light .uk-button-primary:hover,
.pb-themed .uk-light .uk-button-primary:focus {
    background-color: color-mix(in srgb, var(--pb-brand) 85%, black);
    color: var(--pb-on-brand);
}

/* ---- second brand colour --------------------------------------------------- */

.pb-themed .pb-section-accent,
.pb-themed .pb-button-accent {
    background-color: var(--pb-accent);
}

.pb-themed .pb-section-accent,
.pb-themed .pb-section-accent :is(h1, h2, h3, h4, p, .uk-text-lead, .pb-stat-value, .pb-stat-label):not(.uk-card *),
.pb-themed .pb-button-accent {
    color: var(--pb-on-accent);
}

.pb-themed .pb-button-accent:hover,
.pb-themed .pb-button-accent:focus {
    background-color: color-mix(in srgb, var(--pb-accent) 85%, black);
    color: var(--pb-on-accent);
}

.pb-themed .pb-section-accent .uk-button-default {
    border-color: var(--pb-on-accent);
    color: var(--pb-on-accent);
}

.pb-themed .uk-button-text::before { border-bottom-color: var(--pb-brand-ink); }

.pb-themed .uk-button-default:hover,
.pb-themed .uk-button-default:focus {
    border-color: var(--pb-brand-ink);
    color: var(--pb-brand-ink);
}

.pb-themed .uk-input:focus,
.pb-themed .uk-select:focus,
.pb-themed .uk-textarea:focus {
    border-color: var(--pb-brand);
}

.pb-themed .uk-accordion-title:hover,
.pb-themed .uk-open > .uk-accordion-title {
    color: var(--pb-brand);
}

/* ---- dark colour ---------------------------------------------------------- */

.pb-themed .uk-section-secondary,
.pb-themed .uk-background-secondary,
.pb-themed .uk-button-secondary {
    background-color: var(--pb-dark);
}

.pb-themed .uk-button-secondary,
.pb-themed .uk-section-secondary,
.pb-themed .uk-section-secondary :is(h1, h2, h3, h4, p, .uk-text-lead, .pb-stat-value, .pb-stat-label):not(.uk-card *) {
    color: var(--pb-on-dark);
}

.pb-themed .uk-button-secondary:hover,
.pb-themed .uk-button-secondary:focus {
    background-color: color-mix(in srgb, var(--pb-dark) 85%, black);
}

/* ---- cards keep their own colours on any band ------------------------------
   A boxed card has a white background wherever it sits, so its text has to stay
   dark. UIkit's uk-preserve-color handles its half of this; these rules handle
   the theme's half, and win on specificity over the band rules above. */

.pb-themed .uk-card-default,
.pb-themed .uk-card-default :is(h1, h2, h3, h4, p, .uk-card-title, .uk-text-lead) {
    color: #333;
}

.pb-themed .uk-card-default .pb-card-icon { color: var(--pb-brand-ink); }
.pb-themed .uk-card-default a:not(.uk-button) { color: var(--pb-brand-ink); }

/* ---- light and dark words -------------------------------------------------
   The override behind every block's "Text colour" choice.
   
   Two classes deep so it beats UIkit's own single class rules, .uk-text-lead being
   the one that made this necessary. Buttons are left out on purpose: they carry
   their own background and their own contrast, and repainting their words to match
   the band behind them is how a primary button ends up invisible. */

.pb-themed .pb-text-light,
.pb-themed .pb-text-light :is(h1, h2, h3, h4, h5, h6, p, li, span, div,
                              .uk-text-lead, .uk-text-meta, .uk-card-title,
                              .pb-stat-value, .pb-stat-label, .uk-accordion-title) {
    color: #ffffff;
}

.pb-themed .pb-text-dark,
.pb-themed .pb-text-dark :is(h1, h2, h3, h4, h5, h6, p, li, span, div,
                             .uk-text-lead, .uk-text-meta, .uk-card-title,
                             .pb-stat-value, .pb-stat-label, .uk-accordion-title) {
    color: #1f2933;
}

/* Links stay legible rather than becoming body text. */
.pb-themed .pb-text-light a:not(.uk-button) { color: #ffffff; text-decoration: underline; }
.pb-themed .pb-text-dark a:not(.uk-button) { color: var(--pb-brand-ink); }

/* A card keeps its own background wherever it sits, so it keeps its own words too.
   Without this, "light text" on a band full of white cards blanks every one. */
.pb-themed .pb-text-light .uk-card-default,
.pb-themed .pb-text-light .uk-card-default :is(h1, h2, h3, h4, p, li, span, div,
                                               .uk-card-title, .uk-text-lead) {
    color: #333;
}

/* The hero is not a uk-section, so it needs the same treatment applied to itself. */
.pb-hero.pb-text-light, .pb-hero.pb-text-light :is(h1, h2, h3, h4, p, li, .uk-text-lead) { color: #ffffff; }
.pb-hero.pb-text-dark, .pb-hero.pb-text-dark :is(h1, h2, h3, h4, p, li, .uk-text-lead) { color: #1f2933; }

/* ---- shape ---------------------------------------------------------------- */

.pb-themed .uk-button,
.pb-themed .uk-button-primary,
.pb-themed .uk-button-secondary,
.pb-themed .uk-button-default,
.pb-themed .pb-button-accent {
    border-radius: var(--pb-btn-radius);
}

.pb-themed .uk-card,
.pb-themed .pb-card,
.pb-themed .pb-img-rounded,
.pb-themed .pb-gallery-image,
.pb-themed .pb-video,
.pb-themed .uk-alert,
.pb-themed .pb-quote-avatar {
    border-radius: var(--pb-radius);
}

.pb-themed .pb-img-circle,
.pb-themed .pb-quote-avatar { border-radius: 50%; }

.pb-themed .uk-input,
.pb-themed .uk-select,
.pb-themed .uk-textarea {
    border-radius: var(--pb-radius-sm);
}

.pb-themed .uk-card-default,
.pb-themed .pb-img-shadow {
    box-shadow: var(--pb-shadow);
}

/* ---- header and footer bands ---------------------------------------------- */

.pb-themed .pb-site-header {
    background: var(--pb-header-bg);
    color: var(--pb-header-text);
    border-bottom-color: color-mix(in srgb, var(--pb-header-text) 14%, transparent);
}

.pb-themed .pb-site-header .uk-logo,
.pb-themed .pb-site-header .uk-navbar-nav > li > a,
.pb-themed .pb-site-header .uk-navbar-toggle {
    color: var(--pb-header-text);
}

.pb-themed .pb-site-header .uk-navbar-nav > li > a:hover,
.pb-themed .pb-site-header .uk-navbar-nav > li.uk-active > a {
    color: var(--pb-header-text);
    opacity: .7;
}

.pb-themed .pb-site-footer {
    background: var(--pb-footer-bg);
    color: var(--pb-footer-text);
}

.pb-themed .pb-site-footer a,
.pb-themed .pb-site-footer .pb-footer-heading,
.pb-themed .pb-site-footer .pb-footer-nav > li > a {
    color: var(--pb-footer-text);
}

.pb-themed .pb-site-footer .pb-footer-rule {
    border-top-color: color-mix(in srgb, var(--pb-footer-text) 18%, transparent);
}

/* ---- style builder preview ------------------------------------------------ */

.pb-preview-shell {
    border: 1px solid #e3e7ec;
    border-radius: 10px;
    overflow: hidden;
    position: sticky;
    top: 20px;
}

.pb-preview-shell .uk-section { padding-top: 40px; padding-bottom: 40px; }
.pb-preview-shell .pb-site-header { padding: 14px 20px; }
.pb-preview-shell .pb-site-footer { padding: 22px 20px; }


/* ---- block styles ---- */

/* Styles for the blocks themselves. Loaded by both the public site and the
   builder, so what you see while editing is what visitors get. */

.pb-site img { max-width: 100%; }

/* ---- shared image treatments --------------------------------------------- */

.pb-img-rounded { border-radius: 10px; }

.pb-img-shadow {
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
}

.pb-img-circle {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.pb-block-image { display: block; width: 100%; height: auto; }

/* ---- hero ---------------------------------------------------------------- */

.pb-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #1f2933;
    color: #fff;
}

.pb-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pb-hero-overlay { position: absolute; inset: 0; }
.pb-hero-overlay.is-dark { background: rgba(0, 0, 0, .5); }
.pb-hero-overlay.is-light { background: rgba(255, 255, 255, .45); }
.pb-hero-overlay.is-brand { background: color-mix(in srgb, var(--pb-brand) 62%, transparent); }
.pb-hero-overlay.is-accent { background: color-mix(in srgb, var(--pb-accent) 62%, transparent); }

.pb-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 60px;
    padding-bottom: 60px;
}

.pb-hero-small { min-height: 260px; }
.pb-hero-medium { min-height: 420px; }
.pb-hero-large { min-height: 580px; }
.pb-hero-full { min-height: 88vh; }

/* UIkit gives .uk-text-lead a hard #333 of its own, and its inverse rules only lift
   that inside a .uk-section-primary or a .uk-light. The hero is neither, so the
   supporting line under a headline came out charcoal on charcoal. Everything textual
   in here inherits from the hero instead. */
.pb-hero :is(h1, h2, h3, h4, h5, h6, p, li, .uk-text-lead, .uk-text-meta) { color: inherit; }
.pb-hero h1 { margin-bottom: .4em; }
.pb-hero.is-light-text { color: #1f2933; }

/* ---- slider -------------------------------------------------------------- */

.pb-slider { background-color: #1f2933; }

/* Same reason as the hero: the slider has its own dark background and is not a
   uk-section, so UIkit's hard colour on .uk-text-lead would sit on top of it. */
.pb-slider :is(h1, h2, h3, h4, h5, h6, p, li, .uk-text-lead, .uk-text-meta) { color: inherit; }
.pb-slider.pb-text-light, .pb-slider.pb-text-light :is(h1, h2, h3, h4, p, .uk-text-lead) { color: #ffffff; }
.pb-slider.pb-text-dark, .pb-slider.pb-text-dark :is(h1, h2, h3, h4, p, .uk-text-lead) { color: #1f2933; }

.pb-slider .uk-slideshow-items > li { overflow: hidden; }

.pb-slide-inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
}

.pb-slide-inner > .uk-container { width: 100%; }

.pb-slide-text { max-width: 660px; }

.pb-slide-text h2 { color: inherit; }

.pb-slider-nav { color: #fff; }

.pb-slider .uk-dotnav > * > * {
    border-color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .25);
}

.pb-slider .uk-dotnav > .uk-active > * { background: #fff; }

/* ---- cards, stats, quotes ------------------------------------------------ */

.pb-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(30, 135, 240, .12);
    color: #1e87f0;
}

.pb-stat-value {
    display: block;
    font-size: 2.6rem;
    line-height: 1.1;
    font-weight: 700;
}

.pb-stat-label { display: block; opacity: .75; margin-top: 4px; }

.pb-quote { font-size: 1.25rem; line-height: 1.6; }
.pb-quote-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

.pb-divider-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
}

/* ---- typography helpers -------------------------------------------------- */

.pb-eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    font-weight: 700;
    opacity: .65;
    margin-bottom: 10px;
}

.pb-lead > p:last-child { margin-bottom: 0; }
.pb-lead { max-width: 760px; }
.uk-text-center > .pb-lead { margin-left: auto; margin-right: auto; }

.pb-hero-text { max-width: 780px; }

.pb-columns-2 { column-gap: 40px; }

@media (min-width: 640px) {
    .pb-columns-2 { column-count: 2; }
}

/* ---- media --------------------------------------------------------------- */

.pb-image-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 200px;
    border: 2px dashed rgba(0, 0, 0, .12);
    border-radius: 10px;
    color: #b6bfc8;
}

.pb-gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 8px;
}

.pb-gallery-item { display: block; }

.pb-video {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.pb-video.is-16x9 { aspect-ratio: 16 / 9; }
.pb-video.is-4x3 { aspect-ratio: 4 / 3; }
.pb-video.is-1x1 { aspect-ratio: 1 / 1; }
.pb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- layout odds and ends ------------------------------------------------ */

.pb-spacer.is-xsmall { height: 20px; }
.pb-spacer.is-small { height: 40px; }
.pb-spacer.is-medium { height: 70px; }
.pb-spacer.is-large { height: 110px; }
.pb-spacer.is-xlarge { height: 170px; }

.pb-button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.uk-text-center .pb-button-row { justify-content: center; }
.uk-text-right .pb-button-row { justify-content: flex-end; }

.pb-card { height: 100%; }
.pb-card-plain { padding: 0; }
.pb-card p:last-child { margin-bottom: 0; }

/* ---- picture cards -------------------------------------------------------- */

.pb-image-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* The words take the leftover height, so a row of cards lines up whichever end
   the picture is at. */
.pb-image-card > .uk-card-body,
.pb-image-card > .pb-image-card-body { flex: 1 1 auto; }

/* Putting the picture at the bottom is an ordering change only. The markup
   keeps the picture first so a screen reader still reads picture then words. */
.pb-image-card-bottom > .pb-image-card-media { order: 2; }

/* A boxed card is rounded, so the picture has to be clipped to it. */
.pb-image-card.uk-card { overflow: hidden; }

.pb-image-card-body { padding: 14px 0 0; }
.pb-image-card-bottom > .pb-image-card-body { padding: 0 0 14px; }
.pb-image-card p:last-child { margin-bottom: 0; }

/* Every picture is cropped to the chosen shape, so cards keep their alignment
   however oddly the customer's photos are sized. */
.pb-card-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    background: #f2f4f7;
}

.pb-card-image.is-16x9 { aspect-ratio: 16 / 9; }
.pb-card-image.is-4x3 { aspect-ratio: 4 / 3; }
.pb-card-image.is-1x1 { aspect-ratio: 1 / 1; }
.pb-card-image.is-3x4 { aspect-ratio: 3 / 4; }

.pb-card-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b6bec9;
}

.pb-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---- public chrome ------------------------------------------------------- */

.pb-site-header { border-bottom: 1px solid rgba(0, 0, 0, .07); }
.pb-site-logo { max-height: 42px; width: auto; }

.pb-preview-bar {
    background: #faa05a;
    color: #22303c;
    padding: 8px 16px;
    text-align: center;
    font-size: .875rem;
}

.pb-preview-bar a { color: #22303c; text-decoration: underline; }

.pb-footer-columns { margin-bottom: 10px; }

.pb-footer-heading {
    color: inherit;
    font-size: .78rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: .7;
    margin: 0 0 10px;
}

.pb-footer-nav > li > a {
    color: inherit;
    opacity: .85;
    padding: 4px 0;
    font-size: .92rem;
}

.pb-footer-nav > li > a:hover { opacity: 1; text-decoration: underline; }
.pb-footer-nav > li > a > [uk-icon] { margin-right: 6px; }
.pb-footer-nav > li.uk-active > a { opacity: 1; font-weight: 600; }

.pb-footer-rule { border-top-color: rgba(255, 255, 255, .16); margin: 26px 0 18px; }

.pb-footer-base {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 18px;
    opacity: .75;
    font-size: .88rem;
}

@media (max-width: 639px) {
    .pb-footer-base { justify-content: center; text-align: center; }
    .pb-footer-columns { text-align: center; }
    .pb-footer-heading { margin-top: 14px; }
}

.pb-empty-page {
    padding: 90px 20px;
    text-align: center;
    color: #7a8794;
}