/* ==========================================================================
   overridebordersdivider.css
   Scope: Featured section borders + Owl nav buttons + divider color
   Load order: after theme CSS (so these win without !important)
   ========================================================================== */

/* -------- Theme tokens (adjust freely) ----------------------------------- */
:root{
  /* Buttons */
  --owl-btn-bg:           #e7dfd1;   /* light chip bg */
  --owl-btn-text:         #141516;   /* chevron (uses currentColor) */
  --owl-btn-border:       #24201c;   /* frame */
  --owl-btn-hover-bg:     #f2eadf;   /* subtle lift */
  --owl-btn-hover-border: #e1bc8c;   /* brand gold */
  --owl-btn-focus-ring:   #e1bc8c88; /* visible but soft */

  --owl-btn-disabled-bg:     #ece8e1;
  --owl-btn-disabled-text:   #8a8f95;
  --owl-btn-disabled-border: #d8d4ce;

  /* Divider (plugs into your existing --light-gray-color usage) */
  --feature-divider-color: #000000;
}

@media (prefers-color-scheme: dark){
  :root{
    --owl-btn-bg:           #202224;
    --owl-btn-text:         #e7dfd1;
    --owl-btn-border:       #34312c;
    --owl-btn-hover-bg:     #2a2c2f;
    --owl-btn-hover-border: #e1bc8c;
    --owl-btn-focus-ring:   #e1bc8c66;

    --owl-btn-disabled-bg:     #26282b;
    --owl-btn-disabled-text:   #6f757a;
    --owl-btn-disabled-border: #2f3236;

    --feature-divider-color:   #e1bc8c; /* calmer dark divider */
  }
}

/* -------- Featured wrapper: provide local var for divider ----------------- */
/* Only the featured area gets the divider color change */
.featured-wrapper{
  --light-gray-color: var(--feature-divider-color);
}

/* Common hr/divider helpers readers often see in Dawn; keep it scoped */
.featured-wrapper hr,
.featured-wrapper .gh-divider,
.featured-wrapper .section-divider{
  border-color: var(--light-gray-color);
  background-color: var(--light-gray-color);
  color: var(--light-gray-color);
  opacity: 1; /* neutralize theme fades if present */
}

/* -------- Owl carousel nav buttons (scoped so regular posts stay intact) -- */
/* Owl outputs buttons with .owl-prev / .owl-next. The SVG chevron inherits `color`. */
.featured-wrapper .owl .owl-prev,
.featured-wrapper .owl .owl-next{
  background-color: var(--owl-btn-bg);
  color:            var(--owl-btn-text);     /* chevron color */
  border:           1px solid var(--owl-btn-border);
  border-radius:    1px;                  /* keep pill/circle look; tweak if needed */
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            30px;
  height:           30px;
  line-height:      1;
  cursor:           pointer;
  transition:       background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}

/* Make sure the inner icon fills correctly */
.featured-wrapper .owl .owl-prev .icon,
.featured-wrapper .owl .owl-next .icon{
  width: 20px;
  height: 20px;
  fill: currentColor; /* belt + suspenders */
}

/* Hover/active states */
.featured-wrapper .owl .owl-prev:not(.disabled):hover,
.featured-wrapper .owl .owl-next:not(.disabled):hover{
  background-color: var(--owl-btn-hover-bg);
  border-color:     var(--owl-btn-hover-border);
  transform:        translateY(-1px);
}

.featured-wrapper .owl .owl-prev:not(.disabled):active,
.featured-wrapper .owl .owl-next:not(.disabled):active{
  transform: translateY(0);
}

/* Keyboard focus */
.featured-wrapper .owl .owl-prev:focus-visible,
.featured-wrapper .owl .owl-next:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--owl-btn-focus-ring);
  border-color: var(--owl-btn-hover-border);
}

/* Disabled state (Owl adds .disabled) */
.featured-wrapper .owl .owl-prev.disabled,
.featured-wrapper .owl .owl-next.disabled,
.featured-wrapper .owl .owl-prev[disabled],
.featured-wrapper .owl .owl-next[disabled]{
  background-color: var(--owl-btn-disabled-bg);
  color:            var(--owl-btn-disabled-text);
  border-color:     var(--owl-btn-disabled-border);
  cursor:           not-allowed;
  transform:        none;
  opacity:          .8;
  pointer-events:   none;
}

/* Optional: tighten nav spacing if Owl places them right beside the feed */
.featured-wrapper .owl .owl-prev{ margin-right: 4px; }
.featured-wrapper .owl .owl-next{ margin-left: 4px;  }