/* =============================================================================
   Applied Technology Academy — Arlo widget theme
   -----------------------------------------------------------------------------
   Styles the LIVE Arlo shortcode output so it matches the ATA site design:
     • course-page sidebar   [sc name="event_template_sidebar" templateCodes="…"]
     • upcoming-events list   (the full schedule / "upcoming classes" widget)

   Registration links push through to the Arlo cart at
   train.appliedtechnologyacademy.com — this file only restyles the schedule
   display; it never changes the shortcode behavior.

   WHERE TO PUT IT (production WordPress):
     Appearance → Customize → Additional CSS, or the Arlo plugin's custom-CSS box.
   All colors are the --ata-* variables below — edit them in one place.
   Targets Arlo's own class names; safe to load anywhere (no-ops with no widget).
   ============================================================================= */

:root{
  --ata-blue:#12679B;      --ata-blue-dark:#0D4D75;   --ata-blue-deep:#082A40;
  --ata-crimson:#8F0631;   --ata-crimson-dark:#6E0426;
  --ata-ink:#14181C;       --ata-gray:#5b6670;        --ata-line:#DCE8F1;
  --ata-ice:#BFDFF7;       --ata-ice-soft:#EAF4FC;    --ata-paper:#FFFFFF;
  --ata-radius:10px;       --ata-pill:999px;
  --ata-sans:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;
  --ata-shadow:0 1px 2px rgba(8,42,64,.06),0 2px 10px rgba(8,42,64,.07);
  --ata-shadow-hover:0 6px 24px rgba(8,42,64,.13);
}

/* ---- Base: Montserrat everywhere, tidy box model ---------------------------- */
.arlo, .arlo *, .tooltipcontent, .tooltipcontent *{ font-family:var(--ata-sans) !important; }
.arlo{ color:var(--ata-ink); }
.arlo *{ box-sizing:border-box; }

/* Hide internal/admin artifacts (raw template code + fau/unf/vendor tags).
   To show vendor tags instead, delete the .arlo-event-tags line and use the
   commented ".arlo-event-tags" block near the bottom. */
.arlo .templateCode,
.arlo .templateIDTarget,
.arlo .arlo-event-tags{ display:none !important; }

/* Arlo's own "primary color" hooks → ATA blue */
.arlo .arlo-bg-color-primary{ background:var(--ata-blue) !important; }
.arlo .arlo-text-color-primary{ color:var(--ata-blue) !important; }
.arlo .arlo-text-color-contrast{ color:#fff !important; }

/* Shared: FontAwesome glyphs in ATA blue */
.arlo .fa, .arlo .fas, .arlo .arlo-info svg, .arlo .arlo-duration svg,
.arlo .arlo-offers svg, .arlo .arlo-location svg{ color:var(--ata-blue); fill:var(--ata-blue); }

/* =========================================================================
   SIDEBAR  —  [sc name="event_template_sidebar" …]
   ========================================================================= */
.arlo .arlo-heading{ font-size:1.05rem; font-weight:700; color:var(--ata-ink); margin:0 0 .8rem; }
.arlo .arlo-eventtemplate-listitems{ list-style:none; margin:0; padding:0; }
.arlo .arlo-eventtemplate-listitem{
  background:var(--ata-paper); border:1px solid var(--ata-line);
  border-radius:var(--ata-radius); padding:1.1rem 1.2rem; margin:0 0 1rem;
  box-shadow:var(--ata-shadow);
}
.arlo h1.arlo-name, .arlo .arlo-name{
  font-size:1.15rem; font-weight:700; line-height:1.25; letter-spacing:-.01em;
  color:var(--ata-ink); margin:0 0 .5rem;
}
.arlo .arlo-summary{
  font-size:.88rem; line-height:1.5; font-weight:400; color:var(--ata-gray); margin:0 0 .8rem;
}
.arlo .arlo-details-target{ margin:0 0 .2rem; }
.arlo .arlo-duration{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem;
  font-size:.85rem; color:var(--ata-gray); }
.arlo .arlo-offers{ display:inline-flex; align-items:center; gap:.4rem; }
.arlo .arlo-offer-amount{ font-size:1.1rem; font-weight:700; color:var(--ata-crimson); }

/* Dates list inside the sidebar */
.arlo .arlo-dates{ border-top:1px solid var(--ata-line); margin-top:.6rem; padding-top:.8rem; }
.arlo .arlo-dates .arlo-event-list{ list-style:none; margin:0; padding:0; }
.arlo .arlo-dates .arlo-event-listitem{ border:0; background:none; box-shadow:none; padding:0; margin:0 0 .6rem; }
.arlo .arlo-dates .arlo-listitem{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.35rem .7rem;
  padding:.6rem .75rem; border:1px solid var(--ata-line); border-radius:8px; background:var(--ata-ice-soft);
}
.arlo .arlo-toggle{ color:var(--ata-blue); cursor:pointer; }
.arlo .arlo-date{ font-size:.92rem; font-weight:700; color:var(--ata-blue-dark);
  display:flex; flex-wrap:wrap; gap:.25rem; }
.arlo .arlo-date span{ display:inline; }
.arlo .arlo-accordion{ grid-column:1 / -1; font-size:.8rem; color:var(--ata-gray);
  display:flex; flex-wrap:wrap; gap:.2rem 1rem; }
.arlo .arlo-duration-desc, .arlo .arlo-location{ font-size:.8rem; color:var(--ata-gray); }
.arlo .arlo-start-date{ display:none; }        /* redundant with .arlo-date */

/* Register button — the conversion CTA into the Arlo cart (primary, crimson).
   Inline by default (full list); full-width only inside the sidebar date row. */
.arlo .arlo-registration{ grid-column:1 / -1; margin-top:.35rem; }
.arlo a.arlo-event-register{
  display:inline-block; text-align:center; text-decoration:none;
  background:var(--ata-crimson) !important; color:#fff !important; font-weight:700; font-size:.9rem;
  padding:.55rem 1.4rem; border:1px solid var(--ata-crimson) !important; border-radius:var(--ata-pill);
  transition:background .15s, box-shadow .15s, transform .05s;
}
.arlo a.arlo-event-register:hover{ background:var(--ata-crimson-dark) !important; border-color:var(--ata-crimson-dark) !important;
  box-shadow:0 4px 14px rgba(143,6,49,.3); }
.arlo a.arlo-event-register:active{ transform:translateY(1px); }
.arlo .arlo-registration a.arlo-event-register{ display:block; width:100%; }

/* "Select date" dropdown (alternate register path) */
.arlo .arlo-dates-dropdown{ margin-top:.6rem; }
.arlo .arlo-dates-dropdown select{
  width:100%; font-size:.9rem !important; font-weight:600 !important; color:var(--ata-ink) !important;
  background:var(--ata-paper) !important; border:1px solid var(--ata-line) !important;
  border-radius:var(--ata-radius) !important; padding:.6rem .8rem !important;
}

/* Register-interest (courses with no scheduled public date) */
.arlo .arlo-register-interest-container, .arlo .arlo-register-private-interest{ margin-top:.6rem; }
.arlo a.arlo-register-interest-link, .arlo a.arlo-register-private-interest{
  display:inline-block; color:var(--ata-blue); font-weight:600; font-size:.85rem;
  text-decoration:none; border-bottom:1px solid currentColor;
}

/* =========================================================================
   FULL LIST  —  upcoming-events / schedule widget
   ========================================================================= */
.arlo #upcoming-events .arlo-event-list{ list-style:none; margin:0; padding:0; }
.arlo #upcoming-events > .arlo-event-list > .arlo-event-listitem{
  background:var(--ata-paper); border:1px solid var(--ata-line); border-radius:var(--ata-radius);
  padding:1rem 1.2rem; margin:0 0 .8rem; box-shadow:var(--ata-shadow);
  transition:border-color .15s, box-shadow .15s;
}
.arlo #upcoming-events > .arlo-event-list > .arlo-event-listitem:hover{
  border-color:var(--ata-ice); box-shadow:var(--ata-shadow-hover); }
.arlo #upcoming-events .arlo-listitem{ display:flex; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.arlo #upcoming-events .arlo-left{ flex:none; }
.arlo #upcoming-events .arlo-right{ flex:1; min-width:14rem; }

/* Calendar date block */
.arlo .arlo-cal{ width:64px; padding:.5rem .2rem; border-radius:8px; text-align:center; line-height:1.12;
  background:var(--ata-blue); color:#fff; }
.arlo .arlo-cal-month{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.arlo .arlo-cal-day{ font-size:1.5rem; font-weight:800; }
.arlo .arlo-cal-year{ font-size:.68rem; opacity:.85; }

.arlo .arlo-title{ margin:0 0 .35rem; }
.arlo .arlo-title a{ font-size:1.1rem; font-weight:700; color:var(--ata-ink); text-decoration:none; }
.arlo .arlo-title a:hover{ color:var(--ata-blue); }
.arlo .arlo-detail{ font-size:.83rem; color:var(--ata-gray); }
.arlo .arlo-info{ display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; align-items:center; }
.arlo .arlo-location, .arlo .arlo-duration, .arlo .arlo-sessions{ display:inline-flex; align-items:center; gap:.3rem; }
.arlo .arlo-session-info{ cursor:pointer; color:var(--ata-blue); font-weight:600; }

/* "More info" button (full list) — blue, secondary to the crimson Register.
   (It also carries .arlo-bg-color-primary; the explicit blue below owns it.) */
.arlo a.arlo-more-info-button{
  display:inline-block; text-decoration:none; background:var(--ata-blue) !important; color:#fff !important;
  font-weight:700; font-size:.85rem; padding:.5rem 1.2rem; border:1px solid var(--ata-blue) !important;
  border-radius:var(--ata-pill); margin:.5rem .4rem 0 0; transition:background .15s, box-shadow .15s; }
.arlo a.arlo-more-info-button:hover{ background:var(--ata-blue-dark) !important; border-color:var(--ata-blue-dark) !important;
  box-shadow:0 4px 14px rgba(18,103,155,.28); }

/* ---- Filters + "show more" --------------------------------------------------- */
.arlo .arlo-filters-container{ margin:0 0 1rem; }
.arlo .arlo-filter-toggle-show, .arlo .arlo-filter-toggle-hide{
  display:inline-block; cursor:pointer; font-weight:600; font-size:.85rem; color:var(--ata-blue);
  border:1px solid var(--ata-line); border-radius:var(--ata-pill); padding:.4rem 1rem; background:var(--ata-paper); }
.arlo #filters{ margin-top:.8rem; }
.arlo #filters select, .arlo #filters input{
  font-size:.9rem; color:var(--ata-ink); background:#fff;
  border:1px solid var(--ata-line); border-radius:var(--ata-radius); padding:.5rem .7rem; }
.arlo .arlo-show-more-container{ text-align:center; margin-top:1rem; }
.arlo a.arlo-show-more, .arlo .arlo-show-more{
  display:inline-block; cursor:pointer; text-decoration:none; font-weight:700; font-size:.88rem;
  color:var(--ata-blue) !important; background:#fff; border:1px solid var(--ata-blue);
  border-radius:var(--ata-pill); padding:.55rem 1.4rem; }
.arlo a.arlo-show-more:hover, .arlo .arlo-show-more:hover{ background:var(--ata-ice-soft); }

/* ---- Session tooltip --------------------------------------------------------- */
.tooltipcontent, .tooltip-inner{
  background:var(--ata-blue-deep) !important; color:#EAF4FC !important; border-radius:8px !important;
  font-size:.8rem !important; padding:.6rem .8rem !important; text-align:left !important; }
.tooltipcontent .arlo-sessions{ list-style:none; margin:0; padding:0; }
.tooltipcontent .arlo-session{ margin:0 0 .4rem; }
.tooltipcontent .arlo-session-name{ font-weight:700; color:#fff; }

/* ---- OPTIONAL: show vendor tags as pills instead of hiding them -------------
.arlo .arlo-event-tags{ display:block !important; margin:0 0 .5rem; }
.arlo .arlo-event-tags ul{ list-style:none; display:flex; flex-wrap:wrap; gap:.3rem; margin:0; padding:0; }
.arlo .arlo-event-tags li{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ata-blue-dark); background:var(--ata-ice-soft); border:1px solid var(--ata-line);
  border-radius:var(--ata-pill); padding:.15rem .6rem; }
------------------------------------------------------------------------------ */

/* =========================================================================
   COMPACT / one-per-line variant  (opt-in)
   -------------------------------------------------------------------------
   Condenses each session to a single line — for tight sidebar columns and
   long date lists. Activate by adding class "arlo-compact" to a wrapper
   around the shortcode (or to the page-builder column that holds it):

       <div class="arlo-compact">[sc name="event_template_sidebar" …]</div>

   Everything below only applies inside .arlo-compact, so the default card
   layout above is untouched.
   ========================================================================= */

/* ---- Sidebar (event_template_sidebar) ---- */
.arlo-compact .arlo-eventtemplate-listitem{ padding:.85rem 1rem; }
.arlo-compact .arlo-name{ font-size:1rem; margin:0 0 .3rem; }
.arlo-compact .arlo-summary{ display:none; }                 /* drop the blurb */
.arlo-compact .arlo-details-target{ margin:0 0 .35rem; }
.arlo-compact .arlo-duration{ font-size:.8rem; gap:.3rem .8rem; }
.arlo-compact .arlo-offer-amount{ font-size:.95rem; }
.arlo-compact .arlo-dates{ margin-top:.4rem; padding-top:.5rem; }
.arlo-compact .arlo-dates .arlo-event-listitem{ margin:0 0 .3rem; }
/* one line: date left, Register right */
.arlo-compact .arlo-dates .arlo-listitem{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.4rem .55rem; }
.arlo-compact .arlo-date{ font-size:.85rem; }
.arlo-compact .arlo-toggle, .arlo-compact .arlo-accordion{ display:none; }  /* hide time/loc expander */
.arlo-compact .arlo-registration{ margin:0; }
.arlo-compact .arlo-registration a.arlo-event-register{
  display:inline-block; width:auto; padding:.32rem .85rem; font-size:.76rem; }

/* ---- Full list (upcoming_events) ---- */
.arlo-compact #upcoming-events > .arlo-event-list > .arlo-event-listitem{ padding:.55rem .8rem; margin:0 0 .45rem; }
.arlo-compact #upcoming-events .arlo-listitem{ align-items:center; gap:.7rem; }
/* calendar tile → small inline "Aug 17" chip */
.arlo-compact .arlo-cal{ display:inline-flex; align-items:baseline; gap:.25rem; width:auto; padding:.2rem .55rem; border-radius:var(--ata-pill); }
.arlo-compact .arlo-cal-month{ font-size:.68rem; }
.arlo-compact .arlo-cal-day{ font-size:.85rem; }
.arlo-compact .arlo-cal-year{ display:none; }
.arlo-compact .arlo-right{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem 1rem; min-width:0; }
.arlo-compact .arlo-title{ margin:0; flex:1 1 11rem; min-width:0; }
.arlo-compact .arlo-title a{ font-size:.92rem; }
.arlo-compact .arlo-info{ gap:.2rem .7rem; font-size:.76rem; }
.arlo-compact a.arlo-more-info-button{ display:none; }        /* keep only the Register CTA */
.arlo-compact a.arlo-event-register{ margin:0; padding:.32rem .85rem; font-size:.76rem; flex:none; }