/* ==========================================================================
   Gardening Facebook CTA – Frontend Styles
   CSS custom properties for easy theme customisation.
   ========================================================================== */

:root {
    /* Brand colours */
    --gfcta-fb-blue: #1877F2;
    --gfcta-fb-blue-hover: #0d65d9;
    --gfcta-brand-green: #2e7d32;
    --gfcta-brand-green-hover: #1b5e20;

    /* Surfaces */
    --gfcta-bg: #ffffff;
    --gfcta-bg-subtle: #F9FAFB;
    --gfcta-border: #e2e8e2;
    --gfcta-text: #1a1a1a;
    --gfcta-text-secondary: #3d3d3d;
    --gfcta-text-muted: #6b6b6b;

    /* Popup overlay */
    --gfcta-overlay-bg: rgba(0, 0, 0, 0.55);

    /* Accent border */
    --gfcta-accent-width: 4px;
    --gfcta-accent-color: var(--gfcta-fb-blue);

    /* Radius & spacing */
    --gfcta-radius: 15px;
    --gfcta-radius-btn: 8px;
    --gfcta-spacing-xs: 8px;
    --gfcta-spacing-sm: 12px;
    --gfcta-spacing-md: 20px;
    --gfcta-spacing-lg: 28px;
    --gfcta-spacing-xl: 36px;
}

/* ==========================================================================
   Shared: Facebook Icon (borderless, clean)
   ========================================================================== */

.gfcta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gfcta-fb-blue);
    line-height: 0;
}

/* ==========================================================================
   Shared: Button (no underline in any state)
   ========================================================================== */

.gfcta-btn,
a.gfcta-btn,
a.gfcta-btn:link,
a.gfcta-btn:visited,
a.gfcta-btn:hover,
a.gfcta-btn:focus,
a.gfcta-btn:active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    border: none;
    border-radius: var(--gfcta-radius-btn);
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

a.gfcta-btn--primary,
a.gfcta-btn--primary:link,
a.gfcta-btn--primary:visited,
button.gfcta-btn--primary,
.gfcta-btn--primary {
    background-color: var(--gfcta-fb-blue);
    color: #fff !important;
}

a.gfcta-btn--primary:hover,
a.gfcta-btn--primary:focus-visible,
button.gfcta-btn--primary:hover,
button.gfcta-btn--primary:focus-visible,
.gfcta-btn--primary:hover,
.gfcta-btn--primary:focus-visible {
    background-color: var(--gfcta-fb-blue-hover);
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(24, 119, 242, 0.3);
}

.gfcta-btn--lg {
    padding: 14px 32px;
    font-size: 15px;
}

/* ==========================================================================
   Sidebar CTA
   ========================================================================== */

.gfcta-sidebar {
    position: sticky;
    top: 100px;
    max-width: 320px;
    margin: var(--gfcta-spacing-lg) 0;
}

.gfcta-sidebar__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gfcta-spacing-sm);
    padding: var(--gfcta-spacing-lg) var(--gfcta-spacing-md);
    background: var(--gfcta-bg);
    border: 1px solid var(--gfcta-border);
    border-left: var(--gfcta-accent-width) solid var(--gfcta-accent-color);
    border-radius: var(--gfcta-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    text-align: center;
}

.gfcta-sidebar__text {
    margin: var(--gfcta-spacing-xs) 0 var(--gfcta-spacing-xs);
    font-size: 15px;
    font-weight: 600;
    color: var(--gfcta-text);
    line-height: 1.5;
}

.gfcta-sidebar .gfcta-btn {
    width: 100%;
    margin-top: var(--gfcta-spacing-xs);
}

/* ==========================================================================
   In-Article CTA  —  single-row on desktop: [icon]  [headline]  [button]
   ========================================================================== */

.gfcta-inarticle {
    margin: var(--gfcta-spacing-xl) 0;
    border-radius: var(--gfcta-radius);
    border: 1px solid var(--gfcta-border);
    border-left: var(--gfcta-accent-width) solid var(--gfcta-accent-color);
    background: var(--gfcta-bg-subtle);
}

.gfcta-inarticle__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--gfcta-spacing-md);
    padding: var(--gfcta-spacing-md) var(--gfcta-spacing-lg);
}

.gfcta-inarticle__text,
.gfcta-inarticle .gfcta-inarticle__text {
    display: inline;
    margin: 0 !important;
    padding: 0;
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--gfcta-text);
    line-height: 1;
    border: none;
}

.gfcta-inarticle .gfcta-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* ==========================================================================
   Popup / Modal
   ========================================================================== */

.gfcta-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--gfcta-spacing-md);
    background: var(--gfcta-overlay-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gfcta-popup-overlay.gfcta-popup--visible {
    opacity: 1;
    visibility: visible;
}

.gfcta-popup {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: var(--gfcta-spacing-xl) var(--gfcta-spacing-lg) var(--gfcta-spacing-lg);
    background: var(--gfcta-bg);
    border-left: var(--gfcta-accent-width) solid var(--gfcta-accent-color);
    border-radius: var(--gfcta-radius);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 20px 60px rgba(0, 0, 0, 0.15);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gfcta-spacing-md);
    transform: scale(0.94) translateY(16px);
    transition: transform 0.3s ease;
}

.gfcta-popup-overlay.gfcta-popup--visible .gfcta-popup {
    transform: scale(1) translateY(0);
}

.gfcta-popup__close {
    position: absolute;
    top: var(--gfcta-spacing-sm);
    right: var(--gfcta-spacing-sm);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: var(--gfcta-text-muted);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.gfcta-popup__close:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--gfcta-text);
}

.gfcta-popup__text {
    margin: 0;
    padding: 0 var(--gfcta-spacing-xs);
    font-size: 18px;
    font-weight: 700;
    color: var(--gfcta-text);
    line-height: 1.45;
}

.gfcta-popup .gfcta-btn--primary {
    width: 100%;
}

.gfcta-popup__dismiss {
    background: none;
    border: none;
    font-size: 13px;
    color: var(--gfcta-text-muted);
    cursor: pointer;
    padding: var(--gfcta-spacing-xs) var(--gfcta-spacing-sm);
    margin-top: calc(-1 * var(--gfcta-spacing-xs));
    transition: color 0.15s ease;
    text-decoration: none;
}

.gfcta-popup__dismiss:hover {
    color: var(--gfcta-text);
    text-decoration: none;
}

/* ==========================================================================
   Responsive  —  stack vertically on mobile
   ========================================================================== */

@media (max-width: 600px) {
    .gfcta-inarticle {
        margin: var(--gfcta-spacing-lg) 0;
    }

    .gfcta-inarticle__inner {
        flex-direction: column;
        text-align: center;
        padding: var(--gfcta-spacing-md);
        gap: var(--gfcta-spacing-sm);
    }

    .gfcta-inarticle .gfcta-btn {
        align-self: center;
    }

    .gfcta-popup {
        padding: var(--gfcta-spacing-lg) var(--gfcta-spacing-md) var(--gfcta-spacing-md);
    }

    .gfcta-sidebar {
        position: static;
        max-width: 100%;
    }

    .gfcta-sidebar__inner {
        padding: var(--gfcta-spacing-md);
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .gfcta-popup-overlay,
    .gfcta-popup,
    .gfcta-btn {
        transition: none;
    }
}