/* Common CSS for Japanese Reptile Care Blog */
/* Shared across all 73 HTML files */

/* CSS Variables */
:root {
  --brown-dark: #4a3218; --brown-mid: #7a5230; --brown-light: #b8865a;
      --brown-pale: #f5ede0; --brown-bg: #faf6f0; --green-acc: #5a7a3a;
      --green-pale: #eaf2e0; --text-main: #2c2218; --text-muted: #7a6a58;
      --white: #ffffff; --shadow: 0 2px 12px rgba(74,50,24,0.1);
      --radius: 10px; --radius-sm: 6px;
}

/* Body */
body {
  font-family: 'Hiragino Mincho ProN','Yu Mincho','ＭＳ 明朝',Georgia,serif; background: var(--brown-bg); color: var(--text-main); line-height: 1.9; font-size: 15px;
}

/* Header */
header {
  background: var(--brown-dark); padding: 20px 24px 16px; border-bottom: 3px solid var(--brown-light);
}

/* Header Inner */
.header-inner {
  max-width: 1060px; margin: 0 auto; display: flex; align-items: center; gap: 16px;
}

/* Header Logo */
.header-logo {
  width: 54px; height: 54px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--brown-light);
}

/* Header Title */
.header-title {
  font-size: 1.4rem; color: var(--white); font-weight: bold;
}

/* Header Subtitle */
.header-subtitle {
  font-size: 0.75rem; color: rgba(255,255,255,0.7); margin-top: 3px; font-family: 'Hiragino Kaku Gothic ProN',sans-serif;
}

/* Nav Inner */
.nav-inner {
  max-width: 1060px; margin: 0 auto; padding: 0 24px; display: flex; gap: 2px; flex-wrap: wrap;
}

/* Nav Links */
nav a {
  color: rgba(255,255,255,0.9); padding: 10px 18px; font-size: 0.85rem; font-family: 'Hiragino Kaku Gothic ProN',sans-serif; display: block; transition: background 0.2s;
}

/* Nav Links Hover */
nav a:hover {
  background: rgba(255,255,255,0.15); text-decoration: none; color: var(--white);
}

/* Breadcrumb */
.breadcrumb {
  max-width: 1060px; margin: 0 auto; padding: 10px 24px; font-size: 0.78rem; font-family: 'Hiragino Kaku Gothic ProN',sans-serif; color: var(--text-muted);
}

/* Main Container */
.container {
  max-width: 1060px; margin: 0 auto; padding: 32px 24px 56px; display: grid; grid-template-columns: 1fr 290px; gap: 36px;
}

/* ===== Mobile responsive ===== */
@media (max-width: 900px) {
  .container {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px 14px 40px;
  }
  .header-inner { gap: 12px; }
  .header-title { font-size: 1.15rem; }
  .header-subtitle { font-size: 0.7rem; }
  .nav-inner { padding: 0 12px; gap: 0; }
  nav a { padding: 8px 12px; font-size: 0.8rem; }
  .breadcrumb { padding: 8px 14px; font-size: 0.72rem; }
}

@media (max-width: 600px) {
  body { font-size: 14px; line-height: 1.8; }
  header { padding: 14px 14px 12px; }
  .header-logo { width: 44px; height: 44px; }
  .header-title { font-size: 1.05rem; }
}