/* ==========================================================================
   WordPress glue: things the design system doesn't know about
   (WordPress markup, block editor output, menus, comments).
   ========================================================================== */

/* Top bar */
.wc-topbar__claim{margin:0;color:#fff;font-weight:600}
.wc-topbar__links{gap:.25rem 1.1rem}
.wc-topbar__menu{display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;margin:0;padding:0;list-style:none}

/* Footer: about + up to four link columns */
.wc-footer__grid{grid-template-columns:1.5fr repeat(4,minmax(0,1fr))}
.wc-footer__title{margin:0 0 1.1rem;color:#fff;font-family:var(--wc-font-display);font-size:var(--wc-text-sm);font-weight:900;font-style:italic;font-stretch:var(--wc-display-width);letter-spacing:.1em;text-transform:uppercase}
.wc-footer .menu{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
.wc-footer__legal-menu{display:flex;flex-wrap:wrap;gap:1.25rem;margin:0;padding:0;list-style:none}
@media (max-width:1080px){ .wc-footer__grid{grid-template-columns:repeat(3,minmax(0,1fr))} .wc-footer__about{grid-column:1/-1} }
@media (max-width:640px){ .wc-footer__grid{grid-template-columns:1fr} }

/* Block-editor layout gaps must not push apart design-system grids and stacks (they use gap). */
body :is(.wc-hero__grid,.wc-page-hero__grid,.wc-hero__copy,.wc-page-hero__copy,.wc-hero__visual,.wc-grid,.wc-split,.wc-stack,.wc-towns,.wc-features,.wc-tiles,.wc-cta-row,.wc-quote-panel__grid,.wc-section-head,.wc-contact-bar__fields,.wc-cta-banner,.wc-overhang) > *{margin-block:0}
.wc-content.wc-content--canvas > *{margin-block:0}
body .wc-container{margin-inline:auto}
.wc-section > .wc-container > * + *{margin-block-start:1.1rem}
.wc-section .wc-section-head{margin-bottom:var(--wc-space-6)}
.wc-more{margin-top:1.5rem!important}
.wc-more a{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;text-decoration:none}
.wc-more a:hover{text-decoration:underline}
.wc-hero .wc-photo img,.wc-page-hero__media img{height:100%}
.wp-block-image.wc-photo,.wp-block-image.wc-page-hero__media{margin:0}
.wc-media-card .wp-block-image,.wc-split .wp-block-image{margin:0}
.wc-split .wp-block-image img{width:100%;border-radius:var(--wc-radius);aspect-ratio:768/654;object-fit:cover}

/* Reach scale: ticks every 5ft for a 70ft reach */
.wc-reach::before{background:repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 1px,transparent 1px calc(100% / 14)),linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)) right/1px 100% no-repeat}

/* Trust strip */
.wc-trust{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;margin:0;padding:0;list-style:none}
.wc-trust li{display:flex;align-items:center;gap:.6rem;font-weight:700;line-height:1.3}
.wc-trust svg{width:26px;height:26px;flex:none;color:var(--wc-accent-text)}
@media (max-width:960px){ .wc-trust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .wc-trust{grid-template-columns:1fr} }

/* Sector tiles */
.wc-sector{align-items:flex-start;min-height:118px;padding:1.25rem}
.wc-sector b{display:block;font-family:var(--wc-font-display);font-size:var(--wc-text-md);font-weight:900;font-style:italic;font-stretch:var(--wc-display-width);text-transform:uppercase;line-height:1.1}
.wc-sector small{display:block;margin-top:.45rem;font-size:.95rem;font-weight:400;color:var(--wc-text-muted)}
.wc-sector svg{margin-top:.2rem}

/* Client logos: square white tiles; the files are pre-trimmed 480px squares, so each fills its tile.
   8 across on desktop, 4 on tablets, 3 on phones; a short last row sits centred. */
.wc-logos{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:0;padding:0;list-style:none}
.wc-logos li{flex:0 0 calc((100% - 7rem) / 8);aspect-ratio:1/1;padding:0;overflow:hidden}
.wc-logos img{display:block;width:100%;height:100%;max-height:none;object-fit:contain}
/* Light logos: a darker grey at rest. Inverting around the brightness step darkens the lines but keeps white white. */
.wc-logos li.wc-logos__pale img{filter:grayscale(1) invert(1) brightness(3.6) invert(1)}
.wc-logos li.wc-logos__pale:hover img{filter:none}
.wc-logos__name span{padding:.75rem;font-size:var(--wc-text-sm);font-weight:800;line-height:1.25;text-align:center;color:var(--wc-strong)}
@media (max-width:1080px){ .wc-logos li{flex-basis:calc((100% - 3rem) / 4)} }
@media (max-width:640px){ .wc-logos{gap:.75rem} .wc-logos li{flex-basis:calc((100% - 1.5rem) / 3)} }

/* Client names (fallback styling, no longer used by [wc_clients]) */
.wc-client-names{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:0;padding:0;list-style:none}
.wc-client-names li{display:grid;place-items:center;min-height:72px;padding:.75rem;text-align:center;font-weight:800;line-height:1.25;background:var(--wc-surface);border:1px solid var(--wc-border);border-radius:var(--wc-radius)}
:where(.wc-section--band) .wc-client-names li{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16);color:#fff}
@media (max-width:960px){ .wc-client-names{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* FAQ built from the core Details block */
.wc-faq .wp-block-details{margin:0;border-bottom:1px solid var(--wc-border)}
.wc-faq .wp-block-details summary{position:relative;display:block;padding:1.35rem 3rem 1.35rem 0;list-style:none;font-family:var(--wc-font-display);font-size:var(--wc-text-base);font-weight:800;font-style:italic;font-stretch:108%;letter-spacing:.02em;text-transform:uppercase;line-height:1.3;cursor:pointer}
.wc-faq .wp-block-details summary::-webkit-details-marker{display:none}
.wc-faq .wp-block-details summary::after{content:"+";position:absolute;right:0;top:50%;display:grid;place-items:center;width:30px;height:30px;margin-top:-15px;border:1px solid var(--wc-border);border-radius:50%;font-family:var(--wc-font-body);font-style:normal;font-weight:700;font-size:1.1rem;line-height:1;transition:transform var(--wc-dur) var(--wc-ease),background-color var(--wc-dur) ease}
.wc-faq .wp-block-details[open] summary::after{transform:rotate(45deg);background:var(--wc-action);border-color:var(--wc-action);color:#fff}
.wc-faq .wp-block-details summary:hover{color:var(--wc-link)}
.wc-faq .wp-block-details > :not(summary){max-width:62ch;margin:0 0 1.25rem;color:var(--wc-text-muted)}

/* Core button block styles mapped to the design system */
.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:.75rem 1.4rem;background:var(--wc-action);color:#fff;border:2px solid transparent;border-radius:var(--wc-radius);font-family:var(--wc-font-display);font-size:var(--wc-text-sm);font-weight:800;font-style:italic;font-stretch:115%;letter-spacing:var(--wc-track-caps);text-transform:uppercase;text-decoration:none}
.wp-block-button__link:hover{background:var(--wc-action-hover);color:#fff}
.wp-block-button.is-style-secondary .wp-block-button__link{background:transparent;border-color:var(--wc-strong);color:var(--wc-strong)}
.wp-block-button.is-style-on-dark .wp-block-button__link{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}

/* Page content from the block editor */
.wc-content{padding-block:0}
.wc-content > * + *{margin-block-start:0}
/* The front page renders through the Canvas template but keeps the default-template body class, hence :not(--canvas). */
.page-template-default .wc-content:not(.wc-content--canvas),
.page-template-page-templatescanvas-php .wc-content:not(.wc-content--canvas){padding-block:clamp(2.5rem,5vw,4rem)}
.page-template-default .wc-content:not(.wc-content--canvas) > * + *{margin-block-start:1.1em}
/* Grid columns line up at the top edge: no flow spacing on the second column. */
.wc-section > .wc-container:is(.wc-split,.wc-grid,.wc-quote-panel__grid) > *{margin-block-start:0}
/* Cards built from a Group block (heading + list); body raises it above the list styles' margin:0 */
body .wp-block-group.wc-form-card > * + *{margin-block-start:1.25rem}
.wc-content--canvas > .alignfull:first-child{margin-block-start:0}
.wc-content :where(p,ul,ol) a{font-weight:600}
.wp-block-image img{border-radius:var(--wc-radius)}

/* List block styles: "Ticks" (checklist) and "Numbered steps" */
.wp-block-list.is-style-ticks{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}
.wp-block-list.is-style-ticks li{position:relative;padding-left:2rem;line-height:1.45}
.wp-block-list.is-style-ticks li::before{content:"";position:absolute;left:0;top:.05em;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--wc-accent-text) 14%,transparent)}
.wp-block-list.is-style-ticks li::after{content:"";position:absolute;left:6.5px;top:calc(.05em + 7px);width:9px;height:5px;border-left:2.2px solid var(--wc-accent-text);border-bottom:2.2px solid var(--wc-accent-text);transform:rotate(-45deg)}
:where(.wc-section--band,.wc-quote-panel,.wc-hero,.wc-page-hero) .wp-block-list.is-style-ticks li::before{background:rgba(166,217,60,.18)}
:where(.wc-section--band,.wc-quote-panel,.wc-hero,.wc-page-hero) .wp-block-list.is-style-ticks li::after{border-color:var(--wc-on-band-accent)}
/* Ticks as glass tiles, side by side (quote panels). Add "wc-perks" to a Ticks list. */
.wp-block-list.is-style-ticks.wc-perks{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.75rem}
.wp-block-list.is-style-ticks.wc-perks li{display:flex;align-items:center;min-height:56px;padding:.9rem 1.1rem .9rem 3.1rem;background:rgba(255,255,255,.05);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:var(--wc-radius);font-weight:600;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:border-color var(--wc-dur-fast) ease,background-color var(--wc-dur-fast) ease}
.wp-block-list.is-style-ticks.wc-perks li:hover{background:rgba(114,165,2,.18);border-color:var(--wc-green-300)}
.wp-block-list.is-style-ticks.wc-perks li::before{left:1.1rem;top:50%;margin-top:-11px}
.wp-block-list.is-style-ticks.wc-perks li::after{left:calc(1.1rem + 6.5px);top:calc(50% - 4px)}
/* Links inside a white card on a navy band keep the normal link colour */
.wc-form-card :where(p,li) a:not(.wc-btn){color:var(--wc-link);text-decoration-color:currentColor}
.wc-trust-band{padding-bottom:clamp(1.75rem,3vw,2.75rem);border-bottom:1px solid var(--wc-border)}
.wc-trust-band.wc-after-overhang{padding-top:calc(var(--wc-overhang) + clamp(1.75rem,3vw,2.75rem))}
.wc-testimonials{margin-top:var(--wc-space-6)!important}
.wp-block-list.wc-area-list{margin:0;padding:0;list-style:none}
.wc-contact-map{margin-top:clamp(2.5rem,5vw,4rem)!important}
.wc-contact-map > * + *{margin-block-start:1rem}
.wp-block-list.is-style-steps{display:grid;gap:1rem;margin:0;padding:0;list-style:none;counter-reset:wc-list}
.wp-block-list.is-style-steps li{position:relative;padding-left:2.75rem;line-height:1.45;color:var(--wc-text-muted)}
.wp-block-list.is-style-steps li::before{counter-increment:wc-list;content:counter(wc-list);position:absolute;left:0;top:-.1em;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--wc-action);color:#fff;font-family:var(--wc-font-display);font-weight:900;font-style:italic;font-size:.9rem}
.wp-block-list.is-style-steps li strong{display:block;color:var(--wc-text)}
:where(.wc-section--band,.wc-quote-panel,.wc-hero,.wc-page-hero) .wp-block-list.is-style-steps li{color:var(--wc-on-band-muted)}
:where(.wc-section--band,.wc-quote-panel,.wc-hero,.wc-page-hero) .wp-block-list.is-style-steps li strong{color:#fff}

/* Industry tiles on a photo band (homepage "Who we clean for") */
.wc-industries{--wc-photo:url("/wp-content/uploads/window-cleaners-rotherham.jpg")}
.wc-tile--glass.wc-sector small{color:var(--wc-on-band-muted)}

/* Jump links (e.g. FAQ groups in a page hero): glass pills with the green hover */
.wp-block-list.wc-jump{display:flex;flex-wrap:wrap;gap:.5rem;margin:.25rem 0 0;padding:0;list-style:none}
.wc-jump a{display:inline-flex;align-items:center;min-height:42px;padding:.45rem 1rem;background:rgba(255,255,255,.05);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:var(--wc-radius-pill);font-size:var(--wc-text-sm);font-weight:700;text-decoration:none;transition:border-color var(--wc-dur-fast) ease,background-color var(--wc-dur-fast) ease}
.wc-jump a:hover{background:rgba(114,165,2,.18);border-color:var(--wc-green-300);text-decoration:none}

/* Cookie consent: a small corner card, no overlay; on phones it sits just above the mobile action bar */
.wc-consent{position:fixed;left:1rem;bottom:1rem;z-index:var(--wc-z-dialog);display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;width:min(25rem,calc(100% - 2rem));padding:.85rem 1rem;background:var(--wc-surface);color:var(--wc-text);border:1px solid var(--wc-border);border-radius:var(--wc-radius-lg);box-shadow:var(--wc-shadow-2);font-size:var(--wc-text-sm);line-height:1.45}
.wc-consent p{flex:1 1 13rem;margin:0}
.wc-consent p a{font-weight:600}
.wc-consent__actions{display:flex;gap:.5rem}
.wc-consent__actions .wc-btn{min-height:36px;padding:.4rem .95rem}
@media (max-width:640px){ .wc-consent{left:.75rem;right:.75rem;width:auto;bottom:calc(76px + .5rem + env(safe-area-inset-bottom));padding:.7rem .85rem} }

/* Legal pages (privacy policy, email disclaimer) */
.wc-prose .wc-legal-list{padding-left:1.3rem;list-style:disc}
.wc-prose .wc-legal-list li+li{margin-top:.5em}
.wc-prose code{font-size:.9em;padding:.05em .3em;background:var(--wc-surface-tint);border-radius:var(--wc-radius-sm)}

/* Photo gallery: square photos with captions */
.wc-gallery .wp-block-image{margin:0}
.wc-gallery .wp-block-image img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--wc-radius)}
.wc-gallery .wp-block-image figcaption{margin:.6rem 0 0;font-size:var(--wc-text-sm);font-weight:600;color:var(--wc-text-muted);text-align:left}
@media (max-width:640px){ .wc-grid--4.wc-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem} }

/* Team: photo cards, with an initial standing in until a photo is added */
.wc-team{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--wc-space-5)}
.wc-team-card{display:grid;gap:.85rem;align-content:start}
.wc-team-card > *{margin:0}
.wc-team-card__initial{display:grid;place-items:center;aspect-ratio:4/5;background:var(--wc-band);color:var(--wc-on-band-accent);border-radius:var(--wc-radius);font-family:var(--wc-font-display);font-size:clamp(3rem,2rem + 3vw,5rem);font-weight:900;font-style:italic;line-height:1;background-image:repeating-linear-gradient(90deg,var(--wc-band-line) 0 1px,transparent 1px 60px),repeating-linear-gradient(0deg,var(--wc-band-line) 0 1px,transparent 1px 90px)}
.wc-team-card .wp-block-image img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--wc-radius)}
@media (max-width:960px){ .wc-team{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){ .wc-team{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* A single statement on a band (e.g. the About guarantee) */
.wc-guarantee{display:grid;gap:1rem;max-width:960px}
.wc-guarantee .wc-statement{color:#fff}

/* Points under a green rule (e.g. safety on a navy band) */
.wc-points > *{padding-top:1.1rem;border-top:2px solid var(--wc-accent)}
:where(.wc-section--band) .wc-points p{color:var(--wc-on-band-muted)}

/* Areas: town tiles or area list beside the drawn map */
.wc-areas .wc-area-list{columns:3 9rem;column-gap:1.5rem}
@media (min-width:961px){ .wc-split--top.wc-areas > .wc-map{position:sticky;top:110px} }
@media (min-width:641px){ .wc-areas .wc-towns{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Once the columns stack (tablets), the map would span the full width and run very tall: cap it and centre it */
@media (max-width:960px){ .wc-areas > .wc-map{width:100%;max-width:560px;margin-inline:auto} }
/* Contact page: on phones the paragraph already names the towns, so the stacked town tiles would only add length */
@media (max-width:640px){ .wc-contact-map .wc-towns{display:none} }

/* Drawn coverage map: South Yorkshire with the surrounding region for context */
.wc-map--coverage{aspect-ratio:10/9;
  --wc-map-bg:color-mix(in srgb,var(--wc-bg) 55%,var(--wc-surface));
  --wc-map-area:color-mix(in srgb,var(--wc-accent) 15%,transparent);
  --wc-map-edge:color-mix(in srgb,var(--wc-accent) 75%,transparent);
  --wc-map-edge-t:var(--wc-accent-text);
  --wc-map-peak:color-mix(in srgb,var(--wc-strong) 6%,transparent);
  --wc-map-peak-t:color-mix(in srgb,var(--wc-text-muted) 85%,transparent);
  --wc-map-water:color-mix(in srgb,var(--wc-blue-400) 38%,var(--wc-surface));
  --wc-map-casing:color-mix(in srgb,var(--wc-strong) 20%,var(--wc-border));
  --wc-map-ctx:color-mix(in srgb,var(--wc-text-muted) 80%,transparent)}

/* Quote page: form beside "what happens next" */
.wc-quote-layout{gap:clamp(1.5rem,4vw,3rem)!important;align-items:flex-start!important}
.wc-quote-layout .wp-block-column > * + *{margin-block-start:1.25rem}
.wc-quote-layout .wp-block-group.wc-form-card > * + *{margin-block-start:1rem}
.wc-quote-layout .wc-testimonial p{margin:0}
.wc-testimonial .wp-block-quote{margin:0;padding:0;border:0}
.wc-testimonial .wp-block-quote p{font-family:var(--wc-font-display);font-size:var(--wc-text-md);font-weight:500;font-style:italic;line-height:1.45;color:var(--wc-text)}
.wc-testimonial .wp-block-quote::before{content:"\201C";display:block;margin-bottom:.4rem;color:var(--wc-accent);font-family:var(--wc-font-display);font-size:3.5rem;font-weight:900;line-height:.6}
.wc-testimonial cite{display:block;margin-top:.9rem;font-size:var(--wc-text-sm);font-style:normal;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--wc-text)}

/* Article image above post text */
.wc-article-image{max-width:var(--wc-measure);margin:0 0 2rem}
.wc-article-image img{width:100%;border-radius:var(--wc-radius)}

/* Blog: the featured guide beside its photo, and topic chips (the current topic filled) */
.wc-post-card--featured{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.wc-post-card--featured .wc-post-card__media{aspect-ratio:auto}
.wc-post-card--featured .wc-post-card__body{justify-content:center;padding:clamp(1.6rem,4vw,3rem)}
.wc-post-card--featured .wc-post-card__more{margin-top:.5rem}
@media (max-width:860px){ .wc-post-card--featured{grid-template-columns:1fr} .wc-post-card--featured .wc-post-card__media{aspect-ratio:16/9} }
.wc-chip[aria-current],a.wc-chip[aria-current]:hover{background:var(--wc-action);border-color:var(--wc-action);color:#fff}

/* Guide layout: text at reading width beside a sticky "In this guide" box and quote card (desktop only;
   on smaller screens the text fills the width and the mobile action bar carries the quote button) */
.wc-article{display:grid;grid-template-columns:minmax(0,var(--wc-measure)) minmax(260px,320px);justify-content:space-between;align-items:start;gap:3rem}
.wc-section > .wc-container.wc-article > *{margin:0}
.wc-article__aside{position:sticky;top:110px;display:grid;gap:1.25rem}
.wc-toc{padding:1.25rem 1.4rem;background:var(--wc-bg);border:1px solid var(--wc-border);border-radius:var(--wc-radius)}
.wc-toc__title{margin:0 0 .75rem;font-size:var(--wc-text-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--wc-text-muted)}
.wc-toc ol{display:grid;gap:.1rem;margin:0;padding:0;list-style:none}
.wc-toc a{display:block;padding:.35rem 0 .35rem .8rem;border-left:2px solid var(--wc-border);color:var(--wc-text);font-size:var(--wc-text-sm);font-weight:600;line-height:1.35;text-decoration:none;transition:border-color var(--wc-dur-fast) ease,color var(--wc-dur-fast) ease}
.wc-toc a:hover{border-color:var(--wc-accent);color:var(--wc-link)}
.wc-aside-cta{display:grid;gap:.9rem;padding:1.5rem;background:var(--wc-band);color:var(--wc-on-band);border-radius:var(--wc-radius)}
.wc-aside-cta p{margin:0;font-size:var(--wc-text-sm);color:var(--wc-on-band-muted)}
.wc-aside-cta .wc-aside-cta__title{font-family:var(--wc-font-display);font-size:var(--wc-text-md);font-weight:900;font-style:italic;font-stretch:var(--wc-display-width);line-height:1.15;text-transform:uppercase;color:#fff}
.wc-aside-cta .wc-cta-row{display:grid;gap:.6rem}
.wc-aside-cta .wc-btn{width:100%;justify-content:center}
.wc-prose h2[id]{scroll-margin-top:120px}
@media (max-width:1080px){ .wc-article{grid-template-columns:minmax(0,1fr)} .wc-article__aside{display:none} }

/* Guide text: the short-answer box, a note for building managers, tables and FAQs inside the article */
.wc-answer{padding:1.25rem 1.5rem;background:var(--wc-surface-tint);border-left:4px solid var(--wc-accent);border-radius:0 var(--wc-radius) var(--wc-radius) 0}
.wc-prose .wc-answer > *{margin:0}
.wc-prose .wc-answer > * + *{margin-top:.5rem}
.wc-answer p:not(.wc-kicker){font-size:var(--wc-text-md);line-height:1.55;color:var(--wc-text)}
.wc-note{padding:1.5rem;background:var(--wc-bg);border:1px solid var(--wc-border);border-top:4px solid var(--wc-action);border-radius:var(--wc-radius)}
.wc-prose .wc-note > *{margin:0}
.wc-prose .wc-note > * + *{margin-top:.9rem}
.wc-prose .wp-block-table{margin-inline:0;overflow-x:auto}
.wc-prose .wp-block-table td:first-child{font-weight:700}

/* Comments */
.wc-comments-area{display:grid;gap:1.25rem;max-width:var(--wc-measure);margin-top:3rem;padding-top:2rem;border-top:1px solid var(--wc-border)}
.wc-comment-list{display:grid;gap:1rem;margin:0;padding:0;list-style:none}
.wc-comment-list .children{margin:1rem 0 0 clamp(1rem,5vw,3rem);padding:0;list-style:none}
.wc-comment-list .comment-body{padding:1.25rem;background:var(--wc-surface);border:1px solid var(--wc-border);border-radius:var(--wc-radius)}
.wc-comment-list .comment-author{display:flex;align-items:center;gap:.75rem;font-weight:800}
.wc-comment-list .avatar{border-radius:50%}
.wc-comment-list .comment-metadata{font-size:var(--wc-text-sm)}
.wc-comment-list .comment-metadata a{color:var(--wc-text-muted);text-decoration:none}
.comment-respond{display:grid;gap:1rem}
.comment-form{display:grid;gap:1rem}
.comment-form :is(input[type="text"],input[type="email"],input[type="url"],textarea){width:100%;min-height:48px;padding:.7rem .85rem;background:var(--wc-bg);color:var(--wc-text);border:1px solid var(--wc-border);border-radius:var(--wc-radius-sm);font:inherit}
.comment-form label{display:block;margin-bottom:.35rem;font-size:var(--wc-text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--wc-text-muted)}

/* WordPress's own screen-reader class */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;margin:0;clip:auto;white-space:normal}