/* ============================================================
   PECB Conference 2026 — Component styles
   Append to: hello-elementor-child/style.css

   These style the sections built as HTML widgets, plus the
   shared patterns (horizontal scrollers, expand/collapse,
   flip cards) reused across pages.

   Design tokens come from pecb-tokens.css, which lives in
   Elementor → Site Settings → Custom CSS.
   ============================================================ */


/* ============================================================
   Header — nav dropdown hover bridge
   Without this the dropdown closes as the cursor crosses the gap.
   ============================================================ */

.pecb-nav-bridge,
.elementor-nav-menu .sub-menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 16px;
}


/* ============================================================
   Header — days to go
   ============================================================ */

.pecb-days {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pecb-days-num {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.pecb-days-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8A90A6;
  white-space: nowrap;
}


/* ============================================================
   Home §03 — Stats band
   ============================================================ */

.pecb-band { position: relative; overflow: hidden; }

.pecb-stats {
  max-width: 1240px;
  margin: 0 auto;
  padding: 36px 28px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}

.pecb-stat {
  flex: 1;
  min-width: 150px;
  padding: 6px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-left: 1px solid rgba(255,255,255,0.09);
}
.pecb-stat:first-child { border-left: none; }

.pecb-stat-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.pecb-stat-plus {
  font-size: 22px;
  font-weight: 700;
  background: linear-gradient(120deg,#5B6CFF,#FF5663);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pecb-stat-num {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg,#8BA0FF 0%,#fff 55%,#FF8A97 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pecb-stat-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--pecb-text-body, #9AA3C4);
  margin-top: 14px;
}


/* ============================================================
   Home §03 — Partner marquee
   ============================================================ */

.pecb-partners-head {
  max-width: 1240px;
  margin: 56px auto 0;
  padding: 0 28px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
}

.pecb-marquee-mask {
  overflow: hidden;
  padding: 26px 0 46px;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}

.pecb-marquee {
  display: flex;
  width: max-content;
  gap: 64px;
  align-items: center;
  padding: 14px 0;
  animation: pecbMarquee 32s linear infinite;
}
.pecb-marquee:hover { animation-play-state: paused; }

@keyframes pecbMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.pecb-logo {
  width: 130px;
  height: 32px;
  flex: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: brightness(0) invert(0.85);
  transition: filter .45s cubic-bezier(.22,.61,.36,1),
              transform .45s cubic-bezier(.22,.61,.36,1);
}
.pecb-logo:hover {
  filter: brightness(0) invert(1);
  transform: scale(1.3);
}


/* ============================================================
   Shared — horizontal snap scroller
   Used by: Home §05 §06 §09, About §04, Course §04 §05
   ============================================================ */

@media (max-width: 1024px) {
  .pecb-hscroll {
    display: flex !important;
    align-items: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    margin: 0 -18px;
    padding: 4px 18px 18px;
    scrollbar-width: none;
  }
  .pecb-hscroll::-webkit-scrollbar { display: none; }

  .pecb-hscroll > * {
    flex: 0 0 var(--pecb-card-w, 80%);
    scroll-snap-align: center;
  }
  .pecb-hscroll > *:hover { transform: none; }
}

/* Per-section card widths, matching the original design */
.pecb-hscroll--training  { --pecb-card-w: 86%; }
.pecb-hscroll--exp       { --pecb-card-w: 72%; }
.pecb-hscroll--rome      { --pecb-card-w: 76%; }
.pecb-hscroll--tickets   { --pecb-card-w: 84%; }
.pecb-hscroll--benefits  { --pecb-card-w: 74%; }
.pecb-hscroll--trainer   { --pecb-card-w: 82%; }


/* ============================================================
   Shared — expand / collapse
   ============================================================ */

.pecb-expand-toggle,
.pecb-toggle,
.pecb-toggle-group {
  display: none;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 10px 0 0;
  margin: 0;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  color: #9FB2FF;
  cursor: pointer;
}

.pecb-toggle,
.pecb-toggle-group {
  font-size: 15px;
  font-weight: 700;
  color: #0F1FC4;
  justify-content: center;
  width: 100%;
  padding: 16px 0 6px;
}

@media (max-width: 1024px) {
  .pecb-expand-toggle,
  .pecb-toggle,
  .pecb-toggle-group { display: inline-flex; }

  /* Truncated body with a fade-out mask */
  [data-pecb-expand] .pecb-exp-desc,
  [data-pecb-expand] .pecb-collapse-target {
    max-height: 80px;
    overflow: hidden;
    transition: max-height .4s ease;
    -webkit-mask-image: linear-gradient(to bottom,#000 55%,transparent 100%);
            mask-image: linear-gradient(to bottom,#000 55%,transparent 100%);
  }
  [data-pecb-open="true"] .pecb-exp-desc,
  [data-pecb-open="true"] .pecb-collapse-target {
    max-height: 600px;
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* Group collapse — several descriptions, one button */
  .pecb-collapse-group[data-pecb-open="false"] .pecb-collapse-item {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height .4s ease, opacity .35s ease, margin-top .4s ease;
  }
  .pecb-collapse-group[data-pecb-open="true"] .pecb-collapse-item {
    max-height: 200px;
    opacity: 1;
    margin-top: 3px;
  }

  /* Paragraph collapse */
  [data-pecb-collapse-text][data-pecb-open="false"] .pecb-collapse-p2 {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height .4s ease, opacity .35s ease, margin .4s ease;
  }
  [data-pecb-collapse-text][data-pecb-open="true"] .pecb-collapse-p2 {
    max-height: 600px;
    opacity: 1;
    margin: 0 0 28px;
  }
}


/* ============================================================
   Home §06 — Experience cards
   ============================================================ */

.pecb-exp-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}

.pecb-exp-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #111426;
  border: 1px solid rgba(255,255,255,0.16);
  transition: transform .2s, border-color .2s;
}
.pecb-exp-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,0.4);
}

@media (hover: none) {
  .pecb-exp-card:hover {
    transform: none;
    border-color: rgba(255,255,255,0.16);
  }
}

.pecb-exp-img {
  height: 158px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.pecb-exp-body { padding: 20px 22px 24px; position: relative; z-index: 2; }

.pecb-exp-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
  color: #fff;
}

.pecb-exp-desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--pecb-text-body, #9AA3C4);
  margin: 0;
}


/* ============================================================
   Shared — pills ("Who should attend?")
   ============================================================ */

.pecb-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 100px;
  padding: 11px 20px;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  transition: border-color .25s, background .25s;
}
.pecb-pill:hover {
  border-color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.2);
}

@media (max-width: 1024px) {
  .pecb-pill { padding: 8px 14px; font-size: 13px; }
}


/* ============================================================
   Speaker flip cards
   ============================================================ */

.spk-card {
  perspective: 1400px;
  height: 400px;
  cursor: pointer;
  animation: pecbSpeakerIn 900ms cubic-bezier(.2,.7,.3,1) both;
}

.spk-flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* Design flips on the X axis (top-over-bottom), not Y. */
.spk-card:hover .spk-flip,
.spk-card:focus-within .spk-flip,
.spk-card.flipped .spk-flip {
  transform: rotateX(180deg);
}

.spk-front,
.spk-back {
  position: absolute;
  inset: 0;
  border-radius: 36px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.spk-front {
  background: #06060d;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spk-back {
  transform: rotateX(180deg);
  background: var(--pecb-grad-cta, linear-gradient(40deg, #d40b22 0%, #3a0a2a 27%, #0b0a1e 50%, #14207a 73%, #1c2db5 100%));
  padding: 22px;
  display: flex;
  flex-direction: column;
  border: 0 !important;
}

.spk-company { font-weight: 700; color: #fff; }

/* Keyboard focus ring on the whole card */
.spk-card:focus-visible {
  outline: 2px solid var(--pecb-link-light, #8BA0FF);
  outline-offset: 3px;
  border-radius: 38px;
}

@media (prefers-reduced-motion: reduce) {
  .spk-card { animation: none; }
  .spk-flip { transition: none; }
}


/* ============================================================
   Program tabs — staggered row entrance
   ============================================================ */

@keyframes pecbRowIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tab-date {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: .75;
  margin-top: 2px;
}


/* ============================================================
   Banners — drifting glows + fade-up entrance
   ============================================================ */

@keyframes pecbFloatGlow {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(-2%,3%,0) scale(1.06); }
}

@keyframes pecbFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================
   Tickets — premium card hover sweep
   ============================================================ */

@keyframes premSweep {
  0%   { background-size: 100% 100%; background-position: 0% 0%; }
  14%  { background-size: 220% 220%; background-position: 0% 0%; }
  50%  { background-size: 220% 220%; background-position: 100% 100%; }
  86%  { background-size: 220% 220%; background-position: 0% 0%; }
  100% { background-size: 100% 100%; background-position: 0% 0%; }
}

#premiumCard { background-size: 100% 100%; }
#premiumCard:hover { animation: premSweep 2s ease-in-out; }


/* ============================================================
   Venue map
   ============================================================ */

.pecb-map {
  overflow: hidden;
  border: 1px solid #E4E7F2;
  height: 440px;
}
.pecb-map iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 1024px) {
  .pecb-map { height: 300px; }
}


/* ============================================================
   Light sections — flip text colours
   Applied as a CSS class on the section container.
   ============================================================ */

.pecb-light { color: var(--pecb-ink, #0A0A16); }
.pecb-light h1,
.pecb-light h2,
.pecb-light h3,
.pecb-light h4 { color: var(--pecb-ink, #0A0A16); }
.pecb-light p  { color: var(--pecb-ink-soft, #4A5169); }


/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .pecb-marquee { animation: none; }
  .spk-flip     { transition: none; }
}


/* ============================================================
   PECB Conference 2026 rebuild -- template-conference-2026.php
   Small helpers the coded template relies on.
   ============================================================ */

.pecb-media-placeholder {
  background: linear-gradient(135deg, var(--pecb-surface-4, #0F1430) 0%, var(--pecb-surface-2, #0B0A1E) 55%, var(--pecb-blue-abyss, #080E42) 100%);
}

.pecb-nav-link { transition: color .2s, transform .2s; }
.pecb-nav-link:hover { color: #FFFFFF !important; transform: scale(1.1); }

.pecb-social-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: #c7ccdb; transition: background .2s, color .2s, border-color .2s;
}
.pecb-social-icon:hover { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.4); }

.pecb-footer-link { font-size: 15px; color: #e5e7f2; transition: color .2s; display: inline-block; }
.pecb-footer-link:hover { color: #ff5663; }

.pecb-program-tab:hover { transform: translateY(-2px); }
.pecb-offer-dots button { transition: width 400ms ease, background 400ms ease; }

/* ============================================================
   PECB Conference 2026 -- base rules for the coded templates.
   Scoped to the five custom page templates so the rest of the
   site (Elementor pages, Woo cart/checkout, blog) keeps using
   the theme's own Raleway / DM Sans typography untouched.
   ============================================================ */

.pecb-conference-2026,
.pecb-about,
.pecb-speakers,
.pecb-program,
.pecb-course {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  background: #05060F;
  color: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

.pecb-conference-2026 *,
.pecb-about *,
.pecb-speakers *,
.pecb-program *,
.pecb-course * { box-sizing: border-box; }

.pecb-conference-2026 a,
.pecb-about a,
.pecb-speakers a,
.pecb-program a,
.pecb-course a { text-decoration: none; color: inherit; }

.pecb-conference-2026 a:hover,
.pecb-about a:hover,
.pecb-speakers a:hover,
.pecb-program a:hover,
.pecb-course a:hover { color: inherit; }


/* ============================================================
   Header navigation + hover dropdown
   ============================================================ */

.nav-item { position: relative; align-self: stretch; }

.nav-item.nav-active > a {
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #FFFFFF !important;
  text-align: center !important;
}

.nav-drop {
  position: absolute;
  top: 100%;
  left: -22px;
  min-width: 300px;
  background: rgba(9,12,30,0.97);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 1px solid rgba(120,150,255,0.2);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.85);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  z-index: 60;
}

.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-drop::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 16px;
  pointer-events: none;
}

.nav-drop a { transition: background .18s, color .18s; }
.nav-drop a:hover {
  background: linear-gradient(90deg,#1a2ba8,#2540d8);
  color: #fff !important;
}

@keyframes pecbSpeakerIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* Anchor targets clear the 78px sticky header (replaces scroll-padding-top). */
.pecb-conference-2026 section[id],
.pecb-about section[id],
.pecb-speakers section[id],
.pecb-program section[id],
.pecb-course section[id] { scroll-margin-top: 84px; }


/* ============================================================
   Hover / interaction states carried over from the designs.
   ============================================================ */

/* Generic lift used by ticket, testimonial and benefit cards. */
.pecb-lift { transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s; }
.pecb-lift:hover { transform: translateY(-6px); box-shadow: 0 34px 66px -30px rgba(20,30,60,0.5); }

/* Pre-conference training course cards (home page). */
.pecb-course-card { transition: transform .35s, border-color .35s, box-shadow .35s; }
.pecb-course-card:hover {
  transform: translateY(-8px);
  border-color: rgba(150,180,255,0.6);
  box-shadow: 0 34px 70px -34px rgba(15,31,150,0.8);
}

/* Experience / Why-Rome dark cards. */
.pecb-format-card { transition: transform .2s, border-color .2s; }
.pecb-format-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.4); }

/* Who-should-attend role pills. */
.pecb-role-pill { transition: border-color .25s, background .25s; }
.pecb-role-pill:hover { border-color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.2); }

/* Solid white buttons (Read more, App Store, Google Play). */
.pecb-btn-white { transition: background .2s, transform .2s; }
.pecb-btn-white:hover { background: #eef0ff !important; transform: translateY(-2px); }

/* Hero venue / map link. */
.pecb-venue-link { transition: color .2s, transform .2s; }
.pecb-venue-link:hover { color: #ffffff !important; transform: translateY(-1px); }

/* Any element that should just rise slightly on hover. */
.pecb-lift-sm { transition: transform .2s; }
.pecb-lift-sm:hover { transform: translateY(-2px); }

/* Secondary hero CTA -- design uses a 2px border over a translucent fill. */
.pecb-hero-ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.22);
  border-radius: 100px;
  transition: transform .25s, background .25s, border-color .25s;
}
.pecb-hero-ghost:hover {
  background: rgba(255,255,255,0.16);
  transform: scale(1.06);
  border-color: rgba(255,255,255,1);
  color: #fff !important;
}
.pecb-cta.pecb-cta-hero { transition: transform .25s; }
.pecb-cta.pecb-cta-hero:hover { transform: scale(1.06); }


/* ============================================================
   Ticket cards -- lift, button colour swap, premium sweep
   ============================================================ */

.pecb-ticket-card { transition: transform .22s; }
.pecb-ticket-card:hover { transform: translateY(-6px); }

.pecb-ticket-btn { transition: transform .18s, background .25s, color .25s, border-color .25s; }

/* Standard / training tiers: outline -> brand gradient fill. */
.pecb-ticket-btn-standard:hover {
  background: linear-gradient(90deg, #192a9c 0%, #bb0812 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  transform: translateY(-2px);
}

/* Premium tier: white -> pale blue. */
.pecb-ticket-btn-premium:hover {
  background: #eef0ff !important;
  color: #192a9c !important;
  border-color: transparent !important;
  transform: translateY(-2px);
}

@keyframes pecbPremSweep {
  0%   { background-size: 100% 100%; background-position: 0% 0%; }
  14%  { background-size: 220% 220%; background-position: 0% 0%; }
  50%  { background-size: 220% 220%; background-position: 100% 100%; }
  86%  { background-size: 220% 220%; background-position: 0% 0%; }
  100% { background-size: 100% 100%; background-position: 0% 0%; }
}

#premium-ticket-card:hover { animation: pecbPremSweep 2s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  #premium-ticket-card:hover { animation: none; }
  .pecb-ticket-card:hover,
  .pecb-lift:hover,
  .pecb-course-card:hover { transform: none; }
}


/* Course-page benefit cards. */
.pecb-benefit-card { transition: transform .28s, box-shadow .28s; }
.pecb-benefit-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(37,64,216,0.6); }

/* About venue carousel arrows. */
.pecb-venue-prev, .pecb-venue-next { transition: background .2s; }
.pecb-venue-prev:hover, .pecb-venue-next:hover { background: rgba(0,0,0,0.75) !important; }

/* Program format filter 'All on / All off' buttons. */
.pecb-filter-all { transition: background .2s, border-color .2s, color .2s; }
.pecb-filter-all:hover { background: rgba(255,255,255,0.12) !important; color: #FFFFFF !important; }

@media (prefers-reduced-motion: reduce) {
  .pecb-benefit-card:hover { transform: none; }
}


/* Drifting banner glow orbs (design: floatGlow). */
.pecb-glow { animation: pecbFloatGlow 14s ease-in-out infinite; position: absolute;}
.pecb-glow-rev { animation: pecbFloatGlow 18s ease-in-out infinite reverse; }

/* Program agenda rows -- staggered entrance (design: agendaIn). */
.pecb-agenda-row { animation: pecbRowIn .5s cubic-bezier(.2,.7,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  .pecb-glow, .pecb-glow-rev, .pecb-agenda-row { animation: none; }
}