/* ========== VARIABLES & RESET ========== */
:root {
  --primary-color: #9933ff;
  --secondary-color: #222;
  --bg-light: #f9f9f9;
  --font: 'Arial', sans-serif;
}

html, body {
  height: 100%;        /* full height for flex context */ 
  margin: 0;           /* remove default margins */
}

body {
  display: flex;       
  flex-direction: column;
  min-height: 100vh; 
  font-family: var(--font);
  background: var(--bg-light);
  color: var(--secondary-color);
  line-height: 1.6;
}

main {
  margin-top: 60px; /* nav height */
  flex: 1; 
}
* {
  box-sizing: border-box;
  margin: 0; padding: 0;
}

/* ========== NAVIGATION ========== */
nav {
  position: fixed; top: 0; width: 100%;
  background: var(--secondary-color);
  z-index: 1000;
}
nav ul {
  display: flex; justify-content: center;
  list-style: none;
}
nav li { margin: 0 1rem; }
nav a {
  display: block;
  padding: 1rem;
  color: #fff;
  text-decoration: none;
  transition: background .3s;
}
nav a.active,
nav a:hover {
  background: var(--primary-color);
}

/* ========== SECTIONS ========== */

.section { 
  padding: 4rem 2rem; 
  max-width: 800px; 
  margin: auto; 
  display: none; 
  background: #fff; 
  margin-bottom: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.section.active {
  display: block;
}

#home.section {
  padding: 0;
  margin-bottom: 0;
}
/* ========== HERO ========== */
#home header {
  min-height: calc(100vh - 60px) !important;
  background: linear-gradient(135deg, #9933ff 0%, #6600cc 100%);
  color: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0;
  margin-bottom: 0;
}

#animated-text { 
  font-size: 4rem; 
  position: relative; 
  overflow: hidden;
}
.tagline {
  font-size: 1.25rem;
  margin: 1rem 0;
}
.btn {
  display: inline-block;
  background: #fff;
  color: var(--secondary-color);
  padding: .75rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: background .3s;
}
.btn:hover {
  background: #eee;
}

/* ========== SERVICE BOXES ========== */
#services .service {
  margin-bottom: 1.5rem;
}
#services .service h3 {
  color: var(--primary-color);
  margin-bottom: .5rem;
}

/* ========== LINKS ========== */
.link {
  color: var(--primary-color);
  text-decoration: none;
}
.link:hover {
  text-decoration: underline;
}

/* ========== CASE STUDIES ========== */
#cases .case {
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--primary-color);
  padding-left: 1rem;
}

/* ========== CONTACT FORM ========== */
#contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}
#contact-form label {
  display: flex; flex-direction: column;
}
#contact-form input,
#contact-form textarea {
  padding: .75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
#contact-form button {
  width: fit-content;
  background: var(--primary-color);
  color: #fff;
  border: none;
  padding: .75rem 1.5rem;
  border-radius: 25px;
  cursor: pointer;
}
#contact-form button:hover {
  opacity: 0.9;
}

/* ========== FOOTER ========== */
footer {
  margin-top: auto;
  text-align: center;
  padding: 1rem 0;
  background: #222;
  color: #fff;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 600px) {
  #animated-text { font-size: 2.5rem; }
  nav ul { flex-wrap: wrap; }
}
/* hide until we trigger fade-in */
.hidden {
  opacity: 0;
}

/* per-character fade in for the animated header */
#animated-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(1em);
  animation: fadeInChar 0.3s ease forwards;
}
@keyframes fadeInChar {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* simple fade‐in for tagline & button */
.fade-in {
  animation: fadeInText 0.5s ease forwards;
}
@keyframes fadeInText {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* 1) Hide the toggle by default, show on small screens */
#menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1rem;
  color: #fff;
  cursor: pointer;
}
#menu-toggle .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* — Desktop vs Mobile visibility — */
.desktop-menu {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
}
.mobile-menu {
  width: fit-content;           /* calculates width based on the widest child */ 
  width: moz-fit-content;      /* Firefox prefix */ 
  width: webkit-fit-content;   /* WebKit prefix */

  min-width: 8rem;              /* optional: ensure a reasonable minimum width */ 
  position: relative;
  display: none;
}

/* — Mobile label (selected item + arrow) — */
#mobile-menu-label {
  display: inline-block;
  background: var(--primary-color);
  color: #fff;
  padding: 0.75rem 1rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
#mobile-menu-label .arrow {
  margin-left: 0.5rem;
  transition: transform 0.3s ease;
}

/* — Dropdown list styling — */
#mobile-menu-list {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  display: none;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 8rem;
  z-index: 1000;
}
#mobile-menu-list.hidden {
  display: none;
}
#mobile-menu-list li a {
  display: block;               /* full-width clickable area */ 
  white-space: nowrap;          /* prevent line wraps */
  padding: 0.75rem 1rem;
  color: var(--secondary-color);
  text-decoration: none;
}
#mobile-menu-list li a:hover,
#mobile-menu-list li a.active {
  background: var(--bg-light);
}
#mobile-menu-list:not(.hidden) {
  display: block;               /* only show when JS removes .hidden */
}

/* — Show mobile menu, hide desktop at small widths — */
@media (max-width: 768px) {
  .desktop-menu {
    display: none;
  }
  .mobile-menu {
    display: block;
  }
}