/*
 * WP AI-tify — Main Stylesheet
 * CSS variables are injected inline by PHP (helpers.php).
 * This file: reset, base typography, layout, header, footer, utilities.
 */

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--wpaitify-font);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--wpaitify-text);
    background-color: var(--wpaitify-bg);
    -webkit-font-smoothing: antialiased;
}

img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--wpaitify-primary); text-decoration: none; transition: color var(--wpaitify-transition); }
a:hover { color: var(--wpaitify-primary-dark); }
a:focus-visible { outline: 2px solid var(--wpaitify-primary); outline-offset: 2px; border-radius: 2px; }

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--wpaitify-font);
    font-weight: 700;
    line-height: 1.25;
    color: var(--wpaitify-secondary);
    margin-bottom: 0.75em;
}
h1 { font-size: clamp(1.875rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p { margin-bottom: 1.25em; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.5em; margin-bottom: 1.25em; }
li { margin-bottom: 0.25em; }
blockquote {
    border-left: 4px solid var(--wpaitify-primary);
    padding: 16px 24px;
    margin: 24px 0;
    background: #f0f7ff;
    border-radius: 0 var(--wpaitify-radius) var(--wpaitify-radius) 0;
    font-style: italic;
}
code {
    font-family: 'Courier New', monospace;
    background: #f1f1f1;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.875em;
}
pre { background: #1a1a2e; color: #e2e8f0; padding: 24px; border-radius: var(--wpaitify-radius); overflow-x: auto; margin-bottom: 1.5em; }
pre code { background: none; padding: 0; color: inherit; }
hr { border: none; border-top: 1px solid var(--wpaitify-border); margin: 40px 0; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--wpaitify-border); }
th { font-weight: 600; background: var(--wpaitify-bg); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wpaitify-skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    background: var(--wpaitify-secondary);
    color: #fff;
    padding: 8px 16px;
    border-radius: var(--wpaitify-radius);
    z-index: 9999;
    transition: top 0.2s;
}
.wpaitify-skip-link:focus { top: 8px; }

.wpaitify-page { display: flex; flex-direction: column; min-height: 100vh; }
.wpaitify-main { flex: 1; padding: 48px 20px; }

/* AI Canvas pages: zero padding so sections can go full-width edge-to-edge */
.wpaitify-canvas-main { padding: 0; }

.wpaitify-container {
    max-width: var(--wpaitify-max-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.wpaitify-header {
    position: relative;
    width: 100%;
    background-color: var(--wpaitify-header-bg, #ffffff);
    border-bottom: 1px solid var(--wpaitify-border);
    z-index: 1000;
    transition: box-shadow var(--wpaitify-transition), background var(--wpaitify-transition);
}

.wpaitify-header--sticky { position: sticky; top: 0; }
.wpaitify-header--sticky.is-scrolled { box-shadow: var(--wpaitify-shadow); }

.wpaitify-header--transparent {
    background-color: transparent;
    border-bottom-color: transparent;
    position: absolute;
    width: 100%;
}

.wpaitify-header--minimal { border-bottom-color: transparent; }

.wpaitify-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: var(--wpaitify-header-height, 70px);
}

/* Logo — always on the left, never shrinks */
.wpaitify-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.wpaitify-logo__img { height: auto; max-height: 40px; width: auto; }
.wpaitify-logo__text {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--wpaitify-secondary);
    white-space: nowrap;
}
.wpaitify-header--transparent .wpaitify-logo__text { color: #ffffff; }

/* Nav — takes remaining space between logo and actions */
.wpaitify-nav { flex: 1; display: flex; justify-content: center; }
.wpaitify-nav__menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.wpaitify-nav__menu a {
    display: block;
    padding: 8px 14px;
    font-size: var(--wpaitify-nav-size, 15px);
    font-weight: 500;
    color: var(--wpaitify-header-text, var(--wpaitify-secondary));
    border-radius: var(--wpaitify-radius);
    transition: background var(--wpaitify-transition), color var(--wpaitify-transition);
}
.wpaitify-nav__menu a:hover,
.wpaitify-nav__menu .current-menu-item > a {
    background: rgba(24,142,245,0.08);
    color: var(--wpaitify-primary);
}

/* Dropdown */
.wpaitify-nav__menu .menu-item-has-children { position: relative; }
.wpaitify-nav__menu .sub-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--wpaitify-border);
    border-radius: var(--wpaitify-radius);
    box-shadow: var(--wpaitify-shadow-lg);
    list-style: none;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--wpaitify-transition), transform var(--wpaitify-transition), visibility var(--wpaitify-transition);
    z-index: 100;
}
.wpaitify-nav__menu .menu-item-has-children:hover > .sub-menu,
.wpaitify-nav__menu .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.wpaitify-nav__menu .sub-menu a { padding: 8px 12px; font-size: 0.9rem; color: var(--wpaitify-text); }
.wpaitify-nav__menu .sub-menu a:hover { background: var(--wpaitify-bg); color: var(--wpaitify-primary); }

/* Header actions — CTA + hamburger, always on the right */
.wpaitify-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

/* CTA button (base styles in components.css) */
.wpaitify-header-cta { white-space: nowrap; }

/* Hamburger */
.wpaitify-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--wpaitify-radius);
    transition: background var(--wpaitify-transition);
}
.wpaitify-hamburger:hover { background: var(--wpaitify-bg); }
.wpaitify-hamburger__bar {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--wpaitify-header-text, var(--wpaitify-secondary));
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}
.wpaitify-hamburger[aria-expanded="true"] .wpaitify-hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wpaitify-hamburger[aria-expanded="true"] .wpaitify-hamburger__bar:nth-child(2) { opacity: 0; }
.wpaitify-hamburger[aria-expanded="true"] .wpaitify-hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.wpaitify-footer {
    background-color: var(--wpaitify-footer-bg, #2b3742);
    color: var(--wpaitify-footer-text, #ffffff);
    margin-top: auto;
}
.wpaitify-footer__widgets { padding: 64px 0 48px; }
.wpaitify-footer__grid {
    display: grid;
    grid-template-columns: var(--wpaitify-footer-grid, 1fr 1fr 1fr);
    gap: 40px;
}
.wpaitify-footer-widget { }
.wpaitify-footer-widget-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wpaitify-footer-text, #ffffff);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--wpaitify-primary);
    display: inline-block;
}
.wpaitify-footer-widget a { color: rgba(255,255,255,0.75); }
.wpaitify-footer-widget a:hover { color: #ffffff; }
.wpaitify-footer-widget ul { list-style: none; padding: 0; }
.wpaitify-footer-widget ul li { padding: 4px 0; }

.wpaitify-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 0;
}
.wpaitify-footer__bottom-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.wpaitify-footer__copyright {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

/* Social icons */
.wpaitify-social-icons { display: flex; gap: 8px; }
.wpaitify-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
    transition: background var(--wpaitify-transition), color var(--wpaitify-transition);
}
.wpaitify-social-icon:hover { background: var(--wpaitify-primary); color: #ffffff; }

/* ── Blog layout ─────────────────────────────────────────────────────────── */
.wpaitify-blog-wrap { display: grid; grid-template-columns: 1fr; gap: 48px; }
.wpaitify-blog-sidebar-right .wpaitify-blog-wrap { grid-template-columns: 1fr 300px; }
.wpaitify-blog-no-sidebar .wpaitify-blog-wrap { max-width: 760px; margin-left: auto; margin-right: auto; }

.wpaitify-post-card {
    background: var(--wpaitify-surface);
    border-radius: var(--wpaitify-radius);
    overflow: hidden;
    box-shadow: var(--wpaitify-shadow);
    transition: transform var(--wpaitify-transition), box-shadow var(--wpaitify-transition);
    margin-bottom: 32px;
}
.wpaitify-post-card:hover { transform: translateY(-2px); box-shadow: var(--wpaitify-shadow-lg); }
.wpaitify-post-card__thumb img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.wpaitify-post-card__body { padding: 24px; }
.wpaitify-post-card__cats { margin-bottom: 8px; }
.wpaitify-post-card__cats a { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wpaitify-primary); }
.wpaitify-post-card__title { font-size: 1.25rem; margin-bottom: 8px; }
.wpaitify-post-card__title a { color: var(--wpaitify-secondary); }
.wpaitify-post-card__title a:hover { color: var(--wpaitify-primary); }
.wpaitify-post-card__meta { display: flex; gap: 16px; font-size: 0.875rem; color: var(--wpaitify-text-muted); margin-bottom: 12px; }
.wpaitify-post-card__excerpt { color: var(--wpaitify-text-muted); font-size: 0.95rem; margin-bottom: 16px; }
.wpaitify-post-card__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9rem; color: var(--wpaitify-primary); }
.wpaitify-post-card__link:hover { gap: 10px; }

/* Sidebar */
.wpaitify-sidebar { }
.wpaitify-widget { margin-bottom: 32px; }
.wpaitify-widget-title { font-size: 1rem; font-weight: 700; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--wpaitify-primary); }

/* Pagination */
.wpaitify-pagination { margin-top: 40px; }
.wpaitify-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.wpaitify-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--wpaitify-border);
    border-radius: var(--wpaitify-radius);
    font-size: 0.9rem;
    color: var(--wpaitify-text);
    transition: all var(--wpaitify-transition);
}
.wpaitify-pagination .page-numbers:hover,
.wpaitify-pagination .page-numbers.current {
    background: var(--wpaitify-primary);
    border-color: var(--wpaitify-primary);
    color: #ffffff;
}

/* Breadcrumbs */
.wpaitify-breadcrumbs { margin-bottom: 24px; }
.wpaitify-breadcrumbs__list { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; font-size: 0.875rem; color: var(--wpaitify-text-muted); }
.wpaitify-breadcrumbs__list a { color: var(--wpaitify-text-muted); }
.wpaitify-breadcrumbs__list a:hover { color: var(--wpaitify-primary); }
.wpaitify-breadcrumbs__sep { color: var(--wpaitify-border); }

/* Archive/search header */
.wpaitify-archive-header { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--wpaitify-border); }
.wpaitify-archive-title { font-size: 1.75rem; }
.wpaitify-archive-desc { color: var(--wpaitify-text-muted); margin-top: 8px; }

/* Single post */
.wpaitify-single-post { background: var(--wpaitify-surface); border-radius: var(--wpaitify-radius); padding: 40px; box-shadow: var(--wpaitify-shadow); }
.wpaitify-post-header { margin-bottom: 24px; }
.wpaitify-post-cats { margin-bottom: 12px; }
.wpaitify-post-cats a { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; color: var(--wpaitify-primary); }
.wpaitify-post-title { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: 12px; }
.wpaitify-post-meta { display: flex; gap: 16px; font-size: 0.875rem; color: var(--wpaitify-text-muted); }
.wpaitify-post-thumbnail { margin-bottom: 32px; border-radius: var(--wpaitify-radius); overflow: hidden; }
.wpaitify-post-thumbnail img { width: 100%; aspect-ratio: 16/7; object-fit: cover; }
.wpaitify-post-content { line-height: 1.8; }
.wpaitify-post-content img { border-radius: var(--wpaitify-radius); margin: 24px 0; }
.wpaitify-post-footer { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--wpaitify-border); }
.wpaitify-tag-label { font-weight: 600; }
.wpaitify-post-footer a { margin: 0 4px; }

/* ── Utility classes ─────────────────────────────────────────────────────── */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.wpaitify-section { padding: 80px 20px; }
.wpaitify-text-center { text-align: center; }
.wpaitify-mt-0 { margin-top: 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .wpaitify-blog-sidebar-right .wpaitify-blog-wrap { grid-template-columns: 1fr 260px; }
    .wpaitify-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .wpaitify-hamburger { display: flex; }

    /* Keep header inner as a single row: logo | [spacer] | cta | burger */
    .wpaitify-header__inner { flex-wrap: nowrap; }

    /* Nav: hidden by default on mobile — completely out of the header flex row */
    .wpaitify-nav {
        display: none;
        position: fixed;
        top: var(--wpaitify-header-height, 70px);
        left: 0;
        right: 0;
        bottom: 0;
        background: #ffffff;
        padding: 24px 20px;
        overflow-y: auto;
        z-index: 999;
        flex-direction: column;
        align-items: flex-start;
    }
    /* When hamburger opens the menu, show it */
    .wpaitify-nav.is-open {
        display: flex;
    }
    .wpaitify-nav__menu { flex-direction: column; align-items: flex-start; width: 100%; gap: 0; }
    .wpaitify-nav__menu > li { width: 100%; border-bottom: 1px solid var(--wpaitify-border); }
    .wpaitify-nav__menu a { padding: 14px 0; display: block; }
    .wpaitify-nav__menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: var(--wpaitify-bg); padding-left: 16px; display: none; }
    .wpaitify-nav__menu .sub-menu.is-open { display: block; }

    .wpaitify-blog-sidebar-right .wpaitify-blog-wrap { grid-template-columns: 1fr; }
    .wpaitify-footer__grid { grid-template-columns: 1fr; }
    .wpaitify-footer__bottom-inner { flex-direction: column; text-align: center; }
    .wpaitify-section { padding: 60px 20px; }
    .wpaitify-single-post { padding: 24px; }
}

@media (max-width: 480px) {
    .wpaitify-header__inner { gap: 12px; }
    /* CTA stays visible on mobile — just tighten its padding */
    .wpaitify-header-cta { padding: 8px 14px; font-size: 0.875rem; }
}