/* ============================================================================
   DubuYoFlipbook — reusable embeddable flipbook section

   Brand colours:
   - Deep Blue:    #2B3990
   - Bright Yellow:#FFDD00
   - Control Red:  #ED3545  (toolbar background)
   - White:        #FFFFFF

   SCOPING
   -------
   Every rule is scoped under .dubuyo-flipbook-section, and every custom
   property is defined ON that class rather than on :root. That is what lets
   two flipbooks coexist on one page with different sizes or colours — override
   any variable on a single instance:

       #promo-flipbook { --stage-height: 400px; --control-bg: #2B3990; }

   Nothing here sets html/body height, uses position:fixed, or assumes it owns
   the viewport, so it cannot leak into the host page.
   ============================================================================ */

.dubuyo-flipbook-section {
    /* ----- Theme ----- */
    --primary-blue: #2B3990;
    --accent-yellow: #FFDD00;
    --control-bg: #ED3545;      /* toolbar pill background */
    --white: #FFFFFF;

    /* Background of the embedded section. White so the flipbook blends into
       the host page instead of introducing a coloured band. */
    --section-bg: transparent;

    /* ----- Metrics ----- */
    /* Equal padding on all four sides — one value drives top/right/bottom/left
       for both the toolbar pill and the book stage. */
    --pad: 16px;

    /* Height of the book area in normal (embedded) view.
       A plain height — NOT 100vh — because the flipbook is one section among
       others; sizing it to the viewport pushes the toolbar below the fold.
       Tune this single value to make the book bigger or smaller. */
    --stage-height: 660px;

    /* Page-turn duration. Must match `flippingTime` in the JS options. */
    --flip-duration: 800ms;
    --flip-easing: cubic-bezier(0.33, 0, 0.2, 1);

    /* Closing a book back to its cover is a short move at the END of the turn,
       so it gets its own faster timing. */
    --close-duration: 240ms;
    --close-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* ----- Layout ----- */
    width: 100%;                /* sizes to whatever container the host gives */
    background-color: var(--section-bg);
    padding: var(--pad);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pad);
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
                 Ubuntu, Cantarell, sans-serif;
}

.dubuyo-flipbook-section *,
.dubuyo-flipbook-section *::before,
.dubuyo-flipbook-section *::after {
    box-sizing: border-box;
}

/* ============================================================================
   The book area
   ============================================================================ */

.dubuyo-flipbook-section .flipbook-stage {
    position: relative; /* anchors the loading overlay to THIS box, not the page */
    width: 100%;
    height: var(--stage-height);
    min-height: 0;      /* allow shrinking inside the flex column */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;   /* a slightly over-sized book must not push the toolbar off */
}

.dubuyo-flipbook-section .flipbook-canvas {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
    /* Slid sideways by .is-single-page to hide the blank half of the cover.
       Same duration and easing as the clip width so the two move as one. */
    transform: translateX(var(--book-shift, 0px));
    transition: transform var(--flip-duration) var(--flip-easing);
}

/* Closing: shift in step with the clip width, both at the end of the turn. */
.dubuyo-flipbook-section .flipbook-stage.is-closing .flipbook-canvas {
    transition: transform var(--close-duration) var(--close-easing);
}

/* ----------------------------------------------------------------------------
   Cover / back-cover framing (desktop only)

   On the first and last page the book is still two pages wide with one half
   empty. We clip the view down to a single page and slide the book so the
   printed half sits inside that window — a closed book, not a blank spread.

   The clip MUST happen on a wrapper around the book, never on the canvas or
   .stf__parent: the library writes an inline `min-width: <page>*2` onto its
   parent element, and in CSS min-width beats max-width, so any attempt to
   narrow those two is silently ignored.

   --page-w and --clip-w are written by JS each time the book is sized.
   -------------------------------------------------------------------------- */
.dubuyo-flipbook-section .flipbook-clip {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;                  /* must be explicit — the library absolutely
                                      positions the book, so this box has no
                                      content height of its own and would
                                      collapse to 0, blanking the whole view */
    max-width: 100%;
    overflow: hidden;              /* does the actual clipping */

    /* Width is driven by JS as an explicit px value in BOTH states. It used to
       be `auto` for spreads, and `auto` cannot be interpolated — the browser
       silently skipped the animation and the container snapped open in one
       frame. Two pixel values animate properly. */
    width: var(--clip-w, auto);

    /* OPENING (cover -> spread): widen immediately, in step with the page turn.
       The canvas is already drawing the wider spread, so revealing more of it
       as the page lifts looks correct. */
    transition: width var(--flip-duration) var(--flip-easing);
}

/* CLOSING (spread -> cover): the book draws to a SINGLE <canvas> spanning the
   whole spread, so the container must stay wide for the entire turn —
   narrowing during it made the cover appear to turn halfway then snap back to
   full width. JS holds off until the turn completes and only then adds
   .is-single-page, so this transition runs at the END and just needs to be
   short. Applied via .is-closing, set by JS. */
.dubuyo-flipbook-section .flipbook-clip.is-closing {
    transition: width var(--close-duration) var(--close-easing);
}

/* Respect users who ask for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dubuyo-flipbook-section .flipbook-clip,
    .dubuyo-flipbook-section .flipbook-clip.is-closing,
    .dubuyo-flipbook-section .flipbook-canvas {
        transition: none;
    }
}

/* ============================================================================
   Loading overlay — covers only the stage, never the whole page
   ============================================================================ */

.dubuyo-flipbook-section .flipbook-loading {
    position: absolute;
    inset: 0;
    background-color: var(--section-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.dubuyo-flipbook-section .flipbook-loading.hidden {
    opacity: 0;
    pointer-events: none;
}

/* The overlay sits on the white section background, so the loading text and
   spinner track are brand blue rather than white. */
.dubuyo-flipbook-section .loading-content {
    text-align: center;
    color: var(--primary-blue);
}

.dubuyo-flipbook-section .loading-content p {
    margin: 16px 0 0;
    font-size: 15px;
    font-weight: 600;
}

.dubuyo-flipbook-section .spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(43, 57, 144, 0.2);
    border-top-color: var(--control-bg);
    border-radius: 50%;
    animation: dubuyo-flipbook-spin 0.8s linear infinite;
    margin: 0 auto;
}

@keyframes dubuyo-flipbook-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================================
   Toolbar — a centred pill BELOW the book.

   .flipbook-toolbar-wrap is full width only so it can centre the pill; the
   background belongs to .flipbook-toolbar itself, which is inline-flex and
   therefore only as wide as its buttons.
   ============================================================================ */

.dubuyo-flipbook-section .flipbook-toolbar-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

.dubuyo-flipbook-section .flipbook-toolbar {
    display: inline-flex;      /* shrink-to-fit — never full width */
    align-items: center;
    gap: 10px;
    background-color: var(--control-bg);
    padding: var(--pad);       /* equal on all four sides */
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

.dubuyo-flipbook-section .flipbook-divider {
    width: 1px;
    align-self: stretch;
    background-color: rgba(255, 255, 255, 0.45);
    margin: 0 4px;
}

/* ============================================================================
   Buttons — white on the control colour
   ============================================================================ */

.dubuyo-flipbook-section .flipbook-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-family: inherit;
    font-weight: 700;
    transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    touch-action: manipulation;
}

/* Round prev/next buttons */
.dubuyo-flipbook-section .flipbook-prev,
.dubuyo-flipbook-section .flipbook-next {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    background-color: rgba(255, 255, 255, 0.16);
}

/* Pill-shaped Full View button with its icon + text */
.dubuyo-flipbook-section .flipbook-fullscreen {
    height: 40px;
    padding: 0 18px;
    gap: 9px;
    border-radius: 999px;
    font-size: 14px;
    letter-spacing: 0.02em;
    background-color: rgba(255, 255, 255, 0.16);
    white-space: nowrap;
}

.dubuyo-flipbook-section .flipbook-fullscreen .btn-icon {
    font-size: 17px;
}

.dubuyo-flipbook-section .flipbook-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.32);
}

.dubuyo-flipbook-section .flipbook-btn:active:not(:disabled) {
    transform: scale(0.94);
}

.dubuyo-flipbook-section .flipbook-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Clicking a page-turn button left Chrome's default near-black focus ring
   drawn around the circle — a black outline sitting on the red toolbar. Clear
   the default outline for ALL focus, then re-add a white one for :focus-visible
   only, so the ring still shows for keyboard users but never after a click. */
.dubuyo-flipbook-section .flipbook-btn:focus {
    outline: none;
    box-shadow: none;
}

/* Keyboard focus ring — visible against the toolbar background */
.dubuyo-flipbook-section .flipbook-btn:focus-visible {
    outline: 3px solid var(--white);
    outline-offset: 2px;
}

/* The ‹ › chevron glyphs carry uneven side bearings and sit high in their em
   box, so a plain flex-centre still looks off. Centring the glyph's own box and
   nudging it up by a hair lands it on the button's optical centre. */
.dubuyo-flipbook-section .btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    line-height: 0;
}

/* Chevrons only — the ⛶ fullscreen glyph is already centred and must not move */
.dubuyo-flipbook-section .flipbook-prev .btn-icon,
.dubuyo-flipbook-section .flipbook-next .btn-icon {
    padding-bottom: 4px;
}

/* ============================================================================
   Page indicator
   ============================================================================ */

.dubuyo-flipbook-section .flipbook-indicator {
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
    white-space: nowrap;
    user-select: none;
    min-width: 62px;
    text-align: center;
    padding: 0 2px;
}

/* ============================================================================
   StPageFlip library overrides
   ============================================================================ */

.dubuyo-flipbook-section .stf__parent,
.dubuyo-flipbook-section .stf__wrapper,
.dubuyo-flipbook-section .stf__block {
    background-color: transparent;
    max-width: 100%;
}

.dubuyo-flipbook-section .stf__item {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* ============================================================================
   Fullscreen ("Full View") mode

   In fullscreen the section DOES own the screen, so here — and only here — it
   is allowed to fill the viewport.
   ============================================================================ */

.dubuyo-flipbook-section:fullscreen,
.dubuyo-flipbook-section:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    justify-content: center;
    background-color: var(--section-bg);
    overflow: hidden;
}

/* In fullscreen the stage height is computed in JS (--fs-stage-h) by measuring
   the real toolbar, because a CSS calc() guessing the bar height collapsed the
   stage to 0 and Full View rendered blank. min-height:0 is required — a flex
   item defaults to min-height:auto and refuses to shrink below its content. */
.dubuyo-flipbook-section:fullscreen .flipbook-stage,
.dubuyo-flipbook-section:-webkit-full-screen .flipbook-stage {
    height: var(--fs-stage-h, 70vh);
    flex: 0 0 auto;
    min-height: 0;
}

/* ============================================================================
   Responsive

   Padding stays equal on all four sides at every breakpoint — only the single
   --pad value changes, so top/right/bottom/left can never drift apart.
   ============================================================================ */

@media (max-width: 767px) {
    .dubuyo-flipbook-section {
        --pad: 12px;
        --stage-height: 520px;
    }

    .dubuyo-flipbook-section .flipbook-toolbar {
        gap: 8px;
    }

    .dubuyo-flipbook-section .flipbook-prev,
    .dubuyo-flipbook-section .flipbook-next {
        width: 38px;
        height: 38px;
        font-size: 24px;
    }

    .dubuyo-flipbook-section .flipbook-fullscreen {
        height: 38px;
        padding: 0 14px;
        font-size: 13px;
        gap: 7px;
    }

    .dubuyo-flipbook-section .flipbook-indicator {
        font-size: 14px;
        min-width: 56px;
    }
}

@media (max-width: 480px) {
    .dubuyo-flipbook-section {
        --pad: 10px;
        --stage-height: 440px;
    }

    .dubuyo-flipbook-section .flipbook-toolbar {
        gap: 6px;
        /* Stays a pill; buttons shrink rather than the bar going full width */
        border-radius: 999px;
    }

    .dubuyo-flipbook-section .flipbook-prev,
    .dubuyo-flipbook-section .flipbook-next {
        width: 36px;
        height: 36px;
        font-size: 22px;
    }

    .dubuyo-flipbook-section .flipbook-fullscreen {
        height: 36px;
        padding: 0 12px;
        font-size: 12px;
        gap: 6px;
    }

    .dubuyo-flipbook-section .flipbook-fullscreen .btn-icon {
        font-size: 15px;
    }

    .dubuyo-flipbook-section .flipbook-indicator {
        font-size: 13px;
        min-width: 50px;
    }
}

/* Very narrow phones — drop the divider before anything wraps */
@media (max-width: 360px) {
    .dubuyo-flipbook-section .flipbook-divider {
        display: none;
    }
}