/*
Theme Name: grubbl
Theme URI: https://opencollective.com/grubbl
Author: Dallas McLaughlin
Author URI: https://dallasmclaughlin.com
Description: Custom Bootstrap-based minimalist theme.
Version: 2025
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: grubbl
*/

/* Optional: Screen reader support */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  word-break: normal;
}

.screen-reader-text:focus {
  background-color: #f7f7f7;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  color: #007acc;
  display: block;
  font-size: 14px;
  font-weight: 700;
  height: auto;
  right: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

:root {
  --color-teal: #53BCE5;
  --color-magenta: #D9338D;
  --color-dark: #040707;
  --color-white: #ffffff;
  --color-brown: #4e2226;
  --color-tan: #f1eedf;
  --color-orange: #ff9126;
  --color-green: #cefc17;

  --color-gray300: #d6d6d6;
  --color-gray500: #6b7280;
  --color-gray600: #4b5563;
  --color-gray700: #374151;
  --color-gray800: #1f2937;

  --hero-bg: #ffffff;
  --hero-grad-1: #53BCE555;
  --hero-grad-2: #ffffff;
  --hero-grad-3: #D9338D66;
  --hero-blob-a: rgba(83,188,229,0.15);   /* teal-ish blur */
  --hero-blob-b: rgba(0,102,255,0.15);    /* blue blur */
  --hero-blob-c: rgba(95,56,251,0.10);    /* indigo blur */
  --text-dark: #0a1325;


}
body{
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	color:var(--color-white);
}
a{
  color:var(--color-magenta);
  text-decoration: none;
}
p{
  color:var(--color-gray600);
}

/**************** TEXT *****************/
.blocky{
  font-family: "Bowlby One SC", sans-serif;
}
.inter{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
}
.text-outline {
  color: var(--color-white);
  text-shadow:
    -3px -3px 0 var(--color-dark),
    3px -3px 0 var(--color-dark),
    -3px 3px 0 var(--color-dark),
    3px 3px 0 var(--color-dark);
}
.text-shadow {
  text-shadow:
    5px 5px 0 rgba(0, 0, 0, 1); /* add the hard offset here */
}



/**************** DEBUG *****************/
.red-border{
  border: 2px solid red !important;
}
.blue-border{
	border: 2px solid blue;
}
.green-border{
	border: 2px solid green;
}
.yellow-border{
	border: 2px solid yellow;
}



/**************** IMAGES *****************/
.hero-logo{
	max-width: 200px;
	height: auto;
}
.device-mock {
  max-width:380px;
  height: auto;
}
.overflow-top {
  margin-top: -120px; /* Adjust as needed */
  position: relative;
  z-index: 3;
}
.screenshot{
  max-width:100%;
  border: 1px solid var(--color-gray300);
  border-radius: 1rem;
}

/** X-Large devices (large desktops, less than 1400px) **/
@media (max-width: 1399.98px) {
}
/** Large devices (desktops, less than 1200px) **/
@media (max-width: 1199.98px) {
}
/** Medium devices (tablets, less than 992px) **/
@media (max-width: 991.98px) {
  .device-mock {
    max-width:280px;
  }
}
/** Small devices (landscape phones, less than 768px) **/
@media (max-width: 767.98px) {
  .overflow-top {
      margin-top: -60px;
  }
}
/** X-Small devices (portrait phones, less than 576px) **/
@media (max-width: 575.98px) {
  .hero-logo{
    max-width: 150px;
  }
}

/**************** ICONS *****************/
.material-symbols-filled-orange {
  font-family: 'Material Symbols Outlined';
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  color: #ff9126;

  vertical-align: middle;
}


/**************** BACKGROUNDS *****************/
.gradient-bg {
  background: linear-gradient(-45deg, #53BCE5, #D9338D, #53BCE5, #D9338D);
  background-size: 400% 400%;
  animation: brandGradientShift 20s ease infinite;
  position: relative;
}
.teal-white-bg {
  background: linear-gradient(to top, var(--color-teal), var(--color-white));
}
@keyframes brandGradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.noise-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('/images/backgrounds/noise.svg') repeat;
  background-size: 100px;
  opacity: 0.99;
  pointer-events: none;
  z-index: 1; /* behind .scroll-content */
}
.content-container {
  position: relative;
  z-index: 2;
}
.bg-teal{
  background-color:var(--color-teal);
}
.bg-magenta{
  background-color:var(--color-magenta);
}
.bg-dark{
  background-color:var(--color-dark);
}
.bg-white{
  background-color:var(--color-white);
}
.bg-tan{
  background-color:var(--color-tan);
}
.bg-orange{
  background-color:var(--color-orange);
}
.bg-green{
  background-color:var(--color-green);
}



/**************** ACCENTS *****************/
.thick-border{
  border:3px solid var(--color-dark);
}
.heavy-bottom{
  border-bottom: 3px solid var(--color-dark);
}
.heavy-shadow{
    box-shadow: 5px 5px 0px 0rem rgba(0, 0, 0, 1);
}


/**************** FONT COLORS *****************/
.fs-teal{
  color:var(--color-teal);
}
.fs-magenta{
  color:var(--color-magenta);
}
.fs-dark{
  color:var(--color-dark);
}
.fs-white{
  color:var(--color-white);
}
.fs-tan{
  color:var(--color-tan);
}
.fs-orange{
  color:var(--color-orange);
}
.fs-brown{
  color:var(--color-brown);
}
.fs-green{
  color:var(--color-green);
}
.fs-gray500{
  color:var(--color-gray500);
}
.fs-gray600{
  color:var(--color-gray600);
}
.fs-gray700{
  color:var(--color-gray700);
}
.fs-gray800{
  color:var(--color-gray800);
}


/**************** CARDS *****************/
.card-white {
  color:var(--color-dark);
  background-color: var(--color-white);
  border:3px solid var(--color-dark);
  border-radius: 0.5rem;
  box-shadow: 5px 5px 0px 0rem rgba(0, 0, 0, 1);
  padding: 1.5rem;
  height: 100%;
}

/**************** BUTTONS *****************/
.btn-magenta {
    color: var(--color-white);
    background-color: var(--color-magenta);
    border-color:var(--color-dark);
    border-radius:10px;
    border-width:2px;
    padding: .5rem 2rem;
    min-width:225px;  
}
.btn-magenta img{
  width:150px;
  height:40px;
}
.btn-magenta:hover{
    color: var(--color-white);
    background-color: var(--color-dark);
    border-color:var(--color-dark);
}
@media (min-width: 768px) {
  .w-md-auto { width: auto !important; }
}
/** X-Large devices (large desktops, less than 1400px) **/
@media (max-width: 1399.98px) {
}
/** Large devices (desktops, less than 1200px) **/
@media (max-width: 1199.98px) {
}
/** Medium devices (tablets, less than 992px) **/
@media (max-width: 991.98px) {
}
/** Small devices (landscape phones, less than 768px) **/
@media (max-width: 767.98px) {
  .btn-magenta img{
    width:135px;
    height:36px;
  }
}
/** X-Small devices (portrait phones, less than 576px) **/
@media (max-width: 575.98px) {
}

/**************** SCROLLER *****************/

.scroll-wrapper {
  position: relative;
  isolation: isolate; /* Ensures z-index stacking is scoped to this container */
  overflow: hidden;
  white-space: nowrap;
  background-color: var(--color-orange);
  border-top: 3px solid var(--color-dark);
  border-bottom: 3px solid var(--color-dark);
  box-shadow: 0 -20px 30px -10px rgba(0, 0, 0, 0.25);
  z-index: 5;
}
.scroll-track {
  display: inline-block;
  padding-left: 50%; /* Offset to begin outside the view */
  animation: marquee 40s linear infinite;
}
.scroll-content {
  display: inline-block;
  padding: 1rem 0;
  position: relative;
  z-index: 3;
}


/* Animation */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
/**************** MODAL *****************/
.modal-content.hero {
  position: relative;     /* anchor ::before/::after to this box */
  overflow: hidden;       /* keep negative insets from overflowing */
  isolation: isolate;     /* pseudo elements stay behind content */
}

/**************** FORMS *****************/
.placeholder-gray::placeholder {
  color: #adb5bd; /* Bootstrap secondary gray */
  opacity: 1;
}


/** HERO TEST **/
/* Fill the hero card */
.hero-artwork .carousel,
.hero-artwork .carousel-inner,
.hero-artwork .carousel-item {
  height: 100%;
}

/* Keep Bootstrap's default "hidden" state, but prep flex centering */
.hero-artwork .carousel-item {
  display: none;                 /* important: restore default */
  align-items: center;
  justify-content: center;

}

/* Only the active/next/prev slides should be visible (and flex) */
.hero-artwork .carousel-item.active,
.hero-artwork .carousel-item-next,
.hero-artwork .carousel-item-prev {
  display: flex;
}

/* Contain the image without cropping; stays centered */
.hero-artwork .carousel-item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;

}



.hero {
  background-color: #fff; /* solid fallback layer */
  background-image: radial-gradient(
    120% 120% at 80% 0%,
    var(--hero-grad-3) 0%,
    var(--hero-grad-2) 40%,
    var(--hero-grad-1) 80%
  );
  background-repeat: no-repeat;
  background-size: cover;
}


    /* Subtle grid/dots pattern on top of the gradient */
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      /* SVG dot grid as background-image (tiny, repeats smoothly) */
      background-image:
        radial-gradient(currentColor 1px, transparent 1px);
      background-size: 24px 24px;
      color: rgba(10,19,37,0.06); /* dot color */
      mask-image: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.8));
      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.8));
    }

    /* Big blurred blobs to add depth (like soft shapes behind the hero) */
    .hero::after {
      content: "";
      position: absolute;
      inset: -20% -10% -30% -10%;
      z-index: -1;
      background:
        radial-gradient(40% 30% at 85% 20%, var(--hero-blob-a), transparent 80%),
        radial-gradient(30% 25% at 70% 80%, var(--hero-blob-b), transparent 80%),
        radial-gradient(35% 28% at 20% 30%, var(--hero-blob-c), transparent 80%);
      filter: blur(40px) saturate(120%);
      opacity: .9;
    }

    /* Optional “card” for the right artwork mock */
    .hero-artwork {
      background: white;
      border-radius: 1.25rem;
      box-shadow:
        0 10px 25px rgba(0,0,0,0.08),
        0 2px 8px rgba(0,0,0,0.06);
      overflow: hidden;
      aspect-ratio: 4/5;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100%; /* keeps it balanced with left column */
    }

    .hero-badge {
      background: #0a76ff;
      color: #fff;
      border-radius: 999px;
      padding: .4rem .8rem;
      font-weight: 600;
      font-size: .875rem;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
    }

    /* Spacing that feels “landing page” */
    .hero-pad {
      padding-top: clamp(3rem, 6vw, 6rem);
      padding-bottom: clamp(3rem, 6vw, 6rem);
    }