/**
 * Theme Name: Ain't Clear Storefront Child
 * Theme URI: https://example.com/
 * Description: Homepage campaign hero child theme for WooCommerce Storefront.
 * Author: The Coast Ain't Clear
 * Template: storefront
 * Version: 1.0.1
 * Text Domain: aint-clear-storefront-child
 */

/* The Concrete Signal — a WordPress Storefront child-theme hero. */
:root {
  --aint-clear-ink: #060606;
  --aint-clear-paper: #f5f2eb;
  --aint-clear-red: #d92922;
}

body.home {
  background: var(--aint-clear-ink);
}

.aint-clear-notice {
  height: 34px;
  overflow: hidden;
  background: var(--aint-clear-ink);
  color: var(--aint-clear-paper);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .14em;
  line-height: 34px;
  text-transform: uppercase;
}

.aint-clear-notice__viewport {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	contain: paint;
}

.aint-clear-notice__track {
	display: flex;
	width: max-content;
	white-space: nowrap;
	will-change: transform;
	transform: translate3d(0, 0, 0);
	-webkit-animation: aint-clear-marquee 16s linear infinite;
	animation: aint-clear-marquee 16s linear infinite !important;
	animation-play-state: running;
}

.aint-clear-notice__group {
	display: flex;
	flex: 0 0 auto;
	gap: 48px;
	padding-left: 24px;
	padding-right: 24px;
}

.aint-clear-notice__track span::before {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 17px 2px 0;
  background: var(--aint-clear-red);
  content: "";
  vertical-align: middle;
}

@keyframes aint-clear-marquee {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}

@-webkit-keyframes aint-clear-marquee {
	from { -webkit-transform: translate3d(0, 0, 0); }
	to { -webkit-transform: translate3d(-50%, 0, 0); }
}

body.home #masthead.site-header {
  position: relative;
  z-index: 20;
  margin-bottom: 0;
  padding-top: 1.125rem;
  padding-bottom: 1.125rem;
  background: var(--aint-clear-ink);
  color: var(--aint-clear-paper);
}

body.home #masthead .site-branding .site-title a,
body.home #masthead .site-branding .site-description,
body.home #masthead a,
body.home #masthead .widget_shopping_cart .buttons .button {
  color: var(--aint-clear-paper);
}

body.home #masthead .site-header-cart .widget_shopping_cart,
body.home #masthead .site-header-cart .widget_shopping_cart::before {
  background: var(--aint-clear-ink);
}

body.home #masthead .site-header-cart .widget_shopping_cart .buttons .button.checkout {
  background: var(--aint-clear-red);
  color: #fff;
}

body.home .site-content {
  padding-top: 0;
}

body.home .site-content > .col-full {
  max-width: none;
  margin: 0;
  padding: 0;
}

.aint-clear-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(36rem, 54vw, 53rem);
  overflow: hidden;
  background: #121212;
}

.aint-clear-hero__image,
.aint-clear-hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.aint-clear-hero__image {
  z-index: -2;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.aint-clear-hero__overlay {
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / 25%) 0%, transparent 46%, rgb(0 0 0 / 12%) 100%);
}

.aint-clear-hero__cta {
  position: absolute;
  left: clamp(1.5rem, 6vw, 6rem);
  bottom: clamp(8.5rem, 13vw, 12rem);
  display: inline-block;
  border: 1px solid var(--aint-clear-red);
  background: var(--aint-clear-red);
  padding: .86rem 1.15rem;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, transform 160ms ease-out;
}

.aint-clear-hero__cta:hover,
.aint-clear-hero__cta:focus {
  border-color: var(--aint-clear-paper);
  background: var(--aint-clear-ink);
  color: var(--aint-clear-paper);
}

.aint-clear-hero__cta:active {
  transform: scale(.97);
}

.aint-clear-hero__empty {
  display: grid;
  min-height: inherit;
  place-items: center;
  padding: 2rem;
  background: linear-gradient(135deg, #121212, #050505);
  color: var(--aint-clear-paper);
  text-align: center;
}

.aint-clear-hero__empty p {
  max-width: 30rem;
  margin: 0;
}

.aint-clear-home-content {
  width: min(100% - 3rem, 72rem);
  margin: 0 auto;
  padding: 4rem 0;
}

@media (max-width: 768px) {
  body.home #masthead.site-header {
    padding-top: .75rem;
    padding-bottom: .75rem;
  }

  .aint-clear-hero {
    min-height: 39rem;
  }

  .aint-clear-hero__image {
    object-position: 61% center;
    transform: scale(1.2);
    transform-origin: 58% 45%;
  }

  .aint-clear-hero__overlay {
    background: linear-gradient(90deg, rgb(0 0 0 / 18%) 0%, transparent 65%, rgb(0 0 0 / 10%) 100%);
  }

  .aint-clear-hero__cta {
    bottom: 5.75rem;
    padding: .75rem .95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aint-clear-hero__cta {
    transition: none;
  }

	.aint-clear-notice__track {
		-webkit-animation: none !important;
		animation: none !important;
	}
}