/*
 * Loppe Theme - WordPress-specific styles & animation system.
 * Loaded after loppe-tailwind.css. Brand colors come from CSS custom
 * properties printed by the Theme Options panel (see inc/enqueue.php).
 */

/* ------------------------------------------------------------------
 * 1. Scroll-triggered animation system (replicates Framer Motion)
 * ------------------------------------------------------------------
 * Elements carry data-loppe-animate="fade-up|fade-down|fade-left|
 * fade-right|scale|zoom" plus optional data-loppe-delay (s) and
 * data-loppe-duration (s). assets/js/main.js adds .is-inview when the
 * element enters the viewport (IntersectionObserver, once).
 */
[data-loppe-animate] {
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    transition-duration: 0.6s;
    will-change: opacity, transform;
}

[data-loppe-animate="fade-up"]    { transform: translateY(20px); }
[data-loppe-animate="fade-up-lg"] { transform: translateY(30px); }
[data-loppe-animate="fade-down"]  { transform: translateY(-4px); }
[data-loppe-animate="fade-left"]  { transform: translateX(-30px); }
[data-loppe-animate="fade-left-sm"]  { transform: translateX(-20px); }
[data-loppe-animate="fade-right"] { transform: translateX(30px); }
[data-loppe-animate="fade-right-sm"] { transform: translateX(20px); }
[data-loppe-animate="scale"]      { transform: scale(0.95); }
[data-loppe-animate="zoom"]       { transform: scale(0.8); }

[data-loppe-animate].is-inview {
    opacity: 1;
    transform: none;
}

/* Editors (Gutenberg canvas / Elementor preview) must always show content. */
.block-editor-block-list__layout [data-loppe-animate],
.elementor-editor-active [data-loppe-animate] {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    [data-loppe-animate] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ------------------------------------------------------------------
 * 2. Header behaviour (shrink on scroll) & mobile menu
 * ------------------------------------------------------------------ */
.loppe-header {
    transition: all 0.3s ease;
}

.loppe-mobile-menu {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.loppe-mobile-menu.is-open {
    opacity: 1;
}

/* Desktop inline nav fade (mirrors AnimatePresence fade y:-4) */
.loppe-desktop-nav {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.loppe-header.is-shrunk .loppe-desktop-nav {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    position: absolute;
    visibility: hidden;
}

/* Hamburger that appears on desktop only when the header is shrunk */
.loppe-desktop-burger { display: none; }
@media (min-width: 768px) {
    .loppe-header.is-shrunk .loppe-desktop-burger { display: flex; }
}

/* ------------------------------------------------------------------
 * 3. Announcement bar collapse
 * ------------------------------------------------------------------ */
.loppe-announcement {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 200px;
}

.loppe-announcement.is-dismissed {
    max-height: 0;
    opacity: 0;
}

/* ------------------------------------------------------------------
 * 4. Back-to-top button
 * ------------------------------------------------------------------ */
.loppe-backtotop {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.loppe-backtotop.is-visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* ------------------------------------------------------------------
 * 5. FAQ accordion (vanilla replacement for Radix UI)
 * ------------------------------------------------------------------ */
.loppe-accordion__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.2s ease-out;
}

.loppe-accordion__item.is-open .loppe-accordion__panel {
    max-height: var(--loppe-panel-height, 600px);
}

.loppe-accordion__trigger {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    background: none;
    border: 0;
}

.loppe-accordion__chevron {
    transition: transform 0.2s ease;
    flex-shrink: 0;
    color: hsl(var(--muted-foreground));
}

.loppe-accordion__item.is-open .loppe-accordion__chevron {
    transform: rotate(180deg);
}

/* FAQ tab panels */
.loppe-faq-panel { display: none; }
.loppe-faq-panel.is-active { display: block; }

/* ------------------------------------------------------------------
 * 6. Forms (success/busy states mirror the React implementation)
 * ------------------------------------------------------------------ */
.loppe-form__success { display: none; }
.loppe-form.is-success .loppe-form__success { display: block; }
.loppe-form.is-success .loppe-form__fields { display: none; }
.loppe-form .loppe-hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------------
 * 7. WordPress integration
 * ------------------------------------------------------------------ */
/* Fixed header vs. admin bar */
body.admin-bar .loppe-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .loppe-header { top: 46px; }
}

/* Menus render via wp_nav_menu: neutralise default list styling */
.loppe-nav-list,
.loppe-footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Core alignment/caption classes so Gutenberg content behaves */
.alignleft  { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    text-align: center;
    margin-top: 0.5rem;
}
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: hsl(var(--background));
    clip: auto !important;
    clip-path: none;
    color: hsl(var(--foreground));
    display: block;
    font-size: 1rem;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Default page content (page.php fallback for plain Gutenberg content) */
.loppe-entry-content > * + * { margin-top: 1.25em; }
.loppe-entry-content h2 { font-size: 1.5rem; font-weight: 600; color: var(--loppe-olive-dark); }
.loppe-entry-content h3 { font-size: 1.25rem; font-weight: 600; color: var(--loppe-olive-dark); }
.loppe-entry-content a  { color: var(--loppe-danish-red); text-decoration: underline; text-underline-offset: 2px; }
.loppe-entry-content ul { list-style: disc; padding-left: 1.5rem; }
.loppe-entry-content ol { list-style: decimal; padding-left: 1.5rem; }

/* Footer widget area: keep widgets readable on the dark footer */
.loppe-footer-widgets .widget { margin-bottom: 2rem; }
.loppe-footer-widgets .widget-title {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--loppe-mustard);
    margin-bottom: 1rem;
}
.loppe-footer-widgets a { color: rgb(var(--loppe-soft-white-rgb) / 0.7); }
.loppe-footer-widgets a:hover { color: var(--loppe-soft-white); }

/* Demo banner (mirrors the fixed mustard frame on the reference site) */
.loppe-demo-frame {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
}

/* Logged in: keep the demo bar visible below the WP admin bar instead
   of hidden behind it (admin bar is 32/46px tall, z-index 99999). */
body.admin-bar .loppe-demo-frame { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .loppe-demo-frame { top: 46px; }
}