/*
 * Path: css/components/contact.css
 * Purpose: Contact section layout, brand block, and context-specific tweaks
 * Depends on: css/core/tokens.css, css/core/layout.css, css/components/buttons.css
 * Version: 0.9.0 (pre-1.0)
 */

/* -- BRAND BLOCK */
#contact .brand-block{ width: clamp(160px, 45vw, 250px); }
#contact .brand-block .logo-box{ width: 100%; margin: 0; position: relative; }
#contact .brand-block .logo-box picture,
#contact .brand-block .logo-box img{ width: 100%; height: auto; display: block; }
#contact .brand-block .logo-box .trademark{
  top: 0; right: 0; opacity: 1;
  font-size: clamp(6px, 1vw, 8px);
  line-height: 1; transform: none;
}
#contact .brand-block .tagline-static{
  color: var(--text);
  display: block; margin-top: 6px; text-align: right;
  font-size: clamp(13px, 1.05vw, 16px); line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#contact .brand-block .tagline-static .service-mark{
  font-size: .6em; vertical-align: super;
}

@media (max-width: 640px){
  #contact .brand-block{
    width: clamp(120px, 46vw, 200px);
    margin-inline: auto;
  }
  #contact .brand-block .logo-box{ width: 100%; max-width: 100%; }
  #contact .brand-block .logo-box img{ width: 100%; height: auto; }
  #contact .brand-block .tagline-static{
    text-align: center; white-space: normal;
  }
}

/* -- LAYOUT */
#contact .container{ width: min(980px, 92vw); }

@media (min-width: 768px){
  #contact .grid.cols-2{
    /* Two equal columns, centered. Each track grows up to 450px equally. */
    grid-template-columns: repeat(2, minmax(280px, 450px));
    justify-content: center;
    align-items: start;
    column-gap: 40px;
  }
  #contact .grid.cols-2 > :not(.contact-social){
    display: grid;
    justify-items: start;
    align-content: start;
    text-align: left;
    width: 100%;
    max-width: 450px; /* match grid track cap for symmetry */
  }
}

@media (max-width: 767.98px){
  #contact .grid.cols-2{
    grid-template-columns: 1fr;
    justify-items: left;
    row-gap: 18px;
  }
}

/* Park LinkedIn under left column on desktop */
@media (min-width: 768px){
  #contact .grid.cols-2 > .contact-social{
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
}

/* Nav list in right column: keep a readable line length */
#contact nav[aria-label="Site navigation"]{
  max-width: 36ch;
}
#contact nav[aria-label="Site navigation"] ul{
  padding-left: 0;
}

/* LinkedIn button context (inherits .cta visuals) */
#contact .contact-social{ margin-top: 10px; }
#contact .contact-social .cta{
  width: var(--btn-size);
  height: var(--btn-size);
  padding: 0;                       /* override .cta’s 10px 16px */
  border-radius: var(--btn-radius); /* match icon buttons */
  display: inline-flex; align-items: center; justify-content: center;
}
#contact .contact-social .cta i{
  font-size: var(--icon-size);
  line-height: 1;
}


/* Contact nav link styling: subtle fade, no underline, proper focus states */
#contact nav a {
  /* Default color */
  color: var(--ec-teal-450);
  text-decoration: none;

  /* Progressive enhancement: smooth color blend using color-mix */
  --ec-link-mix: 0%;
  color: color-mix(in srgb, var(--ec-teal-500) var(--ec-link-mix), var(--ec-teal-450));

  /* Animations without going full Times Square */
  transition: color .18s ease, text-shadow .18s ease;
}

#contact nav a:hover,
#contact nav a:focus-visible {
  /* Drive the blend toward the darker teal */
  --ec-link-mix: 100%;
  text-shadow: 0 0 .01px currentColor; /* fractional softening to make the fade feel richer */
}

/* Keyboard accessibility that doesn’t scream */
#contact nav a:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec-teal-450) 25%, transparent);
  border-radius: 6px;
}

/* Active press feedback (tiny nudge darker) */
#contact nav a:active {
  --ec-link-mix: 100%;
  filter: brightness(0.96);
}

/* Motion sensitivity: if someone opted out, stop being precious */
@media (prefers-reduced-motion: reduce) {
  #contact nav a {
    transition: none;
  }
}