/* ==========================================================================
   Naturalistico frontend shell — v3 design
   --------------------------------------------------------------------------
   The promo bar, header and category rail of lms/layouts/learn_school.blade.php,
   ported from the naturalistico-public-v3 prototype. home_v3.css did the page
   body of the homepage and deliberately left the shell alone; this file is that
   missing half, and because the layout is shared it restyles the header on
   every frontend page at once.

   Two rules this file lives by:

   1. EVERY selector is scoped under .nlp-shell — the class on #container. The
      layout loads Bootstrap + Nifty + front.css, so the scope buys (0,2,x)
      against their (0,1,x) and we win the cascade with no !important anywhere.
      Where a theme rule is itself nested (.tabs .-primary > li > a) the scoped
      selector is deepened to match rather than escalated.

   2. Tokens are prefixed --nlp-. An unprefixed --green on #container would
      inherit into every .green-text on the page and repaint it, since front.css
      defines --green: #73C64C at :root and .green-text reads it. Prefixing
      keeps the palette from leaking into theme rules.

   The markup keeps all of the live header's JS hooks under new wrappers:
   .nav_looking_search_text / .learn-search-items (search AJAX),
   .learn-lang-currency-trigger (language + currency modal), #checkout-notification
   / .bucket-notification (cart count), #dropdown-user (Bootstrap dropdown),
   .mainnav-toggle (Nifty mobile drawer) and .newcategory-tabs (the "Others"
   overflow adapter). Restyling only — no behaviour was rewired.
   ========================================================================== */

.nlp-shell {
  --nlp-sky: #3FA9E8;
  --nlp-sky-deep: #2286C7;
  --nlp-sky-tint: #EDF6FC;
  --nlp-sky-line: #D3E9F8;
  --nlp-ink: #12303B;
  --nlp-teal: #0F6E78;
  --nlp-paper: #FDFEFE;
  --nlp-mist: #F6FAFA;
  --nlp-line: #E6EDEC;
  --nlp-white: #ffffff;
  --nlp-text: #3D5058;
  --nlp-text-soft: #66787E;
  --nlp-gold: #F0C033;
}

/* ============ promo bar ============ */
/* Five mutually exclusive banners share this class — black friday, gift, the
   Naturalistico launch line, the referral line and the admin-scheduled promo.
   The v3 bar is one compact teal strip, so the sizing lives here once and each
   branch keeps its own inner markup. */
.nlp-shell .nlp-promo {
  background: var(--nlp-teal);
  padding: 9px 16px;
  text-align: center;
  line-height: 1.5;
}

.nlp-shell .nlp-promo .learn-gift-banner,
.nlp-shell .nlp-promo .black-friday-banner {
  /* front.css sets Fraunces 20px/600 here for the old tall bar. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: #fff;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}

/* The gold text lead-in and the gold coupon pill both come from front.css
   (.learn-color-gift-banner, first-of-type vs the rest) — only the pill's
   type scale needs bringing down to the v3 bar. */
.nlp-shell .nlp-promo .learn-color-gift-banner {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  padding: 2px 10px;
}

/* front.css strips the first pill back to plain gold text; the padding reset
   has to be repeated here because the rule above outranks it on order. */
.nlp-shell .nlp-promo .learn-color-gift-banner:first-of-type {
  font-family: inherit;
  font-size: inherit;
  padding: 0;
}

.nlp-shell .nlp-promo .black-friday-explore p {
  font-size: 13px;
}

/* ============ header ============ */
/* Nifty gives #container overflow:hidden, which turns it into a scroll
   container and quietly kills position:sticky on anything inside it. clip
   keeps the same "don't let children cause a scrollbar" job without becoming
   a scrollport, so the header can stick. Selector carries the id because
   #container (1,0,0) outranks a bare class. Browsers without overflow:clip
   drop the declaration and keep hidden — the header is then simply static. */
#container.nlp-shell {
  overflow: clip;
}

.nlp-shell .p-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nlp-line);
  /* Nifty puts "Open Sans" on <body>, which the layout never loads, so the
     shell was falling back to a system face. Inter is set here rather than on
     <body> to keep the change inside the header. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 1320px matches the page rail below, so the wordmark lines up with the hero.
   The prototype spent that width on five nav labels and nothing else; live
   also carries a sixth label, the language pill and the profile chip, so the
   gaps here are tighter than the prototype's 28px to keep the search pill at
   a usable width for a signed-in visitor. */
.nlp-shell .p-header .h-in {
  max-width: 1320px;
  margin: 0 auto;
  padding: 13px 30px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.nlp-shell .wordmark {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
}

.nlp-shell .wordmark img {
  height: 31px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* ---- primary nav ---- */
.nlp-shell .p-nav-wrap {
  flex: 0 0 auto;
  min-width: 0;
}

.nlp-shell .p-nav {
  display: flex;
  align-items: center;
  gap: 17px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nlp-text);
}

.nlp-shell .p-nav>li {
  padding: 0;
  margin: 0;
  font-size: inherit;
  color: inherit;
  white-space: nowrap;
}

.nlp-shell .p-nav>li>a {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
}

.nlp-shell .p-nav>li>a:hover,
.nlp-shell .p-nav>li>a:focus {
  color: var(--nlp-ink);
  border-bottom-color: var(--nlp-sky);
}

/* The layout marks the current page with .text-semibold; v3 shows it as the
   underline instead of a weight change, so the row never reflows on navigate. */
.nlp-shell .p-nav>li.text-semibold>a {
  color: var(--nlp-ink);
  border-bottom-color: var(--nlp-sky);
}

/* ---- right cluster ---- */
.nlp-shell .h-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  float: none;
  min-width: 0;
}

.nlp-shell .h-right>li {
  padding: 0;
  margin: 0;
  float: none;
}

/* Nifty dresses .navbar-top-links > li > a for its dark fixed topbar:
   display:table-cell, height:59px, colour #dbdbdb. Every control in this
   cluster has to start from neutral, so the reset lands here at (0,3,2) —
   and each control below then re-selects itself as > a.<class> to sit at
   (0,4,2) and win back its own paint. Skipping that second step is what
   made the sign-in button white-on-white. */
.nlp-shell .h-right>li>a {
  display: inline-flex;
  align-items: center;
  height: auto;
  padding: 0;
  color: inherit;
  background: transparent;
  transition: none;
}

.nlp-shell .h-right>li>a:hover,
.nlp-shell .h-right>li>a:focus {
  background: transparent;
}

/* ---- search pill ---- */
/* The one elastic control in the row. A signed-in visitor adds the language
   pill and the profile chip on top of the six nav labels, which together
   exceed the 1320px rail; letting the pill compress keeps the row inside its
   padding instead of overflowing (and being clipped by #container). */
.nlp-shell .p-search {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
}

.nlp-shell .p-search .p-search-field {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--nlp-mist);
  border: 1px solid var(--nlp-line);
  border-radius: 999px;
  padding: 9px 16px;
  width: 230px;
  max-width: 100%;
  min-width: 0;
}

.nlp-shell .p-search .p-search-field:focus-within {
  border-color: var(--nlp-sky-line);
  background: var(--nlp-white);
}

.nlp-shell .p-search .learn-search-icon {
  display: flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nlp-text-soft);
  cursor: pointer;
  flex: 0 0 auto;
}

.nlp-shell .p-search .learn-search-icon .material-icons {
  font-size: 17px;
  line-height: 1;
}

.nlp-shell .p-search .learn-search-input {
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  width: 100%;
  /* An <input> defaults to a ~20-character intrinsic minimum, which would
     stop the pill shrinking; 0 hands that control to the flex line. */
  min-width: 0;
  height: auto;
  padding: 0;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--nlp-ink);
}

.nlp-shell .p-search .learn-search-input::placeholder {
  color: #9AABB1;
}

/* The AJAX result panel hangs off the pill rather than the old input group. */
.nlp-shell .p-search .learn-search-items {
  top: calc(100% + 8px);
  left: 0;
  min-width: 320px;
  border: 1px solid var(--nlp-line);
  border-radius: 14px;
  padding: 8px 14px;
}

/* ---- cart ---- */
.nlp-shell .h-right>li>a.cart-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--nlp-text-soft);
  display: grid;
  place-items: center;
  text-decoration: none;
  transition: background .15s ease;
}

.nlp-shell .h-right>li>a.cart-btn:hover,
.nlp-shell .h-right>li>a.cart-btn:focus {
  background: var(--nlp-sky-tint);
  color: var(--nlp-ink);
}

.nlp-shell .cart-btn .contain-bucket {
  border: 0;
  margin: 0;
  width: auto;
  height: auto;
  display: block;
}

.nlp-shell .cart-btn .contain-bucket img {
  width: 20px;
  height: 20px;
  display: block;
}

.nlp-shell .cart-btn .bucket-notification {
  top: -7px;
  right: -7px;
  width: auto;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--nlp-gold);
  color: #4A3A06;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
}

/* ---- language + currency pill ---- */
.nlp-shell .learn-header-language {
  margin: 0;
}

.nlp-shell .h-right>li>a.learn-lang-currency-trigger {
  gap: 6px;
  padding: 8px 11px;
  border: 1px solid var(--nlp-line);
  border-radius: 999px;
  background: var(--nlp-mist);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}

.nlp-shell .h-right>li>a.learn-lang-currency-trigger:hover,
.nlp-shell .h-right>li>a.learn-lang-currency-trigger:focus {
  background: var(--nlp-sky-tint);
  border-color: var(--nlp-sky-line);
}

.nlp-shell .learn-lang-currency-trigger .learn-lang-currency-label {
  font-size: 13px;
}

.nlp-shell .learn-lang-currency-trigger .learn-lang-currency-chevron {
  font-size: 17px;
  color: var(--nlp-text-soft);
}

/* ---- signed-in profile chip ---- */
.nlp-shell .h-right>li.h-user>a.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 9px 5px 5px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease;
}

.nlp-shell .h-right>li.h-user>a.dropdown-toggle:hover,
.nlp-shell .h-right>li.h-user>a.dropdown-toggle:focus,
.nlp-shell .h-right>li.h-user.open>a.dropdown-toggle {
  background: var(--nlp-sky-tint);
}

.nlp-shell .h-user .avatar_img,
.nlp-shell .h-user .avatar_default {
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  font-size: 32px;
  line-height: 32px;
  color: var(--nlp-text-soft);
  object-fit: cover;
}

.nlp-shell .h-user .learn-header-user-name-wrap {
  margin: 0;
  max-width: 104px;
  text-align: left;
}

.nlp-shell .h-user .learn-header-user-name {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--nlp-ink);
}

/* Both lines stay on one line each — "See profile" breaking in two made the
   header taller than the rest of the row. */
.nlp-shell .h-user .learn-header-user-role {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--nlp-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- sign-in button ---- */
/* Own class rather than .btn.btn-primary — the theme owns those two names and
   this is the one element in the header that has to read as the CTA. */
.nlp-shell .h-right>li>a.nlp-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--nlp-sky);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 20px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease;
}

/* Hover paints through background-image, not background-color, on purpose.
   Three legacy sheets dress .navbar-top-links > li > a:hover with an important
   background-color — front.css #fcfcfc, nifty.css #25476a, type-full theme #fff
   — and no specificity outranks !important, so the white label sat on a #fcfcfc
   pill and the button read as blank on hover. The class stays on the <ul>
   because the signed-in profile dropdown takes all of its .head-list styling
   from those same sheets. A flat gradient is a background-image, which those
   rules never set, and it paints over whatever colour they win. */
.nlp-shell .h-right>li>a.nlp-signin-btn:hover,
.nlp-shell .h-right>li>a.nlp-signin-btn:focus {
  background-image: linear-gradient(var(--nlp-sky-deep), var(--nlp-sky-deep));
  color: #fff;
}

/* ---- mobile hamburger ---- */
.nlp-shell .learn-mobile-menu {
  margin-left: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  cursor: pointer;
}

.nlp-shell .learn-mobile-menu:hover {
  background: var(--nlp-sky-tint);
}

/* ============ category rail ============ */
/* Kept on the .tabs / .newcategory-tabs markup so the layout's overflow
   adapter (which measures each li and folds the remainder into "Others")
   still runs. Only the skin changes: v3's quiet 13px labels with an
   underline on hover instead of the theme's 15px dark tabs. */
.nlp-shell .nlp-cats {
  padding: 0;
  background: var(--nlp-white);
  border-bottom: 1px solid var(--nlp-line);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.nlp-shell .nlp-cats .newcategory-tabs {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 22px;
}

.nlp-shell .nlp-cats .tabs .-primary {
  gap: 4px;
  align-items: stretch;
}

.nlp-shell .nlp-cats .tabs .-primary>li {
  padding: 0;
}

.nlp-shell .nlp-cats .tabs .-primary>li>a,
.nlp-shell .nlp-cats .tabs .-primary>li>button {
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--nlp-text-soft);
  border-bottom: 2.5px solid transparent;
  text-align: center;
  text-decoration: none;
}

.nlp-shell .nlp-cats .tabs .-primary>li:hover>a,
.nlp-shell .nlp-cats .tabs .-primary>li:hover>button,
.nlp-shell .nlp-cats .tabs .-primary>li.active>a,
.nlp-shell .nlp-cats .tabs .-primary>li.active>button {
  color: var(--nlp-ink);
  border-bottom-color: var(--nlp-sky-line);
}

.nlp-shell .nlp-cats .tabs .-primary>li.active>a,
.nlp-shell .nlp-cats .tabs .-primary>li.active>button {
  border-bottom-color: var(--nlp-sky);
}

/* "Others" overflow panel */
.nlp-shell .nlp-cats .tabs .-secondary {
  border: 1px solid var(--nlp-line);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 3px 6px rgba(15, 80, 95, .05), 0 18px 40px -14px rgba(15, 80, 95, .16);
  overflow: hidden;
}

.nlp-shell .nlp-cats .tabs .-secondary li {
  border-top: 0;
}

.nlp-shell .nlp-cats .tabs .-secondary a {
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nlp-text-soft);
  text-align: left;
}

.nlp-shell .nlp-cats .tabs .-secondary a:hover {
  background: var(--nlp-sky-tint);
  color: var(--nlp-ink);
}

/* ============ responsive ============ */
/* Below 1080px the desktop nav goes; the layout's own .visible-lg/.visible-md
   switches already hand the links to the Nifty drawer, so this only closes the
   gap between Bootstrap 3's 992px md breakpoint and the prototype's 1080px. */
@media (max-width: 1199px) {
  .nlp-shell .p-header .h-in {
    gap: 18px;
  }

  .nlp-shell .p-nav {
    gap: 16px;
    font-size: 13.5px;
  }

  .nlp-shell .p-search .p-search-field {
    width: 180px;
  }

  .nlp-shell .h-user .learn-header-user-name-wrap {
    display: none;
  }
}

@media (max-width: 991px) {
  .nlp-shell .p-header .h-in {
    padding: 11px 16px;
    gap: 12px;
  }

  .nlp-shell .p-search {
    display: none;
  }

  .nlp-shell .wordmark img {
    height: 27px;
  }
}

@media (max-width: 640px) {
  .nlp-shell .nlp-promo {
    padding: 8px 12px;
  }

  .nlp-shell .nlp-promo .learn-gift-banner,
  .nlp-shell .nlp-promo .black-friday-banner {
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {

  /* Selectors mirror the (0,4,2) shape used above, or the transitions set
     there would outrank this and keep animating. */
  .nlp-shell .h-right>li>a.nlp-signin-btn,
  .nlp-shell .h-right>li>a.cart-btn,
  .nlp-shell .h-right>li>a.learn-lang-currency-trigger,
  .nlp-shell .h-right>li.h-user>a.dropdown-toggle {
    transition: none;
  }
}