/**
 * Parksafe Technical Support Centre
 * BEM naming (.ps-block__element--modifier), CSS custom properties
 * for theming, mobile-first. Scoped under #ps-support-centre so it
 * can never leak into Divi's global styles or vice versa.
 */

#ps-support-centre {
	--ps-brand: #ED1C24;
	--ps-brand-dark: #B8151B;
	--ps-ink: #1A1A1A;
	--ps-ink-muted: #5C5C5C;
	--ps-line: #E3E3E3;
	--ps-surface: #FFFFFF;
	--ps-surface-alt: #F6F6F7;
	--ps-radius: 6px;
	--ps-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.05);
	--ps-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/* Vertical rhythm scale — every major gap (header, search, CTAs,
	   category browser, results) pulls from these so the spacing
	   reads as one deliberate system rather than per-block guesses. */
	--ps-space-xs: 0.75rem;
	--ps-space-sm: 1rem;
	--ps-space-md: 1.5rem;
	--ps-space-lg: 2.25rem;

	font-family: var(--ps-font);
	color: var(--ps-ink);
	max-width: 1280px;
	margin: 0 auto;
	padding: 3.5rem 1.5rem 5rem;
	box-sizing: border-box;
}

#ps-support-centre *,
#ps-support-centre *::before,
#ps-support-centre *::after {
	box-sizing: inherit;
}

/* ---------- Theme/Divi defensive margin reset ----------
   Divi and most WordPress themes inject a margin-bottom (often
   1–1.5em) on bare form, input, select, and button elements
   globally. Inside this widget every gap is set explicitly on
   wrapper/container elements — any margin on the bare elements
   themselves is phantom space.

   Specificity (1-0-1): beats any theme class rule (0-x-x).
   All internal BEM rules written as #ps-support-centre .ps-*
   are (1-1-0) and remain unaffected. */
#ps-support-centre form,
#ps-support-centre input,
#ps-support-centre select,
#ps-support-centre button {
	margin: 0;
}

/* ---------- Header ---------- */

#ps-support-centre .ps-support-centre__heading {
	font-family: var(--ps-font);
	font-size: clamp(1.9rem, 4vw, 2.85rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 var(--ps-space-xs);
	border-left: 3px solid var(--ps-brand);
	padding-left: 0.75rem;
}

.ps-support-centre__description {
	color: var(--ps-ink-muted);
	max-width: 60ch;
	margin: 0;
	font-size: 1.05rem;
}

/* ---------- Controls: search + CTA ---------- */

.ps-support-centre__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: var(--ps-space-md);
}

.ps-search {
	position: relative;
	flex: 1 1 320px;
}

.ps-search__input {
	width: 100%;
	height: 52px;
	padding: 0 3rem 0 1rem;
	font-size: 1rem;
	border: 2px solid var(--ps-line);
	border-radius: var(--ps-radius);
	background: var(--ps-surface);
	transition: border-color 0.15s ease;
}

.ps-search__input:focus {
	outline: none;
	border-color: var(--ps-brand);
}

.ps-search__clear {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ps-ink-muted);
	cursor: pointer;
	padding: 0.25rem;
}

.ps-search__clear:hover {
	color: var(--ps-brand);
}

/* ---------- Active category indicator ---------- */

#ps-support-centre .ps-active-category {
	width: 100%;
	flex: 0 0 auto;
	margin: -0.4rem 0 0; /* pulls it up under the search box, inside the controls' 1rem gap */
	padding: 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--ps-ink-muted);
}

#ps-support-centre .ps-active-category__name {
	font-weight: 700;
	color: var(--ps-ink);
}

#ps-support-centre .ps-active-category.is-filtered .ps-active-category__name {
	color: var(--ps-brand);
}

/* ---------- Buttons ---------- */

.ps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	height: 52px;
	padding: 0 1.5rem;
	border-radius: var(--ps-radius);
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.1s ease, background-color 0.15s ease, color 0.15s ease;
	white-space: nowrap;
}

.ps-btn:active {
	transform: translateY(1px);
}

.ps-btn--primary {
	background: var(--ps-brand);
	color: #fff;
}

.ps-btn--primary:hover:not(:disabled) {
	background: var(--ps-brand-dark);
}

.ps-btn--primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.ps-btn--outline {
	background: transparent;
	border-color: var(--ps-brand);
	color: var(--ps-brand);
}

.ps-btn--outline:hover {
	background: var(--ps-brand);
	color: #fff;
}

/* ---------- Results meta ---------- */

.ps-results-meta {
	color: var(--ps-ink-muted);
	font-size: 0.9rem;
	margin-bottom: 1rem;
	font-weight: 600;
}

/* ---------- Results grid ---------- */

.ps-results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.25rem;
}

.ps-results-empty {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--ps-ink-muted);
	font-size: 1.05rem;
	border: 2px dashed var(--ps-line);
	border-radius: var(--ps-radius);
}

/* ---------- Product card ---------- */

.ps-card {
	background: var(--ps-surface);
	border: 1px solid var(--ps-line);
	border-radius: var(--ps-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.ps-card:hover {
	box-shadow: var(--ps-shadow);
	border-color: var(--ps-brand);
}

.ps-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--ps-surface-alt);
	overflow: hidden;
}

.ps-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.ps-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #C7C7C7;
}

.ps-card__body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1;
}

.ps-card__title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
}

.ps-card__title a {
	color: var(--ps-ink);
	text-decoration: none;
}

.ps-card__title a:hover {
	color: var(--ps-brand);
}

.ps-card__part-code {
	font-size: 0.8rem;
	color: var(--ps-ink-muted);
	margin: 0;
	display: flex;
	gap: 0.35rem;
}

.ps-card__label {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.7rem;
	color: #9A9A9A;
}

.ps-card__desc {
	font-size: 0.85rem;
	color: var(--ps-ink-muted);
	margin: 0;
	flex: 1;
}

.ps-card__btn {
	margin-top: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--ps-brand);
	text-decoration: none;
}

.ps-card__btn:hover {
	color: var(--ps-brand-dark);
	text-decoration: underline;
}

/* ---------- Load more ---------- */

.ps-load-more-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-top: 2.5rem;
}

.ps-loading-spinner {
	width: 28px;
	height: 28px;
	border: 3px solid var(--ps-line);
	border-top-color: var(--ps-brand);
	border-radius: 50%;
	animation: ps-spin 0.7s linear infinite;
}

@keyframes ps-spin {
	to { transform: rotate(360deg); }
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
    #ps-support-centre {
        /* Same rhythm scale, compressed — every margin that reads
           from --ps-space-* tightens up together instead of each
           block needing its own hand-tuned mobile override. */
        --ps-space-xs: 0.5rem;
        --ps-space-sm: 0.75rem;
        --ps-space-md: 1rem;
        --ps-space-lg: 1.5rem;
        /* Tighter, narrower inset than desktop so the layout uses more
           of the available screen width (was 1rem each side). */
        padding: 1.75rem 0.85rem 3rem;
    }

    .ps-support-centre__controls {
        flex-direction: column;
        /* Explicit, not just inherited from the --ps-space-md cascade —
           this is the exact gap flagged as oversized, so it gets its
           own guaranteed value rather than depending on a variable
           that something upstream could be re-widening. */
        margin-bottom: 0.75rem;
    }

    /* In horizontal flex .ps-search uses flex: 1 1 320px where 320px
       is a min-width hint. Switching controls to flex-direction:column
       flips the main axis — flex-basis now controls HEIGHT, making the
       <form> 320px tall with the input marooned at the top and ~272px
       of empty air below it (and the × sitting at top:50% = ~160px).
       Reset to auto so height is driven by the 48px input only. */
    .ps-search {
        flex-basis: auto;
    }

    .ps-search__input {
        height: 48px;
    }

    .ps-btn {
        width: 100%;
    }

    .ps-primary-actions {
        flex-direction: column;
        gap: 0.6rem;
        margin-bottom: 0.75rem;
    }

    /* CTAs share .ps-btn's desktop sizing by default — too large for
       narrow viewports, where the label text was wrapping/overflowing.
       Mobile gets its own smaller, tighter sizing here. */
    .ps-primary-actions .ps-btn {
        height: 46px;
        padding: 0 0.75rem;
        font-size: 0.75rem;
        letter-spacing: 0.01em;
    }

    .ps-results-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.85rem;
    }
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
/* ---------- Hero header block spacing ---------- */

.ps-support-centre__header {
    margin-bottom: var(--ps-space-lg);
}

/* ---------- Primary actions: View All Categories + Request Guide ---------- */

.ps-primary-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: var(--ps-space-md);
}

.ps-btn--block {
    flex: 1 1 0;
    width: 100%;
}

/* ---------- Desktop category dropdown ----------
   Native <select> overlaid invisibly on the View All Categories button,
   same selector model as mobile. The select comes first in the DOM so the
   ~ sibling selectors can style the button. */

.ps-cat-trigger {
    position: relative;
    display: flex;
    flex: 1 1 0;
}

.ps-cat-trigger__select {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    font-family: var(--ps-font);
    font-size: 1rem;
}

.ps-cat-trigger__select:hover ~ .ps-btn--outline {
    background: var(--ps-brand);
    color: #fff;
}

.ps-cat-trigger__select:focus-visible ~ .ps-btn--outline {
    box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.18);
}

.ps-cat-trigger .ps-btn {
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.ps-cat-trigger__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ps-cat-trigger .ps-btn--outline.is-filtered {
    background: var(--ps-brand);
    color: #fff;
}

/* ---------- Mobile category select (hidden on desktop) ----------
   Shown below 640px. Above 640px the desktop dropdown
   (.ps-cat-trigger) is used instead; both share one JS handler. */

.ps-mobile-cat-wrap {
    display: none; /* mobile media query reveals this */
}

.ps-mobile-cat-select {
    -webkit-appearance: auto;
    appearance: auto;
    display: block;
    width: 100%;
    height: 46px;
    padding: 0 0.85rem;
    font-family: var(--ps-font);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ps-ink);
    background: var(--ps-surface);
    border: 2px solid var(--ps-brand);
    border-radius: var(--ps-radius);
    cursor: pointer;
}

.ps-mobile-cat-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.18);
}

/* ---------- Mobile: native select replaces the bottom-sheet ----------
   Gap root cause: .ps-primary-actions base rule (below the first
   @media block in source order) was overriding the mobile
   margin-bottom: 0.75rem set inside the first block, because
   source order always wins over media-query placement at equal
   specificity. Fix: re-declare the override here, after the base rule. */
@media (max-width: 640px) {

    /* Correct the primary-actions margin that the base rule (declared
       after the first @media block) was silently overriding on mobile. */
    .ps-primary-actions {
        margin-bottom: 0.75rem;
    }

    /* Reveal the native select; give it the same bottom rhythm as
       the search controls and primary-actions rows above it. */
    .ps-mobile-cat-wrap {
        display: block;
        margin-bottom: 0.75rem;
    }

    /* Hide the desktop dropdown trigger — the mobile select replaces it. */
    .ps-cat-trigger {
        display: none !important;
    }
}