/*
  skills.css
  ---------
  Styles for the standalone skills page.

  Notes:
  - Uses CSS variables in :root for easy tuning of sizes and colors.
  - The page is a centered container (`.skills-page`) with stacked rows of skills.
  - Each `.skill-row` contains a logo on the left and a `.skill-meta` column on the right.
  - The `.home-button` is positioned near the header; it's static on small screens.
*/

:root {
  --content-width: 920px;        /* max width of the central content column */
  --accent: #0b78f6;            /* accent color used for links */

  /* Logo / typography sizes (desktop) */
  --logo-size: 132px;           /* desktop logo width */
  --title-size: 2.625rem;       /* skill title size (desktop) */
  --level-size: 2.375rem;       /* skill level size (desktop) */

  /* Mobile fallbacks */
  --logo-size-mobile: 108px;    /* logo width on smaller screens */
  --title-size-mobile: 2.0rem;
  --level-size-mobile: 1.8rem;

  /* header/home button */
  --home-btn-size: 48px;
}

/* Reset and base */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #ffffff;
  color: #111;
}

.main { min-height: 100vh; }

/* Page container: center content and constrain width */
.skills-page {
  max-width: var(--content-width);
  margin: 40px auto;
  padding: 20px;
}

/* Header: contains home-button and page title */
.skills-header {
  position: relative;                    /* container for absolute home button */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  margin-bottom: 18px;
}

/* Home button placed left of the centered title; on mobile it becomes static */
.home-button {
  display: inline-block;
  position: absolute;
  left: 0;
  transform: translateX(-6%);
}
.home-button-img {
  width: var(--home-btn-size);
  height: var(--home-btn-size);
  object-fit: contain;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.home-button-img:hover,
.home-button-img:focus {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(11,120,246,0.18);
  opacity: 0.95;
}

/* Page title */
.skills-title {
  font-size: clamp(28px, 6vw, 44px);
  margin: 6px 0;
}

/* Skills list: vertical list of rows */
.skills-list { margin-top: 18px; }
.skills-list ul { list-style: none; padding: 0; margin: 0; }

/* Each row: logo left, meta column right */
.skill-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 8px;
  border-bottom: 1px solid #eee;
}
.skill-row:last-child { border-bottom: none; }

.skill-logo {
  width: var(--logo-size);
  height: auto;
  object-fit: contain;
}

.skill-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* left-align the text column */
}
.skill-meta h3 {
  margin: 0;
  font-size: var(--title-size);
}
.skill-meta .skill-level {
  margin-top: 6px;
  font-size: var(--level-size);
  color: #666;
}

/* Optional back-link (kept for compatibility) */
.back-link {
  text-align: center;
  margin: 28px 0;
}
.back-link a { color: var(--accent); text-decoration: none; }
.back-link a:hover { text-decoration: underline; }

/* Responsive adjustments for small screens */
@media (max-width: 520px) {
  .skills-page { margin: 20px; padding: 14px; }
  .skill-logo { width: var(--logo-size-mobile); }
  .skill-meta h3 { font-size: var(--title-size-mobile); }
  .skill-meta .skill-level { font-size: var(--level-size-mobile); }
  .home-button { position: static; transform: none; margin-right: 8px; }
}