/* ==========================================================================
   Converse Summit — theme stylesheet
   Sections:
   1. Fonts & design tokens        4. Built-in header      7. Elementor helper classes
   2. Base                         5. Built-in footer      8. Plain pages
   3. Buttons                      6. Countdown widget     9. Motion / accessibility
   Page content (layout, colours, type) is stored in Elementor itself; this file only adds
   what Elementor cannot express (fonts, sticky header, pseudo-element decoration, hover lifts).
   ========================================================================== */

/* 1. Fonts & tokens ------------------------------------------------------- */
@font-face{font-family:"Inter";src:url("../fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/Inter-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  --cs-blue:#1558A6; --cs-blue-d:#0F4382; --cs-slate:#4F6886; --cs-gray:#737373;
  --cs-ink:#1F2630; --cs-mute:#5B6573; --cs-line:#D9E2EE; --cs-tint:#EEF3F9; --cs-tint2:#F5F7FA;
  --cs-grad:linear-gradient(135deg,#0F4382 0%,#1558A6 38%,#4F6886 78%,#6A6F76 100%);
  --cs-shadow:0 10px 30px rgba(15,67,130,.10);
  --cs-max:1180px; --cs-header-h:72px;
  --cs-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* 2. Base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--cs-font);color:var(--cs-ink);background:#fff;line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
.cs-theme a{text-decoration:none}
:focus-visible{outline:3px solid #7FB2EA;outline-offset:3px;border-radius:6px}
.screen-reader-text,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.cs-skip{position:absolute;left:12px;top:-60px;background:#fff;color:var(--cs-blue);padding:10px 16px;border-radius:8px;z-index:200;font-weight:600}
.cs-skip:focus{top:12px}
.cs-wrap{width:100%;max-width:var(--cs-max);margin:0 auto;padding:0 24px}
.cs-icon{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cs-main{display:block}

/* 3. Buttons (built-in header / plain pages; Elementor buttons are styled in Elementor) */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--cs-font);padding:15px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s;text-decoration:none!important}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--cs-blue);color:#fff!important;box-shadow:0 8px 20px rgba(21,88,166,.30)}
.btn-primary:hover{background:var(--cs-blue-d)}
.btn-sm{padding:11px 20px;font-size:14px}

/* 4. Header (built-in + Converse Nav Menu widget) -------------------------- */
.cs-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.cs-header.scrolled{border-color:var(--cs-line);box-shadow:0 4px 16px rgba(15,67,130,.06)}
.admin-bar .cs-header{top:32px}
@media (max-width:782px){.admin-bar .cs-header{top:46px}}
.cs-bar{display:flex;align-items:center;justify-content:space-between;height:var(--cs-header-h);gap:20px}
.cs-logo,.custom-logo-link{display:flex;align-items:center;gap:12px;color:var(--cs-ink);text-decoration:none}
.cs-logo img,.custom-logo-link img{display:block;height:36px;width:auto;max-width:100%}
.cs-header .custom-logo{height:auto;max-height:44px;width:auto}
.cs-nav ul{display:flex;gap:4px;list-style:none;align-items:center;margin:0;padding:0}
.cs-nav li{margin:0;padding:0}
.cs-nav a.link{display:block;padding:9px 12px;font-size:14px;font-weight:500;color:var(--cs-ink);border-radius:8px;text-decoration:none;line-height:1.6;transition:color .15s,background .15s}
.cs-nav a.link:hover,.cs-nav a.link.active{color:var(--cs-blue);background:var(--cs-tint)}
.cs-menu-btn{display:none;background:none;border:1px solid var(--cs-line);border-radius:10px;width:44px;height:44px;cursor:pointer;color:var(--cs-ink);align-items:center;justify-content:center;padding:0}
.cs-navwrap{display:flex;align-items:center}

@media (max-width:1080px){
  .cs-nav{position:absolute;left:0;right:0;top:100%;background:var(--cs-panel-bg,#fff);border-bottom:1px solid var(--cs-line);padding:12px 24px 24px;display:none;max-height:calc(100vh - var(--cs-header-h));overflow:auto;box-shadow:0 12px 24px rgba(15,67,130,.08)}
  .cs-nav.open{display:block}
  .cs-nav ul{flex-direction:column;align-items:stretch;gap:2px}
  .cs-nav a.link{padding:13px 12px;font-size:16px}
  .cs-nav a.btn-primary{margin:10px 0 0;justify-content:center}
  .cs-menu-btn{display:flex}
  .cs-navwrap{position:static}
}

/* 5. Footer (built-in) ---------------------------------------------------- */
.cs-footer{background:#0E2A4D;color:#C5D3E6;padding:64px 0 28px}
.cs-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.cs-footer p{font-size:14px;margin:16px 0 0;max-width:320px;line-height:1.6}
.cs-footer .cs-foot-title{color:#fff;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin:0 0 14px;line-height:1.15}
.cs-footer ul{list-style:none;display:grid;gap:9px;font-size:14px;margin:0;padding:0}
.cs-footer a{color:#C5D3E6;text-decoration:none}
.cs-footer a:hover{color:#fff;text-decoration:underline}
.cs-foot-bottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:#9FB4CF}
@media (max-width:1080px){.cs-foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.cs-foot-grid{grid-template-columns:1fr}}

/* 6. Countdown widget ----------------------------------------------------- */
.cs-count{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cs-count__cell{background:rgba(255,255,255,.95);border-radius:14px;text-align:center;padding:16px 4px;color:var(--cs-ink)}
.cs-count__num{display:block;font-size:clamp(28px,3.6vw,42px);font-weight:800;color:var(--cs-blue);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.cs-count__label{display:block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cs-mute)}
.cs-count__msg{grid-column:1/-1;text-align:center;color:var(--cs-ink);font-weight:700;font-size:18px;padding:18px;background:#fff;border-radius:14px}
@media (max-width:420px){.cs-count{gap:6px}.cs-count__label{font-size:9.5px;letter-spacing:.08em}}

/* 7. Elementor helper classes --------------------------------------------- */
/* Fonts everywhere inside Elementor output, even before the Kit is applied */
.cs-theme .elementor-widget-text-editor,.cs-theme .elementor-heading-title,.cs-theme .elementor-button,
.cs-theme .elementor-icon-box-title,.cs-theme .elementor-icon-box-description,.cs-theme .elementor-icon-list-text,
.cs-theme .elementor-accordion .elementor-tab-title,.cs-theme .elementor-accordion .elementor-tab-content,
.cs-theme .elementor-counter{font-family:var(--cs-font)}

/* neutral reset for Elementor output (zero specificity, so every Elementor/user setting still wins) */
.cs-theme .elementor :where(h1,h2,h3,h4,h5,h6,p){margin-block-start:0;margin-block-end:0}
.cs-theme .elementor :where(ul,ol){margin:0;padding:0}

/* scroll reveal (class .cs-reveal on containers; disabled inside the Elementor editor) */
.cs-js body:not(.elementor-editor-active) .cs-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.cs-js body:not(.elementor-editor-active) .cs-reveal.in{opacity:1;transform:none}

/* buttons: gentle lift */
.cs-theme .elementor-button{transition:transform .15s,box-shadow .15s,background-color .15s,color .15s}
.cs-theme .elementor-button:hover{transform:translateY(-2px)}
.cs-theme .elementor-button .elementor-button-icon svg,.cs-theme .elementor-button .elementor-button-icon i{transition:transform .15s}

/* hero decoration */
.cs-theme .e-con.cs-hero{position:relative;overflow:hidden;overflow:clip}
.cs-theme .e-con.cs-hero::before{content:"";position:absolute;right:-160px;top:-160px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),rgba(255,255,255,0) 68%);pointer-events:none}
.cs-theme .e-con.cs-hero::after{content:"";position:absolute;left:-120px;bottom:-200px;width:520px;height:520px;border-radius:50%;border:60px solid rgba(255,255,255,.05);pointer-events:none}
.cs-hero>.e-con-inner{position:relative;z-index:2}


/* brand gradient — driven by the Kit's global colours, so Site Settings › Global Colors recolour it.
   Setting a Background in Elementor on the same element overrides it. */
.cs-grad{background-image:linear-gradient(135deg,var(--e-global-color-cs_blue_d,#0F4382) 0%,var(--e-global-color-cs_blue,#1558A6) 38%,var(--e-global-color-cs_slate,#4F6886) 78%,var(--e-global-color-cs_gray_l,#6A6F76) 100%)}
.cs-glass{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cs-hero-title em{font-style:normal;color:var(--e-global-color-cs_ice,#BFD6F2)}

/* accent edges drawn inside the card (Elementor borders allow a single colour) */
.cs-vm,.cs-pillar{position:relative}
.cs-theme .e-con.cs-vm::before,.cs-theme .e-con.cs-pillar::before{content:"";display:block;position:absolute;inset:-1px;width:auto;height:auto;border-radius:inherit;pointer-events:none;z-index:1;background:none;opacity:1}
.cs-theme .e-con.cs-vm--blue::before{box-shadow:inset 5px 0 0 0 var(--e-global-color-cs_blue,#1558A6)}
.cs-theme .e-con.cs-vm--gray::before{box-shadow:inset 5px 0 0 0 var(--e-global-color-cs_gray,#737373)}
.cs-theme .e-con.cs-pillar--blue::before{box-shadow:inset 0 4px 0 0 var(--e-global-color-cs_blue,#1558A6)}
.cs-theme .e-con.cs-pillar--slate::before{box-shadow:inset 0 4px 0 0 var(--e-global-color-cs_slate,#4F6886)}
.cs-theme .e-con.cs-pillar--gray::before{box-shadow:inset 0 4px 0 0 var(--e-global-color-cs_gray,#737373)}

/* stats strip overlaps the hero */
.cs-stats{position:relative;z-index:5}

/* program timeline: vertical line behind the numbered dots */
.cs-timeline{position:relative}
.cs-theme .e-con.cs-timeline::before{content:"";display:block;position:absolute;left:27px;top:10px;bottom:10px;width:3px;height:auto;opacity:1;background:linear-gradient(#1558A6,#737373);border-radius:3px;z-index:0}
.cs-timeline>.e-con{position:relative;z-index:1}
@media (max-width:720px){.cs-theme .e-con.cs-timeline::before{left:23px}}

/* featured sponsor tier */
.cs-tier-featured{transform:translateY(-8px)}
@media (max-width:720px){.cs-tier-featured{transform:none}}

/* venue pseudo-map */
.cs-theme .e-con.cs-map,.cs-map{background-image:linear-gradient(#D9E2EE 1px,transparent 1px),linear-gradient(90deg,#D9E2EE 1px,transparent 1px);background-size:44px 44px;overflow:hidden}

/* FAQ: Elementor Nested Accordion — one rounded card per question (colours, borders, type are set in Elementor) */
.cs-faq .e-n-accordion-item{border-radius:14px}
.cs-faq .e-n-accordion-item[open]>.e-n-accordion-item-title{border-bottom-left-radius:0;border-bottom-right-radius:0}
.cs-faq .e-n-accordion-item-title{cursor:pointer}
.cs-faq .e-n-accordion-item>.e-con{border-top:0}

/* venue pin */
.cs-pin .elementor-icon{box-shadow:0 10px 24px rgba(21,88,166,.4)}

/* hover polish on cards */
.cs-card{transition:box-shadow .2s ease,transform .2s ease}

/* center-align helper for icon-box text in "audience" tiles */
.cs-theme .elementor-icon-box-wrapper{align-items:flex-start}

/* 8. Plain pages ---------------------------------------------------------- */
.cs-plain{padding-top:56px;padding-bottom:72px}
.cs-plain-title{font-size:clamp(28px,3.4vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 20px;color:var(--cs-ink)}
.cs-entry{margin-bottom:40px}
.cs-entry-title{font-size:24px;margin:0 0 6px;letter-spacing:-.01em}
.cs-entry-title a{color:var(--cs-ink)}
.cs-entry-meta{font-size:14px;color:var(--cs-mute);margin-bottom:12px}
.cs-entry-content{max-width:760px}
.cs-entry-content a{color:var(--cs-blue);text-decoration:underline}
.cs-search{display:flex;gap:10px;margin:16px 0}
.cs-search input[type=search]{flex:1;min-width:0;padding:12px 16px;border:1px solid var(--cs-line);border-radius:999px;font:inherit}

/* 9. Motion & accessibility ------------------------------------------------ */
/* ---------------------------------------------------------------- motion layer
   Free-Elementor safe. Everything here is switched off for reduced-motion users and inside the editor.
   Elementor Pro motion effects (tilt / parallax / sticky header) are set per element in the editor. */
@keyframes cs-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes cs-rise-in{from{opacity:0;translate:0 28px}to{opacity:1;translate:none}}
@keyframes cs-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-60px,50px,0) scale(1.18)}}
@keyframes cs-spin{to{transform:rotate(360deg)}}
@keyframes cs-shine{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(220%) skewX(-18deg)}}
@keyframes cs-tick{0%{transform:translateY(-6px);opacity:.35}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:no-preference){
  /* hero entrance */
  .cs-js body:not(.elementor-editor-active) .cs-hero-copy>*{animation:cs-rise .95s cubic-bezier(.2,.7,.2,1) both}
  .cs-js body:not(.elementor-editor-active) .cs-hero-copy>:nth-child(1){animation-delay:.05s}
  .cs-js body:not(.elementor-editor-active) .cs-hero-copy>:nth-child(2){animation-delay:.18s}
  .cs-js body:not(.elementor-editor-active) .cs-hero-copy>:nth-child(3){animation-delay:.34s}
  .cs-js body:not(.elementor-editor-active) .cs-hero-copy>:nth-child(4){animation-delay:.46s}
  .cs-js body:not(.elementor-editor-active) .cs-hero-copy>:nth-child(5){animation-delay:.58s}
  .cs-js body:not(.elementor-editor-active) .cs-hero-copy>:nth-child(6){animation-delay:.72s}
  .cs-js body:not(.elementor-editor-active) .cs-hero .cs-glass{animation:cs-rise 1.05s .4s cubic-bezier(.2,.7,.2,1) both}
  /* living hero background */
  .cs-theme .e-con.cs-hero::before{animation:cs-drift 16s ease-in-out infinite alternate}
  .cs-theme .e-con.cs-hero::after{animation:cs-spin 90s linear infinite}
  /* staggered children (grids / card rows): add class cs-stagger to a container */
  .cs-js body:not(.elementor-editor-active) .cs-stagger.cs-reveal{opacity:1;transform:none;transition:none}
  .cs-js body:not(.elementor-editor-active) .cs-stagger>*{opacity:0}
  .cs-js body:not(.elementor-editor-active) .cs-stagger.in>*{animation:cs-rise-in .75s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--cs-i,0) * 90ms)}
  /* timeline line draws itself */
  .cs-js body:not(.elementor-editor-active) .cs-draw::before{transform-origin:top;transform:scaleY(0);transition:transform 1.8s cubic-bezier(.3,.6,.2,1)}
  .cs-js body:not(.elementor-editor-active) .cs-draw.in::before{transform:scaleY(1)}
  /* button shine on hover */
  .cs-theme .elementor-button{position:relative;overflow:hidden}
  .cs-theme .elementor-button::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-120%) skewX(-18deg);pointer-events:none}
  .cs-theme .elementor-button:hover::after{animation:cs-shine .85s ease}
  /* countdown seconds tick */
  .cs-count__num.is-tick{animation:cs-tick .35s ease}
  /* soft card hover glow */
  .cs-theme .e-con.cs-fx-tilt{transition:box-shadow .35s ease}
  /* Elementor Pro sticky header (Theme Builder header): shrink + shadow once scrolled */
  .cs-el-header-pro{transition:box-shadow .3s ease,min-height .3s ease,background-color .3s ease,backdrop-filter .3s ease}
  .cs-el-header-pro.elementor-sticky--effects{min-height:60px;box-shadow:0 10px 28px rgba(15,67,130,.12);backdrop-filter:saturate(1.4) blur(10px)}
}
.cs-el-header-pro .cs-nav-wrap{--cs-header-h:72px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cs-js body:not(.elementor-editor-active) .cs-reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.cs-theme .elementor-button:hover{transform:none}
}