/* ==========================================================================
   CLUNKY DESIGN SYSTEM
   Header
   File: /assets/css/layout/header.css

   Sprint 1 canonical version.

   RESPONSIBILITY
   - Site header container
   - Clunky logo
   - Header positioning
   - Header spacing
   - Header-level accessibility states

   DO NOT PUT HERE
   - Navigation menus        -> navigation.css
   - Buttons                 -> buttons.css
   - Hero content            -> hero.css
   - Global typography       -> typography.css
   - Global layout primitives -> layout.css

   FUTURE EXTENSION POINTS
   1. .site-header--scrolled
      Add scroll-state styling here if/when JS adds a scrolled class.

   2. .site-header--transparent
      Add transparent/overlay header variant here if required.

   3. .header-container
      Extend only for global header structure changes.
========================================================================== */


/* ==========================================================================
   1. HEADER
========================================================================== */

.site-header {
  position: relative;
  z-index: 100;

  width: 100%;

  background: var(
    --color-surface,
    #ffffff
  );

  border-bottom: 1px solid var(
    --color-border,
    #e5e7eb
  );

  color: var(
    --color-text,
    #111827
  );
}


/* ==========================================================================
   2. HEADER CONTAINER
========================================================================== */

.header-container {
  width: min(
    calc(100% - 2rem),
    var(--width-wide, 1200px)
  );

  min-height: 4.5rem;

  margin-inline: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 1.5rem;
}


/* ==========================================================================
   3. SITE LOGO
========================================================================== */

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

  flex-shrink: 0;

  gap: 0.625rem;

  color: inherit;
  text-decoration: none;

  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;

  letter-spacing: -0.025em;

  transition:
    opacity 180ms ease,
    transform 180ms ease;
}


.site-logo:hover {
  opacity: 0.82;
}


.site-logo:focus-visible {
  outline: 3px solid var(
    --color-focus,
    #2563eb
  );

  outline-offset: 4px;

  border-radius: 0.25rem;
}


/* ==========================================================================
   4. LOGO MARK
========================================================================== */

.site-logo-mark {
  width: 2rem;
  height: 2rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 0.625rem;

  background: var(
    --color-primary,
    #111827
  );

  color: var(
    --color-primary-contrast,
    #ffffff
  );

  font-size: 0.875rem;
  font-weight: 800;

  letter-spacing: -0.02em;
}


/* ==========================================================================
   5. LOGO TEXT
========================================================================== */

.site-logo-text {
  display: inline-block;

  color: var(
    --color-heading,
    #111827
  );
}


/* ==========================================================================
   6. HEADER ACTIONS
========================================================================== */

.header-actions {
  display: flex;
  align-items: center;

  gap: 0.75rem;

  flex-shrink: 0;
}


/* ==========================================================================
   7. SKIP LINK
==========================================================================

   The HTML page contains:

   <a class="skip-link" href="#main-content">
     Skip to main content
   </a>

   This keeps the link visually hidden until keyboard users need it.
========================================================================== */

.skip-link {
  position: fixed;

  top: 0.75rem;
  left: 0.75rem;

  z-index: 1000;

  padding: 0.75rem 1rem;

  border-radius: 0.5rem;

  background: var(
    --color-primary,
    #111827
  );

  color: var(
    --color-primary-contrast,
    #ffffff
  );

  font-weight: 700;

  text-decoration: none;

  transform: translateY(-150%);

  transition: transform 180ms ease;
}


.skip-link:focus {
  transform: translateY(0);
}


/* ==========================================================================
   8. FUTURE EXTENSION — SCROLLED HEADER
==========================================================================

   Future JavaScript may add:

   <header class="site-header site-header--scrolled">

   Keep scroll-specific header changes here.

   Example future direction:

   .site-header--scrolled {
     position: sticky;
     top: 0;
     box-shadow: var(--shadow-sm);
   }

   Do not activate this yet.
========================================================================== */


/* ==========================================================================
   9. DARK MODE
========================================================================== */

@media (prefers-color-scheme: dark) {

  .site-header {
    background: var(
      --color-surface-dark,
      #0f172a
    );

    border-bottom-color: var(
      --color-border-dark,
      #273449
    );

    color: var(
      --color-text-dark,
      #f8fafc
    );
  }


  .site-logo-text {
    color: var(
      --color-heading-dark,
      #f8fafc
    );
  }


  .site-logo-mark {
    background: var(
      --color-primary-dark,
      #f8fafc
    );

    color: var(
      --color-primary-dark-contrast,
      #0f172a
    );
  }

}


/* ==========================================================================
   10. RESPONSIVE
========================================================================== */

@media (max-width: 767px) {

  .header-container {
    width: min(
      calc(100% - 1.5rem),
      var(--width-wide, 1200px)
    );

    min-height: 4rem;

    gap: 1rem;
  }


  .site-logo {
    font-size: 1rem;
  }


  .site-logo-mark {
    width: 1.875rem;
    height: 1.875rem;
  }

}


@media (prefers-reduced-motion: reduce) {

  .site-logo,
  .skip-link {
    transition: none;
  }

}