/*
Theme Name: HXL Theme
Theme URI: https://haoxinlin.com
Author: Haoxin Lin
Description: Hand-drawn + pixel personal homepage
Version: 1.3
License: GNU General Public License v2 or later
Text Domain: hxl-theme
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --color-paper:        #f5f0e8;
  --color-paper-dark:   #ede6d5;
  --color-paper-hover:  #e5dcc8;
  --color-ink:          #2c2417;
  --color-ink-light:    #6b5d4f;
  --color-fold:         #c8b89a;

  --color-pixel-red:    #d64045;
  --color-pixel-teal:   #3d9970;
  --color-pixel-amber:  #e6a817;
  --color-pixel-blue:   #4a7fbd;
  --color-pixel-purple: #7c5cbf;

  --font-hand:   'Caveat', cursive;
  --font-pixel:  'Press Start 2P', monospace;
  --font-body:   'Noto Sans SC', 'Open Sans', sans-serif;

  --shadow-sketch: 4px 4px 0 var(--color-ink);
  --shadow-sketch-sm: 2px 2px 0 var(--color-ink);
  --border-sketch: 2px solid var(--color-ink);

  --max-width: 1100px;
  --section-gap: 100px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-ink);
  background-color: var(--color-paper);
  background-image: url('assets/images/paper-texture.svg');
  background-repeat: repeat;
  background-size: 200px 200px;
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-pixel-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-decoration-style: wavy;
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.hxl-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.hxl-section {
  padding: var(--section-gap) 0;
}

.hxl-section-title {
  font-family: var(--font-hand);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  color: var(--color-ink);
  position: relative;
  display: inline-block;
  margin-bottom: 48px;
  line-height: 1.2;
}

.hxl-section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--color-pixel-amber);
  clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);
}

/* ============================================================
   CARDS
   ============================================================ */
.hxl-card {
  background: var(--color-paper-dark);
  border: var(--border-sketch);
  box-shadow: var(--shadow-sketch);
  padding: 24px;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hxl-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--color-ink);
}

/* ============================================================
   BUTTONS (pixel style)
   ============================================================ */
.hxl-btn {
  font-family: var(--font-pixel);
  font-size: 10px;
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--border-sketch);
  box-shadow: var(--shadow-sketch-sm);
  padding: 8px 16px;
  cursor: none;
  transition: transform 0.1s, box-shadow 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
}

.hxl-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--color-ink);
  background: var(--color-paper-hover);
}

.hxl-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--color-ink);
}

.hxl-btn.is-active {
  background: var(--color-pixel-amber);
}

/* ============================================================
   FOOTER LINK COLOR — always loaded, beats global blue link
   ============================================================ */
.hxl-footer-bar a,
.hxl-footer-beian a {
  color: var(--color-ink-light) !important;
  text-decoration: none;
}

.hxl-footer-bar a:hover,
.hxl-footer-beian a:hover {
  color: var(--color-ink) !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --section-gap: 64px;
  }

  .hxl-container {
    padding: 0 16px;
  }
}