/**
 * MAK International — premium UI layer (uses tokens.css)
 */

/* Typography */
body,
* {
  font-family: var(--font-sans);
}

body {
  background: var(--color-surface);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

/* Header — clean white bar matching logo */
.site-header {
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

/* Homepage header overlays the hero and becomes solid only after scrolling. */
.home-page .site-header {
  position: fixed;
  inset: 0 0 auto;
  width: 100%;
  background: linear-gradient(180deg, rgba(0, 37, 59, .58), rgba(0, 37, 59, 0));
  backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease;
}

.home-page .site-header.is-scrolled,
.home-page .site-header.nav-open {
  background: rgba(0, 90, 130, .96);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, .16);
  box-shadow: 0 8px 26px rgba(0, 36, 56, .22);
}

.home-page .site-nav-link,
.home-page .site-navdrop-trigger,
.home-page .site-login {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 28, 46, .42);
}

.home-page .site-nav-link:hover,
.home-page .site-nav-link.active,
.home-page .site-navdrop-trigger:hover,
.home-page .site-navdrop-trigger.active,
.home-page .site-navdrop.open .site-navdrop-trigger {
  color: #fff;
  background: rgba(255, 255, 255, .14);
}

.home-page .site-login:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1);
}

.home-page .site-account-trigger {
  color: #fff;
  background: rgba(0, 90, 130, .32);
  border-color: rgba(255, 255, 255, .34);
}

.home-page .site-account-caret,
.home-page .site-account-trigger .site-avatar {
  color: #fff;
}

.home-page .site-account-trigger .site-avatar {
  background: rgba(255, 255, 255, .14);
}

.home-page .site-menu-toggle {
  background: rgba(0, 90, 130, .3);
  border-color: rgba(255, 255, 255, .4);
}

.home-page .site-menu-toggle span {
  background: #fff;
}

.home-page .hero,
.home-page .slides {
  width: 100%;
}

@media (max-width: 960px) {
  .home-page .site-nav {
    background: #fff;
  }

  .home-page .site-nav-link,
  .home-page .site-navdrop-trigger {
    color: #30343b;
    text-shadow: none;
  }

  .home-page .site-nav-link:hover,
  .home-page .site-nav-link.active,
  .home-page .site-navdrop-trigger:hover,
  .home-page .site-navdrop-trigger.active,
  .home-page .site-navdrop.open .site-navdrop-trigger {
    color: var(--color-primary);
    background: var(--color-accent-light);
  }
}

.site-header .logo img {
  height: 48px;
  max-width: min(280px, 42vw);
  width: auto;
  object-fit: contain;
}

.site-wordmark,
.footer-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  width: max-content;
  font-family: 'Plus Jakarta Sans', sans-serif;
  line-height: 1;
  white-space: nowrap;
}

.site-wordmark-mak,
.footer-wordmark-mak {
  color: var(--color-primary);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.045em;
}

.site-wordmark-name,
.footer-wordmark-name {
  color: var(--color-primary-dark);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-page .site-wordmark-mak,
.home-page .site-wordmark-name {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 28, 46, .36);
}

.footer-wordmark-mak {
  color: var(--color-accent-bright);
  font-size: 34px;
}

.footer-wordmark-name {
  color: #fff;
  font-size: 17px;
}

@media (max-width: 540px) {
  .site-wordmark {
    gap: 6px;
  }

  .site-wordmark-mak {
    font-size: 25px;
  }

  .site-wordmark-name {
    font-size: 12px;
    letter-spacing: .06em;
  }
}

/* Horizontal MAK logo — shared sizing.
   `.side-logo img` is deliberately NOT in this list: the admin sidebar logo is sized
   entirely in app.css (.side-brand / .side-logo), where it scales to fit the brand box.
   brand.css loads after app.css, so any `.side-logo img` rule added here would silently
   win on specificity ties and undo that. Don't re-add it. */
.logo img,
.auth-brand img,
.adminbar .logo img,
.footer-logo img,
.portal-topbar .logo img {
  width: auto;
  object-fit: contain;
}

.auth-brand img {
  height: 44px;
  max-width: 260px;
}

.adminbar .logo img {
  height: 34px;
  max-width: 180px;
}

.footer-logo img {
  height: 52px;
  max-width: 240px;
  margin-bottom: 12px;
  filter: none;
}

.site-nav-link:hover,
.site-nav-link.active,
.site-navdrop-trigger:hover,
.site-navdrop-trigger.active,
.site-navdrop.open .site-navdrop-trigger {
  background: var(--color-accent-light);
  color: var(--color-primary);
}

.site-account-trigger:hover,
.site-account.open .site-account-trigger {
  border-color: rgba(var(--color-accent-rgb), .35);
  box-shadow: var(--shadow-sm);
}

/* Buttons — gradient brand CTA */
.btn {
  border-radius: var(--radius-sm);
  letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.btn-primary {
  background: var(--gradient-brand);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-brand);
}

.btn-primary:hover {
  background: var(--gradient-brand);
  filter: brightness(1.04);
  box-shadow: var(--shadow-brand-lg);
  transform: translateY(-1px);
}

.btn-outline {
  border: 1.5px solid var(--color-accent);
  color: var(--color-primary);
  background: #fff;
}

.btn-outline:hover {
  background: var(--gradient-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-brand);
}

/* Page headers & heroes */
.page-header,
.dash-hero,
.auth-aside {
  background: var(--gradient-hero) !important;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--banner-shadow);
}

.hero-overlay {
  background: linear-gradient(
    118deg,
    rgba(var(--color-primary-rgb), .78) 0%,
    rgba(0, 123, 181, .72) 55%,
    rgba(var(--color-accent-rgb), .55) 100%
  ) !important;
}

/* Cards & surfaces */
.form-card,
.invoice-card,
.connect-card,
.stat-card,
.kpi {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.car-card:hover,
.loc-card:hover,
.mk-card:hover {
  border-color: rgba(var(--color-accent-rgb), .35);
  box-shadow: var(--shadow-md);
}

/* Marketing heroes */
.mk-hero {
  background: var(--gradient-hero) !important;
}

.mk-hero:after {
  border-color: rgba(var(--color-accent-rgb), .14) !important;
}

.mk-button-primary {
  background: var(--gradient-brand) !important;
  box-shadow: var(--shadow-brand) !important;
  border-radius: var(--radius-sm);
}

.mk-button-primary:hover {
  box-shadow: var(--shadow-brand-lg) !important;
}

/* Footer accent */
.footer-logo-text,
.logo-text {
  color: var(--color-brand) !important;
}

.subscribe {
  background: var(--gradient-subscribe) !important;
}

/* Focus rings */
.site-header a:focus-visible,
.site-header button:focus-visible,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid rgba(var(--color-accent-rgb), .28);
  outline-offset: 2px;
}