/* ==========================================================================
   components.css
   ==========================================================================
   Visual appearance of reusable components only: color, typography,
   border, radius, shadow, and interactive-state (hover/active/focus/
   disabled) styling. No positioning, sizing, flex/grid arrangement, or
   spacing-as-layout lives here — that's layout.css. No breakpoints — that's
   responsive.css. No keyframe/reveal animation — that's animations.css.

   Every value below is a token from base.css. Where a locked spec value
   (e.g. a 1.5px button border) isn't itself a spacing/radius token, it's
   used as a literal because it's an approved Design Foundation value, not
   an invented one — spacing/color/radius/type still always go through
   tokens.
   ========================================================================== */


/* ==========================================================================
   Skip Link
   ==========================================================================
   NOTE: the conventional "visually hidden until focused" skip-link pattern
   requires `position` (absolute off-screen by default, moved on-screen on
   focus), which is out of scope for this file's rules and was never added
   to layout.css either. Styled here as a small, always-visible bar at the
   very top of the page instead — still the first focusable element and
   fully functional, just not the traditional hide-until-focus treatment.
   Flagging this as a real gap, not a silent workaround.
   ========================================================================== */

.skip-link {
  background-color: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-h4);
  padding-block: var(--space-8);
  padding-inline: var(--space-16);
  border-radius: var(--radius-sm);
}


/* ==========================================================================
   Site Header & Logo
   ========================================================================== */

.site-header {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.logo {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-h4);
  color: var(--color-text-primary);
  transition: color var(--duration-fast) var(--ease-standard);
}

.logo:hover {
  color: var(--color-accent-secondary);
}


/* ==========================================================================
   Navigation
   ========================================================================== */

.nav__link {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-small);
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-standard);
}

.nav__link:hover {
  color: var(--color-text-primary);
}

/* Current-section indicator. Not yet set anywhere (navigation.js is
   currently a no-op per the locked JS architecture) — styled now as
   forward-compatible, semantic groundwork: aria-current="page" is the
   correct ARIA hook for "current item in a set of nav links" and can be
   added by navigation.js later with no HTML/CSS changes needed. */
.nav__link[aria-current="page"] {
  color: var(--color-accent-secondary);
}

/* Mobile nav dropdown panel backdrop — layout.css owns its position/
   display, this owns only its appearance as an overlay surface. */
.nav--mobile {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  font-family: var(--font-body);
  font-weight: var(--weight-h4);
  font-size: var(--text-body);
  border-radius: var(--radius-md);
  border: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    transform var(--duration-instant) var(--ease-standard);
}

.btn:active {
  transform: scale(0.98);
}

.btn:disabled {
  background-color: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  border-color: transparent;
  pointer-events: none;
}

/* Primary — dark text on the accent fill is a hard contrast requirement
   (the accent does not pass AA under white text), not a style choice. */
.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-bg);
  padding-block: var(--space-16);
  padding-inline: var(--space-24);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
}

.btn--primary:active {
  background-color: var(--color-accent-hover);
}

.btn--secondary {
  background-color: var(--color-surface-elevated);
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent-secondary);
  padding-block: var(--space-16);
  padding-inline: var(--space-24);
}

.btn--secondary:hover {
  background-color: var(--color-accent-hover-subtle);
}

.btn--secondary:active {
  border-color: var(--color-accent-hover);
}

/* Outline — the locked spec calls for 14px/20px padding, which isn't on
   the spacing scale; --space-12/--space-24 are the nearest existing
   tokens (both are an equal-distance round on the 14px side), used rather
   than inventing new values. */
.btn--outline {
  background-color: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  padding-block: var(--space-12);
  padding-inline: var(--space-24);
}

.btn--outline:hover {
  background-color: var(--color-surface-elevated);
}

.btn--outline:active {
  border-color: var(--color-border-strong);
  background-color: var(--color-surface-elevated);
}

.btn--text {
  background-color: transparent;
  color: var(--color-link);
  padding-block: var(--space-4);
  padding-inline: 0;
  text-decoration: none;
}

.btn--text:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}


/* ==========================================================================
   Icon Buttons
   Covers every icon-only control: the generic .icon-btn (social links),
   plus .mobile-menu-toggle and .back-to-top, which are functionally the
   same component under different class names required by the locked HTML.
   Grouped to avoid duplicating identical declarations across all three.

   NOTE: .icon-btn itself has no width/height anywhere in layout.css (only
   .mobile-menu-toggle and .back-to-top were sized there) — sizing is out
   of scope for this file per its rules, so social-icon buttons currently
   have no explicit tap-target dimensions. Flagging as a layout.css gap to
   close in a follow-up, not something to fix here.
   ========================================================================== */

.icon-btn,
.mobile-menu-toggle,
.back-to-top {
  background-color: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.icon-btn:hover,
.mobile-menu-toggle:hover,
.back-to-top:hover {
  background-color: var(--color-surface-elevated);
  color: var(--color-text-primary);
}


/* ==========================================================================
   Hero Text
   ========================================================================== */

.hero__greeting {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  color: var(--color-text-secondary);
}

.hero__name {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-text-primary);
}

.hero__title {
  font-family: var(--font-body);
  font-size: var(--text-subtitle);
  font-weight: var(--weight-subtitle);
  line-height: var(--leading-subtitle);
  color: var(--color-text-primary);
}

.hero__intro {
  font-family: var(--font-body);
  font-size: var(--text-body-large);
  font-weight: var(--weight-body-large);
  line-height: var(--leading-body-large);
  color: var(--color-text-secondary);
}


/* ==========================================================================
   Section Header
   ==========================================================================
   The <h2> here is semantically correct (Hero already owns the page's one
   <h1>), but visually these ARE the "major section titles" the Design
   Foundation defines as H1-sized — semantic level and visual size are
   deliberately decoupled per that spec, not a mismatch.
   ========================================================================== */

.section-header h2 {
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
  color: var(--color-text-primary);
}

.section-header__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-subtitle);
  font-weight: var(--weight-subtitle);
  line-height: var(--leading-subtitle);
  color: var(--color-text-secondary);
}


/* ==========================================================================
   Cards — shared foundation
   Background/border/radius shared by every card type; hover/focus
   behavior differs per type below, since not every card is equally
   "interactive" (Project Card links out, Skill/Certificate don't).
   ========================================================================== */

.project-card,
.skill-category,
.certificate-card,
.resume-card {
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}


/* ==========================================================================
   Project Card
   The only card with focusable children (GitHub/Demo links), so it's also
   the only card that gets a :focus-within treatment — Skill/Certificate
   have no focusable content, so a focus-within rule on them would be
   unreachable, dead CSS.
   ========================================================================== */

.project-card:hover,
.project-card:focus-within {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  transition:
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.project-card__image {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.project-card__title,
.certificate-card__title,
.skill-category__title,
.education-entry__title {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
  color: var(--color-text-primary);
}

.project-card__description {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
}


/* ==========================================================================
   Certificate Card
   ========================================================================== */

.certificate-card:hover {
  border-color: var(--color-border-strong);
  transition: border-color var(--duration-base) var(--ease-standard);
}

.certificate-card__issuer {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-small);
  color: var(--color-text-secondary);
}

.certificate-card__date {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-caption);
  color: var(--color-text-secondary);
}


/* ==========================================================================
   Skill Category
   ========================================================================== */

.skill-category:hover {
  border-color: var(--color-border-strong);
  transition: border-color var(--duration-base) var(--ease-standard);
}


/* ==========================================================================
   Education Entry
   Deliberately not a card (no background/border/radius) — kept quiet and
   factual per the locked component spec. A bottom divider between entries
   is the one visual treatment it gets, which is exactly what the
   --color-divider token exists for; there's no separate .divider class
   anywhere in the locked HTML for this to attach to instead.
   ========================================================================== */

.education-entry {
  border-bottom: 1px solid var(--color-divider);
}

.education-entry:last-child {
  border-bottom: none;
}

.education-entry__institution {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-small);
  color: var(--color-text-secondary);
}

.education-entry__status {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}


/* ==========================================================================
   Resume Card
   No hover treatment by design — the card itself isn't a link; the button
   inside handles its own interactive states independently.
   ========================================================================== */

.resume-card__summary {
  font-family: var(--font-body);
  font-size: var(--text-subtitle);
  font-weight: var(--weight-subtitle);
  line-height: var(--leading-subtitle);
  color: var(--color-text-secondary);
}


/* ==========================================================================
   Chips, Skill Badges & Status Badge
   Chip and Skill Badge share the same 12px-padding pill treatment defined
   in the Design Foundation, differentiated by font (mono for Chip's
   tech-stack identifiers, body for Skill Badge's plain labels) and
   background token, so the two remain visually distinct component types.
   ========================================================================== */

.chip {
  padding: var(--space-12);
  background-color: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.skill-badge {
  padding: var(--space-12);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}

/* No --color-warning-bg token exists in base.css, so this uses a bordered
   treatment (warning-colored text + border, transparent fill) rather than
   inventing a new tinted-background value — stays within "only use
   existing tokens." Padding here is a judgment call: unlike Chip/Skill
   Badge, the locked spec never gave Status Badge a literal padding value
   to match against. */
.status-badge {
  padding-block: var(--space-4);
  padding-inline: var(--space-12);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--weight-h4);
  color: var(--color-warning);
}


/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer__copyright {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

.site-footer__nav a {
  font-family: var(--font-body);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-footer__nav a:hover {
  color: var(--color-text-primary);
}