/* ============================================================
   James Steven Landscapes & Lawns — 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: #1C442D;
    --colour-cta: #4C8C2A;
    --colour-background: #FFFFFF;
    --colour-surface: #F5F5F5;
    --colour-border: #E8E8E8;
    --colour-text: #2C2C2C;
    --colour-text-secondary: #6B6B6B;
    --colour-white: #FFFFFF;
    --colour-error: #C0392B;
    --font-logo: 'Roboto Slab', sans-serif;
    --font-body: 'Roboto', 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: 6px;
    --border-radius-input: 3px;
    --border-radius-badge: 3px;
    --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; }

/* ============================================================
   Gradient buttons — rounded pills with a soft shadow. Targets the
   utility-class combos already on the buttons, scoped to <a>/<button>
   so decorative bg-cta icon circles are untouched.
   ============================================================ */

/* Centre every button's label vertically. Uppercase labels sit high in the
   default 1.5 line-box (the descender space reads as extra bottom padding),
   so flex-centre the content and collapse line-height to 1 across all buttons. */
a.uppercase.tracking-wider.bg-cta,
button.uppercase.tracking-wider.bg-cta,
a.uppercase.tracking-wider.bg-primary,
button.uppercase.tracking-wider.bg-primary,
a.border-primary.text-primary,
button.border-primary.text-primary,
a.text-white.font-semibold[href],
.cta-ghost-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
}

a.uppercase.tracking-wider.bg-cta,
button.uppercase.tracking-wider.bg-cta {
    background-image: linear-gradient(180deg, #5DA836 0%, #3C7A1F 100%) !important;
    border: 0;
    border-radius: 9999px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
    transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
}
a.uppercase.tracking-wider.bg-cta:hover,
button.uppercase.tracking-wider.bg-cta:hover { filter: brightness(1.06); opacity: 1 !important; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.18); }
a.uppercase.tracking-wider.bg-cta:active,
button.uppercase.tracking-wider.bg-cta:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,.15); }

a.uppercase.tracking-wider.bg-primary,
button.uppercase.tracking-wider.bg-primary {
    background-image: linear-gradient(180deg, #2C6242 0%, #173823 100%) !important;
    border: 0;
    border-radius: 9999px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
}
a.uppercase.tracking-wider.bg-primary:hover,
button.uppercase.tracking-wider.bg-primary:hover { filter: brightness(1.1); opacity: 1 !important; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.2); }
a.uppercase.tracking-wider.bg-primary:active,
button.uppercase.tracking-wider.bg-primary:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,.18); }

/* Outline buttons on light backgrounds (transparent fill, hover fills) */
a.border-primary.text-primary,
button.border-primary.text-primary {
    border-radius: 9999px !important;
    border-width: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease, color .15s ease;
}
a.border-primary.text-primary:hover,
button.border-primary.text-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.1); }
a.border-primary.text-primary:active,
button.border-primary.text-primary:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Ghost buttons on the dark footer / CTA band */
a.text-white.font-semibold[href],
.cta-ghost-dark {
    border-radius: 9999px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease, color .15s ease;
}
a.text-white.font-semibold[href]:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.22); }
a.text-white.font-semibold[href]:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0,0,0,.18); }