/*
 * Main stylesheet for mttreatment.ca
 * AI editor does NOT write here. New styles go in ai-components.css.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--color-ink);
    background: var(--color-bg);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    line-height: var(--lh-tight);
    margin: 0 0 var(--space-4);
}
h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
p  { margin: 0 0 var(--space-4); }

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-button);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}
.btn-primary {
    background: var(--color-primary);
    color: var(--color-primary-ink);
}
.btn-primary:hover { filter: brightness(0.95); text-decoration: none; }

/* Header / footer */
.site-header {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}
.brand { font-weight: 700; color: var(--color-ink); text-decoration: none; }
.primary-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-5);
}
.primary-nav a { color: var(--color-ink-soft); text-decoration: none; }
.primary-nav a:hover { color: var(--color-primary); }

.site-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-6) 0;
    margin-top: var(--space-8);
    color: var(--color-muted);
    font-size: var(--fs-sm);
}
.site-footer address { font-style: normal; }
.footer-nav ul {
    list-style: none;
    margin: var(--space-3) 0;
    padding: 0;
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.footer-nav a { color: var(--color-muted); text-decoration: none; font-size: var(--fs-sm); }
.footer-nav a:hover { color: var(--color-primary); }

.legal-page .container { max-width: 760px; padding-top: var(--space-7); padding-bottom: var(--space-8); }

.powered-by {
    margin-top: var(--space-4);
    font-size: var(--fs-xs);
    color: var(--color-muted);
}
.powered-by a { color: var(--color-muted); text-decoration: none; border-bottom: 1px dotted currentColor; }
.powered-by a:hover { color: var(--color-primary); border-bottom-color: currentColor; }

/* Hero */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    align-items: center;
    padding: var(--space-8) var(--space-5);
}
.hero-sub { font-size: var(--fs-lg); color: var(--color-ink-soft); }
@media (max-width: 768px) {
    .hero { grid-template-columns: 1fr; }
    h1 { font-size: var(--fs-3xl); }
}

/* Blog */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6) 0;
}
.blog-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.blog-card:hover { box-shadow: var(--shadow-md); }
.blog-card-link { display: block; text-decoration: none; color: inherit; }
.blog-card-body { padding: var(--space-5); }
.blog-card-title { font-size: var(--fs-xl); margin-bottom: var(--space-2); }
.blog-card-date { color: var(--color-muted); font-size: var(--fs-sm); }
.blog-card-excerpt { color: var(--color-ink-soft); margin-top: var(--space-3); }

.blog-post .post-header { padding: var(--space-7) 0; text-align: center; }
.blog-post .post-meta { color: var(--color-muted); margin-bottom: var(--space-5); }
.blog-post .post-featured-image { margin: var(--space-5) auto; max-width: 900px; }
.blog-post .post-body { max-width: 720px; margin: 0 auto; padding-bottom: var(--space-8); }

/* Services */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
    padding: var(--space-6) 0;
}
.service-card a {
    display: block;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    text-decoration: none;
    color: inherit;
}
.service-card a:hover { box-shadow: var(--shadow-md); }
.service-pricing { color: var(--color-muted); font-size: var(--fs-lg); }

/* Contact */
.contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-7);
    padding: var(--space-6) 0;
}
@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; }
}
.contact-form label {
    display: block;
    margin-bottom: var(--space-4);
}
.contact-form label span {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-2);
    font-size: var(--fs-sm);
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    font-family: inherit;
    font-size: var(--fs-md);
}
.contact-form textarea { resize: vertical; }

.alert { padding: var(--space-4); border-radius: var(--radius-card); margin-bottom: var(--space-5); }
.alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }

/* Blocks */
.block-image figcaption { color: var(--color-muted); font-size: var(--fs-sm); text-align: center; margin-top: var(--space-2); }
.block-quote { border-left: 3px solid var(--color-primary); padding-left: var(--space-5); font-style: italic; color: var(--color-ink-soft); }
.block-list { padding-left: var(--space-5); }
.block-cta { margin: var(--space-6) 0; }