/* ============================================================
   DynaExperts Brand — Theme-agnostic brand layer
   ------------------------------------------------------------
   This file is loaded by the DynaExperts Brand plugin on every
   front-end page and inside the block editor. It is designed to
   sit on top of any block-aware theme (GeneratePress + child,
   Twenty Twenty-Four, Astra, etc.) without conflicting with
   site chrome (header, footer, sidebar) which the host theme
   manages.
   ============================================================ */

/* ---- Brand tokens ------------------------------------------ */
:root{
  /* Primary palette */
  --dxp-charcoal:        #413f3b;
  --dxp-charcoal-90:     #524f4a;
  --dxp-charcoal-60:     #7c7a76;
  --dxp-charcoal-20:     #d8d6d2;
  --dxp-charcoal-10:     #ecebe7;

  --dxp-amber:           #edb64a;
  --dxp-amber-light:     #fff4dc;
  --dxp-amber-dark:      #c9952a;

  --dxp-cobalt:          #22219b;
  --dxp-cobalt-light:    #e6e6f5;
  --dxp-cobalt-dark:     #181775;

  --dxp-cream:           #faf9f5;
  --dxp-white:           #ffffff;

  /* Layout */
  --dxp-radius:          10px;
  --dxp-radius-lg:       14px;
  --dxp-shadow-card:     0 2px 6px rgba(65,63,59,.06);
  --dxp-shadow-lift:     0 6px 16px rgba(65,63,59,.10);

  /* Typography */
  --dxp-font-display:    'Audiowide', system-ui, sans-serif;
  --dxp-font-body:       'Source Sans 3', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* If the host theme exposes WP preset color variables with the same
   slugs, prefer them — this lets a theme's color picker propagate.
   Otherwise fall back to the brand tokens above. */
:root{
  --wp--preset--color--charcoal:       var(--dxp-charcoal);
  --wp--preset--color--charcoal-90:    var(--dxp-charcoal-90);
  --wp--preset--color--charcoal-60:    var(--dxp-charcoal-60);
  --wp--preset--color--charcoal-20:    var(--dxp-charcoal-20);
  --wp--preset--color--charcoal-10:    var(--dxp-charcoal-10);
  --wp--preset--color--amber:          var(--dxp-amber);
  --wp--preset--color--amber-light:    var(--dxp-amber-light);
  --wp--preset--color--amber-dark:     var(--dxp-amber-dark);
  --wp--preset--color--cobalt:         var(--dxp-cobalt);
  --wp--preset--color--cobalt-light:   var(--dxp-cobalt-light);
  --wp--preset--color--cobalt-dark:    var(--dxp-cobalt-dark);
  --wp--preset--color--cream:          var(--dxp-cream);
}

/* ---- Eyebrow / pill / underline / tag ---------------------- */
.dxp-eyebrow,
.is-style-dxp-eyebrow{
  display:inline-block;
  font-family:var(--dxp-font-body);
  font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dxp-amber-dark);
  margin-bottom:.6rem;
}

.dxp-pill,
.is-style-dxp-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--dxp-cobalt-light);
  border:1px solid #c5c5ec;border-radius:9999px;
  padding:.3rem 1rem;font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--dxp-cobalt);
}
.dxp-pill::before,
.is-style-dxp-pill::before{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--dxp-cobalt);
}

.dxp-underline{border-bottom:4px solid var(--dxp-amber);padding-bottom:2px}

.dxp-tag,
.is-style-dxp-tag{
  display:inline-block;font-size:.68rem;font-weight:700;
  letter-spacing:.05em;padding:.25rem .65rem;border-radius:9999px;
  background:var(--dxp-charcoal-10);color:var(--dxp-charcoal-60);
}
.dxp-tag-free{background:var(--dxp-cobalt-light)!important;color:var(--dxp-cobalt)!important}
.dxp-tag-paid{background:var(--dxp-amber-light)!important;color:var(--dxp-amber-dark)!important}
.dxp-tag-contact{background:var(--dxp-charcoal-10)!important;color:var(--dxp-charcoal-60)!important}

/* ---- Display heading variant ------------------------------- */
.is-style-dxp-display{
  font-family:var(--dxp-font-display);
  letter-spacing:.01em;
}

/* ---- Group block style variations -------------------------- */
.wp-block-group.is-style-dxp-card{
  background:#fff;
  border:1px solid var(--dxp-charcoal-20);
  border-radius:var(--dxp-radius);
  padding:1.75rem;
  box-shadow:var(--dxp-shadow-card);
}
.wp-block-group.is-style-dxp-card-alt{
  background:var(--dxp-charcoal-10);
  border:1px dashed var(--dxp-charcoal-20);
  border-radius:var(--dxp-radius);
  padding:1.75rem;
}
.wp-block-group.is-style-dxp-card-dark{
  background:var(--dxp-charcoal);color:#fff;
  border-radius:var(--dxp-radius-lg);
  padding:2.25rem;
}
.wp-block-group.is-style-dxp-card-dark :is(h1,h2,h3,h4,h5,h6,p,a,li){color:#fff}

.wp-block-group.is-style-dxp-cta-band{
  background:var(--dxp-charcoal);color:#fff;
  border-radius:var(--dxp-radius-lg);
  padding:3rem 2.5rem;
}
.wp-block-group.is-style-dxp-cta-band :is(h1,h2,h3,h4,h5,h6,p){color:#fff}

.wp-block-group.is-style-dxp-page-hero{
  background:var(--dxp-charcoal);color:#fff;
  padding:3.2rem 2.5rem;
  border-bottom:4px solid var(--dxp-amber);
}
.wp-block-group.is-style-dxp-page-hero :is(h1,h2){color:#fff;margin-top:0}
.wp-block-group.is-style-dxp-page-hero p{color:rgba(255,255,255,.7);font-weight:300}
.wp-block-group.is-style-dxp-page-hero .dxp-eyebrow{color:var(--dxp-amber)}

.wp-block-group.is-style-dxp-stat-tile{
  background:var(--dxp-cobalt);color:#fff;
  border-radius:var(--dxp-radius);
  padding:1.4rem 1.25rem;
  text-align:center;
}
.wp-block-group.is-style-dxp-stat-tile :is(h1,h2,h3){
  font-family:var(--dxp-font-display);
  color:#fff;margin:0;line-height:1;letter-spacing:.01em;
}
.wp-block-group.is-style-dxp-stat-tile p{
  color:rgba(255,255,255,.85);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  margin:.4rem 0 0;
}

.wp-block-group.is-style-dxp-feature-tile{
  background:#fff;
  border:1px solid var(--dxp-charcoal-20);
  border-radius:var(--dxp-radius);
  padding:1.6rem 1.4rem;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wp-block-group.is-style-dxp-feature-tile:hover{
  transform:translateY(-2px);
  box-shadow:var(--dxp-shadow-lift);
  border-color:var(--dxp-amber);
}

/* ---- Button block style variations ------------------------- */
.wp-block-button.is-style-dxp-amber > .wp-block-button__link,
.wp-block-button.is-style-dxp-amber .wp-block-button__link{
  background:var(--dxp-amber);color:var(--dxp-charcoal);
  border-radius:8px;font-weight:700;
  border:2px solid var(--dxp-amber);
  padding:.7rem 1.5rem;
  text-decoration:none;
  transition:all .2s ease;
}
.wp-block-button.is-style-dxp-amber .wp-block-button__link:hover{
  background:var(--dxp-amber-dark);color:#fff;
  border-color:var(--dxp-amber-dark);
}

.wp-block-button.is-style-dxp-cobalt .wp-block-button__link{
  background:var(--dxp-cobalt);color:#fff;
  border:2px solid var(--dxp-cobalt);border-radius:8px;font-weight:700;
  padding:.7rem 1.5rem;
  text-decoration:none;
  transition:all .2s ease;
}
.wp-block-button.is-style-dxp-cobalt .wp-block-button__link:hover{
  background:var(--dxp-cobalt-dark);
  border-color:var(--dxp-cobalt-dark);
}

.wp-block-button.is-style-dxp-ghost .wp-block-button__link{
  background:transparent;color:#fff;
  border:1.5px solid rgba(255,255,255,.4);border-radius:8px;font-weight:600;
  padding:.7rem 1.5rem;
  text-decoration:none;
  transition:all .2s ease;
}
.wp-block-button.is-style-dxp-ghost .wp-block-button__link:hover{
  border-color:#fff;
  background:rgba(255,255,255,.08);
}

.wp-block-button.is-style-dxp-outline .wp-block-button__link{
  background:transparent;color:var(--dxp-amber-dark);
  border:2px solid var(--dxp-amber);border-radius:8px;font-weight:700;
  padding:.7rem 1.5rem;
  text-decoration:none;
  transition:all .2s ease;
}
.wp-block-button.is-style-dxp-outline .wp-block-button__link:hover{
  background:var(--dxp-amber-light);
}

/* ---- Check list -------------------------------------------- */
ul.wp-block-list.is-style-dxp-check-list,
ul.is-style-dxp-check-list,
.is-style-dxp-check-list{
  list-style:none!important;padding-left:0!important;margin-left:0;
}
ul.wp-block-list.is-style-dxp-check-list li,
ul.is-style-dxp-check-list li,
.is-style-dxp-check-list li{
  position:relative;padding-left:1.85rem;margin-bottom:.7rem;line-height:1.55;
  list-style:none;
}
ul.wp-block-list.is-style-dxp-check-list li::before,
ul.is-style-dxp-check-list li::before,
.is-style-dxp-check-list li::before{
  content:"";position:absolute;left:0;top:.25rem;
  width:1.05rem;height:1.05rem;
  background:var(--dxp-amber);border-radius:50%;
}
ul.wp-block-list.is-style-dxp-check-list li::after,
ul.is-style-dxp-check-list li::after,
.is-style-dxp-check-list li::after{
  content:"";position:absolute;left:.3rem;top:.55rem;
  width:.45rem;height:.22rem;
  border-left:2px solid var(--dxp-charcoal);
  border-bottom:2px solid var(--dxp-charcoal);
  transform:rotate(-45deg);
}

/* ---- Arrow list -------------------------------------------- */
ul.wp-block-list.is-style-dxp-arrow-list,
ul.is-style-dxp-arrow-list{
  list-style:none!important;padding-left:0!important;
}
ul.wp-block-list.is-style-dxp-arrow-list li,
ul.is-style-dxp-arrow-list li{
  position:relative;padding-left:1.5rem;margin-bottom:.55rem;line-height:1.55;
}
ul.wp-block-list.is-style-dxp-arrow-list li::before,
ul.is-style-dxp-arrow-list li::before{
  content:"→";position:absolute;left:0;top:0;
  color:var(--dxp-amber);font-weight:700;
}

/* ---- Quote accent ----------------------------------------- */
.wp-block-quote.is-style-dxp-amber-border{
  border-left:4px solid var(--dxp-amber);
  padding:.4rem 0 .4rem 1.4rem;
  margin-left:0;
  font-style:normal;
  font-size:1.1rem;
  color:var(--dxp-charcoal-90);
}
.wp-block-quote.is-style-dxp-amber-border cite{
  display:block;margin-top:.6rem;
  font-size:.85rem;font-style:normal;font-weight:600;
  color:var(--dxp-charcoal-60);letter-spacing:.02em;
}

/* ---- FAQ details accordion ------------------------------- */
.wp-block-details.is-style-dxp-faq{
  background:#fff;
  border:1px solid var(--dxp-charcoal-20);
  border-radius:var(--dxp-radius);
  padding:1rem 1.25rem;
  margin-bottom:.75rem;
  transition:border-color .2s ease;
}
.wp-block-details.is-style-dxp-faq[open]{
  border-color:var(--dxp-amber);
  box-shadow:var(--dxp-shadow-card);
}
.wp-block-details.is-style-dxp-faq summary{
  font-weight:600;color:var(--dxp-charcoal);
  cursor:pointer;list-style:none;
  position:relative;padding-right:2rem;
}
.wp-block-details.is-style-dxp-faq summary::-webkit-details-marker{display:none}
.wp-block-details.is-style-dxp-faq summary::after{
  content:"+";position:absolute;right:0;top:50%;
  transform:translateY(-50%);
  font-size:1.4rem;font-weight:300;color:var(--dxp-amber-dark);
  transition:transform .2s ease;
}
.wp-block-details.is-style-dxp-faq[open] summary::after{
  content:"−";
}

/* ---- Contact tiles --------------------------------------- */
.dxp-contact-tile{
  display:flex;gap:.9rem;align-items:flex-start;
  padding:1rem 0;border-bottom:1px solid var(--dxp-charcoal-20);
}
.dxp-contact-tile:last-child{border-bottom:none}
.dxp-contact-tile .icon{
  width:40px;height:40px;border-radius:8px;
  background:var(--dxp-charcoal-10);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;
  color:var(--dxp-charcoal);
}
.dxp-contact-tile .label{
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--dxp-charcoal-60);
  margin-bottom:.15rem;
}
.dxp-contact-tile .val{
  font-size:.95rem;color:var(--dxp-charcoal);line-height:1.5;
}
.dxp-contact-tile .val a{
  color:var(--dxp-cobalt);text-decoration:none;
}
.dxp-contact-tile .val a:hover{text-decoration:underline}

/* ---- Single CPT header (Solutions / Services) ------------- */
.dxp-single-header{
  background:var(--dxp-charcoal);color:#fff;
  padding:3rem 2rem;
  border-bottom:4px solid var(--dxp-amber);
  margin-bottom:2rem;
}
.dxp-single-header h1{color:#fff;margin:0}
.dxp-single-header .meta{
  color:rgba(255,255,255,.6);font-size:.9rem;margin-top:.5rem;
}
.dxp-service-accent-amber      .dxp-single-header{border-bottom-color:var(--dxp-amber)}
.dxp-service-accent-amber-dark .dxp-single-header{border-bottom-color:var(--dxp-amber-dark)}
.dxp-service-accent-cobalt     .dxp-single-header{border-bottom-color:var(--dxp-cobalt)}
.dxp-service-accent-charcoal   .dxp-single-header{border-bottom-color:var(--dxp-charcoal-90)}

/* ---- Inline stats row (used inside hero patterns) ---------- */
.dxp-stats-inline{
  display:flex;gap:2rem;flex-wrap:wrap;
  padding-top:1.2rem;
  border-top:1px solid var(--dxp-charcoal-20);
}
.dxp-stats-inline > div .num{
  font-family:var(--dxp-font-display);
  font-size:1.5rem;color:var(--dxp-cobalt);line-height:1;
}
.dxp-stats-inline > div .label{
  font-size:.68rem;color:var(--dxp-charcoal-60);
  margin-top:.25rem;text-transform:uppercase;letter-spacing:.06em;
}

/* When stats sit inside a dark hero, flip colors */
.is-style-dxp-page-hero .dxp-stats-inline,
.is-style-dxp-card-dark .dxp-stats-inline,
.is-style-dxp-cta-band  .dxp-stats-inline{
  border-top-color:rgba(255,255,255,.18);
}
.is-style-dxp-page-hero .dxp-stats-inline > div .num,
.is-style-dxp-card-dark .dxp-stats-inline > div .num,
.is-style-dxp-cta-band  .dxp-stats-inline > div .num{
  color:var(--dxp-amber);
}
.is-style-dxp-page-hero .dxp-stats-inline > div .label,
.is-style-dxp-card-dark .dxp-stats-inline > div .label,
.is-style-dxp-cta-band  .dxp-stats-inline > div .label{
  color:rgba(255,255,255,.6);
}

/* ---- Logo wall --------------------------------------------- */
.dxp-logo-wall{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:2.5rem 3rem;align-items:center;
  padding:1.5rem 0;
}
.dxp-logo-wall img,
.dxp-logo-wall .dxp-logo{
  max-height:42px;width:auto;
  filter:grayscale(100%);opacity:.55;
  transition:filter .2s ease, opacity .2s ease;
}
.dxp-logo-wall img:hover,
.dxp-logo-wall .dxp-logo:hover{
  filter:grayscale(0%);opacity:1;
}
.dxp-logo-wall .dxp-logo{
  font-family:var(--dxp-font-display);
  font-size:1.15rem;color:var(--dxp-charcoal-60);
}

/* ---- Process / numbered steps ------------------------------ */
.dxp-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:var(--dxp-amber);color:var(--dxp-charcoal);
  font-family:var(--dxp-font-display);
  font-size:1.1rem;line-height:1;
  margin-bottom:.85rem;
}

/* ---- Pricing tier highlight -------------------------------- */
.dxp-pricing-featured{
  position:relative;
  border:2px solid var(--dxp-amber)!important;
  box-shadow:var(--dxp-shadow-lift)!important;
}
.dxp-pricing-featured::before{
  content:"Most popular";
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--dxp-amber);color:var(--dxp-charcoal);
  font-size:.65rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;
  padding:.25rem .75rem;border-radius:9999px;
  white-space:nowrap;
}

/* ---- Solution / app card --------------------------------- */
.dxp-app-card{
  background:#fff;
  border:1px solid var(--dxp-charcoal-20);
  border-radius:var(--dxp-radius);
  padding:1.5rem;
  display:flex;flex-direction:column;height:100%;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dxp-app-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--dxp-shadow-lift);
  border-color:var(--dxp-amber);
}
.dxp-app-card .dxp-app-icon{
  width:48px;height:48px;border-radius:10px;
  background:var(--dxp-cobalt-light);color:var(--dxp-cobalt);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--dxp-font-display);font-size:1.25rem;
  margin-bottom:1rem;
}
.dxp-app-card h3{margin:0 0 .25rem;font-size:1.1rem}
.dxp-app-card .dxp-app-cat{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--dxp-charcoal-60);font-weight:600;margin-bottom:.6rem;
}
.dxp-app-card .dxp-app-desc{
  font-size:.95rem;color:var(--dxp-charcoal-90);
  margin-bottom:1rem;flex-grow:1;
}
.dxp-app-card .dxp-app-foot{
  display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  padding-top:.85rem;border-top:1px solid var(--dxp-charcoal-20);
}

/* ---- Testimonial card ------------------------------------ */
.dxp-testimonial{
  background:#fff;
  border:1px solid var(--dxp-charcoal-20);
  border-radius:var(--dxp-radius);
  padding:1.75rem;
  position:relative;
}
.dxp-testimonial::before{
  content:"\201C";
  position:absolute;top:.4rem;left:1.1rem;
  font-family:var(--dxp-font-display);
  font-size:3rem;color:var(--dxp-amber);
  line-height:1;
}
.dxp-testimonial blockquote,
.dxp-testimonial .dxp-quote{
  font-size:1rem;line-height:1.65;
  color:var(--dxp-charcoal-90);
  font-style:normal;margin:0 0 1.1rem;
  padding:0;border:none;
}
.dxp-testimonial cite,
.dxp-testimonial .dxp-cite{
  display:block;font-style:normal;font-size:.85rem;
  color:var(--dxp-charcoal-60);font-weight:600;
}
.dxp-testimonial cite strong,
.dxp-testimonial .dxp-cite strong{
  display:block;color:var(--dxp-charcoal);font-size:.95rem;
  margin-bottom:.1rem;
}

/* ---- Contact form (front-end submission) ------------------ */
.dxp-contact-form{display:flex;flex-direction:column;gap:1rem}
.dxp-contact-form label{
  font-size:.75rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dxp-charcoal-60);
}
.dxp-contact-form input[type="text"],
.dxp-contact-form input[type="email"],
.dxp-contact-form input[type="tel"],
.dxp-contact-form textarea,
.dxp-contact-form select{
  width:100%;
  border:1px solid var(--dxp-charcoal-20);
  border-radius:8px;
  background:#fff;
  padding:.75rem 1rem;
  font-family:var(--dxp-font-body);
  font-size:1rem;color:var(--dxp-charcoal);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.dxp-contact-form input:focus,
.dxp-contact-form textarea:focus,
.dxp-contact-form select:focus{
  outline:none;
  border-color:var(--dxp-amber);
  box-shadow:0 0 0 3px var(--dxp-amber-light);
}
.dxp-contact-form button[type="submit"]{
  background:var(--dxp-amber);color:var(--dxp-charcoal);
  border:2px solid var(--dxp-amber);border-radius:8px;
  padding:.75rem 1.6rem;font-weight:700;
  cursor:pointer;align-self:flex-start;
  transition:all .15s ease;
}
.dxp-contact-form button[type="submit"]:hover{
  background:var(--dxp-amber-dark);color:#fff;
  border-color:var(--dxp-amber-dark);
}
.dxp-contact-form .dxp-honeypot{
  position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;
}
.dxp-contact-message{
  padding:1rem 1.25rem;border-radius:8px;margin-bottom:1rem;
  font-size:.95rem;
}
.dxp-contact-message.ok{background:#e8f5e8;color:#1f6f1f;border:1px solid #b3dab3}
.dxp-contact-message.err{background:#fce8e8;color:#9b2222;border:1px solid #f0b3b3}

/* ---- Prevent FOIT --------------------------------------- */
html{font-display:swap}