/*
Theme Name: Urban Pixels Child
Template: salient
Version: 1.0
*/

/* ──────────────────────────────────────────────────────────────────────────
   0) IMPORTS
   Put imports first so cascade is predictable.
────────────────────────────────────────────────────────────────────────── */
@import url("../salient/style.css");

/* ──────────────────────────────────────────────────────────────────────────
   1) SETTINGS: variables, color tokens
   Centralize brand tokens to avoid magic values.
────────────────────────────────────────────────────────────────────────── */
:root {
  --color-white: #E6E6E6;
  --color-white-85: rgba(252, 252, 252, 0.85);
  --color-muted: #9B9797;

  --brand-grad-start: #717AFF;
  --brand-grad-end: #C678DD;

  --brand-accent-a: rgba(198, 120, 221, 1);
  --brand-accent-a0: rgba(198, 120, 221, 0);

  --labs-accent: rgba(255, 156, 164, 1);
  --labs-accent0: rgba(255, 156, 164, 0);

  --radius-pill: 9999px;

  /* Background asset */
  --site-bg-image: url('/wp-content/uploads/2025/07/base_bkgd-1.jpg');
}

/* ──────────────────────────────────────────────────────────────────────────
   2) BASE: HTML & type
────────────────────────────────────────────────────────────────────────── */
html, body {
  color: var(--color-white);
}

/* Headings, keep simple. You already have broad overrides via Salient. */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-white);
}

/* Salient and Woo broad text selectors, minimized to a single rule.
   Retain !important to win against theme defaults where necessary. */
body,
body h1, body h2, body h3, body h4, body h5, body h6,
.woocommerce div.product .woocommerce-tabs .full-width-content ul.tabs li a,
.woocommerce .woocommerce-breadcrumb a,
.woocommerce .woocommerce-breadcrumb i,
body:not(.original) .comment-list .comment-author,
body:not(.original) .comment-list .pingback .comment-body > a,
.post-area.standard-minimal .post .more-link span,
#sidebar .widget .nectar_widget[class*="nectar_blog_posts_"] > li .post-date {
  color: var(--color-white) !important;
}

/* Light variants */
.light h1, .light h2, .light h3, .light h4 { color: var(--color-white) !important; }
.light h5, .light h6, .light p { color: var(--color-muted) !important; }

/* ──────────────────────────────────────────────────────────────────────────
   3) LAYOUT: wrappers, page background
────────────────────────────────────────────────────────────────────────── */
.container-wrap {
  position: relative;
}

/* Fixed background overlay behind content.
   z-index negative to sit under content, pointer-events none for safety. */
.container-wrap::after {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--site-bg-image) repeat;
  opacity: 1;
  z-index: -2;
  pointer-events: none;
}

/* Footer visual reset, fix invalid value */
.footer-outer {
  background-color: transparent;
}

/* ──────────────────────────────────────────────────────────────────────────
   4) COMPONENTS: theme pieces, forms, badges, grids
────────────────────────────────────────────────────────────────────────── */

/* Nectar animated gradient, mobile tuning moved to media section. */

/* Hide portfolio titles and grid meta where you’re using stacked layout */
.single-portfolio .section-title h1,
.single-portfolio .section-title .subheader,
#full_width_portfolio .project-title,
#ajax-content-wrap .layout-stacked[data-text-layout="all_middle"] .nectar-post-grid-item__meta-wrap {
  display: none;
}

/* Fancy box and meta text color, keep but do not force display none globally */
.nectar-fancy-box[data-style="hover_desc"] .hover-content,
.nectar-post-grid-item__meta-wrap {
  color: var(--color-muted);
}

/* Frosted badge */
.nectar-badge[data-bg-color-custom="#FFFFFF33"] .nectar-badge__inner {
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  background-color: #FFFFFF33;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.5rem 1rem;
}

/* WPForms: labels and sublabels */
.wpforms-container-full .wpforms-field-label,
.wp-core-ui .wpforms-container-full .wpforms-field-label {
  margin: 0 0 var(--wpforms-field-size-input-spacing);
  padding: 0;
  font-size: 20px !important;
  line-height: 1.5;
  color: var(--color-white-85);
}

.wpforms-container-full .wpforms-field-sublabel,
.wp-core-ui .wpforms-container-full .wpforms-field-sublabel {
  padding: 2%;
  color: var(--color-white);
}

/* WPForms: fields */
.wpforms-container-full input,
.wpforms-container-full select,
.wpforms-container-full textarea {
  background-clip: padding-box;
  border: none;
  border-bottom: var(--wpforms-field-border-size) var(--wpforms-field-border-style) var(--wpforms-field-border-color);
  border-radius: var(--wpforms-field-border-radius);
  color: var(--wpforms-field-text-color);
  padding: 0 var(--wpforms-field-size-padding-h);
  font-size: var(--wpforms-field-size-font-size);
  line-height: 100%;
  box-shadow: none;
  transition: border 0.15s, box-shadow 0.15s;
}

/* WPForms: submit buttons */
.wpforms-container-full button[type="submit"],
.wpforms-container-full .wpforms-page-button {
  background: linear-gradient(90deg, var(--brand-grad-start) 23.62%, var(--brand-grad-end) 99.94%);
  border: 2px solid var(--brand-grad-start);
  border-radius: var(--radius-pill);
  color: var(--color-white);
}

/* Salient rounded button sizing, single source of truth
   Remove the conflicting duplicate at the end of the original file. */
body[data-button-style=rounded] .container-wrap button[type=submit],
body[data-button-style=rounded] .container-wrap input[type=submit] {
  padding: 10px 48px !important;
}

/* Optional lighter label style you added, kept but de-duplicated */
.wpforms-container-full .wpforms-form .wpforms-field-label {
  color: #e6e6e6;
  line-height: 1;
  font-weight: 200;
}

/* Dot grid helper */
.dot-grid,
.dot-grid__wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.dot-grid {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dot-grid__canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   5) UTILITIES: text effects, helpers
────────────────────────────────────────────────────────────────────────── */

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(-83deg, var(--brand-grad-end), var(--brand-grad-start));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

/* Shiny text, animated sweep. Use .disabled to stop animation. */
.shiny-text {
  color: #717AFFa4; /* intensity control */
  background: linear-gradient(
    -83deg,
    var(--brand-accent-a0) 45%,
    var(--brand-accent-a) 50%,
    var(--brand-accent-a0) 90%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  display: inline-block;
  font-weight: 600;
  animation: shine 6s linear infinite;
}
.shiny-text.disabled { animation: none; }

@keyframes shine {
  0% { background-position: 100%; }
  100% { background-position: -100%; }
}

/* Labs shine, quicker sparkle */
.labs-shine {
  display: inline-block;
  font-weight: 600;
  color: transparent;
  background: linear-gradient(
    -83deg,
    var(--labs-accent0) 45%,
    var(--labs-accent) 50%,
    var(--labs-accent0) 90%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sparkle 1s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.labs-shine.disabled { animation: none; }

@keyframes sparkle {
  from { background-position: 100%; }
  to   { background-position: -100%; }
}

/* ──────────────────────────────────────────────────────────────────────────
   6) MEDIA QUERIES
   Keep all media rules together at the bottom for clarity.
────────────────────────────────────────────────────────────────────────── */

/* Mobile, up to 999px */
@media only screen and (max-width: 999px) {
  /* Nectar animated gradient tuning on small screens */
  .nectar-animated-gradient {
    width: 500vw !important;
    right: 20vw !important;
    z-index: -1;
  }
}