/*--------------------------------------------------------------------------
  1) Design Tokens & Theme
--------------------------------------------------------------------------*/
:root {
  --color-bg:        #f4f4f4;
  --color-surface:   #fff;
  --color-text:      #333;
  --color-primary:   #3366ff;
  --color-success:   #2ecc71;
  --color-error:     #e74c3c;
  --color-hover:     rgba(0,0,0,0.1);
  --color-active:    rgba(0,0,0,0.15);
  --shadow-light:    rgba(0,0,0,0.05);
  --shadow-strong:   rgba(0,0,0,0.2);

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --font-base:       'Helvetica Neue', sans-serif;
  --font-size-base:  1rem;
  --line-height:     1.5;
}

body.theme-dark {
  --color-bg:        #1e1e1e;
  --color-surface:   #2a2a2a;
  --color-text:      #eee;
  --color-hover:     rgba(255,255,255,0.1);
  --color-active:    rgba(255,255,255,0.15);
  --shadow-light:    rgba(255,255,255,0.05);
}

/*--------------------------------------------------------------------------
  2) Base Reset & Utilities
--------------------------------------------------------------------------*/
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.hoverable:hover { background: var(--color-hover); }
.activeable.active,
.activeable[aria-pressed="true"] { background: var(--color-active); }

/*--------------------------------------------------------------------------
  3) Navbar
--------------------------------------------------------------------------*/
.navbar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  backdrop-filter: blur(10px);
  transition: padding .3s, background .3s;
  z-index: 1000;
}
.navbar.scrolled {
  padding: var(--space-md) 0;
  background: var(--color-surface);
}
.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
}
.navbar-logo__img {
  display: block;
  height: 80px;
  width: auto;
}
.hamburger {
  display: none;
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--color-text);
  cursor: pointer;
}
.nav-menu {
  display: flex;
  gap: 1.25rem;
  list-style: none;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .5rem;
  font-weight: 600;
  color: var(--color-text);
  transition: color .2s;
}
.nav-link:hover {
  color: var(--color-primary);
}

/*--------------------------------------------------------------------------
  4) Mobile Navbar
--------------------------------------------------------------------------*/
@media (max-width: 768px) {
  .hamburger { display: block; }
  .nav-menu {
    position: absolute;
    top: 100%; left: 0;
    width: 100%;
    flex-direction: column;
    background: var(--color-surface);
    box-shadow: 0 4px 6px var(--shadow-strong);
    display: none;
  }
  .nav-menu.active { display: flex; }
  .nav-item { width: 100%; }
  .nav-link {
    padding: 1rem var(--space-lg);
    font-size: 1.25rem;
  }
  .navbar-logo__img { height: 48px; }
}

/*--------------------------------------------------------------------------
  5) Main & Container
--------------------------------------------------------------------------*/
.main-body {
  margin-top: 5%;
  flex: 1;
  width: 100%;
}
@media (max-width: 768px) {
  .main-body { margin-top: 15%; }
}

/*--------------------------------------------------------------------------
  6) Footer
--------------------------------------------------------------------------*/
.site-footer {
  position: relative;
  background: #333;                /* or your gradient / var(--color-surface) */
  color: #ccc;                     /* or var(--color-text) */
  padding: 2rem 1rem;              /* adjust your vertical spacing */
  padding-top: 3rem;               /* extra top padding so content sits nicely */
  border-top-left-radius: 91px;    /* optional: curve the top‑left corner */
  overflow: hidden;
}

/* Top branding row stays as before but with no skew */
.site-footer__top {
  padding-bottom: 1rem;
  background: inherit;
  /* remove any z‑index or skew properties you added before */
}

.site-footer__branding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.site-footer__logo {
  height: 80px;
}
.site-footer__divider {
  margin: 0 .5rem;
  color: #777;
}
.site-footer__slogan {
  flex: 1;
  color: #aaa;
  font-size: .9rem;
}
.site-footer__social a {
  color: #ccc;
  margin-left: .75rem;
  font-size: 1.1rem;
  transition: color .2s;
}
.site-footer__social a:hover {
  color: #fff;
}

.site-footer__main {
  display: flex;
  gap: 2rem;
  padding: 2rem 0;
}
.site-footer__col {
  flex: 1;
  min-width: 180px;
}
.site-footer__col h5 {
  color: #fff;
  margin-bottom: .75rem;
}
.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__links li {
  margin: .5rem 0;
}
.site-footer__links a {
  color: #ccc;
  transition: color .2s;
}
.site-footer__links a:hover {
  color: #fff;
}

.site-footer__col address,
.site-footer__col p {
  font-size: .9rem;
  margin: .5rem 0;
}
.site-footer__col i {
  margin-right: .5rem;
  color: #aaa;
}

.site-footer__newsletter {
  display: flex;
  flex-direction: column;
}
.site-footer__newsletter input {
  padding: .75rem;
  border: none;
  border-radius: 4px 4px 0 0;
  margin-bottom: .25rem;
}
.site-footer__newsletter button {
  padding: .75rem;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 0 0 4px 4px;
  cursor: pointer;
  transition: background .2s;
}
.site-footer__newsletter button:hover {
  background: darken(var(--color-primary), 10%);
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #444;
  padding: 1rem 0;
  font-size: .85rem;
}
.site-footer__credit {
  color: #777;
}

@media (max-width: 768px) {
  .site-footer__branding,
  .site-footer__main,
  .site-footer__bottom {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: var(--space-md);
  }
  .site-footer__divider,
  .site-footer__slogan { display: none; }
}