/**
 * SRD add-to-calendar button.
 *
 * Same hand as the SRD26 exhibitor index and the programme: Outfit, square
 * corners, no shadows, no fills that are not doing work, and the rules between
 * menu items drawn as 1px grid gaps rather than borders.
 *
 * The button is OUTLINED, not filled: it sits beside the theme's own solid red
 * "Register here" in the hero, and two solid red buttons side by side compete
 * for the same job. A 1px line and a smaller label read as the secondary
 * action they are, and hovering fills it with the brand red so the connection
 * to the primary button is still there.
 *
 * The red is the live theme's --RED, #cc251c, on BOTH grounds. The dark skins
 * in srd_schedule and the exhibitor index use a brighter #ff4a3d on the
 * grounds that #cc251c goes muddy against navy, and this file copied that.
 * It was wrong here: this button sits in the hero directly beside the theme's
 * own "Register here", which is #cc251c on the same navy, so the brighter red
 * read as a second, different red. Matching the neighbour beats matching the
 * skin it was copied from.
 *
 * Tokens are copied rather than imported, exactly as srd_schedule copied them:
 * the two are separate plugins and a reskin of one must not silently change
 * the other.
 *
 * Structure: <details> carries the open state, <summary> is the button, and
 * the menu is a normal flow child that the element hides for us. Nothing here
 * depends on the script.
 *
 * @package SRD_Add_To_Calendar
 */

.srdatc {
  --srdatc-red:       #cc251c;
  --srdatc-red-deep:  #a81c15;
  --srdatc-on-red:    #ffffff;
  /* Hover accent for menu TEXT, which is a different job from the button
     fill. The brand red on the dark menu ground is barely legible, so the
     dark theme lifts it; the fill stays #cc251c on both grounds. */
  --srdatc-accent:    #ff6a5e;
  /* The outline and the label. White on the navy hero. */
  --srdatc-line:      #ffffff;
  --srdatc-label:     #ffffff;
  --srdatc-paper:     #041b2f;
  --srdatc-sunk:      #082741;
  --srdatc-ink:       #eaf1f6;
  --srdatc-ink-60:    #9fb3c4;
  --srdatc-rule:      #16405c;

  --srdatc-font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;

  position: relative;
  display: block;
  font-family: var(--srdatc-font);
  color: var(--srdatc-ink);
}

/* Light ground keeps the same fill and swaps the neutrals; on white the
   brand red is legible as text, so the accent goes back to it. */
.srdatc--light {
  --srdatc-accent:   #cc251c;
  /* A white line would be invisible here, so the outline takes the brand red. */
  --srdatc-line:     #cc251c;
  --srdatc-label:    #cc251c;
  --srdatc-paper:    #ffffff;
  --srdatc-sunk:     #f4f6f8;
  --srdatc-ink:      #1b2733;
  --srdatc-ink-60:   #566573;
  --srdatc-rule:     #dfe4e8;
}

.srdatc *,
.srdatc *::before,
.srdatc *::after { box-sizing: border-box; }

.srdatc--center { text-align: center; }
.srdatc--right  { text-align: right; }

/* ── Neutralising Hello Elementor's reset ────────────────────────────────
   hello-elementor/assets/css/reset.css sets, verbatim:

     a                          { color: #c36 }
     button                     { border: 1px solid #c36; color: #c36;
                                  border-radius: 3px; display: inline-block;
                                  white-space: nowrap }
     button:hover, button:focus { background-color: #c36; color: #fff }

   Specificity is layered, the same scheme the exhibitor skin and the
   programme both settled on. Ties fall back to source order and the theme
   wins those, so every rule below is deliberately one step above it:

     theme        a / button:hover          (0,0,1) / (0,1,1)
     this reset   .srdatc a / .srdatc button:hover   (0,1,1) / (0,2,1)  wins
     components   .srdatc .srdatc__item[:hover]      (0,2,0) / (0,3,0)  wins

   The state rules set background only. Including colour here made a merely
   focused control fall back to `inherit` in the programme, which turned a
   control black against its own dark backdrop the moment it took focus. */

.srdatc a,
.srdatc button,
.srdatc summary {
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  color: inherit;
  box-shadow: none;
  text-shadow: none;
  text-decoration: none;
  white-space: normal;
}

.srdatc a:hover,
.srdatc a:focus,
.srdatc button:hover,
.srdatc button:focus,
.srdatc summary:hover,
.srdatc summary:focus {
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
}

/* ── Disclosure ─────────────────────────────────────────────────────────── */

.srdatc .srdatc__disclosure {
  position: relative;
  display: inline-block;
  text-align: left;
}

/* The default triangle, removed three ways because the browsers disagree on
   which one they honour. */
.srdatc .srdatc__btn {
  list-style: none;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: .55rem;

  padding: .85rem 1.05rem;
  border: 1px solid var(--srdatc-line);
  border-radius: 0;
  background-color: transparent;
  color: var(--srdatc-label);

  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.005em;

  /* Overrides the reset above, which clears hello-elementor's nowrap for the
     sake of wrapping menu labels. A BUTTON label wrapping to two lines makes
     the control twice as tall as the one beside it and squeezes that one into
     wrapping too, which is exactly what happened in the SRD hero. */
  white-space: nowrap;

  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.srdatc .srdatc__btn::-webkit-details-marker { display: none; }
.srdatc .srdatc__btn::marker { content: ""; }

.srdatc .srdatc__btn:hover,
.srdatc .srdatc__btn:focus {
  background-color: var(--srdatc-red);
  border-color: var(--srdatc-red);
  color: var(--srdatc-on-red);
}

.srdatc .srdatc__btn:focus-visible {
  outline: 2px solid var(--srdatc-ink);
  outline-offset: 2px;
}

.srdatc .srdatc__icon {
  flex: 0 0 auto;
  stroke-linecap: square;
}

.srdatc .srdatc__chev {
  flex: 0 0 auto;
  margin-left: .15rem;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: transform .16s ease;
}

.srdatc .srdatc__disclosure[open] .srdatc__chev { transform: rotate(180deg); }

/* ── Menu ───────────────────────────────────────────────────────────────
   The container paints the rule colour and sets gap:1px; the children paint
   the paper colour. Every rule in the menu is therefore a gap, not a border,
   which is the same construction the programme uses. It only holds because
   every child is guaranteed to be filled. */

.srdatc .srdatc__menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 1px);
  left: 0;
  min-width: 17rem;

  display: flex;
  flex-direction: column;
  gap: 1px;

  padding: 1px;
  border: 1px solid var(--srdatc-rule);
  border-radius: 0;
  background-color: var(--srdatc-rule);

  animation: srdatc-in .14s ease-out;
}

.srdatc--right .srdatc__menu { left: auto; right: 0; }

@keyframes srdatc-in {
  from { opacity: 0; transform: translateY(-.25rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .srdatc .srdatc__menu { animation: none; }
  .srdatc .srdatc__chev { transition: none; }
  .srdatc .srdatc__btn  { transition: none; }
}

.srdatc .srdatc__item {
  display: flex;
  align-items: center;
  gap: .6rem;

  padding: .7rem .95rem;
  background-color: var(--srdatc-paper);
  color: var(--srdatc-ink);

  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.25;

  transition: background-color .12s ease, color .12s ease;
}

.srdatc .srdatc__item:hover,
.srdatc .srdatc__item:focus {
  background-color: var(--srdatc-sunk);
  color: var(--srdatc-accent);
}

.srdatc .srdatc__item:focus-visible {
  outline: 2px solid var(--srdatc-accent);
  outline-offset: -2px;
}

.srdatc .srdatc__item-mark {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--srdatc-ink-60);
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.srdatc .srdatc__item:hover .srdatc__item-mark,
.srdatc .srdatc__item:focus .srdatc__item-mark { color: var(--srdatc-accent); }

/* The group heading is a filled child like any other, so the 1px gaps above
   and below it come out of the same grid as the rest. */
.srdatc .srdatc__group {
  margin: 0;
  padding: .6rem .95rem .45rem;
  background-color: var(--srdatc-paper);
  color: var(--srdatc-ink-60);

  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.srdatc .srdatc__item--day { padding-left: .95rem; }

.srdatc .srdatc__when {
  margin: .6rem 0 0;
  color: var(--srdatc-ink-60);
  font-size: .875rem;
  line-height: 1.35;
}

/* Below the widest phone the menu stops being a dropdown and becomes part of
   the page, because a 17rem panel pinned to a 320px viewport either overflows
   the page or has to be scrolled sideways. */
@media (max-width: 30rem) {
  .srdatc .srdatc__disclosure { display: block; }
  .srdatc .srdatc__btn { width: 100%; justify-content: center; }
  .srdatc .srdatc__menu {
    position: static;
    min-width: 0;
    width: 100%;
    margin-top: 1px;
  }
}

/* Editors only; visitors never see this. */
.srdatc-notice {
  margin: 1rem 0;
  padding: .75rem 1rem;
  border-left: 3px solid #cc251c;
  background: #fdf3f2;
  color: #7a1a14;
  font-size: .875rem;
}