/* ═══════════════════════════════════════════════════════════════
   Layout 4 navbar — site-wide.

   Loaded by frontend/innerblade/header.blade.php when the selected
   homepage template is 4, AND unconditionally on the homepage itself
   (so the client-side template-preview switcher can reveal it even
   when the site's real default is 1-3). The header-hiding rule below
   is therefore scoped to body[data-layout="4"] rather than assumed —
   on every page other than the homepage, data-layout is stamped from
   theme_template() so this is equivalent to the old unconditional rule.

   The class rules are kept in sync with the L4 CUSTOM NAVBAR block
   in templates.css (which still styles the homepage preview via
   body[data-layout="4"]). If you change the navbar look, change it
   in both files.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --l4-green: var(--primary-color, #1AB189);
  --l4-green-dk: color-mix(in srgb, var(--primary-color, #1AB189) 78%, #000);
  --l4-ink: var(--heading-color, #1A1A2E);
}

/* Template 4 replaces the default header entirely */
body[data-layout="4"] .header.rs-nav { display: none !important; }
body[data-layout="4"] .header.rs-nav .top-bar { display: none !important; }
.l4-navbar { display: none; }
body[data-layout="4"] .l4-navbar { display: block; }

.l4-navbar {
  position: sticky;
  top: 0;
  z-index: 99999;
  background: #fff;
  box-shadow: 0 2px 16px rgba(0,0,0,0.09);
}

.l4-nav-inner {
  display: flex;
  align-items: center;
  height: 80px;
  position: relative;
  gap: 0;
}
.l4-nav-logo { flex-shrink: 0; text-decoration: none; }
.l4-nav-logo img { height: 46px; width: auto; display: block; }

/* Nav links */
.l4-nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 0 40px;
  gap: 2px;
}
.l4-nav-links > li { position: relative; }
.l4-nav-links > li > a {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  text-decoration: none !important;
  padding: 8px 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.l4-nav-links > li > a:hover { background: color-mix(in srgb, var(--primary-color, #1AB189) 8%, transparent); color: var(--l4-green); }
.l4-nav-links > li.active > a { background: color-mix(in srgb, var(--primary-color, #1AB189) 8%, transparent); color: var(--l4-green); }

/* Explore dropdown — hover triggered */
.l4-explore-wrap:hover .l4-explore-dropdown,
.l4-explore-wrap:focus-within .l4-explore-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.l4-explore-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 36px rgba(0,0,0,0.13);
  border: 1px solid #f0f0f0;
  width: 210px;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 100;
  padding: 8px 0;
}
/* Left panel rows — each wraps one trigger + its flyout sub-panel */
.l4-flyout-row { position: relative; }
.l4-flyout-row:first-child .l4-flyout-item { border-radius: 6px 6px 0 0; }
.l4-flyout-row:last-child  .l4-flyout-item { border-radius: 0 0 6px 6px; }
.l4-flyout-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  gap: 24px;
}
.l4-flyout-item:hover { background: color-mix(in srgb, var(--primary-color, #1AB189) 8%, transparent); color: var(--l4-green) !important; }
.l4-flyout-item i { font-size: 10px; color: #bbb; flex-shrink: 0; }
.l4-flyout-item:hover i { color: var(--l4-green); }
/* Right sub-panel — flush against left panel; grows with long category
   names up to a cap, after which they wrap. */
.l4-flyout-sub {
  display: none;
  position: absolute;
  left: 100%;
  top: -8px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 36px rgba(0,0,0,0.13);
  border: 1px solid #f0f0f0;
  width: max-content;
  min-width: 200px;
  max-width: 320px;
  padding: 8px 0;
  z-index: 101;
}
.l4-flyout-row:hover .l4-flyout-sub { display: block; }
/* Invisible bridge — fills space between panels so diagonal mouse movement doesn't lose hover */
.l4-flyout-row:hover::after {
  content: '';
  position: absolute;
  left: 100%;
  top: -20px;
  width: 16px;
  height: calc(100% + 40px);
}
.l4-dd-item {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: #333;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s;
  white-space: normal;
  line-height: 1.45;
}
.l4-dd-item:hover { background: color-mix(in srgb, var(--primary-color, #1AB189) 7%, transparent); color: var(--l4-green) !important; }

/* Search — collapsed to an icon button; .open (JS) slides the input out.
   Sits on the right so it never overlaps the nav links. */
.l4-search-wrap {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}
.l4-search-wrap form { margin: 0; display: flex; }
.l4-search-wrap input {
  width: 0;
  opacity: 0;
  padding: 10px 0;
  margin-right: 0;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  color: #333;
  outline: none;
  background: #f7f7f7;
  transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease,
    margin 0.25s ease, border-color 0.2s, background 0.2s;
}
.l4-search-wrap.open input {
  width: 240px;
  opacity: 1;
  padding: 10px 14px;
  margin-right: 8px;
  border-color: #e8e8e8;
}
.l4-search-wrap input::placeholder { color: #aaa; }
.l4-search-wrap.open input:focus { border-color: var(--l4-green); background: #fff; }
.l4-search-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #f4f6f5;
  color: #444;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.l4-search-btn:hover { background: color-mix(in srgb, var(--primary-color, #1AB189) 10%, transparent); color: var(--l4-green); }

/* Auth area */
.l4-nav-auth { display: flex; align-items: center; gap: 12px; margin-left: 12px; flex-shrink: 0; }
.l4-nav-auth .l4-login-link.active { color: var(--l4-green) !important; }
.l4-login-link {
  font-size: 15px; font-weight: 600; color: #333 !important;
  text-decoration: none !important; padding: 8px 14px; border-radius: 8px;
  transition: color 0.15s;
}
.l4-login-link:hover { color: var(--l4-green) !important; }
.l4-getstarted-btn {
  background: var(--l4-green);
  color: #fff !important;
  font-size: 14px; font-weight: 700;
  padding: 11px 22px;
  border-radius: 10px;
  border-bottom: 3px solid var(--l4-green-dk);
  text-decoration: none !important;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform 0.1s, border-bottom-width 0.1s;
  white-space: nowrap;
}
.l4-getstarted-btn:hover { transform: translateY(2px); border-bottom-width: 1px; color: #fff !important; }

@media (max-width: 991px) {
  .l4-nav-links { display: none; }
}
@media (max-width: 767px) {
  .l4-search-wrap.open input { width: 140px; }
  .l4-nav-inner { height: 64px; }
  .l4-login-link { display: none; }
}