/* ============================================================
   woodburners4u v2 — app.css
   Minimal support file. Public site uses Tailwind CDN.
   This file provides: CSS custom properties (for admin.css),
   logo classes (for admin sidebar), Alpine [x-cloak], and
   prose styles for AI-generated blog/location content.
   ============================================================ */

/* CSS custom properties — used by admin.css */
:root {
    --colour-primary: #EA580C;
    --colour-cta: #292524;
    --colour-background: #FFFFFF;
    --colour-surface: #F5F5F5;
    --colour-border: #E8E8E8;
    --colour-text: #2C2C2C;
    --colour-text-secondary: #6B6B6B;
    --colour-white: #FFFFFF;
    --colour-error: #C0392B;
    --font-logo: 'Raleway', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --border-radius-card: 10px;
    --border-radius-input: 4px;
    --border-radius-badge: 4px;
    --transition: 0.2s ease;
    --section-padding-desktop: 80px;
    --section-padding-mobile: 48px;
    --container-max-width: 1200px;
}

/* Alpine.js cloak */
[x-cloak] { display: none !important; }

/* Logo wordmark — used by admin sidebar */
.logo__wordmark { font-family: var(--font-logo); font-size: 22px; line-height: 1; letter-spacing: -0.02em; }
.logo__clean { font-weight: 800; color: var(--colour-primary); }
.logo__it    { font-weight: 300; color: var(--colour-text); }
.logo__4u    { font-weight: 800; color: var(--colour-cta); }

/* Prose — AI-generated HTML content (blog posts, location intros) */
.prose { font-size: 15px; line-height: 1.7; color: var(--colour-text); }
.prose p  { margin-bottom: 1em; }
.prose h2 { font-size: 22px; font-weight: 700; margin: 28px 0 10px; color: var(--colour-text); }
.prose h3 { font-size: 18px; font-weight: 700; margin: 20px 0 8px; color: var(--colour-text); }
.prose h4 { font-size: 16px; font-weight: 600; margin: 16px 0 6px; }
.prose ul, .prose ol { padding-left: 1.4em; margin-bottom: 1em; }
.prose li { margin-bottom: 0.4em; list-style: disc; }
.prose ol li { list-style: decimal; }
.prose a  { color: var(--colour-primary); text-decoration: underline; }
.prose strong { font-weight: 700; }
.prose blockquote { border-left: 3px solid var(--colour-primary); padding-left: 16px; color: var(--colour-text-secondary); font-style: italic; margin: 16px 0; }

/* Blog post rendered content */
.blog-post__content { font-size: 16px; line-height: 1.8; }
.blog-post__content p  { margin-bottom: 1.2em; }
.blog-post__content h2 { font-size: 24px; font-weight: 700; margin: 32px 0 12px; }
.blog-post__content h3 { font-size: 20px; font-weight: 700; margin: 24px 0 10px; }
.blog-post__content ul, .blog-post__content ol { padding-left: 1.4em; margin-bottom: 1em; }
.blog-post__content li { margin-bottom: 0.4em; list-style: disc; }
.blog-post__content ol li { list-style: decimal; }
.blog-post__content a  { color: var(--colour-primary); text-decoration: underline; }
.blog-post__content blockquote { border-left: 3px solid var(--colour-primary); padding-left: 16px; color: var(--colour-text-secondary); font-style: italic; margin: 16px 0; }
.blog-post__content strong { font-weight: 700; }