/* ==========================================================
   LITTLE BLUE THEATRE: COURSESTORM PLUGIN STYLING
   Palette: #01016F navy, #C68D4C gold, #F8F0E6 cream

   Section 5 holds all media queries and must stay last.
   Anything added below them will override mobile styling.
   ========================================================== */


/* ==========================================================
   1. CATALOG PAGE (/education/classes/)
   ========================================================== */

.coursestorm-featured-slider h2,
.coursestorm-browse-categories h2 {
  text-align: left;
  color: #01016F;
  font-size: 1.9rem;
  margin: 0 0 20px 0;
}

.coursestorm-single-slide {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.coursestorm-slide-description {
  position: absolute;
  left: 28px;
  bottom: 28px;
  right: auto;
  width: auto;
  max-width: 62%;
  background: rgba(1, 1, 111, 0.92);
  padding: 20px 26px;
  border-radius: 5px;
}

.coursestorm-slide-description h3 {
  margin: 0 0 6px 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

.coursestorm-slide-description h3 a {
  color: #F8F0E6;
  text-decoration: none;
}

.coursestorm-slide-description h3 a:hover { color: #C68D4C; }

.coursestorm-date-info {
  margin: 0;
  color: #F8F0E6;
  font-size: 0.95rem;
}

.coursestorm-slide-description .coursestorm-date-info { font-size: 1rem; }

.coursestorm-date-info strong { color: #C68D4C; }


/* Browse categories, fallback styling for the original flat list.
   The custom code snippet replaces this with the two-column split
   below; these rules keep the page sane if that JS ever fails. */
.coursestorm-browse-categories {
  width: 100%;
  text-align: left;
}

.coursestorm-browse-categories ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* !important defeats a column rule in the plugin's own stylesheet
   that was pinning these cards to half width */
.coursestorm-browse-categories > ul {
  column-count: initial !important;
  columns: initial !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

.coursestorm-browse-categories > ul > li.cat-item {
  float: none !important;
  display: block !important;
  width: auto !important;
  max-width: none !important;
  background: #F8F0E6;
  border-left: 5px solid #C68D4C;
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: 0 3px 10px rgba(1, 1, 111, 0.08);
}

.coursestorm-browse-categories > ul > li.cat-item > a {
  color: #01016F;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
}

.coursestorm-browse-categories > ul > li.cat-item > a:hover { color: #C68D4C; }

.coursestorm-browse-categories ul.children {
  margin-top: 10px;
  padding-left: 16px;
}

.coursestorm-browse-categories ul.children li { margin-bottom: 6px; }

.coursestorm-browse-categories ul.children a {
  color: #01016F;
  font-size: 0.95rem;
  text-decoration: none;
}

.coursestorm-browse-categories ul.children a:hover { color: #C68D4C; }


/* Session bars left, age links right. Structure built by the snippet. */
.lbt-category-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 0 36px;
  align-items: start;
}

.lbt-category-split ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lbt-category-split h3 {
  margin: 0 0 14px 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9c8e7d;
}

.lbt-category-sessions li.cat-item {
  background: #F8F0E6;
  border-left: 5px solid #C68D4C;
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: 0 3px 10px rgba(1, 1, 111, 0.08);
}

.lbt-category-sessions li.cat-item > a {
  display: block;
  color: #01016F;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
}

.lbt-category-sessions li.cat-item > a:hover { color: #C68D4C; }

.lbt-category-ages li.cat-item { margin-bottom: 8px; }

.lbt-category-ages li.cat-item > a {
  display: block;
  padding: 10px 14px;
  background: #FFFFFF;
  border: 1px solid #e2d8c9;
  border-radius: 4px;
  color: #01016F;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
}

.lbt-category-ages li.cat-item > a:hover {
  background: #01016F;
  border-color: #01016F;
  color: #F8F0E6;
}


.coursestorm-classes-link {
  margin-top: 24px;
  text-align: left;
}

.coursestorm-classes-link a {
  display: inline-block;
  background: #01016F;
  color: #F8F0E6;
  padding: 12px 26px;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
}

.coursestorm-classes-link a:hover {
  background: #C68D4C;
  color: #FFFFFF;
}


/* ==========================================================
   2. LISTING PAGES (category archives, browse all)
   ========================================================== */

.container.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px 0;
}

.page-header .page-title {
  color: #01016F;
  margin: 0 0 24px 0;
}

/* Breadcrumb, inserted by the custom code snippet */
.lbt-class-breadcrumb {
  flex: 1 0 100%;
  margin-bottom: 14px;
  font-size: 0.9rem;
  color: #6b6259;
}

.lbt-class-breadcrumb a {
  color: #01016F;
  font-weight: 700;
  text-decoration: none;
}

.lbt-class-breadcrumb a:hover {
  color: #C68D4C;
  text-decoration: underline;
}


/* Filter bar: search on the left, sort and category pushed right.
   The bottom margin is what separates the row from the first card. */
.container.wrap:has(.coursestorm-course-filters) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.container.wrap:has(.coursestorm-course-filters) .page-header {
  flex: 1 0 100%;
}

.container.wrap:has(.coursestorm-course-filters) article.coursestorm-course-archive {
  flex: 1 0 100%;
}

.coursestorm-course-filters,
#sort-filter-form,
#categories-filter-select {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 28px 0;
}

/* Pushes everything after the search box to the right edge */
.coursestorm-course-filters { margin-right: auto; }

/* The search input is wrapped in a form, div, and label. Each needs to
   be a flex row or the input sits higher than the other controls. */
.coursestorm-course-filters form,
.coursestorm-course-filters > form > div,
.coursestorm-course-filters label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}

#coursestorm_search_term,
.coursestorm-sort-classes,
#cat.postform {
  padding: 9px 12px;
  margin: 0;
  border: 1px solid #d8cfc2;
  border-radius: 4px;
  background: #FFFFFF;
  color: #01016F;
  font-size: 0.95rem;
  line-height: 1.2;
}

/* !important is required to beat Elementor's global button styles */
.coursestorm-filter-form button#sort-submit,
.coursestorm-filter-form button#category-filter-submit,
#searchsubmit {
  padding: 9px 18px !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  border: none !important;
  border-radius: 4px !important;
  background: #01016F !important;
  color: #F8F0E6 !important;
  cursor: pointer;
}

.coursestorm-filter-form button#sort-submit:hover,
.coursestorm-filter-form button#category-filter-submit:hover,
#searchsubmit:hover {
  background: #C68D4C !important;
  color: #FFFFFF !important;
}


/* Card shell */
article.coursestorm-course-archive {
  max-width: 1100px;
  margin: 0 auto 24px;
  padding: 20px;
  background: #F8F0E6;
  border-left: 5px solid #C68D4C;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(1, 1, 111, 0.08);
}


/* Card layout: poster left, everything else in the right column */
article.coursestorm-course-archive > .entry-content {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 0 26px;
  align-items: start;
}

article.coursestorm-course-archive > .entry-content > a:first-of-type {
  grid-column: 1;
  grid-row: 1;
  display: block;
  border-radius: 4px;
  overflow: hidden;
}

.coursestorm-course-info {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.coursestorm-details-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.coursestorm-details-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

h1.coursestorm-course-title {
  margin: 0 0 6px 0;
  font-size: 1.5rem;
  line-height: 1.25;
}

h1.coursestorm-course-title a {
  color: #01016F;
  text-decoration: none;
}

h1.coursestorm-course-title a:hover { color: #C68D4C; }

/* Structured date line hidden. Dates come from the bolded first
   line of the description instead. */
.coursestorm-course-archive .coursestorm-details-date { display: none; }

.coursestorm-course-archive .icon-calendar { display: none; }


/* Age badge on listing cards */
article.coursestorm-course-archive[class*="coursestorm_categories-ages-"] .coursestorm-details-title::before {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 11px;
  border-radius: 3px;
  background: #01016F;
  color: #F8F0E6;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Age badge on the single class page */
.single-coursestorm_class .coursestorm-course-info[class*="coursestorm_categories-ages-"] .coursestorm-details-title::before {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 13px;
  border-radius: 3px;
  background: #01016F;
  color: #F8F0E6;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* One content rule per category, used by both pages above.
   Class name matches the slug: "Ages 8-10" becomes ages-8-10 */
.coursestorm_categories-ages-6-7 .coursestorm-details-title::before {
  content: "Ages 6-7";
}

.coursestorm_categories-ages-8-10 .coursestorm-details-title::before {
  content: "Ages 8-10";
}

.coursestorm_categories-ages-8-12 .coursestorm-details-title::before {
  content: "Ages 8-12";
}

.coursestorm_categories-ages-11-14 .coursestorm-details-title::before {
  content: "Ages 11-14";
}

.coursestorm_categories-ages-13-18 .coursestorm-details-title::before {
  content: "Ages 13-18";
}


/* Description, clamped to three lines */
.coursestorm-course-archive .coursestorm-course-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 12px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4a4a4a;
}

.coursestorm-course-archive .coursestorm-course-description p { margin: 0; }

.coursestorm-course-archive .coursestorm-course-description strong { color: #01016F; }


/* Price and button */
.coursestorm-course-register {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
}

.coursestorm-course-price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #01016F;
  line-height: 1;
}

a.coursestorm-action-button {
  display: inline-block;
  padding: 11px 26px;
  background: #01016F;
  color: #F8F0E6;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

a.coursestorm-action-button:hover {
  background: #C68D4C;
  color: #FFFFFF;
}


/* Status bar, full width of the content column */
.coursestorm-registration-status {
  grid-column: 2;
  grid-row: 2;
  margin-top: 16px;
  font-size: 0.85rem;
  font-weight: 600;
}

.coursestorm-registration-unavailable {
  padding: 9px 16px;
  border-radius: 3px;
  background: #e6ddd0;
  color: #6b6259;
  line-height: 1.35;
  text-align: center;
}


/* ==========================================================
   3. INDIVIDUAL CLASS PAGE
   Scoped to .single-coursestorm_class so it can't reach the
   listing cards, which reuse several of these class names.
   ========================================================== */

.single-coursestorm_class .container.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

/* Layout: description left, sidebar card right */
.single-coursestorm_class .coursestorm-course-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px 32px;
  align-items: start;
}

.single-coursestorm_class .coursestorm-course-single-image {
  grid-column: 1 / -1;
  height: 260px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 6px;
}

.single-coursestorm_class .coursestorm-details-top {
  grid-column: 1 / -1;
  display: block;
  padding-bottom: 20px;
  border-bottom: 3px solid #C68D4C;
}

.single-coursestorm_class .coursestorm-course-description {
  grid-column: 1;
  grid-row: 3;
}

.single-coursestorm_class .coursestorm-map {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
}

/* Date card removed. Dates live in the description instead. */
.single-coursestorm_class .coursestorm-class-date { display: none !important; }


/* Title */
.single-coursestorm_class h1.coursestorm-course-title {
  margin: 0;
  font-size: 2.2rem;
  line-height: 1.15;
  color: #01016F;
}


/* Sidebar card: cost, register button, location */
.single-coursestorm_class .coursestorm-map {
  background: #F8F0E6;
  border-left: 5px solid #C68D4C;
  border-radius: 6px;
  padding: 22px 24px;
  box-shadow: 0 3px 10px rgba(1, 1, 111, 0.08);
}

/* The register block gets moved in here by the custom code snippet */
.single-coursestorm_class .coursestorm-map .coursestorm-course-register {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin: 0 0 20px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd0bd;
  text-align: left;
}

.single-coursestorm_class .coursestorm-map .coursestorm-course-register::before {
  content: "Cost";
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9c8e7d;
}

.single-coursestorm_class .coursestorm-map .coursestorm-course-price {
  font-size: 1.7rem;
  font-weight: 700;
  color: #01016F;
  line-height: 1;
  text-align: left;
}

.single-coursestorm_class .coursestorm-map .coursestorm-course-register a {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 14px 20px;
  background: #01016F;
  color: #F8F0E6;
  border-radius: 4px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.single-coursestorm_class .coursestorm-map .coursestorm-course-register a:hover {
  background: #C68D4C;
  color: #FFFFFF;
}

.single-coursestorm_class .coursestorm-location-details::before {
  content: "Location";
  display: block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9c8e7d;
}

.single-coursestorm_class .coursestorm-location-details {
  text-align: left;
}

.single-coursestorm_class .coursestorm-location-details h3 {
  margin: 0 0 8px 0;
  font-size: 1.05rem;
  line-height: 1.35;
  color: #01016F;
}

/* Icon font isn't loaded by the theme, renders as an empty box */
.single-coursestorm_class .coursestorm-location-details h3::before { content: none; }

.single-coursestorm_class .coursestorm-map address {
  display: block;
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4a4a4a;
  margin-bottom: 10px;
  text-align: left;
}

.single-coursestorm_class a.coursestorm-location-link {
  display: inline-block;
  color: #01016F;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: underline;
}

.single-coursestorm_class a.coursestorm-location-link:hover { color: #C68D4C; }


/* Description */
.single-coursestorm_class .coursestorm-course-description p {
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 1.1em;
}

.single-coursestorm_class .coursestorm-course-description strong { color: #01016F; }


/* ==========================================================
   4. FORCED OVERRIDES
   Rules that need !important to beat the plugin's own
   stylesheet or Elementor's global button styling.
   ========================================================== */

/* Bigger, bolder titles on listing cards. Scoped to the archive so it
   doesn't shrink the single class page headline. */
article.coursestorm-course-archive h1.coursestorm-course-title,
article.coursestorm-course-archive h1.coursestorm-course-title a {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  line-height: 1.2;
}

/* The plugin floats several blocks, which makes them shrink to fit
   and makes neighbouring text wrap around them. */
.coursestorm-course-archive .coursestorm-registration-status,
.coursestorm-course-archive .coursestorm-registration-unavailable,
.single-coursestorm_class .coursestorm-map .coursestorm-course-register,
.single-coursestorm_class .coursestorm-location-details {
  float: none !important;
  clear: both !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Restored after the display:block above, which would otherwise
   flatten the cost-and-button stack */
.single-coursestorm_class .coursestorm-map .coursestorm-course-register {
  display: flex !important;
}

/* The theme caps .entry-content at a default reading measure, which
   was keeping the description narrow */
.single-coursestorm_class .coursestorm-course-description {
  width: 100% !important;
  max-width: none !important;
}

/* Poster: no frame, no letterboxing. The artwork is landscape, so any
   square box left white bands above and below it. */
article.coursestorm-course-archive > .entry-content > a:first-of-type {
  aspect-ratio: auto !important;
  display: block !important;
  padding: 0 !important;
  background: none !important;
}

article.coursestorm-course-archive .coursestorm-course-image {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: fill !important;
  display: block;
}

/* Jetpack Boost badge, visible to logged-in admins only. Target the
   inner .guide element, NOT .jetpack-boost-guide: the plugin puts that
   class on the hero image div itself, so hiding it hides the poster. */
.jetpack-boost-guide > .guide { display: none !important; }

/* Content column runs the full width of the card */
article.coursestorm-course-archive > .entry-content,
.coursestorm-course-info,
.coursestorm-details-top,
.coursestorm-course-archive .coursestorm-course-description {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Price and button to the right edge of listing cards only */
.coursestorm-course-archive .coursestorm-course-register {
  margin-left: auto !important;
}

/* Buttons stay navy. Elementor's global styles were turning
   More Info gold on the listing pages. */
a.coursestorm-action-button,
.single-coursestorm_class .coursestorm-course-register a {
  background: #01016F !important;
  color: #F8F0E6 !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

a.coursestorm-action-button:hover,
.single-coursestorm_class .coursestorm-course-register a:hover {
  background: #C68D4C !important;
  color: #FFFFFF !important;
}

/* Drops the plugin's inner bordered box so the address sits directly
   on the cream card */
.single-coursestorm_class .coursestorm-location-details {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}


/* ==========================================================
   5. MEDIA QUERIES
   Keep these last. CSS ignores media queries when deciding
   which rule wins; only source order matters.
   ========================================================== */

@media (max-width: 767px) {

  .coursestorm-slide-description {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 100%;
    padding: 14px 18px;
    border-radius: 0 0 5px 5px;
  }

  .coursestorm-slide-description h3 { font-size: 1.15rem; }
  .coursestorm-slide-description .coursestorm-date-info { font-size: 0.9rem; }

  .lbt-category-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .coursestorm-course-filters { margin-right: 0; }

  article.coursestorm-course-archive > .entry-content {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 0 16px;
  }

  .coursestorm-details-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .coursestorm-course-archive .coursestorm-course-register {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-left: 0 !important;
    text-align: left;
  }
}


@media (max-width: 900px) {
  .single-coursestorm_class .coursestorm-course-info {
    grid-template-columns: 1fr;
  }

  .single-coursestorm_class .coursestorm-course-single-image,
  .single-coursestorm_class .coursestorm-details-top,
  .single-coursestorm_class .coursestorm-course-description,
  .single-coursestorm_class .coursestorm-map {
    grid-column: 1;
    grid-row: auto;
  }

  .single-coursestorm_class .coursestorm-course-single-image { order: 1; height: 200px; }
  .single-coursestorm_class .coursestorm-details-top        { order: 2; }
  .single-coursestorm_class .coursestorm-map                { order: 3; }
  .single-coursestorm_class .coursestorm-course-description { order: 4; }

  /* Two-class specificity is needed to beat the desktop rules above */
  .single-coursestorm_class .coursestorm-details-top {
    text-align: left;
  }

  .single-coursestorm_class h1.coursestorm-course-title {
    font-size: 1.7rem;
  }
}/* ==========================================================
   6. LISTING CARD REGISTER BUTTON
   The plugin reports "Registration unavailable" even when
   CourseStorm has registration open, so that bar is hidden and
   this navy bar (built by the snippet) takes its place.
   ========================================================== */

.coursestorm-registration-status {
  display: none !important;
}

.lbt-listing-register {
  grid-column: 2;
  grid-row: 2;
  margin-top: 16px;
}

.lbt-listing-register a {
  display: block;
  width: 100%;
  padding: 11px 20px;
  background: #01016F !important;
  color: #F8F0E6 !important;
  border: none !important;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.lbt-listing-register a:hover {
  background: #C68D4C !important;
  color: #FFFFFF !important;
}

@media (max-width: 767px) {
  .lbt-listing-register {
    grid-column: 1 / -1;
  }
}/* ==========================================================
   7. ICON FLASH ON FIRST LOAD
   Elementor renders icons as inline SVG with no width or height
   attribute, so they balloon until its stylesheet loads. This
   matches what Elementor's own CSS does, applied from the head
   so it holds on the first paint.
   ========================================================== */

svg.e-font-icon-svg:not([width]),
.elementor-icon-list-icon svg:not([width]),
.elementor-breadcrumbs svg:not([width]),
.rank-math-breadcrumb svg:not([width]) {
  width: 1em !important;
  height: 1em !important;
  max-width: 1em !important;
  max-height: 1em !important;
  vertical-align: middle;
}