/*
Theme Name: Frost Child
Template:   frost
*/

/* ========================================
   TABLE OF CONTENTS
   ========================================
   1. Header & Navigation
   2. Typography & Content
   3. Buttons & Interactive Elements
   4. Layout & Sections
   5. Cards & Components
   6. Forms
   7. Animations & Effects
   ======================================== */

/* ========================================
   1. HEADER & NAVIGATION
   ======================================== */

/* Smart Header */
.smart-header {
    transition: transform 0.4s ease-in-out;
    background: var(--wp--preset--gradient--breathing-room-ombre); 
    z-index: 9999;
}

.smart-header.hide-header {
    transform: translateY(-100%);
}

/* Site Logo */
.wp-block-site-logo img {
    height: 25px;
    width: auto;
    max-width: 100%;
    transition: transform 0.3s ease-in-out;
}

.wp-block-site-logo:hover img {
    transform: scale(1.05);
}

/* Navigation Links */
.wp-block-navigation-link {
    transition: color 0.2s ease-in-out;
}

.wp-block-navigation-link:hover {
    color: var(--wp--preset--color--rooted-maroon);
}

.wp-block-navigation-link a {
    position: relative;
    text-decoration: none;
}

.wp-block-navigation-link a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--wp--preset--color--rooted-maroon);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-in-out;
}

.wp-block-navigation-link a:hover::after {
    transform: scaleX(1);
}

/* Active Page Indicator */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > a {
    color: var(--wp--preset--color--rooted-maroon) !important;
}

.wp-block-navigation .wp-block-navigation-item.current-menu-item > a::after {
    width: 100%;
    left: 0;
}

/* Mobile Menu Active State */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a {
    color: var(--wp--preset--color--rooted-maroon) !important;
    font-weight: bold;
}

/* Dark Background Navigation Overrides */
.has-foundation-background-color a:hover {
    color: var(--wp--preset--color--horizon-light) !important;
}

.has-foundation-background-color a::after {
    background-color: var(--wp--preset--color--horizon-light) !important;
}

.has-foundation-background-color .wp-block-navigation-item.current-menu-item > a {
    color: var(--wp--preset--color--horizon-light) !important;
}

.has-foundation-background-color .wp-block-navigation-item.current-menu-item > a::after {
    width: 100%;
    left: 0;
    background-color: var(--wp--preset--color--horizon-light) !important;
}

/* Footer Logo */
.footer-logo-link {
    transition: transform 0.3s ease;
    display: inline-block;
}

.footer-logo-link:hover {
    transform: scale(1.05);
}

/* ========================================
   2. TYPOGRAPHY & CONTENT
   ======================================== */

/* Bold Text Styling */
strong, b {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Prevent Orphans (single words on last line) */
p, h1, h2, h3, h4, h5, h6 {
    text-wrap: pretty;
}

/* Content Links (Paragraphs & Lists Only) */
p a,
.wp-block-list a {
    text-decoration: none !important;
    cursor: pointer;
    color: var(--wp--preset--color--rooted-maroon) !important;
    --content-link-hover: var(--wp--preset--color--rooted-maroon);
    font-weight: 500;
    background-image: linear-gradient(var(--content-link-hover), var(--content-link-hover));
    background-position: center bottom;
    background-size: 0% 1px;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease-in-out, color 0.3s ease-in-out;
    padding-bottom: 2px; 
}

p a:visited,
.wp-block-list a:visited {
    color: var(--wp--preset--color--rooted-maroon) !important;
}

p a:hover,
.wp-block-list a:hover {
    color: var(--content-link-hover) !important;
    background-size: 100% 1px;
}

/* Content Links on Dark Backgrounds */
.site-footer p a,
.site-footer .wp-block-list a,
.has-foundation-background-color p a,
.has-foundation-background-color .wp-block-list a,
.has-rooted-maroon-background-color p a,
.has-rooted-maroon-background-color .wp-block-list a,
.on-dark p a,
.on-dark .wp-block-list a {
    color: #ffffff !important;
    --content-link-hover: var(--wp--preset--color--horizon-light);
    background-image: linear-gradient(var(--content-link-hover), var(--content-link-hover));
}

.site-footer p a:visited,
.site-footer .wp-block-list a:visited,
.has-foundation-background-color p a:visited,
.has-foundation-background-color .wp-block-list a:visited,
.has-rooted-maroon-background-color p a:visited,
.has-rooted-maroon-background-color .wp-block-list a:visited,
.on-dark p a:visited,
.on-dark .wp-block-list a:visited {
    color: #ffffff !important;
}

/* ========================================
   3. BUTTONS & INTERACTIVE ELEMENTS
   ======================================== */

/* Standard Buttons */
.wp-block-button__link {
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.wp-block-button__link:hover {
    transform: scale(1.05);
    background-color: var(--wp--preset--color--horizon-light) !important;
    color: var(--wp--preset--color--foundation) !important;
    border-color: var(--wp--preset--color--horizon-light) !important;
}

/* ========================================
   4. LAYOUT & SECTIONS
   ======================================== */

/* Equal Height Columns */
.wp-block-columns.are-vertically-aligned-top {
    align-items: stretch !important;
}

.wp-block-column.is-vertically-aligned-top.has-background {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    justify-content: flex-start;
}

.wp-block-column.has-background {
    flex-grow: 1 !important;
    align-self: stretch !important;
    box-shadow: 8px 8px 0px 0px color-mix(in srgb, var(--wp--preset--color--foundation), transparent 50%) !important;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--foundation), transparent 80%) !important;
    transition: all 0.3s ease;
}

.wp-block-column.has-background:hover {
    transform: translate(-2px, -2px);
    box-shadow: 10px 10px 0px 0px color-mix(in srgb, var(--wp--preset--color--foundation), transparent 40%) !important;
}

/* Seamless Section Overlap */
.seamless-fade {
    margin-top: -100px !important;
    padding-top: 150px !important;
    position: relative;
    z-index: 10;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100px, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 100px, black 100%);
    background-clip: padding-box;
}

@media (min-width: 782px) {
    .seamless-fade {
        margin-top: -200px !important;
        padding-top: 300px !important; 
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 200px, black 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 200px, black 100%);
    }
}

/* Watermark Background Effect */
.watermark {
    position: relative !important;
    overflow: hidden;
    isolation: isolate; 
    background-attachment: fixed !important;
    background-size: contain !important; 
    background-repeat: no-repeat !important;
    background-position: center center !important; 
}

.watermark::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 0;
    pointer-events: none; 
}

.watermark > * {
    position: relative;
    z-index: 1;
}

/* Floating Illustration Container */
.illo-wrapper {
    position: relative !important;
    overflow: hidden !important; 
    isolation: isolate !important; 
}

.float-illo {
    position: absolute !important;
    z-index: -1 !important; 
    pointer-events: none;
    width: var(--illo-size, clamp(150px, 20vw, 400px)); 
    height: auto;
    top: auto; 
    bottom: auto; 
    left: auto; 
    right: auto;
}

/* Illustration Positioning Utilities */
.pos-tl { top: 0; left: 0; }
.pos-tr { top: 0; right: 0; }
.pos-bl { bottom: 0; left: 0; }
.pos-br { bottom: 0; right: 0; }

.is-svg {
    width: var(--illo-size, clamp(150px, 20vw, 400px)); 
    height: auto;
}

/* ========================================
   SVG WATERMARK SYSTEM
   ========================================
   Add 'wm-section' to the Group container,
   then add one position class:
     wm-bl  → bottom left
     wm-br  → bottom right
     wm-tl  → top left
     wm-tr  → top right
     wm-center → centered
   Place the wp-block-image (figure) as the
   FIRST child of the Group block.

   Customize per-section with inline CSS vars:
     --wm-size    (default: clamp(250px,40vw,650px))
     --wm-opacity (default: 0.08)
   ======================================== */

/* Container */
.wm-section {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* The watermark figure — absolutely positioned, beneath all content */
.wm-section > .wp-block-image {
    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    width: var(--wm-size, clamp(250px, 40vw, 650px)) !important;
    height: auto !important;
    /* Reset any WP default positioning */
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}

/*
 * The SVG is forced to a black silhouette then made semi-transparent.
 * Effect: semi-transparent black over any background = that background color
 * slightly darkened.  Adjust --wm-opacity to taste (0.06–0.15 recommended).
 */
.wm-section > .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    filter: brightness(0) !important;
    opacity: var(--wm-opacity, 0.08) !important;
}

/* All other direct children sit above the watermark */
.wm-section > *:not(.wp-block-image) {
    position: relative !important;
    z-index: 1 !important;
}

/* ---- Watermark Position Classes ---- */

/* Corner positions: width-based sizing — percentage heights are unreliable
   on group blocks whose height is content-determined (height: auto).
   clamp gives a sensible size from small screens up to large. */
.wm-bl > .wp-block-image,
.wm-br > .wp-block-image,
.wm-tl > .wp-block-image,
.wm-tr > .wp-block-image {
    width: clamp(180px, 40%, 500px) !important;
    height: auto !important;
}

.wm-bl > .wp-block-image img,
.wm-br > .wp-block-image img,
.wm-tl > .wp-block-image img,
.wm-tr > .wp-block-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

.wm-bl > .wp-block-image {
    bottom: var(--wp--preset--spacing--x-small) !important;
    left: var(--wp--preset--spacing--x-small) !important;
}

.wm-br > .wp-block-image {
    bottom: var(--wp--preset--spacing--x-small) !important;
    right: var(--wp--preset--spacing--x-small) !important;
}

.wm-tl > .wp-block-image {
    top: var(--wp--preset--spacing--x-small) !important;
    left: var(--wp--preset--spacing--x-small) !important;
}

.wm-tr > .wp-block-image {
    top: var(--wp--preset--spacing--x-small) !important;
    right: var(--wp--preset--spacing--x-small) !important;
}

/* Side positions: identical approach to wm-center — width drives the
   rendered size via natural aspect ratio, top+translateY centers it
   vertically. Pinned to one edge instead of horizontally centered. */
.wm-left > .wp-block-image,
.wm-right > .wp-block-image {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: clamp(200px, 45%, 550px) !important;
    height: auto !important;
}

.wm-left > .wp-block-image img,
.wm-right > .wp-block-image img {
    width: 100% !important;
    height: auto !important;
}

.wm-left > .wp-block-image {
    left: var(--wp--preset--spacing--x-small) !important;
    right: auto !important;
}

.wm-right > .wp-block-image {
    right: var(--wp--preset--spacing--x-small) !important;
    left: auto !important;
}

/* Center: fill the section minus x-small padding on every side,
   then use object-fit: contain to preserve aspect ratio within that box. */
.wm-center > .wp-block-image {
    width: calc(100% - (2 * var(--wp--preset--spacing--x-small))) !important;
    height: calc(100% - (2 * var(--wp--preset--spacing--x-small))) !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.wm-center > .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* ---- Watermark Opacity Modifiers ----
   Add one of these to the wm-section element:
     wm-xl  → extra light (0.05)
     wm-l   → light       (0.10)
     wm-md  → medium      (0.18)
     wm-d   → dark        (0.26)
     wm-xd  → extra dark  (0.35)
*/
.wm-xl > .wp-block-image img { opacity: 0.05 !important; }
.wm-l  > .wp-block-image img { opacity: 0.10 !important; }
.wm-md > .wp-block-image img { opacity: 0.18 !important; }
.wm-d  > .wp-block-image img { opacity: 0.26 !important; }
.wm-xd > .wp-block-image img { opacity: 0.35 !important; }

/* ---- Watermark Size Modifiers ----
   Add one of these to the wm-section element alongside a position class.
   Uses compound selector (two classes) for higher specificity than the
   position rules, so these reliably override the default widths.
   Does not affect wm-center (which fills the full section by design).
     wm-w-xs  → compact   ~15% width
     wm-w-sm  → small     ~25% width
     wm-w-md  → medium    ~35% width
     wm-w-lg  → large     ~45% width
     wm-w-xl  → extra large ~55% width
*/
.wm-section.wm-w-xs > .wp-block-image { width: clamp(80px,  15%, 180px) !important; }
.wm-section.wm-w-sm > .wp-block-image { width: clamp(130px, 25%, 280px) !important; }
.wm-section.wm-w-md > .wp-block-image { width: clamp(180px, 35%, 400px) !important; }
.wm-section.wm-w-lg > .wp-block-image { width: clamp(240px, 45%, 540px) !important; }
.wm-section.wm-w-xl > .wp-block-image { width: clamp(300px, 55%, 700px) !important; }

/* ---- Watermark Scroll Fade Animation ----
   Fades the watermark figure in as the section scrolls toward the
   center of the viewport, and fades it back out as it exits at the top.
   Animates the figure's own opacity (0 → 1), which multiplies with the
   img's base opacity so the final transparency is always correct.
   Uses @supports so browsers without scroll-driven animation support
   display watermarks at their normal opacity instead of hiding them.
*/
@keyframes wm-scroll-fade {
    0%   { opacity: 0; }
    35%  { opacity: 1; }
    65%  { opacity: 1; }
    100% { opacity: 0; }
}

@supports (animation-timeline: view()) {
    /*
     * Define a named view-timeline on the section element itself (which is
     * in normal document flow). The absolutely-positioned figure references
     * this named timeline so the animation tracks when the SECTION scrolls
     * through the viewport, not the figure — bypassing the overflow:hidden
     * scroll-container issue that would otherwise freeze the animation.
     */
    .wm-section {
        view-timeline: --wm-section block;
    }

    .wm-section > .wp-block-image {
        opacity: 0;
        animation: wm-scroll-fade linear both;
        animation-timeline: --wm-section;
        animation-range: entry 0% exit 100%;
    }
}

/* ========================================
   6. FORMS
   ======================================== */

/* Fluent Forms Styling */
.fluentform .ff-el-form-control {
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 4px !important;
    padding: 12px 16px !important;
    color: var(--wp--preset--color--foundation) !important;
    font-size: 16px !important;
}

.fluentform .ff-el-input--label {
    color: #ffffff !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px;
    margin-bottom: 8px !important;
}

.fluentform ::placeholder {
    color: #888888 !important;
    opacity: 0.7;
}

.fluentform .ff-btn-submit {
    background-color: #5ba491 !important; 
    color: var(--wp--preset--color--clear-space) !important;
    font-family: var(--wp--preset--font-family--lato) !important;
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-size: var(--wp--preset--font-size--x-small) !important;
    border: none !important;
    padding: 15px 30px !important;
    border-radius: 5px !important;
    width: auto !important; 
    display: inline-block !important; 
    cursor: pointer;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out !important;
}

.fluentform .ff-btn-submit:hover {
    background-color: var(--wp--preset--color--horizon-light) !important; 
    color: var(--wp--preset--color--foundation) !important;
    transform: scale(1.05) !important; 
}

/* ========================================
   7. ANIMATIONS & EFFECTS
   ======================================== */

/* Parallax Scroll Effect */
@keyframes parallax-lag {
    from { 
        transform: translateY(-80px); 
    }
    to { 
        transform: translateY(80px); 
    }
}

.step-over {
    position: relative !important;
    z-index: 10 !important;
    pointer-events: none;
    animation-name: parallax-lag;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
}

@media (max-width: 768px) {
    .step-over {
        animation: none !important;
    }
}

/* ========================================
   5. CARDS & COMPONENTS
   ======================================== */

/* Service Cards */
.service-card {
    background-color: #ffffff !important;
    padding: 40px !important;
    border-radius: 30px !important;
    box-shadow: 8px 8px 0px 0px color-mix(in srgb, var(--wp--preset--color--foundation), transparent 50%) !important;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--foundation), transparent 80%) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 10px 10px 0px 0px color-mix(in srgb, var(--wp--preset--color--foundation), transparent 40%) !important;
}

.service-card h3 {
    font-family: var(--wp--preset--font-family--cormorant-garamond);
    color: var(--wp--preset--color--foundation);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.service-card .wp-block-buttons {
    margin-top: 2rem; 
}

.service-check {
    font-weight: 600;
    color: var(--wp--preset--color--rooted-maroon);
    margin-top: 1rem;
    display: block;
}

/* 3D Flip Cards */
.wp-block-column:has(.flip-card) {
    display: flex !important;
    flex-direction: column !important; 
}

.flip-card {
    min-height: 400px !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    background-color: transparent !important;
    perspective: 1500px;
    perspective-origin: right center;
    cursor: pointer;
    margin-bottom: 0 !important;
    width: 100%;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 400px;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
}

.flip-card-inner.curl-opening {
    animation: pageCurlOpen 0.8s linear forwards;
}

.flip-card-inner.curl-closing {
    animation: pageCurlClose 0.8s linear forwards;
}

/* Keyframe values follow a sine curve so the rotateX bow and scaleX
   compression rise and fall smoothly — no straight-line jumps. */
@keyframes pageCurlOpen {
    0%   { transform: rotateY(0deg)   rotateX(0deg)  scaleX(1.00); }
    10%  { transform: rotateY(18deg)  rotateX(3deg)  scaleX(0.96); }
    20%  { transform: rotateY(36deg)  rotateX(6deg)  scaleX(0.93); }
    30%  { transform: rotateY(54deg)  rotateX(8deg)  scaleX(0.90); }
    40%  { transform: rotateY(72deg)  rotateX(10deg) scaleX(0.89); }
    50%  { transform: rotateY(90deg)  rotateX(10deg) scaleX(0.88); }
    60%  { transform: rotateY(108deg) rotateX(10deg) scaleX(0.89); }
    70%  { transform: rotateY(126deg) rotateX(8deg)  scaleX(0.90); }
    80%  { transform: rotateY(144deg) rotateX(6deg)  scaleX(0.93); }
    90%  { transform: rotateY(162deg) rotateX(3deg)  scaleX(0.96); }
    100% { transform: rotateY(180deg) rotateX(0deg)  scaleX(1.00); }
}

@keyframes pageCurlClose {
    0%   { transform: rotateY(180deg) rotateX(0deg)  scaleX(1.00); }
    10%  { transform: rotateY(162deg) rotateX(3deg)  scaleX(0.96); }
    20%  { transform: rotateY(144deg) rotateX(6deg)  scaleX(0.93); }
    30%  { transform: rotateY(126deg) rotateX(8deg)  scaleX(0.90); }
    40%  { transform: rotateY(108deg) rotateX(10deg) scaleX(0.89); }
    50%  { transform: rotateY(90deg)  rotateX(10deg) scaleX(0.88); }
    60%  { transform: rotateY(72deg)  rotateX(10deg) scaleX(0.89); }
    70%  { transform: rotateY(54deg)  rotateX(8deg)  scaleX(0.90); }
    80%  { transform: rotateY(36deg)  rotateX(6deg)  scaleX(0.93); }
    90%  { transform: rotateY(18deg)  rotateX(3deg)  scaleX(0.96); }
    100% { transform: rotateY(0deg)   rotateX(0deg)  scaleX(1.00); }
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    padding: 40px !important;
    border-radius: 30px !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 8px 8px 0px 0px color-mix(in srgb, var(--wp--preset--color--foundation), transparent 50%) !important;
    border: 1px solid color-mix(in srgb, var(--wp--preset--color--foundation), transparent 80%) !important;
    background-color: #ffffff !important;
}

.flip-card-front {
    z-index: 2;
    transform: rotateY(0deg);
}

.flip-card-back {
    transform: rotateY(180deg);
    overflow: hidden; 
}

/* flip state driven by JS classes — see rooted_nested_add_flip_script() */

/* Flip Card Icons */
.flip-card-front figure.wp-block-image {
    width: 70% !important;
    height: 160px !important;           /* fixed-height zone so all icons share the same vertical space */
    display: flex !important;           /* flex container to vertically center the img inside */
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 20px auto !important;
}

.flip-card-front figure.wp-block-image img,
.flip-card-front > img {
    width: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: auto !important;
    display: block !important;
    opacity: 1 !important;
    /* brightness(0) renders a pure black silhouette — semantically identical to
       --wp--preset--color--foundation (#2f2d2b). CSS filters cannot reference
       CSS custom properties, so this is the closest maintainable equivalent. */
    filter: brightness(0) !important;
}

.flip-card-back .watermark-icon {
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flip-card-back .watermark-icon img {
    width: 150px !important; 
    height: 150px !important; 
    transform: scale(3.5); 
    opacity: 0.05; 
}

.flip-card-back p {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* ========================================
   8. BLOG & QUERY LOOP
   ======================================== */

/* Tighten the gap between the excerpt text and the "Read More" link.
   Both are <p> tags inside .wp-block-post-excerpt — collapse the bottom
   margin of the excerpt paragraph and top margin of the more-text paragraph. */
.wp-block-post-excerpt__excerpt {
    margin-bottom: 0 !important;
}

.wp-block-post-excerpt__more-text {
    margin-top: 0.25rem !important;
}

/* ---- Query Pagination ---- */
.wp-block-query-pagination {
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

/* Shared base — mirrors the site's standard button (ff-btn-submit) */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    display: inline-block !important;
    padding: 15px 30px !important;
    border-radius: 5px !important;
    font-size: var(--wp--preset--font-size--x-small) !important;
    font-family: var(--wp--preset--font-family--lato) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out !important;
    line-height: 1 !important;
}

/* Previous Page — filled style (matches ff-btn-submit) */
.wp-block-query-pagination-previous {
    background-color: #5ba491 !important;
    color: var(--wp--preset--color--clear-space) !important;
    border: none !important;
}

.wp-block-query-pagination-previous:hover {
    background-color: var(--wp--preset--color--horizon-light) !important;
    color: var(--wp--preset--color--foundation) !important;
    transform: scale(1.05) !important;
}

/* Next Page — outline style */
.wp-block-query-pagination-next {
    background-color: transparent !important;
    color: var(--wp--preset--color--foundation) !important;
    border: 1px solid var(--wp--preset--color--foundation) !important;
}

.wp-block-query-pagination-next:hover {
    background-color: var(--wp--preset--color--horizon-light) !important;
    color: var(--wp--preset--color--foundation) !important;
    border-color: var(--wp--preset--color--horizon-light) !important;
    transform: scale(1.05) !important;
}