/* WordPress glue for the prototype CSS. Keep this file small; design rules belong in the prototype files. */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * + * { margin-block-start: 0; }
/* Block groups add a gap between children; the footer layout sets its own spacing. */
.cp-footer .wrap.wp-block-group,
.cp-footer .footer-cols > .wp-block-group { margin-block: 0; }
.cp-footer .footer-blurb { max-width: 24rem; margin: 0; }
.cp-footer .wp-block-list { list-style: none; padding: 0; margin: 0; }
.cp-footer figure, .cp-footer .wp-block-html { margin: 0; }

/* Templates: page header band, byline, post lists, search form. */
.cp-main { display: block; }
.ph .wp-block-post-title, .ph .wp-block-query-title { margin: 0; max-width: 46rem; }
.ph .cp-lead { margin: var(--cp-space-4) 0 0; max-width: 40rem; }
.ph .wp-block-post-title.cp-post-title { max-width: 40ch; font-size: var(--cp-text-post-title); line-height: 1.15; letter-spacing: -0.012em; }
.cp-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin-top: var(--cp-space-4); font-size: var(--cp-text-sm); color: var(--cp-slate); }
.cp-byline p, .cp-byline .wp-block-post-date { margin: 0; }
.cp-single { padding-block: var(--cp-space-7) var(--cp-space-8); }
.cp-list { padding-block: var(--cp-space-7) var(--cp-space-8); }
.cp-list .wp-block-post-template { list-style: none; margin: 0; padding: 0; gap: var(--cp-space-5); }
.cp-card { height: 100%; overflow: hidden; background: var(--cp-white); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-md); box-shadow: var(--cp-shadow-soft); }
.cp-card .wp-block-post-featured-image { margin: 0; }
.cp-card .wp-block-post-featured-image img { width: 100%; height: auto; display: block; }
.cp-card__body { padding: var(--cp-space-5); }
.cp-card .wp-block-post-title { margin: 0 0 var(--cp-space-2); }
.cp-card .wp-block-post-title a { text-decoration: none; }
.cp-card .wp-block-post-date { margin: 0 0 var(--cp-space-2); font-size: var(--cp-text-xs); color: var(--cp-placeholder); }
.cp-card .wp-block-post-excerpt { margin: 0; font-size: var(--cp-text-sm); }
.cp-list .wp-block-query-pagination { justify-content: center; gap: var(--cp-space-3); margin-top: var(--cp-space-7); }
.cp-search { margin: var(--cp-space-5) 0 0; max-width: 40rem; }
.cp-search .wp-block-search__inside-wrapper { gap: var(--cp-space-2); }
.cp-search .wp-block-search__input { padding: .85rem 1.2rem; background: var(--cp-white); border: 1.5px solid var(--cp-border-input); border-radius: var(--cp-radius-pill); font: inherit; }
.cp-search .wp-block-search__button { margin: 0; padding: .85rem 1.6rem; background: var(--cp-midnight); color: var(--cp-white); border: 0; border-radius: var(--cp-radius-pill); font-weight: 600; }
.cp-search .wp-block-search__button:hover { background: var(--cp-midnight-soft); color: var(--cp-white); }
.cp-actions .wp-block-buttons { margin-top: var(--cp-space-5); }

/* Guide (post) design. The prototype's .post-layout has three columns; guides have no "At a glance" card, so they use two. */
.post-layout--guide { grid-template-columns: 13rem minmax(0, 44rem); grid-template-areas: "rail top" "rail body"; }
@media (max-width: 1200px) { .post-layout--guide { grid-template-columns: minmax(0, 44rem); grid-template-areas: "top" "body"; } }
.post-top .wp-block-post-title { margin: 0 0 var(--cp-space-4); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem var(--cp-space-4); }
.post-meta > p, .post-meta > .wp-block-group { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.post-meta > * + *::before { content: ""; width: 3px; height: 3px; margin-right: var(--cp-space-1); border-radius: 50%; background: var(--cp-slate); }
.post-meta .wp-block-post-date, .post-meta p { margin: 0; }
.post-figure { margin: 0 0 var(--cp-space-7); }
.post-body .cp-article { max-width: none; }
.post-tags .wp-block-post-terms { display: flex; flex-wrap: wrap; gap: var(--cp-space-2); }
.post-tags .wp-block-post-terms__separator { display: none; }
.post-tags .wp-block-post-terms a { display: inline-block; padding: .35rem .9rem; background: var(--cp-oat); color: var(--cp-midnight); border-radius: var(--cp-radius-xs); font-size: var(--cp-text-xs); font-weight: 500; text-decoration: none; }
.post-tags .wp-block-post-terms a:hover { background: var(--cp-line); }
.post-tags p { margin: 0 var(--cp-space-2) 0 0; font-size: var(--cp-text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-slate); }
.cp-author p { margin: 0 0 var(--cp-space-2); }
.pn .wp-block-post-navigation-link { margin: 0; padding: var(--cp-space-5); background: var(--cp-white); border: 1px solid var(--cp-line); border-radius: var(--cp-radius-md); }
.pn .wp-block-post-navigation-link:hover { border-color: var(--cp-midnight); box-shadow: var(--cp-shadow-soft); }
.pn .wp-block-post-navigation-link a { display: inline; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; font-family: var(--cp-font-heading); font-size: var(--cp-text-lg); line-height: 1.25; color: var(--cp-midnight); text-decoration: none; }
.pn .post-navigation-link__label { display: block; margin-bottom: .35rem; font-size: var(--cp-text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cp-sage-deep); }
.pn .post-navigation-link-next { grid-column: 2; text-align: right; }
@media (max-width: 560px) { .pn .post-navigation-link-next { grid-column: 1; text-align: left; } }
.pcard .cover--img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--cp-radius-md); background: var(--cp-oat); }
.pcard .cover--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-readtime { font-size: var(--cp-text-xs); }

/* Comments */
.cp-comments { margin-top: var(--cp-space-8); }
.cp-comments .wp-block-comments-title, .cp-comments .comment-reply-title { margin: 0 0 var(--cp-space-4); font-size: var(--cp-text-xl); font-weight: 400; }
.cp-comments .wp-block-comment-template { list-style: none; margin: 0 0 var(--cp-space-6); padding: 0; }
.cp-comment { padding: var(--cp-space-4) 0; border-bottom: 1px solid var(--cp-line); }
.cp-comment__head { display: flex; align-items: center; gap: var(--cp-space-3); margin-bottom: var(--cp-space-2); font-size: var(--cp-text-sm); }
.cp-comments label { display: block; margin-bottom: var(--cp-space-1); font-size: var(--cp-text-sm); font-weight: 600; color: var(--cp-midnight); }
.cp-comments input[type="text"], .cp-comments input[type="email"], .cp-comments input[type="url"], .cp-comments textarea { width: 100%; padding: .75rem 1rem; background: var(--cp-white); border: 1.5px solid var(--cp-border-input); border-radius: var(--cp-radius-sm); font: inherit; color: var(--cp-slate); }
.cp-comments .comment-form > p { margin: 0 0 var(--cp-space-4); }
.cp-comments .comment-form-cookies-consent { display: flex; gap: var(--cp-space-2); align-items: flex-start; font-size: var(--cp-text-sm); }
.cp-comments .comment-form-cookies-consent label { display: inline; margin: 0; font-weight: 400; }
.cp-comments .form-submit .wp-element-button, .cp-comments .form-submit input[type="submit"] { padding: .85rem 1.6rem; background: var(--cp-midnight); color: var(--cp-white); border: 0; border-radius: var(--cp-radius-pill); font: 600 var(--cp-text-sm) var(--cp-font-body); cursor: pointer; }
.cp-comments .form-submit .wp-element-button:hover, .cp-comments .form-submit input[type="submit"]:hover { background: var(--cp-midnight-soft); }

/* Post titles run 60-90 characters, so they use the article scale (design system), not the page-title size. */
.post-top .wp-block-post-title.cp-post-title { font-size: var(--cp-text-post-title); font-weight: 400; line-height: 1.15; letter-spacing: -0.012em; }
.pn .wp-block-post-navigation-link { display: block; }

/* Archives, search results and the 404 page. */
.cp-list .wp-block-post-template.is-layout-grid { gap: var(--cp-space-6) var(--cp-space-5); }
@media (max-width: 960px) { .cp-list .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cp-list .wp-block-post-template.is-layout-grid { grid-template-columns: minmax(0, 1fr); } }
.cp-card { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.cp-card .wp-block-post-featured-image { overflow: hidden; border-radius: var(--cp-radius-md); background: var(--cp-oat); transition: transform var(--cp-dur-base) var(--cp-ease); }
.cp-card:hover .wp-block-post-featured-image { transform: translateY(-4px); }
.cp-card .wp-block-post-featured-image img { aspect-ratio: 16 / 10; object-fit: cover; }
.cp-card__body { padding: var(--cp-space-4) 0 0; }
.cp-kind { margin: 0 0 var(--cp-space-2); font-size: var(--cp-text-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-sage-deep); }
.cp-kind a { color: inherit; text-decoration: none; }
.cp-kind a:not(:first-of-type), .cp-kind .wp-block-post-terms__separator { display: none; }
.cp-card .wp-block-post-title { font-size: var(--cp-text-card); font-weight: 400; line-height: 1.25; }
.cp-card .wp-block-post-title a:hover { color: var(--cp-sage-deep); text-decoration: underline; }
.cp-card .wp-block-post-date { margin: 0; font-size: var(--cp-text-xs); color: var(--cp-placeholder); }
.cp-rows .wp-block-post-template { display: block; }
.cp-row { padding: var(--cp-space-5) 0; border-bottom: 1px solid var(--cp-line); }
.cp-row .wp-block-post-title { margin: 0 0 var(--cp-space-2); font-size: var(--cp-text-card); font-weight: 400; line-height: 1.25; }
.cp-row .wp-block-post-title a { text-decoration: none; }
.cp-row .wp-block-post-title a:hover { color: var(--cp-sage-deep); text-decoration: underline; }
.cp-row .wp-block-post-excerpt { margin: 0 0 var(--cp-space-2); font-size: var(--cp-text-sm); }
.cp-row .wp-block-post-date { margin: 0; font-size: var(--cp-text-xs); color: var(--cp-placeholder); }
.cp-eyebrow { margin: 0 0 var(--cp-space-3); }
.ph .cp-crumbs { margin-bottom: var(--cp-space-5); }
.nf { text-align: left; }
.cp-list-head { padding-top: var(--cp-space-7); }
.cp-list-head .wp-block-heading { margin: 0; font-size: var(--cp-text-2xl); }
.cp-list-head + .cp-list { padding-top: var(--cp-space-5); }

/* Roundup and review layouts: with no side card the layout falls back to the two-column guide layout. */
.post-layout:not(.post-layout--guide):not(:has(.post-card)) { grid-template-columns: 13rem minmax(0, 44rem); grid-template-areas: "rail top" "rail body"; }
@media (max-width: 1200px) { .post-layout:not(.post-layout--guide):not(:has(.post-card)) { grid-template-columns: minmax(0, 44rem); grid-template-areas: "top" "body"; } }
.post-card .post-card__media img { display: block; width: 100%; height: auto; border-radius: var(--cp-radius-md); }
.post-body > .quick { margin-bottom: var(--cp-space-6); }
.post-dates { margin: 0; }
.cp-faq__a { padding-bottom: var(--cp-space-4); }
.cp-faq__a > * { margin-top: 0; margin-bottom: var(--cp-space-3); }
.cp-faq__a > :last-child { margin-bottom: 0; }
.cp-faq details p { padding-bottom: 0; }
.post-card .glance a { color: inherit; }
.cp-article .cp-table-wrap { margin: var(--cp-space-6) 0; }

/* Contact form (Fluent Forms) in the design's input style. The form prefix beats Fluent Forms' own selectors. */
.cp-contact-form { padding-top: 0; }
.cp-contact-form .fluentform { max-width: 44rem; margin-inline: auto; }
.cp-contact-form form.fluent_form_3 .ff-el-input--label label { margin-bottom: var(--cp-space-1); font-size: var(--cp-text-sm); font-weight: 600; color: var(--cp-midnight); }
.cp-contact-form form.fluent_form_3 .ff-el-form-control { padding: .75rem 1rem; background: var(--cp-white); border: 1.5px solid var(--cp-border-input); border-radius: var(--cp-radius-sm); font: inherit; color: var(--cp-slate); box-shadow: none; }
.cp-contact-form form.fluent_form_3 .ff-el-form-control:focus { border-color: var(--cp-midnight); box-shadow: var(--cp-ring); outline: 0; }
.cp-contact-form form.fluent_form_3 .ff-el-group { margin-bottom: var(--cp-space-4); }
.cp-contact-form form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style) { padding: .85rem 1.6rem; background-color: var(--cp-midnight); color: var(--cp-white); border: 0; border-radius: var(--cp-radius-pill); font: 600 var(--cp-text-sm) var(--cp-font-body); box-shadow: none; }
.cp-contact-form form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style):hover, .cp-contact-form form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style):focus { background-color: var(--cp-midnight-soft); color: var(--cp-white); opacity: 1; }
.cp-contact-form .ff-message-success { padding: var(--cp-space-4); background: var(--cp-success-bg); color: var(--cp-success-text); border: 1px solid var(--cp-success-line); border-radius: var(--cp-radius-sm); }
.cp-contact-form .text-danger { color: var(--cp-error-text); font-size: var(--cp-text-sm); }
