/* Bismillah ir-Rahman ir-Rahim
 * Sallallahu 'alayhi wa sallam
 * css/n00bsfrontend.css - unified responsive nav + site styles
 */

:root{
  --maxw:1100px;
  --muted:#9aa0a6;
  --accent:#0a84ff;
}

/* reset / base */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial;margin:0;color:#111;line-height:1.45;background:#f6f7f9}

.header-inner{max-width:var(--maxw);margin:0 auto;padding:10px;display:flex;justify-content:space-between;align-items:center}

/* header */
.site-header{position:sticky;top:0;background:rgba(255,255,255,0.95);backdrop-filter:blur(6px);border-bottom:1px solid #eee;z-index:1000}
.logo-space{display:flex;flex-direction:column;padding:8px 12px}
.logo-space h1{margin:0;font-size:1.05rem}
.logo-space .tagline{margin:4px 0 0;color:var(--muted);font-size:0.86rem}

/* nav - unified */
.main-nav{display:flex;align-items:center;gap:12px}
.nav-toggle{
  display:none;
  background:none;
  border:0;
  font-size:1.6rem;
  padding:6px;
  cursor:pointer;
  line-height:1;
  color:#111 !important;               /* ensure dark on light header */
  position:relative;
  z-index:1300;
}
.nav-toggle:focus{outline:2px solid rgba(10,132,255,0.18);border-radius:6px}

/* top-level nav list */
.nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:12px;
  align-items:center;
  z-index:1200;
}
.nav-list li{position:relative}
.nav-list a{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  text-decoration:none;
  color:#111; /* explicit dark links on white header */
  border-radius:6px;
}
.nav-list a:hover{background:rgba(10,132,255,0.08)}

/* desktop submenu */
.nav-list .sub{
  list-style:none;        /* remove bullets */
  margin:0;               /* remove default margin */
  padding:6px 0;
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  border:1px solid #eee;
  min-width:180px;
  box-shadow:0 10px 20px rgba(0,0,0,0.06);
  border-radius:6px;
  z-index:999;
}
.nav-list .sub li{white-space:nowrap}
.nav-list .sub a{
  display:block;
  padding:8px 12px;
  color:#111;
}
.nav-list li:hover > .sub{display:block}

/* arrows: hide literal content inside span by collapsing its font-size, use ::after for glyph */
.arrow{
  display:inline-block;
  width:1.05em;
  text-align:center;
  font-size:0; /* hide any literal char inside span (your nav.php has ▶ inside) */
  line-height:1;
}
.arrow::after{
  content: "▾";           /* desktop default = down */
  display:inline-block;
  font-size:0.95rem;
  color:#111;
  transition: transform .12s ease;
}

/* main container */
main{max-width:var(--maxw);margin:0 auto;padding:20px}

/* sections (keep your gradients) */
section{padding:60px 20px;border-radius:8px;margin:18px 0;color:#fff}
section h2{margin-top:0}
.section-hero{background:linear-gradient(135deg,#111827,#0f172a)}
.section-tutorials{background:linear-gradient(135deg,#0f172a,#0ea5a3)}
.section-services{background:linear-gradient(135deg,#7c3aed,#4c1d95)}
.section-portfolio{background:linear-gradient(135deg,#ef4444,#b91c1c)}
.section-contact{background:linear-gradient(135deg,#059669,#065f46)}
.section-cv{background:linear-gradient(135deg,#0ea5ff,#0369a1)}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:700px){ .two-col{grid-template-columns:1fr} }

/* buttons */
.button{display:inline-block;padding:8px 12px;border-radius:6px;text-decoration:none;background:rgba(255,255,255,0.12);color:#fff}
.button:hover{background:rgba(255,255,255,0.25)}
.muted{color:var(--muted)}

/* contact form */
form.contact{max-width:640px;display:flex;flex-direction:column;gap:8px}
input[type="text"],input[type="email"],textarea{width:100%;padding:10px;border-radius:6px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);color:#fff}
button{padding:10px 12px;border-radius:6px;border:0;background:rgba(0,0,0,0.12);cursor:pointer;color:#fff}

/* mobile behavior */
@media (max-width:700px){
  .nav-toggle{display:block;color:#111;z-index:1400}
  /* mobile menu: fixed panel on right */
  .nav-list{
    position:fixed;
    right:12px;
    top:64px;
    background:#fff;
    flex-direction:column;
    padding:10px;
    gap:6px;
    border-radius:10px;
    display:none;
    box-shadow:0 8px 24px rgba(0,0,0,0.12);
    width:calc(100% - 48px);
    max-width:360px;
  }
  .nav-list.open{display:flex}
  .nav-list a{color:#111}
  /* mobile submenus are hidden until opened */
  .nav-list .sub{
    position:static;
    display:none;
    flex-direction:column;
    background:transparent;
    border-left:3px solid var(--accent);
    margin-left:0.4rem;
    padding-left:0.5rem;
    box-shadow:none;
    min-width:unset;
  }
  .has-sub.open > .sub{display:flex}
  /* arrows: mobile closed = right arrow, open = down */
  .has-sub > a .arrow::after{ content: "▸"; } /* right arrow when closed on mobile */
  .has-sub.open > a .arrow::after{ content: "▾"; } /* down when open */
}

/* helpers */
.card{background:rgba(255,255,255,0.06);padding:12px;border-radius:8px}

/* small adjustments for header inner and logo when mobile */
@media (max-width:700px){
  .header-inner{padding:8px}
  .logo-space{padding:6px}
}

/* remove underline on logo link */
.logo-space a {
  text-decoration: none;
  color: inherit; /* keep colors as set inside h1/span */
}

.logo-space h1 {
  font-size: 1.2rem;
  font-weight: 600;
}
.logo-space .muted {
  color: var(--muted);
  font-weight: 400;
}

/* tagline dots */
.tagline .dot {
  color: orange;          /* highlight color */
  font-size: 1.2em;       /* a bit larger than text */
  font-weight: bold;      /* extra pop */
  margin: 0 4px;          /* spacing left and right */
}
/* ---- CV page helpers (append at end of file) ---- */
.cv-panel {
  background: #fff;
  color: #111;
  padding: 22px;
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.12);
  max-width: 980px;
  margin: 0 auto;
  font-size: 15.5px;
  line-height: 1.45;
}
@media (max-width:700px) {
  .cv-panel { font-size: 15px; padding: 16px; }
}
.cv-meta { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:12px; }
.cv-meta dt { font-weight:700; width:140px; float:left; }
.cv-meta dd { margin-left:0; margin-bottom:6px; }
.cv-section { margin-top:14px; }
.cv-section h3 { margin:6px 0 10px; font-size:1.05rem; color:#0f172a; }
.cv-list { margin-left:1.05rem; }
.cv-download-row { margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cv-note { color: #334155; margin-top:8px; font-size:0.95rem; }
.cv-panel a { color: var(--accent); text-decoration:underline; }

/* skill tags / balloons */
.skill-tag {
  display: inline-block;
  background: #0a84ff;        /* accent color */
  color: #fff;                /* white text */
  padding: 4px 10px;          /* inner spacing */
  margin: 4px 6px;            /* spacing between tags */
  border-radius: 999px;       /* fully rounded balloon shape */
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;        /* keep words together */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* subtle depth */
  transition: background 0.2s ease;
}

.skill-tag:hover {
  background: #0369a1;        /* darker blue on hover */
  cursor: default;
}

.section-services ul {
  list-style: disc;
  padding-left: 2rem;       /* indent bullets */
  color: #fff;              /* text color */
}

.section-services ul li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}


.section-services ul li::marker {
  color: #f0f0f0;            /* slightly brighter bullets */
}

.section-portfolio ul {
  padding-left: 3rem;
}

.section-tutorials ul {
  list-style: disc;
  padding-left: 2rem;       /* indent bullets */
  color: #fff;              /* text color */
}

section a {
  color: inherit;         /* inherit text color from section (white) */
  text-decoration: underline; /* optional: underline for links */
}

section a:hover {
  color: #f0f0f0;         /* slightly lighter on hover */
  text-decoration: underline; /* keep underline on hover */
}