/* Valucrest Flow — front-end styles.
   Keep this file framework-free (no Tailwind CDN) for performance and portability. */

:root{
  --vc-bg: var(--wp--preset--color--vc-bg);
  --vc-surface: var(--wp--preset--color--vc-surface);
  --vc-surface-2: var(--wp--preset--color--vc-surface-2);
  --vc-border: var(--wp--preset--color--vc-border);
  --vc-text: var(--wp--preset--color--vc-text);
  --vc-muted: var(--wp--preset--color--vc-muted);
  --vc-gold: var(--wp--preset--color--vc-gold);
  --vc-gold-soft: var(--wp--preset--color--vc-gold-soft);
  --vc-blue: var(--wp--preset--color--vc-blue);
  --vc-mint: var(--wp--preset--color--vc-mint);
  --vc-white: var(--wp--preset--color--vc-white);
}

/* Base */
html { scroll-behavior: smooth; }
body { background: var(--vc-bg); color: var(--vc-text); }
::selection { background: rgba(197,160,89,0.35); }

/* A consistent, Webflow-like container rhythm for sections */
.vc-section { padding-block: clamp(3rem, 2.5rem + 2vw, 6rem); }
.vc-section--tight { padding-block: clamp(2.25rem, 2rem + 1vw, 4rem); }
.vc-container { max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }

/* Header */
.vc-site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(15,23,42,0.35);
  border-bottom: 1px solid rgba(229,231,235,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all .25s ease;
}
body.vc-scrolled .vc-site-header{
  background: rgba(15,23,42,0.88);
  border-bottom-color: rgba(197,160,89,0.18);
  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
}

.vc-site-header .wp-block-site-title a{
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}
.vc-site-header .wp-block-site-tagline{
  margin-top: .1rem;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(230,201,135,0.9);
}

/* Navigation */
.vc-site-header .wp-block-navigation-item__content{
  color: rgba(229,231,235,0.9);
}
.vc-site-header .wp-block-navigation-item__content:hover{
  color: var(--vc-gold);
}

/* Buttons (block styles) */
.wp-block-button.is-style-vc-primary .wp-block-button__link{
  background: var(--vc-gold);
  color: var(--vc-bg);
  border: 1px solid rgba(229,231,235,0.08);
  border-radius: 999px;
  padding: .95rem 1.25rem;
  box-shadow: 0 18px 40px rgba(197,160,89,0.18);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.wp-block-button.is-style-vc-primary .wp-block-button__link:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(197,160,89,0.25);
  background: var(--vc-gold-soft);
}

.wp-block-button.is-style-vc-secondary .wp-block-button__link{
  background: rgba(16,24,39,0.2);
  color: var(--vc-text);
  border: 1px solid rgba(229,231,235,0.14);
  border-radius: 999px;
  padding: .95rem 1.25rem;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.wp-block-button.is-style-vc-secondary .wp-block-button__link:hover{
  transform: translateY(-2px);
  background: rgba(16,24,39,0.55);
  border-color: rgba(197,160,89,0.38);
}

.wp-block-button.is-style-vc-ghost .wp-block-button__link{
  background: transparent;
  color: var(--vc-text);
  border: 1px solid transparent;
  padding: .85rem 1.1rem;
}
.wp-block-button.is-style-vc-ghost .wp-block-button__link:hover{
  color: var(--vc-gold);
}

/* Cards (block styles) */
.wp-block-group.is-style-vc-card{
  background: var(--vc-surface);
  border: 1px solid rgba(229,231,235,0.10);
  border-radius: 24px;
  padding: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  box-shadow: 0 18px 45px rgba(0,0,0,0.28);
  transition: transform .2s ease, border-color .2s ease;
}
.wp-block-group.is-style-vc-card:hover{
  transform: translateY(-3px);
  border-color: rgba(197,160,89,0.22);
}

.wp-block-group.is-style-vc-glass{
  background: rgba(16,24,39,0.45);
  border: 1px solid rgba(229,231,235,0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 26px;
  padding: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
}

/* Rounded images */
.wp-block-image.is-style-vc-rounded img{
  border-radius: 18px;
}

/* Subtle divider */
.vc-divider{
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(197,160,89,0.35), transparent);
  margin: 0;
}

/* Hero helpers */
.vc-hero{
  position: relative;
  overflow: hidden;
}
.vc-hero::before{
  content:"";
  position:absolute; inset:-120px;
  background:
    radial-gradient(closest-side, rgba(197,160,89,0.18), transparent 60%),
    radial-gradient(closest-side, rgba(96,165,250,0.15), transparent 60%),
    radial-gradient(closest-side, rgba(52,211,153,0.12), transparent 60%);
  filter: blur(18px);
  opacity: .9;
  transform: translate3d(0,0,0);
}
.vc-hero::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(229,231,235,0.10) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.07;
  pointer-events: none;
}
.vc-hero > *{ position: relative; z-index: 1; }

/* Kicker */
.vc-kicker{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .9rem;
  background: rgba(229,231,235,0.06);
  border: 1px solid rgba(229,231,235,0.12);
  border-radius: 999px;
  color: rgba(229,231,235,0.86);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .75rem;
}
.vc-dot{
  width: .55rem; height: .55rem; border-radius: 999px;
  background: var(--vc-gold);
  box-shadow: 0 0 0 6px rgba(197,160,89,0.15);
}

/* Chips */
.vc-chips{ margin-top: .25rem; }
.vc-chip{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: rgba(229,231,235,0.06);
  border: 1px solid rgba(229,231,235,0.12);
  color: rgba(229,231,235,0.86);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Visual grids */
.vc-grid-2,
.vc-tile-grid,
.vc-bento-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.vc-mini-tile{
  background: rgba(229,231,235,0.04);
  border: 1px solid rgba(229,231,235,0.10);
  border-radius: 18px;
  padding: .95rem 1rem;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.vc-mini-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(197,160,89,0.22);
  background: rgba(229,231,235,0.06);
}

.vc-badge{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(197,160,89,0.22), rgba(229,231,235,0.06));
  border: 1px solid rgba(197,160,89,0.28);
  box-shadow: 0 14px 35px rgba(0,0,0,0.25);
}

.vc-mini-title{ margin: 0; line-height: 1.25; }
.vc-mini-sub{ color: rgba(229,231,235,0.70); font-size: .92rem; }

.vc-bento-card{ position: relative; overflow: hidden; }
.vc-micro{
  height: 12px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(197,160,89,0.0), rgba(197,160,89,0.55), rgba(96,165,250,0.45), rgba(52,211,153,0.35)),
    rgba(229,231,235,0.06);
  opacity: .9;
}

@media (max-width: 740px){
  .vc-grid-2,
  .vc-tile-grid,
  .vc-bento-grid{ grid-template-columns: 1fr; }
}

/* Blog lists (query loop) */
.wp-block-post-template > li{
  list-style: none;
  margin: 0;
}
.wp-block-query .wp-block-post-template{
  gap: 1.25rem;
}
.wp-block-post{
  border-radius: 24px;
}
.wp-block-post-featured-image img{ border-radius: 18px; }
.wp-block-post-title a:hover{ color: var(--vc-gold); }

/* Footer */
.vc-footer{
  border-top: 1px solid rgba(229,231,235,0.08);
}

/* Reveal animation */
.vc-reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.vc-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  .vc-reveal{ opacity: 1; transform: none; transition: none; }
  .wp-block-button__link{ transition: none !important; }
}



/* --- Photo/Background-first sections (v1.5) --- */
.vc-hero.has-background{
  /* Override theme.json gradient with a real background image + readable overlay */
  background: radial-gradient(1200px 700px at 30% 15%, rgba(255,255,255,0.08), rgba(255,255,255,0) 65%),
              linear-gradient(180deg, rgba(2,6,23,0.72), rgba(2,6,23,0.88)),
              url("../img/hero-bg-dark.jpg") center/cover no-repeat !important;
}

.vc-sand-cover.wp-block-cover{
  border-radius: 28px;
  overflow: hidden;
}
.vc-sand-cover .wp-block-cover__inner-container{
  width: 100%;
}

.vc-sand{
  color: #1f2937; /* slate-800 */
}
.vc-sand .vc-kicker,
.vc-sand .vc-muted{
  color: rgba(31,41,55,0.70);
}
.vc-sand h1, .vc-sand h2, .vc-sand h3{
  color: #111827;
}
.vc-sand .vc-stat-num{
  font-size: clamp(1.9rem, 2.8vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.vc-sand .vc-stat-label{
  color: rgba(31,41,55,0.70);
  font-size: 0.98rem;
}

.vc-photo{
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(0,0,0,0.18);
}
.vc-divider{
  height: 1px;
  background: rgba(17,24,39,0.18);
  width: 100%;
}



.vc-service-media img{
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
}
.vc-list-tight{
  margin: 0.6rem 0 0;
}
.vc-list-tight li{
  margin: 0.25rem 0;
  color: rgba(229,231,235,0.86);
}