/* ============================================================
   STAPHYLOCOCCI MEET-2027 — COLOR VARIABLES
   Same light-purple palette used across the conference website
   ============================================================ */

:root {

  /* Brand */
  --staph-primary: #7024AA;
  --staph-primary-dark: #67209C;
  --staph-primary-deep: #69209D;
  --staph-primary-hover: #7223A7;
  --staph-primary-accent: #7526AD;
  --staph-primary-light: #9A59C9;
  --staph-primary-gradient: #8B3FC0;
  --staph-primary-nav: #6F25A5;

  /* Text */
  --staph-text: #18213D;
  --staph-heading: #17213C;
  --staph-nav-text: #222940;
  --staph-kicker: #303951;
  --staph-label: #343C52;
  --staph-time: #252D43;
  --staph-muted: #60677B;

  /* Neutral */
  --staph-white: #FFFFFF;
  --white: var(--staph-white);

  /* Soft backgrounds */
  --staph-soft-purple: rgba(116, 41, 170, 0.10);
  --staph-soft-lavender: rgba(215, 185, 244, 0.25);
  --staph-soft-lavender-light: rgba(170, 110, 218, 0.03);
  --staph-white-overlay: rgba(255, 255, 255, 0.38);
  --staph-white-overlay-light: rgba(255, 255, 255, 0.08);
  --staph-white-overlay-min: rgba(255, 255, 255, 0.02);
  --staph-white-glass: rgba(255, 255, 255, 0.60);
  --staph-white-button: rgba(255, 255, 255, 0.50);

  /* Borders */
  --staph-border-soft: rgba(103, 42, 157, 0.08);
  --staph-border-event: rgba(108, 46, 157, 0.12);
  --staph-border-divider: rgba(105, 41, 153, 0.20);
  --staph-border-divider-mobile: rgba(105, 41, 153, 0.15);

  /* Shadows */
  --staph-shadow-nav: rgba(102, 32, 153, 0.18);
  --staph-shadow-nav-hover: rgba(102, 32, 153, 0.28);
  --staph-shadow-soft: rgba(86, 37, 130, 0.07);
  --staph-shadow-primary: rgba(103, 31, 157, 0.20);
  --staph-shadow-primary-hover: rgba(103, 31, 157, 0.28);

  /* Existing compatibility variables */
  --base-deep: var(--staph-primary-deep);
  --base-mid: var(--staph-primary);
  --base-soft: var(--staph-primary-light);

  --primary: var(--staph-primary);
  --primary-dark: var(--staph-primary-dark);
  --primary-light: var(--staph-primary-light);
  --primary-soft: var(--staph-soft-lavender);

  --paper: var(--staph-white);
  --paper-raised: var(--staph-white);

  --ink-soft: var(--staph-muted);

  --terracotta: var(--staph-primary-light);

  --violet-dim: var(--staph-primary);
  --violet-tint: var(--staph-soft-purple);

  --bronze: var(--staph-primary-light);

  --line: var(--staph-border-event);
  --line-strong: var(--staph-border-divider);

  --shadow:
    0 10px 34px var(--staph-shadow-nav);

  --max: 1240px;

  --radius: 8px;
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {

  position: sticky;

  top: 0;

  z-index: 50;

  background: var(--white);

  backdrop-filter: blur(14px);

  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid var(--staph-border-event);

  box-shadow:
    0 4px 24px var(--staph-shadow-nav);
}


/* ============================================================
   HEADER INNER
   ============================================================ */

.header-inner {

  max-width: var(--max);

  margin: 0 auto;

  padding: 4px 28px;

  min-height: 74px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}


/* ============================================================
   BRAND / LOGO
   ============================================================ */

.brand {

  display: flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;

  color: var(--white);
}


.brand img {

  display: block;

  width: 180px;

  height: 60px;

  max-width: 100%;

  object-fit: contain;
}


/* ============================================================
   OLD TEXT BRAND SUPPORT
   ============================================================ */

.brand-text {

  display: flex;

  flex-direction: column;

  line-height: 1.15;
}


.brand-mark {

  font-family: 'Space Grotesk', sans-serif;

  font-weight: 700;

  font-size: 1.1rem;

  letter-spacing: -0.01em;

  color: var(--white);
}


.brand-sub {

  font-family: 'IBM Plex Mono', monospace;

  font-size: .63rem;

  letter-spacing: .08em;

  color: var(--staph-white-overlay);

  text-transform: uppercase;
}


/* ============================================================
   DESKTOP NAVIGATION
   ============================================================ */

nav.primary-nav {

  display: flex;

  align-items: center;

  gap: 2px;
}


nav.primary-nav a {

  font-size: 16px;

  font-weight: 500;

  letter-spacing: .03em;

  text-transform: uppercase;

  color: var(--teal);

  text-decoration: none;

  padding: 9px 12px;

  border-radius: var(--radius);

  transition:
    color .25s ease,
    background-color .25s ease,
    transform .25s ease;
}


/* ============================================================
   NAV HOVER
   ============================================================ */

nav.primary-nav a:hover {

  color: var(--navy) !important;

  background: var(--staph-soft-purple);

}


/* ============================================================
   ACTIVE PAGE
   ============================================================ */

nav.primary-nav a.is-active {

  color: var(--navy) !important;
}


/* ============================================================
   REGISTER CTA
   ============================================================ */

.nav-cta {

  background: var(--teal) !important;

  color: #FFFFFF !important;

  padding: 9px 16px !important;

  border: 1px solid var(--teal) !important;

  border-radius: 4px !important;

  box-shadow:
    0 8px 18px var(--staph-shadow-nav);
}


.nav-cta:hover {

  background: var(--cyan) !important;

  color: var(--white) !important;

  border-color: var(--cyan) !important;

  transform: translateY(-1px);
}


/* ============================================================
   MOBILE MENU BUTTON
   ============================================================ */

.nav-toggle {

  display: none;
}


/* ============================================================
   DROPDOWN — DESKTOP
   ============================================================ */

.nav-dropdown {

  position: relative;
}


.nav-dropdown-toggle {

  display: flex;

  align-items: center;

  gap: 7px;
}


.dropdown-arrow {

  font-size: .9em;

  line-height: 1;

  transition:
    transform .2s ease;
}


.nav-dropdown:hover .dropdown-arrow {

  transform: rotate(180deg);
}


/* ============================================================
   DESKTOP DROPDOWN MENU
   ============================================================ */

.nav-dropdown-menu {

  position: absolute;

  top: 100%;

  left: 0;

  min-width: 190px;

  display: none;

  padding: 8px;

  background: white;

  border: 1px solid var(--line);

  box-shadow:
    0 14px 35px var(--staph-shadow-nav-hover);

  z-index: 100;
}


.nav-dropdown:hover .nav-dropdown-menu {

  display: block;
}


.nav-dropdown-menu a {

  display: block;

  width: 100%;

  padding: 9px 12px;

  font-family: 'IBM Plex Mono', monospace;

  font-size: .68rem !important;

  font-weight: 600 !important;

  color: var(--ink) !important;

  text-transform: uppercase;

  text-decoration: none;

  border-radius: var(--radius);

  background: transparent;
}


.nav-dropdown-menu a:hover {

  color: var(--white) !important;

  background: var(--teal);

}


/* ============================================================
   MOBILE NAVIGATION
   ============================================================ */

@media (max-width: 900px) {


  /* ----------------------------------------------------------
     HEADER
     ---------------------------------------------------------- */

  .site-header {

    position: sticky;

    top: 0;

    z-index: 9999;
  }


  .header-inner {

    position: relative;

    z-index: 10000;
  }


  /* ----------------------------------------------------------
     MENU BUTTON
     ---------------------------------------------------------- */

  .nav-toggle {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    background: transparent;

    border: 1px solid var(--cyan);

    border-radius: var(--radius);

    padding: 8px 12px;

    font-family: 'IBM Plex Mono', monospace;

    font-size: .72rem;

    letter-spacing: .06em;

    text-transform: uppercase;

    color: var(--teal);

    cursor: pointer;

    transition:
      background .2s ease,
      color .2s ease,
      border-color .2s ease;
  }


  .nav-toggle:hover {

    background: var(--staph-soft-lavender);

    color: var(--cyan);

    border-color: var(--cyan);
  }


  /* ----------------------------------------------------------
     CLOSED MOBILE MENU
     ---------------------------------------------------------- */

  nav.primary-nav {

    position: fixed !important;

    top: 82px !important;

    left: 0 !important;

    right: 0 !important;

    width: 100% !important;

    display: none !important;

    flex-direction: column !important;

    align-items: stretch !important;

    gap: 0 !important;

    margin: 0 !important;

    padding: 12px 20px 24px !important;

    background: white !important;

    border-top: 1px solid var(--line) !important;

    border-bottom: 1px solid var(--line) !important;

    box-shadow:
      0 12px 30px var(--staph-shadow-nav);

    max-height: calc(100vh - 82px) !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    z-index: 99999 !important;
  }


  /* ----------------------------------------------------------
     OPEN MOBILE MENU
     ---------------------------------------------------------- */

  nav.primary-nav.is-open {

    display: flex !important;
  }


  /* ----------------------------------------------------------
     MAIN MOBILE LINKS
     ---------------------------------------------------------- */

  nav.primary-nav > a {

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    min-height: 46px !important;

    padding: 12px 4px !important;

    margin: 0 !important;

    border-bottom: 1px solid var(--line) !important;

    color: var(--ink) !important;

    background: transparent !important;

    font-family: 'IBM Plex Mono', monospace !important;

    font-size: .68rem !important;

    font-weight: 600 !important;

    letter-spacing: .05em !important;

    line-height: 1.4 !important;

    text-transform: uppercase !important;

    text-decoration: none !important;

    transition:
      color .2s ease,
      background-color .2s ease;
  }


  nav.primary-nav > a:hover {

    color: var(--teal) !important;

    background: var(--staph-soft-lavender) !important;
  }


  nav.primary-nav > a.is-active {

    color: var(--teal) !important;
  }


  /* ----------------------------------------------------------
     MOBILE REGISTER BUTTON
     ---------------------------------------------------------- */

  nav.primary-nav > a.nav-cta {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    margin-top: 16px !important;

    padding: 11px 16px !important;

    background: var(--teal) !important;

    color: var(--white) !important;

    border: 1px solid var(--teal) !important;

    text-align: center !important;
  }


  nav.primary-nav > a.nav-cta:hover {

    background: var(--cyan) !important;

    border-color: var(--cyan) !important;

    color: var(--white) !important;
  }


  /* ==========================================================
     MOBILE DROPDOWN
     ========================================================== */

  nav.primary-nav .nav-dropdown {

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
  }


  /* ----------------------------------------------------------
     DROPDOWN TOGGLE
     ---------------------------------------------------------- */

  nav.primary-nav .nav-dropdown-toggle {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    width: 100% !important;

    min-height: 46px !important;

    padding: 12px 4px !important;

    border-bottom: 1px solid var(--line) !important;

    color: var(--ink) !important;

    background: transparent !important;

    font-family: 'IBM Plex Mono', monospace !important;

    font-size: .68rem !important;

    letter-spacing: .05em !important;

    text-transform: uppercase !important;

    text-decoration: none !important;

    transition:
      color .2s ease,
      background-color .2s ease;
  }


  nav.primary-nav .nav-dropdown-toggle:hover {

    color: var(--teal) !important;

    background: var(--staph-soft-lavender) !important;
  }


  /* ----------------------------------------------------------
     MOBILE DROPDOWN MENU
     ---------------------------------------------------------- */

  nav.primary-nav .nav-dropdown-menu {

    position: static !important;

    display: none !important;

    width: 100% !important;

    min-width: 0 !important;

    margin: 0 !important;

    padding: 4px 0 8px 14px !important;

    transform: none !important;

    background: var(--pale) !important;

    border: 0 !important;

    box-shadow: none !important;
  }


  /* ----------------------------------------------------------
     OPEN DROPDOWN
     ---------------------------------------------------------- */

  nav.primary-nav .nav-dropdown.is-open .nav-dropdown-menu {

    display: block !important;
  }


  /* ----------------------------------------------------------
     PREVENT HOVER OPENING ON MOBILE
     ---------------------------------------------------------- */

  nav.primary-nav .nav-dropdown:hover .nav-dropdown-menu {

    display: none !important;
  }


  nav.primary-nav .nav-dropdown.is-open:hover .nav-dropdown-menu {

    display: block !important;
  }


  /* ----------------------------------------------------------
     MOBILE DROPDOWN LINKS
     ---------------------------------------------------------- */

  nav.primary-nav .nav-dropdown-menu a {

    display: block !important;

    width: 100% !important;

    padding: 10px 12px !important;

    border-bottom: 1px solid var(--line) !important;

    color: var(--staph-muted) !important;

    font-family:
      'Cormorant Garamond',
      Georgia,
      serif !important;

    font-size: 16px !important;

    font-weight: 500 !important;

    line-height: 1.4 !important;

    text-decoration: none !important;

    text-transform: none !important;

    background: transparent !important;
  }


  nav.primary-nav .nav-dropdown-menu a:hover {

    color: var(--teal) !important;

    background: var(--staph-soft-purple) !important;
  }

}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 480px) {


  nav.primary-nav {

    top: 76px !important;

    max-height: calc(100vh - 76px) !important;

    padding: 10px 16px 20px !important;
  }


  nav.primary-nav > a,
  nav.primary-nav .nav-dropdown-toggle {

    min-height: 44px !important;

    font-size: .62rem !important;
  }


  nav.primary-nav > a.nav-cta {

    margin-top: 14px !important;
  }


  .header-inner {

    padding: 12px 18px;
  }


  .brand img {

    width: 130px;

    height: auto;
  }

}

/* =========================================================
   PROGRAM DOWNLOAD POPUP
========================================================= */

.program-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(3, 20, 30, 0.72);
    backdrop-filter: blur(8px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.program-popup-overlay.show {
    opacity: 1;
    visibility: visible;
}


/* Popup */

.program-popup {
    position: relative;

    width: 100%;
    max-width: 470px;

    padding: 38px;

    background: #ffffff;

    border-radius: 22px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.25);

    transform: translateY(25px) scale(0.97);

    transition:
        transform 0.3s ease;
}

.program-popup-overlay.show .program-popup {
    transform: translateY(0) scale(1);
}


/* Close */

.program-popup-close {
    position: absolute;

    top: 15px;
    right: 17px;

    width: 36px;
    height: 36px;

    border: 0;
    border-radius: 50%;

    background: #f2f4f5;

    color: #172b35;

    font-size: 25px;

    line-height: 1;

    cursor: pointer;

    transition: all 0.2s ease;
}

.program-popup-close:hover {
    background: #092b3d;
    color: #ffffff;
}


/* Icon */

.program-popup-icon {
    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 16px;

    background: #eaf8fb;

    color: #7024AA;

    font-size: 24px;
}


/* Heading */

.program-popup-kicker {
    display: block;

    margin-bottom: 7px;

    color: #7024AA;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.program-popup h3 {
    margin: 0 0 10px;

    color: #092b3d;

    font-size: 27px;
    line-height: 1.2;
}

.program-popup p {
    margin: 0 0 25px;

    color: #65747b;

    font-size: 14px;
    line-height: 1.6;
}


/* Fields */

.program-field {
    margin-bottom: 17px;
}

.program-field label {
    display: block;

    margin-bottom: 7px;

    color: #17313d;

    font-size: 13px;
    font-weight: 600;
}

.program-field label span {
    color: #d33b3b;
}

.program-field input {
    width: 100%;

    height: 48px;

    padding: 0 14px;

    border: 1px solid #d9e2e5;
    border-radius: 10px;

    outline: none;

    background: #ffffff;

    color: #17313d;

    font-size: 14px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.program-field input:focus {
    border-color: #7024AA;

    box-shadow:
        0 0 0 3px rgba(8, 127, 155, 0.10);
}

.program-field input.is-invalid {
    border-color: #dc3545;
}


/* Errors */

.program-field-error {
    display: none;

    margin-top: 5px;

    color: #dc3545;

    font-size: 12px;
}

.program-field-error.show {
    display: block;
}


/* Submit */

.program-download-submit {
    width: 100%;

    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-top: 8px;

    border: 0;
    border-radius: 11px;

    background: #9A59C9;

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.program-download-submit:hover {
    background: #9A59C9;
    transform: translateY(-1px);
}

.program-download-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}


/* Mobile */

@media (max-width: 576px) {

    .program-popup {
        padding: 30px 22px;
        border-radius: 18px;
    }

    .program-popup h3 {
        font-size: 23px;
    }

}