/**
 * CookieBaner Theme – Custom Styles
 *
 * Supplements Tailwind CSS utilities with animations,
 * component styles, and WP-specific overrides.
 *
 * @package cookiebaner
 * @since   1.0.0
 */

/* ─────────────────────────────────────────────
 * Base
 * ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─────────────────────────────────────────────
 * Grain texture overlay
 * ───────────────────────────────────────────── */
.grain { position: relative; }
.grain::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

/* ─────────────────────────────────────────────
 * Keyframe Animations
 * ───────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes floatCookie {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(3deg); }
}

.animate-fade-up   { animation: fadeUp .7s cubic-bezier(.22,1,.36,1) both; }
.animate-fade-in   { animation: fadeIn .6s ease both; }
.float-cookie      { animation: floatCookie 4s ease-in-out infinite; }

.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-400 { animation-delay: .4s; }

/* ─────────────────────────────────────────────
 * Pricing Cards
 * ───────────────────────────────────────────── */
.pricing-card {
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.pricing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px -12px rgba(0,0,0,.15);
}

/* ─────────────────────────────────────────────
 * FAQ Accordion
 * ───────────────────────────────────────────── */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s cubic-bezier(.22,1,.36,1), padding .35s ease;
}
.faq-item.active .faq-answer { max-height: 500px; }
.faq-item.active .faq-chevron { transform: rotate(180deg); }
.faq-chevron { transition: transform .3s ease; }

/* ─────────────────────────────────────────────
 * Mobile Navigation
 * ───────────────────────────────────────────── */
.mobile-nav {
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.mobile-nav.open { transform: translateX(0); }

/* ─────────────────────────────────────────────
 * Comparison Bars (Landing page)
 * ───────────────────────────────────────────── */
.bar-animate {
    transition: width 1.2s cubic-bezier(.22,1,.36,1);
    width: 0;
}
.bar-animate.visible { width: var(--bar-width); }

/* ─────────────────────────────────────────────
 * Blog & Content Typography
 * ───────────────────────────────────────────── */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    margin-top: 2em;
    margin-bottom: 0.75em;
}
.entry-content h1 { font-size: 2.25rem; }
.entry-content h2 { font-size: 1.875rem; }
.entry-content h3 { font-size: 1.5rem; }
.entry-content h4 { font-size: 1.25rem; }

.entry-content p {
    margin-bottom: 1.25em;
    line-height: 1.75;
    color: #334155;
}
.entry-content a {
    color: #16a34a;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.entry-content a:hover { color: #1863dc; }

.entry-content ul,
.entry-content ol {
    margin-bottom: 1.25em;
    padding-left: 1.5em;
}
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: 0.5em; line-height: 1.75; color: #1863dc; }

.entry-content blockquote {
    border-left: 4px solid #1863dc;
    padding: 1rem 1.5rem;
    margin: 1.5em 0;
    background: #f0fdf4;
    color: #1863dc;
    font-style: italic;
}

.entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    margin: 1.5em 0;
}

.entry-content pre,
.entry-content code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
}
.entry-content pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 1.25rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    margin: 1.5em 0;
}
.entry-content code {
    background: #f1f5f9;
    color: #0f172a;
    padding: 0.15em 0.4em;
    border-radius: 0.25rem;
}
.entry-content pre code {
    background: none;
    color: inherit;
    padding: 0;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}
.entry-content th,
.entry-content td {
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    text-align: left;
}
.entry-content th {
    background: #f8fafc;
    font-weight: 600;
    color: #0f172a;
}

/* ─────────────────────────────────────────────
 * WooCommerce Minimal Overrides
 * ───────────────────────────────────────────── */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: #1863dc !important;
    color: #fff !important;
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    padding: 0.75rem 1.5rem !important;
    border: none !important;
    transition: background-color .2s ease !important;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
    background-color: #1863dc !important;
}

.woocommerce-message,
.woocommerce-info {
    border-top-color: #1863dc !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
    color: #1863dc !important;
}

/* ─────────────────────────────────────────────
 * Pagination
 * ───────────────────────────────────────────── */
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    transition: all .2s ease;
}
.pagination .page-numbers:hover { background: #f1f5f9; color: #0f172a; }
.pagination .page-numbers.current {
    background: #1863dc;
    color: #fff;
}

.max-w-4xl {
    max-width: 1440px;
}
.font-light, p , li, ul, ol, body {
    font-weight: 400!important;
}
strong, b {
    font-weight: 600!important;
}