/*
 * Stamp & Scrapbook Expo -- shared CSS for all "2026 show landing page" builds
 * =====================================================================
 * Loaded via wp_enqueue_style() from inc/2026-show-pages.php, which only
 * enqueues it on the pages listed in ssbe_2026_show_page_slugs() (currently:
 * 2026-schaumburg / CH-26, 2026-mesa / AZ-26, 2026-loveland / CO-26,
 * 2026-sacramento / SA-26, 2026-ontario / ON-26, and 2026-duluth / AT-26).
 * Adding a future show page to that slug list is the ONLY step needed for
 * it to pick up this file -- no CSS changes required, as long as the new
 * page reuses the same markup structure (row/col shortcodes + the class
 * names referenced below).
 *
 * ICONS: every icon on these pages is an inline SVG (via ssbe_icon_svg() in
 * inc/2026-show-pages.php) rather than a Font Awesome icon font -- see the
 * "svg.ssbe-icon" base rule below. It sets width/height: 1em and
 * fill: currentColor, so every existing color/font-size rule that used to
 * target an icon FONT (by tag name "i", or by a specific "fa-*" class)
 * continues to size/color the SVG correctly -- each such selector below was
 * simply repointed from "i"/".fa-*" to ".ssbe-icon", nothing else changed.
 * EXCEPTION: the "Plan Your Visit" row's 4 icons (Location & Parking,
 * Hotels, Tickets & Pricing, Bring Your Friends) use custom uploaded PNG
 * images instead, via the ".plan-visit-icon-box img" rule further down --
 * see that rule's own comment.
 *
 * IMPORTANT -- scoping: every selector below is scoped under
 * ".ssbe-2026-show-page" so this can only match elements inside a show page's
 * own wrapper div (<div class="ssbe-2026-show-page ...">), never the sitewide
 * header/nav or unrelated pages that happen to reuse some of the same legacy
 * class names (.social-icons, .bottombutton, .card, .btn, .header-banner,
 * etc. -- this is what broke the site header's social icons the first time
 * these styles were written, before scoping was added).
 *
 * Each show page's wrapper div also keeps its own page-specific class
 * (.ssbe-ch26-page / .ssbe-az26-page / etc.) alongside .ssbe-2026-show-page,
 * as a hook for any future page-specific override CSS -- add a small
 * page-specific stylesheet and enqueue it only on that page if one show ever
 * needs to diverge from the shared look. As of this writing every 2026 show
 * page's styling is 100% identical, so no page-specific CSS exists yet.
 *
 * PLACEHOLDER: the header-banner background-image below is the Schaumburg
 * hero photo, currently reused as a stand-in for pages (like Mesa/AZ-26)
 * that don't have their own hero photo yet -- see that page's progress notes
 * for what's still pending.
 */

.ssbe-2026-show-page svg.ssbe-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.15em;
  display: inline-block;
  flex-shrink: 0;
}
.ssbe-2026-show-page .header-script {
  font-family: "Dancing Script", cursive;
  font-weight: 800;
  font-style: normal;
  font-size: 3em;
  color: white;
  text-align: center;
  line-height: 1;
  width: 335px;
  padding: 20px;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  margin: 0;
}
.ssbe-2026-show-page .header-normal {
  font-family: "Montserrat", ital;
  font-weight: 600;
  font-size: 0.75em;
}
.ssbe-2026-show-page .header-sub {
  width: 335px;
  color: white;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}
.ssbe-2026-show-page .custom-button {
  display: inline-block;
  background-color: #24bdc5;
  color: white;
  padding: 5px 15px;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  font-size: 1.2em;
  box-shadow: 1px 4px 8px grey;
}
.ssbe-2026-show-page .custom-button:hover {
  background-color: #1ea5ac !important;
}
.ssbe-2026-show-page .headline {
  font-size: 1.8em;
  color: #195668;
  text-align: center;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 0;
}
.ssbe-2026-show-page .experience-section {
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.ssbe-2026-show-page .smsidesleft {
  margin: 20px auto 20px auto;
}
.ssbe-2026-show-page .smsidesright {
  margin: 20px auto 20px auto;
}
@media screen and (max-width: 600px) {.ssbe-2026-show-page .header-banner {
    background-position: center 20% !important;
    background-size: cover !important;
    background-repeat: no-repeat;
    height: 420px !important;
  }
.ssbe-2026-show-page .card {
     margin-right: auto;
     margin-left: auto;
  }
.ssbe-2026-show-page .card h3 {
    margin: 15px 0 !important;
  }
.ssbe-2026-show-page .header-button {
    width: 100% !important;
  }
.ssbe-2026-show-page .smsidesleft, .ssbe-2026-show-page .smsidesright {
    margin: 20px 25% 20px 25%;
  }
.ssbe-2026-show-page .social-icons {
    float: none !important;
    margin-top: -35px !important;
    width: 275px;
    margin-left: auto;
    margin-right: auto !important;
    display: block;
  }
.ssbe-2026-show-page .bottombutton {
    text-align: center;
    margin-top: 10px;
    margin-left: 0px !important;
  }
.ssbe-2026-show-page .hero-overlay-panel { width: 100% !important; }
.ssbe-2026-show-page .ssbelogo { display: none !important; }
.ssbe-2026-show-page .hero-badge { display: none !important; }
.ssbe-2026-show-page .hero-ribbon-wrap { display: none !important; }
.ssbe-2026-show-page .hero-overlay-panel .hero-btn-row { display: none !important; }
.ssbe-2026-show-page .hero-mobile-ribbon-wrap {
    display: block !important;
    position: relative !important;
    width: 260px !important;
    max-width: 85% !important;
    margin: 16px auto 0 !important;
  }
.ssbe-2026-show-page .hero-mobile-btn-row {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    margin: 14px auto 0 !important;
    padding: 0 20px 20px !important;
  }
.ssbe-2026-show-page .hero-mobile-btn-row a,
.ssbe-2026-show-page .hero-mobile-btn-row span.ssbe-ticket-btn-disabled {
    min-height: auto;
    text-align: center;
    flex: 1 1 0;
    font-size: 0.85em;
    padding: 12px 8px;
    white-space: nowrap;
    max-width: 180px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
.ssbe-2026-show-page .countdown-bar { gap: 10px !important; padding: 15px 10px !important; justify-content: center !important; }
.ssbe-2026-show-page .countdown-box { min-width: 60px !important; padding: 8px 10px !important; }
.ssbe-2026-show-page .never-been-photo { max-width: 150px !important; margin-bottom: 15px; }
.ssbe-2026-show-page .never-been-row-wrap .headline { white-space: normal !important; font-size: 1.2em !important; }
.ssbe-2026-show-page .never-been-row-wrap p { white-space: normal !important; }
.ssbe-2026-show-page .hero-ribbon-text { font-size: 0.75em !important; width: 94% !important; }
.ssbe-2026-show-page .workshops-header-row { flex-direction: column !important; }
.ssbe-2026-show-page .view-all-workshops {
    position: static !important;
    display: block !important;
    text-align: center !important;
    margin-top: 4px !important;
  }
.ssbe-2026-show-page .plan-visit-row { flex-direction: column !important; }
.ssbe-2026-show-page .plan-visit-item { margin-bottom: 25px !important; }
.ssbe-2026-show-page .promo-banner-media { flex-direction: column !important; }
.ssbe-2026-show-page .promo-banner-media .promo-image { width: 100% !important; height: 140px !important; margin-bottom: 12px !important; }
.ssbe-2026-show-page .promo-banner-media .promo-image-circle { width: 140px !important; height: 140px !important; margin-left: auto !important; margin-right: auto !important; }
/* .promo-banner's base rule (further down this file) is text-align: left --
   correct on desktop, where the image sits beside the text, but once
   .promo-banner-media flips to a stacked column (right above) the
   left-aligned heading/copy/button read as flush against the left edge
   while the now-full-width image above/below them looks centered by
   comparison -- exactly the "off"/uneven look reported. Centering the text
   to match the stacked, single-column mobile layout fixes it. !important
   because the (unconditional, higher-in-source-order) base .promo-banner
   rule lives later in this file and would otherwise win over this
   media-query rule despite the media query matching -- same reason every
   other override in this block uses !important. */
.ssbe-2026-show-page .promo-banner { text-align: center !important; }
/* The 3-card Featured Workshops grid (.workshop-cards-dynamic-grid, Mesa/
   future pages) is a fixed 3-column CSS Grid with no responsive override
   until now -- on a narrow phone that squeezes each card to ~1/3 of the
   screen width, forcing titles/instructor names to wrap heavily and making
   the cards cramped and hard to read. Stack to a single column on mobile
   so each card gets the phone's full width instead. */
.ssbe-2026-show-page .workshop-cards-dynamic-grid { grid-template-columns: 1fr !important; }
/* The "Pre-Reg Starts .../8am MST" ticket-button text was deliberately
   forced to a single line (white-space: nowrap, further down this file) so
   it wouldn't wrap on the wide desktop countdown-bar/closing-cta-bar --
   but that same nowrap rule made it overflow past the right edge of a
   narrow mobile screen instead of wrapping, in both the countdown link and
   this closing bar's button. Allowing it to wrap back to normal on mobile
   only lets it break onto a 2nd line and stay centered/contained instead. */
.ssbe-2026-show-page span.countdown-cta.ssbe-ticket-state-not_open,
.ssbe-2026-show-page span.btn.ssbe-ticket-state-not_open {
  white-space: normal !important;
}

}
@media screen and (max-width: 850px) and (min-width: 601px) {.ssbe-2026-show-page .header-banner {
    background-position: center 25% !important;
    background-size: cover !important;
    background-repeat: no-repeat;
    height: 470px !important;
  }
.ssbe-2026-show-page .card {
     margin-right: auto;
     margin-left: auto;
  }
.ssbe-2026-show-page .card h3 {
    margin: 15px 0 !important;
  }
.ssbe-2026-show-page .header-button {
    width: 100% !important;
  }
.ssbe-2026-show-page .col {
    flex: 1 1 calc(50% - 20px);
  }
.ssbe-2026-show-page .smsidesleft, .ssbe-2026-show-page .smsidesright {
    margin: 20px 25% 20px 25%;
  }
.ssbe-2026-show-page .social-icons {
    float: none !important;
    margin-top: -35px !important;
    width: 275px;
    margin-left: auto;
    margin-right: auto !important;
    display: block;
  }
.ssbe-2026-show-page .bottombutton {
    text-align: center;
    margin-top: 10px;
    margin-left: 0px !important;
  }

}
/* Mobile phones in landscape orientation only (max-height keeps this from
   also matching tablets/laptops that happen to be in landscape -- phones in
   landscape have a short viewport height, typically well under 600px, while
   tablets/laptops in landscape are taller than that). */
@media screen and (orientation: landscape) and (max-height: 600px) {
.ssbe-2026-show-page .never-been-photo-right { display: none !important; }
.ssbe-2026-show-page .never-been-row-wrap > .row { justify-content: center !important; }
.ssbe-2026-show-page .countdown-bar {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 15px !important;
    padding: 15px 20px !important;
  }
.ssbe-2026-show-page .countdown-msg { max-width: 220px !important; font-size: 0.95em !important; }
.ssbe-2026-show-page .countdown-boxes { gap: 8px !important; }
.ssbe-2026-show-page .countdown-box { min-width: 50px !important; padding: 6px 8px !important; }
.ssbe-2026-show-page .countdown-cta { padding: 10px 16px !important; font-size: 0.9em !important; }
.ssbe-2026-show-page .workshops-header-row { flex-direction: column !important; }
.ssbe-2026-show-page .view-all-workshops {
    position: static !important;
    display: block !important;
    text-align: center !important;
    margin-top: 4px !important;
  }

}
.ssbe-2026-show-page .hero-row-wrap,
.ssbe-2026-show-page .hero-row-wrap .row,
.ssbe-2026-show-page .hero-row-wrap .col {
  padding: 0 !important;
  margin: 0 !important;
}
.ssbe-2026-show-page .header-banner {
  background-image: url('https://scrapbookexpo.com/wp-content/uploads/2026/04/2026-Landing-Page-Header-Image.png');
  height: 520px;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  overflow: hidden;
  background-origin: border-box;
  background-clip: border-box;
}
.ssbe-2026-show-page .card {
  padding: 10px 5px 30px 5px;
  border-radius: 8px;
  align-items: center;
  text-align: center;
  max-width: 250px;
  min-height: 160px;
}
.ssbe-2026-show-page .card h3 {
  font-size: 1.1em;
  margin: 0;
  min-height: 24px;
}
.ssbe-2026-show-page .card p.card-desc {
  font-size: 0.9em;
  color: #555;
  margin: 6px 0 0;
}
/* Background Colors */
.ssbe-2026-show-page .bg-blue { background-color: #f0f7ff; }
.ssbe-2026-show-page .bg-pink { background-color: #fff0f5; }
.ssbe-2026-show-page .bg-yellow { background-color: #fffceb; }
.ssbe-2026-show-page .bg-cyan { background-color: #e6ffff; }
/* Button Styles */
.ssbe-2026-show-page .btn {
  text-decoration: none;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
  width: 100%;
  display: inline-block;
}
.ssbe-2026-show-page .btn-teal { background-color: #26b9bd; }
.ssbe-2026-show-page .btn-coral { background-color: #e95d6f; }
.ssbe-2026-show-page .btn-gold { background-color: #f8c847; }
.ssbe-2026-show-page .img-box {
  width: 75px;
  height: 75px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ssbe-2026-show-page .img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ssbe-2026-show-page .header-button {
  width: 335px;
  text-align: center;
}
.ssbe-2026-show-page .ssbelogo {
  padding: 5px;
  background: rgba(0, 0, 0, 0.3);
  border: 5px solid transparent;
  border-radius: 15px;
  float: right;
}
.ssbe-2026-show-page .sidelines {
  margin: 20px;
  display: flex;
  align-items: center;
  text-align: center;
  gap: 20px;
}
.ssbe-2026-show-page .sidelines::before, .ssbe-2026-show-page .sidelines::after {
  content: "";
  flex-grow: 1;
  height: 2px;
  background: #555555;
  opacity: 0.1;
}
.ssbe-2026-show-page .checked {
  color: orange;
  padding: 5px;
}
.ssbe-2026-show-page .stars {
  text-align: center;
  font-size: 20px;
  margin-bottom: 0;
}
.ssbe-2026-show-page .reviews {
  text-align: center;
  font-weight: bold;
  max-width: 180px;
  margin-left: auto;
  margin-right: auto;
}
.ssbe-2026-show-page .fourreviews td {
  border: none;
}
.ssbe-2026-show-page .lightbackground {
  background-color: #eff9fb;
}
.ssbe-2026-show-page .greencheck {
  color: #90ba6d;
  margin-left: 20px;
}
.ssbe-2026-show-page .reviewheader {
  text-align: center;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.2em;
}
.ssbe-2026-show-page .social-icons {
  float: right;
  margin-top: -85px;
  margin-right: 10%;
}
.ssbe-2026-show-page .bottombutton {
  text-align: center;
  margin-top: 10px;
  margin-left: -40%;
}
/* ===================================================================
   NEW — Redesigned hero content panel (city name, dates, venue, CTAs)
   =================================================================== */
.ssbe-2026-show-page .hero-overlay-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 400px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(to right, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.68) 40%, rgba(0,0,0,0.45) 65%, rgba(0,0,0,0.18) 85%, rgba(0,0,0,0) 100%);
  padding: 20px 20px 25px;
}
.ssbe-2026-show-page .hero-eyebrow {
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  font-size: 2.3em;
  color: #ffb3bd;
  margin: 0;
  line-height: 1;
  text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
}
.ssbe-2026-show-page .hero-city-name {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 2.35em;
  color: #ffffff;
  margin: 2px 0 10px;
  line-height: 1.08;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}
.ssbe-2026-show-page .hero-desc {
  color: #ffffff;
  font-size: 0.95em;
  margin: 0 0 14px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
}
.ssbe-2026-show-page .hero-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9em;
  margin-bottom: 8px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.9);
}
.ssbe-2026-show-page .hero-detail-row svg.ssbe-icon {
  margin-top: 1px;
  color: #f8c847;
  width: 20px;
  font-size: 1.4em;
}
.ssbe-2026-show-page .hero-detail-sub {
  font-weight: 400;
  font-size: 0.95em;
}
.ssbe-2026-show-page .hero-venue-name {
  white-space: nowrap;
  display: inline-block;
}
.ssbe-2026-show-page a.hero-detail-link {
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.ssbe-2026-show-page a.hero-detail-link:hover {
  opacity: 0.82;
  text-decoration: underline;
}
.ssbe-2026-show-page a.hero-detail-link:hover svg.ssbe-icon {
  color: #ffd873;
}
.ssbe-2026-show-page .hero-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  margin-top: auto;
  padding-top: 16px;
}
.ssbe-2026-show-page .hero-btn-row a,
.ssbe-2026-show-page .hero-btn-row span.ssbe-ticket-btn-disabled {
  min-height: auto;
  text-align: center;
  flex: 1 1 0;
  font-size: 0.85em;
  padding: 10px 10px;
  white-space: nowrap;
  box-sizing: border-box;
  /* Vertically centers the button's text within its box -- without this,
     a plain single-line <a> (e.g. "View Workshops") sits at the TOP of its
     box rather than centered once flex's default align-items: stretch
     grows it to match a taller sibling (e.g. the 2-line disabled ticket
     button next to it), which read as visibly off-center/misaligned. The
     disabled-span-specific rule below already had this; extending it to
     the shared rule so every button in this row centers correctly
     regardless of which sibling ends up taller. */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Longer disabled-state copy ("Registration Opens Soon", "Buy at the Door")
   doesn't fit on one line at this button's width the way the original
   always-short "Get Your Tickets" copy did. The copy text itself has a
   forced <br> (see ssbe_ticket_button_copy() in inc/ticket-status.php) so
   it always wraps at a clean word boundary ("Registration" / "Opens Soon")
   at a normal, readable font-size (0.85em, matching the sibling "View
   Workshops" button) rather than shrinking small enough to fake a single
   line. The row's default flex stretch-alignment means the sibling <a>
   grows to match this button's now-taller 2-line box automatically, so
   both stay the same height as each other -- just a bit taller than the
   original single-line row. More specific than the shared rule above
   (element + 2 classes vs. element + 1 class), so it overrides just the
   white-space/line-height/padding here without needing !important. */
.ssbe-2026-show-page .hero-btn-row span.ssbe-ticket-btn-disabled {
  white-space: normal;
  font-size: 0.85em;
  line-height: 1.2;
  padding: 6px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ssbe-2026-show-page .hero-mobile-btn-row span.ssbe-ticket-btn-disabled {
  white-space: normal;
  font-size: 0.85em;
  line-height: 1.2;
  padding: 6px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ssbe-2026-show-page .hero-badge {
  position: absolute;
  top: 50%;
  right: 20px;
  background: #e95d6f;
  color: #fff;
  border-radius: 50%;
  width: 108px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.15;
  box-shadow: 2px 4px 10px rgba(0,0,0,0.35);
  transform: translateY(-50%) rotate(8deg);
  font-family: "Caveat", cursive;
  padding: 6px;
  text-decoration: none;
  cursor: pointer;
}
.ssbe-2026-show-page .hero-badge:hover { background: #e0475b; }
.ssbe-2026-show-page .hero-ribbon-wrap {
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(calc(-50% + 200px));
  width: 350px;
  max-width: 90%;
  z-index: 3;
}
.ssbe-2026-show-page .hero-ribbon-graphic {
  display: block;
  width: 100%;
  height: auto;
}
.ssbe-2026-show-page .hero-ribbon-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  text-align: center;
  color: #fff;
  font-style: italic;
  font-weight: 600;
  font-size: 0.85em;
  line-height: 1.3;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}
.ssbe-2026-show-page .hero-ribbon-text svg.ssbe-icon {
  margin-right: 8px;
  color: #fff;
  font-style: normal;
}
/* Mobile-only duplicate of the ribbon + ticket/workshop buttons, placed in the
   page flow right after .header-banner (see matching mobile media-query rules
   below). Hidden by default; only shown at <=600px, where the desktop version
   (absolutely positioned inside the photo) is hidden instead -- the photo on
   small screens isn't tall enough to host the ribbon + buttons without
   overlapping the address text, so mobile gets its own copy below the image. */
.ssbe-2026-show-page .hero-mobile-ribbon-wrap,
.ssbe-2026-show-page .hero-mobile-btn-row {
  display: none;
}
/* ===================================================================
   NEW — Countdown bar
   =================================================================== */
.ssbe-2026-show-page .countdown-bar {
  background: #e0526a;
  color: #fff;
  padding: 20px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  flex-wrap: wrap;
  text-align: center;
}
.ssbe-2026-show-page .countdown-msg { font-weight: 700; font-size: 1.1em; max-width: 260px; }
.ssbe-2026-show-page .countdown-msg svg.ssbe-icon { margin-right: 8px; }
.ssbe-2026-show-page .countdown-msg small { display: block; font-weight: 400; font-size: 0.8em; margin-top: 2px; }
.ssbe-2026-show-page .countdown-boxes { display: flex; gap: 12px; }
.ssbe-2026-show-page .countdown-box {
  background: #ffffff;
  color: #195668;
  border-radius: 6px;
  padding: 8px 14px;
  text-align: center;
  min-width: 65px;
  box-shadow: 1px 4px 8px rgba(0,0,0,0.2);
}
.ssbe-2026-show-page .countdown-box .num { font-size: 1.7em; font-weight: 800; display: block; line-height: 1; }
.ssbe-2026-show-page .countdown-box .lbl { font-size: 0.65em; font-weight: 700; letter-spacing: 1px; }
.ssbe-2026-show-page .countdown-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: center;
  background: #ffffff;
  color: #e0526a;
  font-weight: 800;
  font-size: 1.05em;
  padding: 12px 22px;
  border-radius: 6px;
  text-decoration: none;
  text-align: center;
  box-shadow: 1px 4px 8px rgba(0,0,0,0.2);
  line-height: 1.3;
}
.ssbe-2026-show-page .countdown-cta span { display: block; font-size: 0.7em; font-weight: 600; }
.ssbe-2026-show-page .countdown-cta:hover { background: #fbe7ea; }
/* Once a show is fully over (ssbe_is_show_over() in inc/show-hero-info.php),
   the countdown-bar's message/boxes/button 3-way space-between layout is
   swapped for just this one centered message -- justify-content: center
   (instead of the live bar's space-between) keeps a single child from
   sitting flush left, and the message itself gets a bit more breathing
   room since it's no longer sharing the bar with the countdown boxes.
   !important here because the landscape/short-height mobile media query
   above (max-height: 600px) forces .countdown-bar's justify-content to
   space-between !important for the LIVE bar's 3-item layout -- without
   !important here too, that breakpoint would win (via source order among
   equal-specificity selectors) and misalign this bar's single centered
   message on a phone held sideways. */
.ssbe-2026-show-page .countdown-bar-over { justify-content: center !important; }
.ssbe-2026-show-page .countdown-bar-over .countdown-msg { max-width: 420px; font-size: 1.15em; }
/* ===================================================================
   NEW — Featured Workshops cards
   =================================================================== */
.ssbe-2026-show-page .workshops-header-row { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; position: relative; }
.ssbe-2026-show-page .view-all-workshops { position: absolute; right: 10px; top: 12px; color: #e95d6f; font-weight: 700; text-decoration: none; font-size: 0.95em; }
.ssbe-2026-show-page .workshop-cards-row-wrap { margin-bottom: 40px; }
.ssbe-2026-show-page .workshop-cards-row-wrap > .row { align-items: stretch; }
.ssbe-2026-show-page .workshop-cards-row-wrap > .row > .col { display: flex; }
.ssbe-2026-show-page .workshop-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  max-width: 240px;
  width: 100%;
  margin: 0 auto;
  box-shadow: 1px 4px 8px rgba(0,0,0,0.08);
  background: #fff;
  /* No explicit height here on purpose -- height: 100% actually PREVENTS
     the equal-height stretch from working correctly (percentage heights
     don't resolve reliably against a flex container whose own height is
     auto/indefinite, confirmed by testing: with height: 100% still set,
     cards with different amounts of content rendered at different
     heights -- 325/345/385/325px -- despite align-items: stretch being
     set on the parent; removing it fixed that to a uniform 385/385/385/385).
     Leaving height on its default (auto) is what lets align-items: stretch
     on the parent (.workshop-cards-dynamic-grid, or .row for the static
     Schaumburg cards) actually equalize the cards. */
  display: flex;
  flex-direction: column;
}
.ssbe-2026-show-page .workshop-card img { width: 100%; height: auto; object-fit: cover; display: block; flex-shrink: 0; }
.ssbe-2026-show-page .workshop-card-body { padding: 10px 12px 14px; display: flex; flex-direction: column; flex: 1; }
.ssbe-2026-show-page .workshop-card-body h4 {
  color: #195668;
  margin: 0 0 4px;
  font-size: 1em;
  /* No line-clamp/max-height here on purpose -- the title is allowed to
     wrap to however many lines it actually needs, full text always
     visible, even beyond 3 lines if it's ever that long. min-height DOES
     reserve space for 3 lines (1.25em * 3 = 3.75em) even when the real
     title is only 1 or 2 lines -- this is what keeps a short-titled card
     from looking randomly shorter than its siblings just because ITS
     title happened to be shorter, independent of (and in addition to) the
     row-level align-items: stretch equal-height mechanism below, which
     still catches the case where a title genuinely exceeds 3 lines. */
  line-height: 1.25em;
  min-height: 3.75em;
}
.ssbe-2026-show-page .workshop-card-body .wc-time { font-size: 0.85em; color: #555; margin: 0 0 4px; }
.ssbe-2026-show-page .workshop-card-body .wc-instructor {
  font-size: 0.85em;
  color: #888;
  margin: 0;
  /* Same reasoning as the title above: reserve room for 2 lines (this
     text can wrap to a 2nd line for a long instructor name) so a card
     whose instructor name fits on 1 line doesn't end up shorter than a
     sibling card whose instructor name wrapped to 2. */
  line-height: 1.3em;
  min-height: 2.6em;
}
.ssbe-2026-show-page .workshop-card-body .wc-instructor a { color: #26b9bd; text-decoration: none; }
.ssbe-2026-show-page .workshop-card-body .wc-price { font-size: 0.8em; color: #e95d6f; font-weight: 700; margin: 4px 0 0; margin-top: auto; padding-top: 8px; text-align: center; }
.ssbe-2026-show-page .workshop-placeholder-flag {
  display: inline-block;
  background: #fff3cd;
  color: #856404;
  font-size: 0.7em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  margin-bottom: 6px;
}
/* ===================================================================
   NEW -- Featured Workshops, database-driven grid (4-12 cards)
   Used by the [ssbe_featured_workshops] shortcode (inc/featured-workshops.php)
   in place of the old fixed 4-column [row]/[col span="1/4"] markup, since
   the card count is now variable. Plain flexbox wrap instead of the page
   builder's row/col grid -- reflows naturally for any count without new
   breakpoint rules, and each .workshop-card here is a real <a> (the whole
   card links to the workshop's Guide URL), not a <div>, so a couple of
   link-specific overrides are added below the shared .workshop-card rules
   above (which still apply -- border, shadow, sizing, internal layout are
   unchanged and shared between the old static markup and this new grid).
   =================================================================== */
.ssbe-2026-show-page .workshop-cards-dynamic-grid {
  /* CSS Grid instead of flex-wrap -- 3 equal-width columns (1/3 each,
     giving each card noticeably more room for the title/instructor text
     than the old 4-across flex-basis:240px layout), regardless of the
     shortcode's count="" attribute; extra cards beyond 3 simply wrap to
     additional rows of 3, still perfectly aligned since every column is
     the same fraction of the row's width. Grid's default align-items
     (stretch) already equalizes every card in a row to the row's tallest,
     same as the explicit align-items: stretch the old flex version needed
     to state outright. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.ssbe-2026-show-page .workshop-cards-dynamic-grid .workshop-card {
  /* Overrides the shared .workshop-card max-width: 240px cap above -- a
     grid cell here is already exactly 1/3 of the row, so the card should
     fill it rather than being artificially capped narrower. (Schaumburg's
     static cards, which still use the narrower 4-column [row]/[col]
     layout, are untouched -- this override only applies inside
     .workshop-cards-dynamic-grid.) */
  max-width: none;
  width: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ssbe-2026-show-page .workshop-cards-dynamic-grid .workshop-card:hover,
.ssbe-2026-show-page .workshop-cards-dynamic-grid .workshop-card:focus {
  transform: translateY(-4px);
  box-shadow: 2px 10px 18px rgba(0,0,0,0.16);
}
/* The wider 1/3 cards give the title and instructor name enough room that
   they rarely wrap onto extra lines, so the forced 3-line/2-line height
   reservations added for the previous, narrower 4-column layout are no
   longer needed here -- reset back to auto. (Left in place, unchanged,
   for Schaumburg's narrower static cards below, where wrapping is still
   common enough that the reservation still earns its keep.) */
.ssbe-2026-show-page .workshop-cards-dynamic-grid .workshop-card-body h4,
.ssbe-2026-show-page .workshop-cards-dynamic-grid .workshop-card-body .wc-instructor {
  min-height: 0;
}
.ssbe-2026-show-page .workshop-cards-dynamic-grid .workshop-card .wc-instructor {
  color: #888; /* plain text now, not a link -- see file header comment on inc/featured-workshops.php */
}
/* ===================================================================
   NEW — Featured Workshops rotating carousel (Mesa/future pages only)
   Only kicks in when inc/featured-workshops.php renders more workshops
   than are shown at once -- in that case the grid carries a
   data-fw-carousel attribute and every card carries a data-fw-index.
   Extra cards start hidden here (server-rendered, so there's no flash of
   extra cards before JS runs); ssbeInitWorkshopCarousel()
   (inc/js/2026-show-pages.js) toggles "ssbe-fw-visible" + the CSS "order"
   property on each card every 15 seconds to slide the visible window left
   by one: card 1 slides out, card 2 becomes card 1, card 3 becomes card 2,
   and the next pool workshop slides into the 3rd slot. A grid with no
   data-fw-carousel attribute (few enough workshops that nothing needs to
   rotate, or Schaumburg's static markup, which never has this class at
   all) is completely unaffected by these rules.
   =================================================================== */
.ssbe-2026-show-page .workshop-cards-dynamic-grid[data-fw-carousel] .workshop-card {
  display: none;
}
.ssbe-2026-show-page .workshop-cards-dynamic-grid[data-fw-carousel] .workshop-card.ssbe-fw-visible {
  display: flex;
}
/* ===================================================================
   NEW — Featured Workshops "coming soon" message (ssbe_fw_render_coming_soon()
   in inc/featured-workshops.php) -- shown in place of the card grid whenever
   a show has zero non-sold-out workshops entered yet, so the section never
   just goes blank. Dashed border + warm cream background reads as a
   friendly "still being put together" placeholder rather than a broken
   section; the pink dashed border and heart icon match the playful/crafty
   tone used throughout the rest of the page.
   =================================================================== */
.ssbe-2026-show-page .workshop-coming-soon {
  text-align: center;
  padding: 40px 24px;
  background: #fff8f0;
  border: 2px dashed #e95d6f;
  border-radius: 12px;
  margin-bottom: 40px;
}
.ssbe-2026-show-page .workshop-coming-soon svg.ssbe-icon {
  font-size: 2.4em;
  color: #e95d6f;
  margin-bottom: 10px;
  display: inline-block;
}
.ssbe-2026-show-page .workshop-coming-soon .wcs-headline {
  font-size: 1.3em;
  font-weight: 800;
  color: #195668;
  margin: 0 0 8px;
}
.ssbe-2026-show-page .workshop-coming-soon .wcs-sub {
  font-size: 0.95em;
  color: #555;
  margin: 0 auto;
  max-width: 480px;
}
/* ===================================================================
   NEW — Mega Make & Take / Shop 1000+ two-up banner
   =================================================================== */
.ssbe-2026-show-page .promo-row-wrap > .row { align-items: stretch; }
.ssbe-2026-show-page .promo-row-wrap > .row > .col { display: flex; }
.ssbe-2026-show-page .promo-banner {
  border-radius: 8px;
  padding: 22px;
  text-align: left;
  min-height: 150px;
  height: 100%;
  box-sizing: border-box;
}
.ssbe-2026-show-page .promo-banner-media {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ssbe-2026-show-page .promo-banner-media .promo-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}
.ssbe-2026-show-page .promo-banner-media .promo-image {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  margin-bottom: 0;
}
.ssbe-2026-show-page .promo-image.promo-image-circle {
  border-radius: 50%;
}
.ssbe-2026-show-page .promo-banner-media > p {
  margin: 0;
  flex-shrink: 0;
}
.ssbe-2026-show-page .promo-image {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 12px;
}
.ssbe-2026-show-page .promo-banner .promo-label {
  font-weight: 800;
  font-size: 1.15em;
  margin: 0 0 8px;
}
.ssbe-2026-show-page .promo-banner p.promo-copy { margin: 0 0 14px; color: #444; }
.ssbe-2026-show-page .promo-banner a.btn { width: auto; padding: 10px 24px; }
.ssbe-2026-show-page .promo-banner a.btn-gold { color: #195668; }
/* ===================================================================
   NEW — Testimonial cards (redesigned "What People Are Saying")
   =================================================================== */
.ssbe-2026-show-page .testimonial-card { text-align: center; max-width: 260px; margin: 0 auto; padding: 10px; }
.ssbe-2026-show-page .testimonial-card p.quote { font-style: italic; color: #333; min-height: 55px; }
.ssbe-2026-show-page .testimonial-card p.name { font-weight: 700; color: #195668; margin: 4px 0 0; }
.ssbe-2026-show-page .testimonial-carousel { position: relative; }
.ssbe-2026-show-page .testimonial-slide {
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.ssbe-2026-show-page .testimonial-slide.ssbe-ts-active {
  display: block;
  opacity: 1;
}
.ssbe-2026-show-page .testimonial-dots { text-align: center; margin-top: 10px; }
.ssbe-2026-show-page .testimonial-dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  margin: 0 4px;
  transition: background 0.3s ease;
}
.ssbe-2026-show-page .testimonial-dots span.ssbe-td-active { background: #e95d6f; }
/* ===================================================================
   NEW — Plan Your Visit icon row
   =================================================================== */
.ssbe-2026-show-page .plan-visit-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.ssbe-2026-show-page .plan-visit-item { flex: 1 1 200px; text-align: center; max-width: 220px; margin: 0 auto; }
/* Kept for any page/older content that still has a plain <svg class="ssbe-icon">
   here instead of the .plan-visit-icon-box <img> below -- harmless no-op once
   every page-content file has been re-pasted with the updated markup. */
.ssbe-2026-show-page .plan-visit-item svg.ssbe-icon { font-size: 2em; color: #e95d6f; margin-bottom: 8px; display: inline-block; }
/* Custom uploaded icon images (replace the inline SVG icons above) -- same
   fixed-box + object-fit: contain treatment already used for the "Why
   Crafters Love Expo" row's custom icons (see .img-box further up this
   file), so these 4 new images size/crop consistently regardless of each
   PNG's own real dimensions. */
.ssbe-2026-show-page .plan-visit-icon-box {
  width: 75px;
  height: 75px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ssbe-2026-show-page .plan-visit-icon-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ssbe-2026-show-page .plan-visit-item h4 { color: #195668; margin: 0 0 6px; font-size: 1.05em; }
.ssbe-2026-show-page .plan-visit-item p { font-size: 0.85em; color: #555; margin: 0 0 6px; }
.ssbe-2026-show-page .plan-visit-item a { color: #26b9bd; font-weight: 700; text-decoration: none; font-size: 0.85em; }
/* ===================================================================
   NEW — "Never Been to Expo": image / text / image, vertically centered
   =================================================================== */
.ssbe-2026-show-page .never-been-photo {
  width: 100%;
  max-width: 190px;
  height: auto;
  display: block;
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
  padding: 8px 8px 22px;
  border-radius: 2px;
  box-shadow: 2px 4px 10px rgba(0,0,0,0.25);
}
.ssbe-2026-show-page .never-been-photo-left { transform: rotate(-4deg); }
.ssbe-2026-show-page .never-been-photo-right { transform: rotate(4deg); }
.ssbe-2026-show-page .never-been-row-wrap > .row { align-items: center; }
.ssbe-2026-show-page .never-been-row-wrap .headline {
  font-size: 1.4em;
  white-space: nowrap;
  margin-bottom: 4px;
}
.ssbe-2026-show-page .never-been-sub {
  text-align: center;
  margin-top: 0;
  margin-bottom: 10px;
}
.ssbe-2026-show-page .never-been-row-wrap p {
  font-size: 0.92em;
  margin: 5px 0;
  white-space: nowrap;
}
/* ===================================================================
   NEW — Bottom closing CTA bar
   =================================================================== */
.ssbe-2026-show-page .closing-cta-bar {
  background: #195668;
  color: #fff;
  padding: 22px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
}
.ssbe-2026-show-page .closing-cta-bar p { margin: 0; font-size: 1.2em; font-weight: 600; }
.ssbe-2026-show-page .closing-cta-bar a.btn { width: auto; padding: 12px 28px; }
@media screen and (max-width: 600px) {.ssbe-2026-show-page .closing-cta-bar { flex-direction: column; text-align: center; }

}
/* ===================================================================
   NEW -- Dynamic ticket-status buttons ([ssbe_ticket_button] shortcode,
   inc/ticket-status.php). Renders as either a real <a> (Wishlisting Open /
   Pre-Registration Open) or a non-clickable <span> (Sales Not Yet Open /
   Pre-Registration Closed) with the SAME classes as the original static
   button, so the "open" state needs zero new CSS -- it's pixel-identical
   to what was there before this feature existed.
   The disabled <span> case needs a bit more, though: .hero-badge and
   .countdown-cta above are already element-agnostic (".hero-badge {...}",
   no "a." prefix) so a <span> picks up their shape automatically, but
   .button.pink.small and .btn.btn-coral get their actual button SHAPE
   (padding, border-radius, inline-block) from the theme's own Flatsome
   button-widget CSS, which -- reasonably, since page-builder buttons are
   always links -- only targets <a>, not <span>. So those two roles'
   disabled state gets its own explicit shape here rather than silently
   rendering as unstyled text on the live site (confirmed by rendering
   this locally with the real theme button CSS absent, exactly the gap a
   live site would have on top of Flatsome's real -- but still a./anchor-
   only -- button CSS).
   =================================================================== */
.ssbe-2026-show-page .ssbe-ticket-btn-disabled {
  cursor: default;
  pointer-events: none;
}
.ssbe-2026-show-page span.button.ssbe-ticket-btn-disabled,
.ssbe-2026-show-page span.btn.ssbe-ticket-btn-disabled {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  text-decoration: none;
}
.ssbe-2026-show-page .closing-cta-bar span.btn.ssbe-ticket-btn-disabled { padding: 12px 28px; width: auto; }

/* "closed" state (Pre-Registration Closed -- "Buy at the Door" / "See You
   There!") -- slightly dimmed, signals "no longer available to buy online"
   without competing for attention with the real CTAs.
   The hero "Buy at the Door" button (role="hero") and the round badge
   (role="badge", "See You There!") use the site's brand dark blue (#195668
   -- the same dark blue/teal already used for headlines, card titles, and
   testimonial names throughout this page, picked to correspond with the
   blue in the site logo) instead of plain gray, per explicit request. The
   countdown link and the closing "BUY AT THE DOOR" bar (role="bottom_cta")
   keep the original muted gray -- only the hero button + circle badge were
   asked to change. */
.ssbe-2026-show-page .ssbe-ticket-state-closed { opacity: 0.7; }
.ssbe-2026-show-page a.hero-badge.ssbe-ticket-state-closed,
.ssbe-2026-show-page span.hero-badge.ssbe-ticket-state-closed { background: #195668; }
.ssbe-2026-show-page span.countdown-cta.ssbe-ticket-state-closed { color: #888; }
.ssbe-2026-show-page span.button.ssbe-ticket-state-closed { background: #195668; }
.ssbe-2026-show-page span.btn.ssbe-ticket-state-closed { background: #9a9a9a; }

/* "show over" override (hero + badge only) -- once ssbe_is_show_over() is
   true (starting the Sunday after the show's 2nd day, inc/show-hero-info.php)
   AND the ordinary sales state is "closed", ssbe_render_ticket_button()
   (inc/ticket-status.php) swaps in "see you next year" copy and renders a
   REAL, clickable <a href="#signupet"> (the newsletter signup popup anchor)
   instead of the ordinary non-clickable "closed" <span>. Deliberately does
   NOT carry the ssbe-ticket-state-closed class (so it skips that state's
   opacity: 0.7 dimming) -- this is an actual actionable CTA (join the
   newsletter for next year), not idle informational text, so it stays full
   opacity. Same dark blue as the ordinary "closed" family for visual
   consistency with the rest of that color family. */
.ssbe-2026-show-page a.button.ssbe-ticket-state-show-over,
.ssbe-2026-show-page a.hero-badge.ssbe-ticket-state-show-over { background: #195668; }

/* "not_open" state (Sales Not Yet Open -- "Coming Soon!" / "Registration
   Opens Soon") -- warm amber/gold instead of the same gray as "closed":
   these mean very different things to a visitor (sales haven't started yet
   vs. sales are over), so they shouldn't look identical, and this needs to
   read clearly as "not clickable yet" while staying visually distinct from
   the brand pink used once Pre-Registration is actually open. Full opacity
   (no dimming) so it stays legible/eye-catching rather than washed out. */
.ssbe-2026-show-page a.hero-badge.ssbe-ticket-state-not_open,
.ssbe-2026-show-page span.hero-badge.ssbe-ticket-state-not_open { background: #c67c1f; }
.ssbe-2026-show-page span.countdown-cta.ssbe-ticket-state-not_open { color: #b56a17; }
.ssbe-2026-show-page span.button.ssbe-ticket-state-not_open,
.ssbe-2026-show-page span.btn.ssbe-ticket-state-not_open { background: #c67c1f; }
/* The countdown link and closing CTA bar now show the same dynamic
   "Pre-Reg Starts 8/3/26 @ 8am MST" date text as the hero button, but on
   ONE line, not two -- explicitly requested not to wrap (unlike the hero
   button, which deliberately DOES wrap via its own forced <br>). Both are
   flex children without a fixed width, so nowrap just lets the button
   grow to fit the text horizontally instead of wrapping/clipping it. */
.ssbe-2026-show-page span.countdown-cta.ssbe-ticket-state-not_open,
.ssbe-2026-show-page span.btn.ssbe-ticket-state-not_open {
  white-space: nowrap;
}