/* ==========================================================================
   events.css
   The Events Calendar front end, on the EGE theme.

   Loaded only on TEC views, last, by ege_events_styles() in inc/events.php.

   WHERE THE PLUGIN'S COLOURS ACTUALLY COME FROM, because guessing cost time on
   Tutor and the same trap is here:

   TEC's own :root block in views-full.css contains ALMOST NOTHING BUT ALIASES.
   Every one of them resolves to a base token, and those base tokens are defined
   in a completely different plugin's stylesheet:
   event-tickets/common/build/css/variables-skeleton.css, on :root.
   --tec-color-accent-primary is #334aff, which is the blue on "Subscribe to
   calendar" and the view links. Override the base tokens and the whole calendar,
   its buttons, links, icons, focus rings, borders and datepicker follow at once.
   Overriding rule by rule instead means chasing about forty selectors.

   Specificity note: theirs is :root and so is ours, which is a tie, so this
   only wins because inc/events.php enqueues at priority 999 and WordPress
   prints in enqueue order. Do not "tidy" that priority away.
   ========================================================================== */

/* ------------------------------------------------------------ base tokens ---- */
:root{
  /* type */
  --tec-color-text-primary:          #383838;   /* --ink,   11.73:1 on white  */
  --tec-color-text-primary-light:    #3c6159d9;
  --tec-color-text-secondary:        #3c6159;   /* --muted, 6.83:1 on white   */
  --tec-color-text-disabled:         #9bb0aa;
  --tec-color-text-event-date:       #004738;

  /* accent. Everything interactive derives from these two. */
  --tec-color-accent-primary:        #004738;   /* --forest */
  --tec-color-accent-primary-hover:  #023b1b;
  --tec-color-accent-primary-active: #012216;
  --tec-color-accent-primary-background:#d4e9e7;
  --tec-color-accent-secondary:      #137176;   /* --teal, 5.75:1 on white    */
  --tec-color-accent-secondary-hover:#004738;
  --tec-color-accent-secondary-active:#012216;
  --tec-color-accent-secondary-background:#f3fffe;

  /* links. link-accent and button-primary alias the accent, so they follow,
     but link-accent-hover is its own literal in the plugin and does not. */
  --tec-color-link-primary:          #004738;
  --tec-color-link-accent-hover:     #023b1b;

  /* icons */
  --tec-color-icon-primary:          #3c6159;
  --tec-color-icon-primary-alt:      #3c6159;
  --tec-color-icon-secondary:        #87b9ae;
  --tec-color-icon-active:           #004738;
  --tec-color-icon-focus:            #004738;
  --tec-color-icon-disabled:         #c6d6d2;
  --tec-color-icon-error:            #B3261E;   /* --error */
  --tec-color-event-icon:            #004738;
  --tec-color-event-icon-hover:      #023b1b;

  /* borders and grounds */
  --tec-color-border-default:        rgba(0,71,56,.16);
  --tec-color-border-secondary:      rgba(0,71,56,.12);
  --tec-color-border-tertiary:       rgba(0,71,56,.30);
  --tec-color-border-hover:          rgba(0,71,56,.42);
  --tec-color-border-active:         #004738;
  --tec-color-background:            #fff;
  --tec-color-background-secondary:  #fffff0;   /* --ivory */
  --tec-color-background-secondary-hover:#f3fffe;
  --tec-color-background-messages:   #f3fffe;   /* --teal-tint */
  --tec-color-background-error:      #fdf1f0;

  /* multiday and week fills, so a future month view is not blue either */
  --tec-color-background-primary-multiday:#87b9ae66;
  --tec-color-background-primary-multiday-hover:#87b9ae99;
  --tec-color-accent-primary-week-event:#f3fffe;
  --tec-color-accent-primary-week-event-hover:#d4e9e7;

  --tec-font-family-sans-serif:"Montserrat", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --tec-font-family-base:"Montserrat", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

/* ------------------------------------------------------------- page frame ---- */
/* Without this the calendar runs straight into the footer, the same fault the
   LMS archive had. The container also takes the site's own wrap width so the
   calendar lines up with the heading band above it. */
/* MIN-HEIGHT IS THE ONE THAT MATTERS HERE, not the padding.
   views-skeleton.css sets `min-height:700px` on this container at breakpoint-medium (600px
   below it). With one short event the content is nowhere near 700px, so the container pads
   itself out and leaves a measured 285px of white above the footer, over this project's
   260px dead-band threshold. It is the same fault as the old .ege-main{min-height:40vh}.

   Both selectors are needed and the first is why this works at all: the plugin's rule is
   `.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container` at 0,3,0, so a
   bare `.tribe-events-l-container` at 0,1,0 loses and changing it does nothing at all.
   Matching 0,3,0 and loading later is what wins.

   Calibration for anyone retuning this: .ege-section is 176px of legitimate gap between two
   sections, .ege-section--loose is 240px, and the detector flags runs over 260px. */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container,
.tribe-events .tribe-events-l-container{
  width:min(1180px, calc(100% - 2.5rem));
  margin-inline:auto;
  min-height:0;
  padding-top:0;
  padding-bottom:2rem;
}
body.tribe-events-page-template .ege-main,
body.post-type-archive-tribe_events .ege-main,
body.single-tribe_events .ege-main{ padding-bottom:0; }

/* TEC sets its own stack on .tribe-common. The variable above is not enough on
   its own because the plugin hardcodes a fallback list in that one rule. */
.tribe-common{ font-family:var(--tec-font-family-sans-serif); }
.tribe-common a{ text-decoration:none; }
.tribe-common a:hover{ text-decoration:underline; }

/* --------------------------------------------------------- heading band ----- */
/* Same band as the course archive in lms.css, deliberately identical: both are
   plugin-owned listings that cannot carry a photographic hero without a template
   override. Kept as its own class rather than shared, because lms.css does not
   load here and neither sheet should start depending on the other. */
.ege-events-head{
  background:var(--forest); color:#fff;
  margin:0 0 2.8rem; padding:2.6rem 0;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.ege-events-head__inner{ max-width:74rem; margin:0 auto; padding:0 1.5rem; }
.ege-events-head .ege-eyebrow{ color:#fff; }
.ege-events-head .ege-eyebrow::before{ background:#fff; }
.ege-events-head h1{
  color:#fff; font-family:var(--font-display); font-weight:var(--wt-display);
  font-size:clamp(1.9rem,3.6vw,2.9rem); line-height:1.1; margin:.2rem 0 .6rem;
}
.ege-events-head p{ color:rgba(255,255,255,.9); max-width:46rem; margin:0; line-height:1.6; }

/* The plugin prints its own <h1> as screen-reader-text. Ours is a real visible
   h1 with the same words, so leaving both means a screen reader announces the
   page title twice. display:none takes it out of the accessibility tree, which
   the plugin's visual-hide class deliberately does not. */
body.post-type-archive-tribe_events .tribe-events-header__content-title{ display:none; }

/* ---------------------------------------------------------------- buttons ---- */
.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn{
  font-family:var(--font-body); font-weight:var(--wt-sub);
  border-radius:var(--radius-pill); padding:.8rem 1.5rem;
  background:var(--forest); color:#fff; border:2px solid var(--forest);
}
/* Every state named for the reason recorded in components.css: the parent theme's
   a:hover is 0,1,1 and beats a single class, which is how a hovered forest button
   went blue on green on the travel page. */
.tribe-common a.tribe-common-c-btn:hover,
.tribe-common a.tribe-common-c-btn:focus,
.tribe-common a.tribe-common-c-btn:visited,
.tribe-common a.tribe-common-c-btn:active{ background:var(--green-deep); color:#fff; border-color:var(--green-deep); text-decoration:none; }

.tribe-common .tribe-common-c-btn-border,
.tribe-common .tribe-common-c-btn-border-small{
  border-radius:var(--radius-pill); border-color:rgba(0,71,56,.28); color:var(--forest);
  font-family:var(--font-body); font-weight:var(--wt-sub);
}
.tribe-common .tribe-common-c-btn-border:hover,
.tribe-common .tribe-common-c-btn-border-small:hover{ border-color:var(--forest); background:var(--teal-tint); }

/* ------------------------------------------------------- bar, nav, notices --- */
.tribe-events-c-events-bar{ margin-bottom:1.6rem; }
.tribe-events-c-events-bar__search-container,
.tribe-events-c-search__input-control{ border-radius:var(--radius-card); }
.tribe-common .tribe-common-form-control-text__input{
  font-family:var(--font-body); color:var(--ink);
}

.tribe-events-c-view-selector__list-item-text{ font-family:var(--font-body); font-weight:var(--wt-sub); }
.tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-text{ color:var(--forest); }

.tribe-events-c-nav{ border-top:1px solid rgba(0,71,56,.12); padding-top:1.2rem; margin-top:2rem; }
.tribe-events-c-nav__list-item a,
.tribe-events-c-nav__next,
.tribe-events-c-nav__prev{ font-family:var(--font-body); font-weight:var(--wt-sub); color:var(--forest); }
.tribe-events-c-nav__today{ font-family:var(--font-body); color:var(--muted); }

/* The empty-calendar notice. Restyled rather than hidden: it is the live region
   the plugin rewrites when a search returns nothing, and it is what a screen
   reader announces. The visitor-facing empty state is the block below it. */
.tribe-events-c-messages__message{
  background:var(--teal-tint); border:1px solid rgba(0,71,56,.14);
  border-radius:var(--radius-card); color:var(--muted);
  font-family:var(--font-body); padding:1rem 1.2rem;
}
/* Do not blanket-fill the notice icon's paths. The icon is a ring with a glyph punched out
   of it, so filling every path renders it as a solid square. Colour the stroke and the
   fill utility classes the plugin puts on the parts it means to be coloured. */
.tribe-events-c-messages__message-icon-svg .tribe-common-c-svgicon__svg-fill{ fill:var(--forest); }
.tribe-events-c-messages__message-icon-svg .tribe-common-c-svgicon__svg-stroke{ stroke:var(--forest); }

/* Subscribe to calendar, which shipped as a full-width blue-bordered bar. */
.tribe-events-c-subscribe-dropdown__button{
  border-radius:var(--radius-pill); border-color:rgba(0,71,56,.28);
  font-family:var(--font-body); font-weight:var(--wt-sub); color:var(--forest);
}
.tribe-events-c-subscribe-dropdown__list{ border-radius:var(--radius-card); }

/* ------------------------------------------------------------- list rows ----- */
/* These only appear once EGE enters an event. Styled to the site's photo card so
   the first real event does not arrive looking like a different website. */
.tribe-events-calendar-list__event-row{ border-bottom:1px solid rgba(0,71,56,.12); padding-block:1.8rem; }
.tribe-events-calendar-list__event-row:last-child{ border-bottom:0; }
.tribe-events-calendar-list__event-date-tag-datetime{ color:var(--forest); font-family:var(--font-body); }
.tribe-events-calendar-list__event-date-tag-weekday{ color:var(--muted); letter-spacing:.1em; text-transform:uppercase; font-size:.7rem; }
/* The plugin's own title size is body-sized, so a listed event read as a caption rather
   than as the heading of its row. Verified against a real record, not guessed.

   The element is <h4 class="...__event-title tribe-common-h6 tribe-common-h4--min-medium">
   and the size comes from `.tribe-common--breakpoint-medium.tribe-common .tribe-common-h6`
   at 0,3,0, so the class on its own does not win. Chaining the two classes the element
   actually carries takes this to 0,4,0. Read the classes off the rendered page. */
.tribe-common.tribe-events .tribe-events-calendar-list__event-title.tribe-common-h6,
.tribe-events-calendar-list__event-title{
  font-family:var(--font-display); font-weight:var(--wt-display); line-height:1.15;
  font-size:clamp(1.15rem,1.7vw,1.45rem); margin:.15rem 0 .45rem;
}
.tribe-events-calendar-list__event-title a,
.tribe-events-calendar-list__event-title a:visited{ color:var(--forest); }
.tribe-events-calendar-list__event-title a:hover{ color:var(--green-mid); }
.tribe-events-calendar-list__event-datetime{ color:var(--muted); font-family:var(--font-body); }
.tribe-events-calendar-list__event-description{ color:var(--ink); line-height:1.65; }
.tribe-events-calendar-list__event-featured-image-link img{ border-radius:var(--radius-card); }

/* ----------------------------------------------------------- single event ---- */
/* Unverified against a real record: there are no events on the site yet, so this
   is written from the plugin's own class list rather than from a render. Check it
   the first time EGE publishes an event. */
.tribe-events-single .tribe-events-single-event-title{
  font-family:var(--font-display); font-weight:var(--wt-display); color:var(--forest);
  font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.15;
}
.tribe-events-single .tribe-events-schedule{ background:var(--teal-tint); border-radius:var(--radius-card); padding:1rem 1.2rem; }
.tribe-events-single .tribe-events-event-meta{
  background:#fff; border:1px solid rgba(0,71,56,.14); border-radius:var(--radius-card);
  font-family:var(--font-body);
}
.tribe-events-single .tribe-events-event-meta dt{ color:var(--muted); }
.tribe-events-single .tribe-events-cal-links a,
.tribe-events-single .tribe-events-event-url a{ color:var(--forest); }

/* ------------------------------------------------------------ empty state ---- */
/* Prints from ege_events_empty_state() only when the calendar really is empty.

   THIS BLOCK SITS INSIDE THE PLUGIN'S OWN CONTAINER, which is why every rule below is
   scoped to .tribe-events rather than relying on the site's component classes. The theme's
   .ege-btn and .ege-wrap are single classes at 0,1,0, the plugin's rules that reach the
   same elements are 0,1,1 and higher, and views-full.css is enqueued after components.css
   so even a tie goes to the plugin. First render of this block came out as unstyled text
   links, left aligned, for exactly that reason. Same specificity trap as the parent
   theme's a:hover recorded in components.css. */
/* An inset panel, deliberately NOT a full-bleed band. The heading band above can bleed
   because it sits directly in <main>; this one sits inside the plugin's container, which
   clips it, so the negative margins did nothing visible while still widening the document.
   That is the exact shape of the bug that once put a horizontal scrollbar on every page of
   this site, so it is not worth reintroducing for a background colour. */
.ege-events-empty{
  background:var(--ivory); padding-block:3.4rem;
  border:1px solid rgba(0,71,56,.10); border-radius:var(--radius-card);
  margin-top:2.4rem;
}
.tribe-events .ege-events-empty__inner{
  max-width:44rem; text-align:center; margin-inline:auto;
}
.tribe-events .ege-events-empty .ege-btn{
  display:inline-block; padding:.85rem 1.6rem; border-radius:var(--radius-pill);
  font-family:var(--font-body); font-weight:var(--wt-sub); font-size:.98rem;
  text-decoration:none; border:2px solid transparent;
}
.tribe-events .ege-events-empty .ege-btn--forest,
.tribe-events .ege-events-empty .ege-btn--forest:visited,
.tribe-events .ege-events-empty .ege-btn--forest:active{ background:var(--forest); color:#fff; border-color:var(--forest); }
.tribe-events .ege-events-empty .ege-btn--forest:hover,
.tribe-events .ege-events-empty .ege-btn--forest:focus{ background:var(--green-deep); color:#fff; border-color:var(--green-deep); text-decoration:none; }
.tribe-events .ege-events-empty .ege-link,
.tribe-events .ege-events-empty .ege-link:visited{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none;
  font-family:var(--font-body); font-weight:var(--wt-sub); font-size:.95rem;
  color:var(--forest); border-bottom:2px solid var(--green-mid); padding-bottom:.15rem;
}
.tribe-events .ege-events-empty .ege-link:hover{ gap:.75rem; color:var(--green-mid); text-decoration:none; }
.ege-events-empty h2{
  font-family:var(--font-display); font-weight:var(--wt-display); color:var(--forest);
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.2; margin:0 0 .7rem;
}
.ege-events-empty p{ color:var(--muted); line-height:1.7; margin:0 auto; }
.ege-events-empty__actions{
  display:flex; gap:1.4rem; align-items:center; justify-content:center;
  flex-wrap:wrap; margin-top:1.6rem;
}

/* ------------------------------------------------------------- responsive ---- */
@media (max-width:782px){
  .ege-events-head{ padding:2rem 0; margin-bottom:2rem; }
  .tribe-events-l-container{ padding-bottom:3rem; }
  .ege-events-empty{ padding-block:3rem; }
  .ege-events-empty__actions{ flex-direction:column; gap:1rem; }
}

/* ---------- accessibility corrections, 2026-09-08 ----------
   The Events Calendar ships its pagination labels in #9bb0aa on white, which computes to
   2.29:1 and fails AA outright. These are the only two words a visitor uses to move between
   months, so they cannot be the least legible text on the page. Forest is 10.72:1. */
.tribe-events-c-nav__prev-label,
.tribe-events-c-nav__next-label,
.tribe-events-c-nav__prev-label-plural,
.tribe-events-c-nav__next-label-plural{ color:var(--forest); }