.wf-richtext img,
.wf-widget-content img {
    max-width: 100%;
    height: auto;
}
/* ============================================================================
   WaiverFile platform CSS — photo attribution
   Loads BEFORE the theme's baseCss so a theme can override any of it.
   Themes are told (in PLATFORM_RULES) to tune these through the --wf-credit-*
   variables rather than by rewriting the rules.
   ========================================================================= */

:root {
    /* Inline credit, sits under the image */
    --wf-credit-color: var(--wf-text-muted, #6c757d);
    --wf-credit-hover-color: var(--wf-accent, currentColor);
    --wf-credit-size: .6875rem;
    /* Overlay credit, sits on a layout block background */
    --wf-credit-overlay-bg: rgba(0, 0, 0, .5);
    --wf-credit-overlay-color: rgba(255, 255, 255, .92);
    --wf-credit-offset: .75rem;
}

/* ---- shared ------------------------------------------------------------ */

.wf-credit {
    display: block;
    font-size: var(--wf-credit-size);
    line-height: 1.35;
    font-weight: 400;
    font-style: normal;
    letter-spacing: .01em;
    text-transform: none;
}

    .wf-credit a {
        color: inherit;
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-thickness: from-font;
    }

        .wf-credit a:hover,
        .wf-credit a:focus-visible {
            color: var(--wf-credit-hover-color);
        }

/* ---- inline images ----------------------------------------------------- */
/* BookingPageBuilder.Render wraps each credited img:
     <span class="wf-figure">
       <img ... data-wf-image-id="..." />
       <span class="wf-credit wf-credit-inline">Photo by <a>Name</a> on <a>Unsplash</a></span>
     </span>
   Spans throughout — the AI puts images inside <p> often enough that a <figure>
   here would terminate the paragraph early. */

.wf-figure {
    display: inline-block; /* not block: lets a parent's text-align still center it */
    max-width: 100%;
    margin: 0;
    vertical-align: top;
}

    .wf-figure > img {
        display: block;
        max-width: 100%;
        height: auto;
    }

.wf-credit-inline {
    margin-top: .375rem;
    color: var(--wf-credit-color);
}

/* ---- layout block backgrounds ------------------------------------------ */
/* LayoutBlockScope adds wf-block-has-bg to the wrapper carrying --wf-block-bg,
   and appends the overlay as its last child. The overlay is a sibling of the
   block's own <section>, so overflow:hidden on that section can't clip it. */

.wf-layout-scope.wf-block-has-bg {
    position: relative;
}

.wf-credit-overlay {
    position: absolute;
    right: var(--wf-credit-offset);
    bottom: var(--wf-credit-offset);
    z-index: 10;
    max-width: 60%;
    margin: 0;
    padding: .25rem .5rem;
    border-radius: .25rem;
    background: var(--wf-credit-overlay-bg);
    color: var(--wf-credit-overlay-color);
    text-align: right;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* On a phone a corner pill lands on top of hero copy often enough to matter.
   A full-width strip along the bottom edge stays visible without covering text. */
@media (max-width: 575.98px) {
    .wf-credit-overlay {
        right: auto;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        padding: .1875rem .5rem;
        text-align: left;
        font-size: .625rem;
    }
}

/* ---- print ------------------------------------------------------------- */
/* Attribution stays. Drop the overlay chrome so it reads as plain text. */
@media print {
    .wf-credit-overlay {
        position: static;
        max-width: 100%;
        background: none;
        color: #000;
        padding: .25rem 0;
        text-align: left;
        backdrop-filter: none;
    }

    .wf-credit a {
        text-decoration: none;
    }
}


.wf-figure > br {
    display: none;
}

/* ==========================================================================
   Navbar split dropdown toggle — PLATFORM BASELINE
   Paste into the platform stylesheet (the one that already styles .wf-credit).
   Not theme CSS: this is the button's structural floor, so the control is
   usable even on a site whose generated theme says nothing about it.
   ========================================================================== */

/* A parent nav item is now TWO controls sharing one <li>: the label link and
   this trigger. Keep them visually joined so they read as one menu item.
   position:relative is what the absolutely-positioned menu is measured
   against — Bootstrap's .dropdown sets it too, but state it here so the
   positioning does not depend on that class surviving. */
.wf-nav-item-has-children {
    display: flex;
    align-items: center;
    position: relative;
}

/* The trigger. A <button> carries UA border/background/font that would make it
   look nothing like the nav links beside it, so reset those here rather than
   hoping every generated theme remembers to. Color is inherited deliberately —
   whatever the theme gives .wf-nav-link, the chevron matches. */
.wf-nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    /* 44x44 is the WCAG 2.5.5 target size. The chevron itself is tiny; without a
     padded hit area this is the control that fails on a phone, which is the
     exact device the split control exists to serve. Negative margin keeps the
     visual gap tight while the touch area stays full size. */
    min-width: 44px;
    min-height: 44px;
    margin-left: -.35rem;
}

    /* Bootstrap's .dropdown-toggle draws the caret with ::after and adds its own
   left margin meant for a label that isn't there. */
    .wf-nav-dropdown-toggle::after {
        margin-left: 0;
        transition: transform .15s ease-in-out;
    }

    .wf-nav-dropdown-toggle:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: 2px;
    }

    /* Rotate the chevron when the menu is open. Bootstrap flips aria-expanded, so
   no JS is needed and the indicator cannot drift out of sync with state. */
    .wf-nav-dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }

/* Below lg the links sit inside the offcanvas and Bootstrap renders the menu
   static, so it flows inline under its parent. Indent it so the hierarchy is
   readable when everything is stacked in one column. */
@media (max-width: 991.98px) {
    .wf-nav-list .wf-nav-dropdown {
        padding-left: 1rem;
        border-left: 1px solid currentColor;
        border-radius: 0;
    }
    /* The label link should take the row and leave the chevron at the far end,
     rather than the two sitting squashed together on the left. */
    .wf-nav-item-has-children > .wf-nav-link {
        flex: 1 1 auto;
    }
}

/* ==========================================================================
   Hover-to-open on desktop.

   Click already works everywhere and is the accessible baseline; this is
   additive. Scoped to fine pointers so a touch device never opens a menu from
   a stray tap, and to lg+ where the menu is absolutely positioned rather than
   flowing inline in the offcanvas.

   THE OFFSETS ARE NOT OPTIONAL. Bootstrap only applies 'top:100%; left:0' via
   a [data-bs-popper] attribute its JS adds when the menu opens through Popper.
   Opening with CSS alone sets display:block with top/left still auto, so the
   menu falls back to its static position inside this flex row and lands up and
   to the left, overlapping the links beside it. These three declarations are
   what Popper would have written.

   aria-expanded stays "false" while hovering, so the chevron will not rotate
   and assistive tech is not told the menu is open. That is why hover can only
   ever be decoration on top of a working click, never the mechanism.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
    .wf-nav-item-has-children:hover > .wf-nav-dropdown {
        display: block;
        top: 100%;
        left: 0;
        margin-top: .125rem;
    }

    /* The 2px gap above would break the hover the moment the pointer crossed it
     if the menu were a sibling, but it is a DESCENDANT of the hovered <li>, so
     :hover still matches while the pointer is inside the menu. Nothing else
     needed — no invisible bridge element. */
}