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

:root{
  --gold: #b9842c;
  --gold-dark: #a37220;
  --text: #333;
  --muted: #6b6b6b;
  --bg: #fff;
  --border: #eee;
  
  /* --- PROMOTION SETTINGS --- */
  --promo-thumb-url: url('../promotion/workshop.jpg'); 
  --promo-thumb-mobile-url: url('../promotion/workshop-mobile.jpg');
  /* NOTE: The popup URL is now directly in the HTML img tag */
}

/* basic reset for this component */
.NNNS-hide-input { position: absolute; left: -9999px; }

/* Edge-to-edge header */
.NNNS-header {
  width: 100%;
  background: var(--bg);
  position: relative;
  z-index: 50;
  font-family: 'Nunito', sans-serif;
  height: 72px;
  padding: 0 18px;
  box-sizing: border-box;
}

/* inner container */
.NNNS-inner {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* logo */
.NNNS-logo img { display:block; height:50px; width:auto; }

/* nav */
.NNNS-nav {
  display:block;
  margin-left: auto;
}
.NNNS-menu {
  display:flex;
  gap: 20px;
  align-items:center;
  list-style:none;
  margin:0;
  padding:0;
}

/* top links */
.NNNS-link {
  color: var(--muted);
  text-decoration:none;
  font-weight:600;
  text-transform: uppercase;
  font-size: 0.92rem;
  padding: 6px 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}
.NNNS-link:hover { color: var(--gold); }

.NNNS-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background: var(--gold);
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  transition: width 0.25s ease;
}
.NNNS-link:hover::after,
.NNNS-link.active::after {
  width: 100%;
}

.NNNS-link.active { color: var(--gold); }

/* Join Now Button Animation */
.NNNS-join {
  background: var(--gold);
  color: #fff;
  padding: 0 24px;
  text-decoration:none;
  font-weight:800;
  height: 72px;
  border-radius: 0;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  margin-right: -18px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.NNNS-join::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: var(--gold-dark);
  transition: width 0.35s ease;
  z-index: -1;
}
.NNNS-join .NNNS-join-arrow {
  transition: transform 0.35s ease;
}
.NNNS-join:hover::before {
  width: 100%;
}
.NNNS-join:hover .NNNS-join-arrow {
  transform: translateX(5px);
}

/* Mega menu container */
.NNNS-megamenu { position: relative; }

.NNNS-megamenu::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 10px;
}

.NNNS-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  background: var(--bg);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 14px;
  box-sizing: border-box;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.NNNS-megamenu:hover > .NNNS-dropdown,
#nnns-courses-toggle:checked + label + .NNNS-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.NNNS-accordion { width:100%; display:block; }
.NNNS-accordion-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 10px 12px;
  font-weight:700;
  color: var(--text);
  cursor:pointer;
  border-radius: 6px;
  margin-bottom: 6px;
  transition: background .12s, color .12s;
}
.NNNS-accordion-label:hover { background: #fafafa; color: var(--gold); }
.NNNS-chev { transition: transform .18s ease, color .12s; }
.NNNS-accordion-panel {
  list-style: none;
  margin: 0 0 10px 0;
  padding-left: 10px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease-out;
}
.NNNS-dropdown input[type="radio"]:checked + label { color: var(--gold); }
.NNNS-dropdown input[type="radio"]:checked + label .NNNS-chev { transform: rotate(90deg); color: var(--gold); }
.NNNS-dropdown input[type="radio"]:checked + label + .NNNS-accordion-panel {
  max-height: 500px;
  opacity: 1;
}
.NNNS-sublink {
  display:block;
  padding: 8px 12px;
  text-decoration:none;
  color: var(--text);
  font-weight: normal;
  border-radius: 6px;
}
.NNNS-sublink:hover { background:#f7f7f7; color: var(--gold); }
.NNNS-sublink.active { color:var(--gold); font-weight:800; }
.NNNS-courses-label { display:inline-flex; align-items:center; gap:8px; }
.NNNS-caret { font-size:0.92rem; color:var(--muted); }
.NNNS-mobile-toggle { display:none; cursor:pointer; background:transparent; border:0; position:relative; z-index: 1000; width: 22px; height: 18px; }
.NNNS-hamburger { display:block; width:22px; height:2px; background:#222; box-shadow: 0 6px 0 #222, 0 -6px 0 #222; transition: transform .2s ease, box-shadow .1s ease .2s; }


/* --- PROMOTION STYLES (REVISED) --- */
.NNNS-promo-trigger {
  display: block;
  flex-grow: 1;
  max-width: 700px;
  height: 50px;
  background-image: var(--promo-thumb-url);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  margin: 0 24px;
  border: none;
}
.NNNS-promo-trigger:hover {
  opacity: 0.9;
  transform: scale(1.03);
}

.NNNS-promo-popup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.NNNS-promo-popup.is-active {
  opacity: 1;
  visibility: visible;
}

.NNNS-promo-content {
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  /* THE FIX: Let the box be flexible and constrained by the viewport */
  max-width: 90vw;
  max-height: 90vh;
  display: flex; /* Helps with image sizing */
}
.NNNS-promo-popup.is-active .NNNS-promo-content {
  transform: scale(1);
}

/* THE FIX: No longer a background image */
.NNNS-promo-link-box {
  display: block;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  overflow: hidden; /* Ensures the image corners are rounded */
  line-height: 0; /* Removes extra space below the image */
}

/* REVISED rule for the promo image */
.NNNS-promo-link-box img {
  display: block;
  /* Make the image element fill its parent container */
  width: 100%;
  height: 100%; 
  /* This is the key: scale the image down to fit, without cropping */
  object-fit: contain; 
}

/* THE FIX: Position button inside the box and style it */
.NNNS-promo-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  font-size: 20px;
  font-weight: bold;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.NNNS-promo-close:hover {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.8);
}


@media (max-width: 920px) {
  /* Allow header to grow vertically on mobile */
  .NNNS-header {
    height: auto;
    padding-bottom: 10px;
  }
  /* Allow header items to wrap to a new line */
  .NNNS-inner {
    justify-content: space-between;
    padding: 12px 18px 0 18px; /* Give some top padding */
    flex-wrap: wrap; 
  }

  .NNNS-nav { margin-left: 0; }
  .NNNS-mobile-toggle { display:block; }
  .NNNS-nav { display:none; }

  /* --- MOBILE PROMO BANNER STYLES --- */
  .NNNS-promo-trigger {
    width: 100%;
    height: 80px;
    margin: 10px 0 0 0;
    order: 3;
    background-image: var(--promo-thumb-mobile-url);
    background-size: cover; 
  }
  
  /* --- MOBILE "JOIN NOW" BUTTON STYLES --- */
  /* Remove desktop-specific styles from the button */
  .NNNS-join {
      margin-right: 0;
      height: auto; /* Let padding control the height */
      border-radius: 4px; /* Give it slightly rounded corners on mobile */
      padding: 14px 24px;
      justify-content: center; /* Center the text and arrow */
  }
  /* Style the new list item wrapper for the button */
  .NNNS-item.NNNS-join-mobile-wrapper {
      border-bottom: none; /* Remove the line under it */
      padding-top: 20px; /* Add space above the button */
  }


  #nnns-nav-toggle:checked + .NNNS-inner .NNNS-hamburger { transform: rotate(45deg); box-shadow: 0 0 0 #222, 0 0 0 #222; transition: transform .2s ease .1s, box-shadow .1s ease; }
  #nnns-nav-toggle:checked + .NNNS-inner .NNNS-hamburger::before { content: ''; display: block; width: 100%; height: 2px; background: #222; transform: rotate(-90deg); position: absolute; top: 8px; }
  #nnns-nav-toggle:checked + .NNNS-inner .NNNS-nav { display: block; position: fixed; inset: 72px 0 0 0; background: var(--bg); padding: 24px; overflow-y:auto; z-index: 999; }
  .NNNS-menu { flex-direction: column; gap: 0; align-items: stretch; }
  .NNNS-item { border-bottom: 1px solid var(--border); }
  .NNNS-item:last-child { border-bottom: 0; }
  .NNNS-link { display: block; padding: 16px 0; }
  .NNNS-link::after { bottom: 14px; }
  
  .NNNS-dropdown { position: static; box-shadow: none; padding: 10px 0 10px 15px; border-radius: 0; width: 100%; display: none; opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
  #nnns-courses-toggle:checked + label + .NNNS-dropdown { display: block; }
  .NNNS-accordion-label { padding: 12px 0; background: transparent; margin-bottom: 0; }
  .NNNS-accordion-panel { padding: 0 0 10px 10px; }
  .NNNS-sublink { padding: 10px 0; }
}