/* ==========================================================================
   ICGC Praise Temple - the church's year, as a popup
   ==========================================================================
   Drawn by [icgc_events_popup] (icgc-events.php), which since 15 September
   2026 sits in the theme's footer - so it is on every page of the site. It is
   also a shortcode anybody can put in a page, and nothing here assumes either.

   WHY THIS FILE EXISTS AT ALL. The twelve-month plan is styled on the Schedule
   page by adinkra.css's .ad-evy block - and THE HOME PAGE DOES NOT LOAD
   adinkra.css. That is deliberate and long-standing: the home page has its own
   scoped stylesheet and adinkra's rules reach its elements (icgc-home-2026.php
   says so at length, and icgc_home_2026_owns_its_styling() enforces it). So the
   same markup that is fully dressed on the Schedule page arrives here with no
   rules against it at all, and the month grid has to be drawn again.

   Everything below is scoped to .ad-evp, which does a second job: on a page
   that somehow had both files, .ad-evp .ad-evy-plan is (0,2,0) and beats
   adinkra's (0,1,0) whichever file the browser happens to read first. The two
   cannot fight, and the Schedule page never sees any of this.

   THE SCOPING IS ALSO DEFENCE. This is a guest on somebody else's page, and
   every stylesheet on this site sets h2 and p. .ad-evp .ad-evp-head
   .ad-evp-title is (0,3,0) on purpose: the home page's own
   ".icgc-home-2026 .sec h2" is (0,2,1) and sets the 38-64px section size, so
   anything weaker than that leaves the popup's heading rendered as a section
   title. Measured, not guessed - it is what the first cut did.

   ONE RENDERER, TWO TREATMENTS. icgc_events_render_year_plan() produces the
   markup for both screens. A new element added there arrives here unstyled and
   nothing warns you; the note in that function's docblock is the only thing
   that will.

   The event colours are NOT here. They are data, written inline by the renderer
   from icgc_events_kinds(), which is the whole reason that array carries them.
   ========================================================================== */

.ad-evp {
  /* The page's own palette where the page has one, the church's where it does
     not. The home page defines --gold/--tx/--panel on .icgc-home-2026;
     adinkra.css defines the --ad- family on :root; a page with neither gets the
     literals, which are those same values. Three sources resolved in one place
     rather than a fourth set of hex codes to keep true. */
  --evp-gold:   var(--gold,     var(--ad-gold,  #B8801F));
  /* A SECOND gold, and not a nicety. --evp-gold fills the button, where 3:1 is
     the floor and it passes comfortably; the "This month" tag is 11px text,
     where the floor is 4.5:1 and the bright gold measures about 3:1 on white.
     The home page hit exactly this and keeps two tokens for it. */
  --evp-goldtx: var(--goldText, #7C5514);
  --evp-ink:    var(--tx,       var(--ad-text,    #191D18));
  --evp-muted:  var(--tx2,      var(--ad-text2,   #5A6158));
  --evp-paper:  var(--panel,    var(--ad-surface, #FFFFFF));
  --evp-hair:   var(--hair,     var(--ad-rule,    rgba(20, 16, 12, .12)));
  --evp-display: var(--display, var(--ad-display,
    Futura, "Avenir Next", "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif));

  --evp-spring: cubic-bezier(.32, .72, 0, 1);

  /* The component's own vertical rhythm and alignment, for the IN-PAGE case:
     [icgc_events_popup] dropped into a section. A host section gives it no gap
     of its own - the home page's ".sec h2" carries margin 0 deliberately, so a
     heading's only gap is the one the thing beneath it asks for - and a section
     that ends a page has 14-24px of bottom padding before the footer starts.
     Left rather than centred, because the headings on these pages are left and
     so is the hero's own call to action.
     The footer copy overrides both of these; see "in the footer" below, which
     is where it actually lives. */
  margin: clamp(22px, 2.4vw, 34px) 0 clamp(34px, 3.6vw, 56px);
  text-align: left;
}

/* Not inherited, and the paddings below are all written as though it is. */
.ad-evp, .ad-evp * { box-sizing: border-box; }

/* ---- the button --------------------------------------------------------- */
/* A <summary>, so that with no script - or before it arrives - the button still
   opens the calendar in place. The disclosure triangle has to be taken off
   twice: list-style for everything modern, the WebKit pseudo-element for the
   Safari versions that still draw their own. */
.ad-evp .ad-evp-fold > summary { list-style: none; }
.ad-evp .ad-evp-fold > summary::-webkit-details-marker { display: none; }

.ad-evp .ad-evp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  min-width: 44px;              /* a touch target, per the home page's own floor */
  padding: 15px clamp(24px, 2.4vw, 34px);
  border-radius: 999px;
  background: var(--evp-gold);
  color: #1B1206;
  font-family: var(--evp-display);
  font-weight: 700;
  font-size: clamp(0.875rem, 1.15vw, 1rem);
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(184, 128, 31, .4);
  transition: transform .24s var(--evp-spring),
              background-color .24s var(--evp-spring),
              box-shadow .24s var(--evp-spring);
}
.ad-evp .ad-evp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(184, 128, 31, .4);
}
.ad-evp .ad-evp-btn:active { transform: translateY(0); }
.ad-evp .ad-evp-btn:focus-visible { outline: 3px solid var(--evp-ink); outline-offset: 3px; }

/* ---- the panel ---------------------------------------------------------- */
/* Two lives. Until the script runs it is the body of an open <details>, sitting
   in the page; afterwards it has been moved inside the dialog and the rules
   under .ad-evp-pop take over. Both are real states - the first is what a
   reader with no JavaScript gets - so both are drawn properly. */
.ad-evp .ad-evp-panel {
  max-width: 1100px;
  margin: clamp(20px, 2.2vw, 30px) auto 0;
  padding: clamp(20px, 2.4vw, 32px);
  text-align: left;
  background: var(--evp-paper);
  border: 1px solid var(--evp-hair);
  border-radius: 18px;
  color: var(--evp-ink);
}

/* The heading, in both states. Moved into the popup's top bar by the script,
   which is why it is wrapped rather than loose: one element travels, and one
   selector dresses it wherever it has landed. */
.ad-evp .ad-evp-panel > .ad-evp-head { margin-bottom: clamp(16px, 1.8vw, 24px); }

.ad-evp .ad-evp-head .ad-evp-title {
  margin: 0;
  padding: 0;
  font-family: var(--evp-display);
  font-weight: 700;
  font-size: clamp(1.1875rem, 1.8vw, 1.5625rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--evp-ink);
}
.ad-evp .ad-evp-head .ad-evp-year { color: var(--evp-goldtx); }

.ad-evp .ad-evp-none { font-size: 16px; line-height: 1.6; color: var(--evp-muted); margin: 0; }

.ad-evp .ad-evp-foot {
  margin: clamp(22px, 2.2vw, 30px) 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--evp-hair);
  font-size: 15px;
  line-height: 1.6;
  color: var(--evp-muted);
}
.ad-evp .ad-evp-foot a { color: var(--evp-goldtx); }

/* ---- the popup ---------------------------------------------------------- */
/* Built by events-popup.js, which moves the head and the panel into it. A real
   <dialog>: the browser gives the focus trap, Escape, the page behind going
   inert and the backdrop for nothing, and every one of those is something a
   hand-rolled overlay gets subtly wrong. */
.ad-evp .ad-evp-pop {
  width: min(1100px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--evp-paper);
  color: var(--evp-ink);
  box-shadow: 0 6px 14px rgba(24, 18, 10, .10), 0 62px 96px -42px rgba(24, 18, 10, .66);
  overflow: hidden;
  text-align: left;
}
.ad-evp .ad-evp-pop::backdrop { background: rgba(18, 14, 9, .62); }

/* The height is capped on the inner box, not on the dialog: a dialog that is
   its own scroller scrolls its heading away with the content, and the year you
   are looking at is the one thing that should stay on screen. */
.ad-evp .ad-evp-pop-in {
  display: flex;
  flex-direction: column;
  max-height: min(86vh, 900px);
}

.ad-evp .ad-evp-pop-in > .ad-evp-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px clamp(18px, 2.2vw, 32px);
  border-bottom: 1px solid var(--evp-hair);
}
.ad-evp .ad-evp-pop-in > .ad-evp-head .ad-evp-title { margin-right: auto; }

.ad-evp .ad-evp-close {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 10px 20px;
  font-family: var(--evp-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--evp-muted);
  background: none;
  border: 1px solid var(--evp-hair);
  border-radius: 999px;
  cursor: pointer;
}
.ad-evp .ad-evp-close:hover { color: var(--evp-ink); border-color: var(--evp-muted); }
.ad-evp .ad-evp-close:focus-visible { outline: 3px solid var(--evp-gold); outline-offset: 2px; }

/* min-height:0 or the flex child refuses to shrink below its own content and
   the whole year overflows the dialog instead of scrolling inside it. */
.ad-evp .ad-evp-pop .ad-evp-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  max-width: none;
  border: 0;
  border-radius: 0;
  padding: clamp(18px, 2.2vw, 32px);
}

/* ---- the twelve months -------------------------------------------------- */
/* adinkra.css draws these same classes on the Schedule page; see the head of
   this file for why they are here again. The reasoning behind each value is
   recorded once, there, and is not repeated. */
.ad-evp .ad-evy-plan {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px 20px;
  text-align: left;
  grid-auto-rows: 1fr;          /* one row the height of the next */
}
/* Below about 580px the grid is a single column, where "every row the same
   height" means every quiet month padded out to the height of the fullest one.
   Set at 600 so the rule fails in the safe direction. */
@media (max-width: 600px) {
  .ad-evp .ad-evy-plan { grid-auto-rows: auto; }
}

.ad-evp .ad-evy-month { min-width: 0; }
.ad-evp .ad-evy-mname {
  font-family: var(--evp-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--evp-ink);
  margin: 0 0 8px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--evp-hair);
}
.ad-evp .ad-evy-mname.is-now { border-bottom: 2px solid var(--evp-gold); }
.ad-evp .ad-evy-nowtag {
  float: right;
  font-family: var(--evp-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--evp-goldtx);
  padding-top: 4px;
}

.ad-evp .ad-evy-list { list-style: none; margin: 0; padding: 0; }
.ad-evp .ad-evy-row {
  display: flex;
  gap: 9px;
  align-items: baseline;
  margin: 0 0 6px;
  padding: 0;
  font-size: 15px;
  line-height: 1.4;
}
.ad-evp .ad-evy-row.is-gone { opacity: .5; }

/* Fixed width so the names line up down the block; a ragged left edge over
   twelve blocks is the difference between a list you scan and one you read. */
.ad-evp .ad-evy-when {
  flex: 0 0 3.6em;
  text-align: right;
  font-family: var(--evp-display);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.ad-evp .ad-evy-what { color: var(--evp-ink); }
.ad-evp .ad-evy-none { font-size: 15px; color: var(--evp-muted); margin: 0; }

.ad-evp .ad-evy-key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--evp-hair);
  font-size: 14px;
  color: var(--evp-muted);
}
.ad-evp .ad-evy-key li { display: inline-flex; align-items: center; gap: 7px; margin: 0; }
.ad-evp .ad-evy-swatch { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

/* The year bar, the tools and the Schedule page's footnote belong to that
   page's copy of this screen. The popup renders none of them - it is read-only
   and has its own heading and Close - but a stray one must not draw here if the
   renderer ever starts passing them through. */
.ad-evp .ad-evy-bar,
.ad-evp .ad-evy-foot { display: none; }


/* ---- in the footer ------------------------------------------------------ */
/* Where this actually lives: icgc-events.php hangs it on the theme's
   icgc_footer_links action - the same one the sign-in link uses - so it is on
   every page of the site.
 *
 * IT IS NOT A BUTTON DOWN HERE, IT IS A LINK. The in-page version is a gold
 * pill; in the footer it is set exactly like Log out beside it - 15px Futura,
 * 700, 0.13em, uppercase, the footer's own inherited colour - and underlined,
 * which is the one thing that separates it from its neighbour and says it does
 * something. A pill in a row of quiet links is the loudest thing on the page,
 * at the very bottom of it.
 *
 * Its PLACE in that row is stated in adinkra-header.css beside the other three
 * items, because that list is meant to answer the whole question of what sits
 * where down here: beside Log out on a computer, under it on a phone. */
.ad-evp.ad-evp-infooter {
  /* Pinned, and only for the popup's own accents - the current month's rule and
     the Close button's focus ring. Everywhere else --evp-gold takes whatever
     token the page it stands on has, which is right for something dropped into
     a page. The footer is not in a page: it is outside .icgc-home-2026, so
     --gold is out of scope, and the home page loads no adinkra.css, so --ad-gold
     is too. Left to inherit, the same popup would accent in #A87524 on most
     pages and #B8801F on the home page. #A87524 is the church gold, which is
     what the Schedule page's copy of this screen uses on the same white paper. */
  --evp-gold: #A87524;

  margin: 0;
  flex: 0 0 auto;
  text-align: center;   /* only reaches anything on a phone, where it is a row */
}

/* Undoing the pill. Written as a reset rather than as a pile of overrides so
   that what it becomes is readable in one place. font-family, font-weight and
   text-transform are inherited from the base rule and already match Log out;
   the letter-spacing is 0.12em there and 0.13em here, which is its
   neighbour's. */
.ad-evp-infooter .ad-evp-btn {
  display: inline-block;
  min-height: 0;
  min-width: 0;
  padding: 0 0 2px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: 15px;
  letter-spacing: 0.13em;
  /* The underline. Its neighbour draws the same line on hover only, out of a
     transparent border of the same width, so the two sit on one baseline. */
  border-bottom: 1px solid currentColor;
  transition: color .2s, border-color .2s;
}
.ad-evp-infooter .ad-evp-btn:hover {
  /* The colour Log out and the social icons go to. */
  color: var(--ad-gold-bright, #C08A2E);
  transform: none;
  box-shadow: none;
}
.ad-evp-infooter .ad-evp-btn:active { transform: none; }
/* The default ring is --evp-ink, which is near-black and invisible on this. */
.ad-evp-infooter .ad-evp-btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }

/* With no script the fold opens INTO the footer row, and a 1,100px panel inside
   a link-sized flex item is not a layout. Let the item take the whole row while
   it is open. :has() is doing real work here; where it is not supported the
   panel is a narrow column rather than a broken row, which is the safe
   direction for a path only a reader without JavaScript ever takes. */
.ad-evp.ad-evp-infooter:has(> .ad-evp-fold[open]) { flex: 1 0 100%; }
.ad-evp-infooter .ad-evp-panel { max-width: 1080px; margin-inline: auto; }

/* ---- what people have asked their computer for --------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ad-evp .ad-evp-btn { transition: none; }
  .ad-evp .ad-evp-btn:hover, .ad-evp .ad-evp-btn:active { transform: none; }
}

@media print {
  /* A printed page is a reference, not a way of getting somewhere else - and
     the calendar itself is never open when the page is sent to the printer. */
  .ad-evp { display: none !important; }
}