/*
 * FTA Renderer — Routed Pages CSS
 * One file. Scoped to .fta-render. No global selectors.
 * Brand look comes from CSS custom properties injected via style-tokens.php.
 *
 * Scope classes:
 *   .fta-render             — root wrapper for all routed output
 *   .fta-tenant-burgerbus   — tenant-level class
 *   .fta-brand-burgerbus    — brand-level class
 *   .fta-section            — every section wrapper
 *   .fta-{section-id}       — section-specific class
 */

/* === Reset within scope === */
.fta-render *,
.fta-render *::before,
.fta-render *::after {
    box-sizing: border-box;
}

/* === Root wrapper === */
.fta-render {
    font-family: var(--fta-font-body, 'Helvetica Neue', Helvetica, Arial, sans-serif);
    color: var(--fta-color-text, #1a1a1a);
    line-height: 1.6;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 2rem;
}
.fta-render .fta-hero,
.fta-render .fta-bb-hero-chalk {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

/* === Sections === */
.fta-section {
    padding: var(--fta-section-padding, 3rem 1.5rem);
    background: var(--fta-section-bg, #ffffff);
    border: 2px solid var(--fta-color-secondary, #1a1a1a);
    border-radius: var(--fta-radius-lg, 16px);
    margin-bottom: 2rem;
    box-shadow: 0 6px 0 var(--fta-color-secondary, #1a1a1a);
}
.fta-section.fta-hero,
.fta-section:has(.fta-bb-hero-chalk) {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}
.fta-section:last-child {
    margin-bottom: 0;
}

/* === Headings === */
.fta-render h1,
.fta-render h2,
.fta-render h3 {
    font-family: var(--fta-font-heading, 'Montserrat', 'Helvetica Neue', Arial, sans-serif) !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
}
.fta-section:not(:has(.fta-bb-hero-chalk)) h1,
.fta-section:not(:has(.fta-bb-hero-chalk)) h2,
.fta-section:not(:has(.fta-bb-hero-chalk)) h3 {
    color: var(--fta-color-secondary, #1a1a1a) !important;
}
.fta-bb-hero-chalk h1 {
    color: #ffffff !important;
}
.fta-section-h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
    margin-bottom: 1rem !important;
}
.fta-hero-h1 {
    font-size: clamp(1.2rem, 2.8vw, 2rem);
    margin-bottom: 1rem;
}
.fta-section-h2 {
    font-size: clamp(1.4rem, 3vw, 2rem);
    margin-bottom: 1rem;
}
.fta-faq-q {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
    color: var(--fta-color-secondary, #1a1a1a);
}

/* === Buttons === */
.fta-btn {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: var(--fta-radius-md, 8px);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
    line-height: 1;
}
.fta-btn-primary {
    background: var(--fta-btn-bg, #c8102e);
    color: var(--fta-btn-color, #ffffff);
    border: 2px solid var(--fta-btn-bg, #c8102e);
}
.fta-btn-primary:hover,
.fta-btn-primary:focus {
    background: var(--fta-btn-hover-bg, #a30d26);
    border-color: var(--fta-btn-hover-bg, #a30d26);
    color: var(--fta-btn-color, #ffffff);
    text-decoration: none;
}
.fta-btn-lg {
    padding: 1rem 2.25rem;
    font-size: 1.1rem;
}

/* === Hero === */
.fta-hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}
@media (min-width: 640px) {
    .fta-hero-inner {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}
.fta-hero-media {
    order: 2;
}
@media (min-width: 640px) {
    .fta-hero-media { order: 1; }
    .fta-hero-content { order: 2; }
}
.fta-hero-img {
    width: 100%;
    height: auto;
    border-radius: var(--fta-radius-md, 8px);
    display: block;
}
.fta-hero-text {
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
    color: var(--fta-color-text-light, #555555);
}

/* === Menu Highlights === */
.fta-menu-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
}
.fta-menu-item {
    background: var(--fta-color-bg-alt, #f5f0e8);
    border-radius: var(--fta-radius-sm, 4px);
    padding: 0.6rem 1rem;
    font-weight: 600;
}
.fta-menu-img {
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: var(--fta-radius-md, 8px);
    margin-top: 1.5rem;
    display: block;
}
.fta-menu-note {
    font-size: 0.9rem;
    color: var(--fta-color-text-light, #555555);
    margin-top: 1rem;
}

/* === Service Fit === */
.fta-event-types {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.fta-event-types li {
    background: var(--fta-color-bg-alt, #f5f0e8);
    border: 1px solid var(--fta-color-border, #e0dbd0);
    border-radius: 999px;
    padding: 0.35rem 1rem;
    font-size: 0.95rem;
}

/* === Health & Fire === */
.fta-ahj {
    background: var(--fta-color-bg-alt, #f5f0e8);
    border-left: 3px solid var(--fta-color-primary, #c8102e);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    border-radius: 0 var(--fta-radius-sm, 4px) var(--fta-radius-sm, 4px) 0;
}
.fta-ahj p {
    margin: 0;
}
.fta-ahj-note {
    font-size: 0.85rem;
    color: var(--fta-color-text-light, #555555);
    margin-left: 0.5rem;
}
.fta-health-fire-footer {
    font-size: 0.9rem;
    color: var(--fta-color-text-light, #555555);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--fta-color-border, #e0dbd0);
}

/* === Local Proof === */
.fta-nearby-links {
    margin-top: 1.5rem;
}
.fta-nearby-label {
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fta-color-text-light, #555555);
}
.fta-nearby-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.fta-nearby-list a {
    color: var(--fta-color-primary, #c8102e);
    text-decoration: none;
    font-size: 0.95rem;
}
.fta-nearby-list a:hover {
    text-decoration: underline;
}

/* === FAQ === */
.fta-faq-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.fta-faq-item {
    border-bottom: 1px solid var(--fta-color-border, #e0dbd0);
    padding-bottom: 1.5rem;
}
.fta-faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.fta-faq-a {
    color: var(--fta-color-text-light, #555555);
}

/* === Final CTA ===
   Structural styles migrated to core/fta-default.css (.fta-section-final-cta).
   The old .fta-final-cta selector here never matched the fta-final_cta
   auto-wrapper (hyphen vs underscore), so these rules were dead. */

/* === Gallery === */
.fta-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.fta-gallery-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: var(--fta-radius-sm, 4px);
    display: block;
}

/* === Reviews === */
.fta-reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.fta-review-card {
    background: var(--fta-color-bg-alt, #f5f0e8);
    border-radius: var(--fta-radius-md, 8px);
    padding: 1.25rem;
}
.fta-review-text {
    font-style: italic;
    margin-bottom: 0.75rem;
}
.fta-review-source {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--fta-color-text-light, #555555);
    margin: 0;
}

/* === Booking === */
.fta-booking-note {
    font-size: 0.9rem;
    color: var(--fta-color-text-light, #555555);
    margin-top: 1rem;
}
.fta-form-iframe-wrap {
    width: 100%;
    margin: 1rem 0;
}
.fta-form-iframe {
    width: 100%;
    min-height: 480px;
    border: none;
}

/* === Utility === */
.fta-media {
    max-width: 100%;
    height: auto;
}