/* ===================================================================
   ES Read More – Frontend Styles
   Designed to integrate cleanly with any WordPress theme.
   Uses CSS custom properties so themes can override tokens easily.
=================================================================== */

:root {
  --es-rm-accent:          #4e82c3;
  --es-rm-accent-hover:    #0c4e54;
  --es-rm-accent-active:   #0f3638;
  --es-rm-toggle-radius:   0.375rem;
  --es-rm-content-radius:  0.5rem;
  --es-rm-border:          oklch(from currentColor l c h / 0.12);
  --es-rm-surface:         oklch(from currentColor l c h / 0.04);
  --es-rm-transition:      180ms cubic-bezier(0.16, 1, 0.3, 1);
  --es-rm-font-size:       0.9rem;
  --es-rm-spacing:         0.75rem 1rem;
}

/* -------------------------------------------------------------------
   Wrapper
------------------------------------------------------------------- */
.es-rm-wrapper {
  margin-block: 1.25em;
}

/* -------------------------------------------------------------------
   Toggle Button
------------------------------------------------------------------- */
.es-rm-toggle {
  display:          inline-flex;
  align-items:      center;
  gap:              0.45em;
  cursor:           pointer;
  background:       none;
  border:           1px solid var(--es-rm-accent);
  border-radius:    var(--es-rm-toggle-radius);
  padding:          var(--es-rm-spacing);
  font-size:        var(--es-rm-font-size);
  font-weight:      600;
  color:            var(--es-rm-accent);
  line-height:      1.2;
  text-decoration:  none;
  transition:
    background var(--es-rm-transition),
    color       var(--es-rm-transition),
    border-color var(--es-rm-transition),
    box-shadow  var(--es-rm-transition);
  /* min touch target */
  min-height: 44px;
}

.es-rm-toggle:hover,
.es-rm-toggle:focus-visible {
  background:    var(--es-rm-accent);
  color:         #fff;
  border-color:  var(--es-rm-accent-hover);
  box-shadow:    0 2px 8px oklch(0.2 0.01 80 / 0.12);
  outline:       none;
}

.es-rm-toggle:active {
  background:    var(--es-rm-accent-active);
  border-color:  var(--es-rm-accent-active);
}

/* Arrow icon via CSS – rotates when open */
.es-rm-toggle-icon {
  display:        inline-block;
  width:          0.55em;
  height:         0.55em;
  border-right:   2px solid currentColor;
  border-bottom:  2px solid currentColor;
  transform:      rotate(45deg) translateY(-0.1em);
  transition:     transform var(--es-rm-transition);
  flex-shrink:    0;
}

.es-rm-toggle[aria-expanded="true"] .es-rm-toggle-icon {
  transform: rotate(225deg) translateY(-0.1em);
}

/* -------------------------------------------------------------------
   Collapsible Content Region
------------------------------------------------------------------- */
.es-rm-content {
/*  border:        1px solid oklch(from var(--es-rm-accent) l c h / 0.18);
  border-top:    none;
  border-radius: 0 0 var(--es-rm-content-radius) var(--es-rm-content-radius);
  padding:       1.25rem 1.25rem 1rem;
  background:    var(--es-rm-surface); 
*/
  /* For the smooth height animation */
  overflow:      hidden;
}

/* Hidden state: handled via the `hidden` attribute + JS animation */
.es-rm-content[hidden] {
  display: none;
}

/* When animating, the hidden attribute is removed and we use max-height */
.es-rm-content.es-rm-animating {
  display:    block;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  transition:
    max-height     var(--es-rm-transition),
    padding-top    var(--es-rm-transition),
    padding-bottom var(--es-rm-transition),
    border-width   var(--es-rm-transition);
}

.es-rm-content.es-rm-animating.es-rm-open {
  padding-top:    1.25rem;
  padding-bottom: 1rem;
  border-width:   1px;
  /* max-height set dynamically by JS */
}

/* -------------------------------------------------------------------
   Global Controls (Expand All / Collapse All)
------------------------------------------------------------------- */
.es-rm-global-controls {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.5rem;
  margin-block: 1rem;
}

.es-rm-expand-all,
.es-rm-collapse-all {
  display:          inline-flex;
  align-items:      center;
  cursor:           pointer;
  background:       transparent;
  border:           1px solid currentColor;
  border-radius:    var(--es-rm-toggle-radius);
  padding:          0.45rem 0.9rem;
  font-size:        0.8rem;
  font-weight:      600;
  min-height:       44px;
  transition:
    background var(--es-rm-transition),
    color      var(--es-rm-transition);
}

.es-rm-expand-all {
  color:         var(--es-rm-accent);
  border-color:  var(--es-rm-accent);
}

.es-rm-expand-all:hover,
.es-rm-expand-all:focus-visible {
  background: var(--es-rm-accent);
  color:      #fff;
  outline:    none;
}

.es-rm-collapse-all {
  color:        #666;
  border-color: #999;
}

.es-rm-collapse-all:hover,
.es-rm-collapse-all:focus-visible {
  background: #666;
  color:      #fff;
  outline:    none;
}

/* -------------------------------------------------------------------
   Dark-mode auto-adaptation
------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --es-rm-accent:       #4f98a3;
    --es-rm-accent-hover: #227f8b;
    --es-rm-surface:      oklch(from currentColor l c h / 0.06);
  }

  .es-rm-collapse-all {
    color:        #bbb;
    border-color: #777;
  }

  .es-rm-collapse-all:hover,
  .es-rm-collapse-all:focus-visible {
    background: #555;
    color:      #fff;
  }
}

/* -------------------------------------------------------------------
   Accessibility: respect reduced motion
------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .es-rm-toggle,
  .es-rm-toggle-icon,
  .es-rm-content.es-rm-animating,
  .es-rm-expand-all,
  .es-rm-collapse-all {
    transition: none !important;
  }
}