/**
 * Redesigned Homepage Buttons: "View More Videos" & "Call Poquoson"
 * Poquoson Tree & Crane Service (poquosontree.com)
 *
 * 1. VIEW MORE VIDEOS:
 *    - Solid professional brand red background
 *    - White bold text
 *    - Play-circle SVG icon
 *    - Right arrow SVG icon
 *    - Modern rounded pill shape
 *    - Subtle hover & tactile click animations
 *    - Comfortable clickable area
 *    - Preserves existing destination URL (https://poquosontree.com/video-gallery/)
 *
 * 2. CALL POQUOSON:
 *    - Attractive brand red background
 *    - White phone SVG icon
 *    - Bold text: CALL POQUOSON
 *    - Display phone number: 757-272-2096
 *    - Right arrow SVG icon
 *    - Modern rounded pill shape
 *    - Subtle hover & tactile click animations
 *    - Working tel:7572722096 link
 *
 * 3. RESPONSIVE DESIGN:
 *    - Perfect desktop, laptop, tablet, and mobile presentation
 *    - Zero horizontal overflow
 *    - Easy tap targets for touchscreens
 */

/* ==========================================================================
   1. SHARED RED BUTTON FOUNDATION
   ========================================================================== */

.poquoson-red-btn,
a.poquoson-red-btn.wp-element-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #d10014 !important;
    background: linear-gradient(135deg, #d80016 0%, #b80011 100%) !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    border-radius: 50px !important;
    border: 2px solid #d10014 !important;
    box-shadow: 0 4px 18px rgba(209, 0, 20, 0.35) !important;
    text-decoration: none !important;
    font-style: normal !important;
    text-transform: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.25s ease,
                border-color 0.25s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Subtle Hover Animation */
.poquoson-red-btn:hover,
.poquoson-red-btn:focus,
a.poquoson-red-btn.wp-element-button:hover,
a.poquoson-red-btn.wp-element-button:focus {
    background: #a80010 !important;
    background: linear-gradient(135deg, #be0013 0%, #9e000e 100%) !important;
    border-color: #a80010 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 26px rgba(209, 0, 20, 0.46), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    text-decoration: none !important;
}

/* Active / Pressed State */
.poquoson-red-btn:active,
a.poquoson-red-btn.wp-element-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 3px 10px rgba(209, 0, 20, 0.3) !important;
}

/* Shared Icon Wrappers & Animations */
.poquoson-red-btn .poquoson-btn-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: #ffffff !important;
    line-height: 1 !important;
}

.poquoson-red-btn .poquoson-btn-svg,
.poquoson-red-btn svg {
    display: block !important;
    color: #ffffff !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Right Arrow Shift on Hover */
.poquoson-red-btn:hover .poquoson-icon-arrow svg,
.poquoson-red-btn:focus .poquoson-icon-arrow svg {
    transform: translateX(4px) !important;
}

/* Play Icon Pulse on Hover */
.poquoson-red-btn:hover .poquoson-icon-play svg,
.poquoson-red-btn:focus .poquoson-icon-play svg {
    transform: scale(1.1) !important;
}

/* Phone Icon Tilt on Hover */
.poquoson-red-btn:hover .poquoson-icon-phone svg,
.poquoson-red-btn:focus .poquoson-icon-phone svg {
    transform: rotate(-10deg) scale(1.1) !important;
}

/* ==========================================================================
   2. VIEW MORE VIDEOS BUTTON SPECIFICS
   ========================================================================== */

.poquoson-btn-video,
a.poquoson-btn-video.wp-element-button {
    padding: 14px 34px !important;
    min-height: 54px !important;
    gap: 12px !important;
    margin: 0 auto !important;
    max-width: 90% !important;
}

.poquoson-btn-video .poquoson-btn-label {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

/* Reset any nested strong/em */
.poquoson-btn-video strong,
.poquoson-btn-video em {
    font-style: normal !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* Parent container alignment */
.wp-block-button:has(.poquoson-btn-video) {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* ==========================================================================
   3. CALL POQUOSON BUTTON SPECIFICS
   ========================================================================== */

.poquoson-btn-call,
a.poquoson-btn-call.wp-element-button {
    padding: 12px 30px !important;
    min-height: 58px !important;
    gap: 14px !important;
    width: auto !important;
    max-width: 100% !important;
}

/* Stacked Text Block: Title + Phone Number */
.poquoson-btn-call .poquoson-btn-text-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    line-height: 1.22 !important;
}

.poquoson-btn-call .poquoson-btn-title {
    font-size: 14.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

.poquoson-btn-call .poquoson-btn-number {
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    line-height: 1.2 !important;
}

/* Clean container overrides for the Call Poquoson button inside media-text content */
.wp-block-button.has-custom-width.wp-block-button__width-100:has(.poquoson-btn-call),
.wp-block-buttons:has(.poquoson-btn-call) {
    margin-top: 20px !important;
    margin-bottom: 8px !important;
    width: auto !important;
    display: flex !important;
    justify-content: flex-start !important;
}

/* Reset outline class border interference */
.wp-block-button.is-style-outline .poquoson-red-btn,
.wp-block-button.is-style-outline--7 .poquoson-red-btn,
.wp-block-button.is-style-outline--6 .poquoson-red-btn,
.wp-block-button.is-style-outline--10 .poquoson-red-btn {
    border: 2px solid #d10014 !important;
}

/* ==========================================================================
   4. RESPONSIVE BREAKPOINT ADAPTATIONS
   ========================================================================== */

/* Mobile & Small Tablets */
@media screen and (max-width: 781px) {
    .poquoson-btn-video,
    a.poquoson-btn-video.wp-element-button {
        padding: 12px 24px !important;
        min-height: 50px !important;
        gap: 10px !important;
        max-width: 100% !important;
    }

    .poquoson-btn-video .poquoson-btn-label {
        font-size: 15px !important;
        letter-spacing: 0.3px !important;
    }

    .poquoson-btn-call,
    a.poquoson-btn-call.wp-element-button {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 20px !important;
        min-height: 56px !important;
        justify-content: center !important;
        gap: 12px !important;
    }

    .poquoson-btn-call .poquoson-btn-text-block {
        align-items: center !important;
        text-align: center !important;
    }

    .wp-block-button.has-custom-width.wp-block-button__width-100:has(.poquoson-btn-call),
    .wp-block-buttons:has(.poquoson-btn-call) {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Extra small mobile screens (iPhone SE, 360px-375px) */
@media screen and (max-width: 380px) {
    .poquoson-btn-video,
    a.poquoson-btn-video.wp-element-button {
        padding: 11px 18px !important;
        min-height: 48px !important;
        gap: 8px !important;
    }

    .poquoson-btn-video .poquoson-btn-label {
        font-size: 14px !important;
    }

    .poquoson-btn-call,
    a.poquoson-btn-call.wp-element-button {
        padding: 11px 16px !important;
        min-height: 52px !important;
        gap: 10px !important;
    }

    .poquoson-btn-call .poquoson-btn-title {
        font-size: 13.5px !important;
    }

    .poquoson-btn-call .poquoson-btn-number {
        font-size: 13px !important;
    }
}