/* ==========================================================================
   LCCH International — brand CSS hooks.

   Elementor's Custom CSS box is a Pro feature and this site runs Elementor
   free, so the handful of rules that cannot be expressed through widget
   controls live here instead. Every colour is read from Elementor's own
   Global Colors variables, so rebranding from Site Settings still flows
   through this file untouched.

   Move into the Astra child theme at go-live.
   ========================================================================== */

/* Accent word inside the hero H1 (a single heading widget, so the coloured
   word has to be a span rather than a separate widget — one H1 per page). */
.lc-accent { color: var(--e-global-color-lctqdeep); }

/* Card hover: lift + shadow, matching the static build. Elementor containers
   ignore the CSS Classes field, so cards are targeted by element ID prefix. */
[id^="lccard-"] {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
[id^="lccard-"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(51, 71, 77, .05), 0 22px 55px rgba(51, 71, 77, .13);
  border-color: var(--e-global-color-lctqdeep) !important;
}

/* Media images: gentle zoom inside a rounded frame. */
.lc-zoom .elementor-widget-container { overflow: hidden; border-radius: 22px; }
.lc-zoom img { transition: transform .45s ease; }
.lc-zoom:hover img { transform: scale(1.045); }

/* --- Footer ------------------------------------------------------------- */
/* Text Editor links inherit the global link colour, which is a dark teal and
   unreadable on charcoal. */
/* :not(.elementor-button) matters. This is an ID selector (specificity 101) and
   would otherwise outrank Elementor's class-based button rules (40), repainting
   button labels pale grey — which is invisible on the white Enrol Now button. */
#lc-footer a:not(.elementor-button):not(.elementor-social-icon) {
  color: var(--e-global-color-lccrumb);
  text-decoration: none;
  transition: color .16s ease;
}
#lc-footer a:not(.elementor-button):not(.elementor-social-icon):hover {
  color: var(--e-global-color-lcinkeye);
}
#lc-footer .elementor-widget-text-editor p { margin: 0 0 11px; }
#lc-footer .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Accreditation marks are white line art; give them a little breathing room. */
#lc-footer .elementor-widget-image img { opacity: .92; transition: opacity .16s ease; }
#lc-footer .elementor-widget-image img:hover { opacity: 1; }

/* --- Header ------------------------------------------------------------- */
/* Sticky header needs a solid backdrop as content scrolls beneath it. */
.xtb-header-sticky {
  background: var(--e-global-color-lcwhite);
  border-bottom: 1px solid var(--e-global-color-lcline);
}

/* The Xpro menu exposes no submenu border, radius or shadow controls, and it
   applies the submenu background colour to each <a> rather than to the panel
   itself — so the <ul> keeps the plugin's dark default and shows through as a
   dark frame around the links. Both are corrected here. */
#lc-nav .xpro-elementor-dropdown-menu {
  background: var(--e-global-color-lcwhite);
  border: 1px solid var(--e-global-color-lcline);
  border-radius: 14px;
  box-shadow: 0 4px 8px rgba(51, 71, 77, .05), 0 22px 55px rgba(51, 71, 77, .16);
  overflow: hidden;
  padding: 8px;
  min-width: 268px;
}

/* Mobile / tablet menu panel defaults to #f5f5f5 with plugin styling. */
#lc-nav .xpro-elementor-horizontal-menu-responsive-tablet,
#lc-nav .xpro-elementor-horizontal-menu-responsive-mobile {
  background-color: var(--e-global-color-lcwhite) !important;
}
#lc-nav .xpro-elementor-horizontal-navbar-nav > li > a { color: var(--e-global-color-lcchar); }
#lc-nav .xpro-elementor-dropdown-item {
  border-radius: 8px;
  padding: 11px 14px;
  transition: background-color .16s ease, color .16s ease;
}
#lc-nav .xpro-elementor-dropdown-item:hover {
  background: var(--e-global-color-lctqtint);
}

/* --- Skip link ----------------------------------------------------------- */
.lcchi-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 14px 22px;
  border-radius: 0 0 9px 0;
  background: var(--e-global-color-lcchar);
  color: #fff;
  font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
  font-weight: 600;
  text-decoration: none;
}
.lcchi-skip:focus { left: 0; color: #fff; }

/* --- Syllabus tag lists -------------------------------------------------- */
/* Long reference lists inside Accordion content. A wrapping flex row keeps
   them scannable without resorting to CSS columns. */
.lc-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.lc-taglist li {
  padding: 6px 13px;
  border-radius: 100px;
  background: var(--e-global-color-lcwhite);
  border: 1px solid var(--e-global-color-lcline);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--e-global-color-lcchsoft);
}

/* --- Motion ------------------------------------------------------------- */
.elementor-button { transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }

@media (prefers-reduced-motion: reduce) {
  [id^="lccard-"], .lc-zoom img, .elementor-button { transition: none !important; }
  [id^="lccard-"]:hover, .lc-zoom:hover img { transform: none !important; }
}