/* Vancouver Health Coach: readability refresh on top of the Stockholm theme (Sail, 2026-11-06).
   Same layout, photos, colours and content; only type, spacing and widths. Linked into every page at build
   (astro.config.mjs "refresh-css"); delete that hook to go back to the original look. */

:root { --vhc-text: #3d3d3d; --vhc-head: #262626; --vhc-muted: #6f6f6f; --vhc-gold: #e8b12b; }

/* Body copy: the theme sets Open Sans 14px at weight 200 with extra letter spacing, which reads hairline-thin */
.content p, .content li, .wpb_text_column, .wpb_text_column p, .post_text p, .post_text li,
.blog_holder article p, .q_list li, .testimonial_text_inner p, .content .container_inner p {
  font-size: 17px; line-height: 1.65; font-weight: 400; letter-spacing: 0; color: var(--vhc-text);
}
/* text the editor sized by hand keeps its size; only the weight/colour fix applies */
.content p[style*="font-size"], .content p:has(span[style*="font-size"]), .wpb_text_column p:has(span[style*="font-size"]) { line-height: 1.4; }
.content p, .post_text p, .wpb_text_column p { margin: 0 0 1.1em; }
.content strong, .content b { font-weight: 600; color: var(--vhc-head); }
.content a:not(.qbutton):not(.vc_btn3) { text-underline-offset: 2px; }

/* Headings inside the page (not the white ones on photos) */
.post_text h2, .wpb_text_column h2 {
  font-size: 32px; line-height: 1.25; font-weight: 600; letter-spacing: .5px; color: var(--vhc-head); margin: 0 0 .6em;
}
.post_text h3, .wpb_text_column h3 {
  font-size: 23px; line-height: 1.35; font-weight: 600; letter-spacing: .2px; margin: 1.2em 0 .5em;
}
.post_text h4, .wpb_text_column h4 { font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--vhc-head); letter-spacing: .2px; }
.title h1 { letter-spacing: 2px; }

/* Wider page column on desktop, more air between sections */
@media (min-width: 1200px) {
  .container_inner, .content .container .container_inner, .full_width .full_width_inner > .vc_row > .vc_column_container,
  .header_inner_left + nav, .footer_top .container_inner { max-width: 1140px; width: auto; margin-left: auto; margin-right: auto; }
}
.content .wpb_row .wpb_column > .vc_column-inner { padding-left: 22px; padding-right: 22px; }
.content .wpb_text_column { margin-bottom: 28px; }

/* Blog posts: a comfortable reading width (~70 characters) instead of the full 900px */
.single-post .blog_holder article .post_text_inner, .single-post .post_content_holder .post_text {
  max-width: 720px; margin-left: auto; margin-right: auto;
}
.single-post .blog_holder article img { border-radius: 4px; height: auto; }
.single-post .post_info { font-size: 14px; color: var(--vhc-muted); letter-spacing: .5px; margin-bottom: 18px; }

/* Blog index cards */
.blog_holder.masonry article, .blog_holder.blog_small_image article { margin-bottom: 40px; }
.blog_holder article h2 a, .blog_holder article h3 a { color: var(--vhc-head); }

/* Buttons: same gold, a little more presence */
a.qbutton, .qbutton, input.wpcf7-submit, .vc_btn3 {
  border-radius: 3px; letter-spacing: 1.5px; padding-left: 32px; padding-right: 32px; transition: filter .15s;
}
a.qbutton:hover, .qbutton:hover { filter: brightness(.94); }

/* Menu: slightly larger, easier to hit */
nav.main_menu > ul > li > a { font-size: 13px; letter-spacing: 1.6px; }

/* Footer: readable on the dark background */
.footer_top, .footer_top p, .footer_top li, .footer_top a { font-size: 15px; line-height: 1.7; font-weight: 400; letter-spacing: 0; }
.footer_top p, .footer_top li { color: #c4c4c4; }
.footer_top h4, .footer_top .widget h4 { font-size: 14px; font-weight: 600; letter-spacing: 2px; color: #fff; margin-bottom: 16px; }
.footer_bottom, .footer_bottom p { font-size: 13px; font-weight: 400; color: #9a9a9a; }

/* Phones: keep it generous but not huge */
@media (max-width: 768px) {
  body, .content p, .post_text p, .wpb_text_column p, .content li { font-size: 16px; line-height: 1.7; }
  .post_text h2, .wpb_text_column h2 { font-size: 26px; }
  .content .wpb_row .wpb_column > .vc_column-inner { padding-left: 16px; padding-right: 16px; }
}

/* Section titles (MEET VANCOUVER HEALTH COACH, AREAS OF FOCUS ...) are h3s in pale grey: give them weight */
.wpb_text_column h3 { color: var(--vhc-head); font-size: 22px; letter-spacing: 1.5px; margin-top: .4em; }
.wpb_text_column h3 span[style*="color"], .wpb_text_column h3 strong span { letter-spacing: .5px; }
/* The intro call to action next to the gold button */
.call_to_action_text h3, .call_to_action .text_wrapper h3 { color: #4a4a4a; font-size: 26px; line-height: 1.4; font-weight: 400; }

/* Phones: the theme keeps the 64px slide title with a 109px line height, and never wraps buttons */
@media (max-width: 768px) {
  .q_slide_title { font-size: 34px !important; line-height: 1.15 !important; letter-spacing: 1.5px !important; }
  a.qbutton, .qbutton { white-space: normal !important; max-width: 100%; height: auto !important; min-height: 0 !important; line-height: 1.35 !important; padding: 14px 20px !important; text-align: center; overflow: visible; }
  .call_to_action_text h3, .call_to_action .text_wrapper h3 { font-size: 22px; }
}