/*
 * Village of Hazelton: styles for Gutenberg content.
 * One source for the website and the block editor. On the site every rule sits
 * under .vh-content (the content area of the Breakdance templates). In the editor
 * .vh-content is swapped for .editor-styles-wrapper so both look the same.
 */

.vh-content {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  color: var(--vh-navy, #14212e);
}

/* Text */
.vh-content p { margin: 0 0 24px; }
.vh-content > *:last-child,
.vh-content .breakdance-rich-text-styles > *:last-child { margin-bottom: 0; }
.vh-content strong, .vh-content b { font-weight: 700; }
.vh-content a { color: var(--vh-link, #22587a); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.vh-content a:hover { color: var(--vh-navy, #14212e); text-decoration-thickness: 2px; }
.vh-content a:focus-visible { outline: 3px solid var(--vh-gold, #d9a441); outline-offset: 3px; border-radius: 4px; }
.vh-content mark { background-color: #f3e2b5; color: inherit; padding: 0 2px; }
.vh-content .has-small-font-size { font-size: 16px; }
.vh-content .has-normal-font-size { font-size: 18px; }
.vh-content .has-large-font-size { font-size: 22px; line-height: 1.5; }

/* Headings */
.vh-content h2, .vh-content h3, .vh-content h4, .vh-content h5, .vh-content h6 { color: var(--vh-navy, #14212e); }
.vh-content h2 { margin: 48px 0 16px; font-family: 'Newsreader', Georgia, serif; font-size: 38px; line-height: 1.1; font-weight: 600; letter-spacing: -0.025em; }
.vh-content h3 { margin: 36px 0 12px; font-family: 'Newsreader', Georgia, serif; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.vh-content h4 { margin: 28px 0 8px; font-family: inherit; font-size: 19px; line-height: 1.35; font-weight: 700; }
.vh-content h5, .vh-content h6 { margin: 24px 0 8px; font-family: inherit; font-size: 17px; line-height: 1.4; font-weight: 700; }
.vh-content > h2:first-child, .vh-content > h3:first-child,
.vh-content .breakdance-rich-text-styles > h2:first-child, .vh-content .breakdance-rich-text-styles > h3:first-child { margin-top: 0; }

/* Lists */
.vh-content ul, .vh-content ol { margin: 0 0 24px; padding-left: 26px; }
.vh-content li { margin-bottom: 8px; padding-left: 4px; }
.vh-content li::marker { color: var(--vh-gold-text, #8a6a1f); }
.vh-content ol li::marker { font-weight: 700; }
.vh-content li > ul, .vh-content li > ol { margin: 8px 0 0; }

/* Tables */
.vh-content .wp-block-table { margin: 0 0 32px; overflow-x: auto; border-radius: 12px; }
.vh-content .wp-block-table table, .vh-content table { width: 100%; border: 0; border-collapse: collapse; font-size: 17px; background-color: var(--vh-cream, #f4f1eb); }
.vh-content .wp-block-table thead, .vh-content .wp-block-table tfoot { border: 0; }
.vh-content th, .vh-content td { padding: 14px 20px; border: 0; text-align: left; vertical-align: top; }
.vh-content th { background-color: var(--vh-navy, #14212e); color: #ffffff; font-weight: 600; }
.vh-content tbody tr:nth-child(even) { background-color: #ffffff; }
.vh-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--vh-cream, #f4f1eb); }
.vh-content .wp-block-table figcaption, .vh-content .wp-element-caption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--vh-muted, #4a5866); text-align: left; }

/* Images and media */
.vh-content .wp-block-image { margin: 0 0 32px; }
.vh-content .wp-block-image img, .vh-content .wp-block-gallery img, .vh-content .wp-block-media-text__media img { border-radius: 12px; height: auto; }
.vh-content .wp-block-image.is-style-rounded img { border-radius: 9999px; }
.vh-content .wp-block-gallery { margin: 0 0 32px; gap: 12px; }
.vh-content .wp-block-gallery .wp-block-image { margin: 0; }
.vh-content .wp-block-embed { margin: 0 0 32px; }
.vh-content .wp-block-embed iframe { width: 100%; border: 0; border-radius: 12px; }
.vh-content .wp-block-video video { width: 100%; border-radius: 12px; }
.vh-content .wp-block-cover { margin: 0 0 32px; border-radius: 16px; overflow: hidden; }
.vh-content .wp-block-media-text { margin: 0 0 32px; gap: 32px; }
.vh-content .wp-block-media-text__content { padding: 0; }

/* Buttons: fill is gold, the Outline style becomes the navy button. No borders. */
.vh-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 32px 0; }
.vh-content .wp-block-button { margin: 0; }
.vh-content .wp-block-button__link, .vh-content .wp-element-button { display: inline-block; padding: 14px 24px; border: 0; border-radius: 8px; background-color: var(--vh-gold, #d9a441); color: var(--vh-navy, #14212e); font-size: 17px; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color 0.15s; }
.vh-content .wp-block-button__link:hover, .vh-content .wp-element-button:hover { background-color: var(--vh-light-gold, #e3c578); color: var(--vh-navy, #14212e); text-decoration: none; }
.vh-content .wp-block-button.is-style-outline .wp-block-button__link { border: 0; background-color: var(--vh-navy, #14212e); color: #ffffff; font-weight: 600; }
.vh-content .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: #26384a; color: #ffffff; }
.vh-content .wp-block-button.is-style-vh-light .wp-block-button__link { background-color: var(--vh-soft-grey, #f1eee8); color: var(--vh-navy, #14212e); font-weight: 600; }
.vh-content .wp-block-button.is-style-vh-light .wp-block-button__link:hover { background-color: #e6e1d6; color: var(--vh-navy, #14212e); }

/* File downloads look like the document rows in the design */
.vh-content .wp-block-file { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin: 0 0 10px; padding: 16px 20px; border-radius: 10px; background-color: var(--vh-cream, #f4f1eb); font-size: 17px; }
.vh-content .wp-block-file > a:first-child, .vh-content .wp-block-file a:not(.wp-block-file__button) { color: var(--vh-navy, #14212e); font-weight: 600; text-decoration: none; }
.vh-content .wp-block-file a:not(.wp-block-file__button):hover { color: var(--vh-link, #22587a); text-decoration: underline; }
.vh-content .wp-block-file .wp-block-file__button { margin: 0; padding: 8px 16px; border: 0; border-radius: 8px; background-color: var(--vh-navy, #14212e); color: #ffffff; font-size: 15px; font-weight: 600; text-decoration: none; }
.vh-content .wp-block-file .wp-block-file__button:hover { background-color: #26384a; color: #ffffff; }
.vh-content .wp-block-file + :not(.wp-block-file) { margin-top: 32px; }

/* Quotes */
.vh-content blockquote, .vh-content .wp-block-quote { margin: 0 0 32px; padding: 24px 28px; border: 0; border-radius: 12px; background-color: var(--vh-cream, #f4f1eb); }
.vh-content .wp-block-quote p { margin: 0 0 12px; font-family: 'Newsreader', Georgia, serif; font-size: 24px; line-height: 1.35; font-weight: 500; }
.vh-content .wp-block-quote p:last-of-type { margin-bottom: 0; }
.vh-content .wp-block-quote cite, .vh-content .wp-block-pullquote cite { display: block; margin-top: 12px; font-size: 15px; font-style: normal; font-weight: 600; color: var(--vh-muted, #4a5866); }
.vh-content .wp-block-pullquote { margin: 40px 0; padding: 36px 40px; border: 0; border-radius: 16px; background-color: var(--vh-navy, #14212e); color: #ffffff; text-align: left; }
.vh-content .wp-block-pullquote blockquote { margin: 0; padding: 0; background: none; }
.vh-content .wp-block-pullquote p { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 32px; line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; color: #ffffff; }
.vh-content .wp-block-pullquote cite { color: var(--vh-footer-text, #c7d0da); }

/* Groups: a background colour turns a group into a panel */
.vh-content .wp-block-group { margin: 0 0 32px; }
.vh-content .wp-block-group.has-background { padding: 24px 28px; border-radius: 12px; }
.vh-content .wp-block-group > *:last-child { margin-bottom: 0; }
.vh-content .wp-block-group.has-background > :first-child { margin-top: 0; }
.vh-content .has-navy-background-color { color: #ffffff; }
.vh-content .has-navy-background-color h2, .vh-content .has-navy-background-color h3, .vh-content .has-navy-background-color h4 { color: var(--vh-light-gold, #e3c578); }
.vh-content .has-navy-background-color a { color: #ffffff; }
.vh-content .has-navy-background-color a:hover { color: var(--vh-light-gold, #e3c578); }
.vh-content .wp-block-group.is-style-vh-callout { padding: 24px 28px; border-radius: 12px; background-color: var(--vh-navy, #14212e); color: #dfe5ec; }
.vh-content .wp-block-group.is-style-vh-callout h2, .vh-content .wp-block-group.is-style-vh-callout h3, .vh-content .wp-block-group.is-style-vh-callout h4 { margin-top: 0; color: var(--vh-light-gold, #e3c578); }
.vh-content .wp-block-group.is-style-vh-callout a { color: #ffffff; }
.vh-content .wp-block-group.is-style-vh-note { padding: 24px 28px; border-radius: 12px; background-color: var(--vh-cream, #f4f1eb); }
.vh-content .wp-block-group.is-style-vh-note h2, .vh-content .wp-block-group.is-style-vh-note h3, .vh-content .wp-block-group.is-style-vh-note h4 { margin-top: 0; }

/* Columns */
.vh-content .wp-block-columns { margin: 0 0 32px; gap: 32px; }
.vh-content .wp-block-column > *:last-child { margin-bottom: 0; }

/* Separator: a soft rule, not a border on a panel */
.vh-content hr, .vh-content .wp-block-separator { margin: 40px 0; height: 2px; border: 0; background-color: #e6e1d6; opacity: 1; }
.vh-content .wp-block-separator.is-style-dots { height: auto; background: none; color: var(--vh-gold, #d9a441); }

/* Details (show and hide) */
.vh-content .wp-block-details { margin: 0 0 12px; padding: 16px 20px; border-radius: 10px; background-color: var(--vh-cream, #f4f1eb); }
.vh-content .wp-block-details summary { cursor: pointer; font-weight: 700; }
.vh-content .wp-block-details[open] summary { margin-bottom: 12px; }
.vh-content .wp-block-details > :last-child { margin-bottom: 0; }

/* Code and preformatted */
.vh-content code { padding: 2px 6px; border-radius: 4px; background-color: var(--vh-soft-grey, #f1eee8); font-size: 0.9em; }
.vh-content pre { margin: 0 0 24px; padding: 16px 20px; border-radius: 10px; background-color: var(--vh-soft-grey, #f1eee8); overflow-x: auto; font-size: 15px; }

/* Brand colour classes from the editor palette */
.vh-content .has-navy-color { color: var(--vh-navy, #14212e); }
.vh-content .has-gold-color { color: var(--vh-gold-text, #8a6a1f); }
.vh-content .has-muted-color { color: var(--vh-muted, #4a5866); }
.vh-content .has-white-color { color: #ffffff; }
.vh-content .has-navy-background-color { background-color: var(--vh-navy, #14212e); }
.vh-content .has-cream-background-color { background-color: var(--vh-cream, #f4f1eb); }
.vh-content .has-light-gold-background-color { background-color: var(--vh-light-gold, #e3c578); }
.vh-content .has-white-background-color { background-color: #ffffff; }

/* Smaller screens */
@media (max-width: 767px) {
  .vh-content h2 { font-size: 32px; margin-top: 40px; }
  .vh-content h3 { font-size: 23px; }
  .vh-content .wp-block-pullquote { padding: 28px; }
  .vh-content .wp-block-pullquote p { font-size: 26px; }
  .vh-content .wp-block-quote p { font-size: 21px; }
  .vh-content th, .vh-content td { padding: 12px 14px; }
  .vh-content .wp-block-group.has-background, .vh-content .wp-block-group.is-style-vh-callout, .vh-content .wp-block-group.is-style-vh-note { padding: 20px 22px; }
}

/* Take part panel on the Council meetings page: tighter text in a small panel */
.vh-takepart.vh-content { font-size: 17px; }
.vh-takepart.vh-content h2 { margin: 0 0 20px; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.vh-takepart.vh-content h3 { margin: 20px 0 2px; font-family: inherit; font-size: 17px; font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.vh-takepart.vh-content p { margin: 0; color: var(--vh-muted, #4a5866); }

/* Classic group wrapper */
.vh-content .wp-block-group__inner-container > *:last-child { margin-bottom: 0; }
.vh-content .wp-block-group__inner-container > *:first-child { margin-top: 0; }

/* Document lists */
.vh-content ul.is-style-vh-docs{list-style:none;padding:0;margin:1.25em 0 2em;display:grid;gap:8px}
.vh-content ul.is-style-vh-docs li{margin:0;padding:14px 18px 14px 50px;background:var(--vh-cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") no-repeat 18px 50%/20px 20px;border-radius:6px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px}
.vh-content ul.is-style-vh-docs li::marker{content:''}
.vh-content ul.is-style-vh-docs a{font-weight:600;color:var(--vh-link);text-decoration:none}
.vh-content ul.is-style-vh-docs a:hover,.vh-content ul.is-style-vh-docs a:focus{text-decoration:underline}
.vh-content .vh-doc-meta{color:var(--vh-muted);font-size:14px;white-space:nowrap}
.vh-content .wp-block-image img{border-radius:8px}
.vh-content .wp-block-gallery img{border-radius:6px}

/* vh gallery grid */
.vh-content .wp-block-gallery.has-nested-images{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.vh-content .wp-block-gallery.has-nested-images figure.wp-block-image{width:auto!important;margin:0!important}
.vh-content .wp-block-gallery.has-nested-images figure.wp-block-image img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:767px){.vh-content .wp-block-gallery.has-nested-images{grid-template-columns:repeat(2,1fr);gap:8px}}

/* member photo focus */
.vh-member__photo img{object-position:50% 25%}
.vh-content .wp-block-image.is-resized img{height:auto;max-width:100%}

/* gallery two up */
.vh-content .wp-block-gallery.has-nested-images.columns-2{grid-template-columns:repeat(2,1fr)}
.vh-content .wp-block-gallery.has-nested-images.columns-2 figure.wp-block-image img{aspect-ratio:1024/791!important;height:auto!important;object-fit:contain!important}
/* gallery links */
.vh-content .wp-block-gallery.has-nested-images figure.wp-block-image>a{display:block;width:100%}
.vh-content .wp-block-gallery.has-nested-images figure.wp-block-image>a img{width:100%!important}