/* site.css — Site Builder front-end: theme tokens, responsive nav + hamburger,
   and content block styles. Loaded AFTER marketing.css so it wins on shared
   selectors. Theme CSS variables are injected inline by marketing_header.php
   (see includes/site_theme.php). */

/* ---------- theme token wiring ---------- */
.marketing-page { background: var(--site-bg); color: var(--site-text); font-family: var(--font-body); }
.marketing-page h1, .marketing-page h2, .marketing-page h3,
.marketing-page h4, .marketing-page h5, .marketing-page h6 { font-family: var(--font-heading); }
.marketing-page h1, .marketing-page h2, .marketing-page h3 { color: var(--site-heading); }
.mkt-container { max-width: var(--content-width, 1080px); }
.mkt-btn { border-radius: var(--btn-radius, 6px); }

/* Sections with dark/colored backgrounds keep light text (must follow the rules above). */
.mkt-hero, .mkt-hero h1, .mkt-hero h2, .mkt-hero p,
.blk-cta, .blk-cta h2, .blk-cta p { color: #fff; }

/* ---------- header: logo + responsive nav + hamburger ---------- */
.mkt-header-inner { position: relative; }
.mkt-nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 40px; padding: 8px; background: transparent; border: 0;
    cursor: pointer; border-radius: 8px;
}
.mkt-nav-toggle span { display: block; height: 2px; width: 100%; background: var(--site-heading); border-radius: 2px; transition: transform .2s, opacity .2s; }
.mkt-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mkt-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mkt-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mkt-nav .mkt-nav-link { color: var(--site-muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.mkt-nav .mkt-nav-link:hover { color: var(--brand-primary); }

@media (max-width: 860px) {
    .mkt-nav-toggle { display: flex; }
    .mkt-nav {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--site-bg); border-top: 1px solid #eee;
        padding: 0.25rem 1.25rem 1rem; display: none;
        box-shadow: 0 10px 20px rgba(0,0,0,0.10);
    }
    .mkt-nav.is-open { display: flex; }
    .mkt-nav .mkt-nav-link { padding: 0.75rem 0; border-bottom: 1px solid #f1f1f1; font-size: 1rem; }
    .mkt-nav .mkt-btn { margin-top: 0.75rem; text-align: center; }
}

/* dark header option */
.header-dark .mkt-header { background: var(--site-heading); border-bottom-color: rgba(255,255,255,0.12); }
.header-dark .mkt-logo { color: #fff; }
.header-dark .mkt-nav .mkt-nav-link { color: #e2e8f0; }
.header-dark .mkt-nav .mkt-nav-link:hover { color: #fff; }
.header-dark .mkt-nav-toggle span { background: #fff; }
@media (max-width: 860px) { .header-dark .mkt-nav { background: var(--site-heading); border-top-color: rgba(255,255,255,0.12); } }

/* ---------- preview + templates ---------- */
.mkt-preview-bar { background: #fef3c7; color: #92400e; text-align: center; padding: 0.6rem 1rem; font-size: 0.9rem; }
.tmpl-full-width .blk-section > .mkt-container,
.tmpl-full-width .mkt-hero > .mkt-container { max-width: 1240px; }

/* ---------- blocks ---------- */
.blk-section-heading { text-align: center; font-size: 1.9rem; margin: 0 0 1.5rem; }

/* hero variants */
.blk-hero--center { text-align: center; }
.blk-hero--center .mkt-cta-row { justify-content: center; }
.blk-hero--center p.lead { margin-left: auto; margin-right: auto; }
.blk-hero--image { background-size: cover; background-position: center; }

/* image */
.blk-image { margin: 0; }
.blk-image img { max-width: 100%; height: auto; border-radius: 8px; }
.blk-image--center { text-align: center; }
.blk-image--full img { width: 100%; }
.blk-image--left { text-align: left; }
.blk-image--right { text-align: right; }
.blk-image figcaption { color: var(--site-muted); font-size: 0.9rem; margin-top: 0.5rem; text-align: center; }

/* image + text */
.blk-imgtext { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.blk-imgtext--right .blk-imgtext-media { order: 2; }
.blk-imgtext-media img { max-width: 100%; height: auto; border-radius: 10px; display: block; }

/* columns */
.blk-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }

/* cards */
.blk-cards { display: grid; gap: 1.5rem; }
.blk-cards--2 { grid-template-columns: repeat(2, 1fr); }
.blk-cards--3 { grid-template-columns: repeat(3, 1fr); }
.blk-cards--4 { grid-template-columns: repeat(4, 1fr); }
.blk-card { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 1.5rem; text-align: center; }
.blk-card-icon {
    display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--brand-primary); color: #fff; font-weight: 800; font-size: 1.2rem;
    margin-bottom: 0.75rem;
}
.blk-card h3 { margin: 0 0 0.5rem; font-size: 1.15rem; }
.blk-card p { margin: 0; color: var(--site-muted); font-size: 0.95rem; }

/* faq (native <details>) */
.blk-faq { max-width: 780px; }
.blk-faq-item { border-bottom: 1px solid #e5e9f0; padding: 0.35rem 0; }
.blk-faq-item summary {
    cursor: pointer; font-weight: 700; color: var(--site-heading); padding: 0.85rem 2rem 0.85rem 0;
    list-style: none; position: relative;
}
.blk-faq-item summary::-webkit-details-marker { display: none; }
.blk-faq-item summary::after { content: "+"; position: absolute; right: 0; top: 0.7rem; font-size: 1.3rem; color: var(--brand-primary); }
.blk-faq-item[open] summary::after { content: "\2212"; }
.blk-faq-a { padding: 0 0 1rem; }

/* cta banner */
.blk-cta { padding: 3.25rem 0; text-align: center; }
.blk-cta--primary { background: var(--brand-primary); }
.blk-cta--accent { background: var(--brand-accent); }
.blk-cta--accent, .blk-cta--accent h2, .blk-cta--accent p { color: #1a202c; }
.blk-cta--dark { background: var(--site-heading); }
.blk-cta h2 { margin: 0 0 0.75rem; font-size: 1.9rem; }
.blk-cta p { margin: 0 auto 1.5rem; max-width: 640px; }
.blk-cta .mkt-btn-cta { background: #fff; color: var(--brand-primary) !important; }
.blk-cta--accent .mkt-btn-cta { background: #1a202c; color: #fff !important; }

/* button row */
.blk-buttonrow--center { text-align: center; }
.blk-buttonrow--left { text-align: left; }
.blk-buttonrow--right { text-align: right; }

/* spacer */
.blk-spacer--small { height: 1rem; }
.blk-spacer--medium { height: 2.5rem; }
.blk-spacer--large { height: 4.5rem; }

/* footer themed */
.mkt-footer { background: var(--footer-bg); color: var(--footer-text); }
.mkt-footer-links a { color: var(--footer-text); }

@media (max-width: 768px) {
    .blk-imgtext, .blk-columns { grid-template-columns: 1fr; }
    .blk-imgtext--right .blk-imgtext-media { order: 0; }
    .blk-cards--2, .blk-cards--3, .blk-cards--4 { grid-template-columns: 1fr; }
    .blk-section-heading, .blk-cta h2 { font-size: 1.5rem; }
}