/* =========================================================
   GLOBAL RESET (so header can hit edges)
========================================================= */
html, body{
  margin: 0;
  padding: 0;
}

/* =========================================================
   CONCRETE TOOLBAR SPACING (dark gap only, page stays white)
========================================================= */
html, body{
  background: #ffffff !important;  /* ✅ kills black gutters */
}

html.ccm-toolbar-visible body{
  padding-top: 60px;
  background: #ffffff !important;  /* ✅ page stays white even when logged in */
}

/* dark strip behind the toolbar gap (DO NOT cover the toolbar) */
html.ccm-toolbar-visible body::before{
  content:"";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #0b0f14;
  z-index: 0;           /* ✅ behind everything, toolbar stays visible */
  pointer-events: none;
}

@media (max-width: 600px){
  html.ccm-toolbar-visible body{
    padding-top: 80px;
  }
  html.ccm-toolbar-visible body::before{
    height: 80px;
  }
}

/* =========================================================
   BASIC PAGE LAYOUT (CONTENT + RIGHT RAIL)
========================================================= */

/* ✅ White page background so you don't see black gutters */
html, body{
  background: #ffffff;
}

.site-shell{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  gap: 24px;
}

.site-content{
  flex: 1 1 auto;
  min-width: 0;
}

.site-rail{
  flex: 0 0 320px;
}

@media (max-width: 980px){
  .site-shell{ flex-direction: column; }
  .site-rail{ flex-basis: auto; }
}

/* =========================================================
   BASE TYPOGRAPHY (global defaults)
========================================================= */

body{
  font-family: "Trebuchet MS", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #111827;
}

h1, h2, h3{
  font-family: "Trebuchet MS", "Segoe UI", Arial, Helvetica, sans-serif;
  color: #111827;
  margin: 0 0 10px;
  line-height: 1.15;
}

h1{ font-size: 40px; font-weight: 900; }
h2{ font-size: 26px; font-weight: 900; }
h3{ font-size: 18px; font-weight: 900; }

p{
  margin: 0 0 12px;
  color: #374151;
}

a{
  color: #f07a1a;
  text-decoration: none;
  font-weight: 800;
}
a:hover{ text-decoration: underline; }

ul, ol{
  margin: 0 0 12px 20px;
  color: #374151;
}
li{ margin: 6px 0; }

/* =========================================================
   HEADER (full-bleed bar + zones)
========================================================= */
.site-header{
  background: #0b0f14;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding: 14px 0;
  width: 100%;
}

.site-header,
.header-nav,
.header-nav a,
.btn,
.nav-toggle{
  font-family: "Trebuchet MS", "Segoe UI", Arial, Helvetica, sans-serif;
}

.header-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 26px;
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | nav | CTA */
  align-items: center;
  gap: 18px;
}

/* Logo */
.header-logo{
  display: flex;
  align-items: center;
  min-width: 0;
}
.header-logo img{
  height: 66px;
  width: auto;
  display: block;
}

/* Nav zone */
.header-nav{
  min-width: 0;
  display: flex;
  justify-content: center;
}

/* =========================================================
   KILL CONCRETE RESPONSIVE NAV OUTPUT (it was fighting you)
   Your hamburger is .nav-toggle (in header.php).
========================================================= */
.header-nav .ccm-responsive-menu,
.header-nav .ccm-responsive-menu-launch,
.header-nav .ccm-responsive-menu-launcher,
.header-nav .ccm-responsive-menu-toggle{
  display: none !important;
}

/* =========================================================
   DESKTOP NAV PILLS (ROBUST: styles ANY ul/ol/li/a inside .header-nav)
   This fixes the “bullets + blue links” issue when Concrete wraps markup.
========================================================= */
.header-nav ul,
.header-nav ol{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.header-nav li{
  margin: 0;
  padding: 0;
}

.header-nav a{
  color: #e9eef5;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;

  padding: 9px 13px;
  border-radius: 14px;
  display: inline-block;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 6px 18px rgba(0,0,0,.35);
}

.header-nav a:hover,
.header-nav a:focus{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

/* current page state (Concrete varies) */
.header-nav li.nav-selected > a,
.header-nav li.current > a,
.header-nav li.active > a{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.22);
}

/* CTA zone */
.header-cta{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 160px;
}

/* Orange CTA button */
.btn{
  display: inline-block;
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  border: 0;
}

.btn-orange{
  color: #fff;
  background: linear-gradient(#ffab3a, #f07a1a);
  border: 1px solid rgba(0,0,0,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 10px 18px rgba(0,0,0,.35);
}

.btn-orange:hover{ filter: brightness(1.03); }
.btn-orange:active{
  transform: translateY(1px);
  filter: brightness(.98);
}

/* =========================================================
   MOBILE HAMBURGER (YOUR .nav-toggle + footer.php script)
========================================================= */
.nav-toggle{
  display: none; /* hidden on desktop */
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: #e9eef5;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 18px rgba(0,0,0,.35);
}

.nav-toggle-icon{
  font-size: 16px;
  line-height: 1;
}

/* Mobile layout + dropdown */
@media (max-width: 820px){

  .header-inner{
    grid-template-columns: 1fr auto; /* logo | CTA */
    grid-template-areas:
      "logo cta"
      "toggle toggle"
      "nav nav";
    row-gap: 12px;
  }

  .header-logo{ grid-area: logo; }
  .header-cta{ grid-area: cta; min-width: 0; }
  .nav-toggle{ grid-area: toggle; display: inline-flex; justify-self: start; }
  .header-nav{ grid-area: nav; justify-content: flex-start; }

  /* Hide nav list by default on mobile */
  .header-nav ul,
  .header-nav ol{
    display: none;
    white-space: normal;
  }

  /* When opened, show dropdown list */
  .site-header.is-nav-open .header-nav ul,
  .site-header.is-nav-open .header-nav ol{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;

    margin: 10px 0 0;
    padding: 12px;

    border-radius: 14px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.10);
  }

  /* Full width dropdown links */
  .site-header.is-nav-open .header-nav a{
    width: 100%;
    text-align: left;
    box-sizing: border-box;
  }
}

/* Optional: let pills wrap on narrow desktops instead of exploding */
@media (max-width: 1100px){
  .header-nav ul,
  .header-nav ol{
    flex-wrap: wrap;
    white-space: normal;
    justify-content: flex-start;
  }
}
/* =========================================================
   HERO — CONTENT BLOCK BG (height controlled by your IMG inline style)
   FIXED:
   - Hero does NOT collapse in edit mode (bg stays IN FLOW always)
   - Left/Right stay editable
   - Background stays editable (click empty space behind text/buttons)
   - NO fixed hero height in CSS
========================================================= */

.hero.hero--home{
  position: relative;
  overflow: hidden;
  background: #0b0f14;
}

/* BG stays IN FLOW so the content-block image height controls hero height */
.hero.hero--home .hero-bg{
  position: relative !important;
  z-index: 1 !important;
  pointer-events: none; /* normal mode: don't steal clicks */
}

/* DO NOT fight inline height. Let your <img style="height:500px"> win. */
.hero.hero--home .hero-bg img{
  display: block !important;
  width: 100% !important;
  height: auto !important;      /* inline height overrides */
  max-width: 100% !important;
  pointer-events: none !important;
}

/* Overlay above bg, below content */
.hero.hero--home::after{
  content:"";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0,0,0,.35);
  pointer-events: none !important;
}

/* Content on top of bg/overlay */
.hero.hero--home .hero-inner{
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  max-width: 1200px;
  margin: 0 auto;
  left: 0;
  right: 0;
  padding: 22px 18px 0;   /* text near the top */
  pointer-events: none !important; /* wrapper never blocks clicks */
}
/* ✅ DESKTOP FIX: keep hero content centered and prevent right-bleed */
.hero.hero--home .hero-inner{
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Extra safety: prevent the CTA stack from ever exceeding its column */
.hero.hero--home .hero-right,
.hero.hero--home .hero-cta,
.hero.hero--home .hero-cta .hero-btn{
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Only actual editable chrome is clickable */
.hero.hero--home .hero-inner .ccm-area,
.hero.hero--home .hero-inner .ccm-block,
.hero.hero--home .hero-inner .ccm-block-content{
  pointer-events: auto !important;
  position: relative;
  z-index: 6 !important;
}

/* Layout (header.php uses .hero-grid) */
.hero.hero--home .hero-grid{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
}

.hero.hero--home .hero-left{
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  position: relative;
  z-index: 7 !important;
}

.hero.hero--home .hero-right{
  flex: 0 0 340px;
  min-width: 0;
  position: relative;
  z-index: 8 !important; /* keep right above left */
}

/* Prevent any full-width edit chrome from hero-left covering hero-right */
.hero.hero--home .hero-left .ccm-area,
.hero.hero--home .hero-left .ccm-area-block-list,
.hero.hero--home .hero-left .ccm-block{
  max-width: 100% !important;
}

@media (max-width: 980px){
  .hero.hero--home .hero-grid{
    flex-direction: column;
    align-items: flex-start;
  }
  .hero.hero--home .hero-right{
    width: 100%;
    flex: 1 1 auto;
  }
}

/* =========================================================
   EDIT MODE: make BG clickable AND keep left/right editable
   (critical: DO NOT take bg out of flow, or hero height collapses)
========================================================= */

html.ccm-edit-mode .hero.hero--home .hero-bg,
body.ccm-edit-mode .hero.hero--home .hero-bg{
  pointer-events: auto !important;  /* bg editable */
  z-index: 1 !important;           /* stays behind content */
}

html.ccm-edit-mode .hero.hero--home .hero-bg img,
body.ccm-edit-mode .hero.hero--home .hero-bg img{
  pointer-events: none !important; /* click hits the Area chrome, not the img */
}

/* Keep hero content editable */
html.ccm-edit-mode .hero.hero--home .hero-inner,
body.ccm-edit-mode .hero.hero--home .hero-inner{
  z-index: 50 !important;
  pointer-events: none !important; /* wrapper doesn’t block */
}

html.ccm-edit-mode .hero.hero--home .hero-inner .ccm-area,
html.ccm-edit-mode .hero.hero--home .hero-inner .ccm-block,
html.ccm-edit-mode .hero.hero--home .hero-inner .ccm-block-content,
body.ccm-edit-mode .hero.hero--home .hero-inner .ccm-area,
body.ccm-edit-mode .hero.hero--home .hero-inner .ccm-block,
body.ccm-edit-mode .hero.hero--home .hero-inner .ccm-block-content{
  pointer-events: auto !important;
  z-index: 60 !important;
}

/* Extra force for HERO RIGHT */
html.ccm-edit-mode .hero.hero--home .hero-right,
body.ccm-edit-mode .hero.hero--home .hero-right{
  z-index: 200 !important;
}
html.ccm-edit-mode .hero.hero--home .hero-right .ccm-area,
html.ccm-edit-mode .hero.hero--home .hero-right .ccm-block,
html.ccm-edit-mode .hero.hero--home .hero-right .ccm-block-content,
html.ccm-edit-mode .hero.hero--home .hero-right .ccm-area *,
body.ccm-edit-mode .hero.hero--home .hero-right .ccm-area,
body.ccm-edit-mode .hero.hero--home .hero-right .ccm-block,
body.ccm-edit-mode .hero.hero--home .hero-right .ccm-block-content,
body.ccm-edit-mode .hero.hero--home .hero-right .ccm-area *{
  pointer-events: auto !important;
  z-index: 210 !important;
}
/* ===== HERO RIGHT CTA BUTTONS (FIX: real sans-serif + clickable + hover) ===== */

.hero-cta{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:100%;
  max-width:220px;
  margin-left:auto;
  margin-top:6px;
}

/* IMPORTANT: force site sans-serif, not whatever the hero copy is using */
.hero-cta .hero-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:16px 18px;

  /* force sans */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-weight:700;
  font-size:18px;
  letter-spacing:.2px;

  color:#fff;
  text-decoration:none !important;

  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 18px rgba(0,0,0,.28);

  cursor:pointer !important;
  pointer-events:auto !important;

  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* hover */
.hero-cta .hero-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.10);
  box-shadow: 0 16px 28px rgba(0,0,0,.38);
}

/* active */
.hero-cta .hero-btn:active{
  transform: translateY(0px);
  filter: brightness(.98);
}

/* focus */
.hero-cta .hero-btn:focus-visible{
  outline: 3px solid rgba(255,255,255,.55);
  outline-offset: 3px;
}

/* Color variants */
.hero-cta .hero-btn--gold{
  background: linear-gradient(180deg, #b07a2a, #8f5f1f);
}

.hero-cta .hero-btn--rust{
  background: linear-gradient(180deg, #7d2f2a, #5b1f1c);
}

.hero-cta .hero-btn--slate{
  background: linear-gradient(180deg, #2f3a46, #1f2730);
}
/* ===== HERO MOBILE FIX (REPLACE ENTIRE OLD BLOCK WITH THIS) ===== */
@media (max-width: 980px){

  /* Hero container */
  .hero.hero--home{
    position: relative !important;
    overflow: hidden !important;
    background: #0b0f14 !important;
  }

  /* Background image size (adjust this height if you want) */
  .hero.hero--home .hero-bg img{
    width: 100% !important;
    height: 430px !important;
    object-fit: cover !important;
    display: block !important;
    max-width: 100% !important;
  }

  /* Keep content OVER image */
  .hero.hero--home .hero-inner{
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    pointer-events: none !important;
  }

  /* Allow clicking blocks */
  .hero.hero--home .hero-inner .ccm-area,
  .hero.hero--home .hero-inner .ccm-block,
  .hero.hero--home .hero-inner .ccm-block-content{
    pointer-events: auto !important;
  }

  /* Stack layout */
  .hero.hero--home .hero-grid{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  /* Text */
  .hero.hero--home .hero-left h1{
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: 1.05 !important;
    margin: 0 !important;
  }
  .hero.hero--home .hero-left p{
    font-size: 16px !important;
    line-height: 1.35 !important;
    margin-top: 10px !important;
  }

  /* Right column full width */
  .hero.hero--home .hero-right{
    width: 100% !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-top: 10px !important;
    box-sizing: border-box !important;
  }

  /* Concrete wrappers: remove sneaky offsets */
  .hero.hero--home .hero-right .ccm-area,
  .hero.hero--home .hero-right .ccm-area .ccm-area-block-list,
  .hero.hero--home .hero-right .ccm-block,
  .hero.hero--home .hero-right .ccm-block-content{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* ✅ REAL FIX: center the CTA STACK (your actual class is .hero-cta) */
  .hero.hero--home .hero-cta{
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;          /* centers the whole stack */
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  /* ✅ REAL FIX: buttons fit + are centered (your actual class is .hero-btn) */
  .hero.hero--home .hero-cta .hero-btn{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
}
/* ===== HOME SPONSOR LOGOS ===== */

.home-sponsors{ padding:12px 0 18px; text-align:center !important; }

.home-sponsors__label{
  display:block; width:100%; text-align:center !important;
  font-family:"Trebuchet MS","Segoe UI",Arial,Helvetica,sans-serif;
  color:rgba(255,255,255,.86);
  font-weight:900; font-size:12px;
  letter-spacing:2px; text-transform:uppercase;
  margin:0 0 10px;
}

.home-sponsors__marquee{ width:100%; overflow:hidden; position:relative; }

.home-sponsors__track{
  display:flex; flex-wrap:nowrap; align-items:center;
  width:max-content;
  will-change:transform;
  animation:none !important;
  transform:translate3d(0,0,0);
}

.sponsor-set{
  display:flex;
  align-items:center;
  gap:64px;
  white-space:nowrap;
}

/* ✅ fixed-width "slots" so spacing is consistent regardless of PNG padding */
.home-sponsors__logoLink{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:240px;     /* tweak: 220 tighter, 260 looser */
  height:72px;

  opacity:.95;
  text-decoration:none;
  transition:transform .15s ease, opacity .15s ease;
}
.home-sponsors__logoLink:hover{ opacity:1; transform:translateY(-1px); }

/* ✅ scale-to-fit inside the slot (true centering) */
.home-sponsors__logo{
  max-height:64px;
  max-width:210px;
  height:auto;
  width:auto;
  display:block;
  filter:grayscale(100%) brightness(1.6);
}

@media (max-width:480px){
  .sponsor-set{ gap:42px; }
  .home-sponsors__logoLink{ width:200px; height:60px; }
  .home-sponsors__logo{ max-height:48px; max-width:180px; }
}

/* =========================================================
   RIGHT RAIL ADS (300px rail + 300px ad units + single clean frame)
   Paste this as ONE block at the bottom of main.css
========================================================= */

/* Lock the right rail column to true ad width */
.site-rail{
  flex: 0 0 300px !important;
}
.site-rail *{
  box-sizing: border-box;
}

/* Constrain the Concrete Image Slider containers to 300px */
.site-rail .ccm-image-slider-container,
.site-rail .ccm-image-slider,
.site-rail .ccm-image-slider-inner,
.site-rail .ccm-image-slider .ccm-image-slider-slide{
  max-width: 300px !important;
}

/* Force slider images to render at true 300px width */
.site-rail .ccm-image-slider .ccm-image-slider-slide img{
  width: 300px !important;
  max-width: 300px !important;
  height: auto !important;
  display: block !important;
  border-radius: 10px;
}

/* Frame ONLY the outer container (prevents double rounded boxes) */
.site-rail .ccm-image-slider-container{
  padding: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.35);
  margin-bottom: 16px;
}

/* Make inner slider clean/flat */
.site-rail .ccm-image-slider{
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* === Sponsor strip must always sit on a dark band (logged in OR not) === */
.home-sponsors{
  background: #0b0f14;
  padding: 14px 0 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* keep the label readable */
.home-sponsors__label{
  color: rgba(255,255,255,.86);
}

}

/* ===== HOME PLACEHOLDERS: Featured Events (match site fonts) ===== */

.home-featured,
.home-featured *{
  font-family: "Trebuchet MS", "Segoe UI", Arial, Helvetica, sans-serif;
}

.home-card{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.10);
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  padding: 16px;
}

.home-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.home-card__title{
  margin:0;
  font-size: 22px;
  font-weight: 900;
  color:#111827;
}

.home-card__controls{
  display:flex;
  gap: 8px;
}

.home-arrow{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #f97316;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}
.home-arrow:active{ transform: translateY(1px); }

.featured-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.event-card{
  display:block;
  text-decoration:none;
  color: inherit;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}

.event-card__img{
  height: 64px;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.05));
}

.event-card__meta{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(0,0,0,.06);
  font-size: 12px;
  font-weight: 800;
}

.event-card__body{
  padding: 10px 12px 12px;
}

.event-card__name{
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 4px;
  color:#111827;
}

.event-card__city{
  font-size: 13px;
  font-weight: 700;
  color:#374151;
  margin-bottom: 6px;
}

.event-card__mini{
  font-size: 12px;
  color:#6b7280;
}

@media (max-width: 980px){
  .featured-grid{ grid-template-columns: 1fr; }
}
/* ===== HOME PLACEHOLDERS: Job Listings (match site fonts + tighter rows) ===== */

/* Space between Featured Events and Job Listings */
.home-featured{ margin-bottom: 18px; }

/* Match site font */
.home-jobs,
.home-jobs *{
  font-family: "Trebuchet MS", "Segoe UI", Arial, Helvetica, sans-serif;
}

.home-jobs__title{
  margin:0;
  font-size: 22px;
  font-weight: 900;
  color:#111827;
}

.home-jobs__grid{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  align-items:start;
  margin-top: 10px;
}

.jobs-list{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  overflow: hidden;
  background:#fff;
}

/* ✅ Job rows: title + city stacked tightly */
.job-row{
  display:block;                 /* was flex */
  padding: 10px 14px;
  text-decoration:none;
  color: inherit;
  border-top: 1px solid rgba(0,0,0,.08);
}
.job-row:first-child{ border-top: 0; }

.job-row__title{
  display:block;
  font-weight: 900;
  color:#111827;
  line-height: 1.05;
  margin: 0;
}

.job-row__meta{
  display:block;
  margin-top: 2px;               /* tiny gap so they feel connected */
  color:#6b7280;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.05;
}

.job-row:hover{
  background: rgba(0,0,0,.03);
}

.jobs-cta{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background:#fff;
  padding: 14px;
}

.jobs-cta__title{
  font-weight: 900;
  font-size: 15px;
  color:#111827;
  margin-bottom: 10px;
}

.jobs-cta__btn{
  display:flex;
  align-items:center;
  justify-content:center;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(#ffab3a, #f07a1a);
  color:#fff;
  font-weight: 900;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 18px rgba(0,0,0,.20);
  margin-bottom: 12px;
}

.jobs-cta__mini{
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 10px;
  color:#374151;
  font-size: 13px;
}

.jobs-cta__miniTitle{
  font-weight: 900;
  margin-bottom: 8px;
  color:#111827;
}

.jobs-cta__miniRow{
  display:flex;
  gap: 8px;
  margin: 6px 0;
}
.jobs-cta__miniRow strong{
  width: 80px;
  color:#111827;
}

@media (max-width: 980px){
  .home-jobs__grid{
    grid-template-columns: 1fr;
  }
}
/* HARD TIGHTEN: make city hug the job title */
.jobs-list .job-row__title{
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.jobs-list .job-row__meta{
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  top: -6px;          /* <-- pulls city up closer */
}


/* Space between sponsor band and the white content cards */
.site-shell{
  padding-top: 22px;
}

/* ===== Footer (black like mockup) ===== */
.site-footer{
  background: #0b0f14;
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 18px 0 20px;
}

.footer-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
  font-family: "Trebuchet MS", "Segoe UI", Arial, Helvetica, sans-serif;
}

.footer-links{
  display:flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}

.footer-link{
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
}

.footer-link:hover{
  color: #ffffff;
  text-decoration: underline;
}

.footer-bottom{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  color: rgba(255,255,255,.68);
  font-size: 12px;
}

.footer-dot{
  opacity: .6;
  margin: 0 6px;
}

/* =========================================================
   NAV DROPDOWN (Concrete Auto-Nav children)
   - Normal UX: hover -> move down -> click (no vanish gap)
   - Two columns
   - Scrollable (visible scrollbar)
========================================================= */

.header-nav,
.header-inner{ overflow: visible; }

.header-nav li{ position: relative; }

/* Bigger hover target */
.header-nav > ul > li > a,
.header-nav > ol > li > a{ padding: 11px 16px; }

/* Caret on items that have children */
.header-nav li:has(> ul) > a::after{
  content: " ▾";
  font-weight: 900;
}

/* Dropdown base (NO gap under the pill) */
.header-nav li > ul{
  display: none !important;
  position: absolute;
  top: 100%;                 /* ✅ touches the pill (no dead air) */
  left: 0;
  z-index: 99999;

  min-width: 420px;
  max-width: 520px;

  max-height: calc(100vh - 180px);
  overflow-y: auto;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  margin: 0;
  list-style: none;

  background: rgba(11,15,20,.98);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  box-shadow: 0 18px 34px rgba(0,0,0,.55);

  /* ✅ create visual space INSIDE menu instead of moving it down */
  padding: 22px 12px 12px;   /* top padding = “gap” you wanted */

  /* Two columns */
  display: none !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;

  /* visible scroll hint */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) rgba(255,255,255,.06);
}

.header-nav li > ul::-webkit-scrollbar{ width: 10px; }
.header-nav li > ul::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 10px;
}
.header-nav li > ul::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.25);
  border-radius: 10px;
}

/* Show on hover (desktop) */
@media (hover: hover){
  .header-nav li:hover > ul{
    display: grid !important;
  }
}

/* Also allow click-to-open (your JS adds .is-open) */
.header-nav li.is-open > ul{
  display: grid !important;
}

/* Dropdown items */
.header-nav li > ul li{ margin: 0; padding: 0; break-inside: avoid; }

.header-nav li > ul a{
  display: block;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-weight: 900;
  font-size: 13px;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
}
.header-nav li > ul a:hover{ background: rgba(255,255,255,.10); }

/* Mobile: nested lists inline in hamburger menu */
@media (max-width: 820px){
  .header-nav li > ul{
    position: static;
    display: none !important;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .site-header.is-nav-open .header-nav li > ul{
    display: block !important;
    margin-left: 10px;
    margin-top: 6px;
  }

  .header-nav li:has(> ul) > a::after{ content:""; }
}
/* ===== HOME PLACEHOLDER: Map card ===== */
.home-map .home-map__link{
  display: block;
  text-decoration: none;
}

.home-map .home-map__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px; /* matches cards */
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/* =========================================================
   EDIT MODE: keep sponsor strip visible, but stop marquee behavior
   (prevents editor freezing + still lets you edit the Global Area)
========================================================= */
html.ccm-toolbar-visible .home-sponsors__marquee{
  overflow: visible !important; /* let Concrete overlays work */
}

html.ccm-toolbar-visible .home-sponsors__track{
  transform: none !important;   /* no translate3d while editing */
  animation: none !important;
}

html.ccm-toolbar-visible .sponsor-set.clone{
  display: none !important;     /* hide clones (only for ticker) */
}
/* =========================
   Submit an Event Form
========================= */
.ccm-dashboard-express-form {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 22px;
  padding: 34px 28px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.06);
}

.ccm-dashboard-express-form fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.ccm-dashboard-express-form legend {
  display: block;
  width: 100%;
  margin: 0 0 26px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 46px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: #111827;
}

.ccm-dashboard-express-form .mb-3 {
  margin-bottom: 20px;
}

.ccm-dashboard-express-form label,
.ccm-dashboard-express-form .form-label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 800;
  color: #1f2937;
}

.ccm-dashboard-express-form input[type="text"],
.ccm-dashboard-express-form input[type="email"],
.ccm-dashboard-express-form input[type="url"],
.ccm-dashboard-express-form input[type="tel"],
.ccm-dashboard-express-form input[type="number"],
.ccm-dashboard-express-form input[type="date"],
.ccm-dashboard-express-form select,
.ccm-dashboard-express-form textarea {
  width: 100%;
  max-width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  border: 1px solid #d7dce2;
  border-radius: 14px;
  background: #fff;
  font-size: 16px;
  line-height: 1.4;
  color: #111827;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.ccm-dashboard-express-form textarea {
  min-height: 150px;
  resize: vertical;
}

.ccm-dashboard-express-form input[type="text"]:focus,
.ccm-dashboard-express-form input[type="email"]:focus,
.ccm-dashboard-express-form input[type="url"]:focus,
.ccm-dashboard-express-form input[type="tel"]:focus,
.ccm-dashboard-express-form input[type="number"]:focus,
.ccm-dashboard-express-form input[type="date"]:focus,
.ccm-dashboard-express-form select:focus,
.ccm-dashboard-express-form textarea:focus {
  outline: none;
  border-color: #d9842b;
  box-shadow: 0 0 0 4px rgba(217, 132, 43, 0.12);
  background: #fff;
}

.ccm-dashboard-express-form select {
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% - 3px),
    calc(100% - 14px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.ccm-dashboard-express-form .form-check {
  margin: 0 0 10px;
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ccm-dashboard-express-form .form-check input[type="checkbox"],
.ccm-dashboard-express-form .form-check input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #d9842b;
  flex: 0 0 auto;
}

.ccm-dashboard-express-form .form-check label {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.ccm-dashboard-express-form input[type="file"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d7dce2;
  border-radius: 14px;
  background: #fff;
  font-size: 15px;
  color: #111827;
  box-sizing: border-box;
}

.ccm-dashboard-express-form input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.ccm-dashboard-express-form input[type="file"]::-webkit-file-upload-button {
  margin-right: 14px;
  padding: 10px 14px;
  border: 0;
  border-radius: 10px;
  background: #111827;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.ccm-dashboard-express-form button[type="submit"],
.ccm-dashboard-express-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 24px;
  border: 0;
  border-radius: 14px;
  background: #d9842b;
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(217, 132, 43, 0.22);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.ccm-dashboard-express-form button[type="submit"]:hover,
.ccm-dashboard-express-form input[type="submit"]:hover {
  opacity: 0.96;
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(217, 132, 43, 0.28);
}

.ccm-dashboard-express-form button[type="submit"]:active,
.ccm-dashboard-express-form input[type="submit"]:active {
  transform: translateY(0);
}

.ccm-dashboard-express-form img.ccm-captcha-image,
.ccm-dashboard-express-form .ccm-captcha-image {
  display: block;
  margin: 10px 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.ccm-dashboard-express-form .help-block,
.ccm-dashboard-express-form .form-text,
.ccm-dashboard-express-form small {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: #6b7280;
}

@media (max-width: 768px) {
  .ccm-dashboard-express-form {
    padding: 24px 18px;
    border-radius: 18px;
  }

  .ccm-dashboard-express-form legend {
    font-size: 36px;
  }

  .ccm-dashboard-express-form input[type="text"],
  .ccm-dashboard-express-form input[type="email"],
  .ccm-dashboard-express-form input[type="url"],
  .ccm-dashboard-express-form input[type="tel"],
  .ccm-dashboard-express-form input[type="number"],
  .ccm-dashboard-express-form input[type="date"],
  .ccm-dashboard-express-form select,
  .ccm-dashboard-express-form textarea {
    min-height: 50px;
    font-size: 16px;
  }
}

/* Cookie Banner */
.opc-cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  background: #111;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border-radius: 14px;
}

.opc-cookie-banner[hidden] {
  display: none !important;
}

.opc-cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
}

.opc-cookie-banner__text strong {
  display: block;
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.2;
}

.opc-cookie-banner__text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.86);
}

.opc-cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.opc-cookie-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.opc-cookie-btn--primary {
  background: #f2b233;
  color: #111;
}

.opc-cookie-btn--secondary {
  background: rgba(255,255,255,.12);
  color: #fff;
}

.opc-cookie-btn--link {
  background: transparent;
  color: #f2b233;
  text-decoration: underline;
  padding-left: 4px;
  padding-right: 4px;
}

@media (max-width: 820px) {
  .opc-cookie-banner {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .opc-cookie-banner__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .opc-cookie-banner__actions {
    width: 100%;
  }
}
/* Cookie Modal */
.opc-cookie-modal[hidden] {
  display: none !important;
}

.opc-cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
}

.opc-cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
}

.opc-cookie-modal__dialog {
  position: relative;
  z-index: 2;
  width: min(680px, calc(100% - 24px));
  margin: 6vh auto 0;
  background: #111;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  padding: 24px;
}

.opc-cookie-modal__dialog h3 {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.2;
  color: #fff;
}

.opc-cookie-modal__intro {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
}

.opc-cookie-modal__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  position: absolute;
  top: 14px;
  right: 14px;
}

.opc-cookie-group {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  background: rgba(255,255,255,.04);
}

.opc-cookie-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.opc-cookie-group__head span {
  font-size: 13px;
  font-weight: 700;
  color: #f2b233;
}

.opc-cookie-group p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.82);
}

.opc-cookie-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.opc-cookie-toggle strong {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
}

.opc-cookie-toggle small {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
}

.opc-cookie-toggle input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.opc-cookie-modal__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .opc-cookie-modal__dialog {
    margin-top: 20px;
    padding: 20px;
  }

  .opc-cookie-modal__dialog h3 {
    font-size: 22px;
  }

  .opc-cookie-toggle {
    align-items: flex-start;
  }
}
.opc-footer-cookie-link-wrap {
  margin-top: 10px;
  text-align: center;
}

.opc-footer-cookie-link {
  appearance: none;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.opc-footer-cookie-link:hover,
.opc-footer-cookie-link:focus {
  color: #f2b233;
}

/* AI CHAT BOT */
/* AI CHAT BOT */
#opc-chat-widget {
  position: fixed;
  right: 0;
  bottom: 20px;
  z-index: 10001;
  display: block;
}

#opc-chat-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #10233d;
  color: #ffffff;
  border: none;
  border-radius: 14px 0 0 14px;
  padding: 16px 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-rl;
  min-height: 150px;
  letter-spacing: 0.5px;
}

#opc-chat-toggle:hover {
  opacity: 0.95;
}

#opc-chat-toggle:focus {
  outline: none;
}

#opc-chat-panel {
  position: fixed;
  right: 54px;
  bottom: 20px;
  width: 340px;
  max-width: calc(100vw - 80px);
  max-height: 70vh;
  background: #ffffff;
  border: 1px solid #d9dde3;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  z-index: 10000;
  display: none;
}

.opc-chat-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #10233d;
  color: #ffffff;
  padding: 14px 16px;
}

.opc-chat-panel__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

#opc-chat-close {
  background: transparent;
  color: #ffffff;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.opc-chat-panel__body {
  padding: 16px;
}

.opc-chat-panel__body p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: #24364d;
}

#opc-chat-messages {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 220px;
  overflow-y: auto;
}

.opc-chat-message {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 100%;
  word-wrap: break-word;
}

.opc-chat-message--bot {
  background: #f3f6fa;
  color: #24364d;
  border: 1px solid #d9dde3;
}

.opc-chat-message--user {
  background: #10233d;
  color: #ffffff;
  margin-left: auto;
}

#opc-chat-form {
  display: flex;
  gap: 10px;
  align-items: center;
}

#opc-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #d9dde3;
  border-radius: 10px;
  font-size: 14px;
  color: #24364d;
  background: #ffffff;
  outline: none;
  box-sizing: border-box;
}

#opc-chat-input:focus {
  border-color: #10233d;
  box-shadow: 0 0 0 3px rgba(16, 35, 61, 0.12);
}

#opc-chat-send {
  height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: #10233d;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
  -webkit-appearance: none;
  appearance: none;
}

#opc-chat-send:hover {
  opacity: 0.95;
}
/* MOBILE */
@media (max-width: 768px) {
  #opc-chat-widget {
    right: 6px;
    bottom: 38px;
    z-index: 10001;
  }

  #opc-chat-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: none;
    min-height: 130px;
    height: auto;
    padding: 14px 12px;
    font-size: 15px;
    border-radius: 14px 0 0 14px;
  }

  #opc-chat-panel {
    left: 12px;
    right: 12px;
    bottom: 140px;
    width: auto;
    max-width: none;
    max-height: 62vh;
    border-radius: 16px;
    z-index: 10002;
  }

  #opc-chat-messages {
    max-height: 180px;
  }

  .opc-chat-panel__body {
    padding: 14px;
  }

  #opc-chat-form {
    gap: 8px;
  }

  #opc-chat-input {
    font-size: 16px;
  }

  #opc-chat-send {
    flex: 0 0 auto;
    padding: 0 14px;
  }
}