/* HKSoka Blog — Shared Stylesheet
   Path: /styles/blog.css
   Used by: all blog posts and service pages
   Theme: Professional business platform — corporate, reliable
   ---------------------------------------- */

:root{
  /* Corporate palette */
  --c-bg:        #f3f2ef;   /* warm paper background */
  --c-surface:   #ffffff;
  --c-surface-2: #f4f2ee;
  --c-border:    #e0dfdc;
  --c-border-2:  #d6d4d0;
  --c-divider:   #ebe9e6;

  /* Text */
  --c-text:      #1d2226;   /* near-black, slight blue */
  --c-text-2:    #38434f;
  --c-text-mute: #5e6b78;
  --c-text-dim:  #8a96a3;

  /* Brand accent — corporate blue (original, not LinkedIn) */
  --c-accent:    #0a5fb4;
  --c-accent-h:  #084a8c;
  --c-accent-bg: #eaf2fb;

  /* Status */
  --c-warn:      #b67800;
  --c-warn-bg:   #fdf6e3;

  /* Shape & motion */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  --sh-1: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04);
  --sh-2: 0 0 0 1px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.06);
  --sh-hover: 0 0 0 1px rgba(10,95,180,0.20), 0 4px 14px rgba(10,95,180,0.10);

  --t-fast: 120ms ease;
  --t-med:  180ms ease;
}

*{box-sizing:border-box;margin:0;padding:0;}

html{ -webkit-text-size-adjust:100%; }

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--c-bg);
  color:var(--c-text);
  line-height:1.55;
  font-size:15px;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---- Header ---- */
header{
  position:sticky;
  top:0;
  z-index:10;
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  padding:0 24px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 1px 0 rgba(0,0,0,0.02);
}
header a{
  text-decoration:none;
  color:var(--c-text);
  font-weight:600;
  letter-spacing:-0.005em;
  transition:color var(--t-fast);
}
header a:hover{ color:var(--c-accent); }

.logo{
  font-size:1.15rem;
  font-weight:700;
  letter-spacing:-0.02em;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.logo::before{
  content:"";
  width:22px;
  height:22px;
  border-radius:5px;
  background:linear-gradient(135deg,var(--c-accent),var(--c-accent-h));
  display:inline-block;
}

.back{
  font-size:0.85rem;
  color:var(--c-text-mute);
  font-weight:500;
  padding:6px 12px;
  border-radius:var(--r-pill);
  transition:background var(--t-fast),color var(--t-fast);
}
.back:hover{
  background:var(--c-accent-bg);
  color:var(--c-accent);
}

/* ---- Main layout ---- */
main{
  max-width:744px;
  margin:0 auto;
  padding:32px 24px 64px;
}

/* On wider screens, give article body the "feed card" treatment */
@media(min-width:720px){
  main{
    background:var(--c-surface);
    border:1px solid var(--c-border);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-1);
    margin-top:24px;
    margin-bottom:32px;
    padding:40px 56px 56px;
  }
}

/* ---- Typography ---- */
.meta{
  font-size:0.8rem;
  color:var(--c-text-dim);
  margin-bottom:10px;
  font-weight:500;
  letter-spacing:0.01em;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.meta::after{
  content:"";
  flex:0 0 auto;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--c-text-dim);
  display:none;
}

h1{
  font-size:1.85rem;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.022em;
  margin-bottom:16px;
  color:var(--c-text);
}

.subtitle{
  font-size:1.05rem;
  color:var(--c-text-mute);
  margin-bottom:28px;
  line-height:1.5;
  font-weight:400;
}

h2{
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:-0.012em;
  margin-top:36px;
  margin-bottom:12px;
  color:var(--c-text);
  padding-bottom:8px;
  border-bottom:1px solid var(--c-divider);
}

h3{
  font-size:1rem;
  font-weight:600;
  letter-spacing:-0.005em;
  margin-top:22px;
  margin-bottom:6px;
  color:var(--c-text);
}

p{
  margin-bottom:14px;
  color:var(--c-text-2);
  font-size:0.95rem;
  line-height:1.65;
}

a{
  color:var(--c-accent);
  text-decoration:none;
  font-weight:500;
  transition:color var(--t-fast);
}
a:hover{ color:var(--c-accent-h); text-decoration:underline; }

strong{ color:var(--c-text); font-weight:600; }

/* ---- Lang bar ---- */
.lang-bar{
  display:flex;
  gap:6px;
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--c-divider);
}
.lang-bar a{
  font-size:0.8rem;
  color:var(--c-text-mute);
  text-decoration:none;
  font-weight:600;
  padding:5px 12px;
  border:1px solid var(--c-border);
  background:var(--c-surface);
  border-radius:var(--r-pill);
  transition:all var(--t-fast);
}
.lang-bar a:hover{
  background:var(--c-accent-bg);
  border-color:var(--c-accent);
  color:var(--c-accent);
  text-decoration:none;
}

/* ---- Highlight block ---- */
.highlight{
  background:var(--c-accent-bg);
  border:1px solid #cfe0f3;
  border-left:3px solid var(--c-accent);
  padding:14px 18px;
  border-radius:var(--r-md);
  margin:20px 0;
  font-size:0.9rem;
  color:var(--c-text-2);
  line-height:1.55;
}
.highlight p{ color:inherit; font-size:inherit; margin-bottom:8px; }
.highlight p:last-child{ margin-bottom:0; }

/* ---- Disclaimer block ---- */
.disclaimer{
  background:var(--c-warn-bg);
  border:1px solid #f3e5b8;
  border-left:3px solid var(--c-warn);
  padding:14px 18px;
  border-radius:var(--r-md);
  margin:28px 0;
  font-size:0.85rem;
  color:var(--c-text-2);
  line-height:1.55;
  position:relative;
}
.disclaimer p{ color:inherit; font-size:inherit; margin-bottom:6px; }
.disclaimer p:last-child{ margin-bottom:0; }

/* ---- Example block ---- */
.example{
  background:var(--c-surface-2);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  padding:14px 18px;
  margin:14px 0;
  font-size:0.9rem;
  color:var(--c-text-2);
  font-style:normal;
  line-height:1.6;
  position:relative;
  padding-left:42px;
}
.example::before{
  content:"\201C";
  position:absolute;
  left:14px;
  top:6px;
  font-size:2rem;
  line-height:1;
  color:var(--c-text-dim);
  font-family:Georgia,serif;
}

/* ---- Tag row ---- */
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:14px 0 22px;
}
.tag{
  font-size:0.75rem;
  background:var(--c-surface);
  color:var(--c-text-mute);
  padding:4px 10px;
  border-radius:var(--r-pill);
  border:1px solid var(--c-border);
  font-weight:500;
  letter-spacing:0.005em;
  transition:all var(--t-fast);
  cursor:default;
}
.tag:hover{
  background:var(--c-accent-bg);
  border-color:#cfe0f3;
  color:var(--c-accent);
}
.tag::before{
  content:"#";
  color:var(--c-text-dim);
  margin-right:2px;
  font-weight:600;
}

/* ---- Stack grid ---- */
.stack-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:14px 0 24px;
}
.stack-item{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  padding:12px 14px;
  font-size:0.875rem;
  color:var(--c-text);
  font-weight:500;
  transition:all var(--t-fast);
}
.stack-item:hover{
  border-color:var(--c-border-2);
  box-shadow:var(--sh-1);
}
.stack-item strong{
  display:block;
  font-size:0.68rem;
  color:var(--c-text-dim);
  margin-bottom:3px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:600;
}

/* ---- CTA block ---- */
.cta{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  color:var(--c-text);
  border-radius:var(--r-lg);
  padding:28px 32px;
  margin-top:40px;
  text-align:left;
  box-shadow:var(--sh-1);
  position:relative;
  overflow:hidden;
}
.cta::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,var(--c-accent),var(--c-accent-h));
}
.cta p{
  color:var(--c-text-mute);
  margin-bottom:16px;
  font-size:0.95rem;
}
.cta a,.cta a.btn{
  display:inline-block;
  background:var(--c-accent);
  color:#fff;
  text-decoration:none;
  padding:8px 20px;
  border-radius:var(--r-pill);
  font-weight:600;
  font-size:0.9rem;
  letter-spacing:0.005em;
  border:1px solid var(--c-accent);
  transition:background var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
  box-shadow:0 1px 2px rgba(10,95,180,0.20);
}
.cta a:hover,.cta a.btn:hover{
  background:var(--c-accent-h);
  border-color:var(--c-accent-h);
  text-decoration:none;
  box-shadow:0 2px 6px rgba(10,95,180,0.28);
}
.cta a:active,.cta a.btn:active{ transform:translateY(1px); }

/* ---- Footer ---- */
footer{
  text-align:center;
  padding:32px 24px 40px;
  font-size:0.78rem;
  color:var(--c-text-dim);
  border-top:1px solid var(--c-divider);
  margin-top:8px;
}
footer a{
  color:var(--c-text-mute);
  text-decoration:none;
  font-weight:500;
  margin:0 8px;
}
footer a:hover{ color:var(--c-accent); text-decoration:underline; }

/* ---- Blog index: post list ---- */
.post-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.post-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  padding:18px 22px;
  text-decoration:none;
  color:inherit;
  display:block;
  transition:border-color var(--t-med),box-shadow var(--t-med),transform var(--t-med);
}
.post-card:hover{
  border-color:#cfe0f3;
  box-shadow:var(--sh-hover);
  text-decoration:none;
  transform:translateY(-1px);
}
.post-card:hover .post-title{ color:var(--c-accent); }

.post-date{
  font-size:0.75rem;
  color:var(--c-text-dim);
  margin-bottom:6px;
  font-weight:500;
  letter-spacing:0.02em;
  text-transform:uppercase;
}
.post-title{
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:6px;
  letter-spacing:-0.01em;
  color:var(--c-text);
  line-height:1.35;
  transition:color var(--t-fast);
}
.post-summary{
  font-size:0.88rem;
  color:var(--c-text-mute);
  line-height:1.55;
}

/* ---- Selection ---- */
::selection{
  background:var(--c-accent-bg);
  color:var(--c-accent-h);
}

/* ---- Focus visibility ---- */
a:focus-visible,
.post-card:focus-visible,
.cta a:focus-visible{
  outline:2px solid var(--c-accent);
  outline-offset:2px;
  border-radius:var(--r-sm);
}

/* ---- Responsive ---- */
@media(max-width:720px){
  body{ font-size:14.5px; }
  main{ padding:24px 20px 56px; }
  h1{ font-size:1.55rem; }
  .subtitle{ font-size:0.98rem; }
  h2{ font-size:1.12rem; }
  .cta{ padding:22px; }
}

@media(max-width:480px){
  .stack-grid{ grid-template-columns:1fr; }
  header{ padding:0 16px; }
  main{ padding:20px 16px 48px; }
}