/* WS48 Help Center patterns — brand palette from the WS48 Brand Colour Palette reference */

.ws48-hc {
	--ws48-blue: #26526E;        /* Hero: Deep Blue */
	--ws48-blue-dark: #1D4058;
	--ws48-cream: #EDE8DE;       /* Hero: Warm Cream */
	--ws48-terracotta: #C1694A;  /* Secondary: Terracotta */
	--ws48-greige: #A8A296;      /* Secondary: Greige */
	--ws48-black: #1A1A1A;       /* Secondary: Soft Black */
	--ws48-brick: #9C3A2B;       /* Accent: Brick Red */
	--ws48-line: #DDD7CC;
	--ws48-muted: #4A4640;
	--ws48-radius: 8px;
	--ws48-gutter: max(24px, calc((100vw - 1280px) / 2));
	color: var(--ws48-black);
	box-sizing: border-box;
}
.ws48-hc *, .ws48-hc *::before, .ws48-hc *::after { box-sizing: border-box; }
.ws48-hc [hidden] { display: none !important; }
/* Full-bleed sections: break out of the theme's content column, whatever its width.
   Works even when the theme doesn't support "Full width" block alignment. */
.ws48-hc.alignfull,
.ws48-hc.ws48-hc {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-top: 0;
	margin-bottom: 0;
}
/* Nested sections (e.g. inside the FAQ) must not break out again. */
.ws48-hc .ws48-hc { width: auto; max-width: none; margin-left: 0 !important; margin-right: 0 !important; }
/* No sideways scrollbar from 100vw on pages that use these patterns. */
html:has(.ws48-hc), body:has(.ws48-hc) { overflow-x: clip; }
/* Remove the theme's gap above the first section and below the last. */
.ws48-hc + .ws48-hc { margin-top: 0 !important; }
.ws48-hc h1, .ws48-hc h2, .ws48-hc h3 { color: inherit; }
.ws48-hc a { color: inherit; }
.ws48-hc a:hover { color: var(--ws48-brick); }
.ws48-hc :focus-visible { outline: 2px solid var(--ws48-blue); outline-offset: 2px; }

/* Eyebrow labels */
.ws48-hc .ws48-hc-eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ws48-brick);
}
.ws48-hc .ws48-hc-eyebrow--dark { color: var(--ws48-black); }

/* Buttons */
.ws48-hc .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	min-height: 46px;
	padding: 0.8em 1.4em;
	border-radius: var(--ws48-radius);
	background: var(--ws48-blue);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}
.ws48-hc .wp-block-button__link:hover { background: var(--ws48-blue-dark); color: #fff; }
/* Sidebar "Talk to our team" button: Soft Black */
.ws48-hc .ws48-hc-help .wp-block-button__link { background: var(--ws48-black); color: #fff; }
.ws48-hc .ws48-hc-help .wp-block-button__link:hover { background: #3A3835; color: #fff; }
.ws48-hc .ws48-hc-btn--light .wp-block-button__link { background: #fff; color: var(--ws48-black); }
.ws48-hc .ws48-hc-btn--light .wp-block-button__link:hover { background: var(--ws48-cream); color: var(--ws48-black); }

/* ---------- Hero ---------- */
.ws48-hc-hero { background: var(--ws48-cream); padding: 0; }
.ws48-hc-hero .ws48-hc-hero__cols { gap: 0; margin: 0; align-items: stretch !important; }
.ws48-hc-hero .ws48-hc-hero__text {
	padding: clamp(48px, 7vw, 88px) clamp(24px, 4vw, 48px) clamp(48px, 7vw, 88px) var(--ws48-gutter);
}
.ws48-hc-hero .ws48-hc-hero__text > * + * { margin-top: 1.25rem; }
.ws48-hc-hero .ws48-hc-hero__title {
	margin: 0;
	font-size: clamp(2.5rem, 5vw, 4rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	font-weight: 700;
}
.ws48-hc-hero .ws48-hc-hero__lead { font-size: 1.1875rem; line-height: 1.45; color: var(--ws48-muted); max-width: 30rem; }
.ws48-hc-hero .ws48-hc-hero__media { min-height: 320px; }
.ws48-hc-hero .ws48-hc-hero__media .wp-block-image { margin: 0; height: 100%; }
.ws48-hc-hero .ws48-hc-hero__media img { display: block; width: 100%; height: 100%; min-height: 320px; object-fit: cover; }

/* FAQ search (core Search block with the ws48-faq-search class) */
.ws48-hc .ws48-faq-search { max-width: 35rem; margin-top: 1.75rem; }
.ws48-hc .ws48-faq-search .wp-block-search__inside-wrapper {
	min-height: 60px;
	padding: 6px 6px 6px 18px;
	border: 1px solid var(--ws48-greige);
	background: #fff;
}
.ws48-hc .ws48-faq-search .wp-block-search__inside-wrapper:focus-within { outline: 2px solid var(--ws48-blue); outline-offset: 2px; }
.ws48-hc .ws48-faq-search .wp-block-search__input { border: 0; background: transparent; font-size: 1rem; padding: 0 0.5rem; outline: none; color: var(--ws48-black); }
.ws48-hc .ws48-faq-search .wp-block-search__button { min-width: 44px; min-height: 44px; margin: 0; border: 0; background: none; color: var(--ws48-black); }

/* ---------- Category cards ---------- */
.ws48-hc-cats { background: var(--ws48-cream); padding: 24px var(--ws48-gutter) 48px; }
.ws48-hc-cats .ws48-hc-cats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 20px; }
.ws48-hc-cats .ws48-hc-cats__grid > * { margin: 0; }
.ws48-hc .ws48-hc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 20px;
	min-height: 140px;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--ws48-line);
	transition: border-color 0.15s ease;
}
.ws48-hc .ws48-hc-card > * { margin: 0; }
.ws48-hc .ws48-hc-card:hover, .ws48-hc .ws48-hc-card.is-active { border-color: var(--ws48-blue); }
.ws48-hc .ws48-hc-card:focus-within { outline: 2px solid var(--ws48-blue); outline-offset: 2px; }
.ws48-hc .ws48-hc-card .ws48-hc-icon { display: block; width: 30px; height: 30px; color: var(--ws48-terracotta); }
.ws48-hc .ws48-hc-card__title { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; font-weight: 500; }
.ws48-hc .ws48-hc-card__title::after { content: "›"; font-size: 1.25rem; line-height: 1; }
.ws48-hc .ws48-hc-card__title a { text-decoration: none; }
.ws48-hc .ws48-hc-card__title a:focus-visible { outline: none; }
.ws48-hc .ws48-hc-card__title a::after { content: ""; position: absolute; inset: 0; }

/* ---------- FAQ ---------- */
.ws48-hc-faq { background: #fff; padding: clamp(48px, 6vw, 80px) var(--ws48-gutter); }
.ws48-hc-faq .ws48-hc-faq__cols { gap: 56px; margin: 0; }
@media (min-width: 782px) {
	.ws48-hc-faq .ws48-hc-faq__main { border-left: 1px solid var(--ws48-line); padding-left: 56px; }
}
.ws48-hc .ws48-hc-nav { list-style: none; margin: 1rem 0 0; padding: 0; }
.ws48-hc .ws48-hc-nav li { margin: 0; }
.ws48-hc .ws48-hc-nav a {
	display: block;
	min-height: 44px;
	padding: 12px 16px;
	border-left: 3px solid transparent;
	text-decoration: none;
}
.ws48-hc .ws48-hc-nav a.is-active { background: var(--ws48-cream); border-left-color: var(--ws48-brick); font-weight: 600; color: var(--ws48-black); }
.ws48-hc .ws48-hc-help { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--ws48-line); }
.ws48-hc .ws48-hc-help > * + * { margin-top: 14px; }
.ws48-hc .ws48-hc-help p:not(.ws48-hc-eyebrow) { color: var(--ws48-muted); font-size: 0.9375rem; line-height: 1.5; }

.ws48-hc .ws48-hc-panel + .ws48-hc-panel { margin-top: 64px; }
.ws48-hc .ws48-hc-panel h2 { margin: 0.75rem 0; font-size: clamp(1.875rem, 3vw, 2.5rem); letter-spacing: -0.03em; font-weight: 700; }
.ws48-hc .ws48-hc-panel__lead { margin: 0 0 2rem; max-width: 35rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ws48-muted); }

.ws48-hc .ws48-hc-q { margin: 0; border-top: 1px solid var(--ws48-line); }
.ws48-hc .ws48-hc-q:last-of-type { border-bottom: 1px solid var(--ws48-line); }
.ws48-hc .ws48-hc-q summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	min-height: 60px;
	padding: 18px 0;
	list-style: none;
	cursor: pointer;
	font-size: 1.0625rem;
	font-weight: 600;
}
.ws48-hc .ws48-hc-q summary::-webkit-details-marker { display: none; }
.ws48-hc .ws48-hc-q summary::after { content: "+"; flex: none; font-size: 1.5rem; font-weight: 400; line-height: 1; }
.ws48-hc .ws48-hc-q[open] summary::after { content: "−"; }
.ws48-hc .ws48-hc-q > :not(summary) {
	margin: 0 0 20px;
	padding: 20px 22px;
	background: var(--ws48-cream);
	line-height: 1.65;
	color: #403C36;
}
.ws48-hc .ws48-hc-q a { text-decoration: underline; }
.ws48-hc .ws48-hc-status { margin: 0 0 1.5rem; font-size: 1rem; color: var(--ws48-muted); }

/* ---------- Popular resources ---------- */
.ws48-hc-resources { background: var(--ws48-cream); padding: clamp(48px, 6vw, 80px) var(--ws48-gutter); }
.ws48-hc .ws48-hc-resources__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 32px; }
.ws48-hc .ws48-hc-resources__head > * { margin: 0; }
.ws48-hc .ws48-hc-resources__titles h2 { margin: 14px 0 0; font-size: clamp(1.875rem, 3vw, 2.5rem); letter-spacing: -0.03em; font-weight: 700; }
.ws48-hc .ws48-hc-viewall a { padding-bottom: 4px; border-bottom: 1px solid currentColor; text-decoration: none; font-weight: 500; font-size: 0.875rem; }
.ws48-hc .ws48-hc-res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 20px; }
.ws48-hc .ws48-hc-res-grid > * { margin: 0; }
.ws48-hc .ws48-hc-res-card { position: relative; background: #fff; padding-bottom: 24px; }
.ws48-hc .ws48-hc-res-card:focus-within { outline: 2px solid var(--ws48-blue); outline-offset: 2px; }
.ws48-hc .ws48-hc-res-card .wp-block-image { margin: 0; }
.ws48-hc .ws48-hc-res-card img { display: block; width: 100%; height: 150px; object-fit: cover; }
.ws48-hc .ws48-hc-res-card > :not(.wp-block-image) { margin-inline: 22px; }
.ws48-hc .ws48-hc-res-card h3 { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; margin-bottom: 8px; font-size: 1.125rem; font-weight: 600; }
.ws48-hc .ws48-hc-res-card h3::after { content: "›"; font-weight: 400; }
.ws48-hc .ws48-hc-res-card h3 a { text-decoration: none; }
.ws48-hc .ws48-hc-res-card h3 a:focus-visible { outline: none; }
.ws48-hc .ws48-hc-res-card h3 a::after { content: ""; position: absolute; inset: 0; }
.ws48-hc .ws48-hc-res-card p { margin-top: 0; margin-bottom: 0; font-size: 0.875rem; line-height: 1.45; color: var(--ws48-muted); }

/* ---------- Call-to-action band ---------- */
.ws48-hc-cta { background: var(--ws48-brick); color: #fff; padding: 52px var(--ws48-gutter); }
.ws48-hc .ws48-hc-cta__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.ws48-hc .ws48-hc-cta__inner > * { margin: 0; }
.ws48-hc .ws48-hc-cta__text > * { margin: 0; }
.ws48-hc .ws48-hc-cta__text > * + * { margin-top: 10px; }
.ws48-hc-cta .ws48-hc-eyebrow { color: #fff; }
.ws48-hc-cta h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); letter-spacing: -0.03em; font-weight: 700; }
.ws48-hc-cta a:hover { color: inherit; }

/* Editor: links don't stretch over cards, so inner blocks stay easy to select. */
.editor-styles-wrapper .ws48-hc .ws48-hc-card__title a::after,
.editor-styles-wrapper .ws48-hc .ws48-hc-res-card h3 a::after { display: none; }

/* Editor: let the block editor handle width so sections stay selectable. */
.editor-styles-wrapper .ws48-hc.ws48-hc { width: auto; max-width: none; margin-left: 0 !important; margin-right: 0 !important; }