/* GiggleWalls site overrides, loaded after style.css / grape.css / space.css.
   Mostly the color scheme (matched to the app store screenshots), plus a few small fixes at the end. */

:root {
  /* Palette sampled from the screenshots */
  --gw-bg: #0f1419;               /* backdrop #0e1519 */
  --gw-bg-rgb: 15, 20, 25;
  --gw-bg-deep: #0b0f13;
  --gw-surface: #171c23;          /* dialogs #191d24 */
  --gw-card: #1c2229;             /* cards #20282d */
  --gw-border: #2c323c;
  --gw-border-strong: #525267;    /* chip border */
  --gw-heading: #f4f7fa;          /* headline */
  --gw-text: #b8c4cc;             /* subtitle */
  --gw-text-rgb: 184, 196, 204;
  --gw-muted: #8b95a1;
  --gw-lavender: #d3bbff;         /* buttons, "Walls", See All */
  --gw-lavender-rgb: 211, 187, 255;
  --gw-lavender-hover: #e3d3ff;
  --gw-on-lavender: #1b2329;      /* dark text on lavender buttons */
  --gw-magenta: #ff4fd8;          /* glow line, heart, active chip */
  --gw-magenta-rgb: 255, 79, 216;
  --gw-gold: #ffc009;             /* "Cancel" */
  --gw-warm: #f5b98c;             /* warm glow, as readable text */
  --gw-gradient:
    radial-gradient(110% 90% at 88% 10%, rgba(122, 74, 44, 0.55) 0%, rgba(122, 74, 44, 0) 55%),
    radial-gradient(90% 90% at 8% 100%, rgba(84, 58, 168, 0.45) 0%, rgba(84, 58, 168, 0) 60%),
    #11161c;

  /* Bootstrap / Sandbox theme variables */
  --bs-body-bg: var(--gw-bg);
  --bs-body-bg-rgb: var(--gw-bg-rgb);
  --bs-body-color: var(--gw-text);
  --bs-body-color-rgb: var(--gw-text-rgb);
  --bs-heading-color: var(--gw-heading);
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(var(--gw-text-rgb), 0.75);
  --bs-secondary-bg: var(--gw-surface);
  --bs-tertiary-bg: var(--gw-bg);
  --bs-border-color: var(--gw-border);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
  --bs-link-color: var(--gw-lavender);
  --bs-link-color-rgb: var(--gw-lavender-rgb);
  --bs-link-hover-color: var(--gw-lavender-hover);
  --bs-link-hover-color-rgb: 227, 211, 255;
  --bs-focus-ring-color: rgba(var(--gw-lavender-rgb), 0.35);
  --bs-primary: var(--gw-lavender);
  --bs-primary-rgb: var(--gw-lavender-rgb);
  --bs-soft-primary: #1b1a29;
  --bs-pale-primary: #262238;
  --bs-bullet-soft-primary: rgba(var(--gw-lavender-rgb), 0.16);
  --bs-soft-blue: #1b1a2b;
  --bs-soft-leaf: #211c19;
  --bs-soft-pink: #251826;
}

::selection {
  background: rgba(var(--gw-magenta-rgb), 0.35);
  color: #fff;
}

/* Section backgrounds */
.bg-light {
  background-color: var(--gw-bg) !important;
}
.bg-dark,
footer.bg-dark {
  background-color: var(--gw-bg-deep) !important;
}
.bg-gradient-primary {
  background: linear-gradient(180deg, var(--bs-soft-primary), rgba(var(--gw-bg-rgb), 0) 100%);
}
.image-wrapper.bg-overlay-light-600:before {
  background:
    radial-gradient(110% 90% at 88% 10%, rgba(122, 74, 44, 0.45) 0%, rgba(122, 74, 44, 0) 55%),
    radial-gradient(90% 90% at 8% 100%, rgba(84, 58, 168, 0.4) 0%, rgba(84, 58, 168, 0) 60%),
    rgba(var(--gw-bg-rgb), 0.9);
}
.divider.text-light {
  color: var(--gw-bg) !important;
}

/* Text */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--bs-heading-color);
}
.text-muted,
.post-category,
.post-meta {
  color: var(--gw-muted) !important;
}
.text-navy {
  color: var(--gw-lavender) !important;
}
.text-blue {
  color: var(--gw-lavender) !important;
}
.text-pink,
.text-red {
  color: var(--gw-magenta) !important;
}
.text-leaf {
  color: var(--gw-warm) !important;
}
.text-yellow {
  color: var(--gw-gold) !important;
}
.text-green {
  color: var(--gw-lavender) !important;
}
.gradient-7 {
  background-image: linear-gradient(100deg, var(--gw-lavender) 15%, var(--gw-magenta) 90%);
}
.underline-3.style-3:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 205 9.37'%3E%3Cpath fill='%23ff4fd8' d='M202.47,9.37A1191.26,1191.26,0,0,0,1.79,7.48,1.67,1.67,0,0,1,0,5.92H0A1.76,1.76,0,0,1,1.63,4.21c67-5.71,133.83-5.43,200.8-.27A2.75,2.75,0,0,1,205,6.88h0A2.6,2.6,0,0,1,202.47,9.37Z'/%3E%3C/svg%3E");
}

/* Header */
.navbar .nav-link {
  color: var(--gw-heading);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
  color: var(--gw-lavender);
}
.navbar button.hamburger {
  color: var(--gw-heading);
}
.navbar-stick:not(.navbar-dark) {
  background: rgba(var(--gw-bg-rgb), 0.95);
  box-shadow: 0 1px 0 var(--gw-border);
}
.offcanvas {
  --bs-offcanvas-bg: var(--gw-surface);
}

/* Breadcrumbs on page headers */
.breadcrumb-item a,
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--gw-text);
}
.breadcrumb-item a:hover,
.breadcrumb-item.active {
  color: var(--gw-lavender);
}

/* Buttons */
.btn-primary {
  --bs-btn-color: var(--gw-on-lavender);
  --bs-btn-bg: var(--gw-lavender);
  --bs-btn-border-color: var(--gw-lavender);
  --bs-btn-hover-color: var(--gw-on-lavender);
  --bs-btn-hover-bg: var(--gw-lavender-hover);
  --bs-btn-hover-border-color: var(--gw-lavender-hover);
  --bs-btn-focus-shadow-rgb: var(--gw-lavender-rgb);
  --bs-btn-active-color: var(--gw-on-lavender);
  --bs-btn-active-bg: var(--gw-lavender-hover);
  --bs-btn-active-border-color: var(--gw-lavender-hover);
  --bs-btn-disabled-color: var(--gw-on-lavender);
  --bs-btn-disabled-bg: var(--gw-lavender);
  --bs-btn-disabled-border-color: var(--gw-lavender);
}
.swiper-container.nav-color .swiper-button {
  color: var(--gw-on-lavender) !important;
}

/* Cards, accordion, icon tiles */
.card {
  --bs-card-bg: var(--gw-card);
  --bs-card-title-color: var(--gw-heading);
  --bs-card-border-color: var(--gw-border);
  box-shadow: 0 0 0 1px var(--gw-border);
}
.accordion-wrapper .card-header button.collapsed {
  color: var(--gw-heading);
}
.accordion-wrapper .card-header button.collapsed:hover {
  color: var(--gw-lavender);
}
.bg-pale-green {
  background-color: rgba(var(--gw-lavender-rgb), 0.14) !important;
}
.bg-pale-yellow {
  background-color: rgba(255, 192, 9, 0.14) !important;
}
.bg-pale-blue {
  background-color: rgba(var(--gw-magenta-rgb), 0.14) !important;
}
.bg-pale-leaf {
  background-color: rgba(245, 185, 140, 0.14) !important;
}
.icon-svg.solid.text-navy .fill-primary {
  fill: var(--gw-lavender);
}
.icon-svg.solid.text-navy .fill-secondary {
  fill: var(--gw-magenta);
}

/* Forms */
.form-control {
  color: var(--gw-heading);
  background-color: var(--gw-surface);
  border-color: var(--gw-border);
}
.form-control:focus {
  color: var(--gw-heading);
  background-color: var(--gw-surface);
  border-color: rgba(var(--gw-lavender-rgb), 0.6);
}
.form-control::placeholder {
  color: var(--gw-muted);
}

.link-body {
  color: var(--gw-text);
}
.link-body:hover {
  color: var(--gw-lavender);
}

/* Fixes */

/* Visible keyboard focus (the theme's ring is a faint blue at 25% opacity) */
a:focus-visible,
button:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--gw-lavender);
  outline-offset: 3px;
  box-shadow: none;
}
.navbar .nav-link:focus-visible {
  outline-offset: -2px;
}

/* The theme's sticky-header clone waits off-screen until you scroll; keep its links out of the Tab order until then */
.navbar-clone:not(.navbar-stick),
.navbar-clone:not(.navbar-stick) * {
  visibility: hidden !important; /* beats Bootstrap's .navbar-expand-lg .offcanvas { visibility: visible !important } */
}

/* Keep scroll-to-top clear of the reCAPTCHA badge on pages that load it */
body:has(.grecaptcha-badge) .progress-wrap {
  bottom: 5.5rem;
}

/* App Store / Google Play badges: one size everywhere, a touch smaller on phones so the pair fits on one line */
.store-badge {
  height: 2.5rem;
}
@media (max-width: 575.98px) {
  .store-badge {
    height: 2.2rem;
  }
}