@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

/* =========================
   VeloxCon 2026 Design System
   ========================= */
:root{
  --accent:#001e68;
  --bg:#ffffff;
  --alt:#f5f7fa;
  --text:#111827;
  --muted:#6b7280;
  --border:rgba(17,24,39,.12);
  --radius:14px;
  --shadow:0 10px 30px rgba(17,24,39,.08);
  --max:1200px;
}

body{
  font-family:"Manrope", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial !important;
  color:var(--text);
}

/* Prevent horizontal scroll when using full-bleed sections */
body{ overflow-x:hidden; }

/* =========================
   Layout
   ========================= */
.vx-container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}

/* =========================
   Typography
   ========================= */
.vx-h1{
  font-size:56px;
  line-height:1.05;
  margin:0 0 16px 0;
  letter-spacing:-.03em;
  color:var(--text);
}
.vx-h2{
  font-size:32px;
  margin:0 0 12px 0;
  letter-spacing:-.02em;
  color:var(--text);
}
.vx-desc{
  font-size:18px;
  color:var(--muted);
  line-height:1.6;
  margin:0;
}
.vx-meta{
  font-size:14px;
  color:var(--muted);
  margin:16px 0 24px 0;
}

/* =========================
   Hero
   ========================= */
/* Full bleed hero */
.vx-hero{
  position:relative;
  padding:240px 0 120px 0;

  background:
    linear-gradient(
      to right,
      rgba(10, 15, 28, 0.72),
      rgba(10, 15, 28, 0.45)
    ),
    url('https://veloxcon.io/wp-content/uploads/2026/02/Audience.jpg');

  background-size:cover;
  background-position:center;

  width:100vw;
  left:50%;
  margin-left:-50vw;
}

/* White nav text only on homepage */
body.home #masthead a{
  color:#fff !important;
}

/* Hero text (image background) */
.vx-hero .vx-h1,
.vx-hero .vx-desc,
.vx-hero .vx-meta{
  color:#fff !important;
}

.vx-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

/* Buttons */
.vx-btn{
  padding:14px 24px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
}
.vx-btn-primary{
  background:var(--accent);
  color:#fff !important;
  border-color:var(--accent);
  box-shadow:0 10px 26px rgba(0,0,0,.25);
}
.vx-btn-primary:hover{
  background:#002a90;
  border-color:#002a90;
}
.vx-hero .vx-btn-outline{
  border:1px solid rgba(255,255,255,.65) !important;
  color:#fff !important;
  background:transparent !important;
}
.vx-hero .vx-btn-outline:hover{
  border-color:#fff !important;
  background:rgba(255,255,255,.10) !important;
}

/* =========================
   Sections
   ========================= */
.vx-section{
  padding:56px 0;
  background:var(--bg);
}
.vx-alt{
  background:var(--alt);
}

/* =========================
   Grid
   ========================= */
.vx-grid-4{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:24px;
}
@media(max-width:1200px){
  .vx-grid-4{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media(max-width:900px){
  .vx-grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media(max-width:640px){
  .vx-grid-4{ grid-template-columns:1fr; }
}

/* =========================
   Card Base
   ========================= */
.vx-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  min-width:0;
}
.vx-card:hover{
  transform: translateY(-4px);
  transition: 150ms ease;
}

/* =========================
   Speaker Cards
   ========================= */
.vx-card.vx-speaker{
  padding:0 !important;
  text-align:center;
}
.vx-card.vx-speaker .vx-headshot{
  display:block !important;
  width:100% !important;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center top;
  border-bottom:1px solid var(--border);
}
.vx-card.vx-speaker .vx-card-body{
  padding:10px 16px 14px 16px !important;
}
.vx-card.vx-speaker .vx-name{
  margin-top:6px;
  font-weight:700;
  font-size:16px;
}
.vx-card.vx-speaker .vx-title{
  margin-top:4px;
  font-size:14px;
  color:var(--muted);
}

/* Company logos */
.vx-card.vx-speaker img.vx-company{
  display:block !important;
  margin:14px auto 0 auto !important;
  height:44px !important;
  width:auto !important;
  max-width:160px !important;
  object-fit:contain !important;
}

/* Optical bump for Meta only (adjust 48–54 as needed) */
.vx-card.vx-speaker img.vx-company--meta{
  height:52px !important;
  max-width:180px !important;
}

/* =========================
   Venue
   ========================= */
.vx-venue-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:32px;
  align-items:start;
}
@media(max-width:900px){
  .vx-venue-grid{ grid-template-columns:1fr; }
}

.vx-venue-content .vx-desc{ margin-bottom:10px; }

.vx-venue-meta{
  margin-top:14px;
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
}

.vx-venue-image{
  width:100%;
  align-self:end;
}
.vx-venue-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  display:block;
}

.vx-venue-map{ margin-top:16px; }
.vx-venue-map iframe{
  width:100%;
  height:220px;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  display:block;
}

.vx-map-link{
  display:inline-block;
  margin-top:10px;
  font-weight:600;
  font-size:14px;
}

/* =========================
   Program Committee
   ========================= */
#committee .vx-grid-4{
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}
@media(max-width:900px){
  #committee .vx-grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}
@media(max-width:640px){
  #committee .vx-grid-4{ grid-template-columns:1fr !important; }
}

#committee .vx-card{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}
#committee .vx-headshot{
  width:120px !important;
  height:120px !important;
  border-radius:999px !important;
  object-fit:cover !important;
  object-position:center top;
  display:block !important;
  margin:0 auto 14px auto !important;
  border:none !important;
}
#committee .vx-card-body{
  text-align:center !important;
  padding:0 !important;
}
#committee .vx-name{ margin-top:4px !important; }
#committee .vx-company{
  margin:10px auto 0 auto !important;
  width:140px !important;
  height:auto !important;
}

/* =========================
   Kadence Header Overlay (Homepage)
   ========================= */
body.home #masthead{
  position:absolute;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:9999;
}

/* Remove header backgrounds Kadence adds in inner wrappers */
body.home #masthead,
body.home #masthead .site-header-inner,
body.home #masthead .header-main,
body.home #masthead .header-main-inner,
body.home #masthead .header-section{
  background:transparent !important;
  box-shadow:none !important;
}

/* White nav/header links on hero */
body.home #masthead a,
body.home #masthead .menu-link{
  color:#fff !important;
}

/* Optional: give sticky header a readable background */
body.home #masthead .kadence-sticky-header,
body.home #masthead.kadence-scroll-header{
  background:rgba(10,15,28,.85) !important;
  backdrop-filter:blur(8px);
}
/* Home only (page-id-6): force header overlay + remove any background strip */
body.page-id-6 #masthead{
  position:absolute !important;
  top:0; left:0; right:0;
  width:100%;
  z-index:9999;
}

/* Kadence header inner wrappers sometimes still paint a background */
body.page-id-6 #masthead,
body.page-id-6 #masthead .site-header-inner,
body.page-id-6 #masthead .header-main,
body.page-id-6 #masthead .header-main-inner,
body.page-id-6 #masthead .header-section{
  background:transparent !important;
  box-shadow:none !important;
}

/* Home only: remove top padding/margin that creates the white strip */
body.page-id-6 .entry-content-wrap{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* Also remove any top spacing on the first content element */
body.page-id-6 .vx-hero{
  padding:125px 0 100px 0 !important;
}
/* Home hero: make primary button white */
body.page-id-6 .vx-hero .vx-btn-primary{
  background:#fff !important;
  color:#111827 !important;
  border-color:#fff !important;
}

/* Subtle hover */
body.page-id-6 .vx-hero .vx-btn-primary{
  background:#fff !important;
  color:#111827 !important;
  border-color:#fff !important;
  transition: all 200ms ease;
}

body.page-id-6 .vx-hero .vx-btn-primary:hover{
  background:#f3f4f6 !important;
  transform: translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.35);
  box-shadow:
    0 0 0 2px rgba(255,255,255,.2),
    0 14px 40px rgba(0,30,104,.5);
}
/* Center hero content */
body.page-id-6 .vx-hero-inner{
  grid-template-columns:1fr !important;
  text-align:center;
  justify-items:center;
}

body.page-id-6 .vx-hero-inner > div:first-child{
  max-width:700px;
}

body.page-id-6 .vx-actions{
  justify-content:center;
}
body.page-id-6 .vx-hero-note{
  margin-top:16px;
  font-size:14px;
  color:#fff;
  opacity:.9; /* optional softness */
}
/* ========================================
   Bigger Hero Typography (Homepage Only)
   ======================================== */

body.page-id-6 .vx-hero .vx-h1{
  font-size: clamp(64px, 6vw, 92px);
  line-height: 1.05;
}

body.page-id-6 .vx-hero .vx-desc{
  font-size: clamp(22px, 2.2vw, 28px);
}

body.page-id-6 .vx-hero .vx-meta{
  font-size: 18px;
}

body.page-id-6 .vx-hero-note{
  font-size: 18px;
}
.vx-center{
  text-align:center;
}
.vx-center .vx-container{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.vx-center .vx-desc,
.vx-center p{
  max-width:1200px;
}
/* Bigger date/location in hero */
body.page-id-6 .vx-hero .vx-meta{
  font-size: clamp(20px, 2vw, 26px);
  font-weight:300;
  letter-spacing:-0.01em;
}
/* White nav text on homepage hero */
body.page-id-6 #masthead a,
body.page-id-6 #masthead .menu-link{
  color:#fff !important;
}
/* ========================================
   Agenda Overview
   ======================================== */

.vx-agenda-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:40px;
  margin-top:40px;
}

@media(max-width:900px){
  .vx-agenda-grid{
    grid-template-columns:1fr;
  }
}

.vx-agenda-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:32px;
  box-shadow:var(--shadow);
  text-align:left;
}

.vx-agenda-day{
  font-size:24px;
  margin-bottom:20px;
  letter-spacing:-0.01em;
}

.vx-agenda-list{
  list-style:none;
  padding:0;
  margin:0;
}

.vx-agenda-list li{
  margin-bottom:14px;
	padding-left:0 !important;
  font-size:16px;
  color:var(--text);
}

.entry-hero {
  display: none !important;
}

.page-id-XXX .site-header {
  background: transparent !important;
  position: absolute;
  width: 100%;
}

.page-id-XXX .site-header .site-title,
.page-id-XXX .site-header .navigation,
.page-id-XXX .site-header a {
  color: #ffffff !important;
}

.site-header {
  background-color: #0f172a !important; /* adjust to match your homepage */
}

/* Agenda page: make header match homepage */
.page-id-465 #masthead,
.page-id-465 .site-main-header-wrap,
.page-id-465 .site-header-row-container {
  background: #081a3a !important;
}

/* Nav links */
.page-id-465 #site-navigation a,
.page-id-465 .main-navigation a,
.page-id-465 .main-navigation .menu > li > a {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Nav hover/current */
.page-id-465 #site-navigation a:hover,
.page-id-465 .main-navigation a:hover,
.page-id-465 .main-navigation .current-menu-item > a {
  color: #dbe7ff !important;
}

/* Register button */
.page-id-465 .header-button,
.page-id-465 .header-button-wrap a,
.page-id-465 .button.header-button {
  color: #ffffff !important;
  border-color: #2f6fe4 !important;
  background: transparent !important;
}

/* Register button hover */
.page-id-465 .header-button:hover,
.page-id-465 .header-button-wrap a:hover,
.page-id-465 .button.header-button:hover {
  color: #ffffff !important;
  background: rgba(47, 111, 228, 0.15) !important;
}

/* Keep logo visible */
.page-id-465 .custom-logo {
  opacity: 1 !important;
}