/* ----------------------------------------------------
 * Custom Theme Styles and Animations for agence-marketing-digital
 * ---------------------------------------------------- */

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: oklch(98.5% 0.004 250);
}
::-webkit-scrollbar-thumb {
    background: oklch(85% 0.008 250);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: oklch(75% 0.01 250);
}

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
    letter-spacing: -0.02em;
}

/* When logged in, the WordPress admin bar is fixed at the top (32px, or 46px
   on small screens). Offset the sticky header so it pins BELOW the admin bar
   instead of being clipped behind it. Visitors never see the admin bar, so
   this only applies via the body.admin-bar class WordPress adds. */
.admin-bar header.sticky {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar header.sticky {
        top: 46px;
    }
}

.page {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Active Nav Links styling */
.nav-link {
    position: relative;
    color: #475569;
    transition: color 0.15s;
}
.nav-link:hover {
    color: #0f172a;
}
.nav-link.active {
    color: #0f172a;
    font-weight: 600;
}
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2563eb;
}

/* Search Focus Ring */
.search-focus:focus {
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
    border-color: #2563eb;
    outline: none;
}

/* Accordion FAQ Toggle */
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.faq-content.open {
    max-height: 500px;
}

/* Element Labels & Tags */
.rank-badge {
    font-size: 11px;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.tag-pill {
    font-size: 12px;
    letter-spacing: 0.01em;
}

.section-label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Star burst CSS animation */
.star-burst-container {
    position: absolute;
    pointer-events: none;
    z-index: 1100;
}

.star-burst {
    position: absolute;
    width: 24px;
    height: 24px;
    background:
        linear-gradient(90deg, transparent 46%, #3b82f6 46% 54%, transparent 54%),
        linear-gradient(0deg,  transparent 46%, #3b82f6 46% 54%, transparent 54%);
    animation: star-burst 420ms ease-out forwards;
}

@keyframes star-burst {
    0% {
        transform: scale(0.2) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(2.5) rotate(45deg);
        opacity: 0;
    }
}

/* Custom Select styling & animations */
.custom-select-options {
    animation: customSelectFade 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes customSelectFade {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.custom-select-trigger.open .chevron-icon {
    transform: rotate(180deg);
}
.chevron-icon {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-select-trigger:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Motion system style requirements */
.motion-enhanced .nav-link {
    will-change: color;
}
.hero-focus-word,
.hero-location-word,
.challenge-focus-word,
.challenge-time-word,
.approach-focus-word,
.approach-action-word {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.hero-focus-word {
    color: #2563eb;
}
.challenge-focus-word {
    color: #dc2626;
}
.challenge-time-word {
    color: #0f172a;
}
.approach-focus-word {
    color: #2563eb;
}
.approach-action-word {
    color: #0f172a;
}
.hero-location-word::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.02em;
    height: 0.12em;
    border-radius: 999px;
    background: #f59e0b;
    transform: scaleX(var(--hero-location-scale, 0));
    transform-origin: left center;
    z-index: -1;
}
.challenge-time-word::after {
    content: "";
    position: absolute;
    left: -0.04em;
    right: -0.04em;
    bottom: 0.04em;
    height: 0.16em;
    border-radius: 999px;
    background: rgba(220, 38, 38, 0.18);
    transform: scaleX(var(--challenge-time-scale, 0));
    transform-origin: left center;
    z-index: -1;
}
.approach-action-word::after {
    content: "";
    position: absolute;
    left: -0.04em;
    right: -0.04em;
    bottom: 0.04em;
    height: 0.16em;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.16);
    transform: scaleX(var(--approach-action-scale, 0));
    transform-origin: left center;
    z-index: -1;
}

/* Command Palette dialog overrides (avoid native browser outlines) */
dialog::backdrop {
    background-color: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
}
dialog:focus-visible {
    outline: none;
}

/* Exit-intent popup: the browser's own dialog:modal centering (inset-block:0
   + margin:auto) is left alone — it already centers correctly, and GSAP's
   open/close animation is applied to #exit-intent-inner (a wrapper one level
   in), never to the <dialog> itself, for the same reason: transforming the
   dialog element directly was found to break its native top-layer centering
   (confirmed in isolation — it rendered far off-screen, offset by roughly
   however far the page had scrolled). What's still needed is a height cap:
   on a short viewport the dialog's natural content height can exceed what's
   visible, and this dialog's own `overflow-hidden` (needed to clip the
   rounded corners against the gradient header) would silently crop whatever
   doesn't fit instead of centering something shorter. dvh (with a vh
   fallback for older browsers) caps it to what's actually visible, and the
   body section (#ei-body) scrolls internally if content still doesn't fit. */
#exit-intent-modal {
    max-height: 90vh;
    max-height: 90dvh;
}
#ei-body {
    max-height: calc(90vh - 96px);
    max-height: calc(90dvh - 96px);
    overflow-y: auto;
}

/* ----------------------------------------------------
 * Site Footer Centered & Self-Balancing Layout Rules
 * ---------------------------------------------------- */
.site-footer-main {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
    .site-footer-main {
        flex-direction: row;
        gap: 4rem;
    }
}

.site-footer-brand {
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .site-footer-brand {
        width: 18rem;
    }
}

.site-footer-nav {
    flex: 1 1 0%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    width: 100%;
}
@media (min-width: 768px) {
    .site-footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 3.5rem;
    }
}

.site-footer-bottom {
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
}

/* ----------------------------------------------------
 * Card Hover Effects (Matches Blog Page Article Cards)
 * ---------------------------------------------------- */
.card-hover {
    transition: box-shadow 0.2s ease, transform 0.18s ease, border-color 0.2s ease !important;
}
.card-hover:hover {
    box-shadow: 0 8px 28px rgba(16,20,24,0.13), 0 0 0 1px rgba(16,20,24,0.09) !important;
    transform: translateY(-3px) !important;
}
.card-hover .h-48 img,
.card-hover .blg-card-img img {
    transition: transform 0.35s ease !important;
}
.card-hover:hover .h-48 img,
.card-hover:hover .blg-card-img img {
    transform: scale(1.05) !important;
}