/* Packon branding overrides (keeps Tailwind CDN utilities intact)
   Drop this file next to index.html and keep the existing Tailwind CDN <link>.
   You can expand this with more component styles as you refine the site.
*/

:root{
  /* Brand palette */
  --packon-navy: #0b1f3a;
  --packon-navy-2: #12335a;
  --packon-slate: #0f172a;
  --packon-text: #0b1220;
  --packon-muted: #475569;
  --packon-accent: #f59e0b; /* safety amber (optional) */
  --packon-white: #ffffff;
}

/* Background used by the template's body class "gradient" */
.gradient{
  background: linear-gradient(90deg, var(--packon-navy) 0%, var(--packon-navy-2) 100%);
}

/* Optional: if you switch body text to dark later, use this helper */
.packon-light{
  background: var(--packon-white);
  color: var(--packon-text);
}

/* Brand buttons (use alongside Tailwind utilities if you want) */
.packon-btn{letter-spacing:.01em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  border-radius:0.375rem; /* rounded-md */
  padding:0.9rem 1.5rem;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.packon-btn:focus{ outline: 2px solid rgba(245,158,11,.35); outline-offset: 2px; }
.packon-btn:hover{ transform: translateY(-1px); }
.packon-btn--primary{
  background: var(--packon-white);
  color: var(--packon-slate);
}
.packon-btn--primary:hover{ background: rgba(255,255,255,.92); }
.packon-btn--dark{
  background: var(--packon-slate);
  color: var(--packon-white);
}
.packon-btn--dark:hover{ background: #111c33; }

/* Link accent */
.packon-link{ color: var(--packon-accent); }
.packon-link:hover{ filter: brightness(0.95); }

/* Navbar tweaks: makes the mobile menu button less "pink" */
#nav-toggle{ color: var(--packon-accent); }
#nav-toggle:hover{ color: rgba(15,23,42,.85); }


body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}


/* Packon layout tweaks */
body { background: #ffffff; }
.packon-header {
  background: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(15,23,42,0.08);
}
.packon-nav a { color: rgba(15,23,42,0.72); }
.packon-nav a:hover { color: rgba(15,23,42,0.95); }
.packon-logo { color: rgba(15,23,42,0.95); }


/* Logo helpers */
img[alt="Packon Group"]{
  display:block;
}