/**
* CQG page designs built from native blocks.
*
* Pages keep the design's class names (build.css), but their content is now made of
* core blocks: Group, Paragraph, Heading, Image, Buttons, List and Details. These rules
* cover what changes when the design's markup becomes blocks: the wrappers WordPress
* adds (figure, wp-block-buttons), the flow-layout margins it applies, buttons, FAQ
* toggles, highlight boxes in headings and cards that link as a whole.
*
* Loaded on the front end and in the editor (editor styles), after build.css.
*
* @package cqg
*/
/* ---------------------------------------------------------------------------
* 1. Layout. The design sets its own spacing, so WordPress's flow-layout margins
* are switched off inside .cqg-x. Kept at low specificity so the design's own
* margin rules still apply.
* ------------------------------------------------------------------------- */
html .cqg-x :where(.is-layout-flow, .is-layout-constrained) > *,
html .cqg-x.is-layout-flow > *,
html .editor-styles-wrapper .cqg-x :where(.block-editor-block-list__layout) > * {
margin-block-start: 0;
margin-block-end: 0;
}
html .cqg-x :where(.wp-block-group) { box-sizing: border-box; }
/* Paragraphs that stand in for the design's inline wrappers keep block flow. */
.cqg-x p:empty { display: none; }
/* ---------------------------------------------------------------------------
* 2. Images. The image block wraps the ![]()
in a ; the figure carries
* the design's classes and size, the image fills it.
* ------------------------------------------------------------------------- */
html .cqg-x .wp-block-image { margin: 0; }
.cqg-x .wp-block-image img { display: block; max-width: 100%; }
.cqg-x .wp-block-image[class*=" u-w-"] img,
.cqg-x .wp-block-image[class^="u-w-"] img { width: 100%; }
.cqg-x .wp-block-image[class*=" u-h-"] img { height: 100%; }
.cqg-x .wp-block-image.cqg-icon { flex: none; line-height: 0; }
.cqg-x .wp-block-image.cqg-icon img { width: 100%; height: 100%; object-fit: contain; }
.cqg-x .wp-block-image.icon { width: 28px; height: 28px; }
.cqg-x .media > .wp-block-image,
.cqg-x .case__result > .wp-block-image { position: absolute; inset: 0; width: 100%; height: 100%; }
.cqg-x .media > .wp-block-image img,
.cqg-x .case__result > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
.cqg-x .case__result > .wp-block-image img { transition: transform .4s; }
.cqg-x .case:hover .case__result > .wp-block-image img { transform: scale(1.04); }
/* Icon tiles: a coloured square with the icon centred in it. */
.cqg-x .wp-block-group.clip > .wp-block-image.cqg-icon { margin: auto; }
/* ---------------------------------------------------------------------------
* 3. Buttons. Core buttons styled as the design's pill buttons. Styles:
* default (navy), Mint, Steel, Outline, Outline (on dark), White and
* Text link with arrow. "has-arrow" adds the arrow icon.
* ------------------------------------------------------------------------- */
.cqg-x .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.cqg-x .wp-block-buttons.fx { gap: var(--btns-gap, 16px); }
.cqg-x .wp-block-button { margin: 0; }
.cqg-x .wp-block-button__link {
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
min-height: 52px; min-width: 200px; padding: 0 26px 0 28px !important;
border-radius: 999px; border: 1.5px solid var(--protocol);
background: var(--protocol); color: var(--white);
font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.4; letter-spacing: 1.56px; text-transform: uppercase;
white-space: nowrap; text-decoration: none; box-shadow: none;
transition: background .2s, color .2s, border-color .2s, filter .2s, transform .2s;
}
.cqg-x .wp-block-button__link:hover { background: var(--protocol-soft); border-color: var(--protocol-soft); color: var(--white); box-shadow: none; }
.cqg-x .wp-block-button__link:active { transform: translateY(1px); }
/* The arrow is drawn with ::before (placed after the text with order), so ::after stays
free for cards that are clickable as a whole (motion.js adds cqg-clickcard__link). */
.cqg-x .wp-block-button__link::after { display: none; }
.cqg-x .wp-block-button__link.cqg-clickcard__link::after {
content: ""; display: block; position: absolute; inset: 0; z-index: 1; width: auto; height: auto;
background: none; -webkit-mask: none; mask: none; transform: none; border-radius: inherit;
}
.cqg-x .has-arrow .wp-block-button__link::before {
content: ""; display: block; order: 1; flex: none; width: 18px; height: 18px; background: currentColor;
-webkit-mask: url(../build/arrow-dark.svg) center / contain no-repeat; mask: url(../build/arrow-dark.svg) center / contain no-repeat;
transition: transform .2s;
}
.cqg-x .has-arrow .wp-block-button__link:hover::before,
.cqg-x .cqg-clickcard:hover .has-arrow .wp-block-button__link::before { transform: translateX(3px); }
.cqg-x .is-style-cqg-mint .wp-block-button__link { background: var(--signal); border-color: var(--signal); color: var(--protocol); }
.cqg-x .is-style-cqg-mint .wp-block-button__link:hover { background: #9af6ca; border-color: #9af6ca; color: var(--protocol); }
.cqg-x .is-style-cqg-steel .wp-block-button__link { background: var(--steel); border-color: var(--steel); color: var(--white); }
.cqg-x .is-style-cqg-steel .wp-block-button__link:hover { filter: brightness(1.08); }
.cqg-x .is-style-cqg-outline .wp-block-button__link { background: transparent; color: var(--protocol); border-color: var(--protocol); }
.cqg-x .is-style-cqg-outline .wp-block-button__link:hover { background: var(--protocol); color: var(--white); }
.cqg-x .is-style-cqg-outline-light .wp-block-button__link { background: transparent; color: var(--white); border-color: var(--white); }
.cqg-x .is-style-cqg-outline-light .wp-block-button__link:hover { background: var(--white); color: var(--protocol); }
.cqg-x .is-style-cqg-white .wp-block-button__link { background: var(--white); border-color: var(--white); color: var(--protocol); }
.cqg-x .is-style-cqg-white .wp-block-button__link:hover { filter: brightness(.96); }
.cqg-x .is-style-cqg-link .wp-block-button__link {
min-height: 0; min-width: 0; padding: 0 !important; gap: 10px;
background: none; border: 0; color: var(--protocol);
}
.cqg-x .is-style-cqg-link .wp-block-button__link:hover { background: none; color: var(--protocol); text-decoration: underline; text-underline-offset: 4px; }
.cqg-x .is-style-cqg-link .wp-block-button__link:hover::before { transform: translateX(4px); }
.cqg-x .bg-protocol .is-style-cqg-link .wp-block-button__link,
.cqg-x .bg-steel .is-style-cqg-link .wp-block-button__link { color: var(--signal); }
.cqg-x .is-signal .wp-block-button__link, .cqg-x .is-signal .wp-block-button__link:hover { color: var(--signal); }
.cqg-x .is-white .wp-block-button__link, .cqg-x .is-white .wp-block-button__link:hover { color: var(--white); }
.cqg-x .is-full-width, .cqg-x .is-full-width .wp-block-button__link { width: 100%; }
.cqg-x .is-hug .wp-block-button__link { min-width: 0; }
@media (max-width: 720px) {
.cqg-x .ctas .wp-block-button, .cqg-x .wp-block-buttons.ctas > .wp-block-button { flex: 1 1 160px; }
.cqg-x .ctas .wp-block-button__link { width: 100%; }
}
/* ---------------------------------------------------------------------------
* 4. Two-line titles with a highlight box. Editors pick "Highlight box" from the
* toolbar (a ); Shift+Enter starts the second line.
* ------------------------------------------------------------------------- */
.cqg-x .cqg-title { display: block; }
.cqg-x mark:is(.cqg-hl, .cqg-hl--steel, .cqg-hl--navy, .cqg-hl--soft, .cqg-hl--white) {
display: inline-block; margin-top: 4px; padding: 0 10px; border-radius: 6px;
background: var(--signal); color: var(--protocol); white-space: nowrap; max-width: 100%;
}
.cqg-x .title--xl mark:is(.cqg-hl, .cqg-hl--steel, .cqg-hl--navy, .cqg-hl--soft, .cqg-hl--white) { padding: 0 12px; border-radius: 8px; }
.cqg-x mark.cqg-hl--steel { background: var(--steel); color: var(--white); }
.cqg-x mark.cqg-hl--navy { background: var(--protocol); color: var(--white); }
.cqg-x mark.cqg-hl--soft { background: var(--trace); color: var(--protocol); }
.cqg-x mark.cqg-hl--white { background: var(--white); color: var(--protocol); }
.cqg-x .cqg-title.tc, .cqg-x .cqg-title.title--center { text-align: center; }
/* The sweep-in animation from theme.css still runs; keep the box shape while it does. */
.cqg-js .cqg-x mark.cqg-hl { background-color: transparent; background-image: linear-gradient(var(--hl-bg, var(--signal)), var(--hl-bg, var(--signal))); }
.cqg-js .cqg-x mark:is(.cqg-hl--steel, .cqg-hl--navy, .cqg-hl--soft, .cqg-hl--white) { background-size: 100% 100%; }
@media (max-width: 720px) { .cqg-x mark:is(.cqg-hl, .cqg-hl--steel, .cqg-hl--navy, .cqg-hl--soft, .cqg-hl--white) { white-space: normal; } }
/* ---------------------------------------------------------------------------
* 5. FAQs: core Details blocks styled as the design's accordion.
* ------------------------------------------------------------------------- */
.cqg-x .wp-block-details.faq { border-bottom: 1px solid var(--border); align-self: stretch; width: 100%; margin: 0; padding: 0; }
.cqg-x .wp-block-details.faq > summary {
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding: 28px 0; cursor: pointer; list-style: none;
font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--protocol);
transition: padding .3s ease;
}
.cqg-x .wp-block-details.faq > summary::-webkit-details-marker { display: none; }
.cqg-x .wp-block-details.faq > summary::after {
content: ""; flex: none; width: 40px; height: 40px; border-radius: 20px;
background: var(--trace) url(../build/plus.svg) center / 20px 20px no-repeat;
transition: background-color .2s;
}
.cqg-x .wp-block-details.faq > summary:hover::after { background-color: var(--white); }
.cqg-x .wp-block-details.faq[open] > summary { padding-bottom: 14px; }
.cqg-x .wp-block-details.faq[open] > summary::after { background-color: var(--signal); background-image: url(../build/minus.svg); }
.cqg-x .wp-block-details.faq > :not(summary) { padding: 0 64px 28px 0; }
.cqg-x .wp-block-details.faq > :not(summary) + :not(summary) { margin-top: -16px; }
.cqg-x .wp-block-details.faq > .faq__list { list-style: disc; padding-left: 22px; display: grid; gap: 8px; }
.cqg-x .bg-protocol .wp-block-details.faq > summary { color: var(--white); }
.cqg-x [class*="grow"] > .wp-block-details.faq:first-child { border-top: 1px solid var(--border); }
.cqg-x .faq-group[hidden] { display: none !important; }
@media (max-width: 720px) {
.cqg-x .wp-block-details.faq > :not(summary) { padding-right: 0; }
}
/* FAQ topic list (built by script from the FAQ groups on the page). */
.cqg-x .faq-topics .topic { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px; color: var(--core); }
.cqg-x .faq-topics .topic:hover { background: var(--white); }
.cqg-x .faq-topics .topic.is-active { background: var(--protocol); color: var(--white); }
.cqg-x .faq-topics .topic__count { margin-left: auto; font-size: 14px; color: var(--muted); }
.cqg-x .faq-topics .topic.is-active .topic__count { color: var(--signal); }
.cqg-x .faq-topics .topic__label { padding: 16px 0 6px 12px; }
/* ---------------------------------------------------------------------------
* 6. Cards that link as a whole: the heading's link covers the card.
* ------------------------------------------------------------------------- */
.cqg-x .cqg-linkcard { position: relative; }
.cqg-x .cqg-linkcard__link { color: inherit; text-decoration: none; }
.cqg-x .cqg-linkcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cqg-x .cqg-linkcard:hover .cqg-linkcard__link { text-decoration: underline; text-underline-offset: 4px; }
.cqg-x .cqg-linkcard :is(a, button):not(.cqg-linkcard__link) { position: relative; z-index: 2; }
.editor-styles-wrapper .cqg-linkcard__link::after { display: none; }
/* ---------------------------------------------------------------------------
* 7. Lists and glossary.
* ------------------------------------------------------------------------- */
.cqg-x .wp-block-list { margin-top: 0; margin-bottom: 0; }
.cqg-x .x-gloss__list { display: grid; gap: 8px 0; }
.cqg-x .x-gloss__term { font-size: 17px; font-weight: 700; color: var(--protocol); margin-top: 16px !important; }
.cqg-x .x-gloss__def { color: var(--core); }
/* ---------------------------------------------------------------------------
* 8. Editor only: show the page design at full width and keep hidden
* script-driven pieces visible for editing.
* ------------------------------------------------------------------------- */
.editor-styles-wrapper .cqg-x { max-width: none; }
.editor-styles-wrapper .cqg-x .faq-group[hidden] { display: flex !important; }
.editor-styles-wrapper .cqg-x .faq-topics::after { content: "Topic links are added automatically from the FAQ groups below."; display: block; font-size: 13px; color: var(--muted); }
/* ---------------------------------------------------------------------------
* 9. Testimonials: core Quote blocks with the client named in the citation.
* ------------------------------------------------------------------------- */
.cqg-x .wp-block-quote.cqg-testimonial { margin: 0 auto; max-width: 940px; padding: 0; border: 0; text-align: center; display: grid; justify-items: center; gap: 20px; }
.cqg-x .wp-block-quote.cqg-testimonial::before { content: "\201C"; display: block; font-size: 88px; line-height: .6; height: 44px; color: var(--signal); font-weight: 700; }
.cqg-x .wp-block-quote.cqg-testimonial p { margin: 0; color: #fff; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.35; font-weight: 500; letter-spacing: -0.4px; }
.cqg-x .wp-block-quote.cqg-testimonial cite { display: flex; align-items: center; gap: 14px; color: var(--signal); font-size: 13px; font-weight: 700; font-style: normal; letter-spacing: 1.56px; text-transform: uppercase; }
.cqg-x .wp-block-quote.cqg-testimonial cite::before { content: ""; width: 32px; height: 2px; background: currentColor; }
.cqg-x .wp-block-quote.cqg-tcard { margin: 0; padding: 36px 32px; border: 0; border-radius: 20px; background: #fff; display: flex; flex-direction: column; gap: 16px; text-align: left; transition: transform .5s var(--ease-out, ease), box-shadow .5s var(--ease-out, ease); }
.cqg-x .wp-block-quote.cqg-tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift, 0 24px 48px -28px rgba(10, 41, 63, .35)); }
.cqg-x .wp-block-quote.cqg-tcard::before { content: "\201C"; display: block; font-size: 64px; line-height: .6; height: 30px; color: var(--c-green, var(--signal-deep)); font-weight: 700; }
.cqg-x .wp-block-quote.cqg-tcard p { margin: 0; flex: 1; font-size: 20px; line-height: 1.5; color: var(--protocol); font-weight: 500; }
.cqg-x .wp-block-quote.cqg-tcard cite { font-size: 13px; font-weight: 700; font-style: normal; letter-spacing: 1.2px; text-transform: uppercase; color: var(--steel); }
/* An image block without classes of its own steps out of the layout, so the design's
rules for the ![]()
(size, fit, position in a flex row) apply exactly as before. */
.cqg-x figure[class="wp-block-image"] { display: contents; }
/* Image blocks carrying the design's classes: the figure is the sized box. */
.cqg-x .wp-block-image:not([class="wp-block-image"]):not(.cqg-icon) img { max-width: 100%; max-height: 100%; }
/* Text inside whole-card links takes the card's colour unless it sets its own. */
.cqg-x :where(.cqg-linkcard p) { color: inherit; }