/* ---------------------------------------------------------------------
   Record Express - header & footer styles
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */

.site-header {
   border-bottom: 1px solid var(--grey-200);
   background: white;
   position: sticky;
   top: 0;
   z-index: 100;
}

.site-header-inner {
   max-width: var(--container-max);
   margin: 0 auto;
   padding: var(--space-sm) var(--container-padding);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--space-md);
   position: relative;
}

.logo {
   display: inline-flex;
   align-items: center;
}

.logo img {
   height: 64px;
   width: auto;
   display: block;
}

.header-actions {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
}

.nav-toggle {
   display: none;
   flex-direction: column;
   justify-content: center;
   gap: 5px;
   width: 32px;
   height: 32px;
   padding: 4px;
   border: none;
   background: none;
   cursor: pointer;
}

.nav-toggle-bar {
   display: block;
   width: 100%;
   height: 2px;
   background: var(--grey-900);
   transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-panel {
   display: flex;
   align-items: center;
   gap: var(--space-md);
}

@media (min-width: 1024px) {
   .lang-select {
      margin-left: var(--space-lg);
   }
}

.main-nav {
   display: flex;
   align-items: center;
   gap: var(--space-md);
}

.nav-link {
   text-decoration: none;
   color: var(--grey-900);
   font-size: var(--font-size-base);
   transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link:focus-visible {
   color: var(--main-dark);
}

.lang-select {
   border: none;
   background: transparent;
   font-family: inherit;
   font-size: 1.2rem;
   cursor: pointer;
   padding: 4px 2px;
   color: inherit;
   outline: none;
   -webkit-appearance: none;
   appearance: none;
}

.lang-select:hover {
   opacity: 0.75;
}

/* ---------------------------------------------------------------------
   Mobile header
   --------------------------------------------------------------------- */

@media (max-width: 1023px) {
   .nav-toggle {
      display: flex;
   }

   .nav-panel {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: var(--space-sm);
      background: white;
      border-bottom: 1px solid var(--grey-200);
      padding: var(--space-sm) var(--container-padding) var(--space-md);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
   }

   .nav-panel.is-open {
      display: flex;
   }

   .main-nav {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-xs);
   }

   .nav-link {
      padding: var(--space-xs) 0;
      width: 100%;
   }

   .header-cta {
      display: none;
   }

   .logo img {
      height: 40px;
   }

   .lang-select {
      align-self: flex-start;
   }

   .trust-bar-inner {
      gap: var(--space-sm);
   }

   .trust-item:nth-child(3) {
      display: none;
   }
}

@media (max-width: 480px) {
   .trust-item:nth-child(2) {
      display: none;
   }
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */

.site-footer {
   background: var(--grey-900);
   color: var(--grey-300);
}

.site-footer-inner {
   max-width: var(--container-max);
   margin: 0 auto;
   padding: var(--space-lg) var(--container-padding);
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: var(--space-lg);
}

.footer-col {
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
}

.footer-logo {
   height: 60px;
}

.footer-tagline {
   font-size: var(--font-size-sm);
   color: var(--grey-500);
       text-align: center;
}

.footer-social {
   color: var(--grey-400);
   display: inline-flex;
   align-self: center;
   margin-top: var(--space-xs);
   transition: color var(--transition-fast);
}

.footer-social:hover,
.footer-social:focus-visible {
   color: white;
}

.footer-heading {
   font-size: var(--font-size-sm);
   font-weight: 700;
   color: white;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   margin-bottom: var(--space-xs);
}

.footer-col a {
   font-size: var(--font-size-sm);
   color: var(--grey-300);
   text-decoration: none;
   transition: color var(--transition-fast);
}

.footer-col a:hover,
.footer-col a:focus-visible {
   color: white;
}

.site-footer-bottom {
   border-top: 1px solid var(--grey-800);
   padding: var(--space-sm) var(--container-padding);
   text-align: center;
   font-size: var(--font-size-sm);
   color: var(--grey-500);
}

/* ---------------------------------------------------------------------
   Mobile footer
   --------------------------------------------------------------------- */

@media (max-width: 768px) {
   .site-footer-inner {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-md);
   }
}

@media (max-width: 480px) {
   .site-footer-inner {
      grid-template-columns: 1fr;
   }
}