/* ============================================================
   components.css — Shared UI Components
   ============================================================ */

/* ══ NAVBAR — transparent over hero, white on scroll ══ */
.navbar {
  position: fixed; inset-block-start:0; inset-inline:0;
  z-index: 100; height: var(--nav-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
.navbar--scrolled {
  background: #ffffff;
  border-bottom-color: var(--gray-200);
  box-shadow: 0 2px 18px rgba(0,0,0,0.09);
}
/* Solid white navbar variant (for pages without hero video) */
.navbar--solid {
  background: #ffffff !important;
  border-bottom: 1px solid var(--gray-200) !important;
  box-shadow: 0 2px 18px rgba(0,0,0,0.09) !important;
}
.navbar__inner { height:100%; display:flex; align-items:center; justify-content:space-between; }

.navbar__logo { display:flex; align-items:center; }
.navbar__logo-img {
  height: 100px; width:auto; object-fit:contain; display:block;
  /* White over transparent hero */
  filter: brightness(0) invert(1);
  transition: filter 0.35s;
}
.navbar--scrolled .navbar__logo-img,
.navbar--solid    .navbar__logo-img { filter: none; }

.navbar__links { display:flex; align-items:center; gap:28px; }
.navbar__link {
  font-size: 18px; font-weight:500;
  color: rgba(255,255,255,0.85);
  transition: color 0.2s; white-space:nowrap; text-decoration:none;
}
.navbar__link:hover {
  transition: all 0.5s; white-space:nowrap; text-decoration:none;
  color: white;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.422), 0 0 20px rgba(255,255,255,0.3);
}
.navbar--scrolled .navbar__link,
.navbar--solid    .navbar__link { color:var(--gray-600); }
.navbar--scrolled .navbar__link:hover,
.navbar--solid    .navbar__link:hover {
  color: var(--accent);
  text-shadow: none;
}

/* Admin CTA button in navbar */
.navbar__link--cta {
  background: #991b1b !important; color: white !important;
  padding: 7px 14px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 600; border: none; cursor: pointer;
}
.navbar__link--cta:hover { background: #7f1d1d !important; }

.navbar__burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.navbar__burger span { display:block; width:22px; height:2px; background:white; border-radius:var(--r-full); transition: background 0.35s; }
.navbar--scrolled .navbar__burger span,
.navbar--solid    .navbar__burger span { background: var(--navy); }

.navbar__mobile {
  display:none; flex-direction:column;
  background:#ffffff; padding:10px 20px 14px;
  border-bottom:1px solid var(--gray-200);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.navbar__mobile.open { display:flex; }
.navbar__mobile a { color:var(--gray-600); font-size:15px; font-weight:500; padding:10px 0; border-bottom:1px solid var(--gray-100); transition:color 0.2s; }
.navbar__mobile a:last-child { border-bottom:none; }
.navbar__mobile a:hover { color:var(--navy); }

/* ══ BUTTONS ══ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:var(--r-md); font-size:14px; font-weight:600; line-height:1; border:none; cursor:pointer; transition:all 0.2s; white-space:nowrap; text-decoration:none; }
.btn--primary  { background:var(--accent); color:white; }
.btn--primary:hover  { background:var(--accent-hover); transform:translateY(-1px); box-shadow:0 6px 20px rgba(37,99,235,0.4); }
.btn--secondary { background:transparent; color:white; border:1.5px solid rgba(255,255,255,0.35); }
.btn--secondary:hover { background:rgba(255,255,255,0.1); border-color:white; }
.btn--ghost  { background:var(--gray-100); color:var(--gray-700); border:1px solid var(--gray-200); }
.btn--ghost:hover { background:var(--gray-200); }
.btn--wa     { background:var(--green); color:white; }
.btn--wa:hover { background:var(--green-dk); transform:translateY(-1px); }
.btn--danger { background:#fee2e2; color:#dc2626; border:none; }
.btn--danger:hover { background:#dc2626; color:white; }
.btn--lg { padding:14px 28px; font-size:15px; }
.btn--sm { padding:7px 13px; font-size:13px; }
.btn--block { width:100%; }

/* ══ FORMS ══ */
.form-group { margin-bottom:14px; }
.form-label { display:block; font-size:11px; font-weight:600; color:var(--gray-600); text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; }
.form-control { width:100%; padding:10px 13px; border:1.5px solid var(--gray-200); border-radius:var(--r-md); font-size:14px; color:var(--gray-800); background:white; outline:none; transition:border-color 0.2s, box-shadow 0.2s; font-family:var(--font-body); }
.form-control:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,0.1); }
textarea.form-control { resize:vertical; min-height:100px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:500px) { .form-row { grid-template-columns:1fr; } }

/* ══ FOOTER ══ */
.footer { background:var(--navy); border-top:1px solid rgba(255,255,255,0.07); padding-block:40px 24px; }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:28px; }
.footer__logo-pill { background:white; border-radius:var(--r-md); padding:6px 14px; display:inline-flex; margin-bottom:14px; }
.footer__logo-img { height:65px; width:auto; object-fit:contain; display:block; }
.footer__brand p { color:rgba(255,255,255,0.42); font-size:14px; line-height:1.7; max-width:260px; }
.footer__col-title { color:white; font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; margin-bottom:13px; }
.footer__links { display:flex; flex-direction:column; gap:8px; }
.footer__links a { color:rgba(255,255,255,0.42); font-size:14px; transition:color 0.2s; }
.footer__links a:hover { color:white; }
.footer__bottom { padding-top:20px; border-top:1px solid rgba(255,255,255,0.08); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:12px; color:rgba(255,255,255,0.26); }

/* ══ TOAST ══ */
.toast { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:var(--r-md); font-size:14px; font-weight:500; color:white; background:var(--navy); box-shadow:var(--shadow-lg); pointer-events:none; transform:translateY(80px); opacity:0; transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s; }
.toast--visible { transform:translateY(0); opacity:1; }
.toast--success { background:#065f46; }
.toast--error   { background:#991b1b; }

/* ══ RESPONSIVE ══ */
@media (max-width:900px) {
  .navbar__links { display:none; }
  .navbar__burger { display:flex; }
  .footer__grid { grid-template-columns:1fr 1fr 1fr; gap:24px; }
}

@media (max-width:500px) {
  .footer__grid { grid-template-columns:1fr 1fr; }
  .footer__col { display:flex; flex-direction:column; align-items:center; text-align:center; }
  .footer__col--brand { order: -1; }
}