/**
 * Sports Outlet — core-block bridge.
 *
 * The homepage sections used to be hand-written HTML. They are now authored
 * with core blocks, which wrap things differently: images come inside a
 * <figure>, buttons inside a <div class="wp-block-button">, accordions are
 * <details> without our class names, and Font Awesome <i> elements cannot be
 * expressed at all. This file maps that markup onto the visuals defined in
 * shop.css, so the rendered page is unchanged while the content stays editable.
 *
 * Loaded after shop.css on the front end and inside the editor canvas.
 */

/* -------------------------------------------------- block layout defaults */

/*
 * The sections carry their own spacing, so the global block gap must not add
 * anything on top of it. Authored groups also set blockGap 0; this is the net.
 */
.so-main > .wp-block-post-content > *,
.wp-block-post-content > .so-hero,
.wp-block-post-content > .so-section {
	margin-block: 0;
}

.wp-block-post-content > * {
	max-width: none;
}

.so-section > *,
.so-container > *,
.so-grid > *,
.so-trust > *,
.so-hero__track > * {
	margin-block-start: 0;
}

/*
 * Those resets are aimed at the block gap, but they sit later in the cascade
 * than shop.css at the same specificity, so they also flatten the few top
 * margins the storefront sets on its own. Hand them back.
 */
.so-container > .so-accordion {
	margin-block-start: 28px;
}

.so-container > .so-contact__inner {
	margin-block-start: 32px;
}

/* -------------------------------------------------- icons */

/*
 * Font Awesome glyphs are drawn with ::before/::after instead of <i> elements,
 * because core blocks cannot keep a class on an inline tag.
 */
.so-fa::before,
.so-fa::after {
	font-family: "Font Awesome 7 Free";
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------- buttons */

/*
 * A core/button is a wrapper <div> around the link, so the storefront `.so-btn`
 * rules cannot be reused as-is — they would paint the wrapper instead of the
 * clickable element. The authored classes are `so-cta*` and get mapped here.
 */
.wp-block-buttons.so-ctas {
	margin: 0;
	gap: 12px;
}

.wp-block-button.so-cta {
	display: inline-flex;
}

.wp-block-button.so-cta > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 26px;
	border: 0;
	border-radius: var(--so-radius);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.wp-block-button.so-cta--solid > .wp-block-button__link {
	background: var(--so-primary);
	color: #fff;
}
h2.wp-block-heading{
	margin-bottom: 1rem;
}

.wp-block-button.so-cta--solid > .wp-block-button__link:hover {
	background: var(--so-primary-dark);
	color: #fff;
}

.wp-block-button.so-cta--ghost > .wp-block-button__link {
	background: transparent;
	color: var(--so-text);
	box-shadow: inset 0 0 0 1px var(--so-border);
}

.wp-block-button.so-cta--ghost > .wp-block-button__link:hover {
	background: var(--so-text);
	color: #fff;
}

.wp-block-button.so-cta--lg > .wp-block-button__link {
	padding: 16px 32px;
	font-size: 14px;
}

/* Trailing arrow, formerly <i class="fas fa-arrow-right">. */
.wp-block-button.so-cta--arrow > .wp-block-button__link::after {
	content: "\f061";
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: .9em;
	line-height: 1;
}

/*
 * Cover CTA — the white capsule with a round icon badge used on the hero slides
 * and the promo banners. `.so-btn--pill` in shop.css paints its own `<span>`;
 * a core/button cannot hold one, so the badge is the link's `::after` and has
 * to repeat the shape. Pair with `so-cta--cart` for shopping destinations and
 * `so-cta--arrow` for everything else.
 */
.wp-block-button.so-cta--pill > .wp-block-button__link {
	gap: 14px;
	padding: 5px 5px 5px 26px;
	border-radius: 999px;
	background: #fff;
	color: var(--so-text);
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
}

.wp-block-button.so-cta--pill > .wp-block-button__link::after {
	content: "\f061";
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--so-dark);
	color: #fff;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 14px;
	line-height: 1;
	transition: background-color .2s ease, color .2s ease;
}

.wp-block-button.so-cta--pill.so-cta--cart > .wp-block-button__link::after {
	content: "\f07a";
}

/*
 * The parent theme paints every `.wp-block-button__link:hover` with its own
 * contrast colour and marks it `!important`, so the blue has to answer in kind.
 */
.wp-block-button.so-cta--pill > .wp-block-button__link:hover {
	background-color: var(--so-blue) !important;
	color: #fff !important;
}

.wp-block-button.so-cta--pill > .wp-block-button__link:hover::after {
	background: #fff;
	color: var(--so-blue);
}

.wp-block-button.so-cta--pill.so-cta--lg > .wp-block-button__link {
	padding: 7px 7px 7px 32px;
	font-size: 16px;
}

.wp-block-button.so-cta--pill.so-cta--lg > .wp-block-button__link::after {
	width: 44px;
	height: 44px;
	font-size: 15px;
}

/* -------------------------------------------------- inline text bits */

p.so-eyebrow,
p.so-page-title + .so-sec-head,
p.so-link-arrow {
	margin: 0;
}

p.so-link-arrow a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
	font-size: 13px;
}

p.so-link-arrow a::after {
	content: "\f061";
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: .85em;
	line-height: 1;
}

.so-sec-head > .so-sec-head__text {
	min-width: 0;
}

.so-sec-head .so-sec-title {
	margin: 6px 0 0;
}

.so-sec-head--center .so-link-arrow {
	margin-top: 14px;
}

/* -------------------------------------------------- hero */

.so-hero .so-hero__track > .so-hero__slide {
	margin: 0;
}

/*
 * shop.js stamps `data-so-ready` on the hero when it takes the slider over, so
 * this only covers the moment before that: without it the first slide would be
 * hidden by `.so-hero__slide { display: none }` and the band would flash empty.
 */
.so-hero:not([data-so-ready]) .so-hero__track > .so-hero__slide:first-child {
	display: block;
}

figure.so-hero__img {
	margin: 0;
}

figure.so-hero__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.so-hero__content > * {
	margin-block-start: 0;
}

.so-hero__content .so-hero__title {
	margin: 12px 0 14px;
}

.so-hero__content .so-hero__text {
	margin: 0 0 26px;
}

/* -------------------------------------------------- banners */

figure.so-banner__bg {
	margin: 0;
}

figure.so-banner__bg a {
	display: block;
	width: 100%;
	height: 100%;
}

figure.so-banner__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The banner used to be one big <a>. Now the whole-card click lives on the
 * background image link, so the overlay and the copy must let clicks through —
 * except the CTA itself, which stays focusable.
 */
.so-banner::after {
	pointer-events: none;
}

.so-banner__inner {
	pointer-events: none;
}

.so-banner__inner a,
.so-banner__inner button {
	pointer-events: auto;
}

.so-banner__inner > * {
	margin-block-start: 0;
}

.so-banner__inner .wp-block-buttons {
	margin-top: 8px;
}

.so-banner__title {
	margin: 0;
}

/* -------------------------------------------------- icon boxes */

.so-iconbox > * {
	margin-block-start: 0;
}

.so-iconbox[class*="so-iconbox--"]::before {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--so-primary);
	font-family: "Font Awesome 7 Free";
	font-size: 18px;
	font-style: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.so-iconbox--check::before {
	content: "\f058";
	font-weight: 400;
}

.so-iconbox--support::before {
	content: "\f590";
	font-weight: 900;
}

.so-iconbox--shipping::before {
	content: "\f49e";
	font-weight: 900;
}

.so-iconbox--performance::before {
	content: "\f085";
	font-weight: 900;
}

.so-iconbox--phone::before {
	content: "\f879";
	font-weight: 900;
}

.so-iconbox--email::before {
	content: "\f0e0";
	font-weight: 400;
}

.so-iconbox--hours::before {
	content: "\f017";
	font-weight: 400;
}

/*
 * The contact panel is dark, so its glyph bubbles get a translucent blue and
 * the lightened accent — the base `--so-blue` sinks into the panel.
 */
.so-contact__info .so-iconbox::before {
	width: 46px;
	height: 46px;
	background: rgba(138, 136, 201, .18);
	color: var(--so-blue-light);
	transition: background-color .2s ease, color .2s ease;
}

.so-contact__info .so-iconbox:hover::before {
	background: var(--so-blue);
	color: #fff;
}

.so-iconbox__text > * {
	margin-block-start: 0;
}

.so-iconbox__title,
.so-iconbox__desc {
	margin: 0;
}

/* -------------------------------------------------- coupon strip */

.so-promo > *,
.so-promo__text > * {
	margin-block-start: 0;
}

.so-promo__text > .so-promo__sub {
	margin-block-start: 6px;
}

/* Authored as a div now; keep the button affordances. */
div.so-promo__code {
	-webkit-user-select: none;
	user-select: none;
}

div.so-promo__code > * {
	margin-block-start: 0;
}

.so-promo__code-value,
.so-promo__code-hint {
	margin: 0;
}

.so-promo__code-hint::before {
	content: "\f0c5";
	font-family: "Font Awesome 7 Free";
	font-weight: 400;
	font-style: normal;
	line-height: 1;
}

.so-promo__badge {
	margin: 0 0 8px;
}

/* -------------------------------------------------- weekly highlights */

.so-special > * {
	margin-block-start: 0;
}

.so-special__head > * {
	margin-block-start: 0;
}

.so-special__title {
	margin: 0;
}

.so-special__sub {
	margin: 6px 0 0;
}

/*
 * On the front end the card is inserted bare, but the editor wraps a dynamic
 * block in its own div (and ServerSideRender in one more), which would break
 * the flex column. Both wrappers are dissolved.
 */
.so-special > .wp-block-sports-outlet-product-card,
.so-special > .wp-block-sports-outlet-product-card > div {
	display: contents;
}

/* -------------------------------------------------- about */

.so-about__inner > * {
	margin-block-start: 0;
}

.so-about__media figure {
	margin: 0;
}

.so-about__media img {
	display: block;
}

.so-about__text > * {
	margin-block-start: 0;
}

.so-about__text p {
	margin: 0 0 14px;
}

.so-about__text .so-sec-title {
	margin: 6px 0 18px;
}

/* -------------------------------------------------- FAQ accordion */

.so-accordion > * {
	margin-block-start: 0;
}

.so-accordion .wp-block-details {
	margin: 0;
}

.so-accordion .wp-block-details + .wp-block-details {
	border-top: 1px solid var(--so-border);
}

.so-accordion .wp-block-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 22px;
	font-size: 16px;
	font-weight: 600;
	color: var(--so-text);
	cursor: pointer;
	list-style: none;
	background: #fff;
}

.so-accordion .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.so-accordion .wp-block-details > summary::after {
	content: "\f078";
	flex: none;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	font-size: 13px;
	line-height: 1;
	color: var(--so-muted);
	transition: transform .2s ease;
}

.so-accordion .wp-block-details > summary:hover {
	color: var(--so-primary);
}

.so-accordion .wp-block-details[open] > summary::after {
	transform: rotate(180deg);
}

.so-accordion .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 22px 12px;
	font-size: 15px;
	line-height: 1.75;
	color: #3D4550;
	background: #fff;
}

.so-accordion .wp-block-details > :not(summary):last-child {
	padding-bottom: 20px;
}

.so-accordion .wp-block-details > ul,
.so-accordion .wp-block-details > ol {
	padding-left: 42px;
}

.so-accordion .wp-block-details > ul li,
.so-accordion .wp-block-details > ol li {
	margin-bottom: 6px;
}

/* -------------------------------------------------- contact */

.so-contact__inner > * {
	margin-block-start: 0;
}

.so-contact__info > * {
	margin-block-start: 0;
}

.so-contact__form > * {
	margin-block-start: 0;
}
.wp-element-button:hover, .wp-block-button__link:hover, a.wp-block-post-excerpt__more-link:hover{
	color: #fff !important;
}
/* -------------------------------------------------- editor placeholders */

.so-block-placeholder {
	padding: 28px;
	border: 1px dashed var(--so-border);
	border-radius: var(--so-radius);
	background: var(--so-light);
	color: var(--so-muted);
	font-size: 14px;
	text-align: center;
}
@media (max-width: 782px){
	.so-brand img, .so-brand .custom-logo{
		max-height: 42px;
	}
}