/* ===== home.css (Navbar + Hero only) ===== */

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Fonts and core tokens */
:root{
  --font-family-base:'FKGroteskNeue', Geist, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Surfaces */
  --bg-ink:#0E1116;       /* page background */
  --bg-raised:#151A21;    /* navbar */

  /* Text */
  --text-primary:#F2F5F8;
  --text-muted:#B5C0CC;

  /* Brand */
  --brand-teal:#12DAD1;         /* NextGen */
  --brand-teal-600:#0EA7A1;     /* hover/darken */
  --accent-copper:#FF9A3C;      /* Facade */

  /* Lines / misc */
  --line-soft:#232A32;
}

/* Base */
body{
  margin:0;
  background:var(--bg-ink);
  color:var(--text-primary);
  font-family:var(--font-family-base);
}

/* ===== Navbar ===== */
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--bg-raised);
  padding:12px 10px;
  color:var(--text-primary);
  position:sticky; top:0; z-index:100;
  box-shadow:0 3px 20px #0005;
}

/* Brand */
.brand{
  display:flex; align-items:center; gap:18px;
  text-decoration:none; color:var(--text-primary);
}

/* --- UPDATED LOGO STYLES FOR WHITE SVG ON DARK NAVBAR --- */
.brand-logo{
    height: 48px;
    width: 48px;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    padding: 4px;
    border: 2px solid var(--brand-teal);
    background: transparent;
    filter:
        drop-shadow(0 0 4px rgba(18,218,209,0.8))
        drop-shadow(0 0 16px rgba(18,218,209,0.4))
        drop-shadow(0 0 2px rgba(255,255,255,0.9))
        brightness(1.15)
        contrast(1.1);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.3),
        0 2px 12px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
}
.brand-logo:hover{
    filter:
        drop-shadow(0 0 6px rgba(18,218,209,1))
        drop-shadow(0 0 20px rgba(18,218,209,0.6))
        drop-shadow(0 0 4px rgba(255,255,255,1))
        brightness(1.25)
        contrast(1.15);
    transform: scale(1.08);
    border-color: var(--accent-copper);
}

.brand-center{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; line-height:1.1; }
.brand-text{ font-size:1.6rem; font-weight:800; letter-spacing:1.5px; line-height:1.1; white-space:nowrap; }
.nextgen-highlight{ color:var(--brand-teal); font-weight:900; letter-spacing:1.2px; }
.facade-highlight{ color:var(--accent-copper); font-weight:900; letter-spacing:1.2px; }
.brand-tagline{
  color:var(--text-muted); font-size:1.13rem; letter-spacing:.2px; font-weight:550;
  margin-top:2px; margin-left:1.5px; text-shadow:0 2px 8px #141e1e4a; line-height:1.33;
}

/* Nav links */
.nav-links{ display:flex; gap:34px; list-style:none; padding:0; margin:0; }
.nav-links li a{
  color:var(--text-primary); text-decoration:none; font-size:1.09rem; font-weight:500;
  padding:4px 8px; border-bottom:2.5px solid transparent; transition:color .2s, border-color .2s, background .2s;
}
.nav-links li a:hover{
  color:var(--text-primary);
  border-bottom-color:var(--accent-copper);
  background:#1C1F25;
}
.user-action-group {
  display: flex;
  align-items: center;
  gap: 15px;
}

.user-name {
  color: var(--brand-teal);
  font-weight: 700;
  font-size: 1.09rem;
  padding-right: 5px;
  letter-spacing: 0.2px;
}

.logout-btn.header-btn {
  margin-left: 5px;
  padding: 6px 22px;
  background: #e63946;
  color: #0E1116;
  border: none;
  border-radius: 22px;
  font-weight: 600;
  font-size: 1.06rem;
  cursor: pointer;
  box-shadow: 0 1px 8px #0ea7a120;
  transition: background .18s, color .15s;
  min-width: 92px;
}
.logout-btn.header-btn:hover{
  background: #b71c1c;
  color: #fff;
}


/* ===== Hero ===== */
.hero-section{
  position:relative; display:flex; min-height:570px; width:100vw;
  background:#4b4b4b; padding:0; margin:0; overflow:visible;
}

/* Gradient overlay to blend text with photo */
.hero-bg-gradient{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(
    112deg,
    rgba(10,12,14,1) 0%,
    rgba(20,23,28,0.98) 22%,
    rgba(24,28,34,0.92) 38%,
    rgba(28,33,40,0.55) 56%,
    rgba(28,33,40,0.22) 74%,
    rgba(28,33,40,0) 100%
  );
}

/* Decorative curve just below hero */
.hero-curve svg path{ fill:var(--bg-ink); }

/* Left copy */
.hero-left{
  flex:1.3; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding-left:7vw; color:var(--text-primary); z-index:3; min-width:340px; max-width:48vw;
}
.hero-left h1{
  font-size:3.1rem; font-weight:900; margin-bottom:30px; letter-spacing:1.5px;
  color:var(--text-primary); text-align:left; line-height:1.07; text-shadow:0 2px 6px #2228;
}
.hero-left p{
  font-size:1.28rem; margin-bottom:32px; color:var(--text-muted); text-align:left; line-height:1.28;
}

/* Primary CTA */
.cta-btn{
  background:var(--brand-teal); color:#0E1116;
  padding:18px 54px; border-radius:40px; font-weight:bold; font-size:1.19rem; text-decoration:none;
  box-shadow:0 3px 12px #2b2b2b44; border:1px solid transparent;
  transition:background .2s, color .2s, border-color .2s, transform .06s ease-in-out;
  margin-top:25px; text-align:left; cursor:pointer;
}
.cta-btn:hover{ background:transparent; color:var(--brand-teal); border-color:var(--brand-teal); }
.cta-btn:active{ transform:translateY(1px); }

/* Right image */
.hero-right{
  flex:2; position:relative; display:flex; align-items:stretch; justify-content:flex-end;
  min-width:460px; min-height:470px; z-index:1; overflow:hidden;
}
.hero-img{
  width:100%; height:100%; object-fit:cover; min-width:460px; min-height:470px;
  border-radius:0 0 0 60px; box-shadow:-8px 0 44px #0008;
}

/* ===== Focus & selection for home only ===== */
:focus-visible{ outline:2px solid var(--brand-teal); outline-offset:2px; }
a:focus-visible, button:focus-visible{ box-shadow:0 0 0 3px rgba(18,218,209,0.25); }
::selection{ background:rgba(18,218,209,0.25); color:var(--text-primary); }

/* ===== Responsive (home only) ===== */
@media (max-width: 900px){
    .navbar{ padding:15px 12px; }
    .brand-logo{ height: 40px; width: 40px; padding: 3px; border-width: 1.5px;}
    .brand{ gap: 15px; }
    .brand-text{ font-size:1.3rem; letter-spacing:1.1px; }
    .brand-center{ max-width:87vw; }
    .hero-section{
      flex-direction:column; min-height:350px; height:auto;
      border-bottom-left-radius:55px; border-bottom-right-radius:55px;
    }
    .hero-left, .hero-right{
      min-width:210px; width:100%; padding-left:18px; justify-content:center; max-width:98vw; margin:0;
    }
    .hero-img{ width:100vw; min-width:60vw; }
    .hero-bg-gradient{ width:100vw; height:100%; }
    .brand-tagline{ font-size:.99rem !important; }
}

@media (max-width: 600px){
    .brand-logo{
        height: 34px;
        width: 34px;
        padding: 2px;
        border-width: 1.5px;
    }
    .brand{ gap: 12px; }
    .brand-text{ font-size:1.08rem !important; letter-spacing:.8px; }
    .nav-links{ gap:10px; }
    .brand-tagline{ font-size:.93rem !important; }
    .hero-left h1{ font-size:1.45rem; }
    .hero-left{ padding-left:10px; }
}