/* ==========================================================================
   INTERORA — "Mix" template extras  ·  assets/css/mix-extras.css
   --------------------------------------------------------------------------
   Loaded last on index.html. The page runs on the Interior Studio theme
   (is-site/v2/v3/v4.css); this file folds in the Interior Companies flavour —
   a hero search card + red/gold accents — and a renderer safety net so
   scroll-reveal content and metric counters always display.
   Built on Interior Studio's CSS variables (--orange, --serif, --line …).
   ========================================================================== */

:root{
  --pm-red:#0F5C44;   /* Interior Companies — Royal Red  */
  --pm-red-d:#0C4A37;
  --pm-gold:#0F5C44;  /* Interior Companies — Warm Gold  */
  --pm-navy:#C2811F;  /* Interior Companies — Deep Navy  */
}

/* ---- Renderer safety net ------------------------------------------------ */
/* Keep scroll-reveal content visible even where IntersectionObserver does
   not fire (some embedded preview renderers). No effect in normal browsers. */
.reveal{opacity:1 !important;transform:none !important;}

/* ---- Hero search card (Interior Companies influence) ------------------------- */
.hero-search{position:relative;z-index:6;margin-top:-80px;}
.hsx-card{
  background:#fff;border-radius:24px;border:1px solid var(--line);
  box-shadow:0 30px 70px rgba(26,26,46,.20);max-width:1000px;margin:0 auto;
  padding:28px;position:relative;overflow:hidden;
}
.hsx-card::before{   /* rainbow edge — mixes both palettes */
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(to right,var(--pm-red),var(--orange),var(--pm-gold),var(--green),var(--blue));
}
.hsx-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.hsx-head .hsx-script{font-family:var(--script);color:var(--pm-red);font-size:1.6rem;line-height:1;}
.hsx-head h3{font-family:var(--serif);font-weight:500;font-size:1.4rem;color:var(--ink);margin:0;}
.hsx-row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;}
.hsx-field{flex:1;min-width:170px;}
.hsx-field label{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);margin-bottom:7px;
}
.hsx-input{
  width:100%;border:1.5px solid var(--line);border-radius:12px;background:var(--bg-2);
  padding:13px 14px;font-family:var(--sans);font-size:.95rem;color:var(--ink);
  appearance:none;cursor:pointer;transition:border-color .3s,box-shadow .3s;
}
.hsx-input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(229,155,44,.12);}
.hsx-search-wrap{position:relative;}
.hsx-search-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--pm-gold);font-size:1.05rem;}
.hsx-search-wrap .hsx-input{padding-left:40px;}
.hsx-btn{
  border:0;border-radius:12px;padding:14px 28px;font-family:var(--sans);font-weight:600;
  font-size:.96rem;color:#fff;background:linear-gradient(135deg,var(--pm-red),#2E8C6A);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  white-space:nowrap;box-shadow:0 12px 26px rgba(15,92,68,.34);
  transition:transform .3s,box-shadow .3s;
}
.hsx-btn:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(15,92,68,.44);color:#fff;}
.hsx-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center;}
.hsx-tags .lbl{font-size:.82rem;color:var(--mute);font-weight:600;}
.hsx-tags a{
  font-size:.8rem;font-weight:600;color:var(--ink-2);background:var(--bg-3);
  padding:6px 14px;border-radius:99px;transition:all .25s;
}
.hsx-tags a:hover{background:var(--pm-red);color:#fff;}
@media(max-width:640px){
  .hero-search{margin-top:-44px;}
  .hsx-card{padding:20px 16px;border-radius:20px;}
  .hsx-btn{width:100%;}
}

/* ---- Interior Companies gold/navy accent touches ----------------------------- */
.section-title h2 .hl-gold{color:var(--pm-gold);}
.section-title h2 .hl-red{color:var(--pm-red);}
.mix-badge{
  display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:99px;
  background:rgba(15,92,68,.12);color:var(--pm-gold);font-weight:700;
  font-size:.78rem;letter-spacing:.04em;
}
.mix-badge i{font-size:.95rem;}

/* ---- Category tile PNG icons (.space-grid) ----------------------------- */
.space-item .space-img{
  width:64px;height:64px;display:block;margin:0 auto 14px;object-fit:contain;
  transition:transform .35s ease;
  /* Hide any bi-icon font fallback if it bleeds through */
}
.space-item:hover .space-img{
  transform:scale(1.10) rotate(-4deg);
}
@media (max-width:575.98px){
  .space-item .space-img{width:52px;height:52px;margin-bottom:10px}
}

/* ============================================================================
   MARIGOLD CTA OVERRIDES — white text on darker marigold gradient
   ----------------------------------------------------------------------------
   The base .btn-orange now uses a darker #C2811F → #E59B2C gradient with white
   text (passes WCAG AA contrast for bold text at button sizes). Apply the same
   treatment to other marigold-filled CTAs across the site so everything stays
   consistent. Small badges and chips (.pg-btn.active, .chip.active, etc.) keep
   the lighter marigold and still need dark ink — those rules below.
   ============================================================================ */
.btn-view-cta,
.btn-view-cta:hover,
.btn-view-cta:focus,
[data-open-apply].btn,
[data-open-apply].btn:hover,
.bg-orange,
.hero-cta-marigold{
  color:#fff !important;
  background:linear-gradient(135deg,#C2811F 0%,#E59B2C 100%) !important;
  border-color:#C2811F !important;
}
.btn-view-cta:hover,
[data-open-apply].btn:hover{
  background:linear-gradient(135deg,#9E6816 0%,#C2811F 100%) !important;
  border-color:#9E6816 !important;
}
.btn-view-cta i, [data-open-apply].btn i{ color:#fff !important; }

/* Small marigold badges/chips — keep dark ink (background is light marigold #E59B2C) */
.chip.active,
.filter-chip.active,
.swiper-pagination-bullet-active,
.pg-btn.active,
.pg-btn[aria-current="page"],
.tag-orange,
.back-to-top:hover{
  color:var(--ink) !important;
}