/* ==========================================================================
   05-COMPONENTS.CSS
   Reusable, named UI components. Each block below is self-contained and
   documented so it can be copied between pages (this is a static, no-build
   site — the header/footer markup is hand-duplicated across pages, not
   templated) without losing context on why it's built the way it is.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Skip link
   Accessibility: lets keyboard/screen-reader users bypass the nav and jump
   straight to <main>. Hidden visually until it receives focus (WCAG 2.4.1).
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -3rem; /* Fixed offset, not a percentage — percentages on `top` for an
                 absolutely positioned element are unreliable when the
                 containing block's height is auto (as body's is here). */
  left: var(--space-3);
  z-index: var(--z-skip-link);
  background-color: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-3);
}

/* --------------------------------------------------------------------------
   Wordmark
   The text-based "ProjectBank" logo. One word, mixed case, set in the
   heading (serif) face per brand usage — no separate logo image exists.
   -------------------------------------------------------------------------- */
.wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

.wordmark:hover {
  color: var(--color-navy); /* Intentionally static — logo isn't a hover-affordance link visually. */
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Site header / primary navigation
   Sticky per the style guide. Appears on About, Projects, Contact, and
   Privacy Policy only — the Landing page has no header/nav at all.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}

.site-nav__list {
  display: flex;
  gap: var(--space-5);
}

.site-nav__list a {
  font-weight: 600;
  color: var(--color-navy);
  padding-block: var(--space-1);
  border-bottom: 2px solid transparent;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  /* Uses the darker --color-copper-hover, not --color-copper: plain copper
     text on this light background measures ~3.5:1 contrast, which fails
     WCAG AA (4.5:1) for normal-size text. The darker shade clears ~4.8:1. */
  color: var(--color-copper-hover);
  border-bottom-color: var(--color-copper-hover);
  text-decoration: none;
}

/* Mobile nav toggle button — hidden on desktop, shown below the breakpoint.
   This is the one piece of interactive JS on the site (see js/main.js).
   The three bars rotate/fade into an "X" when the button reports
   aria-expanded="true" — purely a CSS reaction to the ARIA state JS
   already manages, no extra markup or script needed. */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
}

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-navy);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

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

  .site-nav {
    /* Collapsed by default; JS toggles [data-open] progressive-enhancement
       style. With JS disabled, .no-js keeps the nav visible and stacked so
       the site remains fully usable (see js/main.js and body class). */
    display: none;
    width: 100%;
  }

  .site-nav[data-open='true'],
  .no-js .site-nav {
    display: block;
  }

  .site-header__inner {
    flex-wrap: wrap;
  }

  .site-nav__list {
    flex-direction: column;
    gap: var(--space-2);
    padding-block: var(--space-3);
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Site footer
   Appears on About, Projects, Contact, and Privacy Policy only — never on
   the Landing page. Contains footer nav (Contact, Privacy), copyright, and
   the contact email — no social links, per client confirmation.
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-navy);
  color: var(--color-white);
  /* No margin-top:auto here — the "stick to the bottom of short pages"
     behaviour comes from `body` being a flex column and `main` being
     flex:1 (see 02-reset.css / 03-base.css). A margin-top:auto on this
     element alone does nothing unless its parent is a flex/grid container,
     which body wasn't previously — that was a real bug in an earlier
     draft, fixed here. */
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
  padding-block: var(--space-6);
}

@media (min-width: 640px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.site-footer__nav ul {
  display: flex;
  gap: var(--space-4);
}

.site-footer a {
  color: var(--color-white);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  /* Underline only — no text-colour change. Copper (even the darker
     --color-copper-hover shade) only reaches ~2.9:1 contrast against this
     navy background, which fails WCAG AA. White stays ~15.8:1, so the
     hover/focus affordance here is entirely the underline. */
  text-decoration: underline;
}

.site-footer__copy {
  color: var(--color-white);
  opacity: 0.85;
  font-size: var(--font-size-sm);
}

/* --------------------------------------------------------------------------
   Buttons
   Two variants per the style guide: a solid copper primary and a
   navy-outline secondary. Label text is deliberately bold + sized at
   1.125rem (20.25px at our 18px root) — this isn't a stylistic choice,
   it's what makes the copper-on-white-text combination pass WCAG AA.
   White text on the exact brand copper (#B87333) measures ~3.8:1 contrast,
   which fails AA for normal text (4.5:1) but passes AA for "large text"
   (3:1, defined as 18.66px+ bold or 24px+ regular). Rather than alter the
   client's specified copper hex to force normal-text-level contrast, the
   type is set to qualify as large text instead — a standard, valid way
   accessible design systems handle brand colours that sit below the
   normal-text contrast threshold.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  text-align: center;
  border: 2px solid transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn--primary {
  background-color: var(--color-copper);
  color: var(--color-white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-copper-hover);
  color: var(--color-white);
  text-decoration: none;
}

.btn--secondary {
  background-color: transparent;
  border-color: var(--color-navy);
  color: var(--color-navy);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: var(--color-navy);
  color: var(--color-white);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Page header banner
   Shared by About and Projects (both have a header image + title per the
   content docs). Each page supplies its own background image via a
   modifier class defined in its page-specific stylesheet (e.g.
   .page-header--about in pages/about.css) — this block only holds the
   layout/typography that's identical across both.
   -------------------------------------------------------------------------- */
.page-header {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 160px; /* Reduced by 50% (was 320px) per client feedback */
  padding-block: var(--space-6);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-white);
}

@media (min-width: 768px) {
  .page-header {
    min-height: 210px; /* Reduced by 50% (was 420px) per client feedback */
  }
}

.page-header h1 {
  color: var(--color-white);
  /* Safety net alongside the gradient overlay: guarantees legibility even
     over lighter-toned patches of whatever photo is used behind it. */
  text-shadow: 0 2px 10px rgba(15, 39, 71, 0.45);
}

/* --------------------------------------------------------------------------
   Pullout quote
   A visually distinct quote treatment for testimonial/key-statement copy
   pulled out of body text — larger serif italic with a copper rule,
   distinct from a plain inline <blockquote> (styled minimally in
   03-base.css for any blockquote that doesn't use this component class).
   -------------------------------------------------------------------------- */
.pullout-quote {
  border-left: 4px solid var(--color-copper);
  padding-left: var(--space-5);
  margin-block: var(--space-6);
}

.pullout-quote p {
  font-size: var(--font-size-xl);
  max-width: 60ch;
  margin-bottom: 0;
}